@font-face{font-family:Fredoka;font-weight:300 700;font-display:swap;src:url(/fonts/fredoka-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:Fredoka;font-weight:300 700;font-display:swap;src:url(/fonts/fredoka-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-weight:100 900;font-display:swap;src:url(/fonts/hanken-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-weight:100 900;font-display:swap;src:url(/fonts/hanken-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}

/* Wizbinder palette — mirrors lib/theme.ts */
:root{
  --white:#fff; --bg:#F7F5F3; --cream:#FAF6F1; --sand:#EDE7E0;
  --primary:#E26F6F; --primaryDeep:#EF6161; --secondary:#2A6BF3;
  --accent:#fad346; --logoPrimary:#ff5454; --logoSecondary:#ffdab5;
  --ink:#232126; --ink2:#4D4C52; --muted:#6B6478; --faint:#B8B0C2;
  --success:#6DD4C0; --successText:#1F8A6B;
  --shadow:0 2px 16px rgba(42,36,56,.10);
  --shadowLg:0 18px 50px rgba(42,36,56,.14);
  --r:28px;
  --display:Fredoka,ui-rounded,system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;margin:0;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1168px;margin:0 auto;padding:0 24px}
/* Grid tracks size to their content's min-width unless told otherwise —
   without this a 1600px-wide <img> blows the 1fr column past the viewport. */
.steps>*,.cards>*,.feat>*,.price>*,.media>*,nav>*,.foot>*{min-width:0}

/* Screenshot slots. A missing file renders as a labelled dashed box —
   that IS the placeholder, no JS. Drop the PNG in and it just appears. */
.shot{
  width:100%;max-width:100%;height:auto;border-radius:16px;
  border:1px solid var(--borderCool);box-shadow:var(--shadowLg);
  background:var(--sand);font:500 14px/1.5 var(--body);color:var(--muted);
}
.shot.phone{max-width:280px;border-radius:26px}
.shot.tablet{border-radius:18px}

/* ---- nav ---- */
header{position:sticky;top:0;z-index:20;background:rgba(247,245,243,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.05)}
nav{display:flex;align-items:center;gap:28px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:21px;font-weight:600;text-decoration:none}
.tile{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--logoSecondary),var(--logoPrimary));display:grid;place-items:center;flex:none}
nav .links{display:flex;gap:22px;margin-left:auto;font-size:15px}
nav .links a{text-decoration:none;color:var(--ink2)}
nav .links a:hover{color:var(--ink)}
@media(max-width:760px){nav .links{display:none}}

.btn{display:inline-block;padding:13px 24px;border-radius:999px;font:600 16px var(--body);text-decoration:none;border:0;cursor:pointer}
.btn.primary{background:var(--primaryDeep);color:#fff;box-shadow:0 6px 18px rgba(239,97,97,.32)}
.btn.ghost{background:var(--white);color:var(--ink);box-shadow:var(--shadow)}
.btn.sm{padding:9px 18px;font-size:15px}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;padding:72px 0 40px;text-align:center}
.hero .wrap{position:relative;z-index:1}
/* The two riso flanks — decorative only, and they live OUTSIDE the 1120px content
   column, so they are hidden the moment the viewport can't spare the margin. */
/* .hero-scoped so these beat `.art{width:100%}`, which is declared further down */
.hero .heroart{position:absolute;z-index:0;width:clamp(170px,17vw,280px);opacity:.5}
.hero .heroart.l{left:-1.5vw;top:44px;transform:rotate(-9deg)}
.hero .heroart.r{right:-1.5vw;top:170px;transform:rotate(8deg)}
@media(max-width:1199px){.hero .heroart{display:none}}
.hero h1{font-size:clamp(38px,6.2vw,68px)}
.hero h1 em{font-style:normal;color:var(--primaryDeep)}
.lede{font-size:clamp(17px,2.2vw,21px);color:var(--ink2);max-width:620px;margin:22px auto 0}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.note{font-size:14px;color:var(--muted);margin-top:14px}

.strip{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.pill{background:var(--white);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--ink2);box-shadow:var(--shadow)}

/* ---- steps ---- */
section{padding:76px 0}
.eyebrow{font:600 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--primaryDeep);margin-bottom:14px}
.h2{font-size:clamp(28px,4vw,44px)}
.sub{color:var(--ink2);max-width:600px;margin-top:14px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.step{background:var(--white);border-radius:var(--r);padding:28px;box-shadow:var(--shadow)}
.step b{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:var(--cream);color:var(--primaryDeep);font-family:var(--display);margin-bottom:16px}
.step h3{font-size:21px;margin-bottom:8px}
.step p{color:var(--ink2);font-size:16px}


/* ---- features ---- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center;padding:56px 0}
.feat:nth-child(even) .copy{order:2}
.feat h3{font-size:clamp(25px,3.2vw,34px);margin-bottom:14px}
.feat p{color:var(--ink2)}
.feat ul{margin:18px 0 0;padding:0;list-style:none;color:var(--ink2);font-size:16px}
.feat li{padding-left:26px;position:relative;margin-top:9px}
.feat li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:3px;background:var(--success)}
.feat .media{display:grid;place-items:center}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .feat{grid-template-columns:1fr;padding:36px 0}
  .feat:nth-child(even) .copy{order:0}
  .steps,.cards{grid-template-columns:1fr}
}
@media(max-width:640px){
  body{font-size:16px}
  section{padding:52px 0}
  .hero{padding:44px 0 24px}
  .cta .btn{width:100%;text-align:center}
}

.band{background:var(--white)}
.band.cream{background:linear-gradient(180deg,var(--cream),var(--bg))}

/* ---- grid of small features ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.card{background:var(--white);border-radius:24px;padding:26px;box-shadow:var(--shadow)}
.card h3{font-size:19px;margin:14px 0 8px}
.card p{font-size:15.5px;color:var(--ink2)}


/* ---- pricing ---- */
.price{background:var(--white);border-radius:var(--r);padding:clamp(28px,5vw,52px);box-shadow:var(--shadowLg);display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.price .tag{font-family:var(--display);font-size:44px}
.price ul{list-style:none;padding:0;margin:20px 0 0;color:var(--ink2)}
.price li{padding-left:26px;position:relative;margin-top:10px}
.price li::before{content:"✓";position:absolute;left:0;color:var(--successText);font-weight:700}
@media(max-width:900px){.price{grid-template-columns:1fr}}

/* ---- faq ---- */
details{background:var(--white);border-radius:18px;padding:18px 22px;box-shadow:var(--shadow);margin-top:12px}
summary{cursor:pointer;font-weight:600;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--primaryDeep);font-family:var(--display)}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--ink2);font-size:16px}

footer{padding:56px 0;color:var(--muted);font-size:14px;border-top:1px solid rgba(0,0,0,.06)}
.foot{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.foot .links{margin-left:auto;display:flex;gap:18px}
.foot a{text-decoration:none}

/* ---- language ---- */
nav .lang{font-size:15px;text-decoration:none;color:var(--ink2);white-space:nowrap}
nav .lang:hover{color:var(--ink)}
@media(max-width:760px){nav .lang{margin-left:auto}}

/* CJK. Fredoka and Hanken Grotesk are Latin-only, so zh.html falls back to the system
   CJK face — no webfont, because a subset CJK family is megabytes for one landing page.
   The Latin families stay FIRST in the stack so digits, "P1", "P6" and "PDF" still render
   in the brand faces inside a Chinese sentence. Chinese also needs looser body leading
   and much looser heading leading than the 1.1 the display face is set at. */
html[lang^="zh"]{
  --display:Fredoka,"PingFang HK","Noto Sans HK","Noto Sans CJK HK","Microsoft JhengHei",ui-rounded,system-ui,sans-serif;
  --body:'Hanken Grotesk',"PingFang HK","Noto Sans HK","Noto Sans CJK HK","Microsoft JhengHei",system-ui,sans-serif;
}
html[lang^="zh"] body{line-height:1.8}
html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] h3{line-height:1.35;letter-spacing:0}
html[lang^="zh"] .eyebrow{letter-spacing:.06em}


/* ---- riso illustrations ----
   The source PNGs are white-backed with no alpha, so `multiply` is what drops
   the paper away over --bg / --white / --cream instead of stamping a white box.
   Every one is decorative: alt="" everywhere, so check-i18n.mjs stays balanced. */
/* Three of the sources land on 252,252,254 rather than pure white, which multiply
   stamps as a faint grey box on a white card. brightness(1.02) clips those to 255
   and is invisible on the saturated riso inks. */
.art{mix-blend-mode:multiply;filter:brightness(1.02);width:100%;height:auto;pointer-events:none;user-select:none}

.step{position:relative}
.step .art{width:124px;margin:-16px 0 2px -14px}
.step b{position:absolute;top:26px;right:24px;margin:0}


.bandhead{display:flex;align-items:center;gap:32px;justify-content:space-between}
.bandhead .art{width:min(210px,26vw);flex:none}
@media(max-width:640px){.bandhead .art{display:none}}

.feat .copy .art{width:152px;margin:0 0 12px -14px}
.price .art{width:190px;margin:-22px 0 -8px -16px}

.outro{width:min(280px,62vw);margin:0 auto 4px}

/* ---- hero animation ----------------------------------------------------
   The product in one loop: the parent scans the worksheet on their phone, the
   paper flies across, and the kid is working it out by hand on the iPad.
   Both PNGs are pre-rendered WITH their device frames (hero-scan.png is a
   3/4 perspective render), so .dev is a bare positioning box — no bezel, no
   background, no shadow of its own. Coordinates are cqw (percent of the stage
   width) so the whole scene scales as one. Two anchors are measured off the
   PNGs as percentages of the image box:
     the paper in the viewfinder  ~55 / 44  of hero-scan.png  (fly's origin)
     the sketch canvas  3.5 / 19 / 93 / 65.5  of hero-play.png  (land's ring)
   ponytail: hand-tuned percentages beat a layout engine for a fixed scene.
   Ceiling: a re-crop of either PNG means re-measuring; that is the whole cost.
   There is no .tap ring any more — the phone is in perspective, so a flat
   rounded rect can't sit on the shutter button convincingly. */
.heroanim{position:relative;container-type:inline-size;aspect-ratio:100/43.5;max-width:1000px;margin:36px auto 0}
.heroanim .dev{position:absolute}
.heroanim .phone{left:5cqw;top:2cqw;width:30cqw;z-index:2}
.heroanim .pad{left:33cqw;top:3cqw;width:58cqw}
/* the frames are baked into the PNGs, so the screenshots drop .shot's own chrome */
.heroanim .shot{max-width:none;border:0;box-shadow:none;background:none;border-radius:0}
.heroanim i{position:absolute;display:block;z-index:3;opacity:0}

/* 1. the scanned page flies over and opens into the question */
.heroanim .fly{left:21.5cqw;top:18.5cqw;width:5cqw;height:6.2cqw;margin:-3.1cqw 0 0 -2.5cqw;
  border-radius:.8cqw;background:var(--white);box-shadow:0 .6cqw 1.6cqw rgba(42,36,56,.28);
  animation:fly 7s cubic-bezier(.5,0,.35,1) infinite}
.heroanim .fly::after{content:"";position:absolute;inset:20% 16%;
  background:repeating-linear-gradient(var(--sand) 0 11%,transparent 11% 30%)}
@keyframes fly{
  0%,14%{opacity:0;transform:translate(0,0) scale(.5) rotate(-6deg)}
  19%{opacity:1;transform:translate(1cqw,-3cqw) scale(1) rotate(-6deg)}
  32%{opacity:1;transform:translate(20cqw,-6cqw) scale(1.15) rotate(3deg)}
  44%{opacity:1;transform:translate(40.5cqw,5cqw) scale(1.2) rotate(0)}
  51%,100%{opacity:0;transform:translate(40.5cqw,5cqw) scale(1.5) rotate(0)}
}
/* 2. it lands as the question the kid is working on */
.heroanim .land{left:35cqw;top:10.5cqw;width:53.9cqw;height:25.9cqw;border-radius:1.2cqw;
  border:.28cqw solid var(--accent);animation:land 7s ease-out infinite}
@keyframes land{
  0%,41%{opacity:0;transform:scale(1.04)}
  46%{opacity:1;transform:scale(1)}
  64%,100%{opacity:0;transform:scale(1)}
}

/* Too small to read two devices — fall back to the phone alone, still. */
@media(max-width:760px){
  .heroanim{aspect-ratio:auto;max-width:300px;margin-top:32px}
  .heroanim .pad,.heroanim i{display:none}
  .heroanim .dev{position:static}
  .heroanim .phone{width:100%}
}
@media(prefers-reduced-motion:reduce){.heroanim .fly,.heroanim .land{animation:none}}