/**
 * MEETR pricing page (/pricing-plan/), this template only.
 * Adapted from meetr-pricing-prototype.html. Design tokens live in
 * tokens.css (loaded first, site-wide). The three photo backgrounds
 * (hero, receipt card, video poster) are set as inline custom properties
 * per page load from the uploaded media -- see template-pricing.php --
 * rather than hardcoded urls here, since they're editable content.
 */
.m-pricing *{box-sizing:border-box}
.m-pricing{background:var(--m-bg);color:var(--m-ink);font-family:var(--m-sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.m-pricing img{max-width:100%;display:block}
/* :not(.m-btn) so this never competes with a button variant's own color
   again -- the first fix here only patched .m-btn--ghost/--outline and
   missed .m-btn--primary, which has the identical vulnerability whenever
   rendered as <a> (both "Start free" buttons): a class+element selector
   still beats a single .m-btn--primary class, so its text rendered
   link-blue on a blue background. Excluding .m-btn at the root fixes
   every current and future button variant at once instead of one at a
   time. */
.m-pricing a:not(.m-btn){color:var(--m-blue-dark)}
.m-pricing :focus-visible{outline:3px solid var(--m-sky);outline-offset:3px;border-radius:4px}
.m-wrap{max-width:var(--m-wrap);margin:0 auto;padding:0 28px}

.m-eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--m-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--m-muted);margin:0 0 14px}
.m-eyebrow::before{content:"";width:18px;height:1.5px;background:var(--m-blue)}
/* color is explicit everywhere below, not inherited -- ListingPro's
   dynamic-css.css sets a plain h1,h2,h3...{color:#333} rule that beats
   an inherited value on every heading tag, confirmed live. */
.m-h2{color:var(--m-ink);font-family:var(--m-serif);font-weight:400;font-size:clamp(30px,3.4vw,40px);line-height:1.12;letter-spacing:-.01em;margin:0 0 12px}
.m-lede{color:var(--m-muted);max-width:60ch;margin:0}
.m-section{padding:96px 0}

/* buttons */
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--m-sans);padding:14px 22px;border-radius:8px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.m-btn--primary{background:var(--m-blue);color:#fff}
.m-btn--primary:hover{background:var(--m-blue-dark)}
.m-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.m-btn--ghost:hover{border-color:#fff}
.m-btn--outline{background:#fff;color:var(--m-ink);border-color:var(--m-line)}
.m-btn--outline:hover{border-color:var(--m-ink)}
.m-btn--block{width:100%}
/* plan CTAs are <form><input type=submit>, not <a>, so the submit input needs the same look */
input.m-btn{font-family:var(--m-sans);appearance:none;-webkit-appearance:none}

/* ===== hero ===== */
/* Reverted to background-image on 2026-09-23 (see AUDIT.md): two attempts
   at a real <img> here (position:absolute, then CSS grid) each broke the
   layout differently, at different untested viewport widths -- both
   traced to the same root cause, a replaced element's box not reliably
   stretching to fill .m-hero, whose height comes from .m-wrap's content
   rather than its own explicit height. A background-image paints inside
   its box regardless of how that box's height was determined, so it
   never had this problem. The LCP win is now a <link rel="preload"> in
   template-pricing.php instead. */
.m-hero{position:relative;color:#fff;background:#1b2833 var(--m-hero-image) 62% 18%/cover no-repeat}
.m-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,26,38,.86) 0%,rgba(14,26,38,.62) 48%,rgba(14,26,38,.25) 100%)}
.m-hero .m-wrap{position:relative;padding-top:64px;padding-bottom:110px}
.m-hero .m-eyebrow{color:rgba(255,255,255,.78)}
.m-hero .m-eyebrow::before{background:var(--m-sky)}
.m-hero h1{color:#fff;font-family:var(--m-serif);font-weight:400;font-size:clamp(40px,5.2vw,64px);line-height:1.04;letter-spacing:-.015em;margin:0 0 20px;max-width:15ch}
/* ListingPro's own dynamic-css.css sets a plain h1{color} rule that beats
   an inherited value, so this has to be explicit -- confirmed live, not
   assumed: without it the h1 rendered near-invisible against the hero. */
.m-hero .m-hero__lede{font-size:19px;color:rgba(255,255,255,.88);max-width:54ch;margin:0 0 30px}
.m-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.m-trust{display:flex;gap:8px 26px;flex-wrap:wrap;margin:34px 0 0;padding:0;list-style:none;font-family:var(--m-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}

/* ===== plans ===== */
.m-plans-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:44px}
.m-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.m-plan{background:var(--m-surface);border:1px solid var(--m-line);border-radius:var(--m-radius);padding:34px 30px 30px;display:flex;flex-direction:column}
.m-plan__name{color:var(--m-ink);font-family:var(--m-serif);font-size:26px;margin:0}
.m-plan__price{display:flex;align-items:baseline;gap:8px;margin:18px 0 4px}
.m-plan__price strong{font-family:var(--m-serif);font-weight:400;font-size:58px;line-height:1;letter-spacing:-.02em}
.m-plan__price span{color:var(--m-muted);font-size:15px}
.m-plan__term{font-size:14px;color:var(--m-muted);margin:0 0 20px}
.m-plan__term--waitlist{color:var(--m-gold);font-weight:600;margin-top:-16px}
.m-plan__fit{font-size:15.5px;margin:0 0 24px;padding-bottom:24px;border-bottom:1px solid var(--m-line);min-height:92px}
.m-plan__list-label{font-size:13px;font-weight:600;margin:0 0 12px}
.m-plan ul{list-style:none;margin:0 0 28px;padding:0;flex:1}
.m-plan li{position:relative;padding-left:26px;margin:0 0 11px;font-size:15.5px;line-height:1.45}
.m-plan li::before{content:"";position:absolute;left:2px;top:6px;width:11px;height:6px;border-left:2px solid var(--m-blue);border-bottom:2px solid var(--m-blue);transform:rotate(-45deg)}
.m-plan__note{font-size:13.5px;color:var(--m-muted);margin:-12px 0 24px}
.m-plan form{margin-top:auto}
/* CleanTalk's honeypot sits in every plan form ( template-pricing.php ): the three cards AND the "Choose Pro Plus" button in the ski school section. CleanTalk's own stylesheet hides it with input[class*=apbct].apbct_special_field, but that stylesheet is not on
   this page, and the input printed as a white empty box above the button ( dark Pro Plus card, 2026-10-16 ). Hide it here, so the page never depends on a plugin's stylesheet being loaded.
   Hidden, not removed: a bot still sees and fills it. */
.m-pricing .price-plan-button .apbct_special_field{display:none!important}

.m-plan--featured{background:var(--m-navy);border-color:var(--m-navy);color:#fff;position:relative;box-shadow:0 24px 48px -28px rgba(14,40,65,.7)}
.m-plan--featured .m-plan__name{color:#fff}
.m-plan--featured .m-plan__price span,.m-plan--featured .m-plan__term,.m-plan--featured .m-plan__note{color:rgba(255,255,255,.7)}
.m-plan--featured .m-plan__fit{border-color:rgba(255,255,255,.16)}
.m-plan--featured li::before{border-color:var(--m-sky)}
.m-tag{position:absolute;top:-13px;left:30px;background:var(--m-gold);color:var(--m-navy);font:600 12px/1 var(--m-sans);padding:7px 12px;border-radius:999px}
.m-school{margin:40px 0 0;background:var(--m-panel);border-top:3px solid var(--m-sky);border-radius:0 0 var(--m-radius) var(--m-radius);padding:44px 44px;display:grid;grid-template-columns:1fr 1fr;gap:48px}
.m-school__title{color:var(--m-ink);font-family:var(--m-serif);font-weight:400;font-size:clamp(26px,2.6vw,32px);line-height:1.15;margin:0 0 12px}
.m-school__head p:not(.m-eyebrow){color:var(--m-muted);margin:0 0 24px;max-width:46ch}
.m-school__actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.m-school__link{font-weight:600;font-size:15px}
.m-school__points{margin:0;display:grid;gap:22px;align-content:start}
.m-school__points div{border-top:1.5px solid var(--m-ink);padding-top:14px}
.m-school__points dt{font-family:var(--m-serif);font-size:20px;font-weight:500;margin:0 0 4px}
.m-school__points dd{margin:0;color:var(--m-muted);font-size:15.5px}

/* ===== comparison ===== */
.m-compare{margin-top:56px}
.m-compare summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:16px;padding:12px 18px;border:1px solid var(--m-line);border-radius:8px;background:#fff}
.m-compare summary::-webkit-details-marker{display:none}
.m-compare summary::after{content:"+";font-size:20px;line-height:1;color:var(--m-blue)}
.m-compare[open] summary::after{content:"\2212"}
.m-table-scroll{overflow-x:auto;margin-top:24px;border:1px solid var(--m-line);border-radius:var(--m-radius);background:#fff}
.m-table{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.m-table th,.m-table td{padding:13px 20px;text-align:left;border-bottom:1px solid var(--m-line)}
.m-table thead th{font-family:var(--m-serif);font-weight:500;font-size:19px;background:#fff;position:sticky;top:0}
.m-table td:not(:first-child),.m-table thead th:not(:first-child){text-align:center;width:17%}
.m-table .m-group th{font-family:var(--m-mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--m-muted);background:var(--m-bg);padding-top:18px}
.m-table col.m-col-feat{background:rgba(74,147,236,.05)}
.m-pricing .yes{color:var(--m-blue-dark);font-weight:600}
.m-pricing .no{color:#A7B1BA;font-size:22px;line-height:1}
.m-table tr:last-child td{border-bottom:0}

/* ===== testimonial ===== */
.m-quote{border-left:3px solid var(--m-sky);padding:6px 0 6px 32px;max-width:760px}
.m-quote p{font-family:var(--m-serif);font-style:italic;font-size:clamp(22px,2.4vw,28px);line-height:1.4;margin:0 0 16px}
.m-quote cite{font-family:var(--m-mono);font-style:normal;font-size:12px;letter-spacing:.08em;color:var(--m-muted)}

/* ===== no commission ===== */
.m-split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.m-split p:not(.m-eyebrow){color:var(--m-muted);max-width:52ch}
.m-receipt{background:#fff;border:1px solid var(--m-line);border-radius:var(--m-radius);overflow:hidden}
.m-receipt__img{height:190px;background:var(--m-receipt-image) center 55%/cover}
.m-receipt__body{padding:26px 28px 24px}
.m-receipt__title{font-size:14px;color:var(--m-muted);margin:0 0 14px}
.m-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--m-line);font-variant-numeric:tabular-nums}
.m-row span:last-child{font-weight:500}
.m-row--total{border-bottom:0;padding-top:16px}
.m-row--total span{font-family:var(--m-serif);font-size:26px;font-weight:500}
.m-receipt small{display:block;color:var(--m-muted);font-size:12.5px;margin-top:8px}

/* ===== value ===== */
.m-values{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:40px}
.m-values h3{color:var(--m-ink);font-family:var(--m-serif);font-weight:500;font-size:22px;margin:0 0 8px}
.m-values p{color:var(--m-muted);margin:0;font-size:16px}
.m-values div{border-top:1.5px solid var(--m-ink);padding-top:20px}

/* ===== video (YouTube facade: loads the iframe only on click) ===== */
.m-video{position:relative;margin-top:56px;aspect-ratio:16/9;border-radius:var(--m-radius);overflow:hidden;background:#16222B var(--m-video-poster) center/cover}
.m-video::before{content:"";position:absolute;inset:0;background:rgba(14,26,38,.35)}
.m-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.m-video__play{position:absolute;inset:0;width:100%;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.m-video__icon{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.92);position:relative;transition:transform .15s}
.m-video__icon::after{content:"";position:absolute;left:34px;top:26px;border-left:24px solid var(--m-navy);border-top:16px solid transparent;border-bottom:16px solid transparent}
.m-video__play:hover .m-video__icon{transform:scale(1.06)}

/* ===== FAQ =====
 * The right column (.m-faq-content) is the page's own post_content,
 * edited as core blocks (Heading = a group's category label, Details =
 * one question), not fixed prototype markup -- so these selectors target
 * plain tags/core block classes rather than the prototype's m-faq-group
 * wrapper, and keep working however Scott arranges the blocks. */
.m-faq{display:grid;grid-template-columns:280px 1fr;gap:64px}
.m-faq-content > .wp-block-heading{font-family:var(--m-mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--m-muted);margin:36px 0 6px}
.m-faq-content > .wp-block-heading:first-child{margin-top:0}
.m-faq-content details,.m-faq-content .wp-block-details{border-bottom:1px solid var(--m-line)}
.m-faq-content summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;font-weight:600;font-size:17px}
.m-faq-content summary::-webkit-details-marker{display:none}
.m-faq-content summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:24px;font-weight:400;color:var(--m-blue)}
.m-faq-content details[open] summary::after{content:"\2212"}
.m-faq-content details p{margin:0 0 20px;color:var(--m-muted);max-width:66ch}

/* ===== closing panel (matches home "For pros" panel) ===== */
.m-cta{background:var(--m-panel);border-top:3px solid var(--m-blue);border-radius:0 0 var(--m-radius) var(--m-radius);padding:52px 48px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;margin-bottom:80px}
/* Unlike every other section, the closing panel isn't wrapped in
   .m-section (it sits right after the FAQ with no top padding of its own
   on purpose), which meant it had no bottom breathing room either -- it
   ran straight into the site footer. margin-bottom above fixes that
   without adding unwanted top space. */
.m-cta .m-h2{margin-bottom:8px}
.m-cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ===== responsive ===== */
@media (max-width:960px){
  .m-plans{grid-template-columns:1fr;max-width:520px}
  .m-plan--featured{order:-1}
  .m-plan__fit{min-height:0}
  .m-split,.m-faq,.m-school{grid-template-columns:1fr;gap:36px}
  .m-values{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
  .m-pricing{font-size:16px}
  .m-wrap{padding:0 20px}
  .m-section{padding:68px 0}
  .m-hero .m-wrap{padding-top:48px;padding-bottom:72px}
  .m-hero::before{background:rgba(14,26,38,.74)}
  .m-cta,.m-school{padding:36px 24px}
  .m-cta{margin-bottom:48px}
  .m-hero-actions .m-btn{flex:1}
}

/* Suppress any MailPoet popup form on this page -- present in the
   pre-rebuild meetr-signup.css (see its own comment for the fuller
   reasoning: a modal over the plan cards works against the one thing
   this page exists to do) but dropped when this file replaced it.
   Regression found and fixed 2026-09-19, not part of the original
   rebuild. */
.mailpoet_form_popup{display:none!important}