/* ============================================================
   SNAG ACADEMY — website stylesheet

   Deliberately hand-written and framework-free. The marketing site
   must be static HTML: the app at /play/ is a client-rendered SPA
   with one title and one description, so it can never rank. Every
   page here is real HTML a crawler can read without running JS.

   Palette and type are lifted from the app (src/styles.css) so the
   two feel like one product. Fonts are self-hosted from the same
   @fontsource packages — no Google Fonts request, which keeps the
   "no third-party requests" promise true on the website too.

   Reading format follows the Medium convention the brief asked for:
   a ~680px measure, 19-21px body, generous line-height, and almost
   no chrome around the text.
   ============================================================ */

/* ---------- self-hosted fonts ----------
   Same families the app bundles, copied from @fontsource. Each face
   declares a unicode-range, so an English reader never downloads the
   Devanagari or Tamil files and a Hindi reader never downloads Tamil.
   Nunito has no Indic coverage, so Hindi and Tamil fall through to
   Baloo 2 / Baloo Thambi 2 by unicode-range alone — no per-language
   CSS class is needed anywhere. */
@font-face { font-family:'Baloo 2'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/baloo-2-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+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/baloo-2-latin-800-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Baloo 2'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/baloo-2-devanagari-500-normal.woff2') format('woff2');
  unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF; }
@font-face { font-family:'Baloo 2'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/baloo-2-devanagari-700-normal.woff2') format('woff2');
  unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,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/baloo-2-devanagari-800-normal.woff2') format('woff2');
  unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF; }
@font-face { font-family:'Baloo Thambi 2'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/baloo-thambi-2-tamil-500-normal.woff2') format('woff2');
  unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+20B9,U+25CC; }
@font-face { font-family:'Baloo Thambi 2'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/baloo-thambi-2-tamil-700-normal.woff2') format('woff2');
  unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+20B9,U+25CC; }
@font-face { font-family:'Baloo Thambi 2'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/baloo-thambi-2-tamil-800-normal.woff2') format('woff2');
  unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+20B9,U+25CC; }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/nunito-latin-600-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/nunito-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/nunito-latin-800-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Palette — crispness pass, Aug 2026 (preview change 3).
   Was tinted paper #F1F6F4 with dark-teal ink #17313B; now a
   near-white ground with near-black text.

   Be accurate about what this buys: the OLD pairing already measured
   12.5:1, well past WCAG AAA (7:1). This is 18.1:1. So it is sharper,
   not a fix for something that was failing — the reason to do it is
   that a neutral ground lets the artwork supply the colour instead of
   competing with the background. The four fault colours are unchanged,
   because those encode meaning rather than decorate. */
:root {
  --paper:#FAFAFA; --card:#FFFFFF; --ink:#111111; --ink-soft:#4A5A61;
  --spark:#FFB01F; --spark-deep:#C97F00; --spark-soft:#FFF3DA;
  --leaf:#2E9E6B; --leaf-soft:#E2F4EA; --coral:#E4573D; --coral-soft:#FBE7E2;
  --sky:#4FA8C7; --sky-soft:#E4F2F7; --line:#E4E9E6; --grid:#EFF2F0;
  --measure:680px;
}

*, *::before, *::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Nunito','Baloo 2','Baloo Thambi 2',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:20px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
@media (max-width:600px){ body { font-size:18px; } }

/* ---------- headings ---------- */
h1,h2,h3,h4 { font-family:'Baloo 2','Baloo Thambi 2',system-ui,cursive; font-weight:800; line-height:1.2; margin:0 0 .4em; }
h1 { font-size:clamp(32px,6vw,50px); letter-spacing:-.01em; }

/* Section headings — rhythm pass, Aug 2026 (preview change 1).
   Uppercase with a short rule underneath, so sections announce
   themselves and a reader can find their place while scrolling.
   CLAMPED deliberately: 38px caps look right on a laptop but wrap to
   two lines and eat a phone screen, which is where most readers are.
   h3 stays sentence case — uppercase everywhere would shout. */
h2 {
  font-size:clamp(26px,6.5vw,38px);
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.08;
  margin-top:1.9em;
}
h2::after {
  content:""; display:block;
  width:56px; height:5px; border-radius:99px;
  background:var(--spark);
  margin:.4em 0 .05em;
}
h3 { font-size:clamp(20px,3vw,25px); margin-top:1.5em; }

p, ul, ol { margin:0 0 1.45em; }
li { margin-bottom:.5em; }

a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--spark); text-decoration-thickness:2px; text-underline-offset:3px; }
a:hover { text-decoration-color:var(--spark-deep); }

strong { font-weight:800; }
hr { border:0; border-top:2px solid var(--line); margin:2.6em 0; }

/* ---------- layout ---------- */
.wrap { width:100%; max-width:1080px; margin:0 auto; padding:0 20px; }
.measure { width:100%; max-width:var(--measure); margin-left:auto; margin-right:auto; }

/* ---------- header ---------- */
.site-head {
  position:sticky; top:0; z-index:40;
  background:rgba(241,246,244,.94);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:2px solid var(--line);
}
.site-head .wrap { display:flex; align-items:center; gap:16px; min-height:62px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:9px; font-family:'Baloo 2'; font-weight:800; font-size:21px; text-decoration:none; }
.brand img { width:32px; height:32px; border-radius:8px; }
.nav { display:flex; gap:16px; margin-left:auto; align-items:center; flex-wrap:wrap; }
.nav a { font-weight:800; font-size:15.5px; text-decoration:none; color:var(--ink-soft); }
.nav a:hover, .nav a[aria-current="page"] { color:var(--ink); }

/* language switcher — a plain <details>, so it works with no JS at all */
.lang { position:relative; }
.lang summary {
  list-style:none; cursor:pointer; font-weight:800; font-size:15.5px; color:var(--ink-soft);
  border:2px solid var(--line); border-radius:999px; padding:4px 12px; background:var(--card);
}
.lang summary::-webkit-details-marker { display:none; }
.lang[open] summary { color:var(--ink); border-color:var(--ink); }
.lang-menu {
  position:absolute; right:0; top:calc(100% + 8px); min-width:172px; z-index:50;
  background:var(--card); border:2px solid var(--ink); border-radius:14px; padding:6px;
  box-shadow:0 8px 24px rgba(23,49,59,.16);
}
.lang-menu a { display:block; padding:8px 12px; border-radius:9px; text-decoration:none; font-weight:800; font-size:16px; }
.lang-menu a:hover { background:var(--grid); }

/* On a phone the nav wraps to two rows, and a sticky header that tall
   would permanently eat a sixth of the screen. Let it scroll away. */
@media (max-width:760px){
  .site-head { position:static; }
  .site-head .wrap { gap:10px 14px; padding-top:10px; padding-bottom:10px; min-height:0; }
  .nav { gap:14px; margin-left:0; width:100%; }
  .nav a { font-size:15px; }
  .hero { padding-top:34px; }
}

/* ---------- hero ---------- */
.hero { padding:34px 0 22px; text-align:center; }
.hero p.lede { font-size:clamp(18px,2.4vw,23px); color:var(--ink-soft); font-weight:700; max-width:640px; margin:0 auto 26px; }
.cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.tally-note { font-size:13.5px; font-weight:700; color:var(--ink-soft); margin:6px 0 0; }
@media (min-width:900px){ .tally-note { text-align:right; } }

/* the totals, top corner */
.tally { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:0 0 22px; }
.tly { font-family:'Baloo 2'; font-weight:800; font-size:14.5px; color:var(--ink-soft);
  border:2px solid var(--line); background:var(--card); border-radius:999px; padding:5px 13px; }
.tly b { color:var(--ink); font-size:16px; }
.tly.free { border-color:var(--leaf); color:var(--leaf); } .tly.free b { color:var(--leaf); }
.tly.paid { border-color:var(--spark-deep); }

.hero-grid { display:grid; gap:30px; align-items:center; }
.hero-note { max-width:74ch; margin:26px auto 0; font-size:15.5px; font-weight:700;
  color:var(--ink-soft); }

/* Below 900px the two columns stack and everything re-centres, which is
   how the page already read on a phone. */
@media (min-width:900px) {
  .hero { text-align:left; }
  .hero-grid { grid-template-columns:1.02fr .98fr; }
  .hero h1 { margin-top:0; }
  .hero p.lede { margin-left:0; }
  .hero .cta, .hero .trustline { justify-content:flex-start; }
  .tally { justify-content:flex-end; }
  /* The note closes the hero, so it sits under BOTH columns rather than
     hugging the copy — left-aligned it left a hole under the drawing. */
  .hero-note { text-align:center; }
}
.btn {
  display:inline-block; font-family:'Baloo 2'; font-weight:800; font-size:18px;
  padding:13px 26px; border-radius:999px; text-decoration:none; border:2.5px solid var(--ink);
}
.btn.pri { background:var(--ink); color:#fff; }
.btn.ghost { background:var(--card); color:var(--ink); }
.btn:hover { transform:translateY(-1px); }

/* ---------- counter strip ---------- */
.counter { text-align:center; margin:30px auto 8px; max-width:520px; }
.counter .big { font-family:'Baloo 2'; font-weight:800; font-size:56px; line-height:1; }
.counter .cap { font-weight:800; color:var(--ink-soft); font-size:15px; }
.bar { height:13px; border-radius:999px; background:var(--grid); border:2px solid var(--line); overflow:hidden; margin:13px 0; }
.bar > span { display:block; height:100%; background:var(--leaf); }
.pills { display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }
.pill { font-family:'Baloo 2'; font-weight:800; font-size:15px; border-radius:999px; padding:5px 14px; border:2px solid; }
.pill.free { background:var(--leaf); color:#fff; border-color:var(--leaf); }
.pill.paid { background:transparent; color:var(--ink); border-color:var(--spark-deep); }

/* ---------- cards ---------- */
.grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin:26px 0; }
.card {
  background:var(--card); border:2.5px solid var(--line); border-radius:18px;
  padding:20px 22px; text-decoration:none; color:inherit; display:block;
}
a.card:hover { border-color:var(--ink); }
.card h3 { margin-top:0; }
.card p:last-child { margin-bottom:0; }
.card .meta { font-weight:800; font-size:13.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }

.tag { display:inline-block; font-family:'Baloo 2'; font-weight:800; font-size:12.5px; letter-spacing:.08em;
  border-radius:999px; padding:3px 11px; border:2px dashed; margin:0 6px 6px 0; }
.tag.missing { color:var(--sky); border-color:var(--sky); background:var(--sky-soft); }
.tag.wrong { color:var(--coral); border-color:var(--coral); background:var(--coral-soft); }
.tag.extra { color:#7C5BC7; border-color:#7C5BC7; background:#F0EAFB; }
.tag.order { color:var(--spark-deep); border-color:var(--spark-deep); background:var(--spark-soft); }
.tag.age { color:var(--leaf); border-color:var(--leaf); background:var(--leaf-soft); border-style:solid; }

/* ---------- article (the Medium format) ---------- */
.article { padding:44px 0 20px; }
.article h1 { margin-bottom:.25em; }
/* The band names — Explorer, Investigator, Inspector — stay in Latin
   script in every language, because the app shows exactly those words.
   The Hindi or Tamil gloss beside the heading says what the name means
   without pretending the app will use it, so it is set smaller and
   lighter: a translation of the name, not part of it. */
.article h1 .gloss { font-size:.62em; font-weight:700; color:var(--ink-soft); white-space:nowrap; }
.article .standfirst { font-size:clamp(19px,2.3vw,23px); color:var(--ink-soft); font-weight:700; margin-bottom:1.1em; }
.byline { font-weight:800; font-size:14.5px; color:var(--ink-soft); border-top:2px solid var(--line); border-bottom:2px solid var(--line); padding:11px 0; margin-bottom:2.1em; }
.article figure { margin:2.2em 0; }
.article figure svg, .article figure img { width:100%; height:auto; border:2.5px solid var(--ink); border-radius:16px; background:var(--card); }
.article figcaption { font-size:15px; color:var(--ink-soft); font-weight:700; margin-top:9px; text-align:center; }
blockquote {
  margin:2em 0; padding:6px 0 6px 22px; border-left:5px solid var(--spark);
  font-family:'Baloo 2'; font-weight:700; font-size:clamp(20px,2.6vw,25px); line-height:1.42;
}
.callout { background:var(--spark-soft); border:2.5px solid var(--spark-deep); border-radius:16px; padding:18px 22px; margin:2em 0; }
.callout.warn { background:var(--coral-soft); border-color:var(--coral); }
.callout.good { background:var(--leaf-soft); border-color:var(--leaf); }
.callout > :last-child { margin-bottom:0; }

/* ---------- tables ---------- */
.tablewrap { overflow-x:auto; margin:2em 0; }
table { border-collapse:collapse; width:100%; font-size:16.5px; }
th, td { text-align:left; padding:11px 13px; border-bottom:2px solid var(--line); vertical-align:top; }
th { font-family:'Baloo 2'; font-weight:800; background:var(--grid); }

/* ---------- library entries ---------- */
.entry { background:var(--card); border:2.5px solid var(--line); border-radius:18px; padding:20px 22px; margin-bottom:16px; }
.entry h3 { margin:0 0 6px; }
.entry .why { color:var(--ink-soft); font-weight:600; }
.entry .why:last-child { margin-bottom:0; }

/* ---------- footer ---------- */
.site-foot { border-top:2px solid var(--line); margin-top:70px; padding:34px 0 54px; font-size:16px; color:var(--ink-soft); }
.site-foot a { color:var(--ink-soft); font-weight:800; }
.foot-cols { display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
/* Footer column labels are h2 so the document outline never skips a
   level (the last body heading is an h2). They must NOT inherit the
   page-heading look, so the display size, the top margin and the spark
   underline are all cancelled here. */
.foot-cols h2 { font-size:15px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink); margin:0 0 .5em; line-height:1.3; }
.foot-cols h2::after { display:none; }
.foot-cols ul { list-style:none; padding:0; margin:0; }

/* hero-demo:start */
/* Lifted verbatim from src/styles.css by scripts/build-hero-demo.mjs.
   Do not edit here — edit the app's stylesheet and re-run `npm run pages`. */
@keyframes spinCW{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes hum{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes popIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes floatUp{0%{opacity:0;transform:translateY(6px)}30%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}
@keyframes flutter{0%,100%{transform:rotate(0) translateX(0)}50%{transform:rotate(8deg) translateX(4px)}}
.spinFast{animation:spinCW .45s linear infinite}
.humming{animation:hum .18s linear infinite}

/* Five frames share one grid cell and take turns. 4s each, matching the
   app's start screen, so the two feel like the same product. */
.herodemo { margin: 26px auto 0; max-width: 520px; }
.hd-stage { display: grid; }
.hd-frame { grid-area: 1 / 1; margin: 0; opacity: 0;
  animation: hdCycle 20s linear infinite; animation-delay: calc(var(--i) * 4s); }
.hd-frame svg { display: block; width: 100%; height: auto;
  border: 3px solid var(--ink); border-radius: 20px; background: var(--card); }
.hd-frame figcaption { font-family: 'Baloo 2'; font-weight: 800; font-size: 15px;
  color: var(--ink-soft); text-align: center; margin-top: 10px; min-height: 2.8em; }
.hd-frame:nth-child(1) figcaption, .hd-frame:nth-child(3) figcaption { color: var(--leaf); }
@keyframes hdCycle { 0%, 1% { opacity: 0 } 3%, 18% { opacity: 1 } 20%, 100% { opacity: 0 } }

/* Reduced motion gets the solved fan, held still — a picture, not a loop. */
@media (prefers-reduced-motion: reduce) {
  .hd-frame { animation: none; opacity: 0 }
  .hd-frame:nth-child(1) { opacity: 1 }
  .hd-frame svg * { animation: none !important }
}
/* hero-demo:end */

/* ---------- the promises, in the first screen ---------- */
.trustline { list-style:none; padding:0; margin:18px 0 0; display:flex; flex-wrap:wrap;
  gap:8px; justify-content:center; }
.trustline li { font-weight:700; font-size:14.5px; background:var(--card);
  border:2px solid var(--line); border-radius:999px; padding:6px 14px; }

/* ---------- class band, stamped like the app's start screen ---------- */
.clsstamp { display:inline-block; margin-bottom:9px;
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-weight:600; font-size:14px;
  letter-spacing:2px; border:3px double currentColor; border-radius:8px; padding:3px 11px;
  transform:rotate(-4deg); background:rgba(255,255,255,.75); }
.clsstamp.explorer     { color:#4FA8C7; }
.clsstamp.investigator { color:#8A5FBF; transform:rotate(3deg); }
.clsstamp.inspector    { color:#C06A12; }

/* ---------- who makes this ---------- */
.grownups { background:var(--sky-soft); border:2.5px solid var(--sky); border-radius:22px;
  padding:26px 28px; }
.grownups h2 { margin-top:0; }
.grownups p { max-width:64ch; }
.gu-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

.skip { position:absolute; left:-9999px; }
.skip:focus { left:12px; top:12px; background:var(--card); padding:10px 16px; border:2px solid var(--ink); border-radius:10px; z-index:99; }

@media (prefers-reduced-motion:reduce){ html { scroll-behavior:auto; } .btn:hover { transform:none; } }