/* ============================================================
   rawcloser.com — Pricing page (Phase 7.A.12)
   Page-specific rules ONLY for /pricing (pricing.html). Everything
   shared with the landing page — the nav, footer, buttons, card
   surface, .section wrapper, the generic scroll-reveal ruleset
   (.reveal / .r-rise) and the shared brushed-metal tier gradient
   (.metal-text / .metal-text--pro|--max) — is reused from
   components.css and landing.css, both linked ahead of this file.
   Nothing shared is redefined here (per the 7.A.7-fix rule: the
   Pro/Max gradient has ONE definition, in landing.css).

   Consumes tokens.css only — never hardcode a color, spacing, radius,
   type, shadow, or motion value. The raw numbers below are all either
   structural layout dims (card/table/modal rem caps, the table's
   min-width, the modal scrim) — the same latitude the landing page's
   rem caps take — or z-index derived from the existing --z-nav token.
   Each is commented at its use site.
   ============================================================ */

/* ---------- 1. Page intro (the nav's section-1 boundary) ---------- */
/* This intro <section> carries id="hero" — NOT for any hero styling (it is a
   restrained heading block, never a full-viewport hero), but because nav.js
   keys the per-page nav behaviour off #hero: full-size + always-visible while
   #hero is in view, compact + direction-driven past it. Reusing the id is how
   the shared nav.js drives this page unchanged (no rebuild). The top padding
   clears the fixed, transparent nav that overlays it (--space-9, as the landing
   hero uses below the nav) PLUS extra blank space above the title on request —
   the added --space-9 opens the gap wide while staying above the nav-clearing
   floor. Token-derived (2 × --space-9), no raw px. */
.pricing-intro{
  padding-block-start:calc(var(--space-9) * 2);
  padding-block-end:var(--space-8);
  text-align:center;
}

/* Centred heading block, capped so the two-beat heading + subhead read as a
   quiet lead-in — same measure family as the landing pricing-preview head.
   44rem is a structural rem cap, not a token. */
.pricing-intro-inner{
  max-width:44rem;
  margin-inline:auto;
}

/* Display heading — the section-heading weight the landing problem / pricing /
   faq titles use (--text-5xl, one step below the landing hero --text-6xl).
   text-wrap:balance evens the wrap (progressive enhancement). */
.pricing-intro-title{
  font-size:var(--text-5xl);
  text-wrap:balance;
}

/* Subhead — mirrors the landing subheads (size, secondary tone) so the site
   reads as one system. */
.pricing-intro-subhead{
  font-size:var(--text-lg);
  color:var(--color-text-secondary);
  max-width:var(--measure-prose);
  margin-inline:auto;
  margin-top:var(--space-5);
  text-wrap:balance;
}

/* ---------- 2. Plan cards ---------- */
/* Three cards (Basic / Pro / Max) side by side on desktop, stacked on mobile —
   mirrors the app's plan-card layout: tier name, a checkmark list of what the
   tier includes, then the CTA area pinned to the bottom. Mobile-first single
   column; the three columns come in at the shared 60rem breakpoint every
   multi-column block on the site uses. */
/* Gap to the intro above comes from .pricing-intro's own padding-block-end, so
   the grid carries no top margin of its own (avoids a doubled gap). */
.plan-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-5);
}

/* Card shell — the DEFAULT raised card surface, matching the shared .card and
   the landing feature/pricing cards. flex column so the CTA area can pin to the
   bottom (margin-top:auto) and the three cards read as an even row regardless of
   how long each checklist is. */
.plan-card{
  display:flex;
  flex-direction:column;
  background:var(--color-surface-raised);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  padding:var(--space-6);
}

/* Tier name — the card's headline. Basic keeps the normal --color-text
   (inherited); Pro and Max carry `metal-text metal-text--pro|--max` in the
   markup (the shared gradient from landing.css). The box-hugging modifier below
   is the ONLY tier-name style added here — it is not the gradient. */
.plan-name{
  font-size:var(--text-2xl);
}

/* Box-hug the gradient tier names. An <h2> is a block-level flex item and would
   stretch to the full card width, so background-clip:text would clip only the
   left slice of the sweep onto the short word (one flat metal, no sheen).
   align-self:flex-start shrinks the box to the glyphs so the whole
   deep→bright→deep sweep lands across the word — exactly as the landing
   pricing-preview tier names do (.pricing-plan-name--pro|--max). Same reuse, no
   new gradient. */
.plan-name--pro,
.plan-name--max{
  align-self:flex-start;
}

/* Checkmark list — what the tier includes. A quiet lead-in line
   ("Everything in Basic, plus:") sits above the checks on Pro/Max; Basic has
   none. */
.plan-lead{
  font-size:var(--text-base);
  color:var(--color-text-secondary);
  margin-top:var(--space-5);
}

.plan-features{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  margin-top:var(--space-5);
}

/* A Pro/Max card has a lead-in line directly above the list, so the list's own
   top margin is dropped there to keep the lead-in and its checks together. */
.plan-lead + .plan-features{
  margin-top:var(--space-3);
}

/* One checklist row: the check glyph at the left (decorative — the text carries
   the meaning, so the SVG is aria-hidden in the markup), the feature text to its
   right. align-items:flex-start keeps the check aligned to the first line when
   the text wraps to two lines. */
.plan-feature{
  display:flex;
  align-items:flex-start;
  gap:var(--space-3);
  font-size:var(--text-md);
  color:var(--color-text);
}

/* Check glyph box — quiet, monochrome (greyscale premium, no green). flex:0 0
   auto keeps it from squashing as the text wraps. 1.15rem is a structural icon
   dim, sized to sit on the first text line. */
.plan-check{
  flex:0 0 auto;
  width:1.15rem;
  height:1.15rem;
  margin-top:0.1rem;            /* optical nudge onto the first line — structural */
  color:var(--color-text-secondary);
}

.plan-check svg{
  width:100%;
  height:100%;
  display:block;
}

/* CTA area, pinned to the bottom of the card (margin-top:auto pushes it down so
   all three cards' CTA areas line up when the grid stretches them to equal
   height). padding-top guarantees a gap above it even for the shortest card. */
.plan-cta{
  margin-top:auto;
  padding-top:var(--space-6);
}

/* The primary "Try RawCloser" button reuses .btn / .btn-primary (components.css);
   full width inside the card. */
.plan-cta .btn{
  width:100%;
}

/* Trial line under a purchasable card's button (Basic / Pro only — Max has no
   button and no trial line; it carries the Coming Soon badge instead). Quiet
   tertiary tone, centred under the full-width button. */
.plan-trial{
  margin-top:var(--space-3);
  font-size:var(--text-sm);
  color:var(--color-text-tertiary);
  text-align:center;
}

/* ----- Max "Coming Soon" (matches the app: no button, a Coming Soon badge) ----
   The app renders Max's bottom slot as a gold Coming Soon badge in place of the
   Get button. Here it reuses the site's OWN badge idiom — the same transparent
   thin-outlined pill as the features-section Pro/Max tier badges — with the
   shared champagne-gold metal gradient clipped to the "Coming Soon" text
   (.metal-text--max in the markup). Centred in the CTA area where the button
   would be. */
.plan-comingsoon{
  display:flex;
  justify-content:center;
}

/* The pill and the gradient text are SEPARATE elements — exactly like the
   features Pro/Max badge (.feature-tier pill + .feature-tier__text). They MUST
   be split: this pill needs `background:transparent` (no fill), but the
   `background` SHORTHAND resets background-image to none. .metal-text paints the
   gold via a background-IMAGE gradient, and pricing.css loads AFTER landing.css
   at equal specificity — so a `background:transparent` on the SAME element wins
   the cascade and wipes the gradient out, leaving transparent text that shows
   the card through it (invisible). With the gradient on the inner span, this
   pill's transparent background never touches it. Parent .plan-comingsoon (flex)
   centres the pill. */
.plan-comingsoon-badge{
  display:inline-block;
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-pill);
  background:transparent;
  border:1px solid var(--color-border);
  font-size:var(--text-xs);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-normal);
  text-transform:uppercase;
}

/* Two cards per row on phones (Phase 7.A.25), from 23.5rem up to the shared
   60rem three-column breakpoint below. Plain repeat(2, 1fr) with no
   grid-column rule: with three .plan-card items and grid-auto-flow's default
   (row), the grid auto-places item 3 at column 1 / row 2 on its own -- it
   lands left-aligned under Basic, not centred, not spanning. Verified by
   box-model arithmetic by hand, plus CoreText glyph metrics with a greedy
   wrap simulation for the text measurements elsewhere in this block (no
   browser render was performed); nothing extra needs to be written for it,
   and nothing should be (a grid-column:span 2 or a centring rule would
   fight this, not help it).

   FLOOR — why 23.5rem (~376px) and not lower: checked 320px (the last
   320-wide iPhone, the 1st-gen SE; no currently-sold phone is narrower) and
   two-up is indefensible there even after every reduction below finds its
   floor too -- the card lands at 128px, 96px inside its padding, and the
   longest unbreakable feature-list token, '(auto-trigger)', measures
   ~86.4px at --text-sm against ~73.6px of line box: still an overflow, not
   a wrap. Measured (real SF Pro glyph widths via CoreText, greedy word-wrap
   simulation -- not average-glyph-width estimation) the break-even
   viewport where that token first stops overflowing is ~346px. 23.5rem
   clears that with ~15px of real margin rather than matching it edge to
   edge, while still covering every current mainstream phone (iPhone SE
   2nd/3rd-gen at 375px and up, the whole 390-430px iPhone/Android range).
   Below 23.5rem the grid stays the base single column above, unmodified --
   at 320px that single, full-width column measures 208px inside its
   padding and wraps '(auto-trigger)' onto its own line at 2-3 lines total,
   nowhere near overflow. 23.5rem is a structural breakpoint, like the
   existing 60rem one — not a token. */
@media (min-width: 23.5rem) and (max-width: 59.999rem){
  .plan-cards{
    grid-template-columns:repeat(2, 1fr);
    gap:var(--space-4);              /* reduced from --space-5, this range only */
  }

  /* The grid change above alone overflows the card at this range's narrow
     end (measured: a 393px viewport was yielding a ~160px card, ~96px
     inside its --space-6 padding, ~62px of feature-text room after the
     --text-md check icon + its --space-3 gap -- '(auto-trigger)' at 108.8px
     does not fit that regardless of wrapping). Scoped to this range only;
     the >=60rem block below is untouched, so the desktop three-column cards
     keep their normal --space-6 padding / --text-md features. */
  .plan-card{
    padding:var(--space-4);          /* reduced from --space-6, this range only */
  }

  .plan-check{
    width:0.9rem;                    /* reduced from 1.15rem -- no existing
                                         token is an icon dimension, so this
                                         is a new raw value, scoped here only */
    height:0.9rem;
  }

  .plan-feature{
    gap:var(--space-2);              /* reduced from --space-3, this range only */
    font-size:var(--text-sm);        /* reduced from --text-md, this range only */
  }

  /* The "Try RawCloser" CTA wraps to two lines at this range's narrow end
     without this: measured (CoreText, SF Pro Text, weight 500 / --weight-medium)
     the label is ~101px wide at the base --text-base (15px) size, against a
     button interior of ~75-85px once the card's own --space-4 padding above
     and the button's default --space-5 (24px/side) padding-inline are both
     subtracted from a two-up card's share of the viewport at 375-393px. A
     two-line button on a pricing card reads as broken, so both the font-size
     and the horizontal padding step down, this range only. */
  .plan-cta .btn{
    font-size:var(--text-sm);        /* reduced from --text-base, this range only */
    padding-inline:var(--space-3);   /* reduced from --space-5, this range only */
  }
}

/* Three columns at the shared 60rem breakpoint. */
@media (min-width: 60rem){
  .plan-cards{
    grid-template-columns:repeat(3, 1fr);
  }

  /* Taller cards on the side-by-side desktop layout for more presence — a
     min-height floor; the grid still stretches all three to the tallest, and the
     CTA stays pinned to the bottom (margin-top:auto), so the extra height opens
     breathing room above it. Scoped to the desktop breakpoint so stacked mobile
     cards keep their natural height. 34rem is a structural card dim, not a token. */
  .plan-card{
    min-height:34rem;
  }
}

/* ---------- 3. Feature table ---------- */
/* All 11 features in a real <table>, grouped into two <tbody> row groups so the
   differences read at a glance: "Included in every plan" (all three ✓) and
   "What changes between plans" (a Basic/Pro/Max grid). Proper header cells +
   scope attributes; the ✓/— marks carry visually-hidden text alternatives
   (Included / Not included) — never a bare glyph. */

/* Section heading above the table — centred, matching the landing section-title
   weight one step below the intro (--text-4xl). */
.feature-table-section{
  margin-top:calc(var(--space-9) * 2);   /* wide separation from the cards above — 2 × --space-9, no raw px */
}

.feature-table-heading{
  font-size:var(--text-4xl);
  text-align:center;
  text-wrap:balance;
}

.feature-table-sub{
  font-size:var(--text-base);
  color:var(--color-text-secondary);
  text-align:center;
  margin-top:var(--space-3);
}

/* Mobile: the table scrolls HORIZONTALLY inside its own container rather than
   shrinking the text to illegibility (the table keeps its min-width below). The
   wrapper is the only thing that ever scrolls sideways — the page body never
   does. -webkit-overflow-scrolling gives momentum scroll on iOS/macOS. */
.feature-table-wrap{
  margin-top:var(--space-7);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.feature-table{
  width:100%;
  min-width:40rem;              /* keeps columns legible; wrapper scrolls below it — structural */
  border-collapse:collapse;
  font-size:var(--text-base);
}

/* Column headers (Feature / Basic / Pro / Max). The tier columns are centred;
   the feature column is left-aligned and takes the remaining width. A hairline
   under the head row separates it from the body. */
.feature-table thead th{
  padding:var(--space-3) var(--space-4);
  text-align:center;
  font-size:var(--text-sm);
  font-weight:var(--weight-semibold);
  color:var(--color-text);
  border-bottom:1px solid var(--color-border-strong);
}

.feature-table thead th.ft-feature-col{
  text-align:left;
  width:40%;                    /* feature column takes the bulk — structural */
}

/* Row-group header ("Included in every plan" / "What changes between plans") —
   a full-width section label spanning all four columns, quiet muted caps like
   the landing eyebrows / group labels. scope="rowgroup" in the markup ties it to
   its <tbody>. */
.feature-table .ft-group th{
  padding:var(--space-5) var(--space-4) var(--space-2);
  text-align:left;
  font-size:var(--text-sm);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-normal);
  text-transform:uppercase;
  color:var(--color-text-tertiary);
}

/* Feature rows — a hairline between rows, the row header (feature name) left,
   the three mark cells centred. */
.feature-table tbody tr:not(.ft-group){
  border-top:1px solid var(--color-border);
}

.feature-table th[scope="row"]{
  padding:var(--space-4);
  text-align:left;
  font-weight:var(--weight-regular);
  color:var(--color-text);
}

/* A quieter parenthetical inside a feature name (e.g. "(in Selling Dashboard)"). */
.ft-sub{
  color:var(--color-text-tertiary);
}

.feature-table .ft-cell{
  padding:var(--space-4);
  text-align:center;
  vertical-align:middle;
}

/* ✓ mark — a check glyph in the primary tone; the visually-hidden "Included"
   text beside it (markup) is what assistive tech reads. */
.ft-mark--yes{
  display:inline-flex;
  width:1.1rem;                 /* structural icon dim */
  height:1.1rem;
  color:var(--color-text);
}

.ft-mark--yes svg{
  width:100%;
  height:100%;
  display:block;
}

/* — mark — a quiet dash; the visually-hidden "Not included" text carries the
   meaning for assistive tech. */
.ft-mark--no{
  color:var(--color-text-tertiary);
}

/* ---------- 4. The modal ---------- */
/* MOVED TO components.css IN 7.C, and nothing about the /pricing/ modal changed
   in the move — the declarations are byte-identical and components.css is
   already linked before this file on every page that loads it, so the cascade
   is unchanged too.

   THE REASON IT MOVED: it stopped being a pricing component. 7.C adds a success
   modal to the landing final-CTA form, /waitlist/ and /tester/, none of which
   load this file, so the dialog now appears on four of the site's five pages.
   Duplicating 160 lines into components.css and leaving these here would have
   left two definitions of one component, which is the drift components.css
   exists to prevent.

   Behaviour still lives in TWO places and that is the one loose end this move
   does not tie off: pricing.js keeps its own open/close/trap implementation,
   and 7.C's assets/js/modal.js is a second copy of the same logic. modal.js
   explains why pricing.js was left alone. */