/* Classic Source landing page.
   Every selector is scoped under `.landing` on purpose: the landing styles bare h1 /
   section and reuses class names (.btn, .row, .price, .chip) that already mean
   something else in styles.css. Colour tokens are NOT redefined here, the landing
   inherits the app's :root so the two can never drift apart. */

/* The one exception: the closing band is the only dark surface on the site, so these five
   live here rather than in the app's :root where nothing else would ever use them. */
.landing {
  --dark: var(--surface-2);
  --dark-head: var(--ink);
  --dark-text: var(--ink-soft);
  --dark-muted: var(--muted);
  --dark-line: var(--line-strong);
}
.landing h1, .landing h2, .landing h3, .landing h4, .landing p, .landing ul, .landing ol, .landing figure { margin:0 }
.landing ul { list-style:none;padding:0 }
.landing a { color:inherit }
.landing svg { max-width:100% }
.landing .shell { width:100%;max-width:1180px;margin:0 auto;padding:0 32px }
.landing .num { font-variant-numeric:tabular-nums }
.landing .skip { position:absolute;left:-9999px }
.landing .skip:focus { left:16px;top:12px;z-index:99;background:var(--surface);border:1px solid var(--line);padding:8px 14px;border-radius:10px }
.landing *:focus-visible { outline:2px solid var(--amber);outline-offset:2px;border-radius:6px }
.landing .site-head { position:sticky;top:0;z-index:30;background:rgb(var(--surface-rgb) / .92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line) }
.landing .head-in { display:flex;align-items:center;gap:26px;height:70px }
.landing .brand { display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto }
.landing .brand-mark { flex:0 0 auto }
.landing .brand-name { font-weight:800;font-size:20px;letter-spacing:-.035em;line-height:1;white-space:nowrap }
.landing .brand-name i { font-style:normal;color:var(--amber-bright) }
.landing .nav { display:flex;align-items:center;gap:24px }
.landing .nav a { font-size:14.5px;font-weight:600;color:var(--ink-soft);text-decoration:none }
.landing .nav a:hover { color:var(--ink) }
.landing .nav .sep { width:1px;height:20px;background:var(--line) }
.landing .btn { display:inline-flex;align-items:center;justify-content:center;gap:8px; font:inherit;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap; border:1px solid var(--line);background:linear-gradient(180deg,var(--surface-hi),var(--surface-2)); color:var(--ink);border-radius:12px;padding:11px 18px; box-shadow:0 1px 2px rgb(var(--shadow-rgb) / .06);transition:transform .12s,box-shadow .2s,border-color .2s; }
.landing .btn:hover { transform:translateY(-1px);border-color:var(--line-strong);box-shadow:var(--shadow) }
.landing .btn:active { transform:translateY(1px) }
.landing .btn.primary { background:linear-gradient(180deg,#eda23a 0%,#e8972b 45%,var(--amber) 100%); color:var(--on-amber);border-color:rgb(var(--amber-rgb) / .34); box-shadow:0 6px 18px rgb(var(--amber-rgb) / .28), inset 0 1px 0 rgb(var(--sheen-rgb) / .4); }
.landing .btn.primary:hover { box-shadow:0 9px 24px rgb(var(--amber-rgb) / .36), inset 0 1px 0 rgb(var(--sheen-rgb) / .4) }
.landing .btn.small { font-size:14px;padding:9px 15px;border-radius:11px }
.landing .btn.big { font-size:16.5px;padding:14px 24px }
.landing .btn.mock { cursor:default;transform:none!important;box-shadow:0 1px 2px rgb(var(--shadow-rgb) / .06) }
.landing .btn.mock.primary { box-shadow:0 3px 10px rgb(var(--amber-rgb) / .22), inset 0 1px 0 rgb(var(--sheen-rgb) / .4) }
.landing .eyebrow { font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep) }
.landing .tag { font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--amber-deep);background:var(--amber-bg);border:1px solid var(--line-strong);border-radius:4px;padding:4px 8px; }
.landing .fit { font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:4px 9px;white-space:nowrap;display:inline-block;line-height:1.2 }
.landing .fit.yes { background:var(--green-bg);color:var(--green) }
.landing .fit.likely { background:var(--amber-bg);color:var(--amber-bright) }
.landing .fit.verify { background:var(--surface-3);color:var(--muted) }
.landing .fit.no { background:var(--red-bg);color:var(--red) }
.landing .hero { padding:58px 0 54px }
.landing .hero-grid { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.34fr);grid-template-rows:auto 1fr;grid-template-areas:"head proof" "tail proof";column-gap:58px;align-content:start }
.landing .hero-head { grid-area:head;align-self:start }
.landing .hero-tail { grid-area:tail;align-self:start;padding-top:26px }
.landing .proof-col { grid-area:proof;align-self:start }
.landing h1 { margin-top:16px;font-size:clamp(34px,4vw,51px);line-height:1.05;letter-spacing:-.03em;font-weight:800 }
.landing h1 .em { color:var(--amber-bright) }
.landing .lede { font-size:17.5px;line-height:1.6;color:var(--ink-soft);max-width:45ch }
.landing .cta-row { display:flex;flex-wrap:wrap;gap:12px;margin-top:24px }
.landing .reassure { margin-top:14px;font-size:13.5px;color:var(--muted) }
.landing .hero-stores { margin-top:32px;padding-top:18px;border-top:1px solid var(--line) }
.landing .hs-label { font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted) }
.landing .hs-list { margin-top:9px;font-size:13.5px;line-height:1.75;font-weight:600;color:var(--ink-soft) }
/* Thirteen store names as wrapping chips. A middot-separated run orphaned a dot at the start of
   each wrapped line and read as clutter; chips wrap cleanly at any width. */
.landing .hs-chips { margin:11px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px }
.landing .hs-chips li { font-size:12.5px;font-weight:700;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap }
.landing .proof { background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden }
.landing .proof-bar { display:flex;align-items:center;gap:9px;padding:13px;background:linear-gradient(180deg,var(--surface),var(--surface-2));border-bottom:1px solid var(--line) }
.landing .veh-chip { display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;font-size:13.5px;font-weight:700;background:var(--surface-3);border:1px solid var(--line);border-radius:10px;padding:9px 12px;white-space:nowrap }
.landing .veh-chip svg { flex:0 0 auto;color:var(--amber-bright) }
.landing .fake-input { flex:1 1 auto;min-width:0;font-size:14.5px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.landing .fake-input .caret { display:inline-block;width:1.5px;height:15px;background:var(--amber);vertical-align:-3px;margin-left:2px;animation:blink 1.15s steps(1) infinite }
@keyframes blink {50%{opacity:0}}
.landing .pb-go { flex:0 0 auto;font-size:14px;padding:9px 16px;border-radius:10px }
.landing .proof-meta { display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px 16px;border-bottom:1px solid var(--line-soft);font-size:13px;color:var(--ink-soft);background:var(--surface-2) }
.landing .proof-meta b { color:var(--ink);font-weight:700 }
.landing .meta-dot { color:var(--line-strong) }
.landing .proof-meta .tag { margin-left:auto }
.landing .rows { padding:4px 0 }
.landing .proof-foot { display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:13px 16px;background:var(--surface-2);border-top:1px solid var(--line);font-size:13px;color:var(--muted) }
.landing .proof-foot b { color:var(--ink-soft) }
.landing .proof-cap { margin-top:14px;font-size:13px;line-height:1.6;color:var(--muted);max-width:56ch;padding-left:12px;border-left:2px solid var(--line-strong) }
.landing .stats { border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface-2) }
.landing .stat-grid { display:grid;grid-template-columns:repeat(3,1fr) }
.landing .stat { padding:28px 36px;border-left:1px solid var(--line) }
.landing .stat:first-child { border-left:none;padding-left:0 }
.landing .stat .n { font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums }
.landing .stat .n small { font-size:16px;font-weight:700;color:var(--amber-bright);margin-left:1px }
.landing .stat p { margin-top:9px;font-size:13.5px;color:var(--ink-soft);line-height:1.55;max-width:36ch }
.landing section { scroll-margin-top:78px }
.landing .band { padding:88px 0 0 }
.landing .sec, .landing .sec-cont { display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px }
.landing .sec { padding-top:26px;border-top:2px solid var(--ink) }
.landing .sec-cont > * { grid-column:2 }
.landing .sec-label { position:sticky;top:86px;align-self:start }
.landing .sec-idx { font-family:var(--mono);font-size:11.5px;letter-spacing:.19em;color:var(--amber-bright);font-weight:600;display:block }
.landing .sec-kicker { margin-top:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block }
.landing .sec h2 { font-size:clamp(27px,3vw,38px);line-height:1.08;letter-spacing:-.032em;font-weight:800;max-width:19ch }
.landing .sec-lede { margin-top:16px;font-size:16.5px;line-height:1.62;color:var(--ink-soft);max-width:58ch }
.landing .note { margin-top:26px;font-size:14px;line-height:1.62;color:var(--ink-soft);max-width:64ch;padding-left:14px;border-left:2px solid var(--amber) }
.landing .note + .note { margin-top:14px }
.landing .steps { display:grid;grid-template-columns:1fr 1fr;margin-top:36px;border-top:1px solid var(--line) }
.landing .step { display:flex;flex-direction:column;padding:24px 30px 26px 0;border-bottom:1px solid var(--line) }
.landing .step:nth-child(even) { padding-left:36px;padding-right:0;border-left:1px solid var(--line) }
.landing .step:nth-last-child(-n+2) { border-bottom:0 }
.landing .step-n { font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--amber-bright);letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:10px }
.landing .step h3 { font-size:18px;font-weight:800;letter-spacing:-.022em }
.landing .step p { margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);max-width:42ch }
.landing .step-ex { margin-top:auto;padding-top:16px }
.landing .step-ex i { font-style:normal;font-family:var(--mono);font-size:12.5px;color:var(--amber-bright);background:var(--amber-bg);border:1px solid var(--line-strong);border-radius:6px;padding:4px 9px;display:inline-block }
.landing .exhibits { margin-top:44px }
.landing .exhibit + .exhibit { margin-top:34px }
.landing .ex-cap { display:flex;align-items:center;gap:12px;margin-bottom:13px;font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted) }
.landing .ex-cap::after { content:"";flex:1 1 auto;height:1px;background:var(--line) }
.landing .panel { background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden }
.landing .panel-head { display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--line) }
.landing .panel-head .lbl { font-size:13px;font-weight:700 }
.landing .panel-head .sub { font-size:13px;color:var(--muted) }
.landing .panel-head .tag { margin-left:auto }
.landing .searchbar { display:flex;gap:9px;padding:16px 16px 12px }
.landing .searchbar .input { flex:1 1 auto;min-width:0;border:1px solid var(--line-strong);background:var(--surface-2);border-radius:var(--radius-sm);padding:12px 13px;font-size:15px;font-weight:600;display:flex;align-items:center;gap:9px }
.landing .searchbar .cursor { width:1.5px;height:18px;background:var(--amber);display:inline-block }
.landing .vendors { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 16px 14px }
.landing .vendors .vend { display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);padding:9px 10px;font-size:12.5px;font-weight:700;min-width:0 }
.landing .vendors .vend .nm { overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.landing .vendors .vend .tick { flex:0 0 auto }
.landing .vendors .vend.done { background:var(--green-bg);border-color:var(--green);color:var(--green) }
.landing .vendors .vend.skip { color:var(--muted);background:var(--surface-3);border-style:dashed }
.landing .status-line { display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface-2);font-size:13px;color:var(--ink-soft) }
.landing .status-line b { color:var(--ink);font-weight:700 }
.landing .status-line .soft { color:var(--muted) }
.landing .status-line .t { margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--muted) }
.landing .pair { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:20px;align-items:start }
.landing .tray-list { padding:6px 16px 4px }
.landing .tray-item { display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-soft) }
.landing .tray-item:last-child { border-bottom:0 }
.landing .tick-box { width:18px;height:18px;border-radius:5px;background:var(--amber);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--on-amber) }
.landing .ti-name { font-size:13.5px;font-weight:650;line-height:1.35 }
.landing .ti-store { font-size:13px;color:var(--muted);margin-top:2px }
.landing .ti-price { margin-left:auto;font-size:14px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap }
.landing .panel-foot { display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 16px;background:var(--surface-2);border-top:1px solid var(--line);font-size:13px;color:var(--muted) }
.landing .quote { background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:20px 22px 18px }
.landing .q-head { display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid var(--line) }
.landing .q-id { min-width:0;flex:1 1 auto }
.landing .q-t { font-size:15px;font-weight:750;letter-spacing:-.015em }
.landing .q-s { font-size:13px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.landing .q-line { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line) }
.landing .ql-n { font-size:13.5px;font-weight:650;line-height:1.35 }
.landing .ql-s { font-size:13px;color:var(--muted);margin-top:2px }
.landing .ql-s .pnum { font-family:var(--mono);color:var(--amber-bright) }
.landing .ql-p { font-size:14px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap }
.landing .q-total { display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:15px }
.landing .q-total span { font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted) }
.landing .q-total b { font-size:22px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums }
.landing .q-foot { margin-top:15px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap }
.landing .q-foot .fine-note { flex:1 1 170px;font-size:13px;line-height:1.5;color:var(--muted) }
.landing .spec { margin-top:34px;border-top:1px solid var(--line) }
.landing .spec-row { display:grid;grid-template-columns:186px minmax(0,1fr);gap:32px;padding:20px 0;border-bottom:1px solid var(--line) }
.landing .spec-t { font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:4px }
.landing .spec-d { font-size:15px;line-height:1.62;color:var(--ink-soft);max-width:62ch }
.landing .spec-d b { color:var(--ink);font-weight:650 }
.landing .spec-d .pnum { font-family:var(--mono);color:var(--amber-bright) }
.landing .fitline { display:flex;flex-wrap:wrap;gap:6px;margin-top:12px }
.landing .ticker { margin-top:40px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);background:var(--surface-2);overflow:hidden;padding:16px 0 }
.landing .ticker-in { display:flex;width:max-content;gap:0;animation:ticker 48s linear infinite }
.landing .ticker:hover .ticker-in { animation-play-state:paused }
.landing .ticker-seq { display:flex;align-items:center;gap:0 18px;padding-right:18px;flex:0 0 auto;font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);font-weight:600 }
.landing .ticker-seq i { width:4px;height:4px;border-radius:50%;background:var(--amber);font-style:normal;flex:0 0 auto }
@keyframes ticker { from { transform:translateX(0) } to { transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce) {
  .landing .ticker-in { animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:10px 18px }
  .landing .ticker-seq[aria-hidden="true"] { display:none }
  .landing .ticker-seq { padding-right:0;flex-wrap:wrap;justify-content:center }
  .landing .ticker-seq i:last-child { display:none }
}
/* THREE plans now (Trial, Search, Full), not two. The grid was still hard-coded to two
   columns with a 4-row subgrid, so the third card wrapped underneath and the subgrid row
   alignment broke, which is what made this section look wrong. auto-fit keeps the cards
   aligned row-for-row at any count. */
.landing .plans { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto 1fr auto;column-gap:16px;row-gap:0;margin-top:36px;max-width:1240px }
.landing .plan { grid-row:span 4;display:grid;grid-template-rows:subgrid; background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 24px;box-shadow:var(--shadow); }
/* The markup uses .featured; .pro was the old two-plan class name and styled nothing. */
.landing .plan.pro, .landing .plan.featured { border-color:var(--amber);box-shadow:var(--shadow-lg) }
.landing .plan.featured { position:relative }
.landing .plan.featured::before { content:"Recommended";position:absolute;top:-11px;left:24px;
  background:var(--amber);color:var(--on-amber);font-size:10.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:4px 11px;border-radius:999px }
.landing .plan h3 { font-size:13px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted) }
.landing .plan .amt { margin-top:12px;font-size:36px;font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap }
.landing .plan .amt small { font-size:15px;font-weight:700;color:var(--muted);letter-spacing:-.01em;white-space:nowrap }
.landing .plan ul { margin:18px 0 24px;display:grid;gap:11px;align-content:start }
.landing .plan li { display:flex;gap:10px;font-size:14.5px;line-height:1.5;color:var(--ink-soft) }
.landing .plan li svg { flex:0 0 auto;margin-top:3px;color:var(--green) }
.landing .plan .btn { align-self:end;justify-self:start }
@supports not (grid-template-rows:subgrid) {
  .landing .plan { display:flex;flex-direction:column }
  .landing .plan ul { flex:1 1 auto }
  .landing .plan .btn { align-self:flex-start }
}
.landing .plan-note { margin-top:22px;font-size:14px;line-height:1.62;color:var(--ink-soft);max-width:70ch }
.landing .close { margin-top:96px;background:var(--dark);border-top:3px solid var(--amber) }
.landing .close-in { display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:56px;align-items:center;padding-top:74px;padding-bottom:78px }
.landing .close .eyebrow { color:var(--amber-bright) }
.landing .close h2 { margin-top:14px;font-size:clamp(29px,3.4vw,42px);line-height:1.07;letter-spacing:-.035em;font-weight:800;color:var(--dark-head);max-width:17ch }
.landing .close p { margin-top:18px;font-size:16px;line-height:1.62;color:var(--dark-text);max-width:48ch }
.landing .close-form { display:flex;flex-direction:column;gap:12px }
.landing .close-form input { width:100%;font:inherit;font-size:16px;padding:14px 16px;border:1px solid var(--line);border-radius:12px; background:var(--surface);color:var(--ink); }
.landing .close-form input::placeholder { color:var(--muted) }
.landing .close-form .btn { width:100% }
.landing .close-note { margin-top:2px;font-size:13px;line-height:1.6;color:var(--dark-muted) }
.landing .site-foot { background:var(--dark);border-top:1px solid var(--dark-line);color:var(--dark-muted);padding:34px 0 44px }
.landing .foot-in { display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between }
.landing .site-foot .brand-name { color:var(--dark-head) }
.landing .foot-links { display:flex;flex-wrap:wrap;gap:20px;font-size:13.5px;font-weight:600 }
.landing .foot-links a { text-decoration:none;color:var(--dark-text) }
.landing .foot-links a:hover { color:var(--dark-head) }
.landing .fine { margin-top:26px;font-size:13px;line-height:1.65;color:var(--dark-muted);max-width:80ch }
.landing .foot-legal { margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted) }
@media (max-width:1080px) {
  .landing .sec, .landing .sec-cont { grid-template-columns:180px minmax(0,1fr);gap:36px }
  .landing .plans { max-width:none }
}
@media (max-width:940px) {
  .landing .hero-grid { grid-template-columns:1fr;grid-template-areas:"head" "proof" "tail";row-gap:28px }
  .landing .hero-tail { padding-top:0 }
  .landing .lede { max-width:60ch }
  .landing .nav .anchor { display:none }
  .landing .sec, .landing .sec-cont { grid-template-columns:1fr;gap:20px }
  .landing .sec { padding-top:20px }
  .landing .sec-cont > * { grid-column:1 }
  .landing .sec-label { position:static;display:flex;align-items:baseline;gap:14px }
  .landing .sec-kicker { margin-top:0 }
  .landing .sec h2 { max-width:24ch }
  .landing .band { padding-top:64px }
  .landing .steps { grid-template-columns:1fr }
  .landing .step { padding:22px 0 24px }
  .landing .step:nth-child(even) { padding-left:0;border-left:0 }
  .landing .step:nth-last-child(2) { border-bottom:1px solid var(--line) }
  .landing .pair { grid-template-columns:1fr }
  .landing .close-in { grid-template-columns:1fr;gap:32px;padding-top:56px;padding-bottom:60px }
  .landing .close h2 { max-width:22ch }
}
.landing .lbl-short { display:none }
@media (max-width:680px) {
  .landing .shell { padding:0 18px }
  .landing .head-in { height:60px;gap:10px }
  .landing .brand { gap:9px }
  .landing .brand-mark { width:31px;height:31px }
  .landing .brand-name { font-size:17px }
  .landing .nav { gap:12px }
  .landing .nav a { font-size:13.5px }
  .landing .btn.small { font-size:13.5px;padding:8px 13px }
  .landing .lbl-long { display:none }
  .landing .lbl-short { display:inline }
  .landing .hero { padding:30px 0 38px }
  .landing h1 { font-size:33px }
  .landing .band { padding-top:52px }
  .landing .stat-grid { grid-template-columns:1fr }
  .landing .stat { border-left:none;border-top:1px solid var(--line);padding:20px 0 }
  .landing .stat:first-child { border-top:none }
  .landing .proof-bar { flex-wrap:wrap }
  .landing .veh-chip { order:1;font-size:12.5px }
  .landing .pb-go { order:2;margin-left:auto }
  .landing .fake-input { order:3;flex-basis:100% }
  .landing .proof-meta { gap:7px }
  .landing .proof-meta .tag { margin-left:0 }
  .landing .vendors { grid-template-columns:repeat(2,1fr) }
  .landing .searchbar { flex-wrap:wrap }
  .landing .searchbar .input { flex-basis:100% }
  .landing .searchbar .btn { width:100% }
  .landing .status-line .t { margin-left:0 }
  .landing .spec-row { grid-template-columns:1fr;gap:8px;padding:16px 0 }
  .landing .spec-t { padding-top:0 }
  .landing .ticker { padding:13px 0 }
  .landing .ticker-seq { gap:0 14px;padding-right:14px;font-size:11px }
  .landing .plans { grid-template-columns:1fr;grid-template-rows:none;row-gap:18px }
  .landing .plan { grid-row:auto;display:flex;flex-direction:column }
  .landing .plan .btn { align-self:flex-start }
  .landing .close-in { grid-template-columns:1fr }
  .landing .close-form .btn { width:100% }
  .landing .foot-in { flex-direction:column;align-items:flex-start;gap:18px }
}

@media (max-width: 480px) {
  /* Naming the stores is the entire point of this strip, and at two columns a phone
     truncates the two that matter most to "Classic Industrie" and "Classic Performa".
     One column costs some height and keeps every name readable. */
  .landing .vendors { grid-template-columns: 1fr; }
}

/* The hero's left column runs 374px shorter than the proof panel beside it, which left a
   hole the old stat band was covering. Stretch the column and drop the store list to its
   baseline so both columns finish together. */
.landing .hero-tail { align-self: stretch; display: flex; flex-direction: column; }
.landing .hero-stores { margin-top: auto; }

/* ---------- iPhone safe areas (landing) ------------------------------------
   The landing page has its OWN masthead (.strip) and sticky header (.site-head);
   the safe-area rules in styles.css cover the APP view's .site-header and do not
   reach these. On the first simulator run the masthead sat under the clock and the
   Dynamic Island because nothing here consumed env(safe-area-inset-top).
   Zero in every desktop browser, so the website is unchanged. */
/* The masthead strip is gone, so .site-head IS the top element now. It is sticky, so it takes
   the inset as PADDING (it sits at the top from the first pixel) rather than as an offset,
   which would leave a transparent gap above a blurred bar. */
.landing .site-head { top: 0; padding-top: env(safe-area-inset-top); }
/* An opaque scrim behind the status bar. Without it, page content scrolls visibly through
   the inset gap above the parked header, which looks like a rendering fault. Height 0 on
   every desktop browser, so it is invisible on the web. */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top); background: var(--bg); z-index: 60; pointer-events: none;
}
/* The sticky section labels hang below the header, so their offset grows by the same inset. */
.landing .sec-label { top: calc(86px + env(safe-area-inset-top)); }

/* ---- 04 Ask it: the AI answer, rendered by the real renderer ---- */
.landing .ai-proof-frame { margin-top:26px;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-lg) }
.landing .ai-proof-q { margin:0;padding:14px 18px 0;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted) }
.landing .ai-proof-qt { margin:6px 0 0;padding:0 18px 16px;font-size:17px;font-weight:700;
  letter-spacing:-.015em;line-height:1.35;border-bottom:1px solid var(--line-soft) }
.landing .ai-proof-frame .ai-answer { margin:0;border:none;border-radius:0;box-shadow:none }
.landing .ai-proof-note { margin:0;padding:12px 18px 16px;font-size:12.5px;color:var(--muted);
  border-top:1px solid var(--line-soft) }
.landing .ai-points { list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px }
.landing .ai-points li { position:relative;padding-left:20px;font-size:15px;line-height:1.6;color:var(--ink-soft) }
.landing .ai-points li::before { content:"";position:absolute;left:0;top:11px;width:9px;height:5px;
  border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg) }
.landing .ai-points b { color:var(--ink);font-weight:700 }

/* Three plan cards need room. Below 900px they go to one column; the subgrid row alignment is
   turned off with them, or the cards inherit row heights meant for a three-across layout. */
@media (max-width: 900px) {
  .landing .plans { grid-template-columns:1fr; grid-template-rows:none; row-gap:16px; max-width:520px }
  .landing .plan { grid-row:auto; display:flex; flex-direction:column }
  .landing .plan ul { flex:1 1 auto }
}