:root{--bg:#fbfbfd;--gray:#f5f5f7;--ink:#1d1d1f;--muted:#666b68;--line:#d7d9d7;--green:#2c5a4b;--mint:#cfe3d7;--deep:#1f3b30;--card:#1e211e;--font:Manrope,ui-sans-serif,system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:60px}body{margin:0;background:#fff;color:var(--ink);font:400 16px/1.45 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}h1,h2,h3,h4,p{margin:0}button,input{font:inherit}h1,h2,h3{letter-spacing:-.04em;text-wrap:balance}
.nav{position:sticky;top:0;z-index:20;background:rgba(251,251,253,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.06)}.nav-in{max-width:1180px;height:56px;padding:0 24px;margin:auto;display:flex;align-items:center;justify-content:space-between}.nav nav{display:flex;align-items:center;gap:30px;font-size:13px;font-weight:600;color:#686d6a}.nav nav a:hover{color:var(--ink)}.logo{display:inline-flex;align-items:baseline;font-weight:800;font-size:25px;letter-spacing:-.05em}.logo i{width:6px;height:6px;border-radius:50%;background:var(--green);margin-left:2px}.pill{padding:8px 16px;border-radius:30px;background:var(--ink);color:#fff!important}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 19px;border:0;border-radius:10px;background:var(--green);color:#fff;font-weight:700;font-size:14px;cursor:pointer}.btn:hover,.pill:hover{filter:brightness(.9)}.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero{background:var(--bg);padding:0 24px;overflow:hidden}.hero-layout{max-width:1180px;margin:auto;min-height:600px;display:grid;grid-template-columns:1.35fr .65fr;align-items:center;gap:50px}.hero-copy{padding:50px 0}.hero h1{max-width:690px;font-size:clamp(47px,5.3vw,76px);font-weight:800;line-height:1.02}.hero .sub{max-width:520px;margin-top:20px;color:var(--muted);font-size:clamp(16px,1.4vw,20px);line-height:1.4}.hero .links{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}.hero .soon{font-size:13px;color:var(--muted)}.hero-visual{height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero-phone{width:min(100%,275px);height:auto;border-radius:32px;box-shadow:0 12px 35px rgba(0,0,0,.14)}
.cards{background:var(--mint);padding:60px 24px}.card-row{max-width:1386px;margin:auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:16px}.card{position:relative;min-width:0;height:470px;padding:24px;border-radius:28px;overflow:hidden;color:#fff;background:var(--green)}.card>*:not(.sage-canvas){position:relative;z-index:1}.card h2{font-size:clamp(29px,2.5vw,40px);font-weight:800;line-height:1.03;max-width:12em}.card p{margin-top:16px;font-size:clamp(14px,1.2vw,18px);line-height:1.35;max-width:20em}.card-find h2{font-size:clamp(36px,3.1vw,50px);max-width:10em}.card-find p{max-width:235px;margin-top:42px}.card-bar{position:absolute!important;z-index:2;left:24px;bottom:60px;display:flex;align-items:center;gap:8px;width:min(47%,260px);min-height:28px;padding:0 12px;border-radius:7px;background:#fff;color:#69716c;font-size:9px;white-space:nowrap;overflow:hidden}.card-bar svg{width:13px;height:13px;flex:none;fill:none;stroke:#44534c;stroke-width:2}.card-phone{position:absolute!important;z-index:1;right:0;bottom:-7%;width:44%;height:80%;object-fit:cover;object-position:top;border-radius:18px 0 0 0}.card-shader{background:#183b2e}.sage-canvas{position:absolute;z-index:0;inset:0;width:100%;height:100%;pointer-events:none}.organize-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.mini-tile{height:120px;padding:14px 10px;border-radius:20px;background:#e5e9e6;color:#14231c;display:flex;flex-direction:column;justify-content:center;text-align:center;gap:5px}.mini-tile strong{font-size:12px;line-height:1.1}.mini-tile small{font-size:10px;color:#657069}.box-name{font-family:"Bricolage Grotesque",Manrope,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.01em}.mini-symbol{font-size:28px;color:var(--green);line-height:1}.result-tile{margin-top:22px;padding:10px;border-radius:18px;background:#e6e9e6;color:#14231c;display:flex;align-items:center;gap:10px;min-height:125px}.result-tile img{width:78px;height:88px;border-radius:10px;object-fit:cover}.result-tile span{display:grid;gap:7px;min-width:0}.result-tile strong{font-size:12px}.result-tile small{font-size:10px;color:#69716c}.result-tile b{justify-self:start;background:var(--green);color:#fff;font-size:10px;padding:8px 10px;border-radius:10px}.result-details{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.result-details span{min-height:70px;padding:12px 8px;border-radius:14px;background:#e6e9e6;color:var(--green);font-size:15px}.result-details b{color:#14231c;font-size:10px}.result-details small{display:block;margin-left:20px;color:#69716c;font-size:9px}
.searchact{background:#faf9f6;padding:26px 24px;overflow:hidden}.sa-stage{position:relative;max-width:1020px;min-height:280px;margin:auto;display:grid;place-items:center}.sa-bar{position:absolute;z-index:2;display:flex;align-items:center;gap:16px;width:min(760px,86vw);height:78px;padding:0 28px;border-radius:24px;background:#fff;box-shadow:0 8px 28px rgba(0,0,0,.025);transition:transform .7s ease,opacity .4s ease}.sa-stage.grown .sa-bar{transform:scale(1.06)}.sa-stage.answer .sa-bar{opacity:0;pointer-events:none;transform:scale(1.1)}.sa-icon{width:26px;height:26px;flex:none;fill:none;stroke:#222;stroke-width:1.8;stroke-linecap:round}.sa-field{position:relative;display:flex;align-items:center;min-width:0;font-size:18px;white-space:nowrap}.sa-hint{position:absolute;left:0;top:50%;transform:translateY(-50%);color:#858985;overflow:hidden;text-overflow:ellipsis;max-width:70vw}.sa-caret{width:2px;height:1em;margin-left:2px;background:var(--green);opacity:0}.sa-stage.typing .sa-hint{opacity:0}.sa-stage.typing .sa-caret{opacity:1;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}.sa-payoff{display:grid;grid-template-columns:1fr 230px;align-items:center;gap:50px;width:100%;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .5s,transform .5s;pointer-events:none}.sa-stage.answer .sa-payoff{opacity:1;visibility:visible;transform:none}.sa-head{font-size:clamp(30px,3vw,44px);font-weight:800;line-height:1.08;color:var(--green)}.sa-copy p{max-width:430px;margin-top:12px;color:var(--muted);font-size:16px}.sa-phone{width:180px;max-height:275px;overflow:hidden;justify-self:center;opacity:0;transform:translateY(90px) rotate(-12deg);transition:transform .8s cubic-bezier(.18,1.25,.35,1),opacity .4s}.sa-stage.answer .sa-phone{opacity:1;transform:none}.sa-device{position:relative;width:180px;aspect-ratio:9/19.3;padding:7px 8px 0;border-radius:28px;background:#101312;color:#fff;box-shadow:0 16px 30px rgba(0,0,0,.24);overflow:hidden}.sa-island{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:50px;height:14px;border-radius:10px;background:#000}.sa-status{height:27px;display:flex;align-items:center;justify-content:space-between;padding:0 7px;font-size:8px}.sa-bars i{display:inline-block;width:3px;height:6px;margin-left:2px;background:#fff}.sa-screen{padding:0 4px}.sa-mini{height:30px;display:flex;align-items:center;gap:6px;padding:0 10px;border-radius:15px;background:#242c28;font-size:10px}.sa-mini svg{width:12px;height:12px;fill:none;stroke:#ddd;stroke-width:2}.sa-group{display:flex;justify-content:space-between;margin:11px 1px 7px;font-size:9px;font-weight:700}.sa-group span{font-weight:400;color:#aaa}.sa-row{display:flex;align-items:center;gap:7px;padding:6px;border-radius:9px;background:#222a25;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}.sa-stage.answer .sa-row{opacity:1;transform:none}.sa-thumb{width:35px;height:35px;object-fit:contain}.sa-lines{display:grid;gap:1px}.sa-lines b{font-size:11px}.sa-lines small,.sa-lines em{font-size:8px;color:#aeb7af}.sa-lines em{font-style:normal}.sa-location{margin-top:12px;color:#9dd2b7;font-size:8px}.sa-home{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:62px;height:3px;border-radius:4px;background:#d7d7d7}
.ways{background:var(--mint);padding:72px 24px 78px}.ways-head{text-align:center;color:var(--green);font-size:clamp(32px,3.3vw,48px);font-weight:800;margin-bottom:40px}.ways-grid{max-width:1140px;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.way{min-width:0;height:430px;display:flex;flex-direction:column;overflow:hidden;border-radius:24px;background:#1d211f;color:#fff}.way .copy{padding:24px 22px 0}.way h3{font-size:23px;line-height:1.13;font-weight:800}.way p{margin-top:10px;color:#babfba;font-size:14px;line-height:1.4}.way .gap{flex:1;min-height:18px}.way .shot{width:65%;height:225px;margin:auto auto 0;border-radius:18px 18px 0 0;overflow:hidden}.way .shot img{width:100%;height:auto}
.how{padding:75px 24px 82px;text-align:center;background:#fff}.how h2,.faq h2{font-size:clamp(32px,3.2vw,46px);font-weight:800}.steps{list-style:none;max-width:1050px;padding:0;margin:34px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:50px;text-align:left}.steps li{min-width:0}.step-art{width:205px;height:155px;object-fit:contain;object-position:center bottom;margin:0 0 10px}.steps span{display:block;color:#c4c9c6;font-size:42px;font-weight:800;line-height:1}.steps h3{margin:3px 0 6px;font-size:22px;font-weight:800}.steps p{max-width:260px;color:var(--muted);font-size:15px;line-height:1.4}
.faq{padding:72px 24px 75px;text-align:center;background:var(--gray)}.faq-list{max-width:840px;margin:35px auto 0;text-align:left}.faq-list div{padding:13px 0;border-bottom:1px solid #d8dad8}.faq-list h3{font-size:16px;font-weight:700;letter-spacing:-.02em}.faq-list p{margin-top:5px;color:var(--muted);font-size:13px;line-height:1.4}
.closer{padding:70px 24px 78px;text-align:center;display:grid;justify-items:center;gap:11px}.closer-mascot{width:105px;height:auto}.closer h2{font-size:clamp(36px,4.1vw,58px);line-height:1.05;font-weight:800}.closer .sub{max-width:440px;color:var(--muted);font-size:16px}.join{width:100%;max-width:520px;margin-top:10px;text-align:left;display:grid;gap:13px}.join-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}.field{display:grid;gap:5px;min-width:0;border:0;padding:0}.field>span,.field legend{font-size:12px;font-weight:700}.field i{font-style:normal;font-weight:400;color:var(--muted)}.field input{width:100%;height:39px;padding:9px 12px;border:1px solid transparent;border-radius:10px;outline:0;background:var(--gray);font-size:14px}.field input:focus{border-color:var(--green);background:#fff}.chips{display:flex;flex-wrap:wrap;gap:6px}.chips label{position:relative}.chips input{position:absolute;opacity:0;inset:0}.chips span{display:inline-block;padding:6px 11px;border:1px solid var(--line);border-radius:20px;color:var(--muted);font-size:12px;cursor:pointer}.chips input:checked+span{background:var(--green);color:#fff;border-color:var(--green)}.chips input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}.join .btn{justify-self:center;background:var(--ink);border-radius:30px;margin-top:3px}.join-note,.join-error{text-align:center;color:var(--muted);font-size:11px}.join-note a{text-decoration:underline}.join-error{color:#a32218}.hp{position:absolute;left:-9999px}.join-done{max-width:520px;padding:22px;background:#e7f2ec;border-radius:18px;display:grid;grid-template-columns:65px 1fr;align-items:center;gap:4px 14px;text-align:left}.join-done img{width:65px;grid-row:span 2}.join-done h3{font-size:23px}.join-done p{font-size:14px}.join[hidden],.join-done[hidden],.join-error[hidden]{display:none}
.foot{background:var(--gray);border-top:1px solid var(--line)}.foot-in{max-width:1050px;margin:auto;padding:34px 24px}.foot-cols{display:flex;flex-wrap:wrap;gap:30px 95px;padding-bottom:25px;border-bottom:1px solid var(--line)}.foot-cols div{display:grid;align-content:start;gap:7px}.foot h4{font-size:12px}.foot-cols a,.foot-fine{color:var(--muted);font-size:12px}.foot-cols a:hover{text-decoration:underline}.foot-fine{margin-top:18px}
.doc{max-width:720px;margin:auto;padding:55px 24px 90px}.doc h1{font-size:clamp(37px,5vw,58px)}.doc .updated{margin:8px 0 30px;color:var(--muted);font-size:13px}.doc h2{margin:32px 0 9px;font-size:23px}.doc p,.doc li{color:var(--muted);font-size:16px;line-height:1.55}.doc p b{color:var(--ink)}.doc ul{padding-left:22px}.doc a{color:var(--green);text-decoration:underline}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}.js .reveal.in{opacity:1;transform:none}
@media(max-width:1000px){.card-row{grid-template-columns:1.3fr 1fr;gap:12px}.card-find{grid-row:span 2;height:auto;min-height:450px}.card-shader{height:300px}.card-shader h2{font-size:26px}.card-shader p{font-size:12px;margin-top:8px}.organize-grid{margin-top:10px}.mini-tile{height:65px}.mini-tile strong,.mini-tile small{font-size:8px}.box-name{font-size:11px}.mini-symbol{font-size:17px}.result-tile{margin-top:10px;min-height:78px}.result-tile img{width:55px;height:58px}.result-details span{min-height:50px;padding:6px}.hero-layout{min-height:520px}.hero-visual{height:520px}.ways-grid{gap:12px}.way h3{font-size:19px}}
@media(max-width:700px){.nav-in{height:52px;padding:0 18px}.nav nav{gap:13px}.nav nav a:not(.pill){display:none}.hero{padding:0 20px}.hero-layout{min-height:0;grid-template-columns:1fr;gap:0;text-align:center}.hero-copy{padding:48px 0 10px}.hero h1{max-width:540px;margin:auto;font-size:clamp(43px,10vw,62px)}.hero .sub{margin:15px auto 0;font-size:16px}.hero .links{justify-content:center;margin-top:22px}.hero-visual{height:350px;align-items:flex-start}.hero-phone{width:185px}.cards{padding:30px 16px}.card-row{display:grid;grid-template-columns:1fr;gap:12px;max-width:430px}.card,.card-find,.card-shader{height:400px;min-height:0;grid-row:auto;padding:23px}.card h2,.card-find h2{font-size:34px}.card p,.card-shader p{font-size:15px;margin-top:12px}.card-find p{max-width:200px;margin-top:25px}.card-bar{bottom:25px}.card-phone{height:73%;width:43%}.organize-grid{margin-top:18px}.mini-tile{height:105px}.mini-tile strong{font-size:11px}.mini-tile small{font-size:9px}.box-name{font-size:17px}.mini-symbol{font-size:22px}.result-tile{margin-top:20px;min-height:120px}.result-tile img{width:72px;height:85px}.result-details span{min-height:66px}.searchact{padding:18px 16px}.sa-stage{min-height:300px}.sa-bar{width:calc(100vw - 48px);height:64px;padding:0 20px;border-radius:19px}.sa-icon{width:22px;height:22px}.sa-field{font-size:14px}.sa-payoff{grid-template-columns:1fr 125px;gap:14px}.sa-head{font-size:25px}.sa-copy p{font-size:12px}.sa-phone{width:120px;max-height:205px}.sa-device{width:120px}.sa-lines b{font-size:8px}.sa-lines small,.sa-lines em,.sa-group{font-size:6px}.sa-thumb{width:24px;height:24px}.ways{padding:58px 16px 62px}.ways-head{font-size:33px;margin-bottom:30px}.ways-grid{grid-template-columns:1fr;max-width:430px;gap:13px}.way{height:400px}.way h3{font-size:24px}.way .shot{height:220px}.how{padding:60px 20px}.steps{grid-template-columns:1fr;max-width:420px;gap:27px;margin-top:25px}.steps li{display:grid;grid-template-columns:105px 1fr;column-gap:16px;align-items:start}.step-art{grid-row:span 3;width:105px;height:105px;margin:0}.steps span{font-size:29px}.steps h3{font-size:20px}.steps p{font-size:13px}.faq{padding:56px 20px}.faq-list{margin-top:25px}.closer{padding:60px 20px}.foot-cols{gap:24px 45px}}
@media(max-width:390px){.hero h1{font-size:42px}.hero .links{flex-direction:column;gap:8px}.card,.card-find,.card-shader{height:380px}.card h2,.card-find h2{font-size:31px}.card-phone{width:42%}.result-tile strong{font-size:11px}.result-tile small{font-size:9px}.result-details b{font-size:8px}.sa-payoff{grid-template-columns:1fr 105px}.sa-head{font-size:22px}.sa-phone,.sa-device{width:105px}.join-row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}.sa-bar,.sa-payoff,.sa-phone,.sa-row{transition:none}.sa-caret{animation:none}}
@media(max-width:700px){.hero-visual{height:395px;overflow:visible}.hero-phone{width:165px}.card-find p{max-width:47%;font-size:13px;line-height:1.38}}
.sa-stage{min-height:355px}.sa-phone{width:160px;max-height:none;overflow:visible}.sa-device{width:160px}
@media(max-width:700px){.sa-stage{min-height:300px}.sa-phone,.sa-device{width:120px}}
@media(max-width:390px){.sa-phone,.sa-device{width:105px}}
/* Give the portrait walkthrough clear space within the hero. */
.hero{background:#fff}
.hero-layout{min-height:0}
.hero-visual{height:auto;min-height:0;overflow:visible;flex-direction:column;padding:46px 0 42px}
.hero-walkthrough{display:block;width:min(100%,270px);height:auto;aspect-ratio:1652/2940;object-fit:contain;border-radius:0;box-shadow:none;background:#fff}
.hero-video-toggle{margin-top:8px;padding:6px 10px;border:0;background:transparent;color:var(--muted);font:600 12px/1.2 var(--font);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.hero-video-toggle:hover{color:var(--green)}
.hero-video-toggle:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:5px}
@media(max-width:700px){.hero-visual{height:auto;min-height:0;padding:26px 0 42px}.hero-walkthrough{width:min(56vw,190px)}}

/* Use the same Tuck green for each large page heading. */
.hero h1,.sa-head,.ways-head,.how h2,.faq h2,.closer h2{color:var(--green)}

/* The packing screenshot has white pixels outside its rounded phone corner. */
.way:last-child .shot img{border-radius:36px 36px 0 0}

/* Match the tighter hero pairing and Figma's charcoal search-card fallback. */
.hero-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.card-find{background:#252e28}
@media(max-width:700px){.hero-layout{grid-template-columns:1fr}}

/* ---- Hero: let the headline breathe, and lose the underline ------------- */
.hero-layout{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:40px}
.hero h1{max-width:13ch}
.hero .sub{max-width:46ch}
.hero-video-toggle{text-decoration:none}
.hero-video-toggle:hover{text-decoration:none;color:var(--green)}
@media(max-width:700px){
  .hero-layout{grid-template-columns:1fr}
  .hero h1{max-width:none}
  .hero .sub{max-width:34ch}
  /* Column flex: align-items is the horizontal axis, so this centres it. */
  .hero-visual{align-items:center;justify-content:center}
  .hero-walkthrough{margin-inline:auto}
}

/* ---- Search: zoom the top of the screen, not the whole phone ------------ */
/* The device is built full height, then cropped so only the part that
   answers the question — the search field and its results — is in frame.  */
.sa-phone{width:248px;height:300px;max-height:none;overflow:hidden;border-radius:30px;justify-self:center;
  box-shadow:0 18px 36px rgba(0,0,0,.26)}
.sa-device{width:248px;border-radius:30px;box-shadow:none}
.sa-payoff{grid-template-columns:1fr 248px}
.sa-stage{min-height:392px}
.sa-mini{height:36px;font-size:12px;border-radius:18px}
.sa-mini svg{width:14px;height:14px}
.sa-group{font-size:11px;margin:13px 2px 8px}
.sa-row{gap:9px;padding:8px;border-radius:12px}
.sa-thumb{width:44px;height:44px;object-fit:cover;border-radius:10px}
.sa-lines b{font-size:13px}
.sa-lines small,.sa-lines em{font-size:10px}
.sa-home{display:none}

@media(max-width:700px){
  /* Copy on top and centred; the screen below, half in frame, half buried. */
  .sa-stage{min-height:420px}
  .sa-payoff{grid-template-columns:1fr;gap:0;justify-items:center;text-align:center;align-items:start}
  .sa-head{font-size:clamp(26px,7.4vw,34px)}
  .sa-copy p{margin-inline:auto;font-size:14px}
  .sa-phone{width:min(74vw,268px);height:190px;margin-top:22px;border-radius:26px 26px 0 0;box-shadow:0 -2px 30px rgba(0,0,0,.18)}
  .sa-device{width:min(74vw,268px);border-radius:26px 26px 0 0}
}
@media(max-width:390px){
  .sa-phone,.sa-device{width:84vw}
  .sa-phone{height:175px}
}

/* Wider headline column — the copy was crammed into half the hero. */
.hero-layout{grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);gap:32px}
.hero h1{max-width:20ch;font-size:clamp(48px,5.2vw,76px)}
.hero .sub{max-width:50ch}
@media(max-width:1000px){.hero-layout{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}}
@media(max-width:700px){.hero-layout{grid-template-columns:1fr}.hero h1{max-width:none;font-size:clamp(28px,8.2vw,38px)}.hero .sub{max-width:34ch}}

/* No underline anywhere on the walkthrough control. */
.hero-video-toggle,.hero-video-toggle:hover,.hero-video-toggle:focus{text-decoration:none!important}

/* ---- Search payoff: the phone runs off the bottom of the band ----------
   Figma frame 389:5242 crops the screen at the section edge rather than
   floating a short card with dead space under the results.                */
.searchact{padding:clamp(48px,6vw,86px) 24px 0;overflow:hidden}
.sa-stage{min-height:clamp(420px,42vw,536px);align-items:end}
.sa-payoff{grid-template-columns:minmax(0,1fr) 320px;align-items:end;gap:clamp(24px,4vw,64px)}
.sa-copy{padding-bottom:clamp(40px,6vw,96px)}
.sa-head{font-size:clamp(32px,4vw,56px);line-height:1.04}
.sa-copy p{max-width:38ch}

/* Full-height device, clipped by the band so it reads as cropped, not short. */
.sa-phone{width:320px;height:clamp(330px,34vw,430px);max-height:none;overflow:hidden;
  border-radius:34px 34px 0 0;align-self:end;box-shadow:0 -6px 40px rgba(0,0,0,.22)}
.sa-device{width:320px;aspect-ratio:9/19.3;border-radius:34px 34px 0 0;box-shadow:none;padding:9px 10px 0}
.sa-island{width:66px;height:18px}
.sa-status{height:30px;font-size:10px;padding:0 10px}
.sa-mini{height:38px;border-radius:19px;font-size:13px;gap:8px;padding:0 13px}
.sa-mini svg{width:15px;height:15px}
.sa-cancel{margin-left:auto;font-weight:500;font-size:12px;color:#8fd0ae}
.sa-group{font-size:11px;margin:13px 3px 9px;color:#b9c1bc;font-weight:600}
.sa-row{gap:10px;padding:9px;border-radius:14px;margin-bottom:8px}
.sa-thumb{width:48px;height:52px;border-radius:10px;object-fit:cover;flex:none}
.sa-tagthumb{display:grid;place-items:center;background:#20302a}
.sa-tagthumb svg{width:20px;height:20px;fill:none;stroke:#86bfa7;stroke-width:1.7}
.sa-lines{gap:2px}
.sa-lines b{font-size:14px}
.sa-lines small{font-size:10px;color:#b9c1bc}
.sa-lines em{font-size:9.5px;color:#868f8a}
.sa-lines mark{background:#2f5f4c;color:#cdebdb;border-radius:3px;padding:0 2px}
.sa-home{display:none}

@media(max-width:700px){
  /* Copy on top and centred, the screen below — half in frame, half buried. */
  .searchact{padding:40px 16px 0}
  .sa-stage{min-height:430px;align-items:start}
  .sa-payoff{grid-template-columns:1fr;gap:0;justify-items:center;text-align:center;align-items:start}
  .sa-copy{padding-bottom:0}
  .sa-head{font-size:clamp(26px,7.6vw,34px)}
  .sa-copy p{margin-inline:auto;font-size:14px;max-width:30ch}
  .sa-phone{width:min(78vw,290px);height:215px;margin-top:24px;border-radius:28px 28px 0 0}
  .sa-device{width:min(78vw,290px);border-radius:28px 28px 0 0}
}
@media(max-width:390px){.sa-phone,.sa-device{width:86vw}.sa-phone{height:200px}}

/* The closer asks "Where did you put it?" — so does he. */
.closer-mascot{width:clamp(150px,17vw,220px);height:auto;margin-bottom:-6px}
@media(max-width:700px){.closer-mascot{width:150px}}

/* ---- Keep the bar where it always was ----------------------------------
   The stage is bottom-aligned so the phone can run off the edge; the bar
   must not inherit that, so it centres itself rather than the grid.        */
.sa-bar{top:50%;left:50%;transform:translate(-50%,-50%) scale(.56)}
.sa-stage.grown .sa-bar{transform:translate(-50%,-50%) scale(1)}
.sa-stage.answer .sa-bar{transform:translate(-50%,-50%) scale(1.06)}

@media(max-width:700px){
  /* Copy at the top, screen flush to the bottom edge — nothing in between. */
  .sa-stage{min-height:400px;align-items:stretch}
  .sa-payoff{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;gap:0}
  .sa-copy{padding-top:4px;padding-bottom:0}
  .sa-phone{margin-top:0;margin-bottom:0;align-self:center}
  .sa-bar{top:50%;transform:translate(-50%,-50%) scale(.72)}
  .sa-stage.grown .sa-bar{transform:translate(-50%,-50%) scale(1)}
  .sa-stage.answer .sa-bar{transform:translate(-50%,-50%) scale(1.04)}
}

/* Smaller, and cropped below the chest so he sits closer to the headline. */
.closer-mascot{width:clamp(118px,12vw,162px);clip-path:inset(0 0 15% 0);margin-bottom:-14px}
@media(max-width:700px){.closer-mascot{width:118px;margin-bottom:-10px}}

/* The stage reserved far more height than the answer needs, so frame 3
   appeared with a void above it. Size it to the phone it has to hold. */
.searchact{padding:clamp(26px,3.2vw,52px) 24px 0}
.sa-stage{min-height:clamp(348px,35vw,450px)}
.sa-copy{padding-bottom:clamp(20px,3vw,48px)}
@media(max-width:700px){
  .searchact{padding:26px 16px 0}
  .sa-stage{min-height:358px}
  .sa-copy{padding-top:0}
}

/* Phone stays pinned to the bottom edge; the copy centres against it so the
   headline isn't pushed down with it. */
.sa-copy{align-self:center;padding-bottom:0}
@media(max-width:700px){.sa-copy{align-self:auto}}

/* ---- Light / dark toggle ----------------------------------------------
   theme.js already sets data-theme and remembers the choice; it had no
   styling behind it, which is why it rendered as a sliver in the nav.     */
.theme-toggle{display:inline-grid;place-items:center;width:38px;height:38px;flex:none;padding:0;border:0;
  border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.theme-toggle:hover{background:rgba(0,0,0,.06)}
.theme-toggle svg{grid-area:1/1;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s,transform .35s}
.theme-moon{opacity:0;transform:rotate(-45deg) scale(.7)}
[data-theme="dark"] .theme-sun{opacity:0;transform:rotate(45deg) scale(.7)}
[data-theme="dark"] .theme-moon{opacity:1;transform:none}
[data-theme="dark"] .theme-toggle:hover{background:rgba(255,255,255,.1)}

/* ---- Dark mode --------------------------------------------------------- */
[data-theme="dark"]{
  --bg:#101312;--gray:#171a19;--ink:#eef0ed;--muted:#a3aaa6;--line:#2b302e;
  --green:#86bfa7;--mint:#16231e;--deep:#cfe3d7;--card:#1b1f1d;
}
[data-theme="dark"] body{background:#0c0e0d;color:var(--ink)}
[data-theme="dark"] .nav{background:rgba(16,19,18,.92);border-bottom-color:rgba(255,255,255,.08)}
[data-theme="dark"] .nav nav a{color:#9aa29e}
[data-theme="dark"] .nav nav a:hover{color:var(--ink)}
[data-theme="dark"] .pill{background:var(--green);color:#0c0e0d!important}
[data-theme="dark"] .btn{background:var(--green);color:#0c0e0d}
[data-theme="dark"] .hero{background:#0c0e0d}
[data-theme="dark"] .hero-walkthrough{background:#0c0e0d}
[data-theme="dark"] .searchact{background:#111413}
[data-theme="dark"] .sa-bar{background:#1b1f1d;box-shadow:0 8px 28px rgba(0,0,0,.4)}
[data-theme="dark"] .sa-icon{stroke:var(--ink)}
[data-theme="dark"] .sa-hint{color:#7f8884}
[data-theme="dark"] .how{background:#0c0e0d}
[data-theme="dark"] .faq{background:var(--gray)}
[data-theme="dark"] .faq-list div{border-bottom-color:#262b29}
[data-theme="dark"] .closer{background:#0c0e0d}
[data-theme="dark"] .field input{background:#1b1f1d;color:var(--ink)}
[data-theme="dark"] .field input:focus{background:#20251f;border-color:var(--green)}
[data-theme="dark"] .chips span{border-color:#303532;color:#9aa29e}
[data-theme="dark"] .chips input:checked+span{background:var(--green);border-color:var(--green);color:#0c0e0d}
[data-theme="dark"] .join .btn{background:var(--green);color:#0c0e0d}
[data-theme="dark"] .join-done{background:#16231e}
[data-theme="dark"] .foot{background:var(--gray);border-top-color:var(--line)}
[data-theme="dark"] .filmband{background:#0c0e0d}
[data-theme="dark"] .doc a{color:var(--green)}

/* ---- Dark mode, corrected for contrast ---------------------------------
   Text was clearing AA already; the borders were not — chip outlines and
   dividers sat at ~1.5:1 where UI components need 3:1.                    */
[data-theme="dark"]{--muted:#b0b7b3;--line:#666a68}
[data-theme="dark"] .nav nav a{color:#b4bbb7}
[data-theme="dark"] .nav{border-bottom-color:#3f4442}
[data-theme="dark"] .sa-hint{color:#99a19d}
[data-theme="dark"] .sa-lines em{color:#a0a9a4}
[data-theme="dark"] .sa-lines small,[data-theme="dark"] .sa-group span{color:#b4bbb7}
[data-theme="dark"] .chips span{border-color:#5c605e;color:#b0b7b3}
[data-theme="dark"] .faq-list div{border-bottom-color:#4a4f4d}
[data-theme="dark"] .foot{border-top-color:#4a4f4d}
[data-theme="dark"] .foot-cols{border-bottom-color:#4a4f4d}
[data-theme="dark"] .field input{border-color:#5c605e}
[data-theme="dark"] .steps span{color:#8f9995}
[data-theme="dark"] .way p{color:#c3c9c5}
[data-theme="dark"] .theme-toggle{color:var(--ink)}

/* The walkthrough sits straight on the page in dark mode — no white plate. */
[data-theme="dark"] .hero-walkthrough{background:transparent}

/* The walkthrough was exported with a white plate around the phone —
   measured at 18/17/10/6px on a 404×720 frame. Trim it and round the
   corners to the phone's own radius so none of it shows in dark mode. */
/* The walkthrough MP4 is a phone mockup rendered on a white card with a drop
   shadow. Measured off the decoded frames (404x720, stable for the whole clip):
   the bezel runs x 24-380, y 15-706, corner radius ~70px. Masking to exactly
   that rounded rect drops the white card and its shadow, so the phone itself
   sits on the page background in either theme. The rim keeps the black bezel
   from melting into the near-black dark-mode background. */
.hero-walkthrough{background:transparent!important;box-shadow:none;
  clip-path:inset(2.08% 5.94% 1.94% 5.94% round 19.66% / 10.13%);
  filter:drop-shadow(0 0 1px rgba(255,255,255,.45)) drop-shadow(0 22px 46px rgba(0,0,0,.5))}
[data-theme="light"] .hero-walkthrough,html:not([data-theme]) .hero-walkthrough{
  filter:drop-shadow(0 22px 46px rgba(31,59,48,.22))}

/* Dark mode: the card bands were green-on-green — the cards vanished into the
   section and the first card never read as a card. Drop the band to near-black
   so the green cards carry the colour, and lift each card off it. */
[data-theme="dark"]{--mint:#0a3023}
[data-theme="dark"] .card{box-shadow:0 0 0 1px rgba(255,255,255,.11)}
[data-theme="dark"] .card-find{background:#303b35}
[data-theme="dark"] .card-shader{background:#2a6b53}
[data-theme="dark"] .way{background:#1f2724;box-shadow:0 0 0 1px rgba(255,255,255,.09)}
[data-theme="dark"] .way p{color:#c3c9c4}