/* SMV Labs bot page, v2 (premium/alive). Only SMV tokens (design-system/smv/tokens.css, B · Dark).
   Rules from the UG research (reports/lane-c.md): left-aligned, light display weights, tracking no tighter than
   -0.035em, one idea per screen, 1px seams, one radius (--r-button), no badges, no icon cards, no numbered steps.
   Motion: one-shot or scroll-driven only. Nothing loops at rest. */
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--c-ground);-webkit-text-size-adjust:100%}
body{background:var(--c-ground);color:var(--c-text-2);font:var(--t-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;font-feature-settings:"tnum" 0}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
h2{font:300 64px/1 var(--f-sans);letter-spacing:-.035em;color:var(--c-text)}
section{padding:160px 0;border-top:1px solid var(--c-line)}

/* Header: wordmark and one text link */
.top{position:sticky;top:0;z-index:10;background:var(--c-scrim);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--c-text);font:500 17px/1 var(--f-sans);letter-spacing:-.01em}
.brand img{width:28px;height:28px;border-radius:7px;box-shadow:var(--seam)}
.toplink{display:inline-flex;align-items:center;gap:8px;font:500 15px/1 var(--f-sans);color:var(--c-text);text-decoration:none}
.toplink span{transition:transform var(--d-fast) var(--ease)}
.toplink:hover span{transform:translateX(3px)}

/* Button: one radius, ivory on black */
.btn{display:inline-flex;align-items:center;justify-content:center;height:58px;padding:0 36px;border-radius:var(--r-button);background:var(--c-text);color:var(--c-on-light);font:var(--t-button);text-decoration:none;transition:transform var(--d-fast) var(--ease),opacity var(--d-fast) var(--ease)}
.btn:hover{opacity:.92}
.btn:active{transform:scale(.98)}
.via{font:var(--t-data);color:var(--c-text-3);margin-top:16px}
.via+.via{margin-top:6px}
.via a{color:var(--c-text-2);text-decoration:underline;text-decoration-color:var(--c-line);text-underline-offset:3px}

/* Hero: left copy, live phone right */
.hero{border-top:0;padding:72px 0 120px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:80px;align-items:center;min-height:calc(100svh - 64px - 192px)}
h1{font:300 104px/.96 var(--f-sans);letter-spacing:-.035em;color:var(--c-text)}
h1 span{color:var(--c-text-3)}
.lead{font:300 22px/1.4 var(--f-sans);color:var(--c-text-2);margin-top:32px;max-width:30ch}
.cta{margin-top:44px}

/* Reveal on load: one orchestrated entrance, then nothing moves */
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .lead,.hero .cta,.hero-phone{animation:rise 900ms var(--ease) both}
  .hero .lead{animation-delay:90ms}.hero .cta{animation-delay:180ms}.hero-phone{animation-delay:120ms;animation-duration:1100ms}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* The phone: real iPhone frame over an iOS Messages screen drawn in HTML (SF Pro on Apple devices) */
.hero-phone{justify-self:end}
.device{--s:.8;position:relative;width:calc(450px*var(--s));height:calc(920px*var(--s))}
.dev-in{position:absolute;left:0;top:0;width:450px;height:920px;transform:scale(var(--s));transform-origin:0 0}
.bezel{position:absolute;inset:0;width:450px;height:920px;pointer-events:none;z-index:3}
.scr{position:absolute;left:24px;top:23px;width:402px;height:874px;border-radius:56px;overflow:hidden;background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",var(--f-sans);-webkit-font-smoothing:antialiased}
.scr svg{fill:#fff}
.sb{position:absolute;top:0;left:0;right:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:4px 30px 0 52px;z-index:5}
.sb .t{font-weight:600;font-size:17px;letter-spacing:-.2px}
.sb .r{display:flex;align-items:center;gap:7px}
.hd{position:absolute;top:0;left:0;right:0;height:158px;z-index:4;background:linear-gradient(#000 84%,rgba(0,0,0,0))}
.glass{background:rgba(118,118,128,.26);box-shadow:inset 0 .5px 0 rgba(255,255,255,.22),inset 0 0 0 .5px rgba(255,255,255,.08)}
.circ{position:absolute;top:66px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.back{left:16px}.video{right:16px}
.av{position:absolute;top:58px;left:173px;width:56px;height:56px;border-radius:50%;overflow:hidden}
.av img{width:100%;height:100%}
.name{position:absolute;top:110px;left:50%;transform:translateX(-50%);height:24px;padding:0 9px 0 11px;border-radius:12px;display:flex;align-items:center;gap:3px;font-weight:600;font-size:13px;letter-spacing:-.08px;white-space:nowrap}
.th{position:absolute;left:0;right:0;bottom:92px;display:flex;flex-direction:column;padding:0 16px}
.ts{align-self:center;font-size:11.5px;line-height:1;color:#8e8e93;margin:6px 0 10px}
.ts b{font-weight:600}
.m{max-width:268px;padding:7px 12px 7.5px;border-radius:18px;font-size:17px;line-height:22px;letter-spacing:-.43px;position:relative;margin-top:2px}
.in{align-self:flex-start;background:#262628}
.out{align-self:flex-end;background:#0a84ff}
.g{margin-top:9px}
.in.tail::before,.out.tail::before{content:"";position:absolute;bottom:0;height:20px;width:20px}
.in.tail::before{left:-7px;background:#262628;border-bottom-right-radius:16px 14px}
.in.tail::after{content:"";position:absolute;bottom:0;left:-10px;width:10px;height:20px;background:#000;border-bottom-right-radius:10px}
.out.tail::before{right:-7px;background:#0a84ff;border-bottom-left-radius:16px 14px}
.out.tail::after{content:"";position:absolute;bottom:0;right:-10px;width:10px;height:20px;background:#000;border-bottom-left-radius:10px}
.photo{align-self:flex-end;width:120px;height:160px;border-radius:18px;overflow:hidden;margin-top:9px}
.photo img{width:100%;height:100%;object-fit:cover}
.rcpt{align-self:flex-end;font-size:11.5px;font-weight:500;line-height:1;color:#8e8e93;margin:4px 4px 0 0}
.typing{align-self:flex-start;background:#262628;border-radius:18px;height:36px;width:62px;display:flex;align-items:center;justify-content:center;gap:5px;position:relative;margin-top:9px}
.typing[hidden]{display:none}
.typing i{width:8px;height:8px;border-radius:50%;background:#8e8e93;animation:dot 1.1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,60%,100%{opacity:.35}30%{opacity:1}}
.typing::before{content:"";position:absolute;left:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;background:#262628}
.typing::after{content:"";position:absolute;left:-9px;bottom:-9px;width:5px;height:5px;border-radius:50%;background:#262628}
.wait{display:none}
.th{transition:opacity 450ms var(--ease)}.th.fade{opacity:0}
.pop{animation:pop 320ms cubic-bezier(.2,.9,.3,1.2) both}
.out.pop,.photo.pop,.rcpt.pop{transform-origin:100% 100%}
.in.pop{transform-origin:0 100%}
@keyframes pop{from{opacity:0;transform:scale(.86) translateY(8px)}to{opacity:1;transform:none}}
.bar{position:absolute;left:0;right:0;bottom:34px;height:46px;display:flex;align-items:center;gap:8px;padding:0 16px}
.plus{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.field{flex:1;height:40px;border-radius:20px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 16px;font-size:17px;color:#8e8e93;letter-spacing:-.43px}
.home{position:absolute;bottom:8px;left:50%;margin-left:-72px;width:144px;height:5px;border-radius:3px;background:#fff}
.hero-phone figcaption{text-align:center;margin-top:20px;font:var(--t-footnote);color:var(--c-text-3)}

/* It's not just your face: questions light up as they cross the middle of the screen (CSS scroll timeline) */
.ask .wrap{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:start}
.ask h2{position:sticky;top:120px}
.qs{list-style:none}
.qs li{font:300 44px/1.12 var(--f-sans);letter-spacing:-.03em;color:var(--c-text);padding:20px 0;border-bottom:1px solid var(--c-line)}
.qs li:first-child{padding-top:0}
@supports (animation-timeline:view()){
  .qs li{animation:lit linear both;animation-timeline:view();animation-range:cover 30% cover 60%}
  @keyframes lit{0%{color:var(--c-text-4)}45%,55%{color:var(--c-text)}100%{color:var(--c-text-3)}}
}
.aside{grid-column:2;font:var(--t-lead);font-weight:300;color:var(--c-text-2);max-width:34ch;margin-top:8px}

/* One honest number */
.read .wrap{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:center}
.sub{font:300 20px/1.45 var(--f-sans);color:var(--c-text-2);margin-top:24px;max-width:30ch}
.read-card{border-top:1px solid var(--c-line);padding-top:32px}
.score{display:flex;align-items:baseline;gap:12px}
.num{font:300 200px/.82 var(--f-sans);letter-spacing:-.04em;color:var(--c-text);font-variant-numeric:tabular-nums}
.of{font:var(--t-data-lg);color:var(--c-text-3)}
.meta{font:var(--t-data);color:var(--c-text-3);margin-top:24px}
.parts{margin-top:40px;border-top:1px solid var(--c-line)}
.part{display:grid;grid-template-columns:120px 1fr 44px;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--c-line);font:300 20px/1 var(--f-sans);color:var(--c-text)}
.pv{font:var(--t-data-lg);color:var(--c-text);text-align:right;font-variant-numeric:tabular-nums}
.track{position:relative;height:3px;background:var(--c-line);border-radius:2px;overflow:hidden}
.track b{position:absolute;inset:0;transform-origin:0 50%;background:linear-gradient(to right,var(--c-text) 0 var(--now),var(--c-text-4) var(--now) var(--max),transparent var(--max));transition:transform 1100ms var(--ease)}
.parts.empty .track b{transform:scaleX(0)}
.part:nth-child(2) .track b{transition-delay:90ms}.part:nth-child(3) .track b{transition-delay:180ms}.part:nth-child(4) .track b{transition-delay:270ms}.part:nth-child(5) .track b{transition-delay:360ms}
.key{display:flex;align-items:center;gap:8px;margin-top:20px;font:var(--t-footnote);color:var(--c-text-3)}
.key i{width:16px;height:3px;border-radius:2px}
.k-now{background:var(--c-text)}.k-max{background:var(--c-text-4);margin-left:12px}
.key span{margin-left:auto;font:var(--t-data)}

/* Then it tells you what to fix: hairline rows, no cards, no icons */
.fix .wrap{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:start}
.rows{border-top:1px solid var(--c-line)}
.row{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:28px 0;border-bottom:1px solid var(--c-line)}
.row h3{font:400 20px/1.3 var(--f-sans);color:var(--c-text)}
.row p{font:300 18px/1.45 var(--f-sans);color:var(--c-text-2);max-width:42ch}

/* Trust: one statement, then plain questions and answers (no accordion) */
.statement{font:300 40px/1.18 var(--f-sans);letter-spacing:-.03em;color:var(--c-text);max-width:26ch}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 80px;margin-top:96px;border-top:1px solid var(--c-line)}
.faq div{padding:28px 0;border-bottom:1px solid var(--c-line)}
.faq dt{font:400 18px/1.3 var(--f-sans);color:var(--c-text)}
.faq dd{font:300 17px/1.5 var(--f-sans);color:var(--c-text-2);margin-top:8px;max-width:44ch}

/* Final call */
.final{padding:200px 0}
.final .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.final h2{font:300 120px/.94 var(--f-sans);letter-spacing:-.035em}
.final-cta{padding-bottom:12px}

/* Footer: the big wordmark */
footer{border-top:1px solid var(--c-line);padding:64px 0 48px;font:var(--t-footnote);color:var(--c-text-3)}
.wordmark{font:300 clamp(80px,17.5vw,236px)/.84 var(--f-sans);letter-spacing:-.045em;color:var(--c-text);white-space:nowrap}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:48px}
.foot p{max-width:60ch;line-height:1.5}
.foot nav{display:flex;gap:24px}
.foot a{color:var(--c-text-3);text-decoration:none}
.foot a:hover{color:var(--c-text)}

.dock{display:none}

@media (max-width:1020px){
  .wrap{padding:0 var(--margin)}
  section{padding:104px 0}
  h2{font:300 44px/1.02 var(--f-sans);letter-spacing:-.03em}
  .hero{padding:40px 0 88px}
  .hero .wrap{grid-template-columns:1fr;gap:56px;min-height:0}
  h1{font:300 60px/.98 var(--f-sans);letter-spacing:-.035em}
  .lead{font-size:19px;margin-top:24px}
  .cta{margin-top:32px}
  .hero-phone{justify-self:center}
  .device{--s:.74}
  .ask .wrap,.read .wrap,.fix .wrap{grid-template-columns:1fr;gap:48px}
  .ask h2{position:static}
  .qs li{font-size:30px;padding:16px 0}
  .aside{grid-column:1}
  .num{font-size:150px}
  .part{grid-template-columns:96px 1fr 40px;gap:14px;font-size:18px}
  .row{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .statement{font-size:30px}
  .faq{grid-template-columns:1fr;margin-top:56px}
  .final{padding:120px 0}
  .final h2{font-size:64px}
  .top .toplink{display:none}
  .btn{width:100%}
  .final-cta{width:100%}
  .dock{display:block;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:16px var(--margin) calc(16px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--c-ground) 62%,transparent);transform:translateY(110%);visibility:hidden;transition:transform var(--d-standard) var(--ease),visibility 0s linear var(--d-standard)}
  .dock.on{transform:none;visibility:visible;transition:transform var(--d-standard) var(--ease)}
  .dock .btn{height:56px}
  footer{padding-bottom:120px}
}
@media (max-width:420px){
  h1{font-size:50px}
  .device{--s:.68}
  .num{font-size:128px}
}
@media (prefers-reduced-motion:reduce){.btn,.toplink span,.dock{transition:none}.track b{transition:none}.qs li{animation:none!important}.typing i{animation:none}}

/* Start sheet: bottom sheet on iPhone, centred card on a computer. One-shot slide, no loops. */
.start{border:0;padding:0;margin:auto;background:var(--c-surface);color:var(--c-text);box-shadow:var(--seam);border-radius:var(--r-sheet);width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}
.start[open]{display:flex;flex-direction:column;padding:32px 28px 28px;animation:sheet var(--d-standard) var(--ease) both}
.start::backdrop{background:var(--c-scrim);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@keyframes sheet{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.start-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:0;background:var(--c-raised);color:var(--c-text-2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.start h2{font:var(--t-title3);letter-spacing:var(--tr-title3);padding-right:40px}
.start-sub{font:300 17px/1.4 var(--f-sans);color:var(--c-text-2);margin-top:8px}
.start-msg{margin:28px 0 24px;padding:20px 18px 14px;border-radius:var(--r-card);background:#000;display:flex;flex-direction:column;align-items:flex-end;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",var(--f-sans)}
.start-msg .first{position:relative;max-width:85%;padding:7px 12px 7.5px;border-radius:18px;background:#0a84ff;color:#fff;font-size:17px;line-height:22px;letter-spacing:-.43px;-webkit-font-smoothing:antialiased}
.start-msg .first::before{content:"";position:absolute;bottom:0;right:-7px;width:20px;height:20px;background:#0a84ff;border-bottom-left-radius:16px 14px}
.start-msg .first::after{content:"";position:absolute;bottom:0;right:-10px;width:10px;height:20px;background:#000;border-bottom-left-radius:10px}
.start-msg .to{align-self:center;margin-top:12px;font-size:12px;color:#8e8e93}
.start-qr{margin:28px 0 20px;display:flex;gap:20px;align-items:center}
.start-qr .qr{flex:none;width:168px;height:168px;border-radius:12px;overflow:hidden;background:var(--c-text)}
.start-qr .qr svg{display:block;width:100%;height:100%}
.start-qr p{font:var(--t-footnote);color:var(--c-text-2)}
.start .btn{width:100%}
.start .btn[hidden],.start-qr[hidden],.start-msg[hidden]{display:none}
.btn-quiet{background:var(--c-raised);color:var(--c-text);box-shadow:var(--seam)}
.start-alt{margin-top:16px;text-align:center;font:400 15px/1.3 var(--f-sans)}
.start-alt a{color:var(--c-text-2);text-decoration:underline;text-decoration-color:var(--c-line);text-underline-offset:3px}
.start-fine{margin-top:20px;text-align:center;font:var(--t-footnote);color:var(--c-text-3)}
.start-fine a{color:var(--c-text-3)}
@media (max-width:640px){
  .start.is-phone{margin:auto 0 0;width:100%;max-width:100%;border-radius:var(--r-sheet) var(--r-sheet) 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .start.is-phone[open]{animation-name:sheet-up}
  @keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){.start[open]{animation:none}}