/* ============================================================================
   tokens.css — Lemn Systems brand values (from context/lemn/website.md Design
   Tokens block, snapshot of brand.md v1, 2026-07-14). The ONLY file carrying
   brand values. base.css references the --c-* roles; the Lemn venture layer
   below re-skins the kit to the approved v5 look (yellow/ink/cream/white).
   ============================================================================ */
:root{
  /* -- Kit color roles -- */
  --c-accent:      #FFD600;   /* yellow: button fills, badges, comparison header */
  --c-accent-dark: #FFE033;   /* button hover only */
  --c-ink:         #0D0D0D;   /* all body text, headings, borders (near-black) */
  --c-bg:          #FFFFFF;   /* primary section background */
  --c-band:        #F6F5F1;   /* cream: alternating section background */
  --c-border:      rgba(13,13,13,0.10);

  /* -- Lemn palette (brand.md v1) -- */
  --y:       #FFD600;
  --y-hover: #FFE033;
  --y-deep:  #E5BE00;
  --amber:   #9A7400;         /* the only readable yellow-family text on light bg */
  --ink2:    #141414;         /* phone-screen gradient only */
  --ink3:    #1A1A1A;         /* phone-screen gradient only */
  --green:   #15A34A;         /* status on light backgrounds */
  --red:     #DC2626;         /* negative/lost state ONLY, badge + icon scale only.
                                 Never a section, card, button or heading fill.
                                 Bad outcomes are marked in red so brand colours are
                                 never the thing a reader reads as "the problem".
                                 Adopted into brand.md v1.1 (2026-08-06). */
  --green-l: #3CCB7F;         /* live-call status on dark phone mockup only */
  --footer:  #000000;         /* footer background only */
  --muted-d: rgba(13,13,13,0.64);
  --muted-d2:rgba(13,13,13,0.45);
  --muted-w: rgba(255,255,255,0.62);
  --muted-w2:rgba(255,255,255,0.40);
  --line-w:  rgba(255,255,255,0.10);

  /* -- Type (single family: Inter) -- */
  --font-head: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* -- Shape + rhythm -- */
  --radius: 14px;
  --container: 1140px;
  --section-y: 96px;
  --section-y-m: 64px;
  --hero-y: 88px;
}

/* ============================================================================
   Lemn venture dials (v5 identity on top of the kit).
   body-prefixed so they win over base.css, which loads after this file.
   ============================================================================ */

/* -- Type scale per brand.md -- */
body h1{font-weight:900;letter-spacing:-0.05em;line-height:0.98;font-size:clamp(2.8rem,5.6vw,4.6rem)}
body h2{font-weight:900;letter-spacing:-0.04em;line-height:1.04;font-size:clamp(2rem,4.2vw,3.2rem)}
body h3,body h4{font-weight:800;letter-spacing:-0.02em}
body .lead{font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.7;color:var(--muted-d);opacity:1}
body a{color:var(--c-ink)}
body .eyebrow{color:var(--amber);font-weight:700}

/* -- Yellow rules: yellow fill ALWAYS carries black text -- */
body .btn{font-weight:800;border-radius:10px}
body .btn-primary{color:#000;box-shadow:0 4px 22px rgba(255,214,0,0.28)}
body .btn-primary:hover{color:#000;background:var(--y-hover)}
body .btn-outline{border:1.5px solid rgba(13,13,13,0.25)}
body .btn-outline:hover{border-color:var(--c-ink);background:rgba(13,13,13,0.04)}
body .tier .badge{color:#000}
body .compare thead .col-popular{color:#000;font-weight:900}
body .compare .col-popular-cell{background:rgba(255,214,0,0.16)}
body .tier.is-popular{border-color:rgba(255,214,0,0.8);background:#FFFDF2;box-shadow:0 10px 34px rgba(255,214,0,0.22)}
body .bullets li::before{background:var(--y)}
body .faq summary::after{color:var(--amber)}
body .guarantee .seal{color:var(--amber)}
body .proto-ribbon{background:var(--c-ink)}

/* Yellow highlighter behind BLACK text (the approved way to use yellow on light) */
.hl{background:linear-gradient(180deg,transparent 58%,rgba(255,214,0,0.6) 58%);padding:0 0.06em;color:var(--c-ink)}

/* Yellow RULE underline (v2.1, Ethan Round 9): a normal underline, not the
   marker block. Headline use only -- .hl stays the treatment for body/quote
   emphasis. Solid yellow at full strength since it sits under text, not behind it. */
.hl-u{color:var(--c-ink);text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:0.075em;text-underline-offset:0.14em;text-decoration-skip-ink:none}

/* [CONFIRM] chip: visible placeholder marker, never faked as final */
.confirm-tag{display:inline-block;font-size:0.62rem;font-weight:800;letter-spacing:0.06em;color:var(--amber);background:rgba(255,214,0,0.18);border:1px dashed rgba(154,116,0,0.5);border-radius:5px;padding:1px 6px;vertical-align:middle;text-transform:uppercase}
.css-note{font-size:0.72rem;color:var(--muted-d2);text-align:center;margin-top:0.7rem;letter-spacing:0.04em}

/* -- Brand mark (CSS-drawn interim lemon mark, per brand.md) -- */
body .brandmark{display:inline-flex;align-items:center;gap:0.6rem;font-weight:900;font-size:1.15rem;letter-spacing:-0.04em;font-family:var(--font-body)}
.brand-mark{width:30px;height:30px;border-radius:8px;flex-shrink:0;background:radial-gradient(circle at 35% 30%,#FFE864,var(--y) 60%,#E5BE00);position:relative;box-shadow:0 2px 10px rgba(255,214,0,0.35);display:inline-block}
.brand-mark::after{content:'';position:absolute;top:5px;right:6px;width:8px;height:8px;border-radius:50% 0 50% 50%;background:#7FAE4B;transform:rotate(10deg)}

/* -- Nav extras -- */
body .nav{background:rgba(255,255,255,0.86);backdrop-filter:blur(14px)}
.nav-right{display:flex;align-items:center;gap:1.1rem}
.nav-phone{font-size:0.9rem;font-weight:600;color:var(--c-ink);display:inline-flex;align-items:center;gap:0.4rem;white-space:nowrap}
.nav-phone svg{color:var(--amber)}
.nav-btn{padding:10px 20px;font-size:0.85rem;min-height:40px}

/* -- Hero badge (green pulse pill) -- */
.hero-badge{display:inline-flex;align-items:center;gap:0.5rem;background:#fff;border:1px solid var(--c-border);box-shadow:0 2px 10px rgba(13,13,13,0.05);padding:0.45rem 0.95rem;border-radius:30px;margin-bottom:1.6rem;font-size:0.78rem;font-weight:600;color:var(--c-ink)}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(21,163,74,0.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(21,163,74,0.5)}70%{box-shadow:0 0 0 7px rgba(21,163,74,0)}100%{box-shadow:0 0 0 0 rgba(21,163,74,0)}}
.hero-microcopy{font-size:0.85rem;color:var(--muted-d);display:flex;align-items:center;gap:0.5rem;margin-top:1.1rem}
.hero-microcopy svg{color:var(--green);flex-shrink:0}

/* -- Phone call mockup (IMG-001: CSS-built element per v5, no photo) -- */
.phone-stage{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}
.phone{width:300px;background:#000;border-radius:38px;padding:12px;border:1px solid rgba(0,0,0,0.2);box-shadow:0 40px 90px -20px rgba(13,13,13,0.45),0 0 70px rgba(255,214,0,0.12);position:relative;z-index:2}
.phone-screen{background:linear-gradient(180deg,var(--ink2),#0c0c0c);border-radius:28px;overflow:hidden;height:560px;display:flex;flex-direction:column}
.phone-notch{height:26px;display:flex;justify-content:center;align-items:flex-start}
.phone-notch::before{content:'';width:90px;height:18px;background:#000;border-radius:0 0 12px 12px}
.call-head{padding:1.1rem 1.25rem 0.9rem;text-align:center;border-bottom:1px solid rgba(255,255,255,0.06)}
.call-status{font-size:0.7rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--green-l);display:flex;align-items:center;justify-content:center;gap:0.4rem;margin-bottom:0.55rem}
.call-status .rec{width:7px;height:7px;border-radius:50%;background:var(--green-l);animation:pulse 2s infinite}
.call-name{font-size:1.05rem;font-weight:800;color:#fff;letter-spacing:-0.02em}
.call-sub{font-size:0.75rem;color:var(--muted-w2);margin-top:0.15rem}
.call-timer{font-size:0.72rem;color:var(--y);font-weight:600;margin-top:0.35rem;font-variant-numeric:tabular-nums}
.transcript{flex:1;padding:1rem;display:flex;flex-direction:column;gap:0.7rem;overflow:hidden}
.bubble{max-width:80%;padding:0.6rem 0.85rem;border-radius:14px;font-size:0.8rem;line-height:1.45;opacity:0;transform:translateY(8px);animation:rise 0.5s forwards}
.bubble.caller{align-self:flex-start;background:rgba(255,255,255,0.08);color:#fff;border-bottom-left-radius:4px}
.bubble.agent{align-self:flex-end;background:var(--y);color:#000;font-weight:500;border-bottom-right-radius:4px}
.bubble .who{display:block;font-size:0.62rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:0.2rem;opacity:0.55}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
.b1{animation-delay:0.3s}.b2{animation-delay:1.3s}.b3{animation-delay:2.4s}.b4{animation-delay:3.6s}
.call-foot{padding:0.9rem 1.25rem 1.2rem;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;border-top:1px solid rgba(255,255,255,0.06)}
.call-pill{flex:1;background:rgba(60,203,127,0.12);border:1px solid rgba(60,203,127,0.3);border-radius:10px;padding:0.5rem;text-align:center;font-size:0.68rem;font-weight:700;color:var(--green-l)}
.phone-float{position:absolute;background:#fff;border:1px solid var(--c-border);border-radius:12px;padding:0.75rem 0.95rem;box-shadow:0 18px 44px rgba(13,13,13,0.18);z-index:3;display:flex;align-items:center;gap:0.6rem;font-size:0.78rem;font-weight:600;color:var(--c-ink)}
.phone-float .ico{width:30px;height:30px;border-radius:8px;background:rgba(255,214,0,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.float-1{top:8%;left:-6%;animation:floaty 4s ease-in-out infinite}
.float-2{bottom:11%;right:-8%;animation:floaty 4s ease-in-out infinite 1.5s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* -- Social proof band: quote + stats strip -- */
.social-quote{font-size:clamp(1.3rem,2.5vw,1.8rem);font-weight:700;letter-spacing:-0.02em;line-height:1.45;color:var(--c-ink);max-width:840px;margin:0 auto 1.6rem}
.social-attr{display:flex;align-items:center;justify-content:center;gap:0.8rem;margin-bottom:2.6rem}
.logo-ph{width:44px;height:44px;border-radius:10px;background:#fff;border:1px dashed rgba(13,13,13,0.25);display:flex;align-items:center;justify-content:center;font-size:0.44rem;color:var(--muted-d);text-align:center;line-height:1.1;padding:3px;flex-shrink:0}
.attr-txt{text-align:left}
.attr-name{font-weight:800;font-size:0.95rem;color:var(--c-ink)}
.attr-role{font-size:0.82rem;color:var(--muted-d)}
.social-stats{display:flex;align-items:center;justify-content:center;gap:2.5rem;flex-wrap:wrap;border-top:1px solid var(--c-border);padding-top:2.1rem;max-width:780px;margin:0 auto}
.ss{display:flex;flex-direction:column;align-items:center;gap:0.15rem}
.ss-num{font-size:1.55rem;font-weight:900;color:var(--c-ink);letter-spacing:-0.03em}
.ss-txt{font-size:0.8rem;color:var(--muted-d);font-weight:500}
.ss-div{width:1px;height:30px;background:var(--c-border)}

/* -- Icon tiles (dark tile, yellow icon) + card tags -- */
.icon-tile{width:48px;height:48px;border-radius:12px;background:var(--c-ink);display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;color:var(--y);flex-shrink:0}
body .card p{font-size:0.95rem;color:var(--muted-d);line-height:1.6;margin-bottom:0}
body .card h3{font-size:1.15rem}
body .card{box-shadow:0 2px 16px rgba(13,13,13,0.05)}
body .card .step-num{background:var(--y);color:#000;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.78rem;font-weight:800;font-family:var(--font-body);margin-bottom:1rem}
.when{display:inline-block;margin-top:0.9rem;font-size:0.72rem;font-weight:700;color:var(--amber);background:rgba(255,214,0,0.2);padding:0.25rem 0.6rem;border-radius:6px;align-self:flex-start}
body .transition-line{font-family:var(--font-body);font-style:normal;font-weight:600;font-size:1.15rem;color:var(--c-ink);text-align:center;max-width:640px;margin:3rem auto 0;line-height:1.55}

/* -- Call summary card (IMG-002: CSS-built element per v5, no photo) -- */
.summary-card{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 20px 50px rgba(13,13,13,0.12);border:1px solid var(--c-border)}
.sc-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--c-border)}
.sc-label{display:flex;align-items:center;gap:0.5rem;font-size:0.72rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--amber)}
.sc-time{font-size:0.74rem;color:var(--muted-d2)}
.sc-row{display:flex;gap:0.7rem;margin-bottom:0.8rem;font-size:0.88rem}
.sc-row .k{color:var(--muted-d2);width:62px;flex-shrink:0;font-weight:600}
.sc-row .v{color:var(--c-ink);font-weight:500}
.sc-status{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--c-border);display:flex;align-items:center;gap:0.5rem;font-size:0.85rem;font-weight:700;color:var(--green)}
.sc-foot{margin-top:0.9rem;font-size:0.82rem;color:var(--amber);font-weight:600}
.inbox-tag{display:inline-flex;align-items:center;gap:0.45rem;font-size:0.8rem;font-weight:700;color:var(--amber);background:rgba(255,214,0,0.2);padding:0.35rem 0.8rem;border-radius:20px;margin-bottom:0.9rem}

/* -- Demo section (phone number + audio player card) -- */
.demo-phone-num{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:900;letter-spacing:-0.03em;color:var(--c-ink);display:inline-flex;align-items:center;gap:0.8rem}
.demo-phone-num svg{color:var(--amber)}
.demo-player{background:#fff;border:1px solid var(--c-border);border-radius:18px;padding:1.75rem;max-width:560px;margin:2.4rem auto 0;box-shadow:0 8px 36px rgba(13,13,13,0.09);text-align:left}
.player-top{display:flex;align-items:center;gap:1rem}
.player-btn{width:52px;height:52px;border-radius:50%;background:var(--y);color:#000;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 14px rgba(255,214,0,0.4)}
.player-meta{flex:1}
.player-title{font-size:0.92rem;font-weight:700;color:var(--c-ink)}
.player-desc{font-size:0.78rem;color:var(--muted-d2);margin-top:0.15rem}
.waveform{display:flex;align-items:center;gap:3px;height:40px;margin-top:0.5rem}
.waveform span{flex:1;background:var(--y-deep);border-radius:2px;animation:wave 1.2s ease-in-out infinite}
.waveform span:nth-child(even){animation-delay:0.2s}
.waveform span:nth-child(3n){animation-delay:0.4s}
@keyframes wave{0%,100%{height:20%}50%{height:90%}}
.demo-transcript{margin-top:1.4rem;border-top:1px solid var(--c-border);padding-top:1.2rem;display:flex;flex-direction:column;gap:0.6rem}
.dt-line{font-size:0.85rem;line-height:1.5;color:var(--muted-d);margin:0}
.dt-line .spk{font-weight:700;color:var(--amber)}
.dt-line.caller .spk{color:var(--muted-d)}

/* -- Proof card (big testimonial) -- */
.proof-card{background:#fff;border:1px solid var(--c-border);border-radius:18px;padding:2.75rem;max-width:820px;margin:0 auto;box-shadow:0 8px 40px rgba(13,13,13,0.08);text-align:center}
.proof-quote{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:700;letter-spacing:-0.025em;line-height:1.4;color:var(--c-ink);margin-bottom:1.5rem}

/* -- Objection cards -- */
.qm{color:var(--y);background:var(--c-ink);width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:0.85rem;flex-shrink:0;font-weight:900}
body .card h3 .qm{margin-right:0.55rem}

/* -- Guarantee -- */
.guar-badge{display:inline-block;background:var(--c-ink);color:var(--y);font-size:0.72rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;padding:0.4rem 0.95rem;border-radius:30px;margin-bottom:1.4rem}
.gn{width:28px;height:28px;border-radius:7px;background:var(--c-ink);color:var(--y);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:0.85rem;margin-bottom:0.85rem}

/* -- Pricing extras -- */
.scarcity{display:inline-flex;align-items:center;gap:0.6rem;background:rgba(255,214,0,0.2);border:1px solid rgba(255,214,0,0.5);border-radius:30px;padding:0.5rem 1.1rem;font-size:0.82rem;font-weight:600;color:var(--amber);margin-bottom:1.4rem;text-align:left}
.scarcity .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex-shrink:0}
body .tier .tier-name{font-family:var(--font-body);font-weight:800;font-size:1.05rem}
body .tier .tier-price{font-family:var(--font-body);font-weight:900;font-size:2rem;letter-spacing:-0.04em;margin-bottom:0.2rem}
body .tier .tier-price small{font-weight:500}
.tier-setup{font-size:0.76rem;color:var(--muted-d2);margin-bottom:1.3rem}
.tier .inclusions{margin-top:1rem;font-size:0.85rem}
.tier .inclusions li{padding-left:24px;margin-bottom:0.6rem;font-size:0.85rem;line-height:1.45}
.tier .inclusions li::before{font-size:0.9rem;color:var(--green)}
.price-help{text-align:center;margin-top:2.5rem;background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:1.75rem;max-width:640px;margin-left:auto;margin-right:auto;box-shadow:0 2px 16px rgba(13,13,13,0.05)}
.price-help p{color:var(--muted-d);font-size:0.98rem;margin-bottom:1.1rem}

/* -- Footer (black; the sole true-dark section) -- */
.footer-dark{background:var(--footer);padding:3rem 0 2rem;border-top:1px solid var(--line-w)}
.footer-dark .brandmark{color:#fff}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:2rem}
.footer-brand{max-width:280px}
.footer-brand .brandmark{margin-bottom:0.9rem}
.footer-tagline{font-size:0.9rem;font-weight:700;color:#fff;margin:0 0 0.5rem}
.footer-brand p{font-size:0.85rem;color:var(--muted-w2);line-height:1.6}
.footer-cols{display:flex;gap:4rem;flex-wrap:wrap}
.footer-col h5{font-size:0.78rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:1rem}
.footer-col a{display:block;font-size:0.88rem;color:var(--muted-w);margin-bottom:0.65rem}
.footer-col a:hover{color:#fff;text-decoration:none}
.footer-bottom{border-top:1px solid var(--line-w);margin-top:2.5rem;padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:0.8rem;color:var(--muted-w2)}
.footer-min{background:var(--footer);padding:1.6rem 0;text-align:center;font-size:0.8rem;color:var(--muted-w2)}
.footer-min a{color:var(--muted-w)}

/* -- LP minimal header -- */
.lp-head{border-bottom:1px solid var(--c-border);background:#fff}
.lp-head .container{display:flex;align-items:center;min-height:64px}

/* -- Contact page -- */
.contact-line{font-size:clamp(1.2rem,2.4vw,1.7rem);font-weight:800;letter-spacing:-0.02em}

/* Stat-first problem cards (v2.5, Round 10): the percentage is the dominant
   element, with a two-word label and one short line under it. Ethan's brief:
   cause-and-effect flow, fewest possible words, minimal reading. Number renders
   in ink -- #FFD600 fails contrast as text on white (see .hl-u note).
   NOTE the `st-` prefix: `sc-` is already taken by the call-summary card
   (.sc-top/.sc-label/.sc-row, IMG-002 in index-03). Do not reuse it here.

   Round 11 (Ethan directive): glyph moved out of the stacked flow and enlarged;
   tile flipped to a yellow fill with a black glyph (the site's other .icon-tile
   instances stay ink+yellow), which is what makes the problem cards read as a
   distinct family from the solution cards below them. Obeys "yellow fill always
   carries black text", so no contrast exception is needed.

   Round 13 (Ethan directive + supplied comp): the glyph moves again, from the
   top-right corner to a LEFT rail, and the three-across grid becomes a single
   stacked COLUMN of four wide cards. That column is the point: the cards now
   read as one sequence (they call -> calls don't wait -> no voicemail -> they
   call someone else), and a 3-up grid cannot carry a four-beat argument or the
   longer description line each card now has. Column is width-capped so the
   description stays inside a comfortable measure on a 1440 screen.

   `.card.stat-card` (0,2,0) is required to beat base.css `.card` (0,1,0):
   tokens.css loads FIRST, so an equal-specificity rule here would lose. That
   applies to `flex-direction` here -- base.css sets .card to a COLUMN flex. */
/* The struck-word correction headline (.swap-h2 / .swap-line / .swap-new) was
   REMOVED in v3.4 when the index-02 H2 became "You're Busy" and there was no
   longer a word to correct. Full markup + CSS is recoverable from website.md's
   changelog, v3.0 through v3.3, if the device is ever wanted again. */

/* Verdict panel (v3.5, Ethan-supplied comp): closes the problem section by
   totalling the three cards into one picture -- ten dots for ten missed calls,
   coloured by what happens to each. Sits inside .stat-stack so it inherits the
   880px column, with a wider top gap so it reads as a conclusion rather than a
   fourth card. Content is capped at 560px and centred, which keeps the comp's
   proportions (short headline lines, tight dot grid) on a wide card.
   COLOUR NOTE: the comp used RED for the "go elsewhere" dots. Red is not in
   brand.md's palette (yellow / amber / ink / white / cream / green-for-status),
   so ink carries that state instead. The escalation still reads yellow -> ink
   -> outline, and no new brand colour is introduced. */
.verdict{background:#fff;border:1px solid var(--c-border);border-radius:16px;padding:34px 28px 30px;box-shadow:0 2px 10px rgba(13,13,13,0.05);margin-top:14px;text-align:center}
.verdict-in{max-width:560px;margin:0 auto}
.verdict-tag{display:inline-block;background:var(--y);color:#000;border-radius:999px;padding:0.42rem 1rem;font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.13em;margin-bottom:1.3rem}
body .verdict-h{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:900;letter-spacing:-0.04em;line-height:1.06;margin:0 0 1.7rem}
/* Heavier than .hl-u: at display size the standard rule underline reads as a
   hairline, and the comp wants a solid bar under the payoff words. */
.verdict-h .u{text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:0.1em;text-underline-offset:0.1em;text-decoration-skip-ink:none}
/* One row of five (v3.8). Slightly wider cap than the old two-row grid so the
   single row still carries weight under the headline. */
.verdict-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:440px;margin:0 auto}
.vd{position:relative;aspect-ratio:1;border-radius:50%;background:#fff;border:1.5px solid rgba(13,13,13,0.20);color:var(--c-ink);display:flex;align-items:center;justify-content:center}
.vd svg{width:50%;height:50%}
.vd-x{position:absolute;right:2%;bottom:2%;width:38%;height:38%;border-radius:50%;background:var(--red);color:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center}
.vd-x svg{width:56%;height:56%}
@media (max-width:750px){
  .verdict{padding:28px 20px 24px}
  .verdict-grid{gap:10px}
  .vd-x{border-width:1.5px}
}

.stat-stack{display:flex;flex-direction:column;gap:18px;max-width:880px;margin:0 auto}
.stat-head{max-width:880px;margin-left:auto;margin-right:auto;text-align:left}
.card.stat-card{flex-direction:row;align-items:flex-start;gap:26px;padding:28px;border-radius:16px;box-shadow:0 2px 10px rgba(13,13,13,0.05);transition:transform 0.18s ease,box-shadow 0.18s ease}
.card.stat-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(13,13,13,0.09)}
.stat-card .icon-tile{width:88px;height:88px;border-radius:22px;background:var(--y);color:#000;margin:0;box-shadow:0 5px 14px rgba(255,214,0,0.26)}
.stat-card .icon-tile svg{width:44px;height:44px;stroke-width:1.75}
.st-body{min-width:0}
.stat-card .st-num{font-size:clamp(2.5rem,4vw,3.25rem);font-weight:900;letter-spacing:-0.05em;line-height:1;color:var(--c-ink);margin:0 0 0.15rem}
body .stat-card .st-label{font-size:1.15rem;font-weight:800;letter-spacing:-0.01em;margin:0 0 0.55rem}
/* Card 2 carries no percentage, so its label steps up to hold the same weight
   in the column as the numbers do. */
body .stat-card .st-label-lg{font-size:clamp(1.35rem,2.6vw,1.6rem);margin-bottom:0.6rem}
.stat-card .st-line{font-size:1rem;line-height:1.6;color:var(--muted-d);margin:0;max-width:56ch}
@media (max-width:750px){
  .card.stat-card{gap:18px;padding:22px}
  .stat-card .icon-tile{width:64px;height:64px;border-radius:17px}
  .stat-card .icon-tile svg{width:32px;height:32px}
  .stat-card .st-line{font-size:0.95rem}
}

/* Home hero bottom spacing (Ethan, Round 9f): the kit's --hero-y (88px) applied
   to BOTH hero edges, so the hero -> index-02 boundary was a one-off (184px on
   desktop, 152px on mobile) matching neither the section rhythm (192 / 128) nor
   itself. Bottom edge now uses the standard section padding so the boundary is
   identical to every other one. .hero[data-sec] (0,2,0) is required to beat
   base.css .hero (0,1,0), which loads after this file. */
.hero[data-sec="index-01"]{padding-bottom:var(--section-y)}

/* -- Mobile/desktop copy variants (blueprint gives shorter mobile hero copy) -- */
.only-m{display:none}
.h1-br{display:none}          /* home hero H1 wraps naturally on desktop */
@media (max-width:750px){
  .only-m{display:block}
  .only-d{display:none !important}
  /* Home hero H1: one word per line + larger display size so the headline
     owns the top of the first screen (Ethan, Round 9). Scoped to index-01 so
     other page heroes keep the global h1 scale. */
  .h1-br{display:inline}
  [data-sec="index-01"] .hero-h1{font-size:clamp(2.9rem,13.5vw,4rem);line-height:0.94;margin-bottom:1.3rem}
  /* Mobile hero: copy centered on screen + tightened top padding so the
     headline starts higher (Ethan, Round 9). Desktop two-column hero is
     untouched -- centering there would centre text inside the left column. */
  /* .hero[data-sec] (0,2,0) is required to beat base.css .hero (0,1,0),
     which loads after this file */
  .hero[data-sec="index-01"]{padding-top:26px;padding-bottom:var(--section-y-m)}
  /* Copy is flush-LEFT, but each block shrink-wraps and is centered on screen
     as a unit, so the four headline words share one left edge (Ethan, Round 9c) */
  [data-sec="index-01"] .hero-copy{text-align:left}
  [data-sec="index-01"] .hero-h1,
  [data-sec="index-01"] .hero-copy .lead{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
  /* CTA stays full-width per the blueprint's mobile first-screen spec (one
     full-width yellow button); do NOT shrink-wrap it with the text blocks */
  [data-sec="index-01"] .hero-actions{width:auto}
}

/* -- Responsive venture tweaks -- */
@media (max-width:900px){
  .nav-phone{display:none}
  .phone-stage{margin-top:0.5rem}
}
@media (max-width:750px){
  .phone{width:260px}
  .phone-screen{height:480px}
  .phone-float{display:none}
  .ss-div{display:none}
  .social-stats{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 2rem}
  .footer-inner{flex-direction:column}
  .footer-cols{gap:2rem}
  .hero-actions .btn{width:100%}
  .demo-phone-num{font-size:2rem}
}

/* Site-wide desktop breathing room (Ethan, 2026-07-23 walkthrough): kit defaults
   (.section-head 38ch / .lead 44ch) over-wrapped headings + leads on desktop.
   Widen to sit inside the content grids beneath (proof-card/table width = 820px);
   mobile unaffected (viewport + container padding constrain first). */
body .section-head{max-width:820px}
body .lead{max-width:62ch}
body .bullets{max-width:60ch}

/* mobile: sticky bottom bar carries Book a Call; nav keeps logo+hamburger */
@media (max-width:750px){.nav-right .nav-btn{display:none}}

/* Hero live-demo widget (v2.0, Round 9): rebuilt to the Dialzara demo-card
   layout Ethan supplied, re-skinned to Lemn tokens. Two deliberate deviations
   from the reference, both forced by brand.md's yellow rules: the display
   number is ink (yellow fails contrast as text on white; --amber is the only
   readable yellow-family text) and the footer bar is a solid yellow fill with
   black text (the reference used a light bar with accent-colored type). */
.demo-widget{background:#fff;border:1px solid var(--c-border);border-radius:18px;box-shadow:0 14px 48px rgba(13,13,13,0.12);max-width:400px;margin:0 auto;text-align:left;overflow:hidden}

/* header strip */
.dw-head{display:flex;align-items:center;gap:0.6rem;padding:1.05rem 1.6rem;border-bottom:1px solid var(--c-border);font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.13em;color:var(--c-ink)}
.dw-head .dot{width:11px;height:11px;border-radius:50%;background:var(--y);box-shadow:0 0 0 1px rgba(13,13,13,0.28);animation:dwpulse 2s infinite;flex-shrink:0}
@keyframes dwpulse{0%{box-shadow:0 0 0 1px rgba(13,13,13,0.28),0 0 0 0 rgba(255,214,0,0.75)}70%{box-shadow:0 0 0 1px rgba(13,13,13,0.28),0 0 0 9px rgba(255,214,0,0)}100%{box-shadow:0 0 0 1px rgba(13,13,13,0.28),0 0 0 0 rgba(255,214,0,0)}}

.dw-body{padding:1.9rem 1.6rem 1.5rem}

/* call orb + concentric pulse rings */
.dw-orb-wrap{position:relative;width:96px;height:96px;margin-bottom:1.6rem}
.dw-orb-wrap::before,.dw-orb-wrap::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,214,0,0.30);animation:dwring 2.6s ease-out infinite}
.dw-orb-wrap::after{animation-delay:1.3s}
@keyframes dwring{0%{transform:scale(1);opacity:0.7}100%{transform:scale(1.75);opacity:0}}
.dw-orb{position:relative;display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;background:var(--y);color:#000;box-shadow:0 8px 26px rgba(255,214,0,0.42)}

.dw-title{font-size:clamp(1.9rem,3.4vw,2.35rem);font-weight:900;letter-spacing:-0.04em;line-height:1.02;margin-bottom:1.1rem}
.dw-title em{font-style:italic;font-weight:400;color:var(--muted-d)}

/* display number (placeholder until the demo line exists -- never fake digits) */
.dw-number{font-size:clamp(2rem,4.4vw,2.75rem);font-weight:900;letter-spacing:-0.03em;line-height:1;color:var(--c-ink);word-break:break-word}
.dw-number-sub{margin-top:0.55rem}
.dw-rule{border:0;border-top:1px solid var(--c-border);margin:1.35rem 0}

/* single-action card since v2.2: the callback row + reassurance line were
   removed (Ethan), so the invite copy is the last block before the yellow bar */
.dw-sub{font-size:0.92rem;line-height:1.6;font-style:italic;color:var(--muted-d);margin-bottom:0}

/* full-bleed yellow tap-to-call footer bar (the whole bar is the tel: target) */
.dw-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:1.05rem 1.6rem;background:var(--y);border-top:2px solid var(--c-ink);color:#000;font-size:0.76rem;font-weight:800;text-transform:uppercase;letter-spacing:0.13em;text-decoration:none;transition:background 0.15s}
.dw-bar:hover{background:var(--y-hover)}
.dw-bar-go{display:inline-flex;align-items:center;gap:0.45rem;white-space:nowrap}

@media (max-width:750px){
  .dw-head,.dw-bar{padding-left:1.25rem;padding-right:1.25rem}
  .dw-body{padding:1.6rem 1.25rem 1.3rem}
  .dw-orb-wrap,.dw-orb{width:80px;height:80px}
  .dw-bar{letter-spacing:0.08em}
}

/* ============================================================
   v4.3 (2026-08-06) — Ethan overhaul pass
   Left-justified section heads sitewide, versus-grid comparison,
   FAQ accordion. Specificity bumped past base.css where needed
   (tokens.css loads FIRST, so equal-specificity rules lose).
   ============================================================ */

/* Standard section head: index-02's treatment, now the sitewide default.
   Block centred on the page, text flush left. */
body .section-head.stat-head{max-width:820px;margin-left:auto;margin-right:auto;text-align:left}
body .section-head.stat-head .lead{margin-left:0;margin-right:0;text-align:left}

/* --- Versus grid (replaces the 8-row comparison table) --- */
.vs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:1000px;margin:0 auto}
.vs-card{background:#fff;border:1px solid var(--c-border);border-radius:16px;padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:0.55rem}
.vs-name{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted-d2)}
.vs-cost{font-family:var(--font-head);font-size:clamp(1.5rem,2.4vw,2rem);font-weight:900;letter-spacing:-0.03em;line-height:1}
.vs-cost small{font-size:0.5em;font-weight:700;letter-spacing:0;opacity:0.6}
.vs-line{font-size:0.9rem;line-height:1.5;color:var(--muted-d);margin-top:auto;padding-top:0.35rem}
.vs-card.vs-win{background:var(--c-ink);border-color:var(--c-ink);box-shadow:0 10px 40px rgba(13,13,13,0.18)}
.vs-card.vs-win .vs-name{color:var(--y)}
.vs-card.vs-win .vs-cost{color:#fff}
.vs-card.vs-win .vs-cost small{color:rgba(255,255,255,0.65)}
.vs-card.vs-win .vs-line{color:rgba(255,255,255,0.82)}
.vs-foot{max-width:820px;margin:2.25rem auto 0;font-size:1.02rem;line-height:1.6;color:var(--muted-d);text-align:left}
.vs-foot strong{color:var(--c-ink)}
@media(max-width:900px){.vs-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.vs-grid{grid-template-columns:1fr}}

/* --- FAQ accordion --- */
.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--c-border)}
.faq-item{border-bottom:1px solid var(--c-border)}
.faq-item summary{list-style:none;cursor:pointer;padding:1.35rem 2.5rem 1.35rem 0;position:relative;font-family:var(--font-head);font-size:1.08rem;font-weight:700;letter-spacing:-0.01em;line-height:1.35;color:var(--c-ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;margin-top:-7px;border-right:2.5px solid var(--c-ink);border-bottom:2.5px solid var(--c-ink);transform:rotate(45deg);transition:transform 0.2s ease;opacity:0.55}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:-3px;opacity:1}
.faq-item summary:hover{color:var(--muted-d)}
.faq-item summary:focus-visible{outline:2px solid var(--y);outline-offset:3px}
.faq-a{padding:0 2.5rem 1.5rem 0;color:var(--muted-d);line-height:1.65;max-width:66ch}
.faq-a a{color:var(--c-ink);text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:0.08em;text-underline-offset:0.14em}

/* --- v4.3b: one content column for the rewritten sections ---
   index-02 pairs an 820px head with an 880px stack (30px off). For the
   sections rebuilt in v4.3 the head and its content share ONE 880px column,
   so every left edge on the page lines up. Scoped to .sec-col so index-02
   (Ethan: "solid, don't touch") keeps its existing geometry. */
body .sec-col{max-width:880px;margin-left:auto;margin-right:auto}
body .section-head.stat-head.sec-col{max-width:880px}
body .sec-col.grid{width:100%}
/* .grid sits inset ~24px inside .container; cancel it so cards align to the head */
body .sec-col.grid,body .sec-col.vs-grid,body .sec-col.faq-list{padding-left:0;padding-right:0}
.vs-grid.sec-col{max-width:880px}
.vs-foot.sec-col{max-width:880px;margin-top:2.25rem}
/* vs-card polish: keep every cost on one line so the four cards share a baseline,
   and lift the confirm chip out of the dark card's background. */
.vs-cost{font-size:clamp(1.35rem,2vw,1.75rem);white-space:nowrap}
.vs-card .confirm-tag{white-space:nowrap;font-size:0.6rem;vertical-align:middle}
.vs-card.vs-win .confirm-tag{background:rgba(255,214,0,0.16);border-color:rgba(255,214,0,0.5);color:var(--y)}
/* Proof card follows the page's left-justified rhythm (v4.3) */
body .proof-card{text-align:left;padding:2.5rem 2.75rem}
body .proof-card .proof-quote{margin-left:0;margin-right:0}
body .proof-card .social-attr{justify-content:flex-start}
/* .lead inside a left-justified head needs its own top gap (v4.3) */
body .section-head.stat-head .lead{margin:1.25rem 0 0;text-align:left}
/* Pricing tiers: base.css gives .tier-desc flex:1, so each card's price landed at a
   different height and the row read ragged. Pin the description block instead and let
   the inclusions list absorb the slack, so name/price/CTA line up across all four. */
body .tier .tier-desc{flex:0 0 auto;min-height:6.6em}
body .tier .inclusions{flex:1 1 auto}
body .tier .btn{margin-top:auto}
body .tier .inclusions{margin-top:1.1rem}
body .tier .tier-setup{min-height:3.2em;margin-bottom:1.1rem}
body .tier .tier-price{min-height:1.35em;display:flex;align-items:flex-end}

/* v4.10 client-logo slot in the proof attribution (IMG-010).
   Fixed 64px square so the logo reads as a mark beside the client name rather
   than as a photo. `contain`, not `cover`, so a round or padded logo is never
   cropped; slots.js sets `cover` on .slot-img by default. */
body .social-attr .attr-logo{width:64px;height:64px;min-height:0;flex:0 0 64px;padding:0;border-radius:12px}
body .social-attr .attr-logo:not(.filled){padding:6px}
body .social-attr .attr-logo .cap{font-size:0;}
body .social-attr .attr-logo::before{font-size:0.5rem;top:4px;left:4px;padding:1px 3px}
body .social-attr .attr-logo .slot-img{object-fit:contain}
body .social-attr .attr-logo .slot-tag{display:none}