/* memummi landing — ported verbatim from the Claude Design export.
   Source of truth: docs/design/landing-source/memummi-landing/
   Deviations from the export are marked  [DEVIATION] . */

:root{
--paper:#FBF6EE;--surface:#FFFCF6;--well:#F4EBDC;--ink:#2E2620;
/* [DEVIATION] --sec was #837567 and --green #5E7E60. Both fell short of 4.5:1 as
   small text: 4.15 / 4.22 on paper, 3.78 / 3.84 on well. Darkened along the exact
   same hue (30.0deg and 123.8deg, sat unchanged, lightness only) to the minimum
   that clears 4.5:1 on paper, surface AND well. deltaE 4.90 and 4.86. */
--sec:#76695C;
--saffron:#E2974A;--saffron-d:#C77B2C;--sabzeh:#86A988;--green:#557257;--dusk:#3C2F44;
--c-tiny:#E9B49F;--c-little:#9DBE9E;--c-grow:#E6BE63;--c-heart:#9C7FA8;
--d:cubic-bezier(.22,.61,.36,1);
--pad:clamp(20px,5vw,84px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Nunito,system-ui,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
/* [DEVIATION] height:auto added. Every <img> now carries width/height attributes
   so the box is reserved before the bytes arrive; without height:auto those
   attributes act as presentational hints and pin the real height to the
   intrinsic pixel height. Rules that want a specific height (.scover img,
   .card .im img, .nav img, footer img) are class-scoped and still win. */
img{display:block;max-width:100%;height:auto}
/* [DEVIATION] every <img> is wrapped in <picture> for avif/webp/fallback.
   display:contents keeps the wrapper out of layout entirely, so the <img> stays
   the grid/flex item it was in the export. The <source> rule is load-bearing, not
   tidiness: under a display:contents parent they compute to display:block and get
   promoted to grid/flex items too — inside .dusk-side that added two zero-height
   rows and two extra 18px gaps. */
picture{display:contents}
picture>source{display:none}
/* [DEVIATION] the export gave links saffron-deep text and no underline. At 3.10:1
   on paper that fails as small text, and colour was the only thing marking a link.
   Ink text clears 13.8:1; the saffron signature moves to the underline, which is a
   non-text element and needs only 3:1 (saffron-deep on paper is 3.10). Always
   visible, never hover-only. */
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--saffron-d);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .25s,text-decoration-color .25s}
a:hover{color:var(--ink);text-decoration-color:var(--ink);text-decoration-thickness:2px}
/* buttons and the skip link read as controls, not prose — no underline */
.btn,.skip{text-decoration:none}
.btn:hover,.skip:hover{text-decoration:none}
/* on the two dark sections saffron-deep drops to 3.74; plain saffron is 5.21 */
.dusk a,footer a{text-decoration-color:var(--saffron)}
h1,h2,h3,.fr{font-family:Fraunces,Georgia,serif;font-weight:500;letter-spacing:-.02em;line-height:1.02;text-wrap:balance;margin:0}
p{margin:0;text-wrap:pretty}
.fa,.zh,.hi{font-weight:500}
.fa{font-family:'Noto Naskh Arabic',serif}
.zh{font-family:'Noto Sans SC',sans-serif}
.hi{font-family:'Noto Sans Devanagari',sans-serif}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sec)}
.lede{font-size:clamp(17px,1.45vw,21px);color:#5F5348;max-width:44ch}
section{position:relative}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--pad)}

/* [DEVIATION] a11y — the export defined no focus styles at all and killed the
   ring on .form input. Saffron-deep on light ground; plain saffron on the two
   dark sections, where saffron-deep does not clear 4.5:1. Browsers follow each
   element's own border-radius for the outline, so pills stay pills. */
:focus-visible{outline:2px solid var(--saffron-d);outline-offset:3px}
.dusk :focus-visible,footer :focus-visible{outline-color:var(--saffron)}
.skip{position:absolute;left:var(--pad);top:-100px;z-index:100;background:var(--surface);color:var(--ink);border-radius:999px;padding:12px 22px;font-size:15px;font-weight:800;box-shadow:0 12px 30px -14px rgba(46,38,32,.5);transition:top .2s var(--d)}
.skip:focus-visible{top:12px}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--d) var(--dl,0s),transform .9s var(--d) var(--dl,0s)}
.rv.in{opacity:1;transform:none}
.rvm{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--d) var(--dl,0s),transform 1.6s var(--d);transform:scale(1.04)}
.rvm.in{clip-path:inset(0 0 0 0);transform:scale(1)}

/* nav */
header{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);background:rgba(251,246,238,.82);border-bottom:1px solid rgba(46,38,32,.07)}
.nav{display:flex;align-items:center;gap:32px;height:70px;max-width:1360px;margin:0 auto;padding:0 var(--pad)}
/* [DEVIATION] aspect-ratio pinned to the source wordmark's 3176x805. The shipped
   raster is downscaled, and its rounded pixel dimensions (110x28) imply 3.9286
   rather than 3.9453 — enough to shrink the logo box by 0.4px and shift the nav
   button. Stating the ratio makes layout independent of the file's rounding. */
.nav img,footer img{aspect-ratio:3176/805}
.nav img{height:26px;width:auto}
.nav nav{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:600}
.nav nav a{color:var(--ink)}
.nav nav a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 26px;border-radius:999px;font:inherit;font-size:15.5px;font-weight:800;border:0;cursor:pointer;transition:transform .3s var(--d),background .25s,box-shadow .3s}
.btn-p{background:var(--saffron);color:#2A1D0C;box-shadow:0 8px 22px -12px rgba(199,123,44,.8)}
/* [DEVIATION] export had color:#fff on hover — pure white is a brand violation.
   Label stays #2A1D0C; the fill alone deepens to saffron-deep. */
.btn-p:hover{background:var(--saffron-d);color:#2A1D0C;transform:translateY(-2px)}
.btn-s{background:transparent;color:var(--ink);border:1.5px solid rgba(46,38,32,.22)}
.btn-s:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-sm{height:42px;padding:0 20px;font-size:14px}
@media(max-width:900px){.nav nav{display:none}}

/* hero */
.hero{padding:clamp(36px,5vw,96px) 0 clamp(60px,8vw,120px);overflow:clip}
@media(min-width:1001px) and (max-height:760px){.hero{padding:26px 0 54px}.hero h1{font-size:clamp(34px,3.6vw,48px);margin:14px 0 16px}.hero-cta{margin-top:22px}.langline{margin-top:22px}}
.hero-g{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.18fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero h1{font-size:clamp(40px,5.4vw,82px);font-weight:400;margin:22px 0 24px}
.hero h1 em{font-style:italic;color:var(--green)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.langline{display:flex;align-items:center;gap:14px;margin-top:38px;font-size:19px;color:var(--sec)}
.langline b{font-weight:500;color:var(--ink)}
.langline i{width:5px;height:5px;border-radius:50%;background:var(--saffron);display:block}
.hero-art{position:relative}
/* [DEVIATION] was .hero-art>img — the <picture> wrapper breaks the child combinator
   even under display:contents, since selector matching still sees the element. */
.hero-art img{width:100%;height:auto;object-fit:contain;border-radius:26px}
.hero-glow{position:absolute;inset:-6% -4%;background:radial-gradient(58% 52% at 52% 48%,rgba(226,151,74,.16),transparent 70%);filter:blur(8px);z-index:-1}
.wc{position:absolute;background:var(--surface);border:1px solid rgba(46,38,32,.08);border-radius:18px;padding:13px 17px 15px;box-shadow:0 22px 48px -22px rgba(46,38,32,.4),0 2px 6px rgba(46,38,32,.05);width:max-content;max-width:210px}
.wc .n{font-size:26px;line-height:1.15;color:var(--dusk)}
/* [DEVIATION] small text, so 4.5:1 applies and saffron-deep's 3.26 fails.
   Ink for the word; the saffron signature becomes the underline, which is
   non-text and only needs 3:1. */
.wc .r{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:.01em;text-decoration:underline;text-decoration-color:var(--saffron-d);text-decoration-thickness:2px;text-underline-offset:2px}
.wc .g{font-size:12.5px;line-height:1.4;color:var(--sec);margin-top:3px}
.wc .sp{position:absolute;top:12px;right:12px;width:20px;height:20px;opacity:.5}
/* [DEVIATION] wrapper added so the three cards can become a rail at <=430px.
   display:contents keeps it out of layout entirely above that; the cards stay
   absolutely positioned against .hero-art, which is the nearest *positioned*
   ancestor and is unaffected by a display:contents element in between. */
.wc-row{display:contents}
.wc1{left:-6%;top:14%}
.wc2{right:-4%;top:44%}
.wc3{left:8%;bottom:-4%}
@media(max-width:1000px){
.hero-g{grid-template-columns:1fr}
.wc{max-width:170px;padding:10px 13px 12px}.wc .n{font-size:21px}
.wc1{left:-3%;top:6%}.wc2{right:-2%;top:52%}.wc3{left:4%;bottom:-6%}
}

/* recognition */
.recog{padding:clamp(80px,11vw,170px) 0;overflow:clip}
.recog-g{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(30px,5vw,80px);align-items:start}
.recog h2{font-size:clamp(31px,4vw,58px);font-weight:300;max-width:17ch}
.recog h2 .b{display:block;margin-top:.42em;font-weight:500}
.beats{margin:0;padding:0 0 0 clamp(20px,2vw,30px);list-style:none;display:grid;gap:clamp(16px,2vw,28px);border-left:1.5px solid rgba(226,151,74,.4);margin-top:.55em}
.beats li{position:relative;font-family:Fraunces,serif;font-size:clamp(19px,1.9vw,27px);font-weight:300;color:#6B5F53;line-height:1.28}
.beats li::before{content:"";position:absolute;left:calc(-1*clamp(20px,2vw,30px) - 5.5px);top:.55em;width:9px;height:9px;border-radius:50%;background:var(--paper);border:2px solid var(--saffron)}
.recog-close{margin-top:clamp(56px,7vw,100px);padding-top:clamp(28px,3.4vw,48px);border-top:1px solid rgba(46,38,32,.12);font-family:Fraunces,serif;font-size:clamp(25px,3.2vw,48px);font-weight:400;max-width:30ch;line-height:1.16}
.recog-close em{font-style:italic;color:var(--green)}
.drift{position:absolute;pointer-events:none;font-size:clamp(28px,4.4vw,64px);line-height:1;font-weight:500;opacity:.13;transition:opacity .8s}
.drift .ro,.drift .na{transition:opacity .9s var(--d),transform .9s var(--d);display:inline-block}
.drift .na{position:absolute;left:0;top:0;opacity:0;transform:translateY(.18em)}
.drift.flip .ro{opacity:0;transform:translateY(-.18em)}
.drift.flip .na{opacity:1;transform:none}
.d1{left:-1.5%;top:9%;color:var(--green)}
.d2{right:-1%;bottom:24%;color:var(--saffron-d)}
.d3{right:22%;top:4%;color:var(--c-heart)}
@media(max-width:900px){.recog-g{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}.drift{opacity:.09}.d1{top:4%}.d2{bottom:6%}.d3{right:4%;top:1%}}

/* product sticky */
.prod{background:var(--well);padding:clamp(64px,8vw,110px) 0 clamp(72px,9vw,130px);border-radius:clamp(28px,4vw,56px);margin:0 clamp(8px,1.5vw,22px)}
.prod h2{font-size:clamp(36px,5vw,74px);font-weight:400}
.prod .sub{margin-top:16px;color:#6B5F53;max-width:40ch}
.langpick{display:flex;flex-direction:column;gap:10px;padding-top:34px}
.lp{position:relative;width:52px;height:52px;flex:none;background:var(--surface);border:1px solid rgba(60,47,68,.14);border-radius:50%;font-size:19px;color:var(--sec);cursor:pointer;transition:.36s var(--d);display:grid;place-items:center;font-family:inherit;line-height:1}
.lp::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--saffron);opacity:0;animation:lpulse 3.4s var(--dl,0s) infinite}
/* [DEVIATION] export named 'Plus Jakarta Sans', which it never loaded — it rendered
   as system-ui by accident. Switched to Nunito (the type system's UI face).
   Size / weight / tracking / transform unchanged. */
.lp .en{position:absolute;right:calc(100% + 12px);white-space:nowrap;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-family:Nunito,system-ui,sans-serif;color:var(--ink);opacity:0;transform:translateX(5px);transition:.34s var(--d);pointer-events:none}
.lp:hover{color:var(--saffron-d);border-color:var(--saffron);transform:translateX(3px)}
.lp:hover .en{opacity:1;transform:none}
.lp[aria-pressed="true"]{background:var(--saffron);border-color:var(--saffron);color:#2E2620}
.lp[aria-pressed="true"]::before{animation:none;opacity:0}
@keyframes lpulse{0%{opacity:.5;transform:scale(1)}55%,100%{opacity:0;transform:scale(1.32)}}
.sticky-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);margin-top:clamp(40px,5vw,70px);align-items:start}
.phone-hold{position:sticky;top:calc(50vh - 320px);align-self:start;display:flex;justify-content:center;gap:clamp(10px,1.4vw,18px)}
.sticky-col{align-self:stretch}
.phone{width:314px;max-width:100%;border-radius:44px;background:#221C26;padding:11px;box-shadow:0 44px 90px -40px rgba(34,28,38,.65),0 6px 18px rgba(34,28,38,.16)}
.screen{position:relative;background:var(--surface);border-radius:34px;overflow:hidden;height:600px;display:flex;flex-direction:column}
.sbar{display:flex;align-items:center;gap:8px;padding:14px 18px 8px;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--sec);text-transform:uppercase}
.sbar .dot{width:6px;height:6px;border-radius:50%;background:var(--sabzeh)}
.sbar .pg{margin-left:auto;letter-spacing:.04em}
.scover{margin:2px 16px 0;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--well)}
.scover img{width:100%;height:100%;object-fit:cover;object-position:50% 76%}
.stext{padding:18px 20px 0;font-size:16.5px;line-height:1.62;color:#3A312A}
.tapw{position:relative;display:inline-block;font-weight:800;color:var(--green);cursor:pointer;padding:0 2px;border-radius:5px;transition:background .3s,color .3s}
.tapw::after{content:"";position:absolute;left:2px;right:2px;bottom:1px;height:2px;background:var(--sabzeh);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--d)}
.tapw.hint::after{transform:scaleX(1)}
.tapw.on{background:rgba(134,169,136,.2)}
.sheet{position:absolute;left:12px;right:12px;bottom:12px;background:var(--surface);border:1px solid rgba(46,38,32,.09);border-radius:26px;padding:20px 22px 22px;box-shadow:0 -18px 46px -20px rgba(46,38,32,.4);transform:translateY(115%);opacity:0;transition:transform .62s var(--d),opacity .4s}
.sheet.up{transform:none;opacity:1}
.sheet .grab{width:38px;height:4px;border-radius:4px;background:rgba(46,38,32,.14);margin:-6px auto 14px}
.sheet .na{font-size:40px;line-height:1;color:var(--dusk)}
/* [DEVIATION] see .wc .r — 17px/800 is still small text (large needs 18.66px at 700+). */
.sheet .ro{margin-top:9px;font-size:17px;font-weight:800;color:var(--ink);text-decoration:underline;text-decoration-color:var(--saffron-d);text-decoration-thickness:2px;text-underline-offset:2px}
.sheet .gl{margin-top:5px;font-size:14px;color:var(--sec);line-height:1.45}
.sheet .aud{display:flex;align-items:center;gap:10px;margin-top:16px;padding:10px 14px;border-radius:999px;background:var(--well);width:max-content;font-size:13px;font-weight:800;color:var(--ink)}
.stages{display:grid}
.stage{min-height:76vh;display:flex;flex-direction:column;justify-content:center;padding:6vh 0}
/* [DEVIATION] 12px/800 on well: saffron-deep is 2.82. Note that on WELL no saffron
   variant clears even the 3:1 non-text bar (saffron 2.03, saffron-deep 2.82), so the
   active-stage marker is a green rule rather than a saffron one. */
.stage .num{position:relative;padding-left:14px;font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--ink)}
.stage .num::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:2px;border-radius:2px;background:rgba(46,38,32,.22);transition:background .4s var(--d)}
.stage h3{font-size:clamp(28px,3.4vw,46px);font-weight:400;margin:14px 0 16px}
.stage p{color:#6B5F53;max-width:34ch}
.stage .quote{margin-top:20px;font-family:Fraunces,serif;font-size:clamp(19px,1.9vw,25px);font-weight:300;line-height:1.4;color:var(--ink);border-left:2px solid var(--saffron);padding-left:20px;max-width:30ch}
.stage.act .num::before{background:var(--green)}
.prod-end{margin-top:clamp(40px,5vw,72px);display:flex;flex-wrap:wrap;gap:10px 30px;align-items:baseline}
.prod-end .a{font-family:Fraunces,serif;font-size:clamp(22px,2.6vw,38px);font-weight:300;color:#6B5F53}
.prod-end .b{font-family:Fraunces,serif;font-size:clamp(22px,2.6vw,38px);font-weight:500}
@media(max-width:960px){.sticky-g{grid-template-columns:clamp(170px,24vw,214px) minmax(0,1fr);gap:clamp(12px,2.4vw,26px)}
.langpick{padding-top:20px;gap:8px}.lp{width:36px;height:36px;font-size:14px}.lp .en{display:none}
.phone-hold{top:calc(50vh - 158px)}
.phone{width:auto;flex:1 1 auto;min-width:0;border-radius:24px;padding:6px}.screen{height:282px;border-radius:19px}
.sbar{padding:9px 10px 5px;font-size:8.5px;gap:5px}.sbar .pg{display:none}
.scover{aspect-ratio:16/10;margin:2px 8px 0;border-radius:12px}
.stext{font-size:11.5px;line-height:1.5;padding:9px 11px 0}
.sheet{border-radius:15px;padding:11px 11px 13px;left:6px;right:6px;bottom:6px}
.sheet .grab{margin:-4px auto 10px}.sheet .na{font-size:24px}.sheet .ro{font-size:13px;margin-top:5px}.sheet .gl{font-size:11px}.sheet .aud{margin-top:9px;padding:6px 10px;font-size:11px}
.stage{min-height:60vh;padding:5vh 0}}

/* library */
.lib{padding:clamp(80px,10vw,150px) 0 clamp(60px,7vw,100px)}
.lib-head{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between}
.lib h2{font-size:clamp(34px,4.6vw,68px);font-weight:400;max-width:16ch}
.rail{display:flex;gap:clamp(18px,2.4vw,34px);overflow-x:auto;scroll-snap-type:x proximity;padding:clamp(30px,4vw,54px) var(--pad) 30px;margin:0 calc(var(--pad)*-1);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail::after{content:"";flex:0 0 12vw}
.card{flex:0 0 min(420px,78vw);scroll-snap-align:start;cursor:pointer}
.card .im{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:var(--well);box-shadow:0 26px 54px -30px rgba(46,38,32,.5)}
.card .im img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--d)}
.card:hover .im img{transform:scale(1.03)}
.card .tag{position:absolute;top:14px;left:14px;background:rgba(255,252,246,.94);border-radius:999px;padding:5px 13px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.card .prem{right:14px;left:auto;background:var(--dusk);color:#F4EBDC}
.card .pv{position:absolute;left:14px;bottom:14px;background:var(--saffron);color:#2A1D0C;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:800;opacity:0;transform:translateY(8px);transition:.45s var(--d)}
.card:hover .pv{opacity:1;transform:none}
.card .meta{display:flex;gap:10px;align-items:center;margin-top:16px;font-size:13px;font-weight:700;color:var(--sec);transition:transform .5s var(--d)}
.card:hover .meta{transform:translateX(4px)}
.card .meta s{text-decoration:none;opacity:.4}
.card h3{font-size:clamp(23px,2.1vw,31px);font-weight:400;margin-top:8px;transition:transform .5s var(--d)}
.card:hover h3{transform:translateX(4px)}
.card .nat{font-size:15px;color:var(--sec)}
.railnav{display:flex;gap:8px}
.rnb{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(46,38,32,.2);background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:.25s}
.rnb:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* word alive */
.alive{padding:clamp(80px,10vw,150px) 0;background:linear-gradient(180deg,var(--paper),#F7F0E4)}
.alive-g{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(30px,5vw,76px);align-items:center}
.alive h2{font-size:clamp(32px,4.2vw,62px);font-weight:400;max-width:18ch}
.chain{margin-top:clamp(34px,4vw,56px);display:grid;gap:0;position:relative}
.chain li{list-style:none;padding:16px 0 16px 30px;position:relative;border-left:1.5px solid rgba(226,151,74,.35)}
.chain li::before{content:"";position:absolute;left:-6px;top:26px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--saffron)}
.chain li:last-child{border-left-color:transparent}
.chain .k{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sec)}
.chain .v{font-family:Fraunces,serif;font-size:clamp(22px,2.5vw,34px);font-weight:400;line-height:1.2;margin-top:4px}
.chain .v.big{font-size:clamp(34px,4vw,56px)}
.alive-art{position:relative}
.alive-art img{width:100%;border-radius:26px;box-shadow:0 40px 80px -44px rgba(46,38,32,.55)}
.alive-final{margin-top:clamp(56px,7vw,100px);font-family:Fraunces,serif;font-size:clamp(26px,3.4vw,52px);font-weight:300;max-width:24ch;line-height:1.16}
@media(max-width:960px){.alive-g{grid-template-columns:1fr}}

/* grandma */
.gma{padding:clamp(70px,9vw,140px) 0;overflow:clip}
.gma-g{display:grid;grid-template-columns:1.25fr .95fr;gap:0;align-items:center}
.gma-art{border-radius:26px;overflow:hidden;box-shadow:0 40px 90px -46px rgba(46,38,32,.5)}
.gma-txt{position:relative;z-index:2;background:var(--surface);border-radius:26px;padding:clamp(28px,3.4vw,52px);margin-left:clamp(-90px,-6vw,-30px);box-shadow:0 30px 70px -40px rgba(46,38,32,.4)}
.gma h2{font-size:clamp(32px,4.4vw,64px);font-weight:400;line-height:1.04}
.gma h2 em{font-style:italic;color:var(--saffron-d)}
.gma p{margin-top:20px;color:#6B5F53;max-width:34ch}
@media(max-width:900px){.gma-g{grid-template-columns:1fr}.gma-txt{margin:-40px 16px 0}}

/* ages */
.ages{--ac:var(--c-little);padding:clamp(76px,9vw,140px) 0;background:var(--surface)}
.ages h2{font-size:clamp(34px,4.4vw,64px);font-weight:400}
.agebar{display:flex;gap:clamp(8px,1.4vw,20px);margin-top:clamp(34px,4vw,56px);flex-wrap:wrap;align-items:flex-end}
.ab{border:0;background:transparent;font:inherit;cursor:pointer;text-align:left;padding:16px 20px 18px;border-radius:20px;border:1.5px solid rgba(46,38,32,.12);transition:.4s var(--d);flex:1 1 150px}
.ab .ag{font-family:Fraunces,serif;font-size:30px;font-weight:400;line-height:1}
/* [DEVIATION] transition added. .ab fades its tint over .4s when deselected, but the
   label colour used to snap, leaving ~400ms of --sec on a still-purple ground at
   1.52:1. Fading both together keeps them in step. */
.ab .nm{font-size:13px;font-weight:800;color:var(--sec);margin-top:6px;letter-spacing:.02em;transition:color .4s var(--d)}
.ab.hi2{padding:22px 22px 26px;flex:1.25 1 190px}
.ab.hi2 .ag{font-size:40px}
.ab:hover{transform:translateY(-3px);border-color:rgba(46,38,32,.3)}
.ab[aria-selected=true]{background:var(--c);border-color:transparent;color:#2A2118}
/* [DEVIATION] was rgba(42,33,24,.7). On the Thoughtful Hearts tint #9C7FA8 that is
   2.92:1 — the purple is the darkest of the four bands and no alpha below 1 clears
   4.5. Dropping the override lets the label inherit the chip's own #2A2118. */
.ab[aria-selected=true] .nm{color:inherit}
.agepanel{margin-top:clamp(28px,3vw,44px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center;border-top:1px solid rgba(46,38,32,.1);padding-top:clamp(28px,3vw,44px)}
.agepanel .blurb{font-family:Fraunces,serif;font-size:clamp(24px,2.9vw,42px);font-weight:300;line-height:1.2;max-width:24ch}
.agestats{display:grid;gap:2px}
.agestats div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid rgba(46,38,32,.08);font-size:15px}
.agestats dt{color:var(--sec);font-weight:700}
.agestats dd{margin:0;font-weight:800;text-align:right}
.agestats .ex{color:var(--ink)}
.swatch{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ac);margin-right:8px;vertical-align:middle;transition:background .5s}
.fade{transition:opacity .35s}
@media(max-width:820px){.agepanel{grid-template-columns:1fr}}

/* worlds */
.worlds{padding:clamp(80px,10vw,150px) 0 clamp(40px,5vw,70px)}
.worlds h2{font-size:clamp(34px,4.6vw,68px);font-weight:400;max-width:17ch}
.world{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,64px);align-items:center;margin-top:clamp(56px,7vw,110px);position:relative}
.world.rev>.wart{order:2}
.wart{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 36px 76px -42px rgba(46,38,32,.5)}
.wart img{width:100%;transition:transform 1s var(--d)}
.world:hover .wart img{transform:scale(1.02)}
.wtxt{position:relative;padding-top:clamp(30px,5vw,86px)}
.wtxt .huge{position:absolute;top:-.62em;left:-.08em;font-size:clamp(84px,10vw,168px);line-height:.8;opacity:.075;pointer-events:none;color:var(--dusk);z-index:0}
.wtxt .inner{position:relative;z-index:1}
.wtxt .lg{font-size:clamp(30px,3.4vw,46px);line-height:1;color:var(--dusk)}
.wtxt h3{font-size:clamp(26px,2.8vw,40px);font-weight:400;margin:10px 0 4px}
/* [DEVIATION] 12px/800 on paper, 3.10. Ink, saffron kept as the underline. */
.wtxt .en{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-decoration:underline;text-decoration-color:var(--saffron-d);text-decoration-thickness:2px;text-underline-offset:4px}
.wtxt p{margin-top:16px;color:#6B5F53;max-width:36ch}
.wtxt .go{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-size:15px;font-weight:800;color:var(--ink)}
.wtxt .go:hover{color:var(--ink);text-decoration-color:var(--ink)}
.w2 .wart{border-radius:24px 24px 120px 24px}
.w3 .wart{border-radius:120px 24px 24px 24px}
@media(max-width:900px){.world{grid-template-columns:1fr}.world.rev>.wart{order:0}}

/* coming soon */
.soon{padding:clamp(50px,6vw,90px) 0 clamp(70px,8vw,120px);overflow:clip}
.soon-head{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.soon-head h3{font-family:Fraunces,serif;font-size:clamp(20px,2.2vw,30px);font-weight:300;color:#6B5F53}
.chip{border:1px solid rgba(46,38,32,.2);border-radius:999px;padding:5px 13px;font-size:10.5px;font-weight:800;letter-spacing:.16em;color:var(--sec)}
.marq{margin-top:34px;position:relative;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-t{display:flex;gap:clamp(34px,5vw,80px);width:max-content;animation:slide 42s linear infinite}
.marq:hover .marq-t{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.si{display:flex;align-items:baseline;gap:14px;opacity:.55;transition:opacity .4s}
.si:hover{opacity:1}
.si .n{font-size:clamp(38px,5vw,74px);line-height:1;color:var(--dusk)}
.si .e{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sec)}

/* dusk */
.dusk{background:var(--dusk);color:#F4EBDC;padding:clamp(80px,10vw,150px) 0;border-radius:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0;margin:clamp(30px,4vw,60px) clamp(8px,1.5vw,22px) 0}
.dusk h2{font-size:clamp(32px,4.4vw,66px);font-weight:300;max-width:20ch;color:#FBF6EE}
.dusk .lede{color:rgba(244,235,220,.72);margin-top:22px}
.dusk-g{display:grid;grid-template-columns:1.35fr .78fr;gap:clamp(26px,4vw,54px);margin-top:clamp(44px,5vw,80px);align-items:end}
.dusk-g img{width:100%;border-radius:22px}
.dusk-side{display:grid;gap:18px}
.player{display:flex;align-items:center;gap:16px;background:rgba(251,246,238,.07);border:1px solid rgba(251,246,238,.14);border-radius:20px;padding:14px 18px}
.play{width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:0;background:var(--saffron);color:#2A1D0C;cursor:pointer;display:grid;place-items:center;transition:transform .3s}
.play:hover{transform:scale(1.06)}
.wave{display:flex;align-items:center;gap:3px;height:32px;flex:1}
.wave i{flex:1;background:rgba(244,235,220,.42);border-radius:2px;height:22%;transition:height .3s}
.player.on .wave i{animation:w 1.1s ease-in-out infinite alternate}
@keyframes w{to{height:96%}}
/* [DEVIATION] alpha .6 -> .63; 4.25:1 -> 4.51 on the player's ground. */
.pl-t{font-size:12.5px;font-weight:800;letter-spacing:.06em;color:rgba(244,235,220,.63);text-transform:uppercase}
@media(max-width:900px){.dusk-g{grid-template-columns:1fr}}

/* feels */
.feels{padding:clamp(84px,11vw,170px) 0}
.feels h2{font-size:clamp(36px,5.4vw,84px);font-weight:300}
.lines{margin:clamp(46px,6vw,90px) 0 0;display:grid;gap:clamp(10px,1.3vw,20px);max-width:900px}
.lines p{font-family:Fraunces,serif;font-size:clamp(22px,2.9vw,42px);font-weight:300;line-height:1.16;color:var(--ink)}
.negs{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:clamp(40px,5vw,72px)}
.negs span{font-size:15px;font-weight:700;color:var(--sec)}
.feels-band{margin-top:clamp(50px,6vw,90px);border-radius:26px;overflow:hidden;box-shadow:0 40px 86px -48px rgba(46,38,32,.5)}
.feels-band img{width:100%;object-fit:cover;aspect-ratio:24/9;object-position:50% 40%}
.jrt{margin-top:clamp(50px,6vw,90px);font-family:Fraunces,serif;font-size:clamp(44px,8.5vw,140px);font-weight:400;line-height:.94;letter-spacing:-.035em}
.jrt em{font-style:italic;color:var(--green)}

/* cta */
.cta{padding:clamp(70px,8vw,120px) 0 clamp(60px,7vw,100px);background:linear-gradient(180deg,var(--paper),var(--well))}
.cta-art{border-radius:28px;overflow:hidden;box-shadow:0 46px 100px -50px rgba(46,38,32,.55)}
.cta-art img{width:100%;object-fit:contain}
.cta-g{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,70px);margin-top:clamp(46px,5vw,80px);align-items:start}
.cta h2{font-size:clamp(34px,4.8vw,72px);font-weight:400;max-width:17ch}
.form{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
/* [DEVIATION] export set outline:0 with no replacement. Kept the saffron border
   cue, but the focus ring now comes from the sitewide :focus-visible rule below. */
.form input{flex:1 1 240px;height:52px;border-radius:999px;border:1.5px solid rgba(46,38,32,.2);background:var(--surface);padding:0 22px;font:inherit;font-size:16px;color:var(--ink);transition:border-color .25s}
.form input:focus{border-color:var(--saffron)}
.form .btn-p{height:52px}
/* [DEVIATION] invalid-email state. Export used #C0553A (red-adjacent) on the
   border and said nothing. The words carry the meaning; saffron-deep draws the eye. */
.form input[aria-invalid="true"]{border-color:var(--saffron-d)}
.err{margin-top:12px;font-size:14.5px;font-weight:700;color:#6B5F53;display:none}
.err.show{display:block}
/* honeypot: off-screen rather than display:none, because some bots skip hidden
   fields. aria-hidden + tabindex -1 keep it away from assistive tech and the tab
   order, so nobody using the page can reach it. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form button[aria-disabled="true"]{opacity:.55;cursor:progress;transform:none}
.form button[aria-disabled="true"]:hover{background:var(--saffron);transform:none}
.fnote{margin-top:18px;font-size:14.5px;font-weight:700;color:var(--ink)}
.fnote2{margin-top:6px;font-size:13px;color:var(--sec)}
.ok{margin-top:14px;font-size:14.5px;font-weight:800;color:var(--green);opacity:0;transition:opacity .4s}
.ok.show{opacity:1}
.brandline{margin-top:clamp(56px,7vw,110px);font-family:Fraunces,serif;font-size:clamp(24px,3.2vw,50px);font-weight:300;font-style:italic;text-align:center;color:var(--dusk)}
@media(max-width:900px){.cta-g{grid-template-columns:1fr}}

/* footer */
footer{background:var(--dusk);color:rgba(244,235,220,.72);padding:clamp(54px,6vw,90px) 0 42px}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer img{height:28px;width:auto}
footer .tag{margin-top:18px;font-size:15px;max-width:26ch}
/* [DEVIATION] export used <h4> here, skipping a level after the CTA <h2>.
   Promoted to <h3>; these overrides keep the rendering byte-identical by
   undoing the h1,h2,h3,.fr Fraunces rule for this one case. */
footer h3{margin:0 0 14px;font-family:Nunito,system-ui,sans-serif;font-size:11px;font-weight:800;letter-spacing:.16em;line-height:1.65;text-wrap:wrap;text-transform:uppercase;color:rgba(244,235,220,.57)}  /* [DEVIATION] alpha .42 -> .57; 3.20:1 -> 4.58 on dusk */
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px}
footer a{color:rgba(244,235,220,.78)}
footer a:hover{color:var(--saffron)}
/* [DEVIATION] alpha .5 -> .57; 3.89:1 -> 4.58 on dusk */
.fbot{margin-top:clamp(40px,5vw,70px);padding-top:22px;border-top:1px solid rgba(244,235,220,.13);display:flex;flex-wrap:wrap;gap:14px 26px;font-size:13px;color:rgba(244,235,220,.57)}
@media(max-width:760px){.fg{grid-template-columns:1fr 1fr}.fg>div:first-child{grid-column:1/-1}}

@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.rv,.rvm{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
.marq-t{animation:none}
.player.on .wave i{animation:none;height:60%}
*{transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   [DEVIATION] Phone tiers. The export's smallest breakpoint is 760px, so below
   that the two-up layouts keep shrinking until they stop working. Two tiers,
   because the two failures start at different widths — measured at 390px:

     .sticky-g right column  152px   (stage copy, 5 words a line)
     .phone                  108px   (11.5px story text, ~13 chars a line)
     .wc1 y592-702 / .wc3 y697-790   overlapping, and 34px below the artwork

   The demo column is already down to 208px at 430 and 258px at 480, so that
   tier is 480. The hero cards only start colliding around 450, so restacking
   them earlier would deviate from the export in a range where it works — that
   tier is 430. Everything at 481px and above is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 480px: the product demo stops being two-up ────────────────────────────── */
@media(max-width:480px){
  .sticky-g{grid-template-columns:1fr;gap:0;margin-top:clamp(28px,5vw,40px)}

  /* Sticky is load-bearing: the whole section is the phone reacting as the three
     stages scroll past it. Parked at the top instead of beside the copy. */
  .phone-hold{
    position:sticky;top:8px;z-index:5;
    flex-direction:column;align-items:center;gap:12px;
    padding:10px 0 16px;
    background:linear-gradient(180deg,var(--well) 0%,var(--well) 86%,rgba(244,235,220,0) 100%);
  }
  /* language picker rotates out of the phone's way: a row above it, not a column beside it */
  .langpick{flex-direction:row;justify-content:center;padding-top:0;gap:12px;order:-1}
  .lp{width:44px;height:44px;font-size:17px}          /* 44px minimum touch target */
  .lp .en{display:none}

  .phone{width:min(252px,72vw);flex:0 0 auto;border-radius:34px;padding:9px}
  .screen{height:420px;border-radius:26px}
  .sbar{padding:12px 15px 6px;font-size:9.5px;gap:6px}
  .sbar .pg{display:block}
  .scover{aspect-ratio:4/3;margin:2px 12px 0;border-radius:14px}
  .stext{font-size:14px;line-height:1.55;padding:14px 16px 0}
  .sheet{border-radius:20px;padding:15px 16px 17px;left:8px;right:8px;bottom:8px}
  .sheet .grab{margin:-5px auto 12px}
  .sheet .na{font-size:30px}
  .sheet .ro{font-size:15px;margin-top:7px}
  .sheet .gl{font-size:12.5px}
  .sheet .aud{margin-top:12px;padding:8px 12px;font-size:12px}

  /* 76vh x 3 is 2.3 screens of mostly-empty scroll on a phone; enough to pace
     the stage changes, not enough to feel like dead space. */
  .stage{min-height:46vh;padding:4vh 0}
  .stage p{max-width:none}
  .stage .quote{max-width:none}

  /* 44px touch targets. Scoped to this tier so the verified pixel-identity at
     768/1024/1440 stays intact — extend the range if you want it on tablets. */
  .nav>a:first-child{display:flex;align-items:center;min-height:44px}
  .btn-sm{height:44px}
  footer ul{gap:0}
  footer ul a{display:inline-flex;align-items:center;min-height:44px}
}

/* ── 430px: the hero ───────────────────────────────────────────────────────── */
@media(max-width:430px){
  /* Three ~110px cards cannot be distributed over a 205px-tall illustration, so
     they stop being absolutely positioned and become a scroll-snap rail beneath
     it — the same interaction the story rail already teaches. Flex items cannot
     overlap, which is the whole point. */
  .wc-row{
    display:flex;gap:12px;
    overflow-x:auto;scroll-snap-type:x proximity;
    padding:16px var(--pad) 4px;margin:0 calc(var(--pad)*-1);
    /* without this the snap port starts inside the padding, so the rail rests
       20px scrolled and the first card sits flush to the screen edge instead of
       lining up with the headline above it */
    scroll-padding-inline:var(--pad);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .wc-row::-webkit-scrollbar{display:none}
  .wc-row::after{content:"";flex:0 0 max(1px,calc(var(--pad) - 12px))}
  .wc{
    position:static;inset:auto;
    flex:0 0 72%;max-width:none;
    scroll-snap-align:start;
    padding:14px 16px 16px;
    translate:none!important;          /* the parallax offsets assumed absolute */
  }
  .wc .n{font-size:26px}
  .wc .g{font-size:12.5px}

  /* 1400x788 at 350px wide is 197px tall — the faces land around 20px.
     Cropping in CSS buys 65px of height without another asset. */
  .hero-art img{aspect-ratio:4/3;object-fit:cover;object-position:50% 40%}
  .hero-glow{inset:-4% -3% 34% -3%}
}

/* ═══════════════════════════════════════════════════════════════════════════
   [DEVIATION] Phone corrections (<=768px). Everything here is scoped to the
   phone range and nothing above 768px is touched — the verified pixel-identity
   at 1024/1440 is unaffected. Placed last so it wins over the 480 and 430 tiers
   above, which keeps the mobile rules in one place instead of three.
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── hero word cards: no listen affordance ───────────────────────────────
     The speaker sits at top/right 12px, over the same 20px the native script
     starts in. 饺子 and दिया both run under it. There is nothing to play on the
     landing page anyway — the icon is decoration that costs legibility, so it
     is removed from the box tree rather than faded, and the script gets the
     full card width back. Still drawn at >=769px, where the cards are wider
     and the glyphs clear it. */
  .wc .sp{display:none}

  /* ── horizontal overflow ─────────────────────────────────────────────────
     Two causes, both fixed at the source:

     1. .rail is a child of section.lib, which has no padding of its own — the
        export's `margin:0 calc(var(--pad)*-1)` is the idiom for a rail nested
        inside .wrap. Here it makes the rail (100% + 2*--pad) wide, so its right
        edge lands --pad past the viewport and the document gains exactly that
        much scrollable width. That is the strip beside the footer: <footer> is
        correctly 100% wide, the page behind it is not.
        Dropping the negative margins leaves padding:... var(--pad) doing the
        job on its own, and the first card now lines up with the heading above
        it. scroll-padding-inline matches the snapport to that padding, the same
        correction .wc-row needed at 430.

     2. .hero-g falls back to `grid-template-columns:1fr` at <=1000px. 1fr is
        minmax(auto,1fr), and at <=430px .wc-row is a nowrap flex rail whose
        min-content size is the sum of all three cards — ~430px. The track blows
        out to that, so .hero-art (and the illustration inside it) is drawn
        wider than the screen and cropped by .hero's overflow:clip. minmax(0,1fr)
        restores the intended behaviour; it is a no-op wherever no blowout
        happens, which is the whole 431-768 range. */
  .rail{margin-inline:0;scroll-padding-inline:var(--pad)}
  .hero-g{grid-template-columns:minmax(0,1fr)}

  /* Safety net. clip rather than hidden: hidden makes the root a scroll
     container, which is the classic way to kill position:sticky — and both the
     header and .phone-hold depend on it. clip cannot scroll and cannot be
     scrolled programmatically, so it fails closed. body already had it. */
  html,body{overflow-x:clip}

  /* ── "how it works" pacing ───────────────────────────────────────────────
     Three short points should not cost five screens. The min-heights (76vh,
     then 60vh, then 46vh) forced every stage to a fraction of the viewport
     regardless of how little was in it; they are dropped, the padding is
     roughly halved, and the stages get a real 48px gap instead of relying on
     that empty space to separate them. Type sizes and the stage rule are
     untouched. */
  .stages{gap:48px}
  .stage{min-height:0;padding:20px 0}
}