/* Hallmark · macrostructure: Duolingo landing structure (studied) · tone: playful-utilitarian · anchor hue: lime + indigo
 * theme: studied-DNA (source: https://www.duolingo.com, Chrome capture 2026-10-10) dressed in Ninkyra's own app tokens
 * motion: spring rig (niki.js), no keyframe loops · art: drawn scenes, no app screenshots
 * pre-emit critique: P4 H5 E4 S5 R4 V4 */
/* The page's two fonts, kept here (owner, 2026-10-16: speed): Google Fonts cost two other servers before the first paint.
 * Nunito is one variable file per alphabet (700 to 900); Gochi Hand only draws the scenes' handwriting. Both are OFL. */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("fonts/nunito-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("fonts/nunito-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Gochi Hand"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/gochi-hand-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Tokens (were tokens.css, imported: one more round trip before the first paint). */
/* Ninkyra tokens, lifted from the app (ParentTheme + KidTheme, Niki the lantern). */
:root {
  --color-lime: #BBE753;        /* parent header and main buttons */
  --color-lime-edge: #8DB33A;   /* the button's pressable bottom edge */
  --color-lime-wash: #E7F7C3;   /* parent chips */
  --color-lime-ink: #617B28;    /* lime words on white: 4.8:1 (lime-edge is 2.4:1) */
  --color-indigo: #3A3F8F;      /* Niki's frame: headings */
  --color-indigo-deep: #23275E;
  --color-indigo-light: #7479C9; /* Niki's lit side */
  --color-gold: #E8B84A;        /* Niki's sparks */
  --color-gold-light: #FFE4A1;
  --color-gold-deep: #A97C1C;   /* spark and handle outline */
  --color-glow: #FFF0C8;        /* Niki's paper glow */
  --color-glow-shade: #E2BD62;
  --color-slate: #414A4D;       /* parent text */
  --color-muted: #676E71;
  --color-row: #F5F5F5;
  --color-hairline: rgba(65, 74, 77, 0.14);
  --color-lavender: #D9CFED;    /* kid home room */
  --color-lavender-wash: #EEE9F7; /* the same room, lighter, so the kid screen still stands out on it */
  --color-ink: #04000E;         /* Niki's face */
  --color-pink: #F278A3;
  --color-pink-light: #F9B5CC;
  --color-sky: #B6C4DE;         /* jar glass */
  --color-blush: rgba(242, 120, 163, 0.45);
  --color-alert: #D13A2E;
  --color-marker: #D7261E;      /* a teacher's red pen: the handwritten note, an outsider to the palette on purpose (owner, 2026-10-13) */
  --color-paper: #FFFFFF;

  --font-display: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; /* kid mode's rounded voice */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* parent screens */
  --font-hand: "Gochi Hand", "Bradley Hand", "Segoe Print", cursive; /* the handwritten note by the waitlist button (site only) */

  --text-hero: clamp(2rem, 2.4vw + 1rem, 2.6rem);
  --text-h2: clamp(2.25rem, 3.6vw + 1rem, 3.25rem);
  --text-body: 1.0625rem;
  --text-small: 0.875rem;

  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px;
  --radius-button: 999px;       /* the app's capsules */
  --radius-card: 28px;
  --edge: 4px;                  /* Duolingo-style press depth */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1); /* characters only, never controls */
  --dur-fast: 120ms; --dur-mid: 320ms; --dur-slow: 700ms;
}

html, body { overflow-x: clip; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-paper); color: var(--color-slate); font: 500 var(--text-body)/1.45 var(--font-body); }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: 3px; }
.wrap { width: min(1080px, 100% - 2 * var(--space-lg)); margin-inline: auto; }

/* Header: wordmark, and the waitlist button once the hero is gone (as the reference does). */
.top { position: sticky; top: 0; z-index: 10; background: var(--color-paper); transition: box-shadow var(--dur-mid) var(--ease-out); }
.top.scrolled { box-shadow: 0 1px 0 var(--color-hairline); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 900 1.05rem/1 var(--font-display); letter-spacing: 0.14em; color: var(--color-slate); }
.brand img { width: 40px; height: 40px; } /* the mark: one lime tile, the jar filled slate (tools/app_icon.py) */
.top .btn { opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out); }
.top.scrolled .btn { opacity: 1; transform: none; pointer-events: auto; }

/* Buttons: the app's lime capsule with a pressable bottom edge. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px; border: 0; border-radius: var(--radius-button);
  font: 800 0.95rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; text-decoration: none; cursor: pointer;
  background: var(--color-lime); color: var(--color-slate); box-shadow: 0 var(--edge) 0 var(--color-lime-edge);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--color-lime-edge); }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.btn.ghost { background: var(--color-paper); color: var(--color-indigo); box-shadow: 0 var(--edge) 0 var(--color-hairline), inset 0 0 0 2px var(--color-hairline); }
.btn.ghost:active { box-shadow: 0 0 0 var(--color-hairline), inset 0 0 0 2px var(--color-hairline); }
.btn.small { min-height: 42px; padding: 0 20px; font-size: 0.8rem; }

/* Hero: Niki left, one line and two buttons right; the money strip under it. */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-xl); min-height: calc(100svh - 70px - 74px); }
.hero h1 { font: 900 var(--text-hero)/1.12 var(--font-display); color: var(--color-indigo); text-align: center; margin: 0 auto var(--space-sm); max-width: 18ch; text-wrap: balance; }
.hero h1 span { display: block; color: var(--color-slate); }
.example { margin: 0 auto var(--space-xl); max-width: 30em; text-align: center; font-size: var(--text-small); color: var(--color-muted); }
.cta { display: grid; gap: var(--space-md); width: min(340px, 100%); margin-inline: auto; }
.strip { border-top: 2px solid var(--color-hairline); }
.strip ul { list-style: none; margin: 0 auto; padding: 0 var(--space-lg); height: 72px; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 48px); overflow-x: auto; }
.strip li { display: flex; align-items: center; gap: 10px; font: 800 0.85rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); white-space: nowrap; }
.strip svg { width: 28px; height: 28px; flex: none; }

/* Waitlist form: the button opens into a field in place. */
.join { display: grid; gap: var(--space-sm); }
.join input { min-height: 54px; border-radius: var(--radius-button); border: 2px solid var(--color-hairline); padding: 0 22px; font: 600 1rem var(--font-body); color: var(--color-slate); background: var(--color-row); }
.join input:focus-visible { outline: none; border-color: var(--color-indigo); background: var(--color-paper); }
.join .note { margin: 2px 0 0; font-size: var(--text-small); color: var(--color-muted); text-align: center; }
.join .note.error { color: var(--color-alert); }
.done { text-align: center; font: 800 1.15rem/1.35 var(--font-display); color: var(--color-indigo); }
/* Why join, in a hand (owner, 2026-10-13): the stores it lands on. Outside .cta, which the form replaces. */
.hand { width: min(300px, 100%); margin: 0 auto 6px; font: 400 1.4rem/1.15 var(--font-hand); color: var(--color-marker); text-align: center; text-wrap: balance; transform: rotate(-2deg); }
.hand svg { display: block; width: 40px; height: 34px; margin: 2px auto 0; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* Feature rows: lowercase heading, one or two short lines, a drawn scene beside it. */
.feature { padding-block: var(--space-2xl); }
.feature .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-2xl); }
.feature.flip .text { order: 2; }
h2 { font: 900 var(--text-h2)/1.08 var(--font-display); color: var(--color-indigo); margin: 0 0 var(--space-lg); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.text p { margin: 0; max-width: 30em; color: var(--color-muted); }

/* "Their phone, your say": kid home's lavender, sparks drifting. */
.anywhere { position: relative; background: var(--color-lavender-wash); padding-block: var(--space-3xl); overflow: clip; text-align: center; }
.anywhere h2 { max-width: 16ch; margin-inline: auto; }

/* Final call, then the lime wave into the footer. */
.final { text-align: center; padding-top: var(--space-3xl); }
.final h2 { max-width: 14ch; margin-inline: auto; }
.final .cta { margin-bottom: var(--space-xl); }
.final-art { width: min(240px, 56%); margin: 0 auto -40px; position: relative; z-index: 1; }
.wave { display: block; width: 100%; height: 90px; }
/* Footer: the reference's sitemap columns, holding only what Ninkyra has today. */
footer { background: var(--color-lime); color: var(--color-slate); padding: var(--space-xl) 0 var(--space-2xl); }
.sitemap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-lg); padding-bottom: var(--space-xl); }
.sitemap nav { display: grid; align-content: start; gap: 10px; font-size: var(--text-small); font-weight: 700; }
.sitemap h3 { margin: 0 0 4px; font: 900 1rem/1.2 var(--font-display); }
footer .base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-lg); border-top: 2px solid var(--color-lime-edge); font-size: var(--text-small); font-weight: 700; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .off { opacity: 0.45; cursor: default; } /* a store JarSave is not in yet: an inactive link, dimmed (WCAG 1.4.3 exempts inactive components) */

/* Dropdown menus (<details>, so they open without script; menu.js adds outside-tap and Escape): the blog's
 * Subjects / Language and the landing's language picker (owner, 2026-10-13), as blog.duolingo.com's. */
.menu { position: relative; }
.menu > summary { display: flex; align-items: center; gap: 6px; padding: 12px 0; list-style: none; font: 800 0.85rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); cursor: pointer; }
.menu > summary:hover, .menu[open] > summary { color: var(--color-indigo); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.menu[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.menu > summary svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.menu-panel { position: absolute; top: 100%; left: 0; z-index: 20; display: grid; min-width: 210px; padding: var(--space-sm); background: var(--color-paper); border: 2px solid var(--color-hairline); border-radius: 16px; }
.menu-panel.end { left: auto; right: 0; }
.menu-panel a { padding: 10px 12px; border-radius: 10px; font: 800 0.95rem/1.2 var(--font-display); color: var(--color-slate); text-decoration: none; white-space: nowrap; }
.menu-panel a:hover { background: var(--color-row); color: var(--color-indigo); }
.menu-panel a[aria-current] { color: var(--color-indigo); background: var(--color-lime-wash); }
.menu-head { margin: var(--space-sm) 12px 4px; font: 900 0.75rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.menu-panel hr { width: 100%; margin: var(--space-sm) 0; border: 0; border-top: 2px solid var(--color-hairline); }
/* The landing's header end: the waitlist button (after the hero) and the language picker, far right. */
.top-end { display: flex; align-items: center; gap: var(--space-md); }

/* Text eases up as it arrives; the drawings move on springs (niki.js). */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.text.reveal + .art.reveal { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition-duration: 150ms; }
}

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-xl); min-height: 0; }
  .hero-art { width: min(300px, 80%); }
  .feature .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); text-align: center; }
  .feature.flip .text { order: 0; }
  .text p { margin-inline: auto; }
  .strip ul { justify-content: flex-start; }
  .sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) { /* phones: the mark, the button and the picker must fit one row */
  .top .brand span, .top-end .menu > summary svg { display: none; }
  .top .brand { flex: none; }
  .top-end { gap: var(--space-sm); }
  .top .btn.small { padding: 0 14px; }
}
@media (max-width: 360px) { .sitemap { grid-template-columns: minmax(0, 1fr); } }
/* About: the reference's mission line, product cards on grey tiles, then contacts. */
.about { padding-block: var(--space-2xl) var(--space-3xl); }
.mission { text-align: center; padding-bottom: var(--space-2xl); }
.eyebrow { margin: 0 0 var(--space-md); font: 900 0.85rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-lime-edge); }
.mission h1 { margin: 0 auto; max-width: 24ch; font: 900 clamp(1.6rem, 2.4vw + 1rem, 2.4rem)/1.2 var(--font-display); color: var(--color-slate); text-wrap: balance; }
.layers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
.layer { grid-column: span 2; }
.layer.big { grid-column: span 3; }
.layer .tile { display: grid; place-items: center; aspect-ratio: 3 / 2; border-radius: var(--radius-card); background: var(--color-row); margin-bottom: var(--space-md); }
.layer.big .tile { aspect-ratio: 16 / 9; }
.layer .tile svg { width: 34%; max-width: 120px; }
.layer h2 { margin: 0 0 6px; font: 900 1.15rem/1.25 var(--font-display); color: var(--color-slate); letter-spacing: 0; }
.layer p { margin: 0 0 10px; color: var(--color-muted); }
.layer a { font: 800 0.8rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-indigo); text-decoration: none; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-xl); margin-top: var(--space-3xl); padding-top: var(--space-3xl); border-top: 2px solid var(--color-hairline); }
.contact-art { width: min(320px, 80%); justify-self: center; }
.lines { display: grid; gap: 10px; justify-items: start; }
.lines p { margin: var(--space-sm) 0 0; color: var(--color-muted); }
.lines a { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--color-indigo); text-decoration: none; }
.lines svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 860px) {
  .layer, .layer.big { grid-column: span 6; }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .lines { justify-items: center; text-align: center; }
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }