:root {
  /* Light. Pure white ground, so cards read on a border rather than a tint,
     and the banded sections have real separation instead of near-identical greys. */
  --bg: #ffffff;
  --bg-2: #f2f2f7;
  --card: #ffffff;
  --ink: #0d0d14;
  --fg-2: #4a4a5a;
  --fg-3: #6b6b80;
  --rule: rgba(13, 13, 20, 0.11);
  --rule-2: rgba(13, 13, 20, 0.17);

  /* violet / blue */
  --violet: #5b34d1;
  --blue: #2b6cff;
  --wash: rgba(91, 52, 209, 0.07);
  --grad: linear-gradient(102deg, #2b6cff 0%, #6435d8 52%, #9333ea 100%);

  --nav-bg: rgba(255, 255, 255, 0.84);
  --sticky-bg: rgba(255, 255, 255, 0.93);
  --panel: #17122a;
  --panel-fg: #ffffff;
  --shadow-sm: 0 1px 2px rgba(13, 13, 20, 0.06), 0 8px 22px rgba(13, 13, 20, 0.07);
  --shadow-lg: 0 2px 5px rgba(13, 13, 20, 0.07), 0 26px 54px rgba(13, 13, 20, 0.12);

  --display: "Archivo", "Schibsted Grotesk", sans-serif;
  --body: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Archivo", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Material edges: the lit top edge and the shaded underside of glass. */
  --edge-light: rgba(255, 255, 255, 0.9);
  --edge-dark: rgba(13, 13, 20, 0.14);

  /* Motion. The browser defaults are too soft to read as deliberate: `ease` holds
     its speed through the middle, so a lift reads as drift rather than a response.
     --ease-out front-loads the movement, which is what makes a press feel answered.
     --ease-press is deliberately faster: the system should respond quicker than the
     user can second-guess it. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-press: cubic-bezier(0.3, 0.8, 0.4, 1);
  --dur-press: 110ms;
  --dur-hover: 220ms;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* film grain: kills the flat template feel */
body::after {
  content: "";
  position: fixed;
  contain: strict;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

.wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 30px;
}

.wrap-narrow {
  max-width: 800px;
}

section {
  padding: clamp(68px, 9vw, 118px) 0;
  position: relative;
}

.section-tint {
  background: var(--bg-2);
}

/* ---------- type ---------- */

h1,
h2 {
  font-family: var(--display);
  font-weight: 800;
  margin: 0 0 20px;
}

h1 {
  font-size: clamp(2.3rem, 5.6vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

h3 {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0 0 9px;
}

p {
  margin: 0 0 18px;
  color: var(--fg-2);
}

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

.lead {
  font-size: clamp(1.06rem, 1.5vw, 1.28rem);
  line-height: 1.55;
  margin-bottom: 36px;
}

.kicker {
  font-family: var(--display);
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: -18px 0 32px;
}


.section-head {
  max-width: 640px;
  margin-bottom: clamp(38px, 5vw, 62px);
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- eyebrow ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--violet);
}

.pill::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--grad);
}

.center .pill {
  justify-content: center;
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 14px;
  z-index: 60;
  padding: 0 20px;
  margin-bottom: -70px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-link {
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--fg-2);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.nav-link:hover {
  color: var(--violet);
}

.foot-link {
  color: var(--fg-3);
  text-decoration: none;
}

.foot-link:hover {
  color: var(--violet);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 8px 8px 20px;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid var(--rule);
  /* Light catches the top of a real material and the underside falls into
     shadow. A uniform 1px box reads as a drawn rectangle; an asymmetric edge
     reads as a physical pane floating above the page. */
  border-top-color: var(--edge-light);
  border-bottom-color: var(--edge-dark);
  border-radius: 999px;
  /* Depth scales with surface size: this is large floating chrome, so it casts
     further than a 42px chip does. Two layers, one tight contact shadow and one
     wide ambient, rather than a single generic blur. */
  box-shadow:
    0 1px 1px rgba(13, 13, 20, 0.04),
    0 8px 24px rgba(13, 13, 20, 0.08),
    0 24px 56px rgba(13, 13, 20, 0.07);
}

.nav-sep {
  width: 1px;
  height: 22px;
  background: var(--rule-2);
  margin: 0 12px;
  flex: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Vibrancy: this text sits on a blurred, semi-transparent pane whose backdrop
   changes as the page scrolls under it. Flat mid-grey at 500 goes soft over a
   busy patch, so weight goes up and tracking opens slightly rather than staying
   negative — the same compensation Apple applies to text on materials. */
.nav-links a {
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--fg-2);
  text-decoration: none;
  letter-spacing: 0.002em;
  padding: 8px 14px;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--ink);
  background: var(--wash);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}

.mark img {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

.mark span {
  color: var(--fg-3);
  font-weight: 600;
  margin-left: -3px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  background: var(--grad);
  color: #fff;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 12px;
  border: 0;
  box-shadow: 0 2px 6px rgba(74, 34, 173, 0.22), 0 10px 26px rgba(74, 34, 173, 0.18);
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}

/* Hover lift is gated: on a touch screen :hover latches on tap, so the button
   stays lifted after the finger leaves. Pointer-fine only. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(74, 34, 173, 0.26), 0 16px 38px rgba(74, 34, 173, 0.26);
  }

  .btn:hover svg {
    transform: translateX(3px);
  }
}

/* Press reads as the button taking the weight, not just cancelling the hover.
   Scale beats translate here because it also carries the label and icon down
   with it, so the whole control depresses as one object. */
.btn:active {
  transform: scale(0.97);
  transition-duration: var(--dur-press);
  transition-timing-function: var(--ease-press);
}

.btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-hover) var(--ease-out);
}

.btn-sm {
  padding: 11px 20px;
  font-size: 0.88rem;
  border-radius: 999px;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-2);
  box-shadow: none;
}

.btn-ghost:hover {
  background: var(--card);
  border-color: var(--violet);
  color: var(--violet);
  box-shadow: var(--shadow-sm);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.btn-note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 20px 0 0;
}

/* ---------- hero ---------- */

.hero {
  padding: clamp(108px, 12vw, 168px) 0 clamp(64px, 8vw, 104px);
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.hero::before {
  width: 560px;
  height: 560px;
  top: -300px;
  right: -140px;
  background: radial-gradient(circle, rgba(100, 53, 216, 0.34) 0%, rgba(100, 53, 216, 0.12) 38%, rgba(100, 53, 216, 0) 72%);
  transform: translate3d(0, calc(var(--px, 0) * 0.42px), 0);
}

.hero::after {
  width: 480px;
  height: 480px;
  top: -180px;
  left: -180px;
  background: radial-gradient(circle, rgba(43, 108, 255, 0.28) 0%, rgba(43, 108, 255, 0.10) 38%, rgba(43, 108, 255, 0) 72%);
  transform: translate3d(0, calc(var(--px, 0) * 0.62px), 0);
}


/* legibility scrim: keeps the headline solid over the footage */

.hero .wrap {
  position: relative;
  z-index: 1;
}

/* foreground drifts up slightly and fades as it leaves, so the layers separate */
.js .hero-inner {
  transform: translate3d(0, calc(var(--px, 0) * -0.14px), 0);
  opacity: calc(1 - var(--pf, 0) * 0.65);
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .js .hero-inner {
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
}

.hero-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.hero-inner .pill {
  justify-content: center;
}

.hero-inner .lead {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.hero-inner .btn-row {
  justify-content: center;
}

/* ---------- grids ---------- */

.grid {
  display: grid;
  gap: 22px;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}


/* about band */


.card {
  background: var(--card);
  border: 1px solid var(--rule-2);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
}

.card p {
  font-size: 0.96rem;
  line-height: 1.58;
}

/* gradient-bordered feature card */


/* icon chip */

.chip {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--wash);
  color: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.chip svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--violet);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}

/* ---------- checklist ---------- */


/* ---------- faq ---------- */

.faq {
  max-width: 780px;
  margin: 0 auto;
}

details {
  border-bottom: 1px solid var(--rule);
}

details:first-of-type {
  border-top: 1px solid var(--rule);
}

summary {
  cursor: pointer;
  list-style: none;
  padding: 24px 48px 24px 0;
  position: relative;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color 0.15s ease;
}

summary:hover {
  color: var(--violet);
}

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

summary::before,
summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  background: var(--violet);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

summary::before {
  width: 14px;
  height: 2px;
  margin-top: -1px;
}

summary::after {
  width: 2px;
  height: 14px;
  margin-top: -7px;
  right: 12px;
}

details[open] summary::after {
  transform: rotate(90deg);
  opacity: 0;
}

details p {
  padding: 0 48px 26px 0;
  font-size: 1rem;
}

/* ---------- closing ---------- */

.closing-card {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border-radius: 28px;
  padding: clamp(48px, 7vw, 84px) clamp(26px, 5vw, 60px);
  text-align: center;
}

.closing-card::before {
  content: "";
  position: absolute;
  width: 780px;
  height: 620px;
  left: 50%;
  top: -320px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(100, 53, 216, 0.85) 0%, rgba(43, 108, 255, 0.30) 42%, rgba(23, 18, 42, 0) 72%);
  pointer-events: none;
}

.closing-card > * {
  position: relative;
}

.closing-card h2 {
  color: #fff;
}

.closing-card .lead {
  color: rgba(255, 255, 255, 0.72);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.closing-card .btn {
  background: #fff;
  color: #17122a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.closing-card .btn-row {
  justify-content: center;
}

.closing-card .btn-note {
  color: rgba(255, 255, 255, 0.62);
}

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--rule);
  padding: 34px 0 46px;
}

.foot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.foot-inner p {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0;
}

/* ---------- scroll reveal ---------- */
/* Elements tip up into place rather than sliding flat. Only armed once JS
   confirms it can drive them, so no-JS and headless renders show everything. */

.js .reveal {
  opacity: 0;
  transform: perspective(1000px) rotateX(7deg) translateY(22px) scale(0.985);
  transition:
    opacity 0.68s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.68s cubic-bezier(0.16, 1, 0.3, 1);
}

.js .reveal.in {
  opacity: 1;
  transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1);
}

.js .reveal.d1 { transition-delay: 0.08s; }
.js .reveal.d2 { transition-delay: 0.16s; }
.js .reveal.d3 { transition-delay: 0.24s; }
.js .reveal.d4 { transition-delay: 0.32s; }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

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

@media (max-width: 620px) {
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 17px;
  }

  .wrap {
    padding: 0 20px;
  }

  .card {
    padding: 26px;
  }

  .card-feature {
    padding: 28px;
  }

  .nav-links {
    display: none;
  }

  .nav-sep {
    display: none;
  }

  .nav-inner {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    justify-content: center;
    padding-left: 16px;
  }


  .btn-row .btn {
    width: 100%;
  }

  summary {
    font-size: 1.02rem;
    padding-right: 40px;
  }

  details p {
    padding-right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

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


/* ---------- sticky mobile CTA ---------- */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--sticky-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--rule);
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s;
  display: none;
  visibility: hidden;
  pointer-events: none;
}

.sticky-cta.show {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.sticky-cta .btn {
  width: 100%;
}

@media (max-width: 640px) {
  .sticky-cta {
    display: block;
  }

  body {
    padding-bottom: 76px;
  }
}


/* ---------- dark step band ---------- */

.section-dark {
  background: var(--panel);
  color: #fff;
  overflow: hidden;
}

.section-dark h2,
.section-dark h3 {
  color: #fff;
}

.section-dark p {
  color: rgba(255, 255, 255, 0.66);
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding-top: 52px;
}

/* travels to a dot, holds while it lights, then moves on */


.tl-step {
  position: relative;
}

.timeline {
  counter-reset: tl;
}

.tl-step::before {
  counter-increment: tl;
  content: counter(tl, decimal-leading-zero);
  position: absolute;
  top: -46px;
  left: 0;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--violet);
  background: none;
  border: 0;
}


.tl-step .step-label {
  color: #a78bfa;
}

.tl-figure {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 6px;
}

.tl-step h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #a78bfa;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}

/* ---------- dark mode ---------- */

:root[data-theme="dark"] {
  --bg: #100d1a;
  --bg-2: #171327;
  --card: #1a1629;
  --ink: #f4f2fa;
  --fg-2: #a8a1bd;
  --fg-3: #948da8;
  --rule: rgba(244, 242, 250, 0.10);
  --rule-2: rgba(244, 242, 250, 0.17);
  --violet: #a78bfa;
  --blue: #6ea0ff;
  --wash: rgba(167, 139, 250, 0.13);
  --grad: linear-gradient(102deg, #4f86ff 0%, #8b5cf6 52%, #b565f5 100%);
  --nav-bg: rgba(16, 13, 26, 0.82);
  --sticky-bg: rgba(16, 13, 26, 0.9);
  /* On a dark surface the lit edge is a faint sheen, not a white line. */
  --edge-light: rgba(255, 255, 255, 0.16);
  --edge-dark: rgba(0, 0, 0, 0.55);
  --panel: #1d1733;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 22px 48px rgba(0, 0, 0, 0.45);
}

:root[data-theme="dark"] body::after {
  opacity: 0.28;
}

:root[data-theme="dark"] .btn {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px 26px rgba(93, 63, 211, 0.32);
}

:root[data-theme="dark"] .closing-card .btn {
  background: #f4f2fa;
  color: #100d1a;
}

/* theme toggle */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--rule-2);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover {
  color: var(--violet);
  border-color: var(--violet);
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}


/* ---------- legal pages ---------- */

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(112px, 14vw, 140px) 0 80px;
}

.legal h1 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  margin-bottom: 10px;
}

.legal .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 40px;
}

.legal h2 {
  font-size: 1.28rem;
  margin: 42px 0 12px;
  letter-spacing: -0.02em;
}

.legal p,
.legal li {
  font-size: 1rem;
  color: var(--fg-2);
  line-height: 1.62;
}

.legal ul {
  margin: 0 0 18px;
  padding-left: 22px;
}

.legal li {
  margin-bottom: 9px;
}

.legal .intro {
  font-size: 1.14rem;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 30px;
}

.legal .todo {
  background: var(--wash);
  border-left: 3px solid var(--violet);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 0 0 18px;
  font-size: 0.95rem;
  color: var(--ink);
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--violet);
  text-decoration: none;
  margin-bottom: 34px;
}

.back:hover {
  text-decoration: underline;
}

.legal a,
details p a {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ---------- platforms strip ---------- */

/* Hairlines that fade at both ends instead of full-bleed 1px rules. A rule that
   runs edge to edge cuts the page into stacked boxes; one that dissolves before
   the margin separates the band without drawing a line across the design. */
.platforms {
  position: relative;
  border: 0;
  padding: 26px 0;
  background: var(--card);
}

.platforms::before,
.platforms::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--rule-2) 22%, var(--rule-2) 78%, transparent);
}

.platforms::before { top: 0; }
.platforms::after { bottom: 0; }

.platforms-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  flex-wrap: wrap;
  text-align: center;
}

.platforms .lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.platforms .names {
  font-family: var(--display);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.platforms .names span {
  color: var(--fg-3);
  font-weight: 400;
  margin: 0 6px;
}

.platforms .note {
  width: 100%;
  font-size: 0.9rem;
  color: var(--fg-3);
  margin: 0;
}

/* ---------- comparison table ---------- */

.cmp {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.cmp th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 0 18px 14px 0;
  border-bottom: 1px solid var(--rule-2);
}

.cmp td {
  padding: 20px 18px 20px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--fg-2);
  font-size: 0.97rem;
  line-height: 1.5;
  vertical-align: top;
}

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

.cmp .name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.cmp .pay {
  color: var(--ink);
  font-weight: 500;
}

.cmp tr:hover td {
  background: var(--wash);
}

@media (max-width: 760px) {
  .cmp,
  .cmp tbody,
  .cmp tr,
  .cmp td {
    display: block;
    width: 100%;
  }

  .cmp thead {
    display: none;
  }

  .cmp tr {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
  }

  .cmp td {
    border: 0;
    padding: 0 0 10px;
  }

  /* thead is hidden at this width, so each cell carries its own label */
  .cmp td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 4px;
  }

  .cmp td:last-child {
    padding-bottom: 0;
  }

  .cmp .name {
    white-space: normal;
    margin-bottom: 4px;
  }
}

/* ---------- ladder ---------- */

.ladder {
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: rung;
}

.rung {
  counter-increment: rung;
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}

.rung:last-child {
  border-bottom: 1px solid var(--rule);
}

.rung .step {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  padding-top: 4px;
}

.rung.here .step,
.rung.top .step {
  color: var(--violet);
}

.rung h3 {
  margin-bottom: 7px;
}

.rung .tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet);
  background: var(--wash);
  border-radius: 6px;
  padding: 4px 9px;
  margin-left: 10px;
  vertical-align: 2px;
}

@media (max-width: 640px) {
  .rung {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ---------- application form ---------- */

.form-wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(112px, 14vw, 140px) 0 84px;
}

.form-wrap h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 12px;
}

.form-wrap .lead {
  margin-bottom: 40px;
}

.field {
  margin-bottom: 22px;
}

/* Fieldsets carry the browser's groove border and inset padding by default,
   which reads as a 1998 form next to everything else here. Strip it and make
   <legend> match the .field label it is standing in for. */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

fieldset > legend {
  display: block;
  padding: 0;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field label {
  display: block;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
}

.field .req,
.field .opt {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: 1px;
}

.field .req { color: var(--violet); }
.field .opt { color: var(--fg-3); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.field textarea {
  resize: vertical;
  line-height: 1.55;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e88a3' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--wash);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--fg-3);
}

.hint {
  font-size: 0.87rem;
  color: var(--fg-3);
  margin: -10px 0 22px;
  line-height: 1.5;
}

.hint a {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.choices {
  display: grid;
  gap: 9px;
}

.choices.inline {
  grid-template-columns: 1fr 1fr;
}

.field label.choice,
.choice {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--card);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  padding: 13px 15px;
  cursor: pointer;
  font-weight: 400;
  font-family: var(--body);
  font-size: 0.97rem;
  color: var(--fg-2);
  margin: 0;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.choice:hover {
  border-color: var(--violet);
}

.field .choice input,
.choice input {
  width: 17px;
  height: 17px;
  accent-color: var(--violet);
  margin: 0;
  flex: none;
}

.choice:has(input:checked) {
  border-color: var(--violet);
  background: var(--wash);
  color: var(--ink);
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-error {
  background: var(--wash);
  border: 1px solid var(--violet);
  border-radius: 12px;
  padding: 13px 16px;
  color: var(--ink);
  font-size: 0.94rem;
  margin: 0 0 18px;
}

#applyForm .btn {
  width: 100%;
}

#applyForm .btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

#applyForm .btn-note {
  text-align: center;
}

@media (max-width: 560px) {
  .field-row,
  .choices.inline {
    grid-template-columns: 1fr;
  }
}

/* the negative-margin hint is for under-field hints only */
/* Direct children only. :last-of-type matches per parent, so the unscoped
   version also centred the hint sitting at the bottom of any .field. */
#applyForm > .hint:last-of-type {
  margin-top: 16px;
  text-align: center;
}

/* choice text sits beside the control, never under it */
.field label.choice span {
  flex: 1;
  min-width: 0;
}

/* ---------- custom radio / checkbox ---------- */

.field .choice input,
.choice input {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  margin: 0;
  border: 1.5px solid var(--rule-2);
  background: var(--bg);
  position: relative;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.choice input[type="radio"] {
  border-radius: 50%;
}

.choice input[type="checkbox"] {
  border-radius: 6px;
}

.choice input:hover {
  border-color: var(--violet);
}

.choice input:checked {
  border-color: var(--violet);
  background: var(--violet);
}

/* filled dot for radios */
.choice input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

/* tick for checkboxes */
.choice input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 13px 13px;
  background-repeat: no-repeat;
  background-position: center;
}

.choice input:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

.field label.choice:focus-within {
  border-color: var(--violet);
}

/* the whole row reacts, so the selection is obvious at a glance */
.field label.choice:has(input:checked) {
  border-color: var(--violet);
  background: var(--wash);
  color: var(--ink);
  font-weight: 500;
}

/* ---------- submitted screen ---------- */

.next {
  margin: 34px 0 26px;
  border-top: 1px solid var(--rule);
}

.next-step {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

.next-step .n {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet);
  padding-top: 3px;
}

.next-step h3 {
  margin-bottom: 5px;
}

.next-step p {
  font-size: 0.95rem;
  margin: 0;
}

#formDone .hint {
  margin: 0 0 26px;
}

@media (max-width: 560px) {
  .next-step {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}


/* Parallax is desktop-only. On a phone the hero is barely taller than the
   viewport, so the effect is invisible and the repaints are not. */
@media (max-width: 820px) {
  .hero::before,
  .hero::after,
  .js .hero-inner {
    transform: none !important;
    opacity: 1 !important;
  }

  .nav-inner {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body::after {
    display: none;
  }
}


/* ---------- nav on phones ---------- */

@media (max-width: 640px) {
  .nav {
    top: 10px;
    padding: 0 12px;
    margin-bottom: -62px;
  }

  .nav-inner {
    padding: 5px 5px 5px 14px;
    gap: 6px;
  }

  .mark {
    font-size: 0.92rem;
    gap: 7px;
  }

  .mark img {
    width: 22px;
    height: 22px;
    border-radius: 6px;
  }

  .mark span {
    display: none;
  }

  .theme-toggle {
    width: 32px;
    height: 32px;
  }

  .theme-toggle svg {
    width: 15px;
    height: 15px;
  }

  .nav .btn-sm {
    display: inline-flex;
    padding: 10px 16px;
    font-size: 0.82rem;
    white-space: nowrap;
    border-radius: 999px;
  }
}

@media (max-width: 380px) {
  .nav-inner {
    padding-left: 12px;
  }

  .nav .btn-sm {
    padding: 9px 13px;
    font-size: 0.78rem;
  }
}

.done-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 12px;
}

/* ---------- square media slots ---------- */

.media-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.media-slot {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--rule-2);
}

.media-slot img,
.media-slot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* empty slots read as deliberate, not broken */
.media-slot.is-empty {
  background:
    repeating-linear-gradient(
      45deg,
      var(--wash) 0 10px,
      transparent 10px 20px
    );
  border-style: dashed;
  border-color: var(--rule-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-slot.is-empty::after {
  content: attr(data-label);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: center;
  padding: 0 14px;
}

.media-cap {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--fg-3);
  line-height: 1.4;
}

.media-cap b {
  color: var(--ink);
  font-weight: 600;
  display: block;
}

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

@media (max-width: 420px) {
  .media-grid {
    gap: 12px;
  }
}

/* ---------- founder page ---------- */


.portrait {
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--card);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* vertical slots, because phone screenshots are 9:16 */
.shots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.shot {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--rule);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.shot.is-empty,
.portrait.is-empty {
  background: repeating-linear-gradient(45deg, var(--wash) 0 10px, transparent 10px 20px);
  border-style: dashed;
  border-color: var(--rule-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.shot.is-empty::after,
.portrait.is-empty::after {
  content: attr(data-label);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: center;
  padding: 0 12px;
  line-height: 1.6;
}


@media (max-width: 860px) {
  .shots {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* No portrait yet, so the hero is a single column of type. Centred, and held to
   a measure — centred text past ~60 characters loses the left edge the eye
   returns to on each line. */
.about-hero.no-portrait {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 640px) {
  .about-hero {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .about-hero.no-portrait {
    text-align: center;
  }

  .portrait {
    max-width: 180px;
  }

  .did-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}


/* ---------- what I teach ---------- */

.craft {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}

/* Hairline gaps over a ruled ground: the grid draws its own dividers, so four
   cards read as one object instead of four floating tiles. */
.craft li {
  background: var(--bg);
  padding: 28px 26px;
}

.craft h3 {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px;
}

.craft p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
}

.craft-foot {
  max-width: 560px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--fg-2);
}

@media (max-width: 640px) {
  .craft {
    grid-template-columns: 1fr;
  }

  .craft li {
    padding: 22px 20px;
  }
}


/* ---------- long-form story ---------- */

.story {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.story > .pill {
  justify-content: center;
  margin-bottom: 20px;
}

/* Centred with the story. The square marker and its left padding are dropped —
   a bullet only reads as a bullet when every line starts at the same x. */
.story .quick {
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.story .quick li {
  padding-left: 0;
}

.story .quick li::before {
  display: none;
}

.story p {
  font-size: 1.12rem;
  line-height: 1.68;
  margin-bottom: 24px;
  color: var(--fg-2);
}

.story p.beat {
  font-size: 1.3rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 34px 0;
}

.story p b {
  color: var(--ink);
  font-weight: 600;
}

.story hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 40px 0;
}

@media (max-width: 640px) {
  .story p {
    font-size: 1.05rem;
  }

  .story p.beat {
    font-size: 1.15rem;
  }
}

/* ---------- quick summary bullets ---------- */

.quick {
  list-style: none;
  margin: 0 0 40px;
  padding: 0 0 34px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 12px;
}

.quick li {
  position: relative;
  padding-left: 24px;
  font-size: 1.04rem;
  line-height: 1.5;
  color: var(--fg-2);
}

.quick li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--violet);
}

.quick li b {
  color: var(--ink);
  font-weight: 600;
}


.nav-links a[aria-current="page"] {
  color: var(--ink);
  background: var(--wash);
}

.greeting {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--violet);
  margin: 0 0 14px;
}


/* on dark, a heavy card edge looks like a box; keep it quiet */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .media-slot {
  border-color: var(--rule);
}

/* apply page lander */

#formIntro .greeting {
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 10px;
}

#formIntro .quick {
  margin: 30px 0 26px;
  padding-bottom: 26px;
}

.apply-line {
  font-size: 1.02rem;
  color: var(--fg-2);
  margin: 0 0 40px;
  line-height: 1.6;
}

.apply-line a {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* "What you actually need" — moved off the homepage; it is intake, not pitch. */
.need-title {
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  margin: 0 0 4px;
}

.need-sub {
  margin: 0;
}

#formIntro .next {
  margin: 18px 0 40px;
}

/* ---------- acceptance page ---------- */

/* The plain-language gist of the terms, shown above the box a creator ticks.
   It sits on a tinted card so it reads as quoted material rather than as more
   marketing copy — the distinction matters when the claim is "they read it". */
.terms-box {
  margin: 34px 0 40px;
  padding: 26px 26px 6px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
}

.terms-box .need-sub {
  margin-bottom: 20px;
}

.terms-box .need-sub a {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gist {
  margin: 0;
}

.gist dt {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 4px;
}

.gist dd {
  margin: 0 0 20px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg-2);
}

/* The acceptance block. A left rule marks it as the operative part of the form
   without shouting — a red warning panel here would read as a trap. */
.ack {
  margin-top: 32px;
  padding-left: 18px;
  border-left: 2px solid var(--violet);
}

.ack-lede {
  margin: 0 0 14px;
}

.ack .hint {
  margin-top: 12px;
}

.ack .choice a {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.field textarea:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 560px) {
  .terms-box {
    padding: 20px 18px 2px;
  }
}

#formIntro .beat {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 28px;
}

#formIntro .apply-line {
  margin-bottom: 16px;
}

#formIntro .apply-line:last-of-type {
  margin-bottom: 42px;
}

.apply-h1 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin-bottom: 14px;
}

/* Case-study figures. Solid ink, never gradient: across this site --grad means
   "you can press this", so filling a static number with it makes the stat look
   tappable. Sized to the .tl-figure rung rather than adding a new step. */

.proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.proof-stat {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.proof-stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.proof-stat span {
  display: block;
  margin-top: 9px;
  font-size: 0.85rem;
  line-height: 1.42;
  color: var(--fg-3);
}

.proof-note {
  max-width: 640px;
  margin: 24px auto 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg-2);
}

@media (max-width: 760px) {
  .proof {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .proof-stat {
    padding: 18px 12px;
  }
}

/* Accessibility signals for the translucent chrome. The nav, sticky bar and
   panels lean on backdrop-filter; both of these settings mean the user has told
   the OS that translucency or low contrast is a problem for them, so the
   material becomes solid rather than merely less blurry. */

@media (prefers-reduced-transparency: reduce) {
  .nav-inner,
  .sticky-cta {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .nav-inner,
  .sticky-cta {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--ink);
  }

  .card {
    border-color: var(--ink);
  }
}

/* honest-limits notice */

.disclosure {
  position: relative;
  border: 0;
  background: var(--bg-2);
  padding: 26px 0;
}

/* When the notice follows a tinted band it inherits the same grey and the two
   merge into one slab, so the hairline between them has nothing to separate.
   Drop to the base ground to keep the alternating rhythm. */
.section-tint + .disclosure {
  background: var(--bg);
}

.disclosure::before,
.disclosure::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--rule-2) 22%, var(--rule-2) 78%, transparent);
}

.disclosure::before { top: 0; }
.disclosure::after { bottom: 0; }

.disclosure p {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg-2);
}

.disclosure b {
  color: var(--ink);
}


.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--violet);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}