/* =============================================================================
   Perch HQ — marketing website v1
   One stylesheet for every page. Plain CSS: no framework, no build step.

    1. Tokens — the brand colours from the brief, as variables
    2. Base
    3. Layout
    4. Type helpers
    5. Buttons and links
    6. Header, mega menus, mobile menu
    7. Footer
    8. Components — pills, cards, lists, icons, device frames, slips, badges, stamps
    9. Sections — hero, tree, ticker, count night, pricing, forms, legal, 404
   10. Motion — every animation sits behind prefers-reduced-motion: no-preference,
       and nothing starts hidden waiting for a script.
   ============================================================================= */

/* 1. TOKENS ------------------------------------------------------------------ */
/* Note: containers that clip use overflow: clip, never hidden. A hidden-overflow box is a scroll container,
   and it would capture the scroll timelines of the reveals inside it, leaving them stuck half-faded. */
:root {
  /* One brand hue: quill blue */
  --quill: #2742E0;
  --quill-hover: #1E33BB;
  --quill-tint: #E8EBFD;
  --quill-on-dark: #6D7FF2;

  /* Ink */
  --ink: #12142A;        /* headings */
  --ink-body: #33364A;   /* body */
  --ink-soft: #5A5E72;   /* secondary */

  /* True neutrals */
  --white: #FFFFFF;
  --paper: #F7F7F9;
  --paper-2: #EFEFF3;
  --rule: #E3E4EA;
  --rule-strong: #C9CBD6;

  /* Status — used for status and nothing else */
  --ok: #1B7A4A;
  --warn: #B4540A;
  --bad: #B42431;

  /* Ceremonial gold — spent on the count night, nowhere else */
  --gold: #8A6410;
  --gold-lit: #C9973A;   /* the same gold lifted, so small type reads at 4.5:1 on the dark */

  /* The app's dark */
  --night: #0E1020;
  --night-2: #14172E;

  /* Tints of the colours above (no new hues) */
  --ok-tint: color-mix(in srgb, var(--ok) 7%, var(--white));
  --warn-tint: color-mix(in srgb, var(--warn) 6%, var(--white));
  --bad-tint: color-mix(in srgb, var(--bad) 7%, var(--white));
  --quill-line: color-mix(in srgb, var(--quill) 28%, var(--white));
  --night-line: rgba(255, 255, 255, .11);
  --gold-line: color-mix(in srgb, var(--gold-lit) 34%, transparent);

  /* Type */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 1rem + .32vw, 1.25rem);
  --fs-h4: 1.125rem;
  --fs-h3: clamp(1.1875rem, 1.06rem + .42vw, 1.4375rem);
  --fs-h2: clamp(1.875rem, 1.25rem + 2.2vw, 3.125rem);
  --fs-h1: clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem);
  --fs-display: clamp(2.5rem, 1.4rem + 3.4vw, 4rem);

  /* Space and shape */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 76rem;
  --container-wide: 88rem;
  --section: clamp(4rem, 2.8rem + 4.4vw, 7rem);
  --header-h: 4.5rem;
  --r-sm: 6px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --shadow-sm: 0 1px 2px rgba(18, 20, 42, .06), 0 1px 1px rgba(18, 20, 42, .04);
  --shadow: 0 1px 2px rgba(18, 20, 42, .05), 0 10px 28px -10px rgba(18, 20, 42, .16);
  --shadow-lg: 0 2px 6px rgba(18, 20, 42, .06), 0 34px 64px -24px rgba(18, 20, 42, .32);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.5, .64, 1);
}

/* 2. BASE -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1.25rem);
  color-scheme: light;
}
/* Very wide screens: the whole layout grows a little, so a 3440 px monitor reads like a large laptop */
@media (min-width: 1600px) {
  html { font-size: clamp(100%, .3043vw + 69.56%, 135%); }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-body);
  background: var(--white);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, picture, video { display: block; max-width: 100%; }
figure, blockquote { margin: 0; }
[hidden] { display: none !important; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.034em; }
h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.03em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.016em; }
h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }

a { color: var(--quill); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--quill-hover); }

:focus-visible { outline: 3px solid var(--quill); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--quill-on-dark); }
::selection { background: var(--quill-tint); color: var(--ink); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .75rem 1rem; border-radius: var(--r-sm);
  background: var(--ink); color: var(--white); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--white); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }

/* The icon sprite lives at the top of each page; kept renderable so its filters work */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 3. LAYOUT ------------------------------------------------------------------ */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); }
.container--narrow { width: min(100% - 2 * var(--gutter), 48rem); }

.section { position: relative; padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .62); }
.section--flush-top { padding-top: 0; }
.section--paper { background: var(--paper); }
.section--rule { border-top: 1px solid var(--rule); }
.section--dark { background: var(--night); color: var(--rule-strong); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }

.stack > * + * { margin-top: var(--stack, 1rem); }
.stack--sm { --stack: .5rem; }
.stack--lg { --stack: 1.5rem; }

.grid { display: grid; gap: var(--gap, 1.25rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.split { display: grid; gap: clamp(2.25rem, 5vw, 5rem); align-items: center; }
.split > *, .hero__grid > *, .page-hero__grid > *, .cn-grid > *, .feature > *, .price > *, .grid > * { min-width: 0; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--text-wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .split--reverse > :first-child { order: 2; }
  .split--top { align-items: start; }
}

/* 4. TYPE HELPERS ------------------------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: .625rem;
  margin: 0;
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.3;
  color: var(--ink-soft);
}
.eyebrow__no {
  display: inline-grid; place-items: center; min-width: 2.25em; padding: .22em .45em;
  border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--white);
  color: var(--ink); font-weight: 600; letter-spacing: .04em;
}
.eyebrow--quill { color: var(--quill); }
.eyebrow--quill .eyebrow__no { border-color: var(--quill-line); background: var(--quill-tint); color: var(--quill); }
.section--dark .eyebrow, .on-dark .eyebrow { color: var(--rule-strong); }
.section--dark .eyebrow__no, .on-dark .eyebrow__no { background: transparent; border-color: rgba(255, 255, 255, .28); color: var(--white); }

.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-body); max-width: 40em; }
.section--dark .lead, .on-dark .lead { color: var(--rule-strong); }
.copy { font-size: var(--fs-md); line-height: 1.65; }
.soft { color: var(--ink-soft); }
.small { font-size: var(--fs-sm); }

/* A highlighter stroke under the key words of a heading */
.hl {
  background: linear-gradient(transparent 64%, var(--quill-tint) 64%, var(--quill-tint) 92%, transparent 92%) no-repeat;
  background-size: 100% 100%;
  padding-inline: .06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.text-quill { color: var(--quill); }

.section-head { display: grid; gap: 1rem; max-width: 50rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head--wide { max-width: none; }
.section-head--ruled { max-width: none; padding-bottom: 1.5rem; border-bottom: 2px solid var(--ink); }
.section--dark .section-head--ruled { border-bottom-color: var(--night-line); }
@media (min-width: 960px) {
  .section-head--split { max-width: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 4rem; align-items: end; }
  .section-head--split > .eyebrow { grid-column: 1 / -1; justify-self: start; }
}

/* 5. BUTTONS AND LINKS ------------------------------------------------------- */
.btn {
  --btn-bg: var(--quill); --btn-fg: var(--white); --btn-border: var(--quill);
  --btn-glow: rgba(39, 66, 224, .42);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .75rem 1.375rem;
  font: 600 1rem/1.2 var(--sans); letter-spacing: -.005em;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-border); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(18, 20, 42, .12), 0 8px 18px -10px var(--btn-glow);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--ease-out), background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .3) 50%, transparent 68%);
  transform: translateX(-130%);
}
.btn:hover {
  --btn-bg: var(--quill-hover); --btn-border: var(--quill-hover);
  color: var(--btn-fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 4px rgba(18, 20, 42, .12), 0 14px 26px -12px var(--btn-glow);
}
.btn:active { transform: translateY(0) scale(.985); }
.btn .icon { width: 1.125rem; height: 1.125rem; transition: transform .25s var(--ease-out); }

.btn--secondary {
  --btn-bg: var(--white); --btn-fg: var(--ink); --btn-border: var(--rule-strong);
  --btn-glow: rgba(18, 20, 42, .18);
  box-shadow: var(--shadow-sm);
}
.btn--secondary::after { background: linear-gradient(105deg, transparent 32%, rgba(39, 66, 224, .09) 50%, transparent 68%); }
.btn--secondary:hover { --btn-bg: var(--white); --btn-fg: var(--quill); --btn-border: var(--quill); }

.btn--ghost-dark { --btn-bg: transparent; --btn-fg: var(--white); --btn-border: rgba(255, 255, 255, .38); box-shadow: none; }
.btn--ghost-dark:hover { --btn-bg: rgba(255, 255, 255, .08); --btn-fg: var(--white); --btn-border: var(--white); box-shadow: none; }
.btn--white { --btn-bg: var(--white); --btn-fg: var(--quill); --btn-border: var(--white); --btn-glow: rgba(0, 0, 0, .3); }
.btn--white:hover { --btn-bg: var(--quill-tint); --btn-fg: var(--quill-hover); --btn-border: var(--quill-tint); }
.btn--white::after { background: linear-gradient(105deg, transparent 32%, rgba(39, 66, 224, .12) 50%, transparent 68%); }

.btn--lg { min-height: 3.5rem; padding: .95rem 1.75rem; font-size: 1.0625rem; border-radius: 12px; }
.btn--sm { min-height: 2.5rem; padding: .5rem 1rem; font-size: .9375rem; border-radius: 9px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
@media (max-width: 479px) {
  .hero__actions .btn, .page-hero .btn-row .btn, .cta .btn-row .btn, .lost .btn-row .btn { flex: 1 1 100%; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; color: var(--quill); text-decoration: none;
}
.link-arrow > span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s var(--ease-out);
  padding-bottom: 1px;
}
.link-arrow:hover > span { background-size: 100% 1px; }
.link-arrow .icon { width: 1.1em; height: 1.1em; transition: transform .25s var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(4px); }
.on-dark .link-arrow, .section--dark .link-arrow { color: var(--quill-on-dark); }

/* 6. HEADER ------------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.header__inner { position: relative; display: flex; align-items: stretch; gap: 1rem; height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .625rem; flex: none; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand .mark { width: 2.25rem; height: 2.25rem; overflow: visible; }
.wordmark { font-size: 1.3125rem; line-height: 1; letter-spacing: -.022em; white-space: nowrap; color: var(--ink); }
.wordmark b { font-weight: 700; }
.wordmark span { font-weight: 400; color: var(--ink-soft); }

.nav { display: none; margin-left: auto; }
.nav__list { display: flex; align-items: stretch; gap: .125rem; height: 100%; margin: 0; padding: 0; list-style: none; }
.nav__item { display: flex; align-items: center; }
.nav__link {
  display: inline-flex; align-items: center; padding: .5rem .7rem; border-radius: 8px;
  font-size: .9375rem; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.nav__link:hover { color: var(--quill); background: var(--paper); }
.nav__link[aria-current="page"] { color: var(--quill); box-shadow: inset 0 -2px 0 var(--quill); border-radius: 8px 8px 0 0; }
.nav__toggle {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-left: -.45rem; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--ink-soft); cursor: pointer;
}
.nav__toggle:hover { color: var(--quill); background: var(--paper); }
.nav__toggle .icon { width: .95rem; height: .95rem; transition: transform .2s var(--ease-out); }

.header__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.header__signin {
  display: none; align-items: center; gap: .4rem; padding: .5rem .75rem; border-radius: 8px;
  font-size: .9375rem; font-weight: 500; color: var(--ink); text-decoration: none;
}
.header__signin:hover { color: var(--quill); background: var(--paper); }
.menu-btn {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--white); color: var(--ink); cursor: pointer;
}
.menu-btn .icon { width: 1.35rem; height: 1.35rem; }
.menu-btn .icon--close { display: none; }
.menu-btn[aria-expanded="true"] .icon--open { display: none; }
.menu-btn[aria-expanded="true"] .icon--close { display: block; }

@media (min-width: 560px) { .header__signin { display: inline-flex; } }
@media (max-width: 380px) { .header__actions .btn { display: none; } }
@media (min-width: 1100px) {
  .nav { display: block; }
  .header__actions { margin-left: .75rem; }
  .menu-btn { display: none; }
}

/* Mega menus — open on hover and keyboard focus with CSS alone; site.js adds click, Escape and aria-expanded */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  margin-top: 1px; padding: 1.25rem;
  background: var(--white); border: 1px solid var(--rule); border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
  transition: opacity .16s ease, transform .2s var(--ease-out), visibility 0s linear .2s;
}
.has-mega:hover > .mega,
.has-mega:focus-within > .mega,
.has-mega.is-open > .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .16s ease .05s, transform .22s var(--ease-out) .05s, visibility 0s;
}
.has-mega.is-shut > .mega { opacity: 0; visibility: hidden; pointer-events: none; }
.has-mega:hover .nav__toggle .icon, .has-mega.is-open .nav__toggle .icon { transform: rotate(180deg); }
.has-mega.is-shut .nav__toggle .icon { transform: none; }

.mega__grid { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr) 17rem; gap: 1.25rem; }
.mega__intro { padding: .75rem 1.25rem .75rem .5rem; border-right: 1px solid var(--rule); }
.mega__intro p:not(.eyebrow) { margin-top: .5rem; font-size: .9375rem; color: var(--ink-body); }
.mega__intro .link-arrow { margin-top: 1rem; font-size: .9375rem; }
.mega__links { display: grid; grid-template-columns: 1fr 1fr; gap: .125rem .5rem; margin: 0; padding: 0; list-style: none; align-content: start; }
.mega__link {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .75rem; align-items: start;
  padding: .65rem .7rem; border-radius: 10px; color: var(--ink); text-decoration: none;
  transition: background-color .15s;
}
.mega__link:hover { background: var(--paper); color: var(--ink); }
.mega__icon {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9px;
  background: var(--quill-tint); color: var(--quill);
  transition: background-color .2s, color .2s, transform .25s var(--ease-spring);
}
.mega__icon .icon { width: 1.15rem; height: 1.15rem; }
.mega__link:hover .mega__icon { background: var(--quill); color: var(--white); transform: rotate(-6deg) scale(1.06); }
.mega__title { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.mega__desc { display: block; margin-top: .15rem; font-size: .8125rem; line-height: 1.4; color: var(--ink-soft); }
.mega__promo {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .75rem;
  padding: 1.25rem; border-radius: var(--r); background: var(--night); color: var(--rule-strong);
}
.mega__promo .eyebrow { color: var(--quill-on-dark); }
.mega__promo .mega__promo-figure { font-family: var(--mono); font-size: 2rem; line-height: 1; letter-spacing: -.04em; color: var(--white); }
.mega__promo-figure small { font-size: .8rem; letter-spacing: 0; color: var(--rule-strong); }
.mega__promo p:not(.eyebrow):not(.mega__promo-figure) { font-size: .875rem; }
.mega__promo .btn { margin-top: auto; align-self: flex-start; }
.mega__promo-lines {
  position: absolute; inset: auto -10% -30% 30%; height: 70%; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(180deg, transparent 0 15px, var(--night-line) 15px 16px);
  transform: rotate(-8deg);
}
.mega__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.mega__col { padding: .5rem .5rem .75rem; }
.mega__col-head { display: flex; align-items: center; gap: .6rem; padding: 0 .55rem .65rem; margin-bottom: .35rem; border-bottom: 2px solid var(--ink); }
.mega__col-head .eyebrow { color: var(--ink); font-weight: 600; }
.mega__col ul { margin: 0; padding: 0; list-style: none; }
.mega__col a {
  display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 8px;
  font-size: .9063rem; color: var(--ink-body); text-decoration: none;
}
.mega__col a .icon { width: 1.05rem; height: 1.05rem; color: var(--ink-soft); transition: color .15s, transform .2s var(--ease-out); }
.mega__col a:hover { background: var(--paper); color: var(--ink); }
.mega__col a:hover .icon { color: var(--quill); transform: translateX(2px); }
.mega__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: 1rem; padding: .85rem .75rem 0; border-top: 1px solid var(--rule); font-size: .875rem; color: var(--ink-soft);
}

/* Mobile menu */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 61; overflow-y: auto; overscroll-behavior: contain;
  padding: .5rem var(--gutter) 2.5rem; background: var(--white); border-top: 1px solid var(--rule);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__list { margin: 0; padding: 0; list-style: none; }
.mobile-nav__list > li { border-bottom: 1px solid var(--rule); }
.mobile-nav__list > li > a, .mobile-nav__list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem .25rem;
  font-size: 1.125rem; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; list-style: none;
}
.mobile-nav__list summary::-webkit-details-marker { display: none; }
.mobile-nav__list summary .icon { transition: transform .2s var(--ease-out); color: var(--ink-soft); }
.mobile-nav__list details[open] summary .icon { transform: rotate(180deg); }
.mobile-nav__sub { display: grid; gap: .25rem; margin: 0; padding: 0 0 1rem; list-style: none; }
.mobile-nav__sub a {
  display: flex; align-items: center; gap: .75rem; padding: .6rem .5rem; border-radius: 8px;
  color: var(--ink-body); text-decoration: none;
}
.mobile-nav__sub a .icon { color: var(--quill); }
.mobile-nav__sub-head { padding: .75rem .5rem .25rem; }
.mobile-nav__cta { display: grid; gap: .75rem; margin-top: 1.5rem; }
html.menu-open { overflow: hidden; }

/* 7. FOOTER ------------------------------------------------------------------ */
.site-footer { position: relative; overflow: clip; background: var(--night); color: var(--rule-strong); }
.footer__top { display: grid; gap: 3rem; padding-block: clamp(3.5rem, 6vw, 5.5rem) 3rem; }
@media (min-width: 960px) { .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); } }
.footer__brand .brand { color: var(--white); }
.footer__brand .wordmark { color: var(--white); }
.footer__brand .wordmark span { color: var(--rule-strong); }
.footer__tag { margin-top: 1rem; max-width: 22rem; color: var(--rule-strong); }
.footer__brand .btn { margin-top: 1.5rem; }
.footer__menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 2rem 1.5rem; }
@media (min-width: 960px) { .footer__menu { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.45fr); } }
.footer__h {
  margin: 0 0 1rem; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--white);
}
.footer__menu ul { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.footer__menu a { color: var(--rule-strong); text-decoration: none; font-size: .9375rem; }
.footer__menu a:hover { color: var(--white); text-decoration: underline; }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem;
  padding-block: 1.5rem 2rem; border-top: 1px solid var(--night-line); font-size: .875rem;
}
.footer__bottom ul { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.footer__bottom a { color: var(--rule-strong); }
.footer__bottom a:hover { color: var(--white); }
.footer__giant {
  margin: 0; padding: 0 var(--gutter); overflow: hidden; white-space: nowrap; user-select: none;
  font-size: clamp(4.5rem, 19vw, 19rem); font-weight: 700; letter-spacing: -.055em; line-height: .78;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .09);
  text-align: center; transform: translateY(14%);
}

/* 8. COMPONENTS -------------------------------------------------------------- */

/* Icons (from the inline sprite) */
.icon {
  display: inline-block; flex: none; width: 1.5rem; height: 1.5rem; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 2rem; height: 2rem; }

/* Status pills — the same chips the app uses */
.pill {
  display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .5rem;
  border: 1px solid currentColor; border-radius: 6px; background: var(--white);
  font-family: var(--mono); font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  line-height: 1.4; text-transform: uppercase; white-space: nowrap;
}
.pill .icon { width: .85rem; height: .85rem; stroke-width: 2.5; }
.pill--ok { color: var(--ok); background: var(--ok-tint); }
.pill--warn { color: var(--warn); background: var(--warn-tint); }
.pill--bad { color: var(--bad); background: var(--bad-tint); }
.pill--quill { color: var(--quill); background: var(--quill-tint); }
.pill--neutral { color: var(--ink-soft); background: var(--paper); border-color: var(--rule-strong); }

/* Tags — quiet labels, not status */
.tag {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--rule); font-size: .8125rem; font-weight: 500; color: var(--ink-body);
}
.tag .icon { width: .95rem; height: .95rem; color: var(--quill); }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }

/* Cards */
.card {
  --pad: clamp(1.25rem, 2.4vw, 1.75rem);
  position: relative; padding: var(--pad);
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r);
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.card h3 { font-size: 1.125rem; letter-spacing: -.012em; }
.card p { margin-top: .5rem; color: var(--ink-soft); font-size: .9688rem; }
.card__icon {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem;
  border-radius: 11px; background: var(--quill-tint); color: var(--quill);
  transition: background-color .25s, color .25s, transform .35s var(--ease-spring);
}
.card__icon .icon { width: 1.35rem; height: 1.35rem; }
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--quill-line); }
.card--hover:hover .card__icon { background: var(--quill); color: var(--white); transform: rotate(-6deg) scale(1.05); }
.card--paper { background: var(--paper); }
.card__more { margin-top: 1rem; }
.card__ref { position: absolute; top: 1.1rem; right: 1.2rem; font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; color: var(--ink-soft); }

/* The ledger list — icon, title and a line, between ruled lines */
.ledger { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.ledger > li {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .25rem 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
}
.ledger__icon {
  grid-row: 1 / span 2; align-self: start;
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px;
  background: var(--quill-tint); color: var(--quill); transition: background-color .25s, color .25s;
}
.ledger__icon .icon { width: 1.25rem; height: 1.25rem; }
.ledger > li:hover .ledger__icon { background: var(--quill); color: var(--white); }
.ledger h3 { font-size: 1.0625rem; line-height: 1.35; padding-top: .2rem; }
.ledger p { grid-column: 2; color: var(--ink-soft); font-size: .9688rem; }
.ledger--compact > li { padding: .8rem 0; }
@media (min-width: 900px) { .ledger--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; } }
.section--dark .ledger { border-top-color: var(--night-line); }
.section--dark .ledger > li { border-bottom-color: var(--night-line); }
.section--dark .ledger p { color: var(--rule-strong); }

/* Ticks list */
.ticks { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ticks li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .6rem; align-items: start; }
.ticks li::before {
  content: ""; width: 1.4rem; height: 1.4rem; margin-top: .08rem; border-radius: 50%;
  background: var(--quill-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232742E0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.section--dark .ticks li::before, .on-dark .ticks li::before { background-color: rgba(109, 127, 242, .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D7FF2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* Figures and captions */
.fig { margin: 0; }
.fig__cap { display: flex; gap: .75rem; align-items: baseline; margin-top: .9rem; font-size: .875rem; color: var(--ink-soft); line-height: 1.45; }
.fig__no { flex: none; font-family: var(--mono); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.section--dark .fig__cap { color: var(--rule-strong); }
.section--dark .fig__no { color: var(--white); }

/* Browser frame — for app screenshots on the page */
.browser {
  position: relative; overflow: clip; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--white); box-shadow: var(--shadow-lg);
  transition: transform .5s var(--ease-out), box-shadow .5s;
}
.browser__bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem;
  padding: .5rem .75rem; background: var(--paper); border-bottom: 1px solid var(--rule);
}
.browser__dots { display: flex; gap: 6px; }
.browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-strong); }
.browser__url {
  justify-self: center; max-width: 100%; min-width: 0; padding: .18rem .8rem; border-radius: 6px;
  border: 1px solid var(--rule); background: var(--white);
  font-family: var(--mono); font-size: .6875rem; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser__url b { font-weight: 600; color: var(--ink); }
.browser__spacer { width: 39px; }
.browser__view { position: relative; overflow: hidden; background: var(--paper); }
.browser__view img { width: 100%; }
.tilt { transform: perspective(1600px) rotateX(2deg) rotateY(-5deg); }
.tilt:hover { transform: perspective(1600px) rotateX(0) rotateY(0); }
.tilt--left { transform: perspective(1600px) rotateX(2deg) rotateY(5deg); }
.tilt--left:hover { transform: perspective(1600px) rotateX(0) rotateY(0); }

/* Screens that pan slowly through a full-page screenshot */
.pan { position: relative; overflow: hidden; aspect-ratio: var(--view, 16 / 10); }
.pan > img { width: 100%; }

/* Floating slips — small callouts beside a screen */
.slip {
  position: absolute; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .1rem .75rem;
  min-width: 14.5rem; max-width: 19rem; padding: .7rem .9rem .75rem .75rem;
  background: var(--white); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow-lg);
  font-size: .875rem;
}
.slip__icon { grid-row: span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9px; }
.slip__icon .icon { width: 1.2rem; height: 1.2rem; stroke-width: 2; }
.slip__icon--quill { background: var(--quill-tint); color: var(--quill); }
.slip__icon--ok { background: var(--ok-tint); color: var(--ok); }
.slip__icon--warn { background: var(--warn-tint); color: var(--warn); }
.slip__label { font-family: var(--mono); font-size: .65rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.4; }
.slip__label--ok { color: var(--ok); }
.slip__label--quill { color: var(--quill); }
.slip__text { font-weight: 600; color: var(--ink); line-height: 1.3; }

/* Rotating ring badge — the "wheel" */
.ring { position: relative; display: grid; place-items: center; width: var(--ring, 8rem); aspect-ratio: 1; }
.ring__disc {
  position: absolute; inset: 0; border-radius: 50%; background: var(--white);
  box-shadow: 0 0 0 1px var(--rule), var(--shadow);
}
.ring__text { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring__text text { font-family: var(--mono); font-size: 13.2px; font-weight: 600; letter-spacing: .12em; fill: var(--ink); text-transform: uppercase; }
.ring__mark { position: relative; width: 38%; }
.ring--quill .ring__disc { background: var(--quill); box-shadow: 0 0 0 1px var(--quill), 0 18px 34px -14px rgba(39, 66, 224, .6); }
.ring--quill .ring__text text { fill: var(--white); }
.ring--night .ring__disc { background: var(--night); box-shadow: 0 0 0 1px var(--night-line), var(--shadow); }
.ring--night .ring__text text { fill: var(--white); }

/* Ink stamps — the minute book's own marks */
.stamp { display: block; width: var(--stamp, 9rem); color: var(--quill); transform: rotate(var(--rot, -9deg)); }
.stamp text { font-family: var(--sans); fill: currentColor; text-transform: uppercase; }
.stamp .stamp__word { font-weight: 800; letter-spacing: .02em; }
.stamp .stamp__ring { font-family: var(--mono); font-weight: 600; letter-spacing: .14em; }
.stamp--ok { color: var(--ok); }
.stamp--ink { color: var(--ink); }

/* Photo frames */
.photo { position: relative; margin: 0; overflow: clip; border-radius: var(--r-lg); background: var(--paper-2); isolation: isolate; }
.photo > img, .photo > picture > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.photo:hover > img, .photo:hover > picture > img { transform: scale(1.035); }
.photo--tall { aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 3 / 2; }
.photo__tag {
  position: absolute; left: .85rem; bottom: .85rem; z-index: 2; display: inline-flex; align-items: center; gap: .5rem;
  max-width: calc(100% - 1.7rem); padding: .45rem .7rem; border-radius: 8px;
  background: rgba(255, 255, 255, .94); box-shadow: var(--shadow-sm);
  font-family: var(--mono); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.photo__tag .icon { width: .95rem; height: .95rem; color: var(--quill); }
/* Where a licensed photograph will go and none is in place yet */
.photo--slot {
  display: grid; place-items: center; padding: 2rem; text-align: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(39, 66, 224, .05) 14px 15px),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  border: 1px dashed var(--rule-strong);
}
.photo--slot p { max-width: 22rem; font-size: .9375rem; color: var(--ink-soft); }
.photo--slot .icon { margin: 0 auto .75rem; width: 2rem; height: 2rem; color: var(--quill); }

/* Stat line — mono numbers between rules */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.stats li { padding: 1.1rem 1.25rem 1.1rem 0; border-bottom: 1px solid var(--rule); }
.stats__fig { display: block; font-family: var(--mono); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); font-weight: 500; letter-spacing: -.04em; color: var(--ink); line-height: 1.1; }
.stats__label { display: block; margin-top: .3rem; font-size: .875rem; color: var(--ink-soft); }

/* Process line — steps across a heavy rule */
.steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
.steps > li { position: relative; padding: 1.4rem 1.5rem 1.25rem 0; border-top: 2px solid var(--ink); }
.steps > li::before {
  content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--quill);
}
.steps__no { display: block; margin-bottom: .5rem; font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--quill); }
.steps h3 { font-size: 1.0625rem; }
.steps p { margin-top: .35rem; color: var(--ink-soft); font-size: .9375rem; }
@media (max-width: 899px) { .steps > li { padding-left: 1.75rem; border-top: 0; border-left: 2px solid var(--ink); padding-top: .1rem; padding-bottom: 1.5rem; } .steps > li::before { top: 0; left: -7px; } }

/* 9. SECTIONS ---------------------------------------------------------------- */

/* Ledger-ruled backgrounds */
.ruled { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ruled::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(2rem - 1px), var(--rule) calc(2rem - 1px) 2rem);
  -webkit-mask-image: radial-gradient(130% 95% at 25% 0%, #000 22%, transparent 72%);
  mask-image: radial-gradient(130% 95% at 25% 0%, #000 22%, transparent 72%);
}
.ruled::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: max(var(--gutter), calc((100% - var(--container)) / 2 - 3rem));
  width: 5px; border-inline: 1px solid var(--quill-line); opacity: .7;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 40%, transparent 92%);
}
@media (max-width: 1199px) { .ruled::after { display: none; } }

/* Home hero */
.hero { position: relative; overflow: clip; padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 5rem) clamp(3.5rem, 2rem + 5vw, 7rem); }
.hero__grid { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 1100px) { .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); } }
.hero h1 { font-size: var(--fs-display); max-width: 12.5em; }
.hero__lead { margin-top: 1.5rem; }
.hero__actions { margin-top: 2rem; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 2rem 0 0; padding: 1rem 0 0; list-style: none;
  border-top: 1px solid var(--rule); font-family: var(--mono); font-size: .75rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.hero__meta li { display: inline-flex; align-items: center; gap: .45rem; }
.hero__meta .icon { width: 1rem; height: 1rem; color: var(--quill); }

/* Device photographs: real devices made in ChatGPT, with the real screens laid in (tools/restore_screens.py) and
   cut out of their white studio background (tools/cutout_devices.py), so they sit on white and grey sections alike.
   Made for light sections only. Never put a CSS filter on them. */
.device-shot { position: relative; isolation: isolate; margin: 0; }
.device-shot > img { width: 100%; }
.device-shot--photo > img { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
/* In the ruled heroes, a soft pool of white light behind the devices keeps the ledger lines off the glass */
.hero .device-shot::before, .page-hero .device-shot::before {
  content: ""; position: absolute; inset: 2% 0 4%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--white) 62%, rgba(255, 255, 255, 0));
}
.stage { position: relative; }
.stage .device-shot { width: 100%; }
.stage .slip--a { top: 4%; left: -2%; }
.stage .slip--b { bottom: 6%; left: 6%; }
.stage .ring { position: absolute; top: -4%; right: 6%; --ring: clamp(5.75rem, 9vw, 8.25rem); z-index: 4; }
.stage--page .slip--a { top: auto; bottom: 8%; left: auto; right: 0; }
@media (max-width: 1099px) { .stage { max-width: 46rem; margin-inline: auto; } .stage .device-shot { width: 100%; margin: 0; } }
@media (max-width: 599px) {
  .stage { padding: 16% 0 18%; }
  .stage .slip { min-width: 0; max-width: 72%; padding: .5rem .65rem; font-size: .8125rem; }
  .stage .slip__icon { width: 1.9rem; height: 1.9rem; }
  .stage .slip--a { top: 0; left: 0; }
  .stage .slip--b { bottom: 0; left: 0; }
  .stage--page .slip--a { top: auto; bottom: 0; right: auto; left: 0; }
  .stage .ring { top: 0; right: 0; --ring: 5rem; }
  .stage .ring__text text { font-size: 15px; }
}

/* The live MacBook: the league's screens take turns, in step with the list beside it */
.device-live__stage { position: relative; }
@media (min-width: 960px) { .device-live { width: 112%; margin-right: -12%; } }
.live-screens { position: absolute; overflow: clip; background: var(--white); }
.live-screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; opacity: 0; }
.live-screens img:first-child { opacity: 1; }
.live-screens::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 42%);
}
.ledger--sync > li { position: relative; isolation: isolate; }
.ledger--sync > li::before {
  content: ""; position: absolute; inset: 0 -.75rem; z-index: -1; border-radius: 10px;
  background: var(--quill-tint); opacity: 0;
}

/* Positioning strip under the hero */
.strip { border-block: 1px solid var(--rule); background: var(--paper); }
.strip__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.strip__list li { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.25rem; border-right: 1px solid var(--rule); font-size: .9375rem; color: var(--ink); font-weight: 500; }
.strip__list li:last-child { border-right: 0; }
.strip__list .icon { color: var(--quill); }
@media (max-width: 599px) { .strip__list li { border-right: 0; border-bottom: 1px solid var(--rule); padding-inline: 0; } .strip__list li:last-child { border-bottom: 0; } }

/* The tree */
.tree-wrap { position: relative; padding: clamp(1rem, 2.5vw, 2rem); background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-xl); box-shadow: var(--shadow); }
.tree-wrap::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(1.75rem - 1px), var(--paper-2) calc(1.75rem - 1px) 1.75rem);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.tree { position: relative; width: 100%; height: auto; overflow: visible; }
.tree--tall { display: none; max-width: 24rem; margin-inline: auto; }
@media (max-width: 719px) { .tree--wide { display: none; } .tree--tall { display: block; } }
.tree .t-card { fill: var(--white); stroke: var(--rule-strong); stroke-width: 1.25; }
.tree .t-card--home { fill: var(--white); stroke: var(--quill); stroke-width: 2; }
.tree .t-card--top { fill: var(--paper); stroke: var(--rule-strong); }
.tree .t-name { font-family: var(--sans); font-weight: 600; fill: var(--ink); }
.tree .t-role { font-family: var(--mono); font-weight: 500; letter-spacing: .1em; fill: var(--ink-soft); text-transform: uppercase; }
.tree .t-small { font-family: var(--sans); fill: var(--ink-soft); }
.tree .t-line { fill: none; stroke: var(--rule-strong); stroke-width: 2; }
.tree .t-line--up { stroke: var(--quill-line); stroke-dasharray: 4 6; }
.tree .t-rule { stroke: var(--rule); stroke-width: 1; }
.tree .t-board { fill: var(--quill-tint); }
.tree .t-board-text { font-family: var(--sans); font-weight: 500; fill: var(--ink); }
.tree .t-count { font-family: var(--mono); font-weight: 600; fill: var(--quill); }
.tree .t-avatar { fill: var(--night); }
.tree .t-avatar--quill { fill: var(--quill); }
.tree .t-avatar-text { font-family: var(--sans); font-weight: 700; fill: var(--white); letter-spacing: .02em; }
.tree .t-chip text { font-family: var(--mono); font-weight: 600; letter-spacing: .08em; }
.tree .t-chip-quill rect { fill: var(--quill-tint); stroke: var(--quill); }
.tree .t-chip-quill text { fill: var(--quill); }
.tree .t-chip-ok rect { fill: var(--ok-tint); stroke: var(--ok); }
.tree .t-chip-ok text { fill: var(--ok); }
.tree .t-chip-warn rect { fill: var(--warn-tint); stroke: var(--warn); }
.tree .t-chip-warn text { fill: var(--warn); }
.tree .t-tick { fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tree .t-packet-down rect { fill: var(--quill); }
.tree .t-packet-down path { fill: none; stroke: var(--white); stroke-width: 1.6; stroke-linecap: round; }
.tree .t-packet-up circle { fill: var(--ok); }
.tree .t-packet-up path { fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tree .t-legend { font-family: var(--mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-soft); }
/* The resting state — what shows with motion switched off: three clubs signed, one still to answer, 3 of 4 */
.tree .t-packet,
.tree .t-sent-a, .tree .t-sent-b, .tree .t-sent-c, .tree .t-sent-d,
.tree .t-c0, .tree .t-c1, .tree .t-c2 { opacity: 0; }

.tree-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.75rem; margin-top: 1.25rem; font-size: .875rem; color: var(--ink-soft); }
.tree-legend span { display: inline-flex; align-items: center; gap: .5rem; }
.tree-legend i { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 5px; color: var(--white); }
.tree-legend i .icon { width: .8rem; height: .8rem; stroke-width: 2.6; }
.tree-legend .down { background: var(--quill); }
.tree-legend .up { background: var(--ok); border-radius: 50%; }

/* Scoreboard ticker */
.ticker { position: relative; overflow: hidden; background: var(--night); color: var(--rule-strong); border-block: 1px solid var(--night-2); }
.ticker__track { display: flex; width: max-content; }
.ticker__list {
  display: flex; align-items: center; gap: 2.25rem; margin: 0; padding: 1.05rem 1.125rem; list-style: none;
  font-family: var(--mono); font-size: .8125rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.ticker__list li { display: inline-flex; align-items: center; gap: 2.25rem; }
.ticker__list li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--quill-on-dark); }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 4rem; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--night), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--night), transparent); }

/* Feature tiles — the "what a league gets / what a club gets" grids */
.tiles { display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: clip; }
.tiles > * { flex: 1 1 13rem; }
.tile { position: relative; display: block; padding: 1.5rem 1.4rem 1.6rem; background: var(--white); color: inherit; text-decoration: none; transition: background-color .25s; }
.tile:hover { background: var(--paper); color: inherit; }
.tile h3 { margin-top: .9rem; font-size: 1.0625rem; }
.tile p { margin-top: .4rem; font-size: .9375rem; color: var(--ink-soft); }
.tile__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--quill-tint); color: var(--quill); transition: background-color .25s, color .25s, transform .35s var(--ease-spring); }
.tile__icon .icon { width: 1.25rem; height: 1.25rem; }
.tile:hover .tile__icon { background: var(--quill); color: var(--white); transform: rotate(-6deg) scale(1.06); }
.tile__go { position: absolute; top: 1.4rem; right: 1.3rem; color: var(--rule-strong); transition: color .2s, transform .25s var(--ease-out); }
.tile:hover .tile__go { color: var(--quill); transform: translate(3px, -3px); }
.tile__go .icon { width: 1.1rem; height: 1.1rem; }
/* …with a photograph across the top, the icon badge sitting on its lower edge (as on the photo cards) */
.tile--photo { padding-top: 0; }
.tile__photo { margin: 0 -1.4rem; aspect-ratio: 3 / 2; overflow: clip; background: var(--paper-2); }
.tile__photo > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.tile--photo:hover .tile__photo > img { transform: scale(1.04); }
.tile--photo .tile__icon { position: relative; margin-top: -1.25rem; box-shadow: 0 0 0 4px var(--white); }
.tile--photo:hover .tile__icon { box-shadow: 0 0 0 4px var(--paper); }

/* The mascot: the bird as a porcelain figurine, on a white section (its picture keeps its white background) */
.mascot { margin: clamp(1.75rem, 4vw, 3rem) 0 0; width: min(100%, 20rem); }
.mascot > img { width: 100%; height: auto; }
@media (max-width: 959px) { .mascot { width: min(60%, 14rem); margin-inline: auto; } }

/* The count night — the one place gold appears */
.countnight { position: relative; isolation: isolate; overflow: clip; background: var(--night); color: var(--rule-strong); }
.countnight__photo { position: absolute; inset: 0; z-index: -2; }
.countnight__photo img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.countnight::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--night) 0%, rgba(14, 16, 32, .9) 42%, rgba(14, 16, 32, .55) 75%, rgba(14, 16, 32, .7) 100%),
    linear-gradient(180deg, var(--night) 0%, transparent 18%, transparent 80%, var(--night) 100%);
}
.countnight h2 { color: var(--white); }
.gold { color: var(--gold-lit); }
.gold-sheen {
  color: var(--gold-lit);
  background: linear-gradient(100deg, var(--gold) 10%, var(--gold-lit) 35%, color-mix(in srgb, var(--gold-lit) 70%, var(--white)) 50%, var(--gold-lit) 65%, var(--gold) 90%);
  background-size: 250% 100%; background-position: 50% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.countnight .eyebrow { color: var(--gold-lit); }
.countnight .eyebrow__no { color: var(--gold-lit); border-color: var(--gold-line); }
.cn-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 1000px) { .cn-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }
.cn-steps { margin: 2rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--gold-line); }
.cn-steps li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--night-line); }
.cn-steps__no { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; line-height: 1.1; letter-spacing: -.04em; color: var(--gold-lit); }
.cn-steps h3 { font-size: 1.0625rem; color: var(--white); }
.cn-steps p { margin-top: .25rem; font-size: .9375rem; color: var(--rule-strong); }
.cn-visual { position: relative; display: grid; place-items: center; }
.medal { position: relative; isolation: isolate; width: min(72%, 17.5rem); margin-top: -1rem; }
.medal::before {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 4%; aspect-ratio: 1; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold-lit) 34%, transparent), transparent 68%);
  transform: scale(1.35);
}
.medal__img {
  width: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%);
}
/* the light that passes across the disc: a circle laid exactly over the medal's face */
.medal__shine {
  position: absolute; left: 6.2%; width: 92.1%; top: 29.8%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 244, 214, .5) 48%, rgba(255, 255, 255, .7) 50%, rgba(255, 244, 214, .5) 52%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: soft-light; pointer-events: none;
}
.medal svg { width: 100%; height: auto; overflow: visible; }
.seal-wrap { position: relative; }
.seal-medal { position: absolute; z-index: 2; top: -16%; right: -5%; width: 22%; }
@media (max-width: 599px) { .seal-medal { top: -14%; right: -2%; width: 24%; } }

/* A photograph with the real screen laid over its corner */
.photo-stack { position: relative; padding: 0 30% 12% 0; }
.photo-stack .photo { width: 100%; box-shadow: var(--shadow-lg); }
.photo-stack .photo--tall { aspect-ratio: 4 / 5; }
.photo-stack .photo--tall > img { object-position: 50% 38%; }
.photo-stack__screen { position: absolute; right: 0; bottom: 0; width: 66%; z-index: 2; }
.photo-stack .photo__tag { bottom: auto; top: .85rem; }

/* The 3D app icon */
.start-summary__icon { display: block; width: 7.5rem; margin: -2.75rem 0 .5rem -1rem; }
.district { position: relative; }
.district__icon { position: absolute; top: -2.6rem; right: -1.25rem; width: 6.5rem; }
@media (max-width: 599px) { .district__icon { width: 5rem; right: -.25rem; top: -2rem; } }
.medal__svg .m-hi { stop-color: color-mix(in srgb, var(--gold-lit) 52%, var(--white)); }
.medal__svg .m-lit { stop-color: var(--gold-lit); }
.medal__svg .m-deep { stop-color: var(--gold); }
.medal__svg .m-q1 { stop-color: var(--quill); }
.medal__svg .m-q2 { stop-color: var(--quill-hover); }
.medal__svg .m-stripe { fill: none; stroke: var(--gold-lit); stroke-width: 3; opacity: .9; }
.medal__svg .m-loop { fill: none; stroke: var(--gold-lit); stroke-width: 6; }
.medal__svg .m-line { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: .65; }
.medal__svg .m-leaves { fill: var(--gold); opacity: .9; }
.medal__svg .m-emboss path, .medal__svg .m-emboss rect { fill: var(--gold); }
.medal__svg .m-emboss .m-eye { fill: var(--gold-lit); }
.medal__svg .m-emboss-shadow path, .medal__svg .m-emboss-shadow rect { fill: color-mix(in srgb, var(--gold-lit) 45%, var(--white)); opacity: .7; }
.medal__svg .m-spark { fill: var(--gold-lit); }

.lost__bar { fill: var(--ink); }
.lost__bird path { fill: var(--quill); }
.lost__eye { fill: var(--white); }
.cn-visual .browser { position: relative; width: min(100%, 30rem); margin-top: -12%; border-color: var(--night-line); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.cn-visual .fig__cap { justify-content: center; }
.countnight .fig__cap { color: var(--rule-strong); }
.countnight .fig__no { color: var(--gold-lit); }

/* Club websites block */
.address-demo {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem; padding: .6rem .9rem;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--white); box-shadow: var(--shadow-sm);
  font-family: var(--mono); font-size: .9375rem; color: var(--ink-soft);
}
.address-demo b { color: var(--quill); font-weight: 600; }

/* Price block */
.price { display: grid; gap: 1.25rem; }
@media (min-width: 960px) { .price { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.price__main {
  position: relative; overflow: clip; padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-xl); box-shadow: var(--shadow);
}
.price__main::after {
  content: ""; position: absolute; inset: 0 0 auto auto; width: 45%; height: 100%; pointer-events: none;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(1.75rem - 1px), var(--paper-2) calc(1.75rem - 1px) 1.75rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000);
}
.price__main > * { position: relative; z-index: 1; }
.price__figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-top: 1rem; }
.price__amount { font-family: var(--mono); font-size: clamp(3rem, 2rem + 4vw, 5.25rem); font-weight: 500; line-height: 1; letter-spacing: -.055em; color: var(--ink); font-variant-numeric: tabular-nums; }
.price__amount sup { font-size: .38em; vertical-align: .95em; letter-spacing: 0; margin-right: .05em; color: var(--ink-soft); }
.price__per { font-family: var(--mono); font-size: .9375rem; color: var(--ink-soft); }
.price__or { margin-top: .5rem; font-family: var(--mono); font-size: .9375rem; color: var(--ink-body); }
.price__or b { color: var(--ink); font-weight: 600; }
.price__side { display: grid; gap: 1.25rem; }
.price__card { padding: clamp(1.25rem, 2.5vw, 1.75rem); border-radius: var(--r-lg); border: 1px solid var(--rule); background: var(--white); }
.price__card--quill { background: var(--quill); border-color: var(--quill); color: var(--white); }
.price__card--quill h3, .price__card--quill .price__mini { color: var(--white); }
.price__card--quill p { color: rgba(255, 255, 255, .9); }
.price__card--night { background: var(--night); border-color: var(--night); color: var(--rule-strong); }
.price__card--night h3 { color: var(--white); }
.price__mini { font-family: var(--mono); font-size: 1.75rem; font-weight: 500; letter-spacing: -.04em; color: var(--ink); line-height: 1.1; }
.price__mini small { font-size: .55em; letter-spacing: 0; opacity: .85; }
.price__includes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.price__ring { position: absolute; right: clamp(1.25rem, 3vw, 2.5rem); bottom: clamp(1.25rem, 3vw, 2.5rem); --ring: clamp(6.5rem, 9vw, 8.75rem); }
@media (max-width: 1199px) { .price__ring { position: relative; right: auto; bottom: auto; margin-top: 2rem; } }

/* Pricing page plans */
.plans { display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 1000px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 2.6vw, 2rem); border: 1px solid var(--rule); border-radius: var(--r-xl); background: var(--white); }
.plan--feature { border: 2px solid var(--quill); box-shadow: 0 30px 60px -30px rgba(39, 66, 224, .45); }
.plan__flag { position: absolute; top: -.85rem; left: 1.5rem; }
.plan__flag .pill { background: var(--white); }
.plan--feature .plan__flag .pill { background: var(--quill); color: var(--white); border-color: var(--quill); }
.plan h2 { font-size: 1.375rem; letter-spacing: -.02em; }
.plan__who { margin-top: .35rem; color: var(--ink-soft); font-size: .9375rem; }
.plan__price { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.plan__amount { font-family: var(--mono); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; color: var(--ink); }
.plan__amount sup { font-size: .4em; vertical-align: .9em; letter-spacing: 0; color: var(--ink-soft); }
.plan__period { margin-top: .4rem; font-family: var(--mono); font-size: .875rem; color: var(--ink-soft); }
.plan .ticks { margin-top: 1.5rem; font-size: .9375rem; }
.plan__cta { margin-top: auto; padding-top: 1.75rem; }
.plan__cta .btn { width: 100%; }
.billing { display: inline-flex; gap: .25rem; padding: .3rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.billing input { position: absolute; opacity: 0; pointer-events: none; }
.billing label { padding: .5rem 1rem; border-radius: 9px; font-weight: 600; font-size: .9375rem; color: var(--ink-soft); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.billing input:checked + label { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
.billing input:focus-visible + label { outline: 3px solid var(--quill); outline-offset: 2px; }
.when-yearly { display: none; }
.pricing:has(#billing-yearly:checked) .when-yearly { display: block; }
.pricing:has(#billing-yearly:checked) .when-monthly { display: none; }
.price-notes:empty { display: none; }

.compare { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.compare caption { text-align: left; padding-bottom: 1rem; }
.compare th, .compare td { padding: .85rem 1rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.compare thead th { border-bottom: 2px solid var(--ink); font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.compare tbody th { font-weight: 600; color: var(--ink); }
.compare td { color: var(--ink-body); }
.compare .yes { display: inline-flex; align-items: center; gap: .4rem; color: var(--quill); font-weight: 600; }
.table-scroll { overflow-x: auto; border-radius: var(--r); }

/* Call-to-action band */
.cta { position: relative; overflow: clip; isolation: isolate; padding: clamp(2.25rem, 5vw, 4rem); border-radius: var(--r-xl); background: var(--quill); color: var(--white); }
.cta h2 { color: var(--white); max-width: 18em; }
.cta p { margin-top: 1rem; max-width: 36em; color: rgba(255, 255, 255, .92); font-size: var(--fs-lead); }
.cta .btn-row { margin-top: 2rem; }
.cta__lines {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(2rem - 1px), rgba(255, 255, 255, .1) calc(2rem - 1px) 2rem);
  -webkit-mask-image: linear-gradient(105deg, transparent 35%, #000 85%); mask-image: linear-gradient(105deg, transparent 35%, #000 85%);
}
.cta__mark { position: absolute; right: clamp(-3rem, -2vw, 0rem); bottom: -18%; z-index: -1; width: clamp(10rem, 26vw, 22rem); opacity: .14; }
.cta__mark .mark__tile { fill: transparent; }

/* Inner-page hero */
.page-hero { position: relative; overflow: clip; padding-block: clamp(2.75rem, 2rem + 4vw, 5.5rem) clamp(2.75rem, 2rem + 4vw, 5rem); border-bottom: 1px solid var(--rule); }
.page-hero__grid { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 1000px) { .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.page-hero h1 { margin-top: 1rem; max-width: 14em; }
.page-hero .lead { margin-top: 1.25rem; }
.page-hero .btn-row { margin-top: 2rem; }
.page-hero--center { text-align: center; }
.page-hero--center h1, .page-hero--center .lead { margin-inline: auto; }
.page-hero--center .btn-row { justify-content: center; }

/* Hero photo with a screen and a slip */
.hero-photo { position: relative; }
.hero-photo .photo { aspect-ratio: 3 / 2; box-shadow: var(--shadow-lg); }
.hero-photo .slip { right: -3%; bottom: -8%; }
.hero-photo .stamp { position: absolute; top: -9%; right: -4%; z-index: 3; --stamp: clamp(6rem, 10vw, 8.5rem); }
@media (max-width: 599px) { .hero-photo .slip { right: 2%; bottom: -12%; } .hero-photo .stamp { right: -1%; } }

.page-hero__grid--top { align-items: start; }
.page-hero--form { border-bottom: 0; }

/* A row of ink stamps */
.stamps { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; }
.stamps .stamp { --stamp: clamp(6.25rem, 9vw, 8.25rem); }

/* The demo district card */
.district { margin-top: 2.25rem; padding: 1.25rem 1.4rem; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); max-width: 28rem; }
.district__tree { position: relative; display: grid; gap: .9rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.district__tree::before { content: ""; position: absolute; left: 1rem; top: 1.25rem; bottom: 1.25rem; width: 2px; background: var(--rule); }
.district__tree li { position: relative; display: flex; align-items: center; gap: .85rem; }
.district__tree li:nth-child(2) { margin-left: 1.25rem; }
.district__tree li:nth-child(3) { margin-left: 2.5rem; }
.district__tree b { display: block; color: var(--ink); font-weight: 600; line-height: 1.25; }
.district__tree small { display: block; font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.district__av { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 8px; background: var(--night); color: var(--white); font-size: .75rem; font-weight: 700; box-shadow: 0 0 0 4px var(--white); }
.district__av--quill { background: var(--quill); }

/* Pricing: included band and the module grid */
.included { display: grid; gap: 1.5rem 2.5rem; align-items: center; margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--rule); border-radius: var(--r-xl); background: var(--paper); }
@media (min-width: 760px) { .included { grid-template-columns: auto minmax(0, 1fr); } }
.included__title { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); }
.included .ring { --ring: 7.5rem; }
.modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem; }
.modules__col { padding: 1.25rem 1.4rem 1.4rem; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); }
.modules__col .eyebrow { display: flex; padding-bottom: .65rem; border-bottom: 2px solid var(--ink); color: var(--ink); font-weight: 600; }
.modules__col ul { display: grid; gap: .5rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.modules__col li { display: flex; align-items: baseline; gap: .6rem; font-size: .9375rem; }
.modules__col li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--quill); transform: translateY(-2px); }
.plan__price .when-monthly, .plan__price .when-yearly { margin: 0; }

/* Start page */
.start-summary__mark { display: flex; margin-bottom: 1.25rem; }
.start-summary__mark .mark { width: 3.5rem; height: 3.5rem; }
.start-form .form-card { margin-top: 1.5rem; }
.start-form .path-tabs { margin-bottom: 0; }

/* Sticky sub-navigation (features page) */
.subnav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); }
.subnav ul { position: relative; display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; gap: .5rem; padding: .95rem .9rem .85rem; border-bottom: 2px solid transparent; font-size: .9375rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.subnav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.subnav .mono { font-size: .75rem; color: var(--quill); }

/* Feature group header and rows (features page) */
.group-head { display: grid; gap: 1rem; padding-bottom: 1.75rem; margin-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 2px solid var(--ink); }
@media (min-width: 900px) { .group-head { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; align-items: end; } }
.group-head__no { font-family: var(--mono); font-size: clamp(3rem, 2rem + 4vw, 5.5rem); font-weight: 500; line-height: .85; letter-spacing: -.06em; color: var(--quill); }
.feature { display: grid; gap: clamp(1.75rem, 4vw, 4rem); align-items: center; padding-block: clamp(1.75rem, 3.5vw, 3rem); border-bottom: 1px solid var(--rule); }
.feature:last-child { border-bottom: 0; }
@media (min-width: 960px) { .feature { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } .feature--flip > :first-child { order: 2; } }
.feature h3 { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); letter-spacing: -.024em; }
.feature .copy { margin-top: .75rem; color: var(--ink-body); }
.feature .ticks { margin-top: 1.25rem; }
.feature__label { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: .9rem; }
.feature__label .card__icon { margin: 0; width: 2.25rem; height: 2.25rem; border-radius: 9px; }
.feature__label .card__icon .icon { width: 1.1rem; height: 1.1rem; }

/* Mini cards for things without a screenshot */
.minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
/* …with a photograph across the top, the icon badge sitting on its lower edge */
.card__photo {
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 0; aspect-ratio: 3 / 2; overflow: clip;
  border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; background: var(--paper-2);
}
.card__photo > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.card--photo:hover .card__photo > img { transform: scale(1.04); }
.card--photo .card__icon { position: relative; margin-top: -1.375rem; box-shadow: 0 0 0 4px var(--white); }

/* Forms */
.form, .form__fields { display: grid; gap: 1.25rem; }
.form__row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field { display: grid; gap: .45rem; align-content: start; min-width: 0; }
.field__label { font-weight: 600; font-size: .9375rem; color: var(--ink); }
.field__label .opt { font-weight: 400; color: var(--ink-soft); }
.field__hint { font-size: .8125rem; color: var(--ink-soft); }
.input, .select, .textarea {
  width: 100%; min-height: 3rem; padding: .7rem .9rem;
  font: 400 1rem/1.4 var(--sans); color: var(--ink);
  background: var(--white); border: 1px solid var(--rule-strong); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-soft); opacity: .8; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-soft); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--quill); box-shadow: 0 0 0 4px color-mix(in srgb, var(--quill) 20%, transparent); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--quill); outline-offset: 1px; }
.textarea { min-height: 8rem; resize: vertical; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5E72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .85rem center / 1.1rem no-repeat;
}
.choices { display: grid; gap: .75rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.choices legend { padding: 0; margin-bottom: .45rem; font-weight: 600; font-size: .9375rem; color: var(--ink); }
.choices__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .75rem; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__box {
  display: flex; align-items: center; gap: .75rem; height: 100%; padding: .85rem 1rem;
  border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--white);
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.choice__box::before {
  content: ""; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 2px solid var(--rule-strong); background: var(--white); transition: border-color .15s, box-shadow .15s;
}
.choice:hover .choice__box { border-color: var(--ink-soft); }
.choice input:checked + .choice__box { border-color: var(--quill); background: var(--quill-tint); box-shadow: 0 0 0 1px var(--quill); }
.choice input:checked + .choice__box::before { border-color: var(--quill); box-shadow: inset 0 0 0 3px var(--white); background: var(--quill); }
.choice input:focus-visible + .choice__box { outline: 3px solid var(--quill); outline-offset: 2px; }
.choice__title { display: block; font-weight: 600; color: var(--ink); line-height: 1.3; }
.choice__desc { display: block; font-size: .8125rem; color: var(--ink-soft); line-height: 1.35; }
.check { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .75rem; align-items: start; font-size: .9375rem; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--quill); cursor: pointer; }
.form__note { font-size: .875rem; color: var(--ink-soft); }
.form__done {
  display: none; gap: .75rem; padding: 1.25rem 1.4rem; border-radius: var(--r);
  border: 1px solid var(--quill-line); background: var(--quill-tint); color: var(--ink);
}
[data-form].is-done .form__done { display: grid; }
[data-form].is-done .form__fields { display: none; }
/* the Turnstile human check: it loads when the form is first touched; the space is kept so nothing jumps */
.human-check { min-height: 65px; }
.human-check:empty { min-height: 0; }
.form__error { margin: 0; padding: .75rem 1rem; border-radius: var(--r); border: 1px solid var(--bad); background: #FBEAEC; color: var(--bad); font-size: .9375rem; }
[data-form].is-sending button[type="submit"] { opacity: .7; cursor: progress; }
.footer__entity { margin-left: .35em; white-space: nowrap; }
.form-card { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-xl); box-shadow: var(--shadow); }

/* The address field: [ name ].perchhq.com.au */
.address {
  display: flex; align-items: stretch; min-height: 3.25rem; overflow: hidden;
  border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--white);
  font-family: var(--mono); font-size: 1rem; transition: border-color .15s, box-shadow .15s;
}
.address:hover { border-color: var(--ink-soft); }
.address:focus-within { border-color: var(--quill); box-shadow: 0 0 0 4px color-mix(in srgb, var(--quill) 20%, transparent); }
.address__bracket { display: grid; place-items: center; padding-inline: .7rem .35rem; color: var(--quill); font-weight: 600; background: var(--paper); }
.address__bracket--close { padding-inline: .35rem .2rem; background: var(--white); }
.address__input { flex: 1 1 auto; width: 0; min-width: 0; padding: .7rem .2rem .7rem .3rem; border: 0; background: transparent; font: 600 1rem/1.3 var(--mono); color: var(--ink); }
.address__input:focus { outline: none; }
@supports (field-sizing: content) {
  .address__input { field-sizing: content; width: auto; flex: 0 1 auto; min-width: 5ch; padding-right: .1rem; }
}
.address__suffix { display: grid; place-items: center; padding-inline: .1rem .9rem; color: var(--ink-soft); white-space: nowrap; }
.address-preview {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .65rem; padding: .65rem .85rem;
  border-radius: 10px; background: var(--paper); font-size: .875rem; color: var(--ink-soft);
}
.address-preview .mono { color: var(--ink); overflow-wrap: anywhere; }
.address-preview b { color: var(--quill); }
@media (max-width: 420px) { .address { font-size: .875rem; } .address__suffix { padding-inline: 0 .6rem; } }

.path-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin-bottom: 2rem; }
.path { position: relative; display: block; cursor: pointer; }
.path input { position: absolute; opacity: 0; }
.path__box {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem 1rem; align-items: center; height: 100%;
  padding: 1.25rem; border: 1px solid var(--rule-strong); border-radius: var(--r-lg); background: var(--white);
  transition: border-color .2s, box-shadow .2s, transform .25s var(--ease-out);
}
.path__box .card__icon { grid-row: span 2; margin: 0; }
.path__title { font-weight: 700; color: var(--ink); font-size: 1.0625rem; }
.path__desc { font-size: .875rem; color: var(--ink-soft); }
.path:hover .path__box { border-color: var(--ink-soft); transform: translateY(-2px); }
.path input:checked + .path__box { border-color: var(--quill); box-shadow: 0 0 0 1px var(--quill), var(--shadow); }
.path input:checked + .path__box .card__icon { background: var(--quill); color: var(--white); }
.path input:focus-visible + .path__box { outline: 3px solid var(--quill); outline-offset: 3px; }
.start-form:has(#path-club:checked) .only-league { display: none; }
.start-form:has(#path-league:checked) .only-club { display: none; }

.summary-card { position: sticky; top: calc(var(--header-h) + 1.5rem); }

/* FAQ */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 0;
  font-size: 1.0625rem; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--quill); transition: transform .25s var(--ease-out); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq__body { padding: 0 2.5rem 1.4rem 0; color: var(--ink-body); max-width: 48rem; }

/* Legal shells */
.legal { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .legal { grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; } }
.legal__toc { align-self: start; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.legal__toc ol { margin: .75rem 0 0; padding: 0; list-style: none; display: grid; gap: .1rem; border-left: 2px solid var(--rule); }
.legal__toc a { display: block; padding: .35rem .9rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-soft); text-decoration: none; font-size: .9375rem; }
.legal__toc a:hover { color: var(--quill); border-left-color: var(--quill); }
.legal__body h2 { font-size: 1.375rem; padding-top: 1.75rem; margin-top: 1.75rem; border-top: 1px solid var(--rule); }
.legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__body h2 .mono { font-size: .8em; color: var(--quill); margin-right: .5rem; }
.legal__body p, .legal__body ul { margin: .9rem 0 0; max-width: 46rem; }
.legal__body h2 + p { margin-top: 1rem; }
.legal__body ul { padding-left: 1.25rem; display: grid; gap: .45rem; }
.legal__note { padding: 1rem 1.25rem; border-radius: var(--r); background: var(--paper); border: 1px solid var(--rule); font-size: .9375rem; color: var(--ink-soft); }

/* 404 */
.lost { position: relative; overflow: clip; padding-block: clamp(4rem, 9vw, 8rem); text-align: center; }
.lost__code { font-family: var(--mono); font-size: clamp(5rem, 3rem + 10vw, 11rem); font-weight: 500; line-height: .9; letter-spacing: -.07em; color: var(--ink); }
.lost__code span { color: var(--quill); }
.lost__perch { position: relative; width: min(18rem, 60vw); margin: 0 auto 2rem; }
.lost__perch .mark__tile { fill: transparent; }
.lost__perch svg { width: 100%; height: auto; overflow: visible; }
.lost .lead { margin: 1.25rem auto 0; }
.lost .btn-row { justify-content: center; margin-top: 2rem; }
.lost__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }

/* Contact block */
.contact-lines { display: grid; gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.contact-line { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--rule); border-radius: var(--r); background: var(--white); transition: border-color .2s, transform .25s var(--ease-out); }
.contact-line:hover { border-color: var(--quill-line); transform: translateY(-2px); }
.contact-line .card__icon { margin: 0; }
.contact-line a { font-weight: 600; overflow-wrap: anywhere; }
.contact-line span { display: block; font-size: .875rem; color: var(--ink-soft); }

/* Demo timeline */
.timeline { margin: 2rem 0 0; padding: 0; list-style: none; border-left: 2px solid var(--ink); }
.timeline li { position: relative; padding: 0 0 1.5rem 1.75rem; }
.timeline li::before { content: ""; position: absolute; left: -8px; top: .3rem; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 2px solid var(--quill); }
.timeline li:last-child { padding-bottom: 0; }
.timeline__when { display: block; font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--quill); }
.timeline h3 { margin-top: .25rem; font-size: 1.0625rem; }
.timeline p { margin-top: .25rem; color: var(--ink-soft); font-size: .9375rem; }

/* Feed diagram (club websites) */
.feed { width: 100%; height: auto; }
.feed .f-card { fill: var(--white); stroke: var(--rule-strong); stroke-width: 1.25; }
.feed .f-card--quill { fill: var(--quill); stroke: var(--quill); }
.feed .f-text { font-family: var(--sans); font-weight: 600; fill: var(--ink); }
.feed .f-text--light { fill: var(--white); }
.feed .f-label { font-family: var(--mono); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-soft); }
.feed .f-line { fill: none; stroke: var(--quill); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; }
.feed .f-block { fill: var(--paper-2); }
.feed .f-block--quill { fill: var(--quill-tint); }
.feed .f-dot { fill: var(--quill); }

/* About values */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.values > div { padding: 1.5rem 1.5rem 1.5rem 0; border-bottom: 1px solid var(--rule); }
.values h3 { margin-top: .75rem; font-size: 1.125rem; }
.values p { margin-top: .4rem; color: var(--ink-soft); }

/* 10. MOTION ----------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Buttons: the shine passes once on hover */
  .btn:hover { transform: translateY(-1px); }
  .btn:hover::after { transform: translateX(130%); transition: transform .75s var(--ease-out); }
  .btn:hover .icon--go { transform: translateX(3px); }

  /* Logo: a blink every so often, a hop on hover */
  .mark__eye { transform-box: fill-box; transform-origin: center; animation: blink 7s infinite 2s; }
  .mark__bird { transform-box: view-box; transform-origin: 256px 345px; }
  .brand:hover .mark__bird, .brand:focus-visible .mark__bird,
  .site-header .brand:hover .mark__bird, .site-header .brand:focus-visible .mark__bird { animation: hop-again .75s var(--ease-out); }
  .mark__wing { transform-box: fill-box; transform-origin: 85% 80%; }
  .brand:hover .mark__wing { animation: flap .75s var(--ease-out); }

  /* Page load: the hero rises in */
  .rise { animation: rise .9s var(--ease-out) both; animation-delay: var(--d, 0s); }
  .pop { animation: pop .7s var(--ease-spring) both; animation-delay: var(--d, 0s); }
  .pop-float { animation: pop .7s var(--ease-spring) var(--d, 0s) both, float var(--float-t, 6.5s) ease-in-out calc(var(--d, 0s) + .8s) infinite; }
  .slide-in { animation: slide-in .9s var(--ease-out) both; animation-delay: var(--d, 0s); }

  /* Gentle idle motion */
  .float { animation: float var(--float-t, 6.5s) ease-in-out infinite; animation-delay: var(--float-d, 0s); }
  .ring__text { animation: spin 38s linear infinite; }
  .ring:hover .ring__text { animation-duration: 12s; }
  .pan--auto > img { animation: pan var(--pan-t, 26s) var(--ease-in-out) infinite alternate; }
  .gold-sheen { animation: sheen 6s ease-in-out infinite; }
  .ticker__track { animation: marquee var(--ticker-t, 70s) linear infinite; }
  .ticker:hover .ticker__track { animation-play-state: paused; }

  /* The tree: requests go down, answers come back up (a 12-second loop) */
  .tree .t-packet-down { animation: packet-down 12s cubic-bezier(.45, 0, .55, 1) infinite both; animation-delay: var(--d, 0s); }
  .tree .t-packet-up { animation: packet-up 12s cubic-bezier(.45, 0, .55, 1) infinite both; animation-delay: var(--d, 0s); }
  .tree .t-sent-a { animation: t-sent-a 12s linear infinite; }
  .tree .t-sent-b { animation: t-sent-b 12s linear infinite; }
  .tree .t-sent-c { animation: t-sent-c 12s linear infinite; }
  .tree .t-sent-d { animation: t-sent-d 12s linear infinite; }
  .tree .t-signed-a { animation: t-signed-a 12s linear infinite; }
  .tree .t-signed-b { animation: t-signed-b 12s linear infinite; }
  .tree .t-signed-c { animation: t-signed-c 12s linear infinite; }
  .tree .t-wait-d { animation: t-wait-d 12s linear infinite; }
  .tree .t-c0 { animation: t-c0 12s linear infinite; }
  .tree .t-c1 { animation: t-c1 12s linear infinite; }
  .tree .t-c2 { animation: t-c2 12s linear infinite; }
  .tree .t-c3 { animation: t-c3 12s linear infinite; }
  .tree .t-line--live { stroke-dasharray: 5 7; animation: dash 1.1s linear infinite; }

  /* The live MacBook (16 s): compliance, affiliation, the count, the calendar; the list lights up in step */
  .live-screens img { animation: live-cycle 16s infinite both; }
  .live-screens img:nth-child(1) { animation-delay: -.6s; }
  .live-screens img:nth-child(2) { animation-delay: 3.4s; }
  .live-screens img:nth-child(3) { animation-delay: 7.4s; }
  .live-screens img:nth-child(4) { animation-delay: 11.4s; }
  .ledger--sync > li::before { animation: live-cycle 16s infinite both; }
  .ledger--sync > li:nth-child(1)::before { animation-delay: -.6s; }
  .ledger--sync > li:nth-child(2)::before { animation-delay: 3.4s; }
  .ledger--sync > li:nth-child(3)::before { animation: none; }
  .ledger--sync > li:nth-child(4)::before { animation-delay: 7.4s; }
  .ledger--sync > li:nth-child(5)::before { animation-delay: 11.4s; }

  /* The medal */
  .medal__svg .m-shine { animation: medal-shine 7s var(--ease-in-out) infinite 1s; }
  .medal__svg .m-spark { transform-box: fill-box; transform-origin: center; animation: twinkle 3.6s ease-in-out infinite; animation-delay: var(--sd, 0s); }
  .medal { animation: float 7.5s ease-in-out infinite; }
  .medal__shine { animation: disc-shine 6.5s var(--ease-in-out) infinite 1.2s; }
  .medal::before { animation: halo 6.5s ease-in-out infinite; }

  /* The header logo hops onto its perch once as the page opens */
  .site-header .brand .mark__bird { animation: hop .8s var(--ease-out) .45s 1 both; }

  /* 404: the bird hops back onto the perch, then looks about */
  .lost__bird { transform-box: view-box; transform-origin: 266px 340px; animation: lost-in 1.7s var(--ease-out) .3s both, lost-look 6s ease-in-out 2.2s infinite; }

  /* Hover tilt on framed screens */
  .tilt { transition: transform .6s var(--ease-out); }
}

/* Scroll-linked reveals: pure CSS, only where the browser supports scroll timelines.
   Everywhere else everything is simply visible. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    .reveal--left { animation-name: reveal-left; }
    .reveal--right { animation-name: reveal-right; }
    .reveal--scale { animation-name: reveal-scale; }
    .stamp-in { animation: stamp-in linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
    .hl-draw { background-size: 0% 100%; animation: hl-draw linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
    .site-header::after {
      content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--quill);
      transform-origin: 0 50%; transform: scaleX(0);
      animation: progress linear both; animation-timeline: scroll(root);
    }
  }
}

@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.82) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes reveal-left { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
@keyframes reveal-right { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes reveal-scale { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes stamp-in { 0% { opacity: 0; transform: rotate(calc(var(--rot, -9deg) - 14deg)) scale(1.9); } 70% { opacity: 1; transform: rotate(var(--rot, -9deg)) scale(.96); } 100% { opacity: 1; transform: rotate(var(--rot, -9deg)) scale(1); } }
@keyframes hl-draw { to { background-size: 100% 100%; } }
@keyframes progress { to { transform: scaleX(1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pan { 0%, 10% { transform: translateY(0); } 90%, 100% { transform: translateY(var(--pan, 0%)); } }
@keyframes sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes dash { to { stroke-dashoffset: -14; } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } 98% { transform: scaleY(1); } }
@keyframes hop { 0% { transform: none; } 28% { transform: translateY(-36px) rotate(-7deg); } 52% { transform: translateY(0) rotate(0); } 64% { transform: translateY(-9px); } 78%, 100% { transform: none; } }
@keyframes hop-again { 0% { transform: none; } 28% { transform: translateY(-36px) rotate(-7deg); } 52% { transform: translateY(0) rotate(0); } 64% { transform: translateY(-9px); } 78%, 100% { transform: none; } }
@keyframes flap { 0%, 100% { transform: none; } 20% { transform: rotate(-16deg); } 36% { transform: rotate(6deg); } 50% { transform: none; } }

/* The tree's 12-second loop. 0–1.9 s: the request travels down to all four clubs (RECEIVED).
   Farrowby, Ashcombe and Kelsford answer at 3.4, 4.6 and 5.8 s; each answer lands 1.7 s later and the board counts it.
   Coldbrook turns AWAITING at 8 s. At 10.6 s the round clears and the next one starts. */
@keyframes packet-down {
  0% { opacity: 0; transform: translate(0, 0); }
  1.5% { opacity: 1; transform: translate(0, 0); }
  5% { transform: translate(0, var(--y1)); }
  11% { transform: translate(var(--dx), var(--y1)); }
  15% { opacity: 1; transform: translate(var(--dx), var(--y2)); }
  16.5%, 100% { opacity: 0; transform: translate(var(--dx), var(--y2)); }
}
@keyframes packet-up {
  0% { opacity: 0; transform: translate(var(--dx), var(--y2)); }
  1.5% { opacity: 1; transform: translate(var(--dx), var(--y2)); }
  4.5% { transform: translate(var(--dx), var(--y1)); }
  10.5% { transform: translate(0, var(--y1)); }
  14% { opacity: 1; transform: translate(0, 0); }
  15.5%, 100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes t-sent-a { 0%, 15.5% { opacity: 0; } 17%, 27.5% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes t-sent-b { 0%, 15.5% { opacity: 0; } 17%, 37.5% { opacity: 1; } 39%, 100% { opacity: 0; } }
@keyframes t-sent-c { 0%, 15.5% { opacity: 0; } 17%, 47.5% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes t-sent-d { 0%, 15.5% { opacity: 0; } 17%, 66% { opacity: 1; } 67.5%, 100% { opacity: 0; } }
@keyframes t-signed-a { 0%, 27.5% { opacity: 0; } 29%, 87.5% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes t-signed-b { 0%, 37.5% { opacity: 0; } 39%, 87.5% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes t-signed-c { 0%, 47.5% { opacity: 0; } 49%, 87.5% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes t-wait-d { 0%, 66% { opacity: 0; } 67.5%, 87.5% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes t-c0 { 0%, 41.5% { opacity: 1; } 42.5%, 90% { opacity: 0; } 91.5%, 100% { opacity: 1; } }
@keyframes t-c1 { 0%, 41.5% { opacity: 0; } 42.5%, 51.5% { opacity: 1; } 52.5%, 100% { opacity: 0; } }
@keyframes t-c2 { 0%, 51.5% { opacity: 0; } 52.5%, 61.5% { opacity: 1; } 62.5%, 100% { opacity: 0; } }
@keyframes t-c3 { 0%, 61.5% { opacity: 0; } 62.5%, 88% { opacity: 1; } 89.5%, 100% { opacity: 0; } }
@keyframes medal-shine { 0%, 55% { transform: rotate(18deg) translateX(0); } 100% { transform: rotate(18deg) translateX(560px); } }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
@keyframes live-cycle { 0% { opacity: 0; } 3.75%, 25% { opacity: 1; } 28.75%, 100% { opacity: 0; } }
@keyframes disc-shine { 0%, 45% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@keyframes halo { 0%, 100% { opacity: .75; transform: scale(1.3); } 50% { opacity: 1; transform: scale(1.42); } }
@keyframes lost-in {
  0% { opacity: 0; transform: translate(-190px, -230px) rotate(-16deg); }
  18% { opacity: 1; }
  62% { transform: translate(-36px, -96px) rotate(-5deg); }
  84% { transform: none; }
  92% { transform: translateY(-14px); }
  100% { opacity: 1; transform: none; }
}
@keyframes lost-look { 0%, 38% { transform: none; } 44%, 60% { transform: scaleX(-1); } 66%, 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ticker__track { width: auto; }
  .ticker__list { flex-wrap: wrap; justify-content: center; row-gap: .75rem; white-space: normal; }
  .ticker__list[aria-hidden="true"] { display: none; }
  .ticker::before, .ticker::after { display: none; }
}