/* ==========================================================================
   landing.css - the homepages (/en-in/, /en-us/) only. A port of the
   client's "heyoku - a tutor of your own" scroll-story design (claude.ai
   artifact KbW6y26fmRtSW4Wop2X1s9, version of 2026-10-31; Figma
   "GZ - Oku - Web App - Website System", node 3464:13755). Carries its own
   token set, fonts and breakpoints, so it deliberately does not load
   main.css. Behaviour lives in assets/js/landing.js (+ lenis.min.js).

   Layout: one continuous scroll story. Pinned 100vh scenes (sticky + scroll
   progress), each later scene sliding up over the last like a sheet; then
   normal-flow parents, team, trial, FAQ and a meadow footer. Oku is the 3D
   buddy, as transparent video clips (assets/img/oku-*-v1.*): he peeks,
   greets and cheers, he never teaches. The design's sign-up / trial-booking
   overlay is not ported: every "Let's get started" is a plain link
   to the app's trial set-up (app.heyoku.ai/setup/).
   ========================================================================== */

/* --- Webfonts: the design's exact variable fonts, latin + latin-ext
       (latin-ext carries the ₹ sign). Self-hosted, no third-party request. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/nunito-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/nunito-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/varela-round-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/varela-round-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/caveat-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  color-scheme:light;
  --gray-1:#fdfdfc; --gray-2:#fbf9f6; --gray-3:#f3f0e9; --gray-4:#ece7dd; --gray-5:#e5ded0; --gray-6:#ddd5c1; --gray-7:#d3c7ad; --gray-8:#c2b28e; --gray-11:#6f6449;
  --ink:#2a230e; --ink-deep:#060501; --ink-body:#443c1f; --dialogue:#432d1d; --cta-text:#efeee9; --card-border:#6e594f; --paper-warm:#fefcf9; --note:#fdf3e1;
  --accent-3:#fff2c3; --accent-4:#ffe9a0; --accent-5:#ffde7f; --accent-9:#ffca2f; --accent-11:#9b6f00; --accent-contrast:#2b2009;
  --green-3:#e8f7e5; --green-5:#c8eac0; --green-9:#3e9d21; --green-11:#2a8008; --blue-4:#dfeaff; --blue-9:#305ad9; --blue-11:#345bca;
  --red-9:#e16035; --pink-5:#ffcad1; --pink-6:#ffbac2; --pink-9:#f68c9b; --pink-11:#b14e5f; --hey:#ec6f86;
  --teal-5:#b8e8f1; --teal-9:#3aafc1; --lilac:#dfb2d6; --lav:#f1eafb; --orange:#df7b18;
  --peach-a:#fdf5e9; --peach-b:#fdf1e9; --peach-c:#fdeeee; --grass:#a8cd4f; --grass-2:#bdd73b;
  --font-display:'Bricolage Grotesque','Nunito',system-ui,sans-serif;
  --font-ui:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-num:'Varela Round','Nunito',system-ui,sans-serif;
  --r-chip:16px; --r-pill:26px; --r-frame:24px; --r-sheet:34px;
  --gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.3,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
body{margin:0;background:var(--gray-2);color:var(--ink);font-family:var(--font-ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:800;margin:0;text-wrap:balance;letter-spacing:-0.03em}
p{margin:0}
:focus-visible{outline:2.5px solid var(--blue-9);outline-offset:3px;border-radius:8px}
.eyebrow{font-weight:800;font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase}
.logo{display:inline-block;font-family:var(--font-display);font-weight:800;letter-spacing:-0.045em;line-height:1;color:var(--ink);text-decoration:none;font-size:30px}
.logo b{font-weight:800;color:var(--hey)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;border-radius:var(--r-pill);font:800 18px/1 var(--font-ui);text-decoration:none;white-space:nowrap;border:1.5px solid var(--ink);cursor:pointer;transition:transform .2s var(--ease),background-color .2s,box-shadow .2s}
.btn svg{width:18px;height:18px;flex:none;transition:transform .2s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-ink{background:var(--ink);color:var(--cta-text)}
.btn-ink:hover{background:var(--ink-deep);transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(42,35,14,.7)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--gray-4)}
.btn-sm{height:40px;padding:0 18px;font-size:15px}
.btn[disabled]{opacity:.3;pointer-events:none}
.glass{background:rgba(255,255,255,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(110,89,79,.16);box-shadow:0 12px 30px -22px rgba(42,35,14,.45)}
mark.hl{background:var(--accent-9);color:inherit;padding:0 .14em;border-radius:.14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Oku: transparent 3D clips, head and shoulders; his bottom edge tucks behind whatever he peeks over */
.okv{position:relative;aspect-ratio:416/422;user-select:none;-webkit-user-select:none;cursor:pointer}
.okv video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:0;transition:opacity .12s}
.okv video.on{opacity:1}
.okv.fade{-webkit-mask-image:linear-gradient(#000 74%,transparent 97%);mask-image:linear-gradient(#000 74%,transparent 97%)}
.say{position:relative;font-family:var(--font-display);font-weight:700;font-size:clamp(16px,1.5vw,19px);line-height:1.38;color:var(--dialogue);text-align:left;padding-bottom:16px;max-width:330px}
.say svg{position:absolute;left:0;bottom:0;width:100%;height:13px;overflow:visible;fill:none;stroke:rgba(67,45,29,.4);stroke-width:1.6;stroke-linejoin:round}
.say path{fill:none;stroke:rgba(67,45,29,.35);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* scene machinery */
.scene{position:relative;height:calc(var(--len) * 1vh)}
.pin{position:sticky;top:0;height:100vh;overflow:hidden;transform-origin:50% 0}
.over{margin-top:-100vh}
.pin>.dim{position:absolute;inset:0;background:#1d180c;opacity:0;pointer-events:none;z-index:60}
.fit{position:relative;height:100%;max-width:1220px;margin:0 auto;padding:0 var(--gutter)}
.copy{display:flex;flex-direction:column;gap:22px;max-width:480px}
.copy h2{font-size:clamp(36px,4.8vw,62px);line-height:1}
.copy .lede{font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--gray-11)}
.twocol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:center}

/* header */
.hdr{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:90;pointer-events:none}
.hdr-in{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:16px var(--gutter);transition:background-color .4s,box-shadow .4s}
.hdr.solid .hdr-in{background:rgba(251,249,246,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(110,89,79,.12)}
.hdr-in>*{pointer-events:auto}
.hdr .logo{justify-self:start}
.hdr-r{justify-self:end;display:flex;align-items:center;gap:10px}
.rgn{display:inline-flex;gap:2px;padding:3px;border-radius:18px}
.rgn button{border:0;background:none;font:700 12.5px var(--font-ui);padding:6px 10px;border-radius:14px;cursor:pointer;color:var(--ink);white-space:nowrap;transition:background-color .2s,color .2s}
.rgn button[aria-pressed="true"]{background:var(--ink);color:var(--accent-9)}

/* ===== the tour: Oku walks parents through it, one scene at a time ===== */
.guide{position:absolute;z-index:6;display:flex;align-items:flex-end;gap:6px;pointer-events:none}
.guide .okv{pointer-events:auto}
.bub2{position:relative;max-width:min(330px,70vw);background:#fff;border:1.5px solid var(--card-border);border-radius:22px;padding:14px 18px;font-family:var(--font-display);font-weight:700;font-size:clamp(16px,1.5vw,19px);line-height:1.35;color:var(--dialogue);box-shadow:0 18px 36px -26px rgba(42,35,14,.6);opacity:0;transform:translateY(10px) scale(.96);transform-origin:0 100%;transition:opacity .35s,transform .45s var(--ease);min-height:1.35em}
.bub2.on{opacity:1;transform:none}
.bub2::after{content:"";position:absolute;left:-9px;bottom:22px;width:16px;height:16px;background:#fff;border-left:1.5px solid var(--card-border);border-bottom:1.5px solid var(--card-border);transform:rotate(45deg)}
.bub2.r::after{left:auto;right:-9px;transform:rotate(-135deg)}
.bub2 .cur{display:inline-block;width:2px;height:1em;background:var(--dialogue);vertical-align:-.12em;margin-left:2px;animation:blinkc 1s steps(1) infinite}
@keyframes blinkc{50%{opacity:0}}

/* 1 · a tutor of your own, then Oku arrives */
.hero .pin{background:var(--peach-a)}
.h-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.h-bg img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;object-position:70% 30%;filter:sepia(.35) saturate(.85);transform-origin:62% 38%;will-change:transform,filter}
.h-bg img.era{opacity:0}
/* era marker, top right: the year leads, the pairing follows */
.h-era{position:absolute;z-index:7;top:clamp(92px,11vh,120px);right:max(var(--gutter),4vw);display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;opacity:0;transform:translateY(-6px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.h-era.on{opacity:1;transform:none}
.h-era b{font:800 clamp(30px,3.4vw,48px)/1 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.h-era span{font:700 13px var(--font-ui);letter-spacing:.3px;color:var(--ink-body);background:rgba(253,245,233,.85);padding:3px 10px;border-radius:999px}
.h-era.swap b,.h-era.swap span{animation:eraIn .5s var(--ease)}
@keyframes eraIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.h-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--peach-a) 30%,rgba(253,245,233,.75) 48%,rgba(253,245,233,.05) 78%),linear-gradient(0deg,var(--peach-b) 0%,rgba(253,241,233,0) 30%);opacity:var(--veil,1)}
.motes{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.h-copy{position:absolute;z-index:3;left:max(var(--gutter),4vw);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,1.6vw,30px);max-width:max(620px,54vw);will-change:opacity,transform}
.h-copy .eyebrow{font-size:clamp(12.5px,.95vw,17px);color:var(--accent-11);animation:rise .9s var(--ease) backwards}
.h-copy h1{font-size:clamp(52px,9.4vw,180px);line-height:.94;letter-spacing:-0.05em;isolation:isolate}
.h-copy h1 .w{display:inline-block;animation:rise 1s var(--ease) backwards}
.h-copy h1 mark{background:none;color:inherit;position:relative;white-space:nowrap;padding:0 .08em}
.h-copy h1 mark::before{content:"";position:absolute;inset:.1em -.02em .02em;background:var(--accent-9);border-radius:.12em;z-index:-1;transform-origin:0 50%;animation:swipe .9s 1s var(--ease) backwards}
@keyframes swipe{from{transform:scaleX(0)}}
.h-copy .sub{font-size:clamp(18px,1.65vw,30px);color:var(--ink-body);display:flex;flex-wrap:wrap;align-items:center;gap:.35em;animation:rise .9s .8s var(--ease) backwards}
.mark-oku{display:none;position:absolute;z-index:0;right:-24px;bottom:42px;width:140px;aspect-ratio:416/422;clip-path:inset(0 0 16px 0)}
.textlink{display:inline-flex;align-items:center;gap:8px;font:800 16.5px var(--font-ui);color:var(--ink);background:none;border:0;border-bottom:2px solid rgba(42,35,14,.25);padding:0 0 2px;cursor:pointer}
.textlink:hover{border-bottom-color:var(--ink)}
.textlink svg{width:15px;height:15px}
.h-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;animation:rise .9s 1s var(--ease) backwards}
@keyframes nudge{50%{transform:translateY(3px)}}
.bub2.tease{position:absolute;z-index:3;right:66%;top:30%;white-space:nowrap;font-size:16px;padding:10px 14px;pointer-events:none}
.h-ctas .btn{height:clamp(54px,4vw,70px);font-size:clamp(18px,1.3vw,23px);padding:0 clamp(28px,2.2vw,42px)}
/* a wordless nudge to scroll: a little mouse with a rolling wheel, and chevrons that bob */
.snudge{display:inline-flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:4px 6px;cursor:pointer;color:var(--ink-body)}
.snudge i{display:block;width:24px;height:36px;border:2px solid rgba(42,35,14,.45);border-radius:13px;position:relative}
.snudge i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--ink-body);animation:wheel 1.6s ease-in-out infinite}
.snudge svg{width:16px;height:16px;animation:nudge 1.6s ease-in-out infinite}
.snudge:hover i{border-color:var(--ink)}
/* the scroll nudge sits centred at the bottom of the hero on every screen size */
.snudge-c{position:absolute;left:50%;bottom:calc(clamp(360px,44vw,600px) * .38);transform:translateX(-50%);z-index:8}
/* idle nudge: if someone stops mid-story, a quiet “keep scrolling” pill appears above the dock */
.idle-nudge{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:94;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;background:rgba(253,245,233,.92);border:1px solid rgba(42,35,14,.12);box-shadow:0 10px 24px -14px rgba(42,35,14,.5);font:800 13px var(--font-ui);color:var(--ink);opacity:0;transform:translate(-50%,14px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.idle-nudge.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;cursor:pointer}
.idle-nudge i{display:block;width:16px;height:24px;border:2px solid rgba(42,35,14,.5);border-radius:9px;position:relative}
.idle-nudge i::after{content:"";position:absolute;left:50%;top:4px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:var(--ink-body);animation:wheel 1.6s ease-in-out infinite}
.idle-nudge svg{width:14px;height:14px;animation:nudge 1.6s ease-in-out infinite}
.idle-nudge .t-touch{display:none}
@media (pointer:coarse){.idle-nudge .t-touch{display:inline}.idle-nudge .t-mouse{display:none}}
.live{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--red-9);box-shadow:0 0 0 0 rgba(225,96,53,.5);animation:livep 1.8s infinite;margin:0 .1em}
@keyframes livep{70%{box-shadow:0 0 0 .45em rgba(225,96,53,0)}100%{box-shadow:0 0 0 0 rgba(225,96,53,0)}}
@keyframes rise{from{opacity:0;transform:translateY(.5em)}}
.h-guide{left:50%;bottom:0;transform:translateX(-50%);align-items:flex-end}
.h-oku{width:clamp(360px,44vw,600px);margin:0 -60px -40px -90px;transform-origin:50% 100%;will-change:transform}
.h-guide .bub2{margin-bottom:clamp(230px,27vw,370px);z-index:2}
.h-cta{position:absolute;z-index:6;left:50%;bottom:32px;transform:translate(-50%,20px);opacity:0;transition:opacity .4s,transform .5s var(--ease)}
.h-cta.on{opacity:1;transform:translate(-50%,0)}
/* end of the hero: no CTA here, just a nudge to keep going (the CTA lives in the header, the bottom dock and the last sections) */
.h-cta.keep{display:flex;align-items:center;gap:8px;padding:9px 16px 9px 12px;border-radius:999px;background:rgba(253,245,233,.94);border:1px solid rgba(42,35,14,.12);box-shadow:0 10px 24px -14px rgba(42,35,14,.5);font:800 14px var(--font-ui);color:var(--ink);cursor:pointer}
.h-cta.keep i{display:block;width:16px;height:24px;border:2px solid rgba(42,35,14,.5);border-radius:9px;position:relative}
.h-cta.keep i::after{content:"";position:absolute;left:50%;top:4px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:var(--ink-body);animation:wheel 1.6s ease-in-out infinite}
.h-cta.keep svg{width:14px;height:14px;animation:nudge 1.6s ease-in-out infinite}
.h-cta.keep .t-touch{display:none}
@media (pointer:coarse){.h-cta.keep .t-touch{display:inline}.h-cta.keep .t-mouse{display:none}}
.hint{position:absolute;left:50%;bottom:22px;z-index:8;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:800;font-size:11px;letter-spacing:1.5px;color:var(--ink-body)}
.hint i{display:block;width:22px;height:34px;border:1.5px solid rgba(42,35,14,.4);border-radius:12px;position:relative}
.hint i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--ink-body);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{60%{transform:translateY(9px);opacity:0}}

/* 2 · the coach teaches, Oku gets them practising: the work keeps rolling behind */
.work .pin{background:var(--gray-3)}
.rows{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;justify-content:space-between;padding:138px 0 92px;pointer-events:none;opacity:.9}
.row{display:flex;gap:14px;width:max-content;will-change:transform}
.wcard{flex:none;display:flex;align-items:center;gap:10px;background:var(--paper-warm);border:1.5px solid rgba(110,89,79,.35);border-radius:16px;padding:16px 20px;box-shadow:0 10px 22px -18px rgba(42,35,14,.6)}
.wcard i{width:10px;height:10px;border-radius:50%;flex:none}
.wcard span{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-0.01em;color:var(--ink);white-space:nowrap}
.wcol{position:relative;align-self:center}
.typed{color:var(--accent-11)}
.typed .tw{display:inline-block}
.typed .cur{display:inline-block;width:3px;height:.85em;background:var(--accent-11);vertical-align:-.08em;margin:0 1px 0 2px;animation:blinkc 1s steps(1) infinite}
.w-left{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:0;pointer-events:none}
.w-left .bub2{position:absolute;left:clamp(30px,4vw,70px);top:auto;bottom:68%;width:max-content;max-width:min(300px,30vw);z-index:2}
.w-left .bub2::after{left:50%;bottom:-9px;margin-left:-8px;transform:rotate(-45deg)}
.wo-oku{width:clamp(340px,34vw,480px);margin-left:-60px;margin-top:-40px;pointer-events:auto;opacity:clamp(0,calc(var(--o,0) * 1.7 - .55),1);transform:translateY(calc((1 - var(--o,0)) * 140px)) scale(calc(.6 + var(--o,0) * .4));transform-origin:50% 100%}
.work #wCopy{opacity:clamp(0,calc(1 - var(--o,0) * 1.7),1);transform:translate(calc(var(--o,0) * -50px),calc(var(--o,0) * -70px));filter:blur(calc(var(--o,0) * 6px))}
.work #wDuo{opacity:clamp(0,calc(1 - var(--o,0) * 1.7),1);transform:translate(calc(var(--o,0) * 160px),calc(var(--o,0) * 30px)) scale(calc(1 - var(--o,0) * .2));filter:blur(calc(var(--o,0) * 6px));pointer-events:none}
.work .pin{background:color-mix(in srgb,var(--gray-3) calc(100% - var(--o,0) * 100%),#fff6dc)}
.rowwrap{position:relative;min-height:60px}
.sc{flex:none;margin-left:var(--m);transform:translateY(var(--y)) rotate(var(--r)) scale(var(--s));animation:drift 7s ease-in-out infinite;animation-delay:var(--d)}
@keyframes drift{50%{translate:0 -10px}}
.row{gap:0}
.rowwrap{opacity:clamp(0,calc(1 - var(--o,0) * 1.6),1)}
.rowwrap:first-child{transform:translateY(calc(var(--o,0) * -90px))}
.rowwrap:last-child{transform:translateY(calc(var(--o,0) * 90px))}
.ofield{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:clamp(0,calc(var(--o,0) * 1.7 - .55),1);transform:translateX(calc((1 - var(--o,0)) * 160px))}
.opane{position:absolute;right:max(var(--gutter),4vw);top:50%;width:min(44vw,540px);aspect-ratio:1/1.02;transform:translateY(-46%);padding:6px}
.opane .fcard{position:absolute;inset:6px;width:auto;top:6px;animation:none;transition:none;border-radius:26px;padding:18px 18px 0;gap:12px}
.opane .fcard b{font-size:clamp(22px,2vw,28px)}
.opane .fcard .fv{border-radius:18px 18px 0 0}
.opane .fcard .fv img{width:70%}
.opane .fcard .fv svg{width:100%;height:100%;display:block}
.opane .fcard .fv{background:none;place-items:stretch}
.fcard{position:relative;flex:none;top:var(--y);width:clamp(210px,19vw,280px);opacity:calc(.45 + var(--f,0) * .55);scale:calc(.86 + var(--f,0) * .16);aspect-ratio:1;background:var(--paper-warm);border:1.5px solid var(--card-border);border-radius:22px;padding:12px 12px 0;display:flex;flex-direction:column;gap:8px;overflow:hidden;box-shadow:0 26px 44px -30px rgba(42,35,14,.7);transform:rotate(var(--r));animation:drift 8s ease-in-out infinite;animation-delay:var(--d)}
.fcard b{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-0.01em;padding:0 4px}
.fcard .fv{flex:1;min-height:0;border-radius:14px 14px 0 0;background:#2e2b23;display:grid;place-items:center;overflow:hidden}
.fcard .fv img{width:78%;height:100%;object-fit:cover;object-position:top;border-radius:10px 10px 0 0;margin-top:14px;align-self:start}
.fcard .fv svg{width:86%;height:86%;background:none}
.fcard .fv:has(svg){background:var(--accent-3)}
.fbit{position:relative;flex:none;top:var(--y);width:clamp(96px,8vw,124px);background:rgba(255,255,255,.75);border:1px solid rgba(110,89,79,.2);border-radius:16px;padding:6px;transform:rotate(var(--r));animation:drift 6s ease-in-out infinite;animation-delay:var(--d)}
.fbit svg{display:block;width:100%}
.rows .vcard{transform:scale(calc(.9 + var(--o,0) * .12));box-shadow:0 calc(12px + var(--o,0) * 10px) calc(26px + var(--o,0) * 14px) -20px rgba(42,35,14,.6)}
.vcard{flex:none;width:200px;height:150px;background:var(--paper-warm);border:1.5px solid rgba(110,89,79,.35);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 12px 26px -20px rgba(42,35,14,.6)}
.vcard svg{flex:1;width:100%;padding:12px 14px 0;font-family:var(--font-ui)}
.vcard span{padding:6px 12px 10px;font-weight:800;font-size:12.5px;color:var(--ink)}
.vcard.scr{background:#2e2b23}
.vcard.scr img{flex:1;min-height:0;width:76%;margin:12px auto 0;object-fit:cover;object-position:top;border-radius:10px 10px 0 0}
.vcard.scr span{background:var(--paper-warm)}
.row{align-items:center}
.work .fit{z-index:2}
.work .copy{max-width:520px}
.duo{position:relative;justify-self:end;width:min(470px,100%);display:flex;flex-direction:column;gap:14px}
.duo .call{box-shadow:0 22px 40px -26px rgba(42,35,14,.8)}
.duo .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{position:relative;background:#463a20;border-radius:12px;aspect-ratio:1.25;display:grid;place-items:center;overflow:hidden}
.tile>span{position:absolute;left:9px;bottom:7px;font-size:11.5px;color:var(--gray-5)}
.tile .av{width:40%;aspect-ratio:1;border-radius:50%}
.tile.talk::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 2px var(--accent-9)}
.call{background:#3b3020;border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:8px}
.call .h{display:flex;justify-content:space-between;align-items:center;background:#463a20;border-radius:10px;padding:9px 12px;color:var(--gray-5);font-size:12px;letter-spacing:.6px}
.call .h b{color:#fff;font-weight:700;letter-spacing:0;display:flex;align-items:center;gap:7px}
.prac{position:relative;z-index:2;background:var(--paper-warm);border:1.5px solid var(--card-border);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.prac .k{font-weight:800;font-size:11px;letter-spacing:1px;color:var(--green-11)}
.prac p{font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.25}
.prac .ans{font-size:14.5px;color:var(--ink-body);border-left:3px solid var(--blue-9);padding-left:10px;min-height:2.6em}

/* 3 · you set the goal: the plan comes from your messages */
.goal .pin{background:var(--gray-2)}
.g-panel{position:relative;justify-self:end;width:min(440px,100%);height:min(470px,60vh);background:var(--pink-9);border:1px solid var(--card-border);border-radius:var(--r-frame);display:flex;justify-content:center;align-items:flex-end;margin-top:70px}
.g-oku{position:absolute;z-index:0;left:6%;bottom:calc(100% - 24px);width:200px;clip-path:inset(0 0 24px 0)}
.goal .guide{left:calc(6% + 172px);bottom:calc(100% + 26px)}
.pathc{background:var(--paper-warm);border:1.5px solid var(--card-border);border-radius:18px;padding:12px 14px 8px}
.pathc .k{font-weight:800;font-size:11px;letter-spacing:1px;color:var(--gray-11)}
.pathc svg{width:100%;height:auto;display:block;overflow:visible}
.pathc .lb{font:700 11px var(--font-ui);fill:var(--ink-body)}
.pathc .ms{opacity:0;transition:opacity .4s,transform .5s cubic-bezier(.3,1.4,.4,1);transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.pathc .ms.on{opacity:1;transform:none}

.gphone{overflow:hidden}
.gview{position:absolute;inset:18px 14px 0;display:flex;flex-direction:column;gap:10px;transition:opacity .55s var(--ease),transform .6s var(--ease),filter .55s}
/* the chat header stays quiet: WhatsApp look in India, iMessage look in the US */
.ph-h.gh{gap:8px;padding:0 4px 8px;position:relative;z-index:2;background:#f6f2e8;margin:-12px -10px 0;padding-top:12px;padding-left:14px}
[data-region=US] .ph-h.gh{background:#fff}.ph-h.gh .av{width:26px;height:26px;font-size:8.5px}.ph-h.gh strong{font-size:13.5px}
[data-region=US] .gphone{background:#fff}
[data-region=US] .ph-h.gh{flex-direction:column;gap:3px;border-bottom-color:#e5e5ea}
[data-region=US] .ph-h.gh strong{font:600 11.5px var(--font-ui)}
[data-region=US] .gchat .ping{border:0;box-shadow:none;border-radius:18px}
[data-region=US] .gchat .ping.me{background:#0a84ff;color:#fff;border-bottom-right-radius:5px}
[data-region=US] .gchat .ping.me .who,[data-region=US] .gchat .ping.me time{color:rgba(255,255,255,.75)}
[data-region=US] .gchat .ping.me .att{background:rgba(255,255,255,.18)}
[data-region=US] .gchat .ping.them{background:#e9e9eb;border-bottom-left-radius:5px}
.gmsgs{display:flex;flex-direction:column;gap:10px;transition:transform .6s var(--ease)}
.ga-h{display:flex;justify-content:space-between;align-items:center;padding:0 4px}
.ga-logo{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-0.04em}.ga-logo b{color:var(--hey)}
.ga-ok{font-size:10.5px;font-weight:800;color:var(--green-11);background:var(--green-3);border-radius:10px;padding:3px 8px}
.ga-t{font-family:var(--font-display);font-size:18px;letter-spacing:-0.02em;padding:0 4px}
.ga-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;position:relative;transition:transform .6s var(--ease)}
.ga-list::before{content:"";position:absolute;left:14px;top:14px;bottom:20px;border-left:2px dashed rgba(42,35,14,.25)}
.ga-list li{position:relative;display:flex;gap:10px;align-items:center;background:#fff;border:1px solid rgba(42,35,14,.1);border-radius:12px;padding:8px 10px}
.ga-list li i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--gray-4);border:2px solid var(--ink);font-style:normal;display:grid;place-items:center;z-index:1}
.ga-list li b{display:block;font-size:13px}.ga-list li small{display:block;font-size:10.5px;color:var(--gray-11);font-weight:700}
.ga-list li.focus{background:var(--accent-3);border-color:var(--accent-9)}.ga-list li.focus i{background:var(--accent-9)}
.gpath{margin-top:22px;max-width:420px;background:var(--paper-warm);border:1.5px solid var(--card-border);border-radius:18px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px -18px rgba(42,35,14,.35);opacity:.0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.gpath.on{opacity:1;transform:none}
.goal h2{font-size:clamp(28px,3.2vw,42px)}.goal .lede{font-size:clamp(15px,1.2vw,17px);max-width:400px}
.gpath{gap:8px}.gpath .ga-t{font-size:16px}.gpath .ga-list{gap:6px}.gpath .ga-list li{padding:6px 10px}.gpath .ga-list li.add.on{padding-top:6px;padding-bottom:6px}
.gpath .ga-list li b{font-size:12.5px}
.ga-logo small{font:700 11px var(--font-ui);letter-spacing:0;color:var(--gray-11)}
.ga-ok{opacity:0;transform:scale(.8);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.4,1)}.ga-ok.on{opacity:1;transform:none}
.ga-list li.add{max-height:0;padding-top:0;padding-bottom:0;margin-bottom:-8px;border-width:0;opacity:0;overflow:hidden;transform:scale(.9);transition:max-height .5s var(--ease),padding .5s var(--ease),margin .5s var(--ease),opacity .4s .15s,transform .55s .15s cubic-bezier(.3,1.4,.4,1)}
.ga-list li.add.on{max-height:70px;padding-top:8px;padding-bottom:8px;margin-bottom:0;border-width:1px;opacity:1;transform:none}
.ga-list li.gift{background:var(--pink-5);border-color:var(--pink-9)}
.ga-list li.gift i{width:auto;height:auto;border:0;background:none;font-size:15px}
/* 4 · every week, a call; then the three on the call become the team in your child's corner */
.week .pin{background:radial-gradient(90% 70% at 70% 55%,color-mix(in srgb,#fff6dc calc(var(--m,0) * 100%),var(--gray-3)),var(--gray-3) 75%)}
.kcol{position:relative;align-self:center;min-height:360px}
.kcol .copy{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);transition:none}
.kstage{position:relative;justify-self:end;width:min(480px,100%);aspect-ratio:1/.95;margin-top:40px}
.klines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
.klines line{stroke:var(--ink);stroke-width:2;stroke-dasharray:4 6;vector-effect:non-scaling-stroke}
.kframe{position:absolute;z-index:2;background:#3b3020;border-radius:16px;box-shadow:0 22px 40px -26px rgba(42,35,14,.8)}
.kframe .h{position:absolute;left:8px;right:8px;top:8px;display:flex;justify-content:space-between;align-items:center;background:#463a20;border-radius:10px;padding:9px 12px;color:var(--gray-5);font-size:12px;letter-spacing:.6px}
.kframe .h b{color:#fff;font-weight:700;letter-spacing:0}
.knode{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9%;padding-bottom:2%;background:linear-gradient(180deg,#4b3e23,#3d3218);border:1px solid rgba(255,255,255,.07);border-radius:18px;box-shadow:0 18px 32px -22px rgba(42,35,14,.85),inset 0 1px 0 rgba(255,255,255,.06)}
.knode i{width:40%;box-shadow:0 0 0 5px rgba(255,255,255,.07),0 6px 14px -6px rgba(0,0,0,.5)}
.knode i{display:block;border-radius:50%;aspect-ratio:1}
.knode .l1{font-size:12.5px;font-weight:700;color:#efe6d0;letter-spacing:.2px;white-space:nowrap}
.knode .l2{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:7px;font-weight:800;font-size:14px;white-space:nowrap;color:var(--ink)}
.knode.talk{box-shadow:inset 0 0 0 2px var(--accent-9),0 18px 32px -22px rgba(42,35,14,.85)}
.knode.kid{box-shadow:0 0 calc(var(--shine,0) * 46px) calc(var(--shine,0) * 10px) rgba(255,202,47,.45),0 16px 30px -22px rgba(42,35,14,.8);outline:calc(var(--shine,0) * 2px) solid rgba(255,202,47,.8)}
.shine-w{position:relative;display:inline-block;text-shadow:0 0 calc(var(--shine,0) * 16px) rgba(255,202,47,calc(var(--shine,0) * .55))}
.shine-w::after{content:"";position:absolute;left:2%;right:2%;bottom:.04em;height:.09em;border-radius:.05em;background:var(--accent-9);transform-origin:0 50%;transform:scaleX(var(--shine,0));opacity:.9}
.kblob{position:absolute;z-index:3;background:radial-gradient(circle at 40% 35%,#f3d9ee,var(--lilac) 60%,#c58ade);box-shadow:0 0 30px 6px rgba(223,178,214,.6)}
.kseat{position:absolute;z-index:2;border-radius:50%;background:var(--lilac);border:2px solid var(--ink)}
.kseat b{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:7px;font-weight:800;font-size:14px}
.k-oku{position:absolute;z-index:1}

@media (max-width:900px){
  /* phones: copy on top, the etching fills the lower half, one full-width CTA at the bottom (as on heyoku.ai) */
  .h-bg img{top:auto;bottom:0;width:100%;height:64%;object-position:42% 40%}
  .h-era{top:84px;right:var(--gutter)}.h-era b{font-size:28px}.h-era span{font-size:11.5px}
  .h-bg::after{background:linear-gradient(180deg,var(--peach-a) 38%,rgba(253,245,233,.35) 52%,rgba(253,245,233,0) 70%,rgba(253,245,233,.75) 90%,var(--peach-a) 100%)}
  .h-bg.full::after{opacity:.35}
  .h-copy{inset:0;top:0;transform:none;max-width:none;padding:92px var(--gutter) calc(22px + env(safe-area-inset-bottom,0px));gap:14px}
  .h-copy h1{font-size:clamp(48px,14vw,70px)}
  .h-copy .eyebrow{font-size:11.5px}
  .h-ctas{order:5;margin-top:auto;width:100%;flex-direction:column-reverse;align-items:stretch;gap:12px}
  .h-ctas .btn{width:100%;height:58px;font-size:18px}
  .snudge-c{bottom:calc(96px + env(safe-area-inset-bottom,0px)) !important;background:rgba(253,245,233,.75);border-radius:16px;padding:6px 10px}
  .h-ctas{position:relative}
  .h-ctas .btn{position:relative;z-index:1}
  .h-ctas .snudge{position:relative;z-index:1}
  .mark-oku{display:block}
  .h-guide{flex-direction:column;align-items:center;width:100%}
  .h-guide .bub2{margin:0 0 -30px;max-width:84vw}
  .h-guide .bub2::after{left:50%;bottom:-9px;margin-left:-8px;transform:rotate(-45deg)}
  .h-oku{width:min(92vw,380px);margin:0 0 -30px}
  .bub2.tease{right:auto;left:50%;top:14%;transform:translateX(-50%);white-space:normal;width:max-content;max-width:70vw}
  .bub2.tease.on{transform:translateX(-50%)}
  .bub2.tease::after{left:50%;bottom:-9px;margin-left:-8px;transform:rotate(-45deg)}
  /* coach beat on tablets and phones: content centred, the two word strips at equal distance above and below it */
  /* phones: rows sit clear of the header and the bottom dock, the same distance above and below the coach block */
  .rows{padding:124px 0 153px}
  .work .fit{transform:translateY(-22px)}
  .rows .wcard{padding:10px 14px;border-radius:13px;gap:8px}.rows .wcard span{font-size:14.5px}.rows .wcard i{width:8px;height:8px}
  .rows .sc{margin-left:calc(var(--m) * .45)}
  .work .fit{padding-top:0;gap:16px}
  .work .duo{justify-self:start;width:min(380px,100%)}
  .work .copy{margin-left:0}
  .duo{justify-self:center;width:min(380px,86vw)}
  /* Oku beat on small screens: Oku and his line in a slim row at the top, the feature card big underneath */
  .work .wcol{position:static}
  .w-left{top:78px;left:var(--gutter);right:var(--gutter);transform:none;flex-direction:row;align-items:flex-end;gap:4px}
  .wo-oku{width:150px;margin:0 -18px -14px -24px;flex:none}
  .w-left .bub2{position:relative;left:auto;bottom:auto;top:auto;margin-bottom:62px;max-width:none;width:auto;flex:1;font-size:14.5px}
  .w-left .bub2::after{left:-9px;bottom:16px;margin-left:0;transform:rotate(45deg)}
  .opane{left:5vw;right:5vw;width:auto;top:58%;bottom:auto;transform:translateY(-50%);aspect-ratio:auto;height:min(330px,46vh)}
  .opane .fcard{padding:14px 14px 0;aspect-ratio:auto;bottom:6px}
  .opane .fcard .fv{border-radius:14px}
  .wo-oku{order:-1}
  .g-panel,.wk-panel{justify-self:center;width:min(360px,86vw)}
  .g-panel{height:44vh}
  .guide .bub2{max-width:min(240px,58vw);font-size:15px}
  .g-oku,.w-oku{width:140px}
  .g-panel{margin-top:70px;height:36vh}
  /* weekly call → team on small screens: text on top, the stage right under it, both inside the screen */
  .week .fit{padding-top:76px;gap:8px;align-content:start}
  .kcol{min-height:236px;align-self:start}
  .kcol .copy{top:0;transform:none}
  .kstage{justify-self:center;width:min(420px,100%);aspect-ratio:1/.86;margin-top:0}
  .knode .l1{font-size:11px}
  .goal .copy{order:-1}
  .goal .lede{display:none}
  /* phones: the path shrinks to one row of chips so the chat gets the room */
  .gpath{margin-top:10px;padding:8px 10px;max-width:none;gap:6px;border-radius:14px}
  .gpath .ga-t{font-size:13px}.gpath .ga-ok{font-size:9.5px;padding:2px 6px}
  .gpath .ga-list{flex-direction:row;flex-wrap:wrap;gap:5px}.gpath .ga-list::before{display:none}
  .gpath .ga-list li{padding:4px 9px;border-radius:999px;gap:6px}.gpath .ga-list li small{display:none}
  .gpath .ga-list li b{font-size:11.5px;white-space:nowrap}.gpath .ga-list li i{width:9px;height:9px}
  .gpath .ga-list li.add{max-height:none;max-width:0;padding:4px 0;margin:0 -5px 0 0;border-width:0;transition:max-width .5s var(--ease),padding .5s var(--ease),margin .5s var(--ease),opacity .4s .15s,transform .55s .15s cubic-bezier(.3,1.4,.4,1)}
  .gpath .ga-list li.add.on{max-width:220px;padding:4px 9px;margin:0;border-width:1px}
  .gpath .ga-list li.gift i{width:auto;height:auto;border:0;background:none;font-size:13px;line-height:1;display:inline-flex;align-items:center}
  /* the phone ends above the floating “Let’s get started” dock; Oku peeks from the right so the panel can sit higher */
  .goal .g-panel{height:max(240px,calc(100svh - 480px));margin-top:88px}
  .goal .g-oku{left:auto;right:6%;width:96px;bottom:calc(100% - 20px);clip-path:inset(0 0 20px 0)}
  .goal .phone{width:min(300px,84%);padding:12px 10px 0}
  .gview{inset:12px 10px 0}
  .gmsgs{gap:7px}
  .gchat .ping{font-size:12px;padding:7px 10px 6px;gap:2px}.gchat .ping .who{font-size:10px}.gchat .ping time{font-size:9px}.gchat .ping .att{font-size:11px;padding:4px 6px}
  .goal .fit{padding-top:70px;align-content:start;gap:0}
  .goal .guide{left:calc(6% + 108px)}
  .week .guide{right:calc(6% + 112px)}
  .pathc{display:none}
}

/* the phone in the goal scene */
.phone{position:relative;width:min(320px,78%);height:88%;background:#f6f2e8;border:8px solid #6e594f;border-bottom:0;border-radius:40px 40px 0 0;padding:18px 14px 0;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.ph-h{display:flex;align-items:center;gap:10px;padding:0 4px 10px;border-bottom:1px solid var(--gray-5)}
.ph-h .av{width:38px;height:38px;border-radius:50%;background:var(--accent-9);display:grid;place-items:center;flex:none;font:800 13px var(--font-display);letter-spacing:-0.04em}
.ph-h .av b{color:var(--hey)}
.ph-h strong{font-family:var(--font-display);font-size:16px;line-height:1.1;display:block}
.ph-h small{font-size:10.5px;color:var(--green-11);font-weight:700;letter-spacing:.6px}
.ping{max-width:88%;padding:10px 12px 8px;border-radius:14px;font-size:13px;line-height:1.42;background:#fff;border:1px solid rgba(42,35,14,.08);box-shadow:0 1px 1px rgba(42,35,14,.08);opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s var(--ease);display:flex;flex-direction:column;gap:4px}
.ping.on{opacity:1;transform:none}
.ping.me{align-self:flex-end;background:#dcf8c6;border-radius:14px 14px 4px 14px}
.ping.them{align-self:flex-start;border-radius:14px 14px 14px 4px}
.ping .who{font-weight:800;font-size:11px}
.ping .att{display:flex;align-items:center;gap:8px;background:rgba(42,35,14,.06);border-radius:8px;padding:6px 8px;font-size:12px;font-weight:700}
.ping time{font-size:10px;color:var(--gray-11);align-self:flex-end}

/* ===== flow ===== */
.flow{position:relative;z-index:2;background:var(--gray-2)}
.flow.first{margin-top:-100vh;border-radius:var(--r-sheet) var(--r-sheet) 0 0}
.wrap{max-width:1080px;margin:0 auto;padding-inline:var(--gutter)}
.band{padding-block:clamp(80px,11vw,140px)}
.sec-h{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(30px,4vw,48px)}
.sec-h h2{font-size:clamp(34px,4.6vw,56px);line-height:1}
.sec-h p{font-size:clamp(17px,1.6vw,20px);color:var(--gray-11);max-width:56ch}
.notesg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.qn{position:relative;margin:0;background:var(--note);border:1px solid var(--gray-7);padding:28px 18px 18px;display:flex;flex-direction:column;gap:14px;justify-content:space-between;box-shadow:0 14px 30px -22px rgba(110,89,79,.6);transition:transform .5s var(--ease)}
.qn:nth-child(1){transform:rotate(-1.4deg)}.qn:nth-child(2){transform:rotate(1deg)}.qn:nth-child(3){transform:rotate(-.6deg)}
.qn:hover{transform:rotate(0) translateY(-4px)}
.qn::before{content:"";position:absolute;top:-12px;left:50%;width:72px;height:24px;margin-left:-36px;background:var(--accent-5);opacity:.9}
.qn blockquote{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(15px,1.4vw,17px);line-height:1.45}
.qn figcaption{font-size:13.5px;color:var(--gray-11);font-weight:700}
.team{display:block;position:relative}
.team .copy{position:relative;z-index:1;max-width:680px}
.team .copy p.why{font-size:19px;line-height:1.5;color:var(--ink);max-width:56ch}
.team-art{position:absolute;right:max(var(--gutter),2vw);top:50%;transform:translateY(-50%) rotate(-3deg);width:min(48%,560px);height:auto;color:var(--ink);opacity:.09;pointer-events:none}
#team{overflow:hidden}
@media (max-width:900px){.team-art{width:86%;right:0;top:auto;bottom:-20px;transform:rotate(-3deg);opacity:.07}}
/* credibility kept small: two quiet badges instead of founder photos */
#faq details p a{color:var(--ink);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.creds{display:flex;gap:10px;margin-top:6px}
.creds span{font:800 13px var(--font-ui);letter-spacing:1.6px;color:var(--ink);border:1.5px solid var(--card-border);border-radius:999px;padding:6px 14px;background:var(--paper-warm)}
.team .copy p{color:var(--ink-body);font-size:17px}
.team .copy p.big{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2vw,26px);line-height:1.25;color:var(--ink);letter-spacing:-0.02em}
.founders{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fd{background:var(--paper-warm);border:1.5px solid var(--card-border);border-radius:18px;padding:12px 12px 16px;display:flex;flex-direction:column;gap:10px}
.fd img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--gray-4)}
.fd b{font-family:var(--font-display);font-size:22px;letter-spacing:-0.02em;line-height:1}
.fd span{font-size:14px;color:var(--gray-11);font-weight:700}
.trialband{background:var(--accent-5);border:1.5px solid var(--card-border);border-radius:var(--r-frame);padding:clamp(26px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center}
.trialband h2{font-size:clamp(32px,4.2vw,52px);line-height:1}
.trialband .copy{gap:16px}
.trialband .copy p{color:var(--ink-body);font-size:18px}
.steps3{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.steps3 li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start;background:var(--paper-warm);border:1px solid rgba(110,89,79,.3);border-radius:16px;padding:14px 16px}
.steps3 li>span{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--accent-9);display:grid;place-items:center;font:400 17px var(--font-num)}
.steps3 b{display:block;font-size:17px}
.steps3 small{display:block;font-size:14.5px;color:var(--gray-11);line-height:1.4;margin-top:2px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.faq{display:grid;grid-template-columns:minmax(0,400px) minmax(0,560px);justify-content:space-between;gap:48px 60px;align-items:start}
.faq-intro{display:flex;flex-direction:column;align-items:flex-start;gap:24px;position:sticky;top:110px}
.faq-intro h2{font-size:clamp(36px,4.6vw,54px);line-height:1}
.qa{border-top:1.5px solid var(--gray-6)}
.qa details{border-bottom:1.5px solid var(--gray-6)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;cursor:pointer;font-weight:700;font-size:17px}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;width:28px;height:28px;border:1px solid var(--gray-8);border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:18px;line-height:1;transition:transform .3s var(--ease),background-color .2s}
.qa summary i::before{content:"+"}
.qa details[open] summary i{transform:rotate(180deg)}
.qa details[open] summary i::before{content:"−"}
.qa summary:hover i{background:var(--gray-4)}
.qa p{padding:0 40px 20px 0;color:var(--ink-body);line-height:1.55}
.rv{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.pre{opacity:0;transform:translateY(34px)}
.foot{position:relative;z-index:2;padding:230px var(--gutter) calc(120px + env(safe-area-inset-bottom,0px));background:url('/assets/img/meadow.webp') center 60px/max(100%,1440px) 233px no-repeat,linear-gradient(var(--grass-2),var(--grass-2)) 0 260px/100% 100% no-repeat,var(--gray-2)}
.foot-oku{position:absolute;left:max(16px,calc(50% - 250px));top:-28px;width:150px;z-index:0}
.foot-say{position:absolute;left:max(160px,calc(50% - 100px));top:6px}
.foot-say .say{width:min(240px,calc(100vw - 176px))}
.foot-in{position:relative;z-index:1;max-width:1050px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px 60px}
.foot-in>div{display:flex;flex-direction:column;gap:14px}
.foot p{font-size:17px}
.foot nav{display:flex;flex-direction:column;gap:10px;font-size:19px}
.foot nav a{text-decoration:none}
.foot nav a:hover{text-decoration:underline;text-underline-offset:4px}



@media (max-width:900px){
  .hdr-in{grid-template-columns:1fr auto}
  .twocol,.hero .fit{grid-template-columns:minmax(0,1fr);align-content:center;gap:22px;padding-top:84px}
  .hero .fit{align-content:start;padding-top:96px;gap:18px}
  .hero-copy{gap:12px}
  .hero-copy h1{font-size:clamp(44px,12vw,64px)}
  .hero-copy .sub{font-size:17px}
  .stage{justify-self:center;width:min(380px,82vw);margin-top:44px}
  .hero-oku{width:120px;bottom:calc(100% - 20px)}
  .hero-say{display:none}
  .hint{display:none}
  .stairs,.mp-panel,.co-panel,.lp-panel{justify-self:center;width:min(380px,86vw)}
  .st-bars{height:30vh}
  .lp-panel{height:46vh;margin-top:60px}
  .copy{gap:12px}
  .copy h2{font-size:clamp(30px,8vw,42px)}
  .copy .lede{font-size:16px}
  .notes,.tags,.chips,.never,.legend{display:none}
  .gr-stage{height:44vh}
  .gr-count b{font-size:44px}
  .notesg,.team,.trialband,.faq{grid-template-columns:minmax(0,1fr);gap:28px}
  .faq-intro{position:static}
  .hdr-r .rgn{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-copy *,.hero-copy h1 .w,.stage{animation:none!important}
  .rv.pre{opacity:1;transform:none}
}

/* ===== heyoku.ai additions =====
   The design set these with inline style="" attributes; tools/check.mjs
   rejects inline styles, so they live here as classes. */
:root{--violet:#7b57d6}
#hero{--len:560}
#work{--len:620}
#goal{--len:400}
#week{--len:460}
.eyebrow.c-accent{color:var(--accent-11)}
.eyebrow.c-pink{color:var(--pink-11)}
.eyebrow.c-violet{color:var(--violet)}
.eyebrow.c-green{color:var(--green-11)}
.self-start{align-self:flex-start}
.copy.wide{max-width:none}
.band.flush-top{padding-top:0}
#faq{background:var(--gray-3)}
.call.front,.gphone.front{position:relative;z-index:2}
.tile .av.coach{background:var(--accent-9)}
.tile .av.kid{background:var(--blue-4)}
.ping .who.oku{color:var(--green-11)}
.ping .who.coach{color:var(--violet)}
#kn0 i{background:var(--accent-9)}
#kn1 i{background:var(--blue-4)}
#kn2 i{background:var(--pink-6)}

.sprite{position:absolute}
.h-copy h1 .w:nth-of-type(1){animation-delay:.05s}
.h-copy h1 .w:nth-of-type(2){animation-delay:.13s}
.h-copy h1 .w:nth-of-type(3){animation-delay:.21s}
.h-copy h1 .w:nth-of-type(4){animation-delay:.3s}


/* skip link: first thing in <body>, visible on keyboard focus (docs/02-html-conventions.md) */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--gray-1);color:var(--ink);padding:8px 12px;border-radius:12px;font-weight:800}

/* without JS (the <head> adds .js to <html>), nothing a reader needs stays hidden:
   the scroll-driven reveals above start at opacity 0, so undo them here
   (docs/02-html-conventions.md: motion is additive only) */
html:not(.js) .ping,html:not(.js) .gpath,html:not(.js) .ga-ok,html:not(.js) .bub2:not(:empty){opacity:1;transform:none}
html:not(.js) .ga-list li.add{max-height:none;max-width:none;padding:8px 10px;margin:0;border-width:1px;opacity:1;transform:none}
html:not(.js) .snudge{display:none}   /* its scroll needs JS */

/* "/" when it isn't redirected at the edge (site/index.html): a region picker */
.pick{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:var(--gutter);text-align:center;background:var(--peach-a)}
.pick h1{font-size:clamp(40px,7vw,72px);line-height:1}
.pick-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* footer: the cookie-settings link the consent rules need (docs/10-analytics.md) */
.foot nav a[data-consent-open]{font-size:15px;color:var(--ink-body)}
/* no dock (client, 2026-10-31): the idle "keep scrolling" pill sits where it was, on every screen size */
.idle-nudge{bottom:calc(24px + env(safe-area-inset-bottom,0px))}

/* phones and tablets: no blur filters that would repaint on every scroll frame (landing.js LITE
   mode skips the per-frame ones; these are the CSS-driven ones) */
@media (max-width:900px),(pointer:coarse){
  .work #wCopy,.work #wDuo{filter:none}
  .hdr.solid .hdr-in{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(251,249,246,.96)}
  .glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.85)}
}

/* phones: the browser's own bars. 100vh is the screen with the address bar and toolbar hidden, so
   with them showing, the bottom of every 100vh scene sits under the toolbar - where "Let's get
   started" and Oku are. --cut is that height (100vh - 100svh, 0 where svh isn't supported): the
   scene backgrounds stay full-bleed, the content is laid out in the visible part only. With the
   bars hidden it simply sits a little higher. */
:root{--cut:0px}
@supports (height:100svh){@media (max-width:900px){:root{--cut:calc(100vh - 100svh)}}}
@media (max-width:900px){
  .h-copy{bottom:var(--cut)}
  .h-guide{bottom:var(--cut)}
  .snudge-c{bottom:calc(96px + var(--cut) + env(safe-area-inset-bottom,0px)) !important}
  .h-cta{bottom:calc(32px + var(--cut))}
  .rows,.ofield{bottom:var(--cut)}
  .work .fit,.goal .fit,.week .fit{height:calc(100% - var(--cut))}
}

/* phones, the coach scene: the two chip rows hug the header and the bottom of the visible screen
   (the 153px they kept free was for the dock, now gone), bob gently instead of up to 34px, and the
   coach copy + call card sit centred in the space between them, so nothing overlaps */
@media (max-width:900px){
  .rows{padding:86px 0 16px}
  .rows .sc{transform:translateY(calc(var(--y) * .3)) rotate(var(--r)) scale(var(--s))}
  .work .fit{transform:none;padding-top:142px;padding-bottom:72px;align-content:center}
}

/* ===== smoothness: nothing animates where nobody can see it =====
   A scene fully covered by the next one (or far away) gets .off from landing.js; elements that have
   faded out get .gone; the hidden "keep scrolling" pills are paused too. */
.pin.off *,.pin.off *::before,.pin.off *::after,
.gone,.gone *,.gone *::before,.gone *::after,
.idle-nudge:not(.on) *,.idle-nudge:not(.on) *::after,
.h-cta:not(.on) *,.h-cta:not(.on) *::after{animation-play-state:paused!important}

/* the coach and weekly backgrounds shift colour as you scroll. The design mixed the colour in the
   background itself (a full-screen repaint every frame); the same colours as a fading layer on top
   of the base colour are faded by the graphics chip, no repaint. Identical result: mixing A and B
   by t equals B laid over A at opacity t. */
.work .pin{background:var(--gray-3)}
.work .pin::before{content:"";position:absolute;inset:0;background:#fff6dc;opacity:var(--o,0);pointer-events:none;will-change:opacity}
.week .pin{background:var(--gray-3)}
.week .pin::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 70% 55%,#fff6dc,rgba(255,246,220,0) 75%);opacity:var(--m,0);pointer-events:none;will-change:opacity}
.h-bg::after{will-change:opacity}
/* the chips' gentle bob: run by the graphics chip, not re-styled on the main thread every frame */
.sc,.fcard,.fbit{will-change:translate}
/* phones: the chips keep gliding sideways but drop the small extra bob - ~30 elements re-styled
   every frame for a few pixels of movement */
@media (max-width:900px){.rows .sc{animation:none}}/* phones: the feature cards glide to the place landing.js gives them (see workFrame) */
@media (max-width:900px),(pointer:coarse){.opane .fcard{transition:transform .4s cubic-bezier(.3,.7,.2,1),opacity .4s cubic-bezier(.3,.7,.2,1)}}

/* phones: the scroll reveals (parents' notes, founders, trial, FAQ) are quick and light - 0.45 s and a 16px
   rise instead of 0.9 s and 34px, run by the graphics chip */
@media (max-width:900px),(pointer:coarse){
  .rv{transition:opacity .45s cubic-bezier(.3,.7,.2,1),transform .45s cubic-bezier(.3,.7,.2,1)}
  .rv.pre{transform:translateY(16px);will-change:opacity,transform}
}