/* ===========================================================================
   site.css — the public front page, on the marketing host. (Slice Z37.)

   IT OWNS NO COLOURS AND NO TYPEFACES.
   ---------------------------------------------------------------------------
   Every colour here is one of `app.css`'s custom properties, and the two
   families are the ones already self-hosted under /fonts. That is not tidiness:
   it means the website and the product cannot drift apart, it means dark mode
   works on this page without a line of dark-mode CSS (app.css redefines the
   tokens under `@media (prefers-color-scheme: dark)` and this file inherits the
   new values), and it means a school that has seen the site recognises the
   software when it opens.

   What this file does add is a DISPLAY SCALE. `app.css` stops at 36px, which is
   right for a page of work and far too small for a front page, so the `--site-*`
   sizes below extend the same ratio upward. New names, not redefinitions.

   WHY THERE IS NO `style=""` ANYWHERE
   ---------------------------------------------------------------------------
   `styleSrcAttr` is `self`, which does not admit an inline style attribute, so
   the browser refuses one outright — and gate 13 fails the build before it gets
   that far. The staggers below are `:nth-child()` for exactly that reason. The
   one thing JavaScript does set is a handful of custom properties through the
   CSSOM (`el.style.setProperty`), which is a script acting on an element rather
   than markup carrying a style, and is neither refused nor linted.

   MOTION IS OPT-IN TWICE.
   ---------------------------------------------------------------------------
   Nothing animates until `site.js` puts `motion-ready` on the root element, so
   a reader with no JavaScript gets the finished page rather than a blank one
   waiting for an observer. And `prefers-reduced-motion: reduce` switches the
   whole lot off at the bottom of this file, including the 3D.
   =========================================================================== */

:root {
  /* A FRONT PAGE IS NOT A POSTER. The first draft of this scale ran to 84px on
     a desktop and 64px on a phone, which put the headline alone past the fold
     on both and pushed the sentence that explains it off the screen entirely.
     A hero that cannot be read in one glance has failed at the one job it has.
     These sizes are large enough to carry a claim and small enough that the
     claim, the sentence under it and the first button share a screen. */
  --site-1:  1.0625rem;  /* 17 — body on a front page is bigger than in an app */
  --site-2:  1.1875rem;  /* 19 — lead paragraphs */
  --site-3:  1.375rem;   /* 22 — section sub-heads */
  --site-4:  1.75rem;    /* 28 — h2 on a phone */
  --site-5:  2.5rem;     /* 40 — h2 from tablet up */
  --site-6:  2.25rem;    /* 36 — h1 on a phone */
  --site-7:  4rem;       /* 64 — h1 on a desktop */

  --site-gut: 1.25rem;   /* the side gutter, never smaller than this */
  --site-max: 70rem;     /* 1120 — the content column */
  --site-sec: 5rem;      /* vertical rhythm between sections, phone */

  --site-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ─── Base ───────────────────────────────────────────────────────────────── */

/* A 3D card leaning toward the reader is WIDER than its box — perspective
   scales it up — and a card at `translateX(-1.4rem)` starts outside it. Both
   overhang, and an overhang on the root element is a horizontal scrollbar on a
   phone: the page rocks sideways under a thumb, which is the single most
   noticeable way a site can feel broken. Measured at 390px before this rule:
   9px at rest, 38px mid-scroll.
   Clipped in both places on purpose. `body` alone does not do it — the
   document element is what scrolls — and `clip` rather than `hidden` so
   neither one silently becomes a scroll container and breaks `position:
   sticky` on the bar and the law column. */
html:has(> body.site) { overflow-x: clip; }

body.site {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--site-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.site * { box-sizing: border-box; }

/* THE RESET IS WRAPPED IN :where() ON PURPOSE, AND IT IS NOT A FLOURISH.
   Written plainly, `.site p { margin: 0 }` is specificity (0,1,1) and beats
   every single-class component rule below it — so `.hero__sub { margin-top }`,
   `.fam__p`, `.iso__cap`, `.h2` and a dozen others were being silently
   overruled, and the only symptom was spacing that looked slightly wrong in
   places where a flex `gap` did not happen to cover for it. :where() scores
   zero, so these are defaults that anything can override, which is what a reset
   is supposed to be. */
:where(.site h1, .site h2, .site h3) {
  font-family: var(--display);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

:where(.site p, .site ul, .site ol) { margin: 0; }
/* THE SELECTOR HERE IS LOAD-BEARING, AND IT IS THE THIRD FORM, NOT THE FIRST.
   ------------------------------------------------------------------------
   app.css sets `a { color: var(--accent-ui) }` for the whole product, which
   is right in the console and wrong here: this page's links are headings,
   buttons and footer items, not prose links. So the colour has to be taken
   back. The question is only by how much.

   `.site a`      (0,1,1) — takes it back and keeps on taking. It outranks
                  every single-class component rule below it, which is how
                  `.btn--solid`, `.site__cta` and `.site__skip` — all three
                  anchors, all three at (0,1,0) — lost their own `color` and
                  inherited `--ink` from the body instead. Dark theme put
                  #e7eaef body text on solid green at 1.9:1 and light theme
                  put #14181f on it at 3.25:1. Exactly the fault that
                  `.site p { margin: 0 }` had, one property over.
   :where(.site a) (0,0,0) — gives it all back. `a` at (0,0,1) wins again and
                  every footer link turns teal on near-black at 2.68:1.
   :where(.site) a (0,0,1) — ties with `a`, and site.css is linked second, so
                  the tie goes to this file. Loses to any component that
                  states a colour of its own. This one. */
:where(.site) a { color: inherit; }

.site h1, .site h2, .site h3 { font-family: var(--display); text-wrap: balance; }

.site__skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: var(--bg);
  z-index: 60;
}
.site__skip:focus { left: var(--s-3); top: var(--s-3); border-radius: 6px; }

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

.wrap {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--site-gut);
}

/* ─── Shared pieces ──────────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ui);
}
.eyebrow--warn { color: var(--bad); }

.h2 {
  font-size: var(--site-4);
  font-weight: 700;
  margin-top: var(--s-3);
  max-width: 34ch;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 var(--s-6);
  border-radius: 8px;
  font-size: var(--site-1);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .18s var(--site-ease), background-color .18s, border-color .18s;
}
/* `--accent` AND `--accent-ink`, NOT `--accent-ui`. This was a real bug on the
   live site, reported 2026-10-03.

   `--accent-ui` is a FOREGROUND token. app.css tunes it per theme to clear
   4.5:1 as text against `--bg` and `--surface`: in light mode it is the school's
   colour darkened 12% with black, and in dark mode it flips to 42% colour on
   58% WHITE. Used as a button fill with white text that is 5.5:1 in light mode
   and **1.9:1 in dark mode** — the text all but disappears.

   `--accent` is the school's own colour and is never redefined, so a filled
   button is identical in both themes and `--accent-ink` is correct on it by
   construction. It is also exactly what `.btn--primary` in app.css does, which
   is the pattern this page should have copied in the first place. */
.btn--solid { background: var(--accent); color: var(--accent-ink); }
.btn--solid:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--accent) 88%, #000000);
}
.btn--quiet { border-color: var(--line-2); color: var(--ink); background: var(--surface); }
.btn--quiet:hover { border-color: var(--accent-ui); color: var(--accent-ui); }

/* ─── The bar ────────────────────────────────────────────────────────────── */

.site__bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background-color .25s;
}
.motion-ready .site__bar { backdrop-filter: saturate(1.4) blur(10px); }
.site__bar.is-stuck { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); }

.site__barin {
  max-width: var(--site-max);
  margin-inline: auto;
  padding: var(--s-3) var(--site-gut);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* THE MARK IS AN IMAGE NOW, AND ITS HEIGHT IS THE ONLY DIMENSION STATED.
   ------------------------------------------------------------------------
   The logo is 1.83:1 and carries its own wordmark inside the sun, so it has
   to be given enough height for that word to be worth having: 44px on a
   desktop bar, 34px on a phone, where the bar cannot afford more. `width:
   auto` with the intrinsic width and height on the <img> itself means the
   browser reserves the right box before the file arrives and the header does
   not jump — the same reason every other image on this page is measured.

   The old `.site__markdot` is gone with the text it sat beside. */
.site__mark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.site__logo {
  display: block;
  height: 34px;
  width: auto;
}
@media (min-width: 40rem) {
  .site__logo { height: 44px; }
}

.site__nav { display: none; gap: var(--s-6); margin-inline: auto; }
.site__nav a {
  font-size: var(--t-md);
  color: var(--muted);
  text-decoration: none;
  padding-block: var(--s-2);
}
.site__nav a:hover { color: var(--ink); }

.site__baract { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }

.site__ghost {
  display: none;
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.site__ghost:hover { color: var(--ink); }

.site__cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--s-4);
  border-radius: 7px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--t-md);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  padding-block: var(--s-10) var(--site-sec);
  background:
    radial-gradient(60rem 30rem at 85% -10%, var(--accent-wash), transparent 70%),
    var(--bg);
}

.hero__grid {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--site-gut);
  display: grid;
  gap: var(--s-12);
}

.hero__h {
  font-size: var(--site-6);
  font-weight: 800;
  margin-top: var(--s-4);
  max-width: 22ch;
}

.hero__sub {
  margin-top: var(--s-5);
  font-size: var(--site-2);
  color: var(--ink-2);
  max-width: 48ch;
}

.hero__btns {
  margin-top: var(--s-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.hero__facts {
  margin-top: var(--s-10);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
  max-width: 46ch;
}
.hero__facts li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--t-md);
  color: var(--muted);
}
.hero__facts li::before {
  content: "";
  position: absolute;
  left: .25rem; top: .55em;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--accent-ui);
}

/* ─── The 3D card stack ──────────────────────────────────────────────────
   One scene, four cards, each at its own depth. `--dp` is the scroll progress
   site.js writes (0 at rest, 1 when the hero has scrolled away); `--mx`/`--my`
   are the pointer, and only ever set on a fine pointer. Both default here, so
   the stack is composed and still with no script at all. */

.stage {
  --dp: 0;
  --mx: 0;
  --my: 0;
  /* Deeper on a phone = less apparent widening from perspective, which is what
     overhangs the gutter. The desktop block below brings the drama back. */
  perspective: 2000px;
  perspective-origin: 50% 40%;
  display: flex;
  justify-content: center;
  padding-block: var(--s-6);
}

.stage__deck {
  position: relative;
  /* 18rem, not 23: at 390px the gutter leaves 350px, and the deck has to hold
     its own width PLUS a 1.4rem lateral offset each side PLUS whatever
     perspective adds to the nearest card. */
  width: min(20rem, 100%);
  height: 25rem;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(7deg + (var(--my) * 4deg) - (var(--dp) * 7deg)))
    rotateY(calc(-16deg + (var(--mx) * 7deg) + (var(--dp) * 10deg)))
    rotateZ(-1deg);
  transition: transform .5s var(--site-ease);
}

.pcard {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--s-4);
  box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / .35);
  transform-style: preserve-3d;
  transition: transform .6s var(--site-ease), box-shadow .6s;
}

/* Each card's resting place, and where the scroll pushes it.

   A CASCADE, NOT A PILE. The first version stacked four full-width cards 4.5rem
   apart and every one but the top was a sliver — the receipt's total and the
   diary's subject were behind the card above them. These are narrower than the
   deck and alternate left and right, so each card's heading and its footer line
   are both legible, which is the only reason to show four rather than one.

   Percentages, not rem, so the cascade holds its shape from 390px to 1440px
   instead of needing a second set of offsets per breakpoint.

   Explicit classes rather than :nth-child, so re-ordering the markup cannot
   silently reshuffle the depths. */
.pcard { width: 58%; }

.pcard--register { top: 0;       left: 0;   width: 54%; transform: translate3d(0, 0, 80px)  translateY(calc(var(--dp) * -2.5rem)); }
.pcard--receipt  { top: 6rem;    left: 48%; width: 52%; transform: translate3d(0, 0, 36px)  translateX(calc(var(--dp) * 2.25rem)); }
.pcard--diary    { top: 12rem;   left: 2%;  width: 54%; transform: translate3d(0, 0, -8px)  translateX(calc(var(--dp) * -2rem)); }
.pcard--sheet    { top: 17.5rem; left: 46%; width: 54%; transform: translate3d(0, 0, -52px) translateY(calc(var(--dp) * 2.25rem)); }

.pcard__h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--mono);
}
.pcard__h b { color: var(--ink); letter-spacing: 0; text-transform: none; font-size: var(--t-sm); }

.pcard__rows { margin-top: var(--s-3); display: grid; gap: .3rem; }
.pcard__row {
  display: grid;
  grid-template-columns: 1.6rem 1fr 1.4rem;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--muted);
}
.pcard__row span { height: .45rem; border-radius: 3px; background: var(--sunken); }
.pcard__row em { font-style: normal; font-weight: 700; text-align: center; border-radius: 4px; }
.t-p { color: var(--good); }
.t-a { color: var(--bad); }
.t-l { color: var(--warn); }

.pcard__lines { margin-top: var(--s-3); display: grid; gap: .4rem; font-size: var(--t-sm); }
.pcard__lines > div { display: flex; justify-content: space-between; gap: var(--s-3); color: var(--muted); }
.pcard__lines b { font-family: var(--mono); color: var(--ink); }
.pcard__tot { border-top: 1px solid var(--line); padding-top: .4rem; }
.pcard__tot span { color: var(--ink); font-weight: 600; }

.pcard__body { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-2); }
.pcard__clip {
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  font-family: var(--mono);
  color: var(--accent-ui);
}

.pcard__bars { margin-top: var(--s-4); display: flex; align-items: flex-end; gap: .35rem; height: 3.5rem; }
.pcard__bar { flex: 1; border-radius: 3px 3px 0 0; background: var(--accent-line); }
.pcard__bar.b1 { height: 55%; }
.pcard__bar.b2 { height: 80%; }
.pcard__bar.b3 { height: 40%; }
.pcard__bar.b4 { height: 95%; background: var(--accent-ui); }
.pcard__bar.b5 { height: 68%; }

.pcard__f {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--line);
  font-size: var(--t-xs);
  color: var(--faint);
  font-family: var(--mono);
}

/* ─── The question ───────────────────────────────────────────────────────── */

.ask {
  padding-block: var(--site-sec);
  background: var(--ink);
  color: var(--surface);
}
.ask__q {
  font-family: var(--display);
  font-size: var(--site-4);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.02em;
  max-width: 30ch;
}
.ask__a {
  margin-top: var(--s-6);
  font-size: var(--site-1);
  color: color-mix(in srgb, var(--surface) 72%, var(--ink));
  max-width: 54ch;
}
.ask__a i { color: var(--surface); }

/* ─── The law section ────────────────────────────────────────────────────── */

.law { padding-block: var(--site-sec); background: var(--surface); }
.law__grid { display: grid; gap: var(--s-10); }

.law__date {
  margin-top: var(--s-4);
  font-family: var(--display);
  font-size: var(--site-4);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--bad);
  line-height: 1;
}
.law__d { font-size: 1.6em; display: block; }

.law__note { margin-top: var(--s-5); color: var(--ink-2); max-width: 44ch; }

.law__meter {
  margin-top: var(--s-6);
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
  max-width: 18rem;
}
.law__fill {
  --lp: 0;
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--lp));
  background: var(--bad);
  transition: transform .3s linear;
}

.law__list { list-style: none; padding: 0; display: grid; gap: var(--s-5); }
.duty {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--s-4);
  align-items: start;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
  font-size: var(--site-2);
}
.duty:last-child { border-bottom: 0; }
.duty__n {
  font-family: var(--mono);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--bad);
  padding-top: .35em;
}
.duty--end { font-size: var(--site-1); color: var(--muted); }
.duty--end .duty__n { color: var(--line-2); }

/* ─── Proofs ─────────────────────────────────────────────────────────────── */

.proof { padding-block: var(--site-sec); background: var(--bg); }
.proof__row { margin-top: var(--s-10); display: grid; gap: var(--s-5); }

.pr {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--s-6);
  transition: transform .3s var(--site-ease), box-shadow .3s, border-color .3s;
}
.pr:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: 0 1.5rem 2.5rem -1.5rem rgb(0 0 0 / .22);
}
.pr h3 { font-size: var(--site-3); font-weight: 700; }
.pr p { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--t-md); }
.pr__m {
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--accent-ui);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line);
}

/* The isolation object: three schools standing on one database.

   A SHALLOW TILT, NOT A BIRD'S EYE. The first version laid the scene back 52°
   and pinned each school by hand. At that angle the cards were slivers, the
   slab's label ran uphill, and nothing said what the picture meant — three
   unlabelled rectangles over a dark bar. The tilt is 18° now, easing to 6° as
   it comes into view, and the schools are named.

   Flow layout inside the scene, so the three columns and the pipes under them
   stay aligned at every width with no second set of coordinates. */
.iso {
  --ip: 0;
  margin-top: var(--s-12);
  perspective: 1500px;
  perspective-origin: 50% 50%;
  display: flex;
  justify-content: center;
}
.iso__scene {
  width: min(46rem, 100%);
  transform-style: preserve-3d;
  transform: rotateX(calc(18deg - (var(--ip) * 12deg)));
  transition: transform .7s var(--site-ease);
}

.iso__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }

.iso__school {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: var(--s-4);
  display: grid;
  gap: .45rem;
  align-content: start;
  box-shadow: 0 .75rem 1.5rem -.75rem rgb(0 0 0 / .25);
  transform: translateZ(calc(1.5rem + (var(--ip) * 2rem)));
  transition: transform .7s var(--site-ease);
}
.iso__school b {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iso__school span { height: .4rem; border-radius: 3px; background: var(--sunken); }
.iso__school--ours { border-color: var(--accent-line); }
.iso__school--ours b { color: var(--accent-ui); }
.iso__school--ours span { background: var(--accent-wash-2); }

/* The three pipes, each under its own school: what a school reaches, and the
   only thing it reaches. */
.iso__pipes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); height: 2.25rem; }
.iso__pipes i {
  justify-self: center;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, var(--line-2), var(--ink));
}
.iso__pipes i:first-child { background: linear-gradient(to bottom, var(--accent-ui), var(--ink)); }

.iso__slab {
  border-radius: 12px;
  background: var(--ink);
  color: var(--surface);
  padding: var(--s-5) var(--s-6);
  display: grid;
  gap: .25rem;
  text-align: center;
}
.iso__slab b {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -.01em;
}
.iso__slab em {
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--surface) 68%, var(--ink));
}

.iso__cap {
  margin-top: var(--s-8);
  text-align: center;
  font-size: var(--t-md);
  color: var(--muted);
  max-width: 52ch;
  margin-inline: auto;
}

/* ─── What's in it ───────────────────────────────────────────────────────── */

.what { padding-block: var(--site-sec); background: var(--surface); }
.what__grid { margin-top: var(--s-10); display: grid; gap: var(--s-4); }
.mod {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  transition: border-color .25s, transform .25s var(--site-ease);
}
.mod:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.mod h3 { font-size: var(--t-xl); font-weight: 700; }
.mod p { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--muted); }
.what__foot { margin-top: var(--s-8); font-size: var(--site-1); color: var(--ink-2); max-width: 60ch; }

/* ─── Families ───────────────────────────────────────────────────────────── */

.fam { padding-block: var(--site-sec); background: var(--bg); }
.fam__grid { display: grid; gap: var(--s-12); align-items: center; }
.fam__p { margin-top: var(--s-5); font-size: var(--site-2); color: var(--ink-2); max-width: 46ch; }
.fam__list { margin-top: var(--s-6); padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.fam__list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--t-md);
  color: var(--muted);
}
.fam__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: .7rem; height: .4rem;
  border-left: 2px solid var(--accent-ui);
  border-bottom: 2px solid var(--accent-ui);
  transform: rotate(-45deg);
}

.phone { display: flex; justify-content: center; }
.phone__shell {
  width: min(17rem, 80vw);
  border-radius: 2rem;
  border: 1px solid var(--line-2);
  background: var(--ink);
  padding: .6rem;
  box-shadow: 0 2rem 4rem -2rem rgb(0 0 0 / .45);
}
.motion-ready .phone__shell { animation: float 7s ease-in-out infinite; }
.phone__screen {
  background: var(--surface);
  border-radius: 1.6rem;
  padding: var(--s-5) var(--s-4);
  min-height: 21rem;
}
.phone__eyebrow { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); letter-spacing: .08em; }
.phone__h { margin-top: var(--s-4); font-family: var(--display); font-size: var(--t-lg); font-weight: 700; }
.phone__sub { font-family: var(--mono); font-size: var(--t-xs); color: var(--accent-ui); text-transform: uppercase; letter-spacing: .1em; }
.phone__body { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-2); }
.phone__clip { margin-top: var(--s-3); font-size: var(--t-xs); font-family: var(--mono); color: var(--accent-ui); }
.phone__rule { margin-block: var(--s-5); height: 1px; background: var(--line); }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ─── Honest ─────────────────────────────────────────────────────────────── */

.honest { padding-block: var(--site-sec); background: var(--surface); }
.honest__row { margin-top: var(--s-10); display: grid; gap: var(--s-4); }
.hon {
  padding: var(--s-6);
  border-radius: 12px;
  background: var(--bad-bg);
  border: 1px solid var(--bad-line);
}
.hon h3 { font-size: var(--t-xl); font-weight: 700; }
.hon p { margin-top: var(--s-3); font-size: var(--t-md); color: var(--ink-2); }
.honest__foot {
  margin-top: var(--s-8);
  font-family: var(--display);
  font-size: var(--site-3);
  font-weight: 600;
  letter-spacing: -.02em;
  max-width: 34ch;
}

/* ─── Talk ───────────────────────────────────────────────────────────────── */

.talk { padding-block: var(--site-sec); background: var(--bg); }
.talk__grid { display: grid; gap: var(--s-10); align-items: start; }
.talk__p { margin-top: var(--s-5); font-size: var(--site-1); color: var(--ink-2); max-width: 52ch; }
.talk__p--q { color: var(--ink); font-weight: 500; }

.talk__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--s-8);
  display: grid;
  gap: var(--s-3);
}
.talk__phone {
  font-family: var(--display);
  font-size: var(--site-4);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  word-break: break-word;
}
.talk__mail { font-size: var(--site-1); color: var(--ink-2); text-decoration: none; word-break: break-word; }
.talk__mail:hover { text-decoration: underline; }

/* The three things you can do, as buttons rather than as styled links.
   Deliberately NOT the hard offset shadow of the reference design: that
   belongs to another site's visual language and appears nowhere else on this
   page. What is borrowed is the affordance -- a solid fill, a verb, and the
   arrow that says the click leaves this page. */
.talk__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block: var(--s-2); }

.tbtn {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .72rem 1.15rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: var(--t-md);
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .12s ease, filter .12s ease;
}
.tbtn:hover { filter: brightness(1.06); }
.tbtn:active { transform: translateY(1px); }
.tbtn:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: 2px; }
.tbtn__arr { font-size: .9em; }

/* WhatsApp's own green. A brand button that is not the brand's colour is a
   button people do not recognise, which is the whole reason it is here. */
.tbtn--wa   { background: #25d366; color: #0b2e18; }
.tbtn--call { background: var(--accent-ui); color: #fff; }
.tbtn--mail { background: var(--ink); color: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  .tbtn { transition: none; }
  .tbtn:active { transform: none; }
}
.talk__meta { font-size: var(--t-md); color: var(--muted); }
.talk__rule { height: 1px; background: var(--line); margin-block: var(--s-3); }
.talk__small { font-size: var(--t-sm); color: var(--muted); }

/* ─── Footer ─────────────────────────────────────────────────────────────── */

/* THE FOOTER IS THE ONE INVERTED SURFACE ON THE PAGE, SO IT MIXES AGAINST
   `--bg` AND NOT `--surface`.
   ------------------------------------------------------------------------
   Its ground is `--ink`, which is near-black in the light theme and near-white
   in the dark one. `--bg` is the token that is always the far end from `--ink`
   — light where `--ink` is dark and dark where it is light — so a mix towards
   `--bg` is readable on this ground in both themes by construction.
   `--surface` is not: in the dark theme it is itself dark, so
   `mix(--surface 45%, --ink)` landed mid-grey on a near-white footer and the
   fine print measured 2.78:1. Every colour inside this footer is stated
   relative to `--bg`; nothing in here inherits from the page. */
.foot {
  padding-block: var(--s-10);
  background: var(--ink);
  color: color-mix(in srgb, var(--bg) 78%, var(--ink));
}
.foot__grid { display: grid; gap: var(--s-6); }
/* The footer carries the logo rather than the word, and carries it larger
   than the header does: there is room here, and this is the signature. */
.foot__logo { display: block; height: 52px; width: auto; }
.foot__by { font-size: var(--t-sm); margin-top: var(--s-1); }
/* A LINK IN THE FOOTER HAS TO LOOK LIKE ONE.
   `:where(.site) a` hands every anchor here the footer's own colour, which is
   right — the accent would be unreadable on this ground — but it also leaves
   the link indistinguishable from the text beside it. The underline is what
   says "link", and it is offset so it clears the descenders rather than
   striking through them. */
.foot__by-link {
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}
.foot__by-link:hover { color: var(--bg); text-decoration-color: currentColor; }
.foot__nav { display: grid; gap: var(--s-2); }
.foot__nav a { font-size: var(--t-md); text-decoration: none; }
.foot__nav a:hover { color: var(--bg); text-decoration: underline; }
.foot__fine {
  max-width: var(--site-max);
  margin: var(--s-8) auto 0;
  padding-inline: var(--site-gut);
  font-size: var(--t-xs);
  font-family: var(--mono);
  color: color-mix(in srgb, var(--bg) 62%, var(--ink));
}

/* ─── Scroll reveals ─────────────────────────────────────────────────────
   Only behind `motion-ready`, so with no script every `.reveal` is simply a
   normal element. The stagger is :nth-child because an inline `--i` would be
   a style attribute, which this page cannot carry. */

.motion-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--site-ease), transform .7s var(--site-ease);
}
.motion-ready .reveal.is-in { opacity: 1; transform: none; }

/* CAPPED AT SIX STEPS, AND THE SIXTH IS .25s.
   The module grid has ten cards in one parent, and a delay of n × 60ms put the
   tenth at 0.54 seconds after it entered — long enough that a reader scrolling
   at a normal speed watches the last two cards arrive late, which reads as the
   page being slow rather than as a flourish. Everything past the sixth shares
   one delay. */
.motion-ready .reveal:nth-child(2).is-in     { transition-delay: .05s; }
.motion-ready .reveal:nth-child(3).is-in     { transition-delay: .10s; }
.motion-ready .reveal:nth-child(4).is-in     { transition-delay: .15s; }
.motion-ready .reveal:nth-child(5).is-in     { transition-delay: .20s; }
.motion-ready .reveal:nth-child(6).is-in     { transition-delay: .25s; }
.motion-ready .reveal:nth-child(n+7).is-in   { transition-delay: .28s; }

/* ─── Wider screens ──────────────────────────────────────────────────────
   Mobile first throughout: every rule above is the phone, and these three
   blocks add columns as there is room for them. */

@media (min-width: 40rem) {        /* 640 — big phone, small tablet */
  :root { --site-sec: 6rem; --site-gut: 2rem; }
  .proof__row  { grid-template-columns: repeat(2, 1fr); }
  .what__grid  { grid-template-columns: repeat(2, 1fr); }
  .honest__row { grid-template-columns: repeat(2, 1fr); }
  .foot__grid  { grid-template-columns: 1fr auto; align-items: end; }
  .foot__nav   { justify-items: end; }
  .site__ghost { display: inline-flex; }
  .law__date   { font-size: var(--site-5); }
}

@media (min-width: 56rem) {        /* 896 — tablet landscape */
  :root { --site-sec: 7.5rem; }
  .h2 { font-size: var(--site-5); }
  .hero__h { font-size: 3rem; }
  .ask__q { font-size: var(--site-5); }
  .site__nav { display: flex; }
  .law__grid  { grid-template-columns: 22rem 1fr; gap: var(--s-12); }
  .law__stick { position: sticky; top: 7rem; align-self: start; }
  .fam__grid  { grid-template-columns: 1.1fr .9fr; }
  .talk__grid { grid-template-columns: 1.2fr .8fr; }
  .what__grid { grid-template-columns: repeat(3, 1fr); }
  .honest__row { grid-template-columns: repeat(3, 1fr); }
  /* The stack is still under the text here, with the whole column to itself —
     at 20rem the cards were 173px wide and every heading wrapped. */
  .stage__deck { width: min(26rem, 100%); height: 27rem; }
}

@media (min-width: 72rem) {        /* 1152 — desktop */
  .hero { padding-block: var(--s-12) var(--site-sec); }
  .hero__grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--s-8); }
  .hero__h { font-size: var(--site-7); }
  .ask__q { font-size: 2.75rem; }
  .proof__row { grid-template-columns: repeat(3, 1fr); }
  .what__grid { grid-template-columns: repeat(5, 1fr); }
  /* Room for the stack again, and a shallower perspective so it leans properly.
     There is no gutter to overhang out here. */
  .stage { perspective: 1400px; }
  .stage__deck { width: 25rem; height: 26rem; }
}

/* ─── Motion off ─────────────────────────────────────────────────────────
   One switch, and it means it: no reveal, no float, no parallax, no 3D. The
   stack and the isolation diagram flatten to a plain stacked set of cards,
   which is what they are underneath. */

@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal,
  .motion-ready .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .motion-ready .phone__shell { animation: none; }
  .site .btn, .site .pr, .site .mod { transition: none; }
  .stage { perspective: none; }
  .stage__deck { transform: none; transition: none; }
  .pcard { position: relative; top: auto; transform: none; transition: none; margin-bottom: var(--s-4); }
  .stage__deck { height: auto; }
  .iso { perspective: none; }
  .iso__scene { transform: none; transition: none; }
  .iso__school { transform: none; transition: none; }
}