/* landing.css — the home page's own components, merged 2026-09-21 from the
   owner's landing draft. Every rule is scoped under body.landing; the
   palette tokens, header, footer, buttons and other shared chrome moved to
   theme.css (body.themed) on 2026-09-21, so index.html carries both classes. Colliding
   class names carry an l- prefix (.l-hero, .l-eyebrow, .l-section-head,
   .l-steps, .l-step, .l-benefit). No inline styles: the CSP is
   style-src 'self'. */

body.landing main a:not(.btn) { color:inherit;text-decoration:none }
body.landing .wrap { width:min(1180px,calc(100% - 40px));margin:auto }
body.landing .l-hero { padding:78px 0 56px;display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center;min-height:690px }
body.landing .l-eyebrow { display:inline-flex;align-items:center;gap:9px;padding:7px 11px;border:1px solid rgba(54,185,186,.28);background:rgba(54,185,186,.08);border-radius:999px;color:#b9ffff;font-size:13px;font-weight:800;letter-spacing:.02em }
body.landing .l-eyebrow i { width:7px;height:7px;border-radius:50%;background:var(--teal2);box-shadow:0 0 0 5px rgba(54,185,186,.12) }
body.landing h1 { font-size:clamp(46px,6vw,76px);line-height:.98;letter-spacing:-.055em;margin:24px 0 24px;max-width:780px }
body.landing h1 span { background:linear-gradient(90deg,#aefafa 0%,#70d8d9 45%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent }
body.landing .l-hero p { font-size:20px;color:var(--muted);max-width:650px;margin:0 0 30px }
body.landing .hero-actions { display:flex;gap:12px;flex-wrap:wrap }
body.landing .microcopy { display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;color:#91abad;font-size:13px;font-weight:650 }
body.landing .microcopy span:before { content:"✓";color:var(--teal2);font-weight:900;margin-right:7px }
body.landing .hero-visual { position:relative;min-height:520px }
body.landing .orb { position:absolute;border-radius:50%;filter:blur(50px);opacity:.45 }
body.landing .orb.one { width:220px;height:220px;background:var(--teal);right:10%;top:4% }
body.landing .orb.two { width:160px;height:160px;background:var(--orange);left:0;bottom:3%;opacity:.23 }
body.landing .desktop { position:absolute;left:0;top:48px;width:88%;height:398px;border-radius:21px;background:#0d1719;border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow);overflow:hidden;transform:perspective(1200px) rotateY(-4deg) rotateX(1deg) }
body.landing .windowbar { height:42px;background:#152426;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 14px;gap:7px }
body.landing .dot { width:9px;height:9px;border-radius:50%;background:#446063 }
body.landing .dot:nth-child(1) { background:#ff6b5e }
body.landing .dot:nth-child(2) { background:#ffca54 }
body.landing .dot:nth-child(3) { background:#48c774 }
body.landing .code-layout { display:grid;grid-template-columns:42% 58%;height:calc(100% - 42px) }
body.landing .problem { padding:21px 20px;background:#0c1719;border-right:1px solid var(--line) }
body.landing .problem .tag { color:#72d4d5;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase }
body.landing .problem h3 { font-size:18px;margin:8px 0 11px }
body.landing .problem p { font-size:11.5px;color:#86a0a2;line-height:1.55;margin:0 0 11px }
body.landing .problem .smallline { height:7px;border-radius:4px;background:#1b3134;margin:7px 0 }
body.landing .problem .smallline:nth-child(6) { width:80% }
body.landing .problem .smallline:nth-child(7) { width:62% }
body.landing .editor { padding:15px 0;background:#0a1214;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:#d7e5e6;position:relative }
body.landing .editor:after { content:"Whisper-Line is following your code";position:absolute;right:12px;bottom:12px;font-family:Inter,sans-serif;font-size:10px;background:rgba(37,144,145,.18);border:1px solid rgba(54,185,186,.24);color:#9af5f6;padding:6px 8px;border-radius:7px }
body.landing .code-row { display:flex;padding:3px 16px }
body.landing .ln { width:28px;color:#496163;user-select:none }
body.landing .kw { color:#f58fb4 }
body.landing .fn { color:#7ed6ff }
body.landing .str { color:#f4c97a }
body.landing .cm { color:#617b7d }
body.landing .accent { background:rgba(37,144,145,.12);border-left:2px solid var(--teal2) }
body.landing .phone { position:absolute;right:0;bottom:5px;width:196px;height:378px;border-radius:34px;background:#071012;border:7px solid #1d292b;box-shadow:0 28px 55px rgba(0,0,0,.55);overflow:hidden;transform:rotate(4deg) }
body.landing .phone:before { content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:62px;height:17px;border-radius:12px;background:#151f21;z-index:3 }
body.landing .phone-ui { padding:36px 12px 12px }
body.landing .phone-title { font-size:10px;color:#87a1a3;text-transform:uppercase;letter-spacing:.1em;font-weight:800 }
body.landing .live { display:inline-flex;gap:6px;align-items:center;color:#86f1ca;font-size:10px;margin-top:7px }
body.landing .live i { width:6px;height:6px;background:#49d995;border-radius:50%;box-shadow:0 0 0 4px rgba(73,217,149,.12) }
body.landing .hint { margin-top:16px;padding:13px;border-radius:13px;background:linear-gradient(160deg,rgba(37,144,145,.22),rgba(37,144,145,.09));border:1px solid rgba(54,185,186,.24) }
body.landing .hint b { font-size:11px;color:#8cf1f2 }
body.landing .hint p { font-size:11px;line-height:1.45;color:#d9eeee;margin:7px 0 0 }
body.landing .answer-card { margin-top:10px;padding:12px;border-radius:12px;background:#132426;border:1px solid rgba(255,255,255,.08) }
body.landing .answer-card .tiny { height:5px;border-radius:4px;background:#395255;margin:6px 0 }
body.landing .answer-card .tiny:nth-child(3) { width:72% }
body.landing .answer-card .tiny:nth-child(4) { width:84% }
body.landing .float-pill { position:absolute;left:4%;bottom:26px;padding:11px 14px;border-radius:12px;background:rgba(9,27,29,.94);border:1px solid rgba(255,255,255,.11);box-shadow:0 15px 35px rgba(0,0,0,.28);font-weight:750;font-size:13px;color:#c8dddd }
body.landing .float-pill strong { color:#fff }
body.landing .pulse { display:inline-block;width:8px;height:8px;background:var(--orange);border-radius:50%;margin-right:8px;box-shadow:0 0 0 6px rgba(253,116,20,.10) }
body.landing .proofbar { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:10px auto 100px }
body.landing .proof { background:rgba(9,29,31,.76);padding:24px 28px }
body.landing .proof b { display:block;font-size:15px;margin-bottom:4px }
body.landing .proof span { color:var(--muted);font-size:13px }
body.landing .l-section-head { text-align:center;max-width:760px;margin:0 auto 54px }
body.landing .l-section-head .kicker { color:var(--orange2);font-weight:850;font-size:12px;letter-spacing:.11em;text-transform:uppercase }
body.landing .l-section-head h2 { font-size:clamp(36px,4.4vw,56px);line-height:1.04;letter-spacing:-.045em;margin:12px 0 15px }
body.landing .l-section-head p { color:var(--muted);font-size:18px;margin:0 }
body.landing .features { padding:30px 0 115px }
body.landing .feature-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:18px }
body.landing .feature-card { position:relative;min-height:430px;padding:28px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(16,40,43,.88),rgba(8,25,27,.90));overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.025) }
body.landing .feature-card.primary { grid-column:1/-1;min-height:510px;display:grid;grid-template-columns:.88fr 1.12fr;gap:20px;align-items:center;padding:42px }
body.landing .num { font-size:12px;font-weight:900;color:#6bc9ca;letter-spacing:.1em;text-transform:uppercase }
body.landing .feature-card h3 { font-size:29px;line-height:1.07;letter-spacing:-.03em;margin:11px 0 12px;max-width:520px }
body.landing .feature-card.primary h3 { font-size:42px }
body.landing .feature-card .desc { color:var(--muted);font-size:15px;max-width:535px;margin:0 }
body.landing .feature-card.primary .desc { font-size:18px }
body.landing .l-benefit { display:flex;align-items:center;gap:8px;color:#d9f0f0;font-size:13px;font-weight:750;margin-top:18px }
body.landing .l-benefit:before { content:"✓";display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:rgba(54,185,186,.15);color:#7ef0f1 }
body.landing .mini-ui { height:230px;margin-top:30px;border-radius:18px;background:#081315;border:1px solid rgba(255,255,255,.10);box-shadow:0 18px 45px rgba(0,0,0,.3);overflow:hidden;position:relative }
body.landing .primary .mini-ui { height:360px;margin-top:0 }
body.landing .mini-bar { height:34px;background:#142527;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 12px;gap:6px }
body.landing .mini-bar i { width:7px;height:7px;border-radius:50%;background:#426062 }
body.landing .mini-bar i:first-child { background:#fd745f }
body.landing .coach-grid { display:grid;grid-template-columns:1.2fr .8fr;height:calc(100% - 34px) }
body.landing .coach-code { padding:17px;font-family:ui-monospace,monospace;font-size:10px;color:#d8e5e6 }
body.landing .coach-side { padding:16px;border-left:1px solid var(--line);background:#0c1c1e }
body.landing .coach-side .label { font-size:9px;color:#65d6d7;text-transform:uppercase;letter-spacing:.09em;font-weight:800 }
body.landing .coach-card { margin-top:10px;padding:12px;border-radius:11px;background:rgba(37,144,145,.12);border:1px solid rgba(54,185,186,.16);font-size:11px;color:#cde6e7 }
body.landing .coach-card strong { display:block;color:#fff;margin-bottom:5px }
body.landing .barline { height:6px;background:#1f383a;border-radius:5px;margin:7px 0 }
body.landing .barline.short { width:62% }
body.landing .barline.med { width:80% }
body.landing .solver-ui { padding:18px }
body.landing .solver-head { display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#8da5a6 }
body.landing .solver-badge { padding:4px 8px;border-radius:6px;background:rgba(54,185,186,.12);color:#74dfdf }
body.landing .solver-code { margin-top:14px;font-family:ui-monospace,monospace;font-size:10px }
body.landing .fixed { color:#7ee6b0 }
body.landing .orange { color:#ff9b57 }
body.landing .soft { color:#719092 }
body.landing .solver-footer { position:absolute;bottom:15px;left:18px;right:18px;display:flex;justify-content:space-between;color:#799496;font-size:9px;border-top:1px solid var(--line);padding-top:10px }
body.landing .voice-ui { padding:20px }
body.landing .wave { height:52px;display:flex;align-items:center;gap:4px;margin:8px 0 17px }
body.landing .wave i { display:block;width:4px;border-radius:3px;background:linear-gradient(var(--teal2),var(--teal));height:15px }
body.landing .wave i:nth-child(2n) { height:33px }
body.landing .wave i:nth-child(3n) { height:44px }
body.landing .wave i:nth-child(5n) { height:26px }
body.landing .transcript { font-size:11px;color:#9eb5b7;border-left:2px solid var(--teal2);padding-left:11px }
body.landing .reply { margin-top:14px;padding:12px;background:#102729;border-radius:10px;font-size:11px;color:#d5e8e9 }
body.landing .reply b { color:#fff }
body.landing .display-ui { padding:14px;display:grid;grid-template-columns:1fr 95px;gap:12px }
body.landing .screen-large { background:#0d1c1e;border:1px solid var(--line);border-radius:10px;padding:11px }
body.landing .screen-phone { background:#101b1d;border:4px solid #273638;border-radius:16px;padding:14px 7px }
body.landing .hintline { height:7px;border-radius:6px;background:#2a4b4e;margin:7px 0 }
body.landing .hintline.a { background:#267c7d;width:65% }
body.landing .hintline.b { width:84% }
body.landing .hintline.c { width:50% }
body.landing .privacy-ui { display:grid;place-items:center;background:radial-gradient(circle at center,rgba(37,144,145,.18),transparent 56%) }
body.landing .shield { width:105px;height:118px;border-radius:45px 45px 52px 52px;background:linear-gradient(165deg,rgba(54,185,186,.22),rgba(37,144,145,.08));border:1px solid rgba(106,226,227,.34);clip-path:polygon(50% 0,94% 17%,88% 72%,50% 100%,12% 72%,6% 17%);display:grid;place-items:center }
body.landing .shield:after { content:"";width:38px;height:38px;border:7px solid #8ef0f0;border-top:none;border-radius:4px 4px 12px 12px;transform:translateY(9px) }
body.landing .lock { position:absolute;width:25px;height:25px;border:6px solid #8ef0f0;border-bottom:0;border-radius:15px 15px 0 0;top:79px }
body.landing .trial-ui { padding:22px;background:linear-gradient(155deg,rgba(253,116,20,.09),rgba(37,144,145,.08)) }
body.landing .trial-box { height:100%;border:1px dashed rgba(255,255,255,.18);border-radius:13px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px }
body.landing .trial-box .big { font-size:29px;font-weight:900;letter-spacing:-.035em }
body.landing .trial-box p { font-size:11px;color:#94acae;max-width:210px }
body.landing .trial-cta { padding:10px 18px;border-radius:10px;background:var(--orange);color:#291103;font-weight:900;font-size:11px;margin-top:4px }
body.landing .how { padding:10px 0 110px }
body.landing .l-steps { display:grid;grid-template-columns:repeat(3,1fr);gap:16px }
body.landing .l-step { border:1px solid var(--line);background:rgba(8,26,28,.72);border-radius:20px;padding:26px }
body.landing .l-step .bubble { width:36px;height:36px;border-radius:11px;background:rgba(37,144,145,.15);display:grid;place-items:center;color:#89eeee;font-weight:900;margin-bottom:18px }
body.landing .l-step h4 { font-size:18px;margin:0 0 8px }
body.landing .l-step p { color:var(--muted);font-size:14px;margin:0 }
body.landing .cta-section { padding:35px 0 105px }
body.landing .cta-box { position:relative;overflow:hidden;text-align:center;padding:70px 30px;border-radius:30px;background:linear-gradient(150deg,#123537,#0b2224 58%,#17281e);border:1px solid rgba(255,255,255,.11);box-shadow:var(--shadow) }
body.landing .cta-box:before { content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:rgba(37,144,145,.20);filter:blur(50px);left:-100px;top:-160px }
body.landing .cta-box:after { content:"";position:absolute;width:250px;height:250px;border-radius:50%;background:rgba(253,116,20,.12);filter:blur(45px);right:-60px;bottom:-120px }
body.landing .cta-box>* { position:relative;z-index:2 }
body.landing .cta-box h2 { font-size:clamp(38px,5vw,62px);letter-spacing:-.05em;line-height:1;margin:0 auto 17px;max-width:780px }
body.landing .cta-box p { color:#b6cbcc;font-size:18px;max-width:690px;margin:0 auto 27px }
body.landing .cta-note { font-size:12px!important;color:#83a0a2!important;margin-top:14px!important }

@media(max-width:900px) {
  body.landing .l-hero { grid-template-columns:1fr;padding-top:45px }
  body.landing .hero-visual { min-height:480px }
  body.landing .desktop { width:90% }
  body.landing .feature-card.primary { grid-template-columns:1fr; }
  body.landing .feature-grid { grid-template-columns:1fr }
  body.landing .feature-card.primary { grid-column:auto }
  body.landing .proofbar, body.landing .l-steps { grid-template-columns:1fr }
  body.landing .proofbar { gap:0 }
  body.landing .proof { border-bottom:1px solid var(--line) }
  body.landing .proof:last-child { border:0 }
}

@media(max-width:600px) {
  body.landing .wrap { width:min(100% - 24px,1180px) }
  body.landing .l-hero { min-height:auto;padding-bottom:30px }
  body.landing .l-hero p { font-size:17px }
  body.landing .hero-visual { min-height:385px }
  body.landing .desktop { height:305px;top:30px;width:94%; }
  body.landing .code-layout { grid-template-columns:44% 56% }
  body.landing .problem { padding:14px 12px }
  body.landing .problem h3 { font-size:13px }
  body.landing .problem p { font-size:8px }
  body.landing .editor { font-size:7.5px }
  body.landing .phone { width:145px;height:285px;border-width:5px;border-radius:26px }
  body.landing .phone-ui { padding:30px 8px 8px }
  body.landing .hint p, body.landing .answer-card { font-size:8px }
  body.landing .feature-card, body.landing .feature-card.primary { padding:24px;min-height:auto }
  body.landing .feature-card.primary h3 { font-size:31px }
  body.landing .feature-card h3 { font-size:26px }
  body.landing .primary .mini-ui { height:270px }
}


/* --- classes that replace the draft's inline style attributes --------- */
body.landing .ac-label { font-size: 9px; color: #8ca6a8 }
body.landing .ac-q { font-size: 10px; margin: 4px 0 8px }
body.landing .voice-label { font-size: 10px; color: #7be4e5; font-weight: 800 }
body.landing .screen-label { font-size: 9px; color: #829d9f }
body.landing .mt16 { margin-top: 16px }
body.landing .screen-code { font: 9px ui-monospace, monospace; color: #6d898b; margin-top: 20px }
body.landing .sp-label { font-size: 7px; color: #72dfe0; font-weight: 800 }
body.landing .sp-label-2 { color: #8ca4a6; margin-top: 13px }
body.landing .privacy-cap { position: absolute; bottom: 26px; text-align: center; font-size: 11px; color: #9fb7b9 }
body.landing .privacy-cap b { color: #e8f9f9 }

/* --- landing-only layout tweaks (the shared chrome is in theme.css) -- */
body.landing .wrap { padding-inline: 0 }

/* the promo video, right under the hero */
body.landing .tour { max-width: 960px; margin: 0 auto 70px }
body.landing .tour .video-frame { border-color: rgba(255,255,255,.14); box-shadow: var(--shadow) }
body.landing .tour .video-caption { color: var(--muted); font-size: 14px; text-align: center; margin-top: 14px }

/* transparency cards + the partner strip */
body.landing .transparency { padding: 10px 0 100px }
body.landing .l-step p + p { margin-top: 10px }
body.landing .l-step ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 14px }
body.landing .l-step li + li { margin-top: 4px }
body.landing .l-step a { color: var(--teal2); text-decoration: underline }
body.landing .partner-strip { padding: 0 0 90px; text-align: center }
body.landing .partner-strip .l-section-head { margin-bottom: 22px }
body.landing .partner-strip .l-section-head h2 { font-size: clamp(28px,3.4vw,40px) }

/* footer: the full logo on the dark background */
body.landing .footer-logo { display: block; width: 220px; height: auto }
body.landing .footer-brand .brand { display: block }

@media (max-width: 600px) {
  body.landing .wrap { width: calc(100% - 32px) }
  body.landing .l-hero { padding-top: 28px }
  body.landing .tour { margin-bottom: 50px }
}