/* ============================================================
   v3.css - loaded ONLY by index.html (was index_v3.html until v4), after styles.css and v2.css.
   Those two are shared with the other pages and must not change, so every
   override for v3 lives here.
   ============================================================ */

@font-face{
  font-family:"Agrandir";
  src:url("../fonts/agrandir-regular.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ---------- the type scale ----------
   One size per role. Fixed values, not clamp(): a size cannot be "the same
   everywhere" while it scales with viewport width. One step-down at 720px. */
:root{
  /* styles.css sets --display with Inter in the fallback chain, and
     `h2.section-title` there outranks the plain `.section-title` rule below,
     so the var is what actually resolves on most headings. Inter is no longer
     loaded on this page, so it is dropped here rather than in the shared file,
     which terms/, privacy-policy/, confirmation/ and schedule/ also read. */
  --display:"Agrandir Wide","Agrandir","Montserrat",system-ui,-apple-system,sans-serif;
  --font-display:"Agrandir Wide","Agrandir","Montserrat",system-ui,-apple-system,sans-serif;

  --t-heading:42px;   /* hero and every h2 */
  --t-sub:24px;       /* card titles */
  --t-body:16px;      /* every paragraph */
  --t-label:13px;     /* eyebrows and card kickers */
  --t-faq:19px;       /* FAQ question row */
  --t-quote:24px;     /* pull quotes */
  --t-num:42px;       /* decorative numerals, at the ceiling */
}
@media (max-width:720px){
  :root{
    --t-heading:30px; --t-sub:20px; --t-body:15px;
    --t-label:12px;   --t-faq:17px; --t-quote:20px; --t-num:30px;
  }
}

/* Body font: Montserrat. Canon, and not a preference:
   source-of-truth/nero-scaling/brand-voice-visual-identity.md reads "Agrandir Wide
   for headings, Montserrat for body. Always, every asset, no substitutions."
   This block held Inter until 2026-09-07, justified on Agrandir's commercial
   licence. That reasoning applies to the display face, not the body one, and
   Montserrat is open-licensed too, so it never held. */
body,
p, li, .section-lead, .nds-section-lead, .faq-a,
.ccs-card p, .why-cell p, .problem-row p{
  font-family:"Montserrat",system-ui,-apple-system,sans-serif;
}

/* headings and sub-headings stay Agrandir Wide */
h1, h2, h3, h4,
.section-title, .nds-section-title, .ccs-card h3, .why-cell h4,
.faq-q, .eyebrow, .nds-eyebrow, .ccs-tagline, .ccs-card-label,
.btn-label, .btn-sub, .spots-label, .spots-left,
.why-stat, .ccs-card-num, .problem-closer, .nds-quote,
/* these live outside .nds-scope, where v2.css never defines --font-display,
   so naming the family directly is the only thing that holds */
.firm-tag, .firm-rev, .firm-cents, .tsplit-label, .tsplit-seg span, .gc-num{
  font-family:"Agrandir Wide","Agrandir","Montserrat",system-ui,sans-serif;
}

/* headings: everything down to the ceiling, including the two that were 60px */
h1.hero-title,
h2.section-title,
.final h2.section-title,
.nds-section-title,
.nds-scope h1{font-size:var(--t-heading) !important;line-height:1.1;}

/* sub-headings */
.ccs-card h3, .why-cell h4{font-size:var(--t-sub) !important;line-height:1.25;}

/* body, replacing the five sizes that were in play */
.section-lead, .nds-section-lead, .final .section-lead,
.faq-a, .ccs-card p, .why-cell p, .problem-row p,
.bub p, .firm-note, .tsplit-note, .gc-step p{
  font-size:var(--t-body) !important;line-height:1.6;
}

/* the remaining roles */
.eyebrow, .nds-eyebrow, .ccs-tagline, .ccs-card-label{font-size:var(--t-label) !important;}
.faq-q{font-size:var(--t-faq) !important;}
.problem-closer, .nds-quote{font-size:var(--t-quote) !important;line-height:1.4;}
.why-stat, .ccs-card-num{font-size:var(--t-num) !important;line-height:1;}

/* button and pill sizes deliberately untouched: those designs are retained */

/* ---------- CTA spacing ----------
   One value drives both gaps. The flex gap alone spaces button to pill, so the
   pill must carry no margin of its own or the two stack and you get double.
   The same value sits above the block, binding the CTA to its section. */
:root{--cta-gap:24px;}
.cta-block{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--cta-gap);
  margin-top:var(--cta-gap) !important;
}
.cta-block .spots-pill{margin-top:0 !important;}
.cta-block.is-hero .spots-pill{margin-top:0 !important;}

/* styles.css gives .final .section-lead a 38px bottom margin, which collapses
   over the block's 24px top margin and wins. Zero it so one value governs. */
.final .section-lead{margin-bottom:0 !important;}

/* ---------- header pill ---------- */
/* links sit next to the CTA rather than spread across the pill */
.pill-nav{justify-content:flex-end !important;margin-right:8px;}
.pill-cta{white-space:nowrap;font-size:.68rem;padding:9px 14px;}
@media (max-width:1180px){ .pill-nav{gap:16px;} .pill-nav a{font-size:.68rem;} }

/* Agrandir Wide's uppercase sits high in the line box, so the chip behind the
   compact logo reads bottom heavy. Measured on the rendered page rather than
   guessed: at 20.8px there is 0.72px of gap above the ink and 4.38px below, so
   the optical correction is half the difference, 1.83px. Expressed in em so it
   holds if the logo size ever changes. */
.pill-logo{--logo-nudge:0.088em;transform:translateY(var(--logo-nudge));}

/* ---------- problem: iOS message thread ---------- */
.bub-thread{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:18px;}
.bub-row{display:flex;}
.bub-row.is-left{justify-content:flex-start;padding-left:var(--nudge,0);}
.bub-row.is-right{justify-content:flex-end;padding-right:var(--nudge,0);}
.bub{
  position:relative;max-width:74%;padding:14px 20px;border-radius:22px;
  background:#e9e5dd;color:#000;
}
.bub p{margin:0;}
.bub-row.is-right .bub{background:var(--cyan);color:#fff;}
.bub-row.is-right .bub strong{color:#fff;}
/* tails */
.bub::after{content:"";position:absolute;bottom:8px;width:14px;height:14px;}
.bub-row.is-left  .bub::after{left:-5px;background:#e9e5dd;
  border-radius:0 0 14px 0;transform:skewX(-18deg);}
.bub-row.is-right .bub::after{right:-5px;background:var(--cyan);
  border-radius:0 0 0 14px;transform:skewX(18deg);}
/* The spend-comparison bubble carries more weight through size and padding,
   not type: body is one value everywhere, so the bubble grows, the text does not. */
.bub.is-wide{max-width:90%;padding:26px 30px;}
.bub.is-wide p{line-height:1.5;}
.bub-hi{color:var(--cyan);}
.bub-row.is-right .bub.is-close{max-width:80%;}
@media (max-width:720px){
  .bub{max-width:92%;}
  .bub.is-wide{max-width:100%;}
  .bub-row.is-left, .bub-row.is-right{padding-left:0;padding-right:0;}
}

/* ---------- why no number: two firms ---------- */
.firm-compare{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
  max-width:720px;margin:32px auto 0;
}
.firm-card{
  border:1px solid var(--line);border-radius:22px;padding:26px 24px;text-align:left;
  background:rgba(0,139,139,0.04);
}
.firm-tag{font-size:var(--t-label);letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan-hi);margin-bottom:12px;}
.firm-rev{font-size:var(--t-body);color:var(--muted);}
.firm-keep{display:flex;align-items:baseline;gap:8px;margin:8px 0 12px;}
.firm-cents{font-size:var(--t-num);line-height:1;color:var(--cyan);}
.firm-unit{font-size:var(--t-body);color:var(--muted);}
.firm-note{margin:0;}
@media (max-width:720px){ .firm-compare{grid-template-columns:1fr;} }

/* ---------- ten firms: where the time goes ---------- */
.tsplit{max-width:760px;margin:36px auto;}
.tsplit-row{margin-bottom:18px;}
.tsplit-label{font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;text-align:left;}
.tsplit-bar{display:flex;height:44px;border-radius:10px;overflow:hidden;}
.tsplit-seg{display:flex;align-items:center;justify-content:center;overflow:hidden;}
.tsplit-seg span{font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;padding:0 6px;}
.is-pros {background:rgba(0,0,0,0.07);} .is-pros span {color:rgba(0,0,0,0.45);}
.is-sales{background:rgba(0,0,0,0.11);} .is-sales span{color:rgba(0,0,0,0.45);}
.is-onb  {background:rgba(0,0,0,0.07);} .is-onb span  {color:rgba(0,0,0,0.45);}
.is-hire {background:rgba(0,0,0,0.11);} .is-hire span {color:rgba(0,0,0,0.45);}
.is-deliv{background:var(--cyan);}      .is-deliv span{color:#fff;}
.is-full{border-radius:10px;}
.tsplit-note{margin:18px auto 0;max-width:660px;text-align:center;}
@media (max-width:720px){
  .tsplit-seg span{font-size:9px;}
  .tsplit-bar{height:38px;}
}

/* ---------- booking: copy left, calendar right ----------
   Rebuilt 2026-09-11. What is load-bearing, and why:

   1. The embed shows Calendly's event-details panel (hide_event_type_details
      was removed from the URL in index.html). With it hidden, Calendly drew a
      narrow calendar-only card centred in a wide frame, so its thin grey card
      border floated in white space on both sides. With it shown, the card is
      details + calendar, then + times once a date is picked, and fills far
      more of the frame.
   2. That card wants roughly 1,060px at full width. The copy column is CAPPED
      at 340px rather than proportional, so every pixel the viewport gains goes
      to the widget. The container caps at 1,500px so the widget tops out near
      1,064px: wide enough for the full layout, not so wide that the card
      floats again on a big monitor.
         widget width = min(vw, 1500) - 56 padding - 40 gap - 340 copy
         1440 -> 1004    1512 -> 1076    1600+ -> 1064
   3. The section's own big heading is gone because Calendly's panel now says
      "The Guarantee Call, 45 min". The copy column is short without it, so it
      is centred against the widget rather than top-aligned; top-aligned left
      a tall empty well under the steps. To go back, set .gc-copy
      align-self:start.
   4. .gc-cal is min-width:0: a grid item defaults to min-content width and the
      iframe would otherwise refuse to shrink and blow out the row.            */
.gc-container{max-width:1500px;}
.gc-grid{
  display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);
  gap:40px;align-items:start;margin-top:8px;
}
.gc-copy{order:1;text-align:left;min-width:0;align-self:center;}
.gc-cal{order:2;min-width:0;}

.gc-eyebrow{margin:0 0 14px;}
.gc-lead{
  margin:0 0 20px;
  font-family:"Agrandir Wide","Agrandir","Montserrat",system-ui,sans-serif;
  font-size:var(--t-sub);line-height:1.25;letter-spacing:-0.01em;color:var(--text);
}
.gc-step{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line);}
.gc-step p{margin:0;}
.gc-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--cyan);color:#fff;
  font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;}
.gc-promise{
  margin:0;padding-top:18px;border-top:1px solid var(--line);
  font-size:var(--t-body);line-height:1.6;color:var(--cyan-hi);
}

/* Stack point stays 1280px. Side by side the widget gets vw-436, and below
   about 1,256px that drops under 820px, where the details panel plus the
   calendar no longer sit comfortably side by side inside Calendly. Stacked,
   the widget gets the full row up to the same 1,064px cap. */
@media (max-width:1280px){
  .gc-grid{grid-template-columns:1fr;gap:28px;}
  .gc-copy{order:1;align-self:auto;max-width:640px;margin:0 auto;width:100%;}
  .gc-cal{order:2;}
  .gc-container{max-width:1200px;}
  .gc-cal .calendly-inline-widget{max-width:1064px;margin:0 auto;}
}

/* ---------- the pay-per-show ledger ----------
   Replaced the chat-bubble thread on 2026-09-07. The bubbles made the strongest
   claim on the page look like small talk; a statement makes the reader count
   the free lines instead of reading past them. Four rows cost nothing, one
   does, and the whole argument is the ratio between them.

   Sits inside .ccs, which is white under daylight, so the panel takes the beige
   ground and the rows sit on it rather than the other way round.               */
.ledger{
  max-width:840px;margin:44px auto 0;text-align:left;
  background:var(--beige);border:1px solid rgba(0,0,0,0.08);
  border-radius:var(--r-lg);overflow:hidden;
}
.ledger-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:19px 28px;border-top:1px solid rgba(0,0,0,0.07);
}
.ledger-row:first-child{border-top:none;}
.ledger-what{font-size:var(--t-body);line-height:1.45;color:var(--text);}
.ledger-cost{
  flex:none;font-family:"Agrandir Wide","Agrandir","Montserrat",system-ui,sans-serif;
  font-size:13px;letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(0,0,0,0.42);white-space:nowrap;
}

/* The one row that costs something. Heavier ground, cyan type, and a rule down
   the left edge so it reads as the total line on a statement. */
.ledger-row.is-charge{
  /* centred rather than baseline: the label is big enough to wrap on a narrow
     desktop, and a chip pinned to the first line then looks stranded. */
  align-items:center;
  background:var(--cyan-soft);
  border-top:1px solid var(--cyan-line);
  box-shadow:inset 3px 0 0 var(--cyan);
  padding-top:23px;padding-bottom:23px;
}
.ledger-row.is-charge .ledger-what{
  font-family:"Agrandir Wide","Agrandir","Montserrat",system-ui,sans-serif;
  font-size:var(--t-sub);line-height:1.25;letter-spacing:-0.01em;
}
.ledger-row.is-charge .ledger-cost{color:var(--cyan-hi);white-space:normal;}

.ledger-after{margin:32px auto 0 !important;max-width:700px;}

.ledger-quote{
  max-width:700px;margin:30px auto 0;
  font-family:"Agrandir Wide","Agrandir","Montserrat",system-ui,sans-serif;
  font-size:var(--t-quote);line-height:1.4;letter-spacing:-0.015em;
  color:var(--text);
}
.ledger-quote span{color:var(--cyan-hi);}

@media (max-width:720px){
  .ledger{margin-top:32px;}
  /* Stacked, because the cost has to stay legible next to a wrapping label and
     a two-line label beside a right-aligned chip reads as a mistake. */
  .ledger-row{
    flex-direction:column;align-items:flex-start;gap:6px;padding:16px 20px;
  }
  .ledger-cost{white-space:normal;}
  .ledger-row.is-charge{padding-top:19px;padding-bottom:19px;}
}

/* ---------- VSL, with the message-match folded in ---------- */
.vsl-match{max-width:660px;margin:0 auto 34px;text-align:center;}
.vsl-match-lead{
  font-family:var(--font-display);font-size:var(--t-sub);line-height:1.3;
  letter-spacing:-0.02em;color:var(--text);margin:0 0 14px;
}
.vsl-match .section-lead + .section-lead{margin-top:12px;}

/* The nine html[data-font="..."] body-font variations that sat here until
   2026-09-07 are gone. They were driven by the ?font= preview toggle in
   index.html, which was always marked "Preview aid, not a shipping feature".
   The direction is settled: Agrandir Wide headings, Montserrat body. */