/*
 * Landing page (/) styles, on top of the brand CSS in functions/src/web/html.ts (tokens, .btn,
 * .eyebrow). Markup: functions/src/web/pages/landing.ts. Motion: landing.js adds `html.anim` (not
 * under reduce-motion) and drives the reveals, the chat, the call transcript and the screen tour.
 * BRAND.md → Motion: the arc draws itself (650 ms ease-out cubic), everything else is quiet, no
 * looping attention animations.
 */
:root{--ease:cubic-bezier(.33,1,.68,1);--draw:650ms;--max:1160px;--clay-bg:#130D0B;--clay-arc:#241915;--clay-you:#B04E2C}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{overflow-x:hidden}
body:before{background:radial-gradient(60% 40% at 80% 0%,rgba(255,138,76,.16),transparent 70%),radial-gradient(50% 30% at 0% 10%,rgba(255,193,94,.07),transparent 70%)}

/* ── Drawn marks: path has pathLength=1, so dash 1 = the whole stroke ── */
.nav-mark,.step-mark,.ring-mark-svg,.chat-mark,.quote-mark,.final-mark{display:block;overflow:visible}
.nav-mark path,.final-mark path,.quote-mark path,.step-mark path{stroke-dasharray:1 1}
.nav-mark path{animation:draw var(--draw) var(--ease) .15s both}
html.anim .step-mark path,html.anim .quote-mark path,html.anim .final-mark path{stroke-dashoffset:1}
html.anim .in .step-mark path,html.anim .in.quote-band .quote-mark path,html.anim .final.in .final-mark path{animation:draw var(--draw) var(--ease) .1s both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ── Nav ── */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:14px max(20px,calc((100% - var(--max))/2 + 20px));backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);background:linear-gradient(rgba(11,10,9,.86),rgba(11,10,9,.6))}
.nav:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--border)}
.brand{display:flex;align-items:center;gap:8px;color:var(--text);text-decoration:none}
.nav-mark{width:28px;height:28px}
.nav-links{display:flex;gap:22px;margin-left:auto}
.nav-links a{color:var(--text2);text-decoration:none;font-size:15px;font-weight:500;transition:color .15s}
.nav-links a:hover{color:var(--text)}
.nav-cta{padding:9px 16px;border-radius:999px;background:var(--text);color:var(--bg);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;transition:transform .15s var(--ease)}
.nav-cta:active,.btn:active{transform:scale(.97)}

/* ── Type ── */
.l-display{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;font-size:clamp(44px,7.4vw,86px);line-height:.98;letter-spacing:-.035em;margin:0 0 22px}
.l-h2{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;font-size:clamp(32px,4.6vw,54px);line-height:1.04;letter-spacing:-.03em;margin:0 0 18px}
.l-lead{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--text2);margin:0 0 26px;max-width:34em}
.l-lead.center{margin-left:auto;margin-right:auto}
.grad{background:linear-gradient(100deg,var(--g1),var(--g2) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;font-size:21px;line-height:1.2;letter-spacing:-.01em;margin:0 0 8px}

/* ── Buttons: auto width here (brand .btn is full width on the narrow pages) ── */
.l-ctas,.final-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.l-ctas .btn,.final-ctas .btn{width:auto;padding:14px 26px;border-radius:999px;transition:transform .15s var(--ease),background .15s}
.btn.ghost:hover{background:#252220}
.final-ctas{flex-direction:column;align-items:center}
.final-ctas .stack{display:flex;flex-direction:column;align-items:center}
.final-ctas .stack>*+*{margin-top:10px}

/* ── Phone frame: a status bar, then the screenshot (780 × 1690) ── */
.phone{--pw:300px;position:relative;width:var(--pw);max-width:100%;padding:calc(var(--pw)*.03);border-radius:calc(var(--pw)*.16);background:linear-gradient(160deg,#2c2825,#151312 40%,#1f1c1a);box-shadow:0 0 0 1px rgba(255,245,235,.12),inset 0 0 0 1px rgba(255,255,255,.05),0 50px 90px -30px rgba(0,0,0,.9),0 30px 60px -40px rgba(255,138,76,.35)}
.screen{container-type:inline-size;position:relative;overflow:hidden;border-radius:calc(var(--pw)*.13);background:var(--bg)}
.screen img{display:block;width:100%;height:auto}
.status{position:relative;display:flex;align-items:center;justify-content:space-between;height:12cqw;padding:0 9cqw 0 10cqw;font:600 4.1cqw/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;color:var(--text)}
.island{position:absolute;left:50%;top:2.6cqw;width:29cqw;height:8cqw;border-radius:99px;background:#000;transform:translateX(-50%)}
.bars{display:flex;align-items:flex-end;gap:.7cqw;height:3.2cqw}
.bars b{width:.9cqw;border-radius:.4cqw;background:var(--text)}
.bars b:nth-child(1){height:35%}.bars b:nth-child(2){height:55%}.bars b:nth-child(3){height:78%}.bars b:nth-child(4){height:100%}

/* ── Hero ── */
.l-hero{position:relative;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;max-width:var(--max);margin:0 auto;padding:72px 20px 40px}
.l-hero-copy>*{animation:rise .8s var(--ease) both}
.l-hero-copy>*:nth-child(2){animation-delay:.08s}.l-hero-copy>*:nth-child(3){animation-delay:.16s}.l-hero-copy>*:nth-child(4){animation-delay:.24s}.l-hero-copy>*:nth-child(5){animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.season{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;padding:7px 14px 7px 12px;border-radius:999px;border:1px solid rgba(255,138,76,.35);background:var(--accentMuted);color:var(--accentText);font-size:14px;font-weight:600;text-decoration:none}
.season .faint{color:var(--text2);font-weight:500}
.season .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(255,138,76,.18)}
.l-hero-art{position:relative;display:flex;justify-content:center;padding:20px 0 30px}
.hero-phone{--pw:min(330px,72vw);animation:phoneIn 1s var(--ease) .1s both}
@keyframes phoneIn{from{opacity:0;transform:translateY(60px) rotate(2deg)}to{opacity:1;transform:none}}
.glow{position:absolute;inset:8% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,138,76,.32),rgba(255,106,61,.08) 60%,transparent);filter:blur(30px)}

.float{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:22px;background:rgba(28,26,24,.84);border:1px solid var(--border2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 50px -18px rgba(0,0,0,.85);font-size:14px;line-height:1.3}
.float b{display:block;font-size:15px}
.float span>span{color:var(--text2)}
.ring{top:13%;right:-4%;width:min(320px,84vw);animation:dropIn .7s var(--ease) 1.1s both}
@keyframes dropIn{from{opacity:0;transform:translateY(-26px) scale(.96)}to{opacity:1;transform:none}}
.ring-mark{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#0B0A09;box-shadow:0 0 18px rgba(255,138,76,.35)}
.ring-mark-svg{width:24px;height:24px}
.ring-text{flex:1;min-width:0}
.ring-btn{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%}
.ring-btn svg{width:20px;height:20px;fill:#fff}
.ring-btn.no{background:var(--danger)}
.ring-btn.yes{background:var(--success)}
.ring-btn.yes svg{fill:#0B0A09;transform:rotate(-135deg)}
.ring-btn.yes{animation:answer 1.4s ease-out 1.9s 3}
@keyframes answer{0%{box-shadow:0 0 0 0 rgba(94,201,139,.55)}100%{box-shadow:0 0 0 14px rgba(94,201,139,0)}}
.added{bottom:16%;left:-4%;animation:slideIn .7s var(--ease) 2.3s both}
@keyframes slideIn{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.tick{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(94,201,139,.16)}
.tick svg{width:18px;height:18px;fill:none;stroke:var(--success);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;animation:tick .5s var(--ease) 2.8s both}
@keyframes tick{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}

/* ── Sections ── */
.l-section{position:relative;max-width:var(--max);margin:0 auto;padding:110px 20px}
.l-section .eyebrow{color:var(--accentText)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:48px 0 0;padding:0}
.step{position:relative;padding:30px 26px 28px;border-radius:28px;background:linear-gradient(180deg,var(--surface),rgba(20,18,17,.4));border:1px solid var(--border)}
.step p{color:var(--text2);margin:0}
.step-mark{width:46px;height:46px;margin-bottom:22px}
.step-n{position:absolute;top:26px;right:26px;font:700 15px/1 "Bricolage Grotesque",system-ui,sans-serif;color:var(--text3)}

/* reveal on scroll (landing.js adds .in) */
html.anim .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
html.anim .reveal.in{opacity:1;transform:none}

/* ── Split feature rows ── */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:72px}
.split-art{position:relative;display:flex;justify-content:center}
.split-art .phone{--pw:min(310px,76vw)}
.checks{list-style:none;margin:0;padding:0}
.checks li{position:relative;padding:9px 0 9px 32px;font-size:17px}
.checks li:before{content:"";position:absolute;left:0;top:11px;width:20px;height:20px;border-radius:50%;background:var(--accentMuted)}
.checks li:after{content:"";position:absolute;left:7px;top:15px;width:5px;height:9px;border:solid var(--accentText);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* call: pulses behind the phone, three rounds when the section comes in */
.pulse{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.pulse i{position:absolute;width:330px;height:330px;border-radius:50%;border:1.5px solid rgba(255,138,76,.4);opacity:0}
html.anim .call-art.in .pulse i{animation:pulse 2.6s ease-out 3}
.call-art.in .pulse i:nth-child(2){animation-delay:.85s}.call-art.in .pulse i:nth-child(3){animation-delay:1.7s}
@keyframes pulse{0%{opacity:.8;transform:scale(.7)}100%{opacity:0;transform:scale(1.7)}}

.transcript{display:flex;flex-direction:column;gap:12px;margin:6px 0 20px;padding:22px;border-radius:24px;background:var(--surface);border:1px solid var(--border)}
.line{margin:0;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.line .who{display:block;margin-bottom:2px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.line.arc{font:600 19px/1.35 "Bricolage Grotesque",system-ui,sans-serif;color:var(--text)}
.line.you{align-self:flex-end;text-align:right;color:var(--text2)}
.line.chip{display:flex;align-items:center;gap:10px;align-self:flex-start;padding:8px 14px 8px 8px;border-radius:999px;background:rgba(94,201,139,.1);color:var(--success);font-weight:600;font-size:14px}
.line.chip .tick{width:24px;height:24px}
.line.chip .tick svg{width:15px;height:15px;animation:none;stroke-dasharray:none}
.line.wait,.bubble.wait{opacity:0;transform:translateY(10px)}

/* chat: the app's Clay theme, sized to the phone with container units */
.chat-ui{display:flex;flex-direction:column;aspect-ratio:780/1690;background:var(--clay-bg);font-size:3.75cqw;line-height:1.35}
.chat-head{display:flex;align-items:center;gap:2.6cqw;padding:3cqw 4.5cqw 3.5cqw;border-bottom:1px solid rgba(255,245,235,.06)}
.chat-head .back{width:5.5cqw;height:5.5cqw;fill:none;stroke:var(--text);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chat-head .avatar{display:grid;place-items:center;width:8.5cqw;height:8.5cqw;border-radius:50%;background:#3A2219}
.chat-mark{width:5cqw;height:5cqw}
.chat-mark path{stroke:#E8875F}
.chat-head b{font-size:4.2cqw}
.chat-log{flex:1;display:flex;flex-direction:column;gap:1.8cqw;padding:5cqw 4.5cqw;overflow:hidden}
.bubble{max-width:78%;margin:0;padding:2.4cqw 3.6cqw;border-radius:5cqw;background:var(--clay-arc);color:#F2E9E4;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.bubble.you{align-self:flex-end;background:var(--clay-you);color:#fff;margin-top:1.6cqw;margin-bottom:1.6cqw}
.typing{display:none;align-self:flex-start;gap:1.2cqw;margin:0;padding:3.4cqw 4cqw;border-radius:5cqw;background:var(--clay-arc)}
.typing.on{display:flex}
.typing i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:#B9A79E;animation:dot 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-.8cqw)}}
.chat-compose{padding:3cqw 4.5cqw 7cqw}
.chat-compose span{display:block;padding:3cqw 4cqw;border-radius:4cqw;background:#211814;color:#7E6E66}

/* ── Screen tour: a sticky phone whose screen follows the step in view (desktop) ── */
.tour{display:grid;grid-template-columns:1fr 1fr;gap:72px;padding-top:40px;padding-bottom:40px}
.tour-sticky{position:sticky;top:calc(50vh - 340px);align-self:start;display:flex;justify-content:center}
.tour-phone{--pw:310px}
.tour-stack{position:relative;aspect-ratio:780/1690}
.tour-shot{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(1.03);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.tour-shot.on{opacity:1;transform:none}
.tour-steps{display:flex;flex-direction:column}
.tour-step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;transition:opacity .4s var(--ease)}
.tour-step h3{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.025em;line-height:1.08;margin-bottom:14px}
.tour-step .muted{font-size:18px;line-height:1.55;max-width:28em;margin:0}
html.anim .tour-step:not(.active){opacity:.28}
.tour-phone-sm{display:none}

/* ── Tiles ── */
.tiles{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:44px 0 0;padding:0}
.tile{padding:26px;border-radius:24px;background:var(--surface);border:1px solid var(--border);transition:border-color .2s,transform .2s var(--ease)}
.tile:hover{border-color:var(--border2);transform:translateY(-2px)}
.tile p{margin:0;color:var(--text2)}
.ico{width:28px;height:28px;margin-bottom:16px;fill:none;stroke:var(--accentText);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── Quote + final ── */
.quote-band{text-align:center;padding-top:80px;padding-bottom:80px}
.quote-mark{width:64px;height:64px;margin:0 auto 26px}
.big-quote{font:700 clamp(30px,4.4vw,56px)/1.1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.03em;max-width:17em;margin:0 auto 18px}
.final{text-align:center;padding-bottom:70px}
.final:before{content:"";position:absolute;left:50%;top:30px;width:min(700px,90vw);height:420px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,138,76,.16),transparent);pointer-events:none}
.final-mark{width:84px;height:84px;margin:0 auto 26px}
.wide-foot{max-width:var(--max);padding-top:0}

/* ── Smaller screens ── */
@media (max-width:960px){
  .l-hero,.split,.tour{grid-template-columns:1fr;gap:28px}
  .l-hero{padding-top:44px;text-align:left}
  .l-hero-art{padding-top:0}
  .ring{right:0}
  .added{left:0}
  .steps,.tiles{grid-template-columns:1fr}
  .tiles:not(.three){grid-template-columns:1fr 1fr}
  .split .call-art{order:2}
  .split{gap:36px}
  .tour-sticky{display:none}
  .tour-step{min-height:0;padding:34px 0;align-items:flex-start}
  .tour-phone-sm{display:flex;justify-content:center;width:100%;margin-bottom:28px}
  .tour-phone-sm .phone{--pw:min(280px,72vw)}
  html.anim .tour-step:not(.active){opacity:1}
  .l-section{padding:72px 16px}
}
@media (max-width:640px){
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .tiles:not(.three){grid-template-columns:1fr}
  .ring{top:6%;right:-2%;width:min(290px,88vw)}
  .added{bottom:9%;left:-2%}
  .l-ctas .btn{flex:1 1 100%}
}

/* ── Reduce motion: everything already in place, no movement ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .step-mark path,.quote-mark path,.final-mark path,.nav-mark path{stroke-dashoffset:0!important}
}