/* Divisible Dash public site design system.
   Shared by the landing page, /play, /rules, /class, /support, /privacy.
   The teacher dashboard keeps its own stylesheet (teachers/css/app.css);
   both draw from the same palette so the site reads as one product.
   No emojis anywhere. Icons are drawn SVG paths or CSS shapes. */

:root {
  --bg: #0f1226;
  --bg-2: #171a35;
  --card: #1e2244;
  --card-2: #262b52;
  --line: #33386b;
  --ink: #eef0ff;
  --ink-dim: #a6abd6;
  --accent: #35d0e0;
  --accent-ink: #052b30;
  --primary: #5b6cff;
  --primary-ink: #ffffff;
  --danger: #ff5c72;
  --good: #46e08a;
  --warn: #ffcf5c;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --maxw: 1080px;
  /* Dark UA form controls and scrollbars, to match the navy page. */
  color-scheme: dark;
}
/* Paper is white: a dark scheme would paint the page margins near-black
   whenever "Background graphics" is ticked in the print dialog. */
@media print { :root { color-scheme: light; } }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

body {
  background:
    radial-gradient(1100px 600px at 75% -8%, #232d63 0%, rgba(35, 45, 99, 0) 60%),
    radial-gradient(900px 500px at -10% 40%, #1b1f45 0%, rgba(27, 31, 69, 0) 55%),
    var(--bg);
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

::selection { background: rgba(53, 208, 224, 0.35); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 12px; letter-spacing: -0.01em; }
h1 { font-size: clamp(30px, 5.5vw, 52px); font-weight: 800; }
h2 { font-size: clamp(23px, 3.4vw, 32px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0 0 14px; }

.kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--ink-dim); }
.muted { color: var(--ink-dim); }
.center { text-align: center; }

/* ---- Brand mark: the faceted gem struck by a bolt, drawn in favicon.svg ---- */
.brand-mark {
  display: inline-block;
  width: 34px; height: 34px;
  background: url(/favicon.svg) center / contain no-repeat;
  flex: 0 0 auto;
}
.brand-mark.small { width: 24px; height: 24px; }

/* ---- Layout ---- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.container.narrow { max-width: 780px; }

.section { padding: 72px 0; }
.section.tight { padding: 44px 0; }
.section.alt { background: rgba(23, 26, 53, 0.55); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---- Site navigation ---- */
.site-nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(15, 18, 38, 0.82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-nav .inner {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.nav-brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink); font-weight: 800; font-size: 17px; text-decoration: none;
}
.nav-brand:hover { text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; margin-left: auto; }
.nav-links a { color: var(--ink-dim); font-weight: 600; font-size: 14.5px; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a.current { color: var(--ink); }
.nav-links .btn { margin-left: 6px; }

/* The two buttons sit beside the text links, not inside them. The 2px tops
   the bar's 16px gap up to the 18px that separates the links. */
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: 2px; }
.nav-actions .btn { font-weight: 600; }
.btn.nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #57e6f2, var(--accent) 52%, #3fa9f0);
  color: var(--accent-ink);
  border-color: rgba(160, 245, 255, 0.5); padding: 8px 15px; font-size: 13.5px; border-radius: 10px;
  box-shadow: 0 4px 16px rgba(53, 208, 224, 0.4), 0 0 0 4px rgba(53, 208, 224, 0.1);
}
.btn.nav-cta:hover { filter: brightness(1.06); }
.btn.nav-cta svg { flex: 0 0 auto; display: block; }

/* Phones: two rows. The brand and the two buttons share the first, the text
   links take the second. The bar is not sticky here, so it does not eat the
   screen while scrolling. The buttons are 40px tall for tapping. The single
   row needs 700px, so this starts at 720 rather than at a phone width. */
@media (max-width: 720px) {
  .site-nav { position: static; }
  .site-nav .inner { gap: 8px 12px; }
  .nav-links { order: 3; flex: 1 1 100%; margin-left: 0; gap: 6px 16px; }
  .nav-links a { font-size: 13.5px; }
  .nav-actions { margin-left: auto; }
  .nav-actions .btn.nav-cta, .nav-actions .btn.small { padding: 9px 12px; font-size: 12.5px; }
  .btn.nav-cta { gap: 6px; }
}
@media (max-width: 420px) {
  /* The glyph is the first thing to go: the label carries the meaning. */
  .btn.nav-cta svg { display: none; }
}
/* Small phones: tighten the first row so it still holds at 360px. */
@media (max-width: 380px) {
  .site-nav .inner { column-gap: 8px; }
  .nav-brand { gap: 8px; font-size: 16px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn.nav-cta, .nav-actions .btn.small { padding: 9px 10px; }
}

/* ---- Buttons ---- */
.btn {
  appearance: none;
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  /* <button> takes the UA control font and line-height; inherit so it
     renders exactly like the <a class="btn"> links, which already inherit. */
  line-height: inherit;
  text-align: center;
  cursor: pointer;
  color: var(--ink);
  background: var(--card-2);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.05s ease, filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { filter: brightness(1.1); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); color: var(--primary-ink); box-shadow: 0 6px 22px rgba(91, 108, 255, 0.35); }
.btn.accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 22px rgba(53, 208, 224, 0.3); }
.btn.ghost { background: transparent; border-color: var(--line); }
/* brightness() does nothing on a transparent fill, so ghost buttons get a
   quiet accent tint instead. Colour only, no movement. */
.btn.ghost:hover { background: rgba(53, 208, 224, 0.08); border-color: rgba(53, 208, 224, 0.45); filter: none; }
.btn.big { padding: 15px 28px; font-size: 17px; border-radius: 14px; }
.btn.small { padding: 8px 14px; font-size: 13.5px; border-radius: 10px; }

.row-btns { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
/* Phones: buttons fill their row (two short ones share it, a long label gets
   a row of its own, so no label wraps inside its button), and the big ones
   take a row each. The same rule as the homepage's in css/home.css. */
@media (max-width: 520px) {
  .row-btns .btn { flex: 1 1 auto; }
  .row-btns .btn.big { flex-basis: 100%; }
}

/* ---- Store badges ----
   Apple's and Google's own artwork, byte for byte as they supply it
   (img/app-store-badge.svg from Apple Marketing Tools, img/google-play-badge.png
   from Google). Both companies forbid redrawing or restyling their badge, so
   nothing here touches the artwork: no border, no glow, no filter, and never a
   width that would stretch it. What is left to get right is minimum height and
   the clear space around each one. Google's PNG already carries its clear space
   as transparent canvas (564x168 of artwork on a 646x250 sheet), Apple's SVG
   does not, so the padding below adds it. The two sizes differ on purpose: they
   land the visible artwork on the same 54px height. */
.store-row {
  display: flex; gap: 10px; justify-content: center;
  align-items: center; flex-wrap: wrap;
  margin: 32px 0 0;
}
.store-badge {
  display: inline-flex; align-items: center;
  text-decoration: none; border: 0; background: none;
  transition: opacity 0.15s ease;
}
.store-badge:hover { text-decoration: none; opacity: 0.88; }
.store-badge img { display: block; }

/* Apple: 54px of badge, plus a quarter of that as clear space. The
   content-box is deliberate. The site-wide border-box would count that
   padding inside the 54, shrinking the artwork to 26px and leaving Apple's
   badge half the size of Google's. */
.store-badge.apple img {
  box-sizing: content-box;
  height: 54px; width: auto; padding: 14px;
}
/* Google: the sheet is scaled so its 168/250 of artwork lands on 54px. */
.store-badge.google img { height: 80px; width: auto; }

/* A store button whose address is still a TODO. The /get/ script adds this,
   so pasting the real address in is all that is needed to bring the button
   back to life. */
.store-badge.disabled { opacity: 0.4; cursor: default; pointer-events: none; }

/* Apple and Google both require their attribution wherever the badge runs. */
.trademark-note {
  margin: 30px auto 0; max-width: 620px;
  font-size: 11.5px; line-height: 1.6; color: var(--ink-dim); opacity: 0.75;
}

/* ---- Cards and grids ---- */
.grid { display: grid; gap: 18px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grid.cols-3 { grid-template-columns: 1fr; } .grid.cols-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.card h3 { margin-top: 2px; }
.card .icon { margin-bottom: 14px; }

/* Drawn SVG icons sit in a soft tile */
.icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(53, 208, 224, 0.12);
  border: 1px solid rgba(53, 208, 224, 0.3);
}
.icon svg { display: block; }

/* ---- Browser frame ----
   A real capture of the teacher dashboard in a plain window frame, linked to
   the demo class. Used by the homepage (#demo) and the /schools/ hero. */
.browser {
  display: block; margin-top: 26px;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow), 0 0 44px rgba(53, 208, 224, 0.08);
  transition: border-color 0.18s ease;
}
.browser:hover { border-color: rgba(53, 208, 224, 0.5); text-decoration: none; }
.browser:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 16px; }
.browser-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; background: var(--card); border-bottom: 1px solid var(--line);
}
.browser-bar i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.browser-url {
  margin-left: 8px; font-size: 12.5px; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser img { display: block; width: 100%; height: auto; }

/* ---- Pills / badges ---- */
.pill {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(91, 108, 255, 0.18); color: #b9c2ff;
  border: 1px solid rgba(91, 108, 255, 0.4);
}
.pill.good { background: rgba(70, 224, 138, 0.14); color: var(--good); border-color: rgba(70, 224, 138, 0.4); }
.pill.warn { background: rgba(255, 207, 92, 0.14); color: var(--warn); border-color: rgba(255, 207, 92, 0.4); }

/* ---- Hero ---- */
.hero { position: relative; overflow: hidden; padding: 116px 0 100px; }
.hero .container { position: relative; z-index: 2; }
.hero-canvas {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  opacity: 0.68; pointer-events: none;
}
.hero-fade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 18, 38, 0) 40%, var(--bg) 96%);
}
.hero h1 .grad {
  background: linear-gradient(90deg, var(--accent), #7f8cff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { max-width: 620px; }

/* ---- Content pages (rules, legal, support) ---- */
.prose { max-width: 760px; }
.prose h2 { margin-top: 40px; }
.prose h3 { margin-top: 26px; }
.prose ul, .prose ol { padding-left: 24px; margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.prose code {
  font-family: ui-monospace, Menlo, monospace; font-size: 14px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 6px;
}
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--ink-dim); font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; }

.callout {
  background: rgba(53, 208, 224, 0.09);
  border: 1px solid rgba(53, 208, 224, 0.35);
  border-radius: 12px; padding: 16px 18px; margin: 0 0 16px;
}
.callout.warn { background: rgba(255, 207, 92, 0.1); border-color: rgba(255, 207, 92, 0.4); }

/* Worked example blocks on the rules page */
.example {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px; margin: 0 0 16px;
  font-variant-numeric: tabular-nums;
}
.example .label { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }

/* ---- FAQ details/summary ---- */
details.faq {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 0; margin-bottom: 12px; overflow: hidden;
}
details.faq summary {
  cursor: pointer; font-weight: 700; padding: 16px 20px; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: ""; width: 9px; height: 9px; flex: 0 0 auto;
  border-right: 2px solid var(--ink-dim); border-bottom: 2px solid var(--ink-dim);
  transform: rotate(45deg); transition: transform 0.15s ease; margin-right: 4px;
}
details.faq[open] summary::after { transform: rotate(225deg); }
details.faq .faq-body { padding: 0 20px 16px; color: var(--ink-dim); }
details.faq summary:hover { background: rgba(53, 208, 224, 0.06); }
details.faq[open] { border-color: rgba(53, 208, 224, 0.45); }
details.faq[open] summary { border-bottom: 1px solid var(--line); }
details.faq[open] .faq-body { padding-top: 14px; }
details.faq .faq-body > :last-child { margin-bottom: 0; }

/* ---- Footer ---- */
.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  background: rgba(15, 18, 38, 0.6);
  padding: 34px 0 44px;
  margin-top: 72px;
  font-size: 14px; color: var(--ink-dim);
}
.site-footer .inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 22px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.site-footer .foot-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
.site-footer nav { display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center; }
.site-footer a { color: var(--ink-dim); }
.site-footer a:hover { color: var(--ink); }
.site-footer .foot-note { flex-basis: 100%; margin-top: 10px; font-size: 13px; }
.site-footer .foot-legal { margin-top: 6px; font-size: 12px; opacity: 0.75; }
.site-footer .foot-legal a { color: inherit; }
/* reCAPTCHA v3 (Firebase App Check) badge: hidden, allowed because the
   footer carries Google's disclosure line on every page. */
.grecaptcha-badge { visibility: hidden; }

/* ---- Scroll reveal (classes are added by js/site-fx.js, so content is
        fully visible with no JS and under prefers-reduced-motion) ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
[data-reveal="2"].reveal { transition-delay: 0.1s; }
[data-reveal="3"].reveal { transition-delay: 0.2s; }

/* ---- Card hover lift ---- */
.card { transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.25s ease; }
a.card:hover {
  transform: translateY(-3px);
  border-color: rgba(53, 208, 224, 0.5);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 24px rgba(53, 208, 224, 0.08);
}

/* ---- Motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}