/* ==========================================================================
   B1nary Academy — site stylesheet
   --------------------------------------------------------------------------
   One stylesheet for the landing page and every static page. Previously each
   page carried its own inline <style> block with a violet palette that matched
   neither the other pages nor the app, so the site and the product it sells
   looked like two different products.

   Tokens mirror lib/screens/app_theme.dart exactly, so the site and the app
   share one identity. Light and dark are both first-class and follow the
   visitor's system setting, the same two themes the app ships.

   Body links use a separate accent token in each theme. The site browser
   check verifies text and important outline contrast on every base surface.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Brand — identical to AppColors in the Flutter app */
  --brand: #325be8;
  --brand-hover: #274ac4;
  --green: #11865f;
  --amber: #ff9500;
  --indigo: #5e5ce6;

  /* Light theme (AppColors.light*) */
  --bg: #f2f4f8;
  --surface: #e6ebf2;
  --card: #ffffff;
  --border: #cbd3df;
  --outline: #7c879a;
  --text: #14213a;
  --subtext: #45536b;
  --accent-text: #274ac4;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .05), 0 16px 48px rgba(0, 0, 0, .10);
  --hero-glow: radial-gradient(60% 60% at 50% 0%, rgba(0, 113, 227, .10), transparent 70%);

  /* Type scale — 1.25 ratio, clamped so it adapts without media queries */
  --step--1: clamp(.8125rem, .78rem + .15vw, .875rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.08rem + .35vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.25rem + .7vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.5vw, 2.6rem);
  --step-4: clamp(2.15rem, 1.6rem + 2.7vw, 3.75rem);

  /* Spacing — 4px rhythm */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;

  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --container: 1120px;
  --measure: 68ch; /* keeps long-form legal text readable */

  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur: 200ms;
}

/* Dark theme — the app's default, and this site's brand-forward look.
   Applied on system preference, or forced with data-theme="dark". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1422;
    --surface: #151e30;
    --card: #1b263b;
    --border: #2d3950;
    --outline: #8392ad;
    --text: #f5f7ff;
    --subtext: #a8b5cb;
    --accent-text: #8ebcff;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .5);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 48px rgba(0, 0, 0, .6);
    --hero-glow: radial-gradient(60% 60% at 50% 0%, rgba(0, 113, 227, .22), transparent 70%);
  }
}

:root[data-theme="dark"] {
  --bg: #0e1422;
  --surface: #151e30;
  --card: #1b263b;
  --border: #2d3950;
  --outline: #8392ad;
  --text: #f5f7ff;
  --subtext: #a8b5cb;
  --accent-text: #8ebcff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .5);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 48px rgba(0, 0, 0, .6);
  --hero-glow: radial-gradient(60% 60% at 50% 0%, rgba(0, 113, 227, .22), transparent 70%);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%; /* stops iOS enlarging text in landscape */
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh; /* dvh, not vh — vh is wrong under mobile browser chrome */
  overflow-x: hidden; /* belt and braces; no element should overflow anyway */
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

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

h1, h2, h3, h4 {
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
  text-wrap: balance; /* avoids a single orphaned word on a heading line */
}

h1 { font-size: var(--step-4); letter-spacing: -.035em; }
h2 { font-size: var(--step-3); letter-spacing: -.03em; }
h3 { font-size: var(--step-1); }

p { text-wrap: pretty; }

ul, ol { padding-left: 1.25em; }

/* Every interactive element gets a visible, high-contrast focus ring.
   :focus-visible rather than :focus so a mouse click does not show it. */
:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Accessibility helpers
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus { transform: translateY(0); color: #fff; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Honour a visitor who has asked their OS for less motion. Animations become
   effectively instant rather than merely shorter. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--sp-8); }
}

.section { padding-block: var(--sp-16); }

@media (min-width: 768px) {
  .section { padding-block: var(--sp-24); }
}

.section--tight { padding-block: var(--sp-12); }

.stack > * + * { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   5. Header and navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}

/* Older browsers with no color-mix support get a solid bar rather than an
   unreadable transparent one. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header { background: var(--bg); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 60px;
  padding-block: var(--sp-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
  padding: var(--sp-2) 0;
}

.brand:hover { color: var(--text); }

.brand__mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--brand), var(--indigo));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.nav__link {
  display: none;
  padding: var(--sp-2) var(--sp-3);
  color: var(--subtext);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
  border-radius: 8px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.nav__link:hover {
  color: var(--text);
  background: var(--surface);
}

.nav__link[aria-current="page"] { color: var(--text); font-weight: 600; }

/* Nav links are hidden on phones, where the footer carries the same links.
   Below 640px only the brand and the primary CTA remain, so nothing wraps. */
@media (min-width: 640px) {
  .nav__link { display: inline-block; }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px; /* comfortably above the 44px touch minimum */
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-pill);
  font-size: var(--step-0);
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* Transform only — never width/height/top/left — so pressing cannot reflow. */
.btn:active { transform: scale(.97); }

.btn--primary {
  background: var(--brand);
  color: #fff; /* 4.7:1 on --brand — AA */
}

.btn--primary:hover { background: var(--brand-hover); color: #fff; }

.btn--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--outline);
}

.btn--secondary:hover { background: var(--surface); color: var(--text); }

.btn--sm {
  min-height: 40px;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--step--1);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

@media (max-width: 479px) {
  /* Full-width stacked buttons on the smallest phones, where two side by side
     would each be too narrow to read. */
  .btn-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   7. Reusable pieces
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--subtext);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .01em;
}

.lede {
  font-size: var(--step-1);
  color: var(--subtext);
  max-width: 60ch;
  line-height: 1.6;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  height: 100%;
}

.grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.icon-tile {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--accent-text);
  margin-bottom: var(--sp-4);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .icon-tile { background: rgba(0, 113, 227, .14); }
}

/* --------------------------------------------------------------------------
   8. Long-form prose — the legal and support pages
   -------------------------------------------------------------------------- */

.prose { max-width: var(--measure); }

.prose h2 {
  font-size: var(--step-2);
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-3);
  scroll-margin-top: 90px; /* clears the sticky header when linked to */
}

.prose h3 {
  font-size: var(--step-1);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-2);
  scroll-margin-top: 90px;
}

.prose p,
.prose ul,
.prose ol { margin-bottom: var(--sp-4); color: var(--text); }

.prose li + li { margin-top: var(--sp-2); }

.prose strong { font-weight: 650; }

.prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin-block: var(--sp-12);
}

/* Tables scroll inside their own box rather than pushing the page sideways. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--sp-6);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  min-width: 460px;
}

th, td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th { font-weight: 650; background: var(--surface); }

tbody tr:last-child td { border-bottom: 0; }

.callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-6);
}

.callout p:last-child { margin-bottom: 0; }

/* Native disclosure widget — keyboard accessible and screen-reader friendly
   with no JavaScript at all. */
details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  margin-bottom: var(--sp-3);
}

summary {
  cursor: pointer;
  padding: var(--sp-4) var(--sp-6);
  font-weight: 600;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  list-style: none;
  border-radius: var(--radius);
}

summary::-webkit-details-marker { display: none; }

summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--subtext);
  border-bottom: 2px solid var(--subtext);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
  flex-shrink: 0;
}

details[open] > summary::after { transform: rotate(-135deg); }

summary:hover { background: var(--surface); }

details > *:not(summary) {
  padding-inline: var(--sp-6);
  padding-bottom: var(--sp-4);
  color: var(--subtext);
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-block: var(--sp-12);
  margin-top: var(--sp-16);
}

.footer-grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

.footer-heading {
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--text);
  margin-bottom: var(--sp-3);
}

.footer-list { list-style: none; padding: 0; }

.footer-list li + li { margin-top: var(--sp-1); }

.footer-list a {
  display: inline-block;
  padding: var(--sp-2) 0; /* keeps the tap target tall enough on phones */
  color: var(--subtext);
  text-decoration: none;
  font-size: var(--step--1);
}

.footer-list a:hover { color: var(--text); text-decoration: underline; }

.footer-legal {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  color: var(--subtext);
  font-size: var(--step--1);
}

.footer-legal p + p { margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   10. Scroll reveal — progressive enhancement
   -------------------------------------------------------------------------- */

/* Elements are visible by default. The class is only added by JavaScript once
   an observer is confirmed available, so with JS disabled, an old browser, or
   a failed script, the content simply shows. Hiding first and revealing later
   would leave a blank page in all three cases. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   11. Landing page — hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: var(--sp-16) var(--sp-12);
  background: var(--hero-glow);
}

@media (min-width: 1024px) {
  .hero { padding-block: var(--sp-24) var(--sp-16); }
}

.hero__inner {
  display: grid;
  gap: var(--sp-12);
  grid-template-columns: 1fr;
  align-items: center;
}

/* The illustration only appears once there is room for it to sit beside the
   copy. On phones the words do the work and the art would just push the
   call to action below the fold. */
.hero__art { display: none; }

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.05fr .95fr; gap: var(--sp-16); }
  .hero__art { display: block; }
}

.hero__copy > * + * { margin-top: var(--sp-5, 1.25rem); }

.hero h1 { margin-top: var(--sp-4); }

.hero .btn-row { margin-top: var(--sp-8); }

.hero__note {
  font-size: var(--step--1);
  color: var(--subtext);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   12. Landing page — app preview illustration
   -------------------------------------------------------------------------- */

.preview {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: var(--sp-5, 1.25rem);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--sp-3);
}

.preview__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: center;
}

.preview__row--tight { grid-template-columns: repeat(3, auto); justify-content: start; }

.preview__streak {
  background: linear-gradient(135deg, var(--amber), #ff5e3a);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  min-width: 84px;
}

.preview__streak-num { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1; }
.preview__streak-label { display: block; font-size: .6875rem; font-weight: 600; opacity: .95; margin-top: 2px; }

.preview__goal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}

.preview__goal-label { display: block; font-size: .6875rem; font-weight: 600; color: var(--subtext); }

.preview__bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  margin: var(--sp-2) 0;
  overflow: hidden;
}

.preview__bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--brand); }

.preview__goal-val { display: block; font-size: .6875rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.preview__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

.preview__tag {
  display: inline-block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.preview__q { font-size: .9375rem; font-weight: 650; margin: var(--sp-2) 0 var(--sp-3); }

/* A real, keyboard-operable sample; works even when JavaScript is disabled. */
.hero__art--interactive { display: block; }
.recall-demo { transform: none; }
.recall-demo .eyebrow { margin-bottom: var(--sp-6); }
.recall-demo .preview__tag { font-size: .75rem; }
.recall-demo .preview__q { font-size: var(--step-2); line-height: 1.3; margin: var(--sp-4) 0; }
.recall-demo > p:not(.eyebrow) { color: var(--subtext); }
.recall-demo__answer { margin-top: var(--sp-6); border: 1px solid var(--outline); border-radius: var(--radius); }
.recall-demo__answer summary { padding: var(--sp-4); color: var(--accent-text); font-weight: 700; cursor: pointer; }
.recall-demo__answer p { padding: 0 var(--sp-4) var(--sp-4); color: var(--text); }
.recall-demo .recall-demo__note { margin-top: var(--sp-4); font-size: .75rem; line-height: 1.6; }

.preview__opt {
  display: block;
  font-size: .8125rem;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--subtext);
}

.preview__opt + .preview__opt { margin-top: var(--sp-2); }

.preview__opt--right {
  border-color: var(--green);
  color: var(--text);
  font-weight: 600;
  background: color-mix(in srgb, var(--green) 12%, transparent);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .preview__opt--right { background: rgba(29, 185, 84, .12); }
}

.preview__chip {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--subtext);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--sp-1) var(--sp-3);
}

/* --------------------------------------------------------------------------
   13. Landing page — course cards and pricing
   -------------------------------------------------------------------------- */

.course__blurb { color: var(--subtext); margin-top: var(--sp-3); }

.course__note {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--subtext);
}

.price { position: relative; display: flex; flex-direction: column; }

.price--featured { border-color: var(--brand); box-shadow: var(--shadow); }

.price__flag {
  position: absolute;
  top: calc(var(--sp-3) * -1);
  left: var(--sp-6);
  background: var(--brand);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
}

.price__amount {
  font-size: var(--step-3);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-top: var(--sp-3);
  font-variant-numeric: tabular-nums;
}

.price__meta { font-size: var(--step--1); color: var(--subtext); margin-top: var(--sp-1); }

.price__list {
  list-style: none;
  padding: 0;
  margin-top: var(--sp-5, 1.25rem);
  color: var(--subtext);
  font-size: var(--step--1);
}

.price__list li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: var(--sp-2);
}

/* A drawn tick rather than an emoji, so it inherits colour and never renders
   as a different glyph on a different platform. */
.price__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 6px;
  height: 10px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(45deg);
}