/* the site's lettering, served from this folder (made by make_fonts.py) */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/baloo2-700-latin.4399d3e8.woff) format('woff');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-200B, U+200E-206F, U+20AC, U+20B9, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/baloo2-700-deva.b3c5f053.woff) format('woff');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/baloo2-800-latin.0ab51709.woff) format('woff');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-200B, U+200E-206F, U+20AC, U+20B9, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/baloo2-800-deva.bc8ccb9a.woff) format('woff');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF}
@font-face{font-family:'Lora';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/lora-500i-latin.b9b202a4.woff) format('woff');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-200B, U+200E-206F, U+20AC, U+20B9, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400-latin.f343e516.woff) format('woff');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-200B, U+200E-206F, U+20AC, U+20B9, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400-deva.bc798319.woff) format('woff');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-500-latin.09b28e83.woff) format('woff');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-200B, U+200E-206F, U+20AC, U+20B9, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-500-deva.2780458a.woff) format('woff');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latin.d6578830.woff) format('woff');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-200B, U+200E-206F, U+20AC, U+20B9, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-deva.92f43fc3.woff) format('woff');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF}
/* The hidden attribute has to win. Without this, any element with a display rule
of its own (.pcard is display:flex) stays visible when JavaScript hides it,
which is exactly why the shop's category filter did nothing at all. */
[hidden]{display:none!important}
:root{
--ground:#F2F5EF; --surface:#FFFFFF; --surface-2:#E5EEE8; --ink:#16323A; --ink-soft:#4A6067; --line:#D3DDD7;
--night:#14323B; --night-2:#1D4652; --night-3:#245562; --night-ink:#F6F2E7; --night-soft:#B7CDCD;
--marigold:#F2B138; --marigold-soft:#FBE3AE; --on-marigold:#2A1B00; --coral:#C9502F; --coral-soft:#F6D5CA;
--mint:#9DD3A8; --mint-soft:#D7EFDB; --screen:#BFE6F5; --outline:#1B2A31;
--shadow:0 1px 2px rgba(20,50,59,.06),0 10px 28px rgba(20,50,59,.09);
--display:"Baloo 2","Poppins",ui-rounded,system-ui,sans-serif;
--body:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--quote:"Lora",Georgia,"Times New Roman",serif;
--r:18px;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--ground:#0F2329; --surface:#163039; --surface-2:#1B3943; --ink:#EAF2EE; --ink-soft:#A8BEC0; --line:#2B4B54;
--marigold-soft:#4A3A17; --coral:#F08A6C; --coral-soft:#4A2A22; --mint-soft:#1F4636;
--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);
}
}
:root[data-theme="dark"]{
--ground:#0F2329; --surface:#163039; --surface-2:#1B3943; --ink:#EAF2EE; --ink-soft:#A8BEC0; --line:#2B4B54;
--marigold-soft:#4A3A17; --coral:#F08A6C; --coral-soft:#4A2A22; --mint-soft:#1F4636;
--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
:root{--text-scale:1}
html{font-size:calc(17px * var(--text-scale))}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1rem/1.65 var(--body);padding-inline:0;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
.hero .wrap>*,.problem-grid>*,.inside-grid>*,.pep-grid>*,.buy-box>*,.daycard>*{min-width:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;border-radius:6px}
.wrap{max-width:1140px;margin-inline:auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);line-height:1.05;text-wrap:balance;margin:0;letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:800}
h3{font-size:1.5rem;font-weight:700}
p{margin:0}
.eyebrow{font:600 .74rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.lead{font-size:1.08rem;color:var(--ink-soft);max-width:60ch}
section{padding-block:clamp(48px,7.4vw,88px)}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,44px)}
/* ---------- buttons: cartoon outline language ---------- */
.btn{--bg:var(--marigold);display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 1.05rem/1 var(--display);letter-spacing:.01em;
padding:15px 24px 13px;border-radius:999px;border:2px solid var(--outline);background:var(--bg);color:var(--on-marigold);text-decoration:none;cursor:pointer;white-space:nowrap;
box-shadow:3px 4px 0 var(--outline);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translate(-1px,-2px);box-shadow:4px 6px 0 var(--outline)}
.btn:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--outline)}
.btn .price{background:var(--outline);color:var(--marigold);border-radius:999px;padding:5px 10px 3px;font-size:.95rem}
.btn-ghost{background:transparent;border:0;box-shadow:none;color:inherit;font:600 .98rem/1 var(--body);padding:12px 6px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.btn-ghost:hover{transform:none;box-shadow:none;text-decoration-color:var(--marigold)}
/* ---------- preview ribbon & nav ---------- */
.ribbon{background:var(--coral);color:#fff;font:500 .8rem/1.4 var(--body);text-align:center;padding:7px 16px}
.ribbon[hidden]{display:none}
/* the no-JS banner: the buy buttons are script-driven, so a reader whose
JavaScript is off needs to be told that and given another way to pay */
.ribbon.nojs{background:var(--night);color:var(--night-ink);font-size:.86rem;padding:11px 16px;line-height:1.5}
.ribbon.nojs a{color:#fff}
.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--ground) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);border-bottom:1px solid var(--line)}
.dark-nav .nav{background:var(--night);color:var(--night-ink);border-bottom-color:rgba(255,255,255,.08)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding-block:6px}
.nav .wrap>*{min-width:0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.35rem/1 var(--display);letter-spacing:-.01em;min-height:44px}
.brand img{width:40px;height:auto}
.brand small{font:500 .66rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:3px}
.dark-nav .nav .brand small{color:var(--night-soft)}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 22px;min-width:0}
.nav-links a:not(.btn){font:500 calc(.92rem / var(--text-scale))/1 var(--body);text-decoration:none;color:var(--ink-soft);display:inline-flex;align-items:center;min-height:44px;padding-inline:2px}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.dark-nav .nav-links a{color:var(--night-soft)}
.dark-nav .nav-links a:hover{color:var(--night-ink)}
.nav .btn{padding:10px 16px 8px;font-size:calc(.95rem / var(--text-scale));box-shadow:2px 3px 0 var(--outline);min-width:0;max-width:100%}
@media (max-width:760px){.nav-links a:not(.btn){display:none}}
@media (max-width:420px){.brand small{display:none}.brand{font-size:1.15rem}}
/* ---------- hero ---------- */
.hero{background:radial-gradient(120% 90% at 80% 10%,var(--night-3) 0%,var(--night-2) 38%,var(--night) 78%);color:var(--night-ink);padding-block:clamp(40px,7vw,84px) clamp(48px,7vw,88px);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero .eyebrow{color:var(--marigold)}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.7rem);font-weight:800;margin-top:14px;line-height:1.06}
.hero h1 em{font-style:normal;color:var(--marigold)}
/* THE HEADLINE UNDERLINE
It used to be an absolutely-positioned bar. A browser hangs one of those off
the FIRST line box of an inline element, so the moment the emphasised phrase
wrapped onto two or three lines the bar collapsed into a short stub floating
under one word -- it read as a stray mark, not an underline, and it sat right
on top of the paragraph below.
Painting it as a background on the text itself fixes all of that: it is
exactly as wide as the words, it repeats on every line the phrase occupies
(that is what box-decoration-break:clone is for), and the padding underneath
keeps it clear of the descenders and of whatever follows. Each hero sets --u
to a stroke colour that contrasts with ITS OWN background. */
.hero h1 em,.hero-line em{
--u:var(--coral);
text-decoration:underline;
text-decoration-color:var(--u);
text-decoration-thickness:.075em;
text-underline-offset:.17em;
text-decoration-skip-ink:none;
animation:underline .9s .45s ease both}
@keyframes underline{from{text-decoration-color:transparent}to{text-decoration-color:var(--u)}}
.hindi{font:600 1.18rem/1.5 var(--display);color:var(--marigold-soft);margin-top:18px}
.hero .lead{color:var(--night-soft);margin-top:12px}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:28px}
.upi-note{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:18px;font-size:.84rem;color:var(--night-soft)}
.upi-note span{display:inline-flex;align-items:center;gap:7px}
.upi-note span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}
/* stage: Fonu's evening */
.stage{position:relative;width:100%;max-width:470px;margin-inline:auto;aspect-ratio:1/.92;border-radius:28px;border:2px solid rgba(255,255,255,.14);
background:linear-gradient(180deg,#1A3E4A 0%,#173743 64%,#24515E 64%,#1F4A56 100%);overflow:hidden;cursor:pointer;isolation:isolate}
.stage .window{position:absolute;left:8%;top:9%;width:38%;height:40%;border-radius:14px;border:3px solid #2F6371;background:linear-gradient(180deg,#0D2530,#123643)}
.stage .window::before,.stage .window::after{content:"";position:absolute;background:#2F6371}
.stage .window::before{left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%)}
.stage .window::after{top:50%;left:0;right:0;height:3px;transform:translateY(-50%)}
.moon{position:absolute;left:14%;top:14%;width:13%;aspect-ratio:1;border-radius:50%;box-shadow:inset -9px 5px 0 0 #F7DE8E;transform:rotate(-12deg)}
.twinkle{position:absolute;left:var(--x);top:var(--y);width:5px;height:5px;border-radius:50%;background:#FFF3C9;animation:tw 2.8s var(--d) ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
.lamp{position:absolute;right:9%;top:0;width:3px;height:22%;background:#3B6F7D}
.lamp::after{content:"";position:absolute;left:50%;bottom:-18px;width:44px;height:22px;transform:translateX(-50%);border-radius:22px 22px 4px 4px;background:var(--marigold);box-shadow:0 18px 60px 20px rgba(242,177,56,.18)}
.rug{position:absolute;left:10%;right:10%;bottom:7%;height:12%;border-radius:50%;background:#2C5E6B;border:2px dashed rgba(255,255,255,.12)}
.fonu{position:absolute;width:25%;left:18%;bottom:13%;z-index:2;transition:left 1.1s cubic-bezier(.5,0,.3,1),bottom 1.1s cubic-bezier(.5,0,.3,1),width 1.1s ease,transform .6s ease}
.fonu .f{position:absolute;inset:auto 0 0 0;width:100%;height:auto;opacity:0;transition:opacity .25s ease}
.fonu .f-shock{position:relative}
.stage[data-state="buzz"] .f-shock,.stage[data-state="hello"] .f-wave,.stage[data-state="sleep"] .f-sleepy{opacity:1}
.stage[data-state="buzz"] .fonu{animation:buzz .16s linear infinite}
@keyframes buzz{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-3px) rotate(-3deg)}75%{transform:translateX(3px) rotate(3deg)}}
.stage[data-state="hello"] .fonu{animation:bob 1.1s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.stage[data-state="sleep"] .fonu{left:55.5%;bottom:17%;width:22%;animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.03) rotate(-4deg)}}
.basket{position:absolute;right:9%;bottom:9%;width:40%;z-index:3}
.basket-back{z-index:1}
.pings{position:absolute;inset:0;pointer-events:none;z-index:4}
.ping{position:absolute;font:600 .74rem/1 var(--body);background:#fff;color:var(--outline);border:2px solid var(--outline);border-radius:999px;padding:6px 10px 5px;opacity:0;transform:scale(.4)}
.ping b{color:var(--coral)}
.stage[data-state="buzz"] .ping{animation:pop .5s var(--d) cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes pop{to{opacity:1;transform:scale(1)}}
.bubble{position:absolute;left:6%;right:auto;top:6%;max-width:62%;z-index:5;background:#fff;color:var(--outline);border:2px solid var(--outline);border-radius:18px;padding:10px 14px 9px;
font:700 1rem/1.25 var(--display);box-shadow:3px 4px 0 var(--outline);transition:transform .3s ease}
.bubble::after{content:"";position:absolute;left:30%;bottom:-11px;width:16px;height:16px;background:#fff;border-right:2px solid var(--outline);border-bottom:2px solid var(--outline);transform:rotate(45deg)}
.stage[data-state="sleep"] .bubble{left:auto;right:6%;background:var(--marigold)}
.stage[data-state="sleep"] .bubble::after{left:auto;right:30%;background:var(--marigold)}
.zzz{position:absolute;right:21%;bottom:44%;z-index:4;font:800 1.5rem/1 var(--display);color:#F7DE8E;opacity:0;transition:opacity .4s}
.stage[data-state="sleep"] .zzz{opacity:1}
.zzz span{display:inline-block;animation:zz 2.4s ease-in-out infinite}
.zzz span:nth-child(2){font-size:.8em;animation-delay:.5s}.zzz span:nth-child(3){font-size:.6em;animation-delay:1s}
@keyframes zz{0%{transform:translate(0,6px);opacity:0}30%{opacity:1}100%{transform:translate(10px,-26px);opacity:0}}
.tap-hint{position:absolute;left:50%;bottom:2.5%;transform:translateX(-50%);z-index:6;font:500 .72rem/1 var(--body);color:var(--night-soft);letter-spacing:.06em;white-space:nowrap}
/* ---------- problem ---------- */
.problem{background:var(--ground)}
.problem-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,60px);align-items:center}
.scene{border-radius:var(--r);border:2px solid var(--outline);box-shadow:5px 6px 0 var(--outline);background:#FFF6E6;overflow:hidden}
.quotes{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.quotes span{font:700 1.02rem/1 var(--display);background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:10px 14px 8px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.stat{background:var(--surface);border-radius:14px;padding:18px;border:1px solid var(--line)}
.stat b{display:block;font:800 2.3rem/1 var(--display);color:var(--coral);font-variant-numeric:tabular-nums}
.stat p{font-size:.86rem;color:var(--ink-soft);margin-top:8px}
.grade{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 5px;border-radius:5px;font:700 .72rem/1 var(--body);vertical-align:1px;border:1.5px solid currentColor}
.g-a{color:#2E8B57}.g-b{color:#2F6FA8}.g-c{color:var(--coral)}
.fine{font-size:.78rem;color:var(--ink-soft);margin-top:14px;max-width:70ch}
@media (max-width:860px){.problem-grid{grid-template-columns:1fr}}
@media (max-width:420px){.stats{grid-template-columns:1fr}}
/* ---------- trail ---------- */
.trail{background:var(--surface-2)}
.trail-scroll{overflow-x:auto;margin-inline:-20px;padding-inline:20px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.trail svg{display:block;width:100%;min-width:760px;height:auto;overflow:visible}
.trail-path{fill:none;stroke:var(--line);stroke-width:26;stroke-linecap:round}
.trail-dash{fill:none;stroke:var(--surface);stroke-width:3;stroke-dasharray:2 14;stroke-linecap:round}
.stone{cursor:pointer}
.stone circle{fill:var(--surface);stroke:var(--outline);stroke-width:2;transition:fill .25s,transform .25s;transform-box:fill-box;transform-origin:center}
.stone text{font:700 17px var(--display);fill:var(--ink);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.stone.done circle{fill:var(--marigold)}
.stone.done text{fill:var(--on-marigold)}
.stone.on circle{fill:var(--coral);transform:scale(1.18)}
.stone.on text{fill:#fff}
.stone:hover circle{transform:scale(1.12)}
.stone:focus{outline:none}
.stone:focus-visible circle{stroke:var(--marigold);stroke-width:4}
.wk{font:600 12px var(--body);letter-spacing:.14em;fill:var(--ink-soft);text-transform:uppercase}
/* the phone-friendly version of the trail: all fourteen days, nothing to scroll */
.daygrid-wrap{display:none}
.dg-lab{font:600 .72rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 8px}
.daygrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.daygrid button{aspect-ratio:1;min-height:40px;min-width:0;padding:0;border-radius:50%;border:2px solid var(--outline);
background:var(--surface);color:var(--ink);font:700 1.02rem/1 var(--display);cursor:pointer;
transition:transform .2s cubic-bezier(.3,1.6,.4,1),background .2s ease}
.daygrid button.done{background:var(--marigold);color:var(--on-marigold)}
.daygrid button[aria-current="true"]{background:var(--coral);color:#fff;transform:scale(1.1);box-shadow:2px 3px 0 var(--outline)}
@media (max-width:810px){.trail-scroll{display:none}.daygrid-wrap{display:block}}
@media (max-width:430px){.daygrid{gap:6px}}
@media (max-width:340px){.daygrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.flag{fill:var(--coral);stroke:var(--outline);stroke-width:1.5}
.daycard{display:grid;grid-template-columns:300px 1fr;gap:clamp(20px,3vw,34px);align-items:center;background:var(--surface);
border:2px solid var(--outline);border-radius:22px;padding:clamp(18px,2.4vw,26px);box-shadow:5px 6px 0 var(--outline);
margin:18px auto 0;max-width:980px}
.daycard img{width:100%;aspect-ratio:262/231;object-fit:contain;border-radius:14px;background:#FFF6E6;border:1px solid var(--line);padding:8px}
.daycard .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{font:600 .72rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:6px 10px 5px;background:var(--mint-soft);color:var(--ink)}
.chip.day{background:var(--marigold);color:var(--on-marigold)}
.daycard h3{font-size:clamp(1.6rem,3vw,2.1rem);margin-top:10px}
.daycard p.what{margin-top:8px;color:var(--ink-soft);max-width:62ch}
.fonu-says{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font:italic 500 1.02rem/1.45 var(--quote);color:var(--ink)}
.fonu-says img{width:36px;flex:none;border-radius:0;background:none}
.daynav{display:flex;gap:10px;margin-top:16px}
.daynav button{font:600 .88rem/1 var(--body);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:9px 14px;cursor:pointer}
.daynav button:hover{border-color:var(--ink)}
.daycard.swap .txt,.daycard.swap img{animation:swapin .45s ease}
@keyframes swapin{from{transform:translateY(8px);opacity:.3}to{transform:none;opacity:1}}
@media (max-width:860px){.daycard{grid-template-columns:240px 1fr;gap:22px}}
@media (max-width:700px){.daycard{grid-template-columns:1fr}.daycard img{max-width:300px;margin-inline:auto}.daycard .txt{text-align:left}}
/* ---------- inside ---------- */
.inside-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,56px);align-items:start}
.ledger{margin:0;border-top:2px solid var(--ink)}
.ledger div{display:grid;grid-template-columns:1fr auto;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);align-items:baseline}
.ledger dt{font-weight:500}
.ledger dt small{display:block;color:var(--ink-soft);font-size:.82rem;font-weight:400;margin-top:2px}
.ledger dd{margin:0;font:600 .86rem/1 var(--body);color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.pages{display:grid;grid-auto-flow:column;grid-auto-columns:200px;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 20px 22px;margin-inline:-20px;scrollbar-width:thin}
.pg{scroll-snap-align:start;border:0;padding:0;background:none;text-align:left;cursor:zoom-in;color:inherit;font:inherit}
.pg img{width:100%;aspect-ratio:210/297;object-fit:cover;border-radius:6px;box-shadow:var(--shadow);border:1px solid var(--line);transition:transform .25s ease}
.pg:hover img{transform:translateY(-4px) rotate(-.6deg)}
.pg span{display:block;font-size:.82rem;color:var(--ink-soft);margin-top:10px;line-height:1.4}
.pg span b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.scroll-hint{font-size:.8rem;color:var(--ink-soft);margin-top:4px}
@media (max-width:900px){.inside-grid{grid-template-columns:1fr}}
/* ---------- play cards marquee ---------- */
.play{background:var(--night);color:var(--night-ink);overflow:hidden}
.play .eyebrow{color:var(--marigold)}
.play .lead{color:var(--night-soft)}
.marquee{display:flex;gap:14px;width:max-content;animation:slide 60s linear infinite;padding-block:8px}
.marquee.rev{animation-direction:reverse;animation-duration:70s}
.marquee-box:hover .marquee{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.card-chip{display:flex;align-items:center;gap:12px;background:var(--night-2);border:1.5px solid rgba(255,255,255,.14);border-radius:16px;padding:12px 16px 11px;white-space:nowrap}
.card-chip b{font:700 1.08rem/1.1 var(--display);color:var(--night-ink)}
.card-chip i{font-style:normal;font-size:.82rem;color:var(--marigold-soft);display:block}
.card-chip .cat{font:600 .64rem/1 var(--body);letter-spacing:.12em;color:var(--night);background:var(--mint);border-radius:6px;padding:5px 6px 4px}
.marquee-box{display:grid;gap:10px;margin-top:34px}
/* ---------- pep ---------- */
.pep-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,56px);align-items:center}
.pep-list{display:grid;gap:18px;margin-top:24px}
.pep-list div{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.pep-list b{font:700 1.2rem/1.2 var(--display)}
.pep-list p{color:var(--ink-soft);font-size:.95rem}
.dot{width:14px;height:14px;border-radius:50%;margin-top:6px;border:2px solid var(--outline)}
@media (max-width:860px){.pep-grid{grid-template-columns:1fr}}
/* ---------- buy ---------- */
.buy{background:var(--surface-2)}
.buy-box{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,5vw,56px);align-items:center;background:var(--surface);border:2px solid var(--outline);border-radius:28px;padding:clamp(22px,4vw,48px);box-shadow:6px 8px 0 var(--outline)}
.cover-wrap{position:relative;max-width:320px;margin-inline:auto}
.cover-wrap .cover{border-radius:8px;transform:rotate(-3deg);box-shadow:0 20px 40px rgba(20,50,59,.25);border:1px solid var(--line)}
.cover-wrap .peek{position:absolute;right:-12%;bottom:-6%;width:34%;animation:bob 2.2s ease-in-out infinite}
.price-big{font:800 clamp(3.4rem,8vw,5rem)/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums;margin-top:10px}
.price-big small{font:500 1rem/1 var(--body);color:var(--ink-soft);margin-left:10px}
.checks{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:9px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:.96rem}
.checks li::before{content:"";width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--mint) no-repeat center/11px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%231B2A31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.apps{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.apps span{font:600 .78rem/1 var(--body);border:1.5px solid var(--line);border-radius:8px;padding:7px 10px 6px;color:var(--ink-soft)}
@media (max-width:820px){.buy-box{grid-template-columns:1fr}}
/* ---------- faq ---------- */
.faq-list{max-width:820px;display:grid;gap:10px}
details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0 18px}
summary{list-style:none;cursor:pointer;padding:17px 34px 16px 0;font:700 1.12rem/1.3 var(--display);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font:700 1.5rem/1 var(--body);color:var(--coral);transition:transform .2s}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{padding-bottom:18px;color:var(--ink-soft);max-width:68ch}
/* ---------- footer ---------- */
footer{background:var(--night);color:var(--night-soft);padding-block:48px 88px;font-size:.88rem}
/* the floating buttons need room; only pages with the sticky buy bar need a lot of it */
.has-sticky footer{padding-bottom:148px}
/* narrow screens stack the footer columns unevenly, so the round buttons need a little more room */
@media (max-width:760px){footer{padding-bottom:112px}}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
footer .brand{color:var(--night-ink)}
footer .brand small{color:var(--night-soft)}
footer nav{display:flex;flex-wrap:wrap;gap:10px 20px;align-content:start}
footer nav a{color:var(--night-ink);text-underline-offset:4px}
footer p+p{margin-top:8px}
@media (max-width:700px){footer .wrap{grid-template-columns:1fr}}
/* ---------- sticky bar ---------- */
.sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--night);color:var(--night-ink);
border:2px solid var(--outline);border-radius:999px;padding:8px 8px 8px 20px;box-shadow:0 12px 30px rgba(0,0,0,.25);transform:translateY(140%);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.sticky.show{transform:none}
.sticky{flex-wrap:wrap}
.sticky>*{min-width:0}
.sticky .btn{max-width:100%;white-space:normal;text-align:center}
.sticky p{font:600 .9rem/1.2 var(--body)}
.sticky p small{display:block;font-weight:400;color:var(--night-soft);font-size:.74rem}
.sticky .btn{padding:11px 18px 9px;box-shadow:none}
@media (min-width:900px){.sticky{left:auto;right:24px;width:420px}}
/* ---------- dialogs ---------- */
dialog{border:2px solid var(--outline);border-radius:24px;padding:0;background:var(--surface);color:var(--ink);width:min(560px,calc(100% - 24px));max-height:calc(100% - 32px);box-shadow:6px 8px 0 var(--outline)}
dialog::backdrop{background:rgba(10,28,34,.62);backdrop-filter:blur(3px)}
dialog[open]{animation:dlg .3s cubic-bezier(.3,1.3,.5,1)}
@keyframes dlg{from{transform:translateY(24px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.dlg-in{padding:24px clamp(18px,4vw,30px) 26px;display:grid;gap:16px}
.dlg-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.x{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:50%;width:38px;height:38px;font:600 1.2rem/1 var(--body);cursor:pointer;flex:none}
.order{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:14px;border-radius:16px;background:var(--surface-2)}
.order img{border-radius:4px;border:1px solid var(--line)}
.order b{font:700 1.08rem/1.2 var(--display);display:block}
.order small{color:var(--ink-soft);font-size:.8rem}
.order .amt{font:800 1.4rem/1 var(--display);font-variant-numeric:tabular-nums}
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:10px}
/* block, not grid: a grid split "Title. text" into one word per line on the thank-you page */
.steps li{counter-increment:s;position:relative;padding:4px 0 0 42px;min-height:30px;font-size:.94rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--marigold);color:var(--on-marigold);font:700 .95rem/1 var(--display);border:1.5px solid var(--outline)}
.dlg-in .btn{width:100%}
.note{font-size:.8rem;color:var(--ink-soft)}
.note a{color:var(--ink)}
.setup{background:var(--coral-soft);border-radius:12px;padding:12px 14px;font-size:.86rem}
.setup[hidden]{display:none}
.policy{width:min(760px,calc(100% - 24px))}
.policy .dlg-in{gap:12px}
.policy h2{font-size:1.9rem}
.policy h3{font-size:1.15rem;margin-top:8px}
.policy p,.policy li{color:var(--ink-soft);font-size:.93rem}
.policy ul{margin:0;padding-left:20px;display:grid;gap:6px}
.peek-dlg{width:min(700px,calc(100% - 24px))}
.peek-dlg img{width:100%;border-radius:8px;border:1px solid var(--line)}
.peek-nav{display:flex;justify-content:space-between;align-items:center;gap:10px}
.peek-nav button{font:600 .9rem/1 var(--body);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:10px 16px;cursor:pointer}
.toast{position:fixed;left:50%;top:18px;transform:translate(-50%,-160%);z-index:60;background:var(--outline);color:#fff;border-radius:12px;padding:12px 16px;font-size:.88rem;max-width:calc(100% - 32px);transition:transform .35s ease}
.toast.show{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
.marquee{width:auto;flex-wrap:wrap;transform:none!important}
.marquee .dup{display:none}
}
/* =================== brand shell additions =================== */
:root{--sky:#DDF1F5;--pink:#F4B6C2}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--marigold);color:var(--on-marigold);padding:8px 14px;border-radius:8px;font-weight:600}
.skip:focus{left:12px}
.crumbs{font-size:.8rem;color:var(--ink-soft);padding-block:14px 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--line)}
.crumbs a{text-decoration:none;color:var(--ink-soft);display:inline-block;padding-block:7px;margin-block:-7px}.crumbs a:hover{color:var(--ink);text-decoration:underline}
.hero .crumbs,.hero .crumbs a{color:var(--night-soft)}
/* home hero */
.home-hero{background:linear-gradient(180deg,var(--sky) 0%,var(--ground) 100%);padding-block:clamp(36px,6vw,72px) clamp(40px,6vw,80px);overflow:hidden}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .home-hero{background:linear-gradient(180deg,#123A45 0%,var(--ground) 100%)}}
:root[data-theme="dark"] .home-hero{background:linear-gradient(180deg,#123A45 0%,var(--ground) 100%)}
.home-hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,5vw,56px);align-items:center}
.home-hero .wrap>*{min-width:0}
.home-hero h1{font-size:clamp(2.5rem,6vw,4.4rem);font-weight:800;line-height:1}
.home-hero h1 .hl{color:var(--coral)}
.home-hero .lead{margin-top:16px}
.home-hero .hindi{color:var(--ink-soft);font-size:1.08rem;margin-top:12px}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.trust span{font:600 .78rem/1 var(--body);background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:8px 12px 7px}
@media (max-width:860px){.home-hero .wrap{grid-template-columns:1fr}}
/* ===================================================================
THE HOME HERO: the product, not a mascot.
A phone with a real page open on it, two real pages standing behind,
on a warm lit stage. Nothing here moves: the job of this picture is
to answer "what exactly do I get" before anybody scrolls.
=================================================================== */
.hstage{width:100%;max-width:560px;margin:0 auto}
.hstage-in{position:relative;aspect-ratio:16/12.8;border-radius:24px;overflow:hidden;
background:
radial-gradient(120% 90% at 18% 6%, #FFFDF7 0%, rgba(255,253,247,0) 58%),
linear-gradient(168deg, #EDF3F0 0%, #E3EDEA 46%, #DCE9E6 100%);
border:1px solid var(--line);
box-shadow:0 1px 1px rgba(20,50,59,.04), 0 30px 60px -34px rgba(20,50,59,.45)}
.hlight{position:absolute;left:-6%;top:-18%;width:64%;aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle, rgba(255,241,204,.75) 0%, rgba(255,241,204,.18) 45%, rgba(255,241,204,0) 70%)}
/* a soft shelf so nothing floats: a faint horizon plus one contact shadow */
.hstage-in::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
background:linear-gradient(to top, rgba(20,50,59,.085) 0%, rgba(20,50,59,.055) 30%,
rgba(20,50,59,.028) 58%, rgba(20,50,59,.009) 80%, rgba(20,50,59,0) 100%)}
.hshelf{position:absolute;left:50%;bottom:4.6%;translate:-50% 0;width:56%;height:5%;
border-radius:50%;background:radial-gradient(closest-side, rgba(20,50,59,.30) 0%, rgba(20,50,59,0) 100%);
filter:blur(3px)}
/* ------------------------------------------------------------------
THREE PAGES YOU CAN PICK UP
Each of the three things on the stage is a real button. Clicking one
brings that page forward and enlarges it where it stands; the other
two do not budge, which is the point -- the arrangement stays
recognisable and only the page you asked for changes.
The chosen one is held in data-front on the stage, so one attribute
drives every rule below and the state is visible in the DOM.
------------------------------------------------------------------ */
.hpick{position:absolute;padding:0;margin:0;border:0;background:none;cursor:pointer;
transition:scale .42s cubic-bezier(.2,1.25,.35,1), rotate .42s ease, translate .42s ease,
filter .3s ease;
transform-origin:50% 92%}
.hpick:focus-visible{outline:3px solid var(--outline);outline-offset:4px;border-radius:8px}
/* the raised page says it can be put back down again */
.hstage-in[data-front="1"] .hpk1,.hstage-in[data-front="2"] .hpk2,
.hstage-in[data-front="3"] .hpk3{cursor:zoom-out}
.hpick.hpk1{left:8%;bottom:13.5%;width:30%;rotate:-7deg;z-index:1}
.hpick.hpk3{right:7.5%;bottom:15.5%;width:30%;rotate:6.5deg;z-index:1}
.hpick.hpk2{left:50%;bottom:6%;width:33%;translate:-50% 0;z-index:3;transform-origin:50% 100%}
/* the printed page itself fills its button */
.hpaper{display:block;width:100%;height:auto;border-radius:6px;background:#fff;
border:1px solid rgba(27,42,49,.14);
box-shadow:0 2px 3px rgba(20,50,59,.08), 0 18px 26px -14px rgba(20,50,59,.42)}
/* Whichever page was clicked: forward, bigger, straightened up a little.
Nothing else on the stage has a rule here, deliberately -- the other two
keep the exact size and place they started in, so the scene never
rearranges itself under you. Only one page is ever raised at a time. */
/* The chosen page comes to the middle of the stage and stands upright, the way
you would hold a sheet up to read it. The move is done with translate rather
than by changing left/right, because "auto" cannot be animated and the page
would jump instead of travelling. The numbers are percentages of the page's
own width, worked out so it lands centred and clear of all four edges. */
.hstage-in[data-front="1"] .hpk1{z-index:6;scale:1.5;rotate:0deg;translate:90% 8%}
.hstage-in[data-front="3"] .hpk3{z-index:6;scale:1.5;rotate:0deg;translate:-92% 8%}
.hstage-in[data-front="2"] .hpk2{z-index:6;scale:1.06}
.hstage-in[data-front="1"] .hpk1 .hpaper,
.hstage-in[data-front="3"] .hpk3 .hpaper{
box-shadow:0 4px 8px rgba(20,50,59,.14), 0 28px 44px -16px rgba(20,50,59,.5)}
.hstage-in[data-front="2"] .hphone{
box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),
0 4px 8px rgba(20,50,59,.24), 0 34px 52px -20px rgba(20,50,59,.62)}
@media (hover:hover){
.hpick:hover{filter:brightness(1.03) drop-shadow(0 10px 18px rgba(20,50,59,.22))}
}
/* ---- the nudge that says "these move" ----
Nobody clicks a picture that looks like a picture. So the three pages take
turns giving a little wiggle, one after another, until somebody touches one
-- at which point the invitation has done its job and stops for good.
It runs four times and then settles by itself, so it invites without
nagging, and it only starts once the stage has actually been scrolled into
view, so it is not already finished by the time anybody looks at it.
Each page needs its own keyframes because the wiggle has to carry that
page's resting angle: a shared one would snap all three upright first. */
@media (prefers-reduced-motion:no-preference){
.hstage-in.invite:not(.touched) .hpk1{animation:hWig1 7s ease-in-out 4 both}
.hstage-in.invite:not(.touched) .hpk2{animation:hWig2 7s ease-in-out 4 both}
.hstage-in.invite:not(.touched) .hpk3{animation:hWig3 7s ease-in-out 4 both}
}
@keyframes hWig1{
0%,6%{rotate:-7deg;translate:0 0;scale:1}
9%{rotate:-1.4deg;translate:0 -5%;scale:1.035}
12.5%{rotate:-12deg;translate:0 -1%;scale:1.02}
16%{rotate:-4.4deg;translate:0 -3%;scale:1.03}
19%{rotate:-8.4deg;translate:0 0;scale:1.01}
22%,100%{rotate:-7deg;translate:0 0;scale:1}
}
@keyframes hWig2{
0%,26%{rotate:0deg;translate:-50% 0;scale:1}
29%{rotate:3.4deg;translate:-50% -3.4%;scale:1.03}
32.5%{rotate:-3.4deg;translate:-50% -.8%;scale:1.02}
36%{rotate:2deg;translate:-50% -2%;scale:1.025}
39%{rotate:-1deg;translate:-50% 0;scale:1.01}
42%,100%{rotate:0deg;translate:-50% 0;scale:1}
}
/* This one leans away from the right-hand edge of the stage, so its swing is a
degree smaller than page 1's and it slides very slightly inwards as it tips.
Without that it clipped its own corner by a few pixels at the top of the
wiggle -- invisible in a still, obvious as a flicker in motion. */
@keyframes hWig3{
0%,46%{rotate:6.5deg;translate:0 0;scale:1}
49%{rotate:10.6deg;translate:-2% -5%;scale:1.03}
52.5%{rotate:1.6deg;translate:-.5% -1%;scale:1.02}
56%{rotate:8.6deg;translate:-1.5% -3%;scale:1.025}
59%{rotate:5deg;translate:0 0;scale:1.01}
62%,100%{rotate:6.5deg;translate:0 0;scale:1}
}
.hstage-hint{margin:0;position:absolute;left:50%;bottom:1.6%;translate:-50% 0;z-index:7;
font:600 .68rem/1 var(--body);color:var(--ink-soft);background:rgba(255,255,255,.86);
padding:5px 10px;border-radius:99px;white-space:nowrap;
transition:opacity .3s ease}
.hstage-in.touched .hstage-hint{opacity:0}
/* the phone, drawn in CSS so it stays crisp at every size */
.hphone{position:relative;width:100%;aspect-ratio:9/18.6;
background:#16242B;border-radius:13% / 6.3%;padding:3.4% 3.2%;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),
0 3px 6px rgba(20,50,59,.22), 0 26px 40px -18px rgba(20,50,59,.58)}
.hphone-bar{position:absolute;left:50%;top:2.4%;translate:-50% 0;width:24%;height:1.5%;
border-radius:99px;background:#2E4149}
.hphone-home{position:absolute;left:50%;bottom:1.6%;translate:-50% 0;width:32%;height:.9%;
border-radius:99px;background:rgba(255,255,255,.5)}
.hphone-scr{position:relative;height:100%;border-radius:10% / 5.4%;overflow:hidden;
background:#E7EAED}
.hphone-scr::before{content:"";position:absolute;inset:0 0 auto 0;height:7%;background:#F7F8F9;
border-bottom:1px solid rgba(27,42,49,.10);z-index:2}
/* ==================================================================
THE PHONE THAT FILLS ITSELF IN
The phone used to hold two small photographs of pages, which said
"this is a PDF" and nothing else -- flat as a newspaper cutting. The
thing worth showing is what the kit DOES, so the screen is a real
page built out of CSS: three jobs get ticked one at a time, tonight's
job types itself onto the line, and the brand's doodles pop out past
the phone's edge. Nobody has to read the caption to understand it.
Everything is sized in cqw -- 1% of the phone screen's own width --
so the page stays in proportion at every stage size.
Motion: one 9-second loop. Under prefers-reduced-motion the whole
thing simply sits in its finished state, ticked and filled in.
================================================================== */
.hphone-scr{container-type:inline-size}
.hkit{position:absolute;left:0;right:0;top:7%;bottom:0;z-index:1;
padding:6cqw 6cqw 0;background:#fff;
font:500 6.4cqw/1.28 var(--body);color:#1B2A31;text-align:left}
.hkit-pill{margin:0 0 4.4cqw;display:inline-block;padding:1.6cqw 3.4cqw;border-radius:99px;
background:#FBEFD9;color:#8A5B12;font:700 4.8cqw/1 var(--body);
letter-spacing:.04em;text-transform:uppercase}
.hkit-list{margin:0;padding:0;list-style:none;display:grid;gap:3.6cqw}
.hkit-list li{display:grid;grid-template-columns:9.4cqw minmax(0,1fr);gap:3cqw;align-items:start}
.hkit-box{position:relative;width:9.4cqw;height:9.4cqw;border-radius:1.6cqw;
border:.7cqw solid #6E7F86;background:#fff}
.hkit-box svg{position:absolute;inset:-1.4cqw;width:calc(100% + 2.8cqw);height:calc(100% + 2.8cqw)}
.hkit-box path{fill:none;stroke:#1F4E5A;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
/* the tick is drawn on, like a pen stroke: the line starts fully retracted */
stroke-dasharray:32;stroke-dashoffset:32}
.hkit-lab{margin:5.6cqw 0 1.4cqw;font:700 4.9cqw/1 var(--body);color:#1F4E5A}
.hkit-line{position:relative;margin:0;border-bottom:.6cqw solid #C9C1B2;min-height:8cqw}
.hkit-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;
max-width:0;font:500 6cqw/1.3 var(--body);color:#22333B;
border-right:.7cqw solid transparent}
.hkit-yay{position:absolute;right:6cqw;bottom:15cqw;padding:1.8cqw 3.4cqw;border-radius:99px;
background:#F2B138;color:#3A2A12;font:700 5cqw/1 var(--body);
box-shadow:0 .8cqw 2cqw rgba(20,50,59,.22);opacity:0;scale:.4}
.hkit-foot{position:absolute;left:6cqw;right:6cqw;bottom:4.5cqw;margin:0;
font:italic 500 4.9cqw/1.25 var(--quote);color:#C9502F}
/* the quiet line that makes the point the caption cannot: the answers stay */
.hkit-saved{display:flex;align-items:center;gap:2cqw;margin:5cqw 0 0;
font:600 4.7cqw/1 var(--body);color:#2E7D5B;opacity:0}
.hkit-savetick{width:5.4cqw;height:5.4cqw;flex:none}
.hkit-savetick svg{width:100%;height:100%}
.hkit-savetick path{fill:none;stroke:#2E7D5B;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.hkit-doodle{display:block;width:34%;height:auto;margin:4cqw auto 0}
/* the doodles sit on the phone, not in the screen, so they fly out past its edge */
.hpop{position:absolute;width:26%;z-index:4;opacity:0;pointer-events:none}
.hpop img{display:block;width:100%;height:auto}
.hpop1{left:-14%;top:26%}
.hpop2{right:-15%;top:39%}
.hpop3{left:-12%;top:52%}
.hpop4{right:-13%;top:66%}
@media (prefers-reduced-motion:no-preference){
/* Five separate keyframes rather than one with five delays, which is the
obvious way and the wrong one: a delay shifts the whole nine seconds, so
each row would also UN-tick at its own moment and the page would erase
itself raggedly, one row at a time, halfway through the next round. These
tick at 0.4s apart and all clear together at 8.3s. */
.hkit-list li:nth-child(1) path{animation:hTick1 9s ease-out infinite both}
.hkit-list li:nth-child(2) path{animation:hTick2 9s ease-out infinite both}
.hkit-list li:nth-child(3) path{animation:hTick3 9s ease-out infinite both}
.hkit-list li:nth-child(4) path{animation:hTick4 9s ease-out infinite both}
.hkit-list li:nth-child(5) path{animation:hTick5 9s ease-out infinite both}
.hkit-type{animation:hType 9s steps(11,end) infinite both, hCaret .7s step-end 11 4.4s both}
.hkit-yay{animation:hYay 9s cubic-bezier(.2,1.5,.4,1) infinite both}
.hkit-saved{animation:hSaved 9s ease-out infinite both}
.hkit-doodle{animation:hBob 3.4s ease-in-out infinite}
.hpop{animation:hPop 9s ease-out infinite both}
.hpop1{animation-delay:.9s}
.hpop2{animation-delay:2.2s}
.hpop3{animation-delay:3.5s}
.hpop4{animation-delay:5.6s}
/* the two paper pages on the shelf breathe, very slightly */
.hpk1 .hpaper{animation:hSway1 7s ease-in-out infinite}
.hpk3 .hpaper{animation:hSway2 8s ease-in-out infinite}
}
/* drawn on quickly, then held for most of the loop, then cleared for the replay */
@keyframes hTick1{0%,4%{stroke-dashoffset:32}8%,88%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:32}}
@keyframes hTick2{0%,13%{stroke-dashoffset:32}17%,88%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:32}}
@keyframes hTick3{0%,22%{stroke-dashoffset:32}26%,88%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:32}}
@keyframes hTick4{0%,31%{stroke-dashoffset:32}35%,88%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:32}}
@keyframes hTick5{0%,40%{stroke-dashoffset:32}44%,88%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:32}}
@keyframes hType{
0%,48%{max-width:0}
66%{max-width:46cqw}
88%{max-width:46cqw}
90%,100%{max-width:0}
}
@keyframes hCaret{50%{border-right-color:#C9502F}}
@keyframes hYay{
0%,70%{opacity:0;scale:.4;rotate:-12deg}
76%{opacity:1;scale:1;rotate:-4deg}
86%{opacity:1;scale:1;rotate:-4deg}
90%,100%{opacity:0;scale:.6;rotate:-12deg}
}
/* out of the phone, up and away, turning as it goes */
@keyframes hPop{
0%{opacity:0;translate:0 0;scale:.3;rotate:0deg}
4%{opacity:1;scale:1.08}
9%{scale:.96}
20%{opacity:.85;translate:-8% -70%;rotate:-16deg;scale:.9}
28%{opacity:0;translate:-12% -105%;rotate:-22deg;scale:.8}
29%,100%{opacity:0;translate:0 0;scale:.3;rotate:0deg}
}
@keyframes hSaved{0%,68%{opacity:0}74%,88%{opacity:1}92%,100%{opacity:0}}
@keyframes hBob{0%,100%{translate:0 0;rotate:-4deg}50%{translate:0 -6%;rotate:4deg}}
@keyframes hSway1{0%,100%{rotate:0deg}50%{rotate:1.5deg}}
@keyframes hSway2{0%,100%{rotate:0deg}50%{rotate:-1.4deg}}
/* the finished state, for anybody who has asked their device to stop animating */
@media (prefers-reduced-motion:reduce){
.hkit-box path{stroke-dashoffset:0}
.hkit-type{max-width:46cqw}
.hkit-saved{opacity:1}
}
/* two small honest labels */
.hchip{position:absolute;font:600 .72rem/1 var(--body);color:var(--ink);
background:color-mix(in srgb,var(--surface) 92%,transparent);
border:1px solid var(--line);border-radius:999px;padding:7px 11px 6px;
box-shadow:0 1px 2px rgba(20,50,59,.06), 0 8px 16px -10px rgba(20,50,59,.4);
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hchip.hc1{left:4%;top:10%}
.hchip.hc2{right:4.5%;bottom:8%}
/* below the stage, the same two facts as plain pills — used where the stage is
too narrow for floating labels to sit clear of the pages */
.hfacts{display:none;margin:12px 0 0;padding:0;list-style:none;
justify-content:center;gap:8px;flex-wrap:wrap}
.hfacts li{font:600 .72rem/1 var(--body);color:var(--ink);background:var(--surface);
border:1px solid var(--line);border-radius:999px;padding:7px 11px 6px}
.hstage-cap{margin-top:14px;font:400 .84rem/1.5 var(--body);color:var(--ink-soft);text-align:center;
max-width:44ch;margin-inline:auto}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .hstage-in{
background:radial-gradient(120% 90% at 18% 6%, #21414A 0%, rgba(33,65,74,0) 58%),
linear-gradient(168deg,#173038 0%,#12262C 100%)}
:root:not([data-theme="light"]) .hlight{background:radial-gradient(circle, rgba(255,224,138,.22) 0%, rgba(255,224,138,0) 70%)}
:root:not([data-theme="light"]) .hpaper{border-color:rgba(255,255,255,.14)}
:root:not([data-theme="light"]) .hstage-in::before{
background:linear-gradient(to top, rgba(0,0,0,.30) 0%, rgba(0,0,0,.19) 30%,
rgba(0,0,0,.095) 58%, rgba(0,0,0,.03) 80%, rgba(0,0,0,0) 100%)}
:root:not([data-theme="light"]) .hshelf{
background:radial-gradient(closest-side, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%)}
}
:root[data-theme="dark"] .hstage-in{
background:radial-gradient(120% 90% at 18% 6%, #21414A 0%, rgba(33,65,74,0) 58%),
linear-gradient(168deg,#173038 0%,#12262C 100%)}
:root[data-theme="dark"] .hlight{background:radial-gradient(circle, rgba(255,224,138,.22) 0%, rgba(255,224,138,0) 70%)}
:root[data-theme="dark"] .hpaper{border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .hstage-in::before{
background:linear-gradient(to top, rgba(0,0,0,.30) 0%, rgba(0,0,0,.19) 30%,
rgba(0,0,0,.095) 58%, rgba(0,0,0,.03) 80%, rgba(0,0,0,0) 100%)}
:root[data-theme="dark"] .hshelf{
background:radial-gradient(closest-side, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%)}
@media (max-width:860px){.hstage{max-width:460px}}
@media (max-width:620px){
.hchip{display:none}
.hfacts{display:flex}
.hstage-cap{font-size:.8rem}
}
/* ticker */
.ticker{background:var(--marigold);color:var(--on-marigold);border-block:2px solid var(--outline);overflow:hidden;padding-block:12px}
.ticker .row{display:flex;gap:28px;width:max-content;animation:slide 38s linear infinite;font:700 1.02rem/1 var(--display);white-space:nowrap}
.ticker .row span::after{content:"✦";margin-left:28px}
/* feature product */
.feature{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,56px);align-items:center;background:var(--surface);border:2px solid var(--outline);border-radius:28px;padding:clamp(20px,4vw,44px);box-shadow:6px 8px 0 var(--outline)}
.feature>*{min-width:0}
.feature .cover-wrap{max-width:300px}
.feature h3{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:800}
.feature .desc{color:var(--ink-soft);margin-top:10px;max-width:58ch}
.feature .row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:22px}
.price-tag{font:800 2rem/1 var(--display);font-variant-numeric:tabular-nums}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
@media (max-width:760px){.feature{grid-template-columns:1fr}}
/* how it works */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;padding:0;margin:0;counter-reset:h}
.how li{counter-increment:h;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px}
.how li::before{content:counter(h);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--mint);border:2px solid var(--outline);font:800 1.2rem/1 var(--display);margin-bottom:14px;color:var(--outline)}
.how b{display:block;font:700 1.25rem/1.2 var(--display)}
.how p{color:var(--ink-soft);font-size:.94rem;margin-top:6px}
@media (max-width:760px){.how{grid-template-columns:1fr}}
/* values */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.values div{border-top:3px solid var(--marigold);padding-top:14px}
.values div:nth-child(2){border-color:var(--coral)}.values div:nth-child(3){border-color:var(--mint)}.values div:nth-child(4){border-color:#8FC9E8}
.values b{font:700 1.15rem/1.2 var(--display);display:block}
.values p{color:var(--ink-soft);font-size:.92rem;margin-top:6px}
@media (max-width:860px){.values{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.values{grid-template-columns:1fr}}
/* ==================================================================
"NO PRINTER? YOU DON'T NEED ONE."
The kits became fillable, and that quietly removes the objection that
used to cost the most sales: plenty of Indian homes have no printer,
and a kit full of printables reads as useless without one. So it gets
its own band on the home page rather than a line in the FAQ.
The four icons are drawn in CSS -- a finger tapping, a page saving, a
pen, a highlighter -- so no image has to load for the section to make
sense, and they inherit the brand colours from the token block.
================================================================== */
.bothways{background:var(--surface-2)}
.bw-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:26px}
.bw{background:var(--surface);border:1.5px solid var(--line);border-radius:20px;padding:20px}
.bw b{display:block;font:700 1.12rem/1.24 var(--display);margin-top:12px}
.bw p{color:var(--ink-soft);font-size:.92rem;margin-top:6px}
.bw-ico{position:relative;display:block;width:44px;height:44px;border-radius:13px;
border:2px solid var(--outline);background:var(--marigold)}
.bw:nth-child(2) .bw-ico{background:var(--mint)}
.bw:nth-child(3) .bw-ico{background:#F7E1DA}
.bw:nth-child(4) .bw-ico{background:#CDE8F4}
.bw-ico::before,.bw-ico::after{content:"";position:absolute;background:var(--outline)}
/* a fingertip pressing a tick box */
.bw-tap::before{left:8px;top:8px;width:17px;height:17px;border-radius:4px;background:transparent;
border:2.4px solid var(--outline)}
.bw-tap::after{left:19px;top:19px;width:13px;height:13px;border-radius:50% 50% 50% 2px;
background:var(--outline)}
/* a phone, with what you typed kept safely inside it */
.bw-save::before{left:12px;top:5px;width:16px;height:30px;border-radius:4px;background:transparent;
border:2.4px solid var(--outline)}
.bw-save::after{left:15px;top:17px;width:10px;height:5px;background:transparent;
border-left:2.4px solid var(--outline);border-bottom:2.4px solid var(--outline);
rotate:-45deg;border-radius:0 0 0 1px}
/* a sheet of paper with its corner turned down */
.bw-pen::before{left:10px;top:5px;width:20px;height:30px;border-radius:2px;background:var(--surface);
border:2.4px solid var(--outline)}
.bw-pen::after{right:8px;top:5px;width:9px;height:9px;background:var(--marigold);
border-left:2.4px solid var(--outline);border-bottom:2.4px solid var(--outline)}
/* a highlighter stroke across a line of text */
.bw-mark::before{left:7px;top:14px;width:30px;height:9px;border-radius:2px;background:var(--marigold);
box-shadow:0 0 0 2px var(--outline)}
.bw-mark::after{left:7px;top:28px;width:22px;height:3px;border-radius:2px;background:var(--outline)}
.bw-note{margin-top:20px;font-size:.88rem;color:var(--ink-soft);max-width:80ch}
@media (max-width:980px){.bw-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.bw-grid{grid-template-columns:1fr}}
/* cards: shop + journal */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.pcard{display:flex;flex-direction:column;background:var(--surface);border:1.5px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.pcard:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:var(--shadow)}
.pcard .thumb{background:var(--surface-2);padding:22px 22px 0;display:flex;justify-content:center;aspect-ratio:4/3.4;overflow:hidden}
.pcard .thumb img{width:68%;border-radius:4px 4px 0 0;box-shadow:0 10px 24px rgba(20,50,59,.2);align-self:flex-end}
.pcard .body{padding:18px 20px 20px;display:grid;gap:8px}
.pcard .cat{font:600 .7rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
.pcard h3{font-size:1.3rem}
.pcard h3 a{text-decoration:none}
.pcard h3 a::after{content:"";position:absolute;inset:0}
.pcard{position:relative}
.pcard .meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.pcard .meta b{font:800 1.3rem/1 var(--display)}
.pcard .meta > span{font-size:.8rem;color:var(--ink-soft)}
.jcard{display:grid;gap:10px;background:var(--surface);border:1.5px solid var(--line);border-radius:20px;padding:22px;position:relative;transition:transform .2s ease}
.jcard:hover{transform:translateY(-3px)}
.jcard h3{font-size:1.25rem;line-height:1.2}
.jcard h3 a{text-decoration:none}.jcard h3 a::after{content:"";position:absolute;inset:0}
.jcard p{color:var(--ink-soft);font-size:.92rem}
.jcard .lang{font:600 .7rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
/* the shop's filter bar: categories on the left, sorting on the right */
.shopbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:14px 20px;padding-bottom:16px;border-bottom:1.5px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{display:inline-flex;align-items:center;gap:7px;font:600 .85rem/1 var(--body);
border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
border-radius:999px;padding:9px 12px 9px 14px;cursor:pointer;
transition:border-color .15s ease,background .15s ease}
.chips button:hover{border-color:var(--outline)}
.chips button:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
/* how many products are in each category, so nobody taps into a thin one */
.chips .cn{font:700 .72rem/1 var(--body);min-width:1.35em;padding:3px 5px 2px;text-align:center;
border-radius:999px;background:var(--line);color:var(--ink)}
.chips button[aria-pressed="true"] .cn{background:rgba(255,255,255,.22);color:var(--ground)}
.sortbox{display:flex;align-items:center;gap:9px;margin-left:auto}
.sortbox label{font:600 .84rem/1 var(--body);color:var(--ink-soft);white-space:nowrap}
.sortbox select{font:600 .87rem/1.2 var(--body);color:var(--ink);background:var(--surface);
border:1.5px solid var(--line);border-radius:999px;padding:10px 34px 10px 14px;cursor:pointer;
appearance:none;-webkit-appearance:none;
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.sortbox select:hover{border-color:var(--outline)}
.sortbox select:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.shopcount{margin:14px 0 20px;font:500 .9rem/1.4 var(--body);color:var(--ink-soft)}
@media (max-width:560px){
.shopbar{flex-direction:column;align-items:stretch}
.sortbox{margin-left:0}
.sortbox select{flex:1 1 auto;min-width:0}
}
.page-head{padding-block:clamp(36px,6vw,64px) 8px}
.page-head h1{font-size:clamp(2.3rem,5.4vw,3.6rem);font-weight:800}
.page-head .lead{margin-top:12px}
.soon{margin-top:26px;color:var(--ink-soft);font-size:.95rem}
/* article */
.prose{max-width:720px;margin-inline:auto;padding-block:clamp(28px,5vw,56px) clamp(56px,8vw,96px)}
.prose h1{font-size:clamp(2.1rem,5vw,3.2rem);font-weight:800;margin-top:10px}
.prose .standfirst{font-size:1.14rem;color:var(--ink-soft);margin-top:14px}
.prose .byline{font-size:.82rem;color:var(--ink-soft);margin-top:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.prose h2{font-size:clamp(1.5rem,3vw,1.95rem);margin-top:40px;margin-bottom:10px}
.prose h3{font-size:1.2rem;margin-top:24px;margin-bottom:6px}
.prose p,.prose li{font-size:1.02rem;line-height:1.75}
.prose p+p{margin-top:14px}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:8px;margin:12px 0}
.prose .tbl{overflow-x:auto;margin:16px 0}
.prose table{border-collapse:collapse;width:100%;min-width:520px;font-size:.93rem}
.prose th,.prose td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font:600 .74rem/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);border-bottom:2px solid var(--ink)}
.prose .box{background:var(--surface);border:2px solid var(--outline);border-radius:20px;padding:20px 22px;margin:28px 0;box-shadow:4px 5px 0 var(--outline)}
.prose .box h3{margin-top:0}
.prose .src{font-size:.85rem;color:var(--ink-soft)}
.prose .src li{font-size:.85rem;line-height:1.5}
.prose .src a{word-break:break-word}
.prose[lang="hi"] p,.prose[lang="hi"] li{font-size:1.06rem;line-height:1.85}
.cta-box{display:grid;grid-template-columns:90px 1fr;gap:18px;align-items:center}
.cta-box>*{min-width:0}
.cta-box .btn{white-space:normal;text-align:center}
@media (max-width:520px){.cta-box{grid-template-columns:1fr;justify-items:start}.cta-box img{max-width:90px}}
.cta-box img{border-radius:4px;box-shadow:var(--shadow)}
.cta-box .btn{margin-top:12px}
.note-med{font-size:.85rem;color:var(--ink-soft);border-left:3px solid var(--line);padding-left:12px;margin-top:22px}
/* screen time table on product page */
.agegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.agegrid div{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:18px}
.agegrid b{display:block;font:800 1.5rem/1 var(--display)}
.agegrid span{display:block;font:600 .72rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--coral);margin-bottom:10px}
.agegrid p{font-size:.9rem;color:var(--ink-soft);margin-top:8px}
@media (max-width:860px){.agegrid{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.agegrid{grid-template-columns:1fr}}
.hi-block{background:var(--surface);border-radius:22px;border:1.5px solid var(--line);padding:clamp(20px,4vw,34px)}
.hi-block h2{font-size:clamp(1.6rem,3.4vw,2.2rem)}
.hi-block p{margin-top:12px;font-size:1.05rem;line-height:1.85;color:var(--ink-soft);max-width:70ch}
.hero-line{font:800 clamp(2.6rem,6.4vw,4.7rem)/1.06 var(--display);margin-top:12px;margin-bottom:.26em;text-wrap:balance;letter-spacing:-.01em}
.hero-line em{font-style:normal;color:var(--marigold)}
.hero h1.kicker{font:700 clamp(1rem,1.6vw,1.15rem)/1.35 var(--body);letter-spacing:0;color:var(--marigold);margin-top:10px}
/* footer extended */
footer .wrap{grid-template-columns:1.3fr 1fr 1fr}
footer h2{font:700 .8rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--night-ink);margin-bottom:12px}
footer .col{display:grid;gap:2px;align-content:start}
footer .col a{color:var(--night-soft);text-decoration:none;display:inline-flex;align-items:center;min-height:38px}
footer .col a:hover{color:var(--night-ink);text-decoration:underline}
.social{display:flex;gap:14px;margin-top:14px}
.social a{color:var(--night-ink)}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr 1fr}footer .wrap>div:first-child{grid-column:1/-1}}
.policy-main{max-width:760px;margin:clamp(24px,5vw,48px) auto clamp(56px,8vw,96px);background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(20px,5vw,44px)}
.policy-main h1{font-size:clamp(2rem,4.6vw,2.8rem);font-weight:800;margin-bottom:6px}
.policy-main h2{font-size:1.25rem;margin-top:24px;margin-bottom:6px}
.policy-main h3{font-size:1.05rem;margin-top:18px;margin-bottom:4px}
.policy-main #legal{scroll-margin-top:150px}
.js-phone{white-space:nowrap}
.policy-main p,.policy-main li{color:var(--ink-soft)}
.policy-main ul{padding-left:20px;display:grid;gap:6px}
.policy-main p+p{margin-top:10px}
.prose .crumbs ol{display:flex;padding:0;margin:0;gap:6px}
.prose .crumbs li{font-size:.8rem;line-height:1.4}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;font:600 calc(.9rem / var(--text-scale))/1 var(--body);border:1.5px solid var(--line);border-radius:999px;padding:10px 14px}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] summary{background:var(--ink);color:var(--ground)}
.mnav div{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);color:var(--ink);border:2px solid var(--outline);border-radius:16px;box-shadow:4px 5px 0 var(--outline);padding:8px;display:grid;min-width:180px;z-index:40}
.mnav div a{display:block!important;padding:11px 12px;border-radius:10px;text-decoration:none;color:var(--ink)!important;font:600 calc(.95rem / var(--text-scale))/1 var(--body)}
.mnav div a:hover{background:var(--surface-2)}
.dark-nav .mnav summary{border-color:rgba(255,255,255,.25);color:var(--night-ink)}
@media (max-width:760px){.mnav{display:block}}
@media (max-width:400px){.nav .wrap{gap:8px}.nav .btn{padding:9px 12px 7px;font-size:calc(.88rem / var(--text-scale))}.brand{font-size:1.05rem}.brand img{width:32px}}
/* combo */
.combo{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,56px);align-items:center;background:var(--marigold-soft);border:2px solid var(--outline);border-radius:28px;padding:clamp(22px,4vw,44px);box-shadow:6px 8px 0 var(--outline)}
.combo>*{min-width:0}
.combo-art{position:relative;display:flex;justify-content:center;align-items:flex-start;
max-width:340px;width:100%;margin-inline:auto;padding:12px 10px 20px}
.combo-art img{position:static;width:47%;height:auto;border-radius:6px;box-shadow:0 14px 30px rgba(20,50,59,.25);
border:1px solid var(--line);transition:transform .3s ease}
.combo-art .c1{transform:rotate(-6deg);margin-right:-3%;z-index:1}
.combo-art .c2{transform:rotate(5deg);margin-left:-3%;margin-top:24px}
.combo:hover .c1{transform:rotate(-9deg) translateX(-7px)}.combo:hover .c2{transform:rotate(8deg) translateX(7px)}
.combo-art .plus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--coral);color:#fff;border:2px solid var(--outline);display:grid;place-items:center;font:800 1.9rem/1 var(--display);box-shadow:3px 4px 0 var(--outline);z-index:2}
.combo-price{margin-top:16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.combo-price b{font:800 2.4rem/1 var(--display)}
.combo-price .was{color:var(--ink-soft);font-size:.9rem}
@media (max-width:760px){.combo{grid-template-columns:1fr}}
/* pack page */
/* This hero used to be one flat slab of saturated marigold edge to edge, which
is why it read as unfinished next to the other three: the Reset page has a
deep night gradient, the combo a cream-to-gold one, the safety walk a soft
clay. Worse, the Play Cards cover is ITSELF marigold, so the product sat
yellow-on-yellow with nothing to separate it.
Same yellow, given depth: a warm cream halo behind the fan so the cover has
something to sit against, and a gentle gradient so the band is lit rather
than printed flat. */
.pack-hero{
background:
radial-gradient(74% 66% at 76% 30%, #FFF4DA 0%, rgba(255,244,218,.62) 38%, rgba(255,244,218,0) 72%),
linear-gradient(168deg,#FAD57F 0%,#F7C35A 54%,#EFB33E 100%);
color:#1B2A31;padding-block:clamp(36px,6vw,72px) clamp(44px,6vw,80px);overflow:hidden}
.pack-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,56px);align-items:center}
.pack-hero .wrap>*{min-width:0}
.pack-hero .crumbs,.pack-hero .crumbs a{color:#5A4413}
.pack-hero h1.kicker{font:700 clamp(1rem,1.6vw,1.15rem)/1.35 var(--body);color:#7A3E12;margin-top:10px}
.pack-hero .hero-line em{color:#C9502F}
.pack-hero .lead{color:#3A2A12;margin-top:14px}
.pack-hero .hindi{color:#5A4413;font-size:1.08rem}
.pack-hero .btn-ghost{color:#1B2A31}
.pack-hero .trust span{background:#FFF6DE;border-color:#E3A13B;color:#1B2A31}
.fan{position:relative;height:clamp(300px,42vw,440px);max-width:430px;width:100%;margin-inline:auto}
.fan img{position:absolute;left:50%;top:50%;width:56%;border-radius:6px;border:2px solid #1B2A31;box-shadow:5px 7px 0 #1B2A31;transform-origin:50% 90%;animation:fanout 1s cubic-bezier(.3,1.3,.5,1) both}
.fan .f1{transform:translate(-50%,-50%) rotate(-2deg);z-index:3}
.fan .f2{transform:translate(-18%,-50%) rotate(9deg);z-index:2;animation-delay:.15s}
.fan .f3{transform:translate(-82%,-50%) rotate(-12deg);z-index:1;animation-delay:.3s}
@keyframes fanout{from{translate:0 12px;opacity:.4}to{translate:0 0;opacity:1}}
.fan:hover .f2{transform:translate(-8%,-52%) rotate(14deg)}.fan:hover .f3{transform:translate(-92%,-52%) rotate(-17deg)}
.fan img{transition:transform .35s ease}
@media (max-width:860px){.pack-hero .wrap{grid-template-columns:1fr}}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ways>div{background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:20px;display:grid;gap:8px;align-content:start}
.ways img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;border-radius:12px;border:1px solid var(--line);margin-bottom:8px}
.ways b{font:700 1.25rem/1.2 var(--display)}
.ways p{color:var(--ink-soft);font-size:.93rem}
@media (max-width:760px){.ways{grid-template-columns:1fr}}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.game{display:grid;grid-template-columns:14px 1fr;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.game .dot{width:12px;height:12px;border-radius:50%;margin-top:6px;border:0}
.game b{display:block;font:700 1.08rem/1.2 var(--display)}
.game i{display:block;font-size:.84rem;color:var(--coral);margin-top:2px}
.game small{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:4px}
/* thank-you page */
.ty{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFF0C9 0%,var(--ground) 60%)}
.toran{height:clamp(56px,8vw,90px);background:url("toran.webp") repeat-x top left/auto 100%}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;animation:fall 3.2s var(--d) cubic-bezier(.3,.6,.4,1) both}
@keyframes fall{0%{transform:translate(0,-10vh) rotate(0)}100%{transform:translate(var(--x),110vh) rotate(var(--r));opacity:.9}}
.ty-wrap{position:relative;text-align:center;padding-block:clamp(20px,4vw,40px) clamp(56px,8vw,96px)}
.ty h1{font-size:clamp(2.6rem,7vw,4.6rem);font-weight:800;margin-top:10px;color:var(--ink)}
.ty h1 span{display:block;font-size:.42em;color:var(--coral);margin-top:10px}
.ty-langs{font:600 .95rem/1.4 var(--body);color:var(--ink-soft);margin-top:10px}
.ty-art{width:min(620px,100%);margin:26px auto 0;border-radius:24px;border:2px solid var(--outline);box-shadow:6px 8px 0 var(--outline)}
.ty-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px;text-align:left}
.ty-card{background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:24px}
.ty-card h2{font-size:1.5rem;margin-bottom:14px}
.ty-card p{color:var(--ink-soft)}
.ty-sign{font:italic 500 1.2rem/1.4 var(--quote);color:var(--coral);margin-top:34px}
@media (max-width:760px){.ty-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}.fan img{animation:none}}
.mnav{background:none!important;border:0!important;padding:0!important;border-radius:0}
.mnav summary{background:var(--surface);color:var(--ink)}
.mnav summary::after{content:none!important}
.dark-nav .mnav summary{background:transparent;color:var(--night-ink)}
/* =============== easy-to-use kit: help bar, big buttons, text size =============== */
.helpbar{background:var(--surface-2);color:var(--ink);font-size:calc(.85rem / var(--text-scale));border-bottom:1px solid var(--line)}
.helpbar .wrap{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:flex-end;padding-block:8px}
.helpbar span{margin-right:auto;color:var(--ink-soft)}
.helpbar a{font-weight:600;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:38px;padding-inline:2px}
.helpbar .wa{color:#128C4B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .helpbar .wa{color:#7BD8A4}}
:root[data-theme="dark"] .helpbar .wa{color:#7BD8A4}
.btn{min-height:52px;font-size:1.08rem}
.nav .btn{min-height:46px}
.btn-ghost{min-height:44px;display:inline-flex;align-items:center}
.textsize{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;min-width:46px;min-height:42px;font:700 calc(1rem / var(--text-scale))/1 var(--body);cursor:pointer}
.textsize sup{font-size:.7em}
.textsize[aria-pressed="true"]{background:var(--marigold);border-color:var(--outline);color:var(--on-marigold)}
.dark-nav .textsize{background:transparent;color:var(--night-ink);border-color:rgba(255,255,255,.3)}
.reassure{margin-top:14px;font-size:.88rem;color:var(--ink-soft)}
.totop{position:fixed;right:16px;bottom:20px;z-index:45;width:52px;height:52px;border-radius:50%;border:2px solid var(--outline);background:var(--surface);color:var(--ink);font:700 1.4rem/1 var(--body);cursor:pointer;box-shadow:3px 4px 0 var(--outline)}
.totop[hidden]{display:none}
.wafloat{position:fixed;left:16px;bottom:20px;z-index:45;display:inline-flex;align-items:center;gap:8px;background:#0F7A41;color:#fff;border:2px solid var(--outline);border-radius:999px;padding:13px 18px 12px;font:700 1rem/1 var(--display);text-decoration:none;box-shadow:3px 4px 0 var(--outline)}
.wafloat[hidden]{display:none}
.wafloat::before{content:"";width:22px;height:22px;flex:0 0 22px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12%202.6c-5.2%200-9.4%203.7-9.4%208.3%200%202.5%201.3%204.8%203.3%206.3-.2%201.3-.9%202.6-1.9%203.6%201.7-.2%203.4-.8%204.8-1.8%201%20.3%202.1.4%203.2.4%205.2%200%209.4-3.7%209.4-8.5S17.2%202.6%2012%202.6z%22%2F%3E%3Ccircle%20cx%3D%228.2%22%20cy%3D%2210.9%22%20r%3D%221.25%22%20fill%3D%22%230F7A41%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210.9%22%20r%3D%221.25%22%20fill%3D%22%230F7A41%22%2F%3E%3Ccircle%20cx%3D%2215.8%22%20cy%3D%2210.9%22%20r%3D%221.25%22%20fill%3D%22%230F7A41%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
@media (max-width:520px){.wafloat{padding:12px 15px 11px;font-size:.88rem}}
.has-sticky .totop,.has-sticky .wafloat{bottom:calc(var(--stickyh,64px) + 24px)}
/* =============== swipeable, zoomable preview gallery =============== */
.gal{position:relative;--gh:300px}
.gtrack{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:18px;background:var(--surface-2);overscroll-behavior-x:contain}
.gtrack::-webkit-scrollbar{display:none}
.gslide{scroll-snap-align:center;border:0;background:none;padding:14px 10px;cursor:zoom-in;display:grid;place-items:center}
.gslide img{height:var(--gh);width:auto;max-width:100%;border-radius:8px;border:1px solid var(--line);box-shadow:0 10px 26px rgba(20,50,59,.18);background:#fff}
.gal-card{--gh:230px}
.gal-feature{--gh:330px}
/* The preview stage on a product page was as wide as the text column -- about
1100px -- while the page inside it is a portrait sheet roughly 330px across.
Two thirds of it was empty mint, and the arrows sat marooned at the far edges,
far enough from the picture to read as page furniture rather than as its
controls. Since clicking the picture opens the zoom viewer rather than turning
the page, the whole thing felt like it did not move at all. Hugging the stage
to the sheet -- which is exactly what the home page does -- puts the arrows
back beside the thing they move. */
.gal-full{--gh:clamp(300px,44vw,470px);max-width:min(100%,470px);margin-inline:auto}
.garrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:2px solid var(--outline);background:var(--surface);color:var(--ink);font:700 1.6rem/1 var(--body);cursor:pointer;display:grid;place-items:center;box-shadow:2px 3px 0 var(--outline);z-index:2}
.garrow.prev{left:6px}.garrow.next{right:6px}
.garrow:disabled{opacity:.35;cursor:default;box-shadow:none}
.gcount{position:absolute;top:10px;right:12px;z-index:2;background:var(--outline);color:#fff;border-radius:999px;padding:5px 10px 4px;font:600 .78rem/1 var(--body);font-variant-numeric:tabular-nums}
.gdots{display:flex;justify-content:center;gap:0;margin-top:6px;flex-wrap:wrap}
.gdot{width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.gdot::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);transition:transform .25s cubic-bezier(.3,1.6,.4,1),background .2s ease}
.gdot[aria-current="true"]::before{background:var(--coral);border-color:var(--outline);transform:scale(1.3)}
.ghint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font-size:.85rem;color:var(--ink-soft)}
.gzoom-ico{width:15px;height:15px;border:2px solid currentColor;border-radius:50%;position:relative;display:inline-block}
.gzoom-ico::after{content:"";position:absolute;right:-5px;bottom:-5px;width:7px;height:2px;background:currentColor;transform:rotate(45deg)}
@media (max-width:520px){.garrow{display:none}.gal{--gh:260px}.gal-card{--gh:210px}}
/* =============== full-screen zoom viewer =============== */
.viewer{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;border:0;border-radius:0;padding:0;background:#0E252C;color:#F6F2E7;box-shadow:none;display:flex;flex-direction:column}
.viewer::backdrop{background:#0E252C}
.viewer[open]{animation:none}
/* a closed