/* dot — landing page. Colours come from tokens.css; no raw hex below. */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5;transition:background .2s,color .2s}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;background:none;border:0;color:inherit}
button,a,input,summary{outline-offset:3px}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent-ring);outline-offset:3px}
a{color:inherit;text-decoration:none}
button:disabled{cursor:wait}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;display:block}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:550}
::selection{background:var(--accent);color:var(--text-on-accent)}
[hidden]{display:none!important}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.container{max-width:1248px;width:calc(100% - 112px);margin-inline:auto}
.skip-link{position:absolute;left:20px;top:-100px;padding:12px 20px;background:var(--accent);color:var(--text-on-accent);z-index:100;border-radius:6px}
.skip-link:focus{top:15px}

/* ---- buttons: two roles only, see guide §3.1 ---- */
.button{border:1px solid transparent;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 22px;font-size:14px;line-height:1.4;font-weight:600;transition:background .2s,border-color .2s,color .2s,transform .12s;min-height:48px}
.button svg{width:18px;height:18px;transition:transform .2s}
.button:active{transform:translateY(1px)}
.button-primary{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent-border);box-shadow:var(--glow-accent)}
.button-primary:hover{background:var(--accent-hover)}
.button-primary:active{background:var(--accent-press)}
.button-secondary{background:transparent;color:var(--text);border-color:var(--border-strong)}
.button-secondary:hover{background:var(--surface-hover);border-color:var(--text-muted)}
.button-secondary:hover svg{transform:translateX(3px)}
.button-small{padding:10px 16px;min-height:42px;font-size:13px;gap:8px}
.text-link{padding:0;display:inline-flex;align-items:center;gap:8px;color:var(--accent-text-strong);font-size:14px;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--accent-subtle);transition:text-decoration-color .2s}
.text-link:hover{text-decoration-color:var(--accent-text-strong)}
.eyebrow{color:var(--text-muted);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;display:flex;gap:9px;align-items:center}
.status-dot{width:5px;height:5px;display:inline-block;flex-shrink:0;border-radius:50%;background:var(--accent-text)}

/* ---- header ---- */
.site-header{height:88px;display:flex;align-items:center;justify-content:space-between;gap:36px;border-bottom:1px solid var(--border);position:relative;z-index:5}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:30px;font-weight:700;letter-spacing:-1.8px;line-height:1}
.brand-dot{width:9px;height:9px;background:var(--accent-text);border-radius:50%;display:inline-block;flex-shrink:0}
.brand-divider{height:20px;background:var(--border-strong);width:1px;margin:0 7px 0 10px}
.brand-descriptor{font-size:11px;letter-spacing:.2px;font-weight:400;color:var(--text-muted);white-space:nowrap}
.desktop-nav{display:flex;gap:30px;margin-right:auto;padding-left:22px}
.desktop-nav a,.sign-in{color:var(--text-secondary);font-size:13px;transition:color .2s}
.desktop-nav a:hover,.sign-in:hover{color:var(--text)}
.header-actions{display:flex;gap:18px;align-items:center}
/* v5 §7 The nav pair is one height, aligned with "Sign in". */
.header-actions .button{min-height:44px;padding-block:11px}
.sign-in span{padding-left:4px;color:var(--text-muted)}
.theme-toggle{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);transition:background .2s,color .2s,border-color .2s}
.theme-toggle:hover{background:var(--surface-hover);color:var(--text);border-color:var(--border-strong)}
.theme-toggle svg{width:18px;height:18px}
.menu-toggle,.mobile-nav{display:none}

/* ---- hero ---- */
/* Centred hero: one column, headline -> subhead -> CTAs -> mock.
   8px side padding keeps an offset layer off the viewport edge. */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:28px;padding:56px 8px 72px}
.hero__headline{max-width:18ch}
/* Spec says 52ch "one line at desktop"; this sentence is 84 characters and
   needs 64ch (735px at 19px) to hold one line. 64ch is the minimum that
   meets the stated goal, and it wraps once the column drops under 735px. */
.hero__sub{max-width:64ch;color:var(--text-secondary);font-size:19px;line-height:1.5;font-weight:400;margin:0}
.hero__ctas{justify-content:center;margin-top:8px}
.hero__ctas .button{white-space:nowrap}
/* Full-bleed children of the centred column keep the container width. */
.hero>.product-stage,.hero>.trust-strip{align-self:stretch;width:100%}
.hero>.product-stage{margin-top:16px}   /* 28px gap + 16px = the mock's previous 44px */
.hero:before{content:"";position:absolute;inset:0 0 100px;z-index:-1;background-image:radial-gradient(var(--dot-field) .7px,transparent .7px);background-size:19px 19px;mask-image:radial-gradient(ellipse at 55% 63%,black,transparent 65%);opacity:.5}
h1{font-size:clamp(40px,4.6vw,64px);font-weight:500;line-height:1.1;letter-spacing:-2.6px}
h1 span{color:var(--accent-text)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-actions .button{white-space:nowrap}

/* ---- product mock (guide §2.2) ---- */
.product-stage{position:relative;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-lg);padding:12px 12px 12px;box-shadow:var(--shadow-md)}
.product-stage:before{content:"";position:absolute;inset:-12% -16px;background:var(--glow-hero);filter:blur(40px);z-index:-1;pointer-events:none}
.stage-caption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:2px 6px 12px;color:var(--text-muted)}
.stage-caption>span{font-size:11px;font-weight:500;letter-spacing:.12em}
.stage-caption button{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--text);font-weight:500;padding:4px 2px;border-radius:5px}
.stage-caption button:hover svg{transform:translateX(3px)}
.stage-caption svg{height:14px;width:14px;transition:transform .2s}
.product-window{display:grid;grid-template-columns:92px 300px minmax(0,1fr) 232px;grid-auto-rows:minmax(0,1fr);height:580px;background:var(--bg-subtle);color:var(--text);border:1px solid var(--mock-border);border-radius:9px;overflow:hidden;font-size:14px}
.product-window>*{min-height:0}

.app-rail{display:flex;align-items:center;flex-direction:column;background:var(--surface-raised);border-right:1px solid var(--border);padding:0 8px 18px}
.rail-brand{display:flex;align-items:center;justify-content:center;gap:5px;height:66px;flex-shrink:0;font-size:22px;line-height:1;font-weight:700;letter-spacing:-1.3px}
.rail-brand i{width:6px;height:6px;flex-shrink:0;border-radius:50%;background:var(--accent-text)}
.rail-tabs{width:100%;display:flex;flex-direction:column;gap:5px}
.rail-icon{width:100%;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 2px;border-radius:8px;color:var(--text-muted)}
.rail-icon svg{height:20px;width:20px}
.rail-icon b{font-size:10px;font-weight:500;letter-spacing:.1px}
.rail-icon.active{background:var(--accent-subtle);color:var(--accent-text)}
.rail-foot{margin-top:auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:18px}
.rail-bottom{width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;background:var(--surface-inset);border:1px solid var(--border-strong);color:var(--text-secondary);border-radius:50%;font-size:11px;font-weight:600}

.inbox-list{border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;min-width:0}
.inbox-title{display:flex;align-items:center;justify-content:space-between;padding:20px 18px 16px}
.inbox-title h2{font-size:19px;font-weight:600;letter-spacing:-.6px;display:flex;align-items:center;gap:8px}
.inbox-title h2 span{background:var(--surface-inset);color:var(--text-secondary);font-size:11px;letter-spacing:0;border-radius:5px;padding:2px 7px}
.inbox-title>svg{width:18px;height:18px;color:var(--text-muted)}
.inbox-tabs{font-size:12px;display:flex;gap:18px;border-bottom:1px solid var(--border);padding:0 18px;color:var(--text-muted)}
.inbox-tabs span{padding:0 0 12px;white-space:nowrap}
.inbox-tabs .selected{border-bottom:2px solid var(--accent-text);color:var(--text);font-weight:600}
.inbox-tabs b{font-size:11px;border-radius:4px;background:var(--surface-inset);padding:2px 5px;margin-left:3px;font-weight:500}
.contact-list{padding:8px}
.preview-contact{width:100%;display:flex;gap:11px;text-align:left;padding:13px 10px;border:1px solid transparent;border-radius:8px;color:var(--text);transition:background .15s}
.preview-contact:hover{background:var(--surface-hover)}
.preview-contact.active{background:var(--surface-hover);border-color:var(--border-strong)}
.preview-contact:focus-visible,.preview-composer:focus-visible{outline:2px solid var(--accent-ring);outline-offset:-2px}
.avatar{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:650;flex-shrink:0;letter-spacing:0}
.avatar-sage{background:#D3DEC6;color:#39452D}
.avatar-lavender{background:#CFD2DF;color:#3A3F51}
.avatar-sand{background:#E0D5C2;color:#4C4133}
.contact-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px;color:var(--text-secondary);font-size:12.5px;line-height:1.3}
.contact-copy>span:not(.contact-top):not(.contact-bottom){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.contact-top strong{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap}
.contact-top small{font-size:11px;color:var(--text-muted)}
.contact-bottom{display:flex;align-items:center;gap:6px;margin-top:1px;font-size:11px;min-height:15px;color:var(--text-muted)}
.channel-dot{width:7px;height:7px;border:1.5px solid var(--text-muted);display:inline-block;border-radius:50%;flex-shrink:0}
.unread-dot{width:7px;height:7px;background:var(--accent-text);border-radius:50%;margin-left:auto}
.contact-bottom svg{width:12px;height:12px}
.mini-tag{margin-left:auto;font-size:10px;border-radius:4px;background:var(--surface-inset);padding:3px 6px;color:var(--text-secondary)}
.inbox-footer{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:6px;margin:auto 18px 18px}
.inbox-footer .status-dot{width:5px;height:5px}

.preview-chat{min-width:0;display:flex;flex-direction:column;background:var(--bg-subtle)}
.preview-chat-header{display:flex;align-items:center;gap:11px;padding:14px 22px;background:var(--surface);border-bottom:1px solid var(--border)}
.preview-chat-header h3{font-size:15px;font-weight:600}
.preview-chat-header p{font-size:11.5px;color:var(--text-secondary);display:flex;gap:6px;align-items:center;margin-top:4px}
.preview-chat-header .avatar{width:36px;height:36px;font-size:12px}
.preview-chat-header .channel-dot{height:6px;width:6px;border-width:1.5px}
.open-tag{margin-left:auto;font-size:11px;background:var(--surface-inset);border:1px solid var(--border);color:var(--text-secondary);border-radius:5px;padding:4px 9px}
.more-dots{font-size:19px;letter-spacing:1px;margin-left:2px;color:var(--text-muted)}
.preview-messages{padding:20px 26px 16px;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.date-divider{width:fit-content;margin:0 auto 18px;font-size:11px;color:var(--text-secondary);background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:5px 12px}
.message{font-size:14px;line-height:1.55;padding:12px 15px;max-width:min(88%,430px);width:fit-content;border-radius:11px 11px 11px 3px;background:var(--bubble-in);border:1px solid var(--border);color:var(--bubble-in-text)}
/* Focal point 1: the customer's question is the brightest bubble in the thread. */
#preview-message{border-color:var(--border-strong);box-shadow:var(--shadow-sm);font-weight:450}
.message.sent{margin-left:auto;background:var(--bubble-out);border-color:var(--bubble-out);color:var(--bubble-out-text);border-radius:11px 11px 3px 11px;margin-top:14px}
.message-time{font-size:10.5px;color:var(--text-muted);margin-top:6px}
.message-time.sent-time{text-align:right}
/* Focal point 2: the vehicle card is the differentiator — give it the accent hairline. */
.vehicle-card{border:1px solid var(--vehicle-line);border-radius:9px;margin-top:18px;display:flex;align-items:center;gap:14px;padding:11px 13px;background:var(--surface);box-shadow:var(--shadow-sm)}
.car-art{background:var(--surface-inset);border-radius:6px;width:118px;height:70px;display:grid;place-items:center;flex-shrink:0;overflow:hidden;color:var(--text)}
.car-art svg{width:130px;height:74px;stroke:none}
.vehicle-card>div:not(.car-art){min-width:0}
.vehicle-kicker{display:block;font-size:10.5px;color:var(--text-muted);margin-bottom:5px}
.vehicle-card strong{display:block;font-size:14px;font-weight:600;margin-bottom:4px}
.vehicle-card strong+span{font-size:11.5px;color:var(--text-secondary);display:block}
.vehicle-arrow{width:17px;height:17px;color:var(--text-muted);margin-left:auto}
.preview-composer{margin:0 22px 18px;background:var(--surface-inset);border:1px solid var(--border);border-radius:9px;min-height:52px;padding:8px 10px 8px 15px;display:flex;align-items:center;justify-content:space-between;color:var(--text-muted);font-size:13px}
.composer-icons{display:flex;gap:14px;align-items:center}
.composer-icons svg{width:17px;height:17px}
.preview-send{width:34px;height:34px;display:grid;place-items:center;border-radius:7px;background:var(--accent);color:var(--text-on-accent)}

.customer-panel{border-left:1px solid var(--border);padding:22px 18px 18px;background:var(--surface);font-size:12px;display:flex;flex-direction:column;align-items:flex-start}
.customer-heading{display:flex;align-items:center;justify-content:space-between;align-self:stretch;font-weight:600;font-size:13px;margin-bottom:22px;color:var(--text)}
.customer-heading svg{width:16px;height:16px;color:var(--text-muted)}
.context-label{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.dealer-name{font-size:13px;display:flex;justify-content:space-between;align-self:stretch;margin-bottom:20px;font-weight:550}
.dealer-name span{color:var(--text-muted)}
.assigned{display:flex;align-items:center;gap:8px;width:100%;font-size:12.5px;margin-bottom:18px;color:var(--text-secondary)}
.small-avatar{width:26px;height:26px;display:inline-flex;justify-content:center;align-items:center;background:var(--surface-inset);border:1px solid var(--border-strong);color:var(--text-secondary);font-size:10px;font-weight:600;border-radius:50%;flex-shrink:0}
.online-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-text);margin-left:auto}
.context-pill{padding:4px 10px;background:var(--surface-inset);border-radius:4px;color:var(--text-secondary);font-size:11px}
.context-divider{width:100%;border-top:1px solid var(--border);margin:18px 0}
.context-detail{font-size:12px;display:flex;gap:9px;align-items:center;color:var(--text-secondary);margin-bottom:11px}
.context-detail svg{width:15px;height:15px;color:var(--text-muted)}
/* Focal point 3: the security line stays visible. */
.team-note{background:var(--surface-inset);border:1px solid var(--border-strong);padding:13px;border-radius:7px;margin-top:auto;width:100%;display:flex;gap:10px;align-items:flex-start}
.team-note svg{width:16px;height:16px;color:var(--accent-text);margin-top:1px}
.team-note p{font-size:12px;line-height:1.55;color:var(--text)}

/* ---- trust strip (replaces the old channel strip) ---- */
/* The hairline stays; the items sit 40px below it, so the 40px is padding
   rather than margin — the border lives on this same element. */
.trust-strip{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:12px 36px;margin:0 auto;padding:32px 0 0;border-top:1px solid var(--border);
  list-style:none;color:var(--text-muted);font-size:13px}
.trust-strip li{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.trust-strip svg{width:16px;height:16px;flex-shrink:0}


/* ---- sections ---- */
.section-space{padding-top:var(--section-gap)}
/* The two sections either side of the band set their own gap, tighter than
   --section-gap, so the band reads as one block with the page. */
.features{padding-top:80px}
.faq-section{padding-top:80px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:36px}
.section-heading h2,.how-intro h2,.faq-section h2{font-size:40px;letter-spacing:-1.6px;line-height:1.18}
.section-heading>p{font-size:14px;color:var(--text-secondary);line-height:1.75;max-width:320px;margin-bottom:4px}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--block-gap)}
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:0;overflow:hidden;box-shadow:var(--shadow-sm),var(--shadow-md)}
.feature-card__media{height:210px;margin:0;padding:0 24px;position:relative;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--text);border-bottom:1px solid var(--border);overflow:hidden}
.feature-card__body{padding:28px}
.feature-number{color:var(--text-muted);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.feature-card h3{font-size:19px;letter-spacing:-.4px;margin:10px 0;font-weight:500}
.feature-card__body>p{font-size:14px;line-height:1.7;color:var(--text-secondary);max-width:300px;min-height:72px;margin-bottom:22px}

/* feature-card illustrations — art kept, fills re-tokened (guide §4.5) */
.shared-visual{isolation:isolate}
.visual-orbit{position:absolute;border:1px solid var(--border-strong);border-radius:50%;width:160px;height:160px;z-index:-1}
.orbit-two{width:235px;height:235px;opacity:.4;mask-image:linear-gradient(black 65%,transparent)}
.inbox-center{width:61px;height:61px;background:var(--accent);border:5px solid var(--surface-inset);box-shadow:0 0 0 1px var(--border-strong),var(--shadow-md);border-radius:16px;display:grid;place-items:center;color:var(--text-on-accent);position:relative;transform:rotate(-5deg);z-index:1}
.inbox-center>svg{width:28px;height:28px}
.inbox-notification{position:absolute;right:-8px;top:-7px;background:var(--surface-inset);border:1px solid var(--border-strong);width:22px;height:22px;line-height:20px;text-align:center;border-radius:50%;font-size:10px;color:var(--text);transform:rotate(5deg)}
.floating-channel{position:absolute;display:grid;place-items:center;border:1px solid var(--border-strong);color:var(--text-secondary);background:var(--surface-inset);box-shadow:var(--shadow-sm);border-radius:10px;width:36px;height:36px}
.floating-channel svg{width:17px;height:17px}
.channel-one{top:16px;left:49px;transform:rotate(-12deg)}
.channel-two{right:24px;top:41px;transform:rotate(12deg)}
.channel-three{left:36px;bottom:24px;transform:rotate(-8deg)}
.visual-pill{position:absolute;bottom:1px;right:15px;font-size:11px;color:var(--text-secondary);background:var(--surface-inset);border:1px solid var(--border);border-radius:30px;padding:7px 12px;display:flex;align-items:center;gap:6px;box-shadow:var(--shadow-sm)}
.visual-pill .status-dot{width:5px;height:5px}
.handoff-visual{flex-direction:column;align-items:flex-end;gap:12px}
.handoff-note{display:flex;align-items:flex-start;gap:10px;padding:14px;background:var(--surface-inset);border:1px solid var(--border-strong);border-radius:8px;transform:rotate(-3deg);width:calc(100% - 6px);margin-right:6px;box-shadow:var(--shadow-sm)}
.handoff-note p{font-size:12px;line-height:1.6;color:var(--text-secondary)}
.handoff-note p b{display:block;font-size:12px;font-weight:550;color:var(--text);margin-bottom:5px}
.handoff-note p span{display:block}
.handoff-note em{font-style:normal;color:var(--accent-text);background:var(--accent-subtle);border-radius:3px;padding:2px 4px}
.handoff-assign{display:flex;align-items:center;gap:9px;background:var(--surface-inset);border:1px solid var(--border);border-radius:7px;padding:10px 12px;transform:rotate(2deg);font-size:11.5px;color:var(--text-secondary);width:84%;box-shadow:var(--shadow-sm)}
.handoff-assign b{color:var(--text);font-weight:550}
.handoff-assign svg{width:14px;height:14px;color:var(--text-muted);margin-left:auto}
.appointment-visual{flex-direction:column;align-items:flex-end;gap:12px}
.appointment-mini{display:flex;align-items:center;gap:12px;border:1px solid var(--border-strong);background:var(--surface-inset);border-radius:10px;padding:16px 14px;width:100%;transform:rotate(-2deg);box-shadow:var(--shadow-sm)}
.calendar-square{border-radius:6px;background:var(--accent);color:var(--text-on-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;width:42px;height:49px;flex-shrink:0}
.calendar-square small{font-size:9px;letter-spacing:1px}
.calendar-square b{font-size:21px;font-weight:500;line-height:1.2}
.appointment-mini>div{display:flex;flex-direction:column;gap:5px;min-width:0}
.appointment-mini strong{font-size:13px;font-weight:550;color:var(--text)}
.appointment-mini div>span{font-size:11.5px;color:var(--text-secondary)}
.appointment-mini div>.appointment-time{font-size:10.5px;color:var(--text-muted)}
.appointment-check{width:20px;height:20px;display:grid;place-items:center;color:var(--text-secondary);border:1px solid var(--border-strong);background:var(--surface);border-radius:50%;margin-left:auto}
.appointment-check svg{width:11px;height:11px}
.appointment-reply{border-radius:8px 8px 3px 8px;color:var(--bubble-out-text);background:var(--bubble-out);border:1px solid var(--bubble-out);padding:11px 14px;font-size:12.5px;transform:rotate(2deg);margin-right:7px}

/* ---- how it works ---- */
/* v4 §4: a full-bleed band. The section spans the viewport; .how-inner keeps
   the content on the page grid. */
/* v5 §1 A stroked object never touches a divider: the feature cards' offset
   layer used to overlap the band's top line. 112px of air on both sides. */
.how-section{margin:72px 0 0;padding:80px 0;border-bottom:1px solid var(--border)}
.how-intro h2{margin-bottom:44px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--block-gap)}
.step-card{display:block;padding:28px;border-radius:var(--radius-md)}
.step-badge{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;margin-bottom:20px;
  background:var(--surface-inset);color:var(--text)}
.steps h3{font-size:17px;font-weight:500;letter-spacing:-.2px;margin-bottom:8px}
.steps p{font-size:14px;color:var(--text-secondary);line-height:1.7}
.how-cta{margin-top:44px}

/* ---- faq: real buttons, aria-expanded (guide §2.5) ---- */
.faq-section{padding-bottom:92px}
.faq-section h2{margin-bottom:38px}
.faq-columns{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;align-items:start}
.faq-question{min-height:64px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item h3{margin:0;font-size:inherit;font-weight:inherit}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;padding:20px 0;font-size:16px;font-weight:500;color:var(--text);min-height:48px}
.faq-toggle{display:grid;place-items:center;border-radius:var(--radius-pill);flex-shrink:0;
  transition:background 120ms ease,transform 160ms ease,box-shadow 120ms ease}
.faq-question svg{width:17px;height:17px;color:var(--text-muted);flex-shrink:0}
.faq-question[aria-expanded=true] .faq-toggle{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.faq-toggle{transition:background 120ms ease,box-shadow 120ms ease}}
.faq-answer{padding-bottom:20px;max-width:560px}
.faq-answer p{color:var(--text-secondary);font-size:14.5px;line-height:1.75}
.faq-answer .text-link{margin-top:14px}

/* ---- closing panel ---- */
.final-cta{position:relative;overflow:hidden;text-align:center;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:58px 35px 56px;isolation:isolate;box-shadow:var(--shadow-sm)}
.final-cta:before{position:absolute;content:"";inset:0;background-image:radial-gradient(var(--dot-field) .8px,transparent .8px);background-size:17px 17px;mask-image:linear-gradient(90deg,black,transparent 40%,transparent 60%,black);z-index:-1}
.cta-content .eyebrow{justify-content:center;font-size:10px;letter-spacing:1.4px}
.cta-content h2{font-size:clamp(36px,4.2vw,54px);line-height:1.12;letter-spacing:-2.2px;margin:22px 0 18px;font-weight:500}
.cta-content h2 span{color:var(--accent-text)}
.cta-content>p:not(.eyebrow){font-size:15px;color:var(--text-secondary);margin-bottom:28px}
.cta-actions{justify-content:center;padding-right:8px}
.cta-orbit{position:absolute;left:-160px;top:50%;width:350px;height:350px;border:1px solid var(--ring-line);border-radius:50%;transform:translateY(-50%);z-index:-1}
.cta-orbit:after{content:"";position:absolute;inset:-45px;border:1px solid var(--border);border-radius:50%}

/* ---- footer ---- */
.site-footer{padding-top:52px;padding-bottom:26px}
.footer-top{display:flex;align-items:center;gap:24px;padding-bottom:32px}
.footer-top .brand{font-size:28px}
.footer-top .brand-dot{width:8px;height:8px}
.footer-top>span{font-size:13px;color:var(--text-muted);margin-left:3px}
.footer-top strong{font-weight:400;color:var(--text-secondary)}
.footer-top nav{margin-left:auto;display:flex;align-items:center;gap:27px;font-size:13px;color:var(--text-secondary)}
.footer-top nav button{font-size:13px;padding:0}
.footer-top nav a:hover,.footer-top nav button:hover{color:var(--text)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--border);padding-top:22px;font-size:12px;color:var(--text-muted)}

/* ---- dialogs ---- */
dialog{background:var(--surface-raised);color:var(--text);border:1px solid var(--border);border-radius:14px;padding:0;box-shadow:var(--shadow-lg);width:calc(100% - 32px);max-height:calc(100svh - 40px);overscroll-behavior:contain}
dialog::backdrop{background:rgba(6,9,6,.62);backdrop-filter:blur(7px)}
.dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:24px 26px}
.dialog-heading h2{font-size:24px;letter-spacing:-.8px}
.dialog-subtitle{font-size:13px;color:var(--text-secondary);margin-top:8px}
.icon-button{padding:8px;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;flex-shrink:0;color:var(--text-secondary)}
.icon-button:hover{background:var(--surface-hover);color:var(--text)}
.icon-button svg{height:18px;width:18px}
.demo-dialog{max-width:860px}
.demo-workspace{display:grid;grid-template-columns:215px minmax(0,1fr);min-height:430px;border-top:1px solid var(--border)}
.demo-conversations{background:var(--surface);border-right:1px solid var(--border);padding:14px 10px}
.demo-conversations>button{width:100%;border:1px solid transparent;border-radius:8px;display:flex;align-items:center;gap:10px;text-align:left;padding:12px 10px;font-size:13.5px;color:var(--text-secondary)}
.demo-conversations>button:hover{background:var(--surface-hover)}
.demo-conversations>button.active{background:var(--surface-hover);border-color:var(--border-strong);color:var(--text)}
.demo-conversations small{display:block;font-size:11px;color:var(--text-muted);margin-top:4px}
.demo-chat{min-width:0;display:flex;flex-direction:column;max-height:500px;background:var(--bg-subtle)}
.demo-chat>header{padding:17px 22px;border-bottom:1px solid var(--border);background:var(--surface)}
.demo-chat h3{font-size:15px}
.demo-chat>header p{font-size:12px;color:var(--text-secondary);margin-top:5px}
.demo-chat-log{padding:20px 22px;flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px;min-height:190px}
.demo-chat-log .message{font-size:14px;padding:11px 14px;line-height:1.6;max-width:85%;width:fit-content;overflow-wrap:anywhere;white-space:pre-wrap}
.demo-chat-log .sent{align-self:flex-end;margin:0}
.demo-composer{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid var(--border);background:var(--surface)}
.demo-composer input{min-width:0;flex:1;background:var(--surface-inset);border:1px solid var(--border);padding:12px;color:var(--text);border-radius:8px;font-size:14px}
.send-button{background:var(--accent);color:var(--text-on-accent);border:1px solid var(--accent-border);width:42px;height:42px}
.send-button:hover{background:var(--accent-hover);color:var(--text-on-accent)}
.book-dialog{max-width:450px;padding:28px}
.book-dialog .dialog-heading{padding:0;margin-bottom:26px;align-items:center}
.book-dialog>h2{font-size:28px;letter-spacing:-1px}
.book-intro{font-size:14px;color:var(--text-secondary);margin:10px 0 24px;line-height:1.6}
.book-dialog label{display:block;font-size:13px;margin:16px 0 7px;color:var(--text-secondary)}
.book-dialog input{width:100%;padding:13px;font-size:14px;border:1px solid var(--border);background:var(--surface-inset);border-radius:8px;color:var(--text)}
input::placeholder{color:var(--text-muted)}
.book-dialog .button{width:100%;margin-top:24px}
.form-note{font-size:12px;line-height:1.6;color:var(--text-muted);margin-top:14px;text-align:center}
.book-result{padding:22px;border:1px solid var(--border-strong);background:var(--surface-inset);border-radius:10px;font-size:14px;line-height:1.7;color:var(--text-secondary)}
.book-result h3{font-size:21px;letter-spacing:-.4px;margin-bottom:8px;color:var(--text)}
.book-result .button{margin-top:20px}

/* ---- one orchestrated hero moment, then stillness (guide §6.3) ---- */
@media(prefers-reduced-motion:no-preference){
  .hero-mock-animate .preview-contact{opacity:0;animation:mock-row .45s ease-out forwards}
  .hero-mock-animate .preview-contact:nth-child(1){animation-delay:.15s}
  .hero-mock-animate .preview-contact:nth-child(2){animation-delay:.27s}
  .hero-mock-animate .preview-contact:nth-child(3){animation-delay:.39s}
  .hero-mock-animate #preview-message,.hero-mock-animate #preview-message-time{opacity:0;animation:mock-in .5s ease-out .62s forwards}
  .hero-mock-animate .vehicle-card{opacity:0;animation:mock-in .5s ease-out .92s forwards}
  @keyframes mock-row{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
  @keyframes mock-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
}

/* =====================================================================
   Light theme v3 (light-theme-v3.md)
   Light is a stroke-based page: thin dark lines, solid offset shadows,
   flat fills. No blur glows, no radial gradients on the white page. Soft
   effects survive only INSIDE the dark product surfaces, because that is
   the product and it keeps its own mood. Dark theme is untouched.
   ===================================================================== */

/* §2 Headline emphasis — outlined lime text. The one emphasis on the page.
   paint-order puts the stroke behind the fill so the letters stay fat; the
   text-shadow ring is the fallback for engines that ignore it on HTML text. */
:root[data-theme="light"] .headline-emphasis{
  color:var(--accent);background:none;padding:0;margin:0;border-radius:0;
  -webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:none;
  letter-spacing:-.01em}
/* Only where paint-order is unsupported: the ring instead, and no stroke —
   stacking the two is what produced the doubled edge. */
@supports not (paint-order: stroke fill){
  :root[data-theme="light"] .headline-emphasis{
    -webkit-text-stroke:0;
    text-shadow:
      -1px -1px 0 var(--ink), 1px -1px 0 var(--ink),
      -1px  1px 0 var(--ink), 1px  1px 0 var(--ink)}
}

/* v4 §2 One button, everywhere. Same construction on the white page and
   inside the dark closing panel — only --offset-color changes there. */
:root[data-theme="light"] .button{
  border:1px solid var(--ink);border-radius:var(--radius-sm);box-shadow:var(--offset-sm);
  transition:transform 100ms ease,box-shadow 100ms ease,background 100ms ease}
:root[data-theme="light"] .button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--offset-color)}
:root[data-theme="light"] .button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--offset-color)}
:root[data-theme="light"] .button-primary{background:var(--accent);color:var(--text-on-accent)}
:root[data-theme="light"] .button-primary:hover{background:var(--accent-hover)}
:root[data-theme="light"] .button-primary:active{background:var(--accent-press)}
:root[data-theme="light"] .button-secondary{background:var(--surface);color:var(--text)}
:root[data-theme="light"] .button-secondary:hover{background:var(--surface-hover)}
/* The nav toggle is the secondary button without a label. */
:root[data-theme="light"] .theme-toggle{
  border:1px solid var(--ink);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);
  box-shadow:var(--offset-sm);
  transition:transform 100ms ease,box-shadow 100ms ease,background 100ms ease}
:root[data-theme="light"] .theme-toggle:hover{
  background:var(--surface-hover);border-color:var(--ink);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--offset-color)}
:root[data-theme="light"] .theme-toggle:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--offset-color)}

/* §3.4 Links, labels, icons — ink, never green. */
:root[data-theme="light"] .text-link{color:var(--text);text-decoration-color:var(--ink)}
:root[data-theme="light"] .text-link:hover{text-decoration-thickness:2px;text-decoration-color:var(--ink)}
:root[data-theme="light"] .faq-question svg{color:var(--text)}
:root[data-theme="light"] .status-dot{background:var(--ink)}
/* The logo dot stays lime, with a 1px ink ring so it has an edge on white. */
:root[data-theme="light"] .brand-dot{background:var(--accent);border:1px solid var(--ink);box-shadow:none}
:root[data-theme="light"] .rail-brand i{background:var(--accent)}
/* Nav toggle: ink stroke, no shadow. */

/* §6 Nav sits on a 1px ink line. */
:root[data-theme="light"] .site-header{border-bottom:var(--stroke);box-shadow:none}

/* §3/§4 The five dark blocks sit above the grain layer. */
.product-stage,.final-cta,.feature-card__media{position:relative;z-index:1}
.product-stage{border-radius:var(--radius-lg);border-color:var(--mock-border)}
.final-cta{border-radius:var(--radius-lg);--ring-line:rgba(201,247,92,.14);--border:rgba(201,247,92,.10)}

/* v4 §1.2 Hero mock and closing panel — lime border + green offset. Two
   layers: the v3 ink outline is gone. The offset is a box-shadow, so it picks
   up the block's own radius and the corners stay clean (§1.3). */
:root[data-theme="light"] .product-stage,
:root[data-theme="light"] .final-cta{
  border:2px solid var(--accent);
  outline:none;
  border-radius:var(--radius-lg);
  box-shadow:var(--offset-lg)}
:root[data-theme="light"] .product-stage:before{display:none}

/* §5 Feature cards — white body, ink stroke, solid offset. */
:root[data-theme="light"] .feature-card{
  /* Scoped to the card: buttons, hero mock, step cards and the closing panel
     keep the page-level offset. --offset-md is re-declared here because a
     nested var() resolves where the custom property is declared, so the :root
     copy had already baked in #1E3318. The :hover rule reads --offset-color
     directly, so it follows on its own. */
  --offset-color:#13220F;
  --offset-md:5px 5px 0 var(--offset-color);
  background:var(--surface);border:var(--stroke);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--offset-md)}
/* §5 The illustration panel is deep green, not black, with a lime hairline, so
   the three cards read as illustrations rather than three more screenshots.
   The illustrations themselves are unchanged — they pick this up through the
   tokens. Every label on this palette clears AA (lowest is 5.7:1). */
:root[data-theme="light"] .feature-card__media{
  --bg:              #182913;
  --surface:         #1F3419;
  --surface-raised:  #263D1E;
  --surface-inset:   #13220F;
  --border:          #2F4827;
  --border-strong:   #3B5A31;
  --text:            #F3F6EF;
  --text-secondary:  #C9D6BF;
  --text-muted:      #9DB08F;
  --accent:          #C9F75C;
  --accent-text:     #C9F75C;
  --accent-subtle:   rgba(201,247,92,.16);
  --bubble-out:      #2F5522;
  --bubble-out-text: #EAF7D5;
  --ring-line:       rgba(201,247,92,.18);
  color-scheme:dark;
  background:var(--bg);color:var(--text);
  border-bottom:2px solid #C9F75C}
/* The concentric rings in card one, so they show on green. */
:root[data-theme="light"] .feature-card__media .visual-orbit{border-color:rgba(201,247,92,.18)}

/* v4 §2 Inside the closing panel the button keeps its shape and stroke; only
   the offset lightens so the layer still reads on black. */
:root[data-theme="light"] .final-cta{--offset-color:#3B6A2A}
:root[data-theme="light"] .final-cta .button-primary{border-color:var(--accent)}
:root[data-theme="light"] .final-cta .button-secondary{background:transparent;color:#F3F6EF;border-color:var(--accent)}
:root[data-theme="light"] .final-cta .button-secondary:hover{background:rgba(201,247,92,.10)}
:root[data-theme="light"] .force-dark .text-link{color:var(--accent-text)}

/* v4 §5 FAQ toggles are real objects in the button language: stroked circles
   that turn lime and rotate into an x. One icon, rotated — never swapped. */
:root[data-theme="light"] .faq-toggle{
  width:32px;height:32px;background:var(--surface);border:1px solid var(--ink);color:var(--ink)}
:root[data-theme="light"] .faq-question svg{color:var(--ink)}
:root[data-theme="light"] .faq-item:hover .faq-toggle{background:var(--accent)}
:root[data-theme="light"] .faq-question[aria-expanded=true] .faq-toggle{
  background:var(--accent);box-shadow:2px 2px 0 var(--offset-color)}
:root[data-theme="light"] .faq-item{border-bottom:1px solid var(--border)}
:root[data-theme="light"] .faq-item.is-open{
  background:var(--accent-subtle);border-bottom:1px solid var(--ink)}
:root[data-theme="light"] .faq-item.is-open .faq-question{font-weight:600}
:root[data-theme="light"] .faq-item.is-open{margin-inline:-18px;padding-inline:18px;border-radius:var(--radius-md) var(--radius-md) 0 0}
:root[data-theme="light"] .faq-answer{
  background:none;border:0;border-radius:0;padding:0 0 20px;margin-bottom:0;color:var(--text-secondary)}

/* v4 §3 Every floating chip in the three panels is one object: raised green
   fill, lime stroke, small dark-green offset so it lifts off the panel.
   Scoped to light because v4 says dark must not change — the same chips in
   dark keep their v3 look. */
:root[data-theme="light"] .feature-card__media .chip{
  background:var(--surface-raised);border:1px solid var(--accent);border-radius:var(--radius-pill);
  box-shadow:3px 3px 0 #13220F;color:var(--text)}
:root[data-theme="light"] .feature-card__media .chip-block{border-radius:12px}
:root[data-theme="light"] .feature-card__media .chip .status-dot{background:var(--accent)}
/* §3 The chip sat on the panel's bottom-right corner and read as clipped.
   This puts it over the outer ring, fully inside the panel. */
:root[data-theme="light"] .feature-card__media .chip-caught-up{
  left:68%;top:80%;right:auto;bottom:auto;transform:translate(-50%,-50%);
  /* An absolute box shrink-to-fits against the space left of its own `left`,
     so at 64% the label wrapped to five lines and grew past the panel floor.
     max-content sizes it to the single line first; max-width still caps it. */
  width:max-content;max-width:calc(100% - 24px)}

/* v4 §4 "Less setup" is a pale lime band with stroked stepper cards — the one
   place the white-white rhythm breaks. The band is full viewport width; the
   content inside stays on the page grid. */
:root[data-theme="light"] .how-section{
  background:var(--accent-subtle);
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink)}
:root[data-theme="light"] .step-card{
  background:var(--surface);border:1px solid var(--ink);border-radius:var(--radius-md);box-shadow:var(--offset-md)}
:root[data-theme="light"] .step-badge{
  background:var(--accent);color:var(--text-on-accent);border:1px solid var(--ink)}

/* v5 §5 Every stroked object lifts the way the buttons do, so the page reads
   as one material. Cursor stays default — the cards are not links. The chips
   inside the illustration panels are artwork and never animate. */
:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .step-card,
:root[data-theme="light"] .product-stage{
  transition:transform 140ms ease,box-shadow 140ms ease}
:root[data-theme="light"] .feature-card:hover,
:root[data-theme="light"] .step-card:hover{
  transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--offset-color)}
:root[data-theme="light"] .product-stage:hover{
  transform:translate(-1px,-1px);box-shadow:7px 7px 0 var(--offset-color)}
@media(prefers-reduced-motion:reduce){
  :root[data-theme="light"] .feature-card,
  :root[data-theme="light"] .step-card,
  :root[data-theme="light"] .product-stage,
  :root[data-theme="light"] .button,
  :root[data-theme="light"] .theme-toggle{transition:background 120ms ease}
  :root[data-theme="light"] .feature-card:hover,
  :root[data-theme="light"] .step-card:hover,
  :root[data-theme="light"] .product-stage:hover,
  :root[data-theme="light"] .button:hover,
  :root[data-theme="light"] .button:active,
  :root[data-theme="light"] .theme-toggle:hover,
  :root[data-theme="light"] .theme-toggle:active{transform:none}
}

/* v5 §7 The footer closes the page the way the nav opens it. */
:root[data-theme="light"] .site-footer{border-top:1px solid var(--ink)}
/* v5 §7 Selection on the light page. */
:root[data-theme="light"] ::selection{background:var(--accent);color:var(--ink)}

/* §6 Focus ring. Spec writes it as a 3px box-shadow, but every button on this
   page already carries an offset shadow that a box-shadow would replace, so
   it is an outline of the same weight. */
:root[data-theme="light"] button:focus-visible,
:root[data-theme="light"] a:focus-visible,
:root[data-theme="light"] input:focus-visible,
:root[data-theme="light"] summary:focus-visible{
  outline:3px solid var(--accent-ring);outline-offset:2px}

/* §6 Grain: barely there, and never over the dark blocks. */
:root[data-theme="light"] body:after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px}

/* ---- responsive ---- */
@media(max-width:1200px){:root{--section-gap:76px}
.container{width:calc(100% - 72px)}
h1{font-size:5vw;letter-spacing:-2.2px}
.product-window{grid-template-columns:86px 262px minmax(0,1fr) 200px;height:556px}
.customer-panel{padding-inline:14px}
.preview-messages{padding-inline:20px}
.preview-chat-header{padding-inline:17px}
.section-heading h2,.how-intro h2,.faq-section h2{font-size:36px}
.feature-card__body>p{min-height:96px}
}

@media(max-width:1000px){:root{--section-gap:64px}
.container{width:calc(100% - 56px)}
.desktop-nav{gap:20px;padding-left:16px}
.site-header{gap:18px}
.brand-descriptor{display:none}
.brand-divider{display:none}
.header-actions{gap:14px}
.product-window{grid-template-columns:84px 250px minmax(0,1fr);height:520px}
.customer-panel{display:none}
.feature-grid{gap:14px}
.feature-card__body{padding-inline:18px}
.feature-card h3{font-size:17px}
.feature-card__body>p{font-size:13px;min-height:110px}
.feature-card__media{height:186px;padding-inline:18px}
.steps{gap:18px}
.step-card{padding:22px}
.steps h3{font-size:15px}
.faq-section{padding-bottom:72px}
.faq-columns{gap:0 40px}
}

@media(max-width:760px){.container{width:calc(100% - 40px)}
.site-header{height:76px}
.brand{font-size:27px}
.desktop-nav,.header-actions .sign-in,.header-actions .button{display:none}
.header-actions{gap:8px}
.menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;border:1px solid var(--border);border-radius:8px}
.menu-toggle span{height:1.5px;width:17px;background:var(--text);transition:transform .2s}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.mobile-nav{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:68px;border:1px solid var(--border);background:var(--surface-raised);border-radius:10px;padding:14px;box-shadow:var(--shadow-lg);z-index:20}
.mobile-nav>a:not(.button){padding:13px;font-size:15px;color:var(--text-secondary);min-height:44px;display:flex;align-items:center}
.mobile-nav .button{margin-top:10px}
h1{font-size:clamp(34px,7.4vw,52px);letter-spacing:-1.8px;line-height:1.14}
.hero-actions .button{flex:1 1 auto}
.product-stage{padding:8px}
.stage-caption{font-size:10px;padding:2px 4px 9px}
.stage-caption button{font-size:11px}
.product-window{grid-template-columns:78px minmax(0,1fr);height:470px}
.inbox-list{display:none}
.preview-chat-header{padding:14px 16px}
.preview-messages{padding:16px 16px 12px}
.message{font-size:13.5px;max-width:94%}
.vehicle-card{gap:11px;padding:9px}
.car-art{width:96px;height:58px}
.car-art svg{width:106px;height:60px}
.preview-composer{margin:0 16px 14px}
.trust-strip{font-size:12px;gap:10px 24px;padding-top:32px}
.section-heading{display:block;margin-bottom:26px}
.section-heading h2,.how-intro h2,.faq-section h2{font-size:30px;letter-spacing:-1.2px}
.section-heading>p{font-size:13px;max-width:none;margin-top:14px}
.desktop-break{display:none}
.feature-grid{grid-template-columns:1fr}
.feature-card{padding:0;display:grid;grid-template-columns:1fr 1.15fr}
.feature-card__media{height:auto;min-height:210px;padding:24px;border-bottom:0;border-right:1px solid var(--border)}
.feature-card__body{padding:24px}
.feature-card h3{font-size:18px;margin:9px 0}
.feature-card__body>p{font-size:13.5px;min-height:0;margin-bottom:18px}
.steps{grid-template-columns:1fr;gap:14px}
.how-intro h2{margin-bottom:30px}
.how-cta{margin-top:30px}
.faq-section{padding-bottom:64px}
.faq-section h2{margin-bottom:22px}
.faq-columns{grid-template-columns:1fr;gap:0}
.faq-question{font-size:15px}
.final-cta{padding:44px 24px}
.footer-top{flex-wrap:wrap;gap:14px}
.footer-top nav{margin-left:0;width:100%;gap:18px}
.footer-bottom{flex-direction:column;gap:8px}
.demo-workspace{grid-template-columns:1fr;min-height:0}
.demo-conversations{display:flex;gap:8px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border);padding:10px}
.demo-conversations>button{width:auto;flex:0 0 auto}
.demo-conversations small{display:none}
.dialog-heading{padding:20px}
.dialog-heading h2{font-size:21px}
}

/* Guide §8: below 540 the mock shows the thread only — no rail, no list, no panel. */
@media(max-width:640px){
.hero{padding:40px 8px 48px;gap:20px}
.hero__sub{font-size:17px}
:root{--section-gap:64px}
.trust-strip{padding-top:24px}
.features,.faq-section{padding-top:56px}
.how-section{margin-top:48px;padding:56px 0}
}
@media(max-width:540px){
.hero-actions{flex-direction:column;align-items:stretch}
.product-window{grid-template-columns:minmax(0,1fr);height:440px}
.app-rail{display:none}
.preview-chat-header{padding:13px 14px;gap:9px}
.preview-chat-header h3{font-size:14px}
.preview-chat-header .avatar{width:32px;height:32px;font-size:11px}
.open-tag{display:none}
.preview-messages{padding:14px 14px 10px}
.message{font-size:13px;padding:11px 13px}
.vehicle-card{margin-top:14px}
.car-art{width:82px;height:50px}
.car-art svg{width:92px;height:52px}
.preview-composer{margin:0 14px 12px;min-height:48px}
.feature-card{display:block;padding:0}
.feature-card__media{height:190px;min-height:0;padding:0 22px;border-right:0;border-bottom:1px solid var(--border)}
.feature-card__body{padding:22px}
.cta-content h2{letter-spacing:-1.4px}
}

@media(max-width:360px){.container{width:calc(100% - 32px)}
.product-window{height:420px}
.message{font-size:12.5px}
.trust-strip{font-size:11.5px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---- touch targets: 44px floor (guide §8) ---- */
.theme-toggle,.icon-button{width:44px;height:44px}
.stage-caption button{min-height:44px;padding-block:10px}
.brand{padding-block:9px}
.footer-top nav a,.footer-top nav button{min-height:44px;display:inline-flex;align-items:center}
.desktop-nav a,.sign-in{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:760px){
.text-link{min-height:44px}
.faq-question{padding-block:18px}
}