/* ==========================================================================
   TINKER DESIGN SYSTEM
   Quiet editorial: one ink, one accent, hairlines and whitespace.
   Inspired by Outfit (hellohello) & Nakula.
   ========================================================================== */

:root {
  color-scheme: dark;
  /* Palette */
  --bg: #0e0e0f;
  --bg-raised: #171718;
  --ink: #eee9e2;
  --ink-2: #b3aea6;
  --muted: #77736c;
  --line: rgba(238, 233, 226, 0.12);
  --accent: #302aff;
  /* Second accent: the spark on a featured dot, and the far end of the gradient */
  --accent-2: #971aff;
  --accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  /* Text set on the accent or its gradient */
  --on-accent: #fff;
  --on-ink: #0e0e0f;
  --danger: #ff7a66;

  /* Step colours */
  --node-1: #7590ff;
  --node-2: #a98bff;
  --node-3: #ff8a5c;
  --node-4: #3fd3a0;

  /* Type */
  --font-display: 'Anton', 'Impact', sans-serif;
  --font-body: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --gutter: clamp(16px, 3vw, 40px);
  --container-max: 1440px;
  --header-h: 76px;
  --header-cta-h: 40px;
  --radius: 20px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.2, 1);
}

@media (min-width: 1600px) {
  :root {
    --container-max: min(1720px, 92vw);
    --gutter: clamp(36px, 2.6vw, 56px);
    --header-h: 84px;
    --header-cta-h: 46px;
    --radius: 24px;
  }
}

@media (min-width: 2000px) {
  :root {
    --container-max: min(2160px, 88vw);
    --gutter: clamp(48px, 2.8vw, 72px);
    --header-h: 92px;
    --header-cta-h: 52px;
    --radius: 28px;
  }
}

@media (min-width: 2560px) {
  :root {
    --container-max: min(2400px, 86vw);
    --gutter: clamp(56px, 3vw, 84px);
    --header-h: 100px;
    --header-cta-h: 58px;
    --radius: 32px;
  }
}

@media (max-width: 767px) {
  :root { --header-h: 64px; }
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

html.drawer-open {
  overflow: hidden;
}

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, not hidden: hidden can make the body its own scroll box on phones (WebKit), and the hero
     stage's sticky pin (.stage-pin) would then slide straight through. hidden is the fallback */
  overflow-x: hidden;
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button, input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

/* Accessibility Utilities */
.sr-only, .hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

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

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max, 1440px);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Shared Type */
.eyebrow {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
}

.text-accent {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Keeps a phrase on one line */
.nowrap {
  white-space: nowrap;
}

/* Matches the orange at the tail of the logo mark's strand (assets/tinker-mark.svg) */
.text-orange {
  color: #ff5f00;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn svg {
  transition: transform 0.3s var(--ease);
}

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

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}

.btn-primary:hover {
  background: var(--accent-gradient);
  color: var(--on-accent);
}

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

.btn-outline:hover {
  background: var(--ink);
  color: var(--bg);
}

.btn-lg {
  height: 56px;
  padding: 0 28px;
  font-size: 1.0625rem;
}

/* ==========================================================================
   WORDMARK, DYNAMIC BRAND & HEADER
   ========================================================================== */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.06em;
  font-family: var(--font-display);
  /* Sized large and bold while dynamically capped by viewport height to keep the arrow in view */
  font-size: clamp(5.5rem, min(calc((min(100vw, var(--container-max, 1440px)) - 2 * var(--gutter)) / 3.6), 33vh), 22rem);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  user-select: none;
}

.wordmark .click-word {
  font-size: 0.4em;
  letter-spacing: 0.02em;
  line-height: 1;
  overflow: visible;
}

.wordmark .click-word .ltr > span {
  display: inline-block;
  padding: 0.1em 0.14em;
  margin: -0.1em -0.14em;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
}

/* Letters: each sits in a box clipped at the hero rule (its margin-top below), so it rises from behind it */
.wordmark .ltr {
  display: inline-block;
  overflow: visible;
  clip-path: inset(-150% -80% -8px -80%);
}

.wordmark .ltr > span {
  display: inline-block;
}

.js .dynamic-brand .ltr > span {
  transform: translateY(120%);
}

.js .dynamic-brand.is-ready .ltr > span {
  transform: none;
  transition: transform 0.9s var(--ease) calc(0.1s + var(--i) * 0.055s);
}

.hero-wordmark-ghost {
  visibility: hidden;
}

.dynamic-brand {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transform-origin: 0 0;
  will-change: transform;
  opacity: 0;
  transition: transform 0.48s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.35s ease;
}

.dynamic-brand.is-ready {
  opacity: 1;
}

.dynamic-brand.no-transition {
  transition: none;
}

.dynamic-brand.is-docked:hover {
  opacity: 0.7;
}

/* Bar that fades in behind the docked brand and CTA */
.site-header-bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 900;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.brand-docked .site-header-bar {
  opacity: 1;
}

@media (max-width: 767px) {
  :root {
    --header-cta-h: 36px;
  }
}

/* The phrase beside the docked brand, finishing its sentence: "SAGE.IS refreshingly simple".
   Set like the wordmark's .IS: scripts.njk gives it .IS's docked size (--phrase-size) and puts it
   just past the wordmark (--phrase-x) on .IS's baseline (--phrase-y). It comes in once the brand
   has landed, and each phrase rolls up out of its line as the next rolls in */
.brand-phrase {
  position: fixed;
  top: var(--phrase-y, 0px);
  left: var(--phrase-x, 0px);
  z-index: 1001;
  display: grid;
  overflow: hidden;
  height: 1.1em;
  font-family: var(--font-display);
  font-size: var(--phrase-size, 13px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  translate: -10px 0;
  transition: opacity 0.25s ease, translate 0.4s var(--ease);
}

.brand-docked .brand-phrase {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.5s ease 0.38s, translate 0.8s var(--ease) 0.38s;
}

.phrase-word {
  grid-area: 1 / 1;
}

.phrase-word.is-in { animation: phrase-in 0.6s var(--ease) both; }
.phrase-word.is-out { animation: phrase-out 0.45s var(--ease-in-out) both; }

@keyframes phrase-in { from { transform: translateY(100%); opacity: 0; } }
@keyframes phrase-out { to { transform: translateY(-100%); opacity: 0; } }

/* No room beside the brand and the CTA on narrow phones */
@media (max-width: 640px) {
  .brand-phrase { display: none; }
}

.header-cta {
  position: fixed;
  top: calc((var(--header-h) - var(--header-cta-h, 40px)) / 2);
  right: var(--gutter);
  z-index: 1001;
  height: var(--header-cta-h, 40px);
  padding: 0 clamp(18px, 1.25vw, 26px);
  background: var(--ink);
  color: var(--bg);
  font-size: clamp(0.875rem, 0.95vw, 1.0625rem);
}

.header-cta:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.header-cta .label-close {
  display: none;
}

.header-cta .cta-icon {
  width: clamp(14px, 0.95vw, 18px);
  height: clamp(14px, 0.95vw, 18px);
  transition: transform 0.45s var(--ease);
}

.header-cta:hover svg {
  transform: none;
}

.header-cta[aria-expanded="true"] {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.header-cta[aria-expanded="true"] .label-open { display: none; }
.header-cta[aria-expanded="true"] .label-close { display: inline; }
.header-cta[aria-expanded="true"] .cta-icon { transform: rotate(45deg); }

/* ==========================================================================
   WAITLIST DRAWER
   ========================================================================== */
.waitlist-drawer {
  position: fixed;
  inset: 0;
  z-index: 950;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.32);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.drawer-panel {
  position: absolute;
  inset: 0 0 auto 0;
  max-height: 100vh;
  overflow-y: auto;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: calc(var(--header-h) + clamp(40px, 6vw, 80px)) 0 clamp(40px, 6vw, 72px);
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease-in-out);
}

.waitlist-drawer.is-open .drawer-backdrop { opacity: 1; }
.waitlist-drawer.is-open .drawer-panel { transform: none; }

.drawer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px var(--gutter);
}

.drawer-grid > * {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.5s ease, transform 0.6s var(--ease);
}

.waitlist-drawer.is-open .drawer-grid > * {
  opacity: 1;
  transform: none;
  transition-delay: 0.25s;
}

.waitlist-drawer.is-open .drawer-grid > *:nth-child(2) {
  transition-delay: 0.33s;
}

.drawer-intro {
  grid-column: 1 / span 2;
}

.drawer-intro .eyebrow {
  font-size: clamp(0.8125rem, 0.9vw, 1.0625rem);
}

.drawer-title {
  margin-top: 16px;
  font-size: clamp(2.25rem, 4.6vw, 6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.drawer-form-col {
  grid-column: 3 / -1;
  align-self: end;
}

.drawer-copy {
  color: var(--ink-2);
  max-width: 48ch;
  font-size: clamp(1rem, 1.15vw, 1.35rem);
  line-height: 1.55;
  margin-bottom: clamp(28px, 3.2vh, 44px);
}

.drawer-copy strong {
  color: var(--ink);
  font-weight: 500;
}

.composer {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 20px);
  padding-bottom: clamp(10px, 1.2vh, 18px);
  border-bottom: clamp(1.5px, 0.15vw, 2.5px) solid var(--ink);
  transition: border-color 0.25s ease;
}

.composer:focus-within {
  border-color: var(--accent);
}

.composer input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: clamp(1.25rem, 1.8vw, 2.25rem);
  letter-spacing: -0.02em;
  padding: clamp(6px, 0.8vh, 12px) 0;
}

.composer input::placeholder {
  color: var(--muted);
}

.composer .btn-submit {
  height: clamp(44px, 3.2vw, 56px);
  padding: 0 clamp(20px, 1.5vw, 32px);
  font-size: clamp(0.9375rem, 1vw, 1.15rem);
}

.composer .btn-submit svg {
  width: clamp(16px, 1.1vw, 20px);
  height: clamp(16px, 1.1vw, 20px);
}

.btn-submit:disabled {
  opacity: 0.5;
  cursor: progress;
}

.status {
  min-height: 1.5em;
  margin-top: 14px;
  font-size: clamp(0.9375rem, 1vw, 1.15rem);
  color: var(--ink-2);
}

.status.error { color: var(--danger); }

.status.ok {
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 500;
}

.status.ok::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.8em;
}

.signup-form.done .composer {
  display: none;
}

.drawer-fine {
  margin-top: clamp(20px, 2.2vh, 32px);
  font-size: clamp(0.8125rem, 0.88vw, 1.0625rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 52ch;
}

@media (max-width: 860px) {
  .drawer-intro, .drawer-form-col { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .composer { flex-direction: column; align-items: stretch; border-bottom: 0; padding: 0; }
  .composer input { border-bottom: 1.5px solid var(--ink); margin-bottom: 12px; }
}
/* ==========================================================================
   HERO
   The wordmark sits on a heavy rule; under it the title runs the width of
   columns 2–4, the lede and buttons share a row, and a foot line closes the
   first screen
   ========================================================================== */
.hero {
  padding: calc(var(--header-h) + clamp(16px, 3vw, 40px)) 0 clamp(40px, 6vw, 72px);
}

.hero-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gutter);
}

.hero-wordmark-wrap {
  display: flex;
  /* The wordmark keeps its size; the social proof beside it takes what room is left */
  flex: none;
}

/* Who we are, standing on the rule at the left; the wordmark follows after it, staggered left of
   the headline under the rule (.hero-title, .hero-body) */
.hero-meta {
  flex: none;
  padding-bottom: 2px;
}

/* The room left over goes after the wordmark */
.hero-wordmark-wrap {
  margin-right: auto;
}

/* Wider screens: the wordmark a quarter column in from the note, and the copy under the rule a
   quarter column into the second, right of it */
@media (min-width: 961px) {
  .hero-wordmark-wrap {
    /* A quarter of one of the hero's four columns */
    margin-left: calc((100% - 3 * var(--gutter)) / 16);
  }

  .hero-title,
  .hero-body {
    /* A quarter of one of the three columns (and two gutters) these span */
    margin-left: calc((100% - 2 * var(--gutter)) / 12);
  }
}

.hero-rule {
  height: 3px;
  margin-top: 8px;
  background: var(--ink);
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.6vh, 32px) var(--gutter);
  padding-top: clamp(16px, 2.4vh, 28px);
}


.hero-meta p {
  font-size: clamp(0.9375rem, 0.95vw, 1.25rem);
  line-height: 1.45;
  color: var(--ink-2);
}

.hero-title {
  grid-column: 2 / -1;
  font-size: clamp(2rem, 3.7vw, 5.5rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.hero-body {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px var(--gutter);
}

.hero-lede {
  max-width: 48ch;
  font-size: clamp(1rem, 1.1vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink-2);
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 4vh, 56px);
}

/* Social proof, standing on the rule at the right, two short lines set like the meta on the left */
.hero-subtext {
  max-width: 17em;
  padding-bottom: 2px;
  text-align: right;
  font-size: clamp(0.9375rem, 0.95vw, 1.25rem);
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: balance;
}

/* The way down: three short lines, the middle one longest, with a light running down each in turn */
.hero-scroll-prompt {
  display: block;
  padding: 6px 12px;
}

.scroll-lines {
  display: flex;
  align-items: center;
  gap: 7px;
}

.scroll-lines i {
  position: relative;
  display: block;
  width: 1px;
  height: 30px;
  overflow: hidden;
  background: var(--line);
}

.scroll-lines i:nth-child(2) {
  height: 44px;
}

.scroll-lines i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 40%;
  background: var(--ink);
  animation: scroll-run 2.2s var(--ease-in-out) infinite;
}

.scroll-lines i:nth-child(2)::after { animation-delay: 0.14s; }
.scroll-lines i:nth-child(3)::after { animation-delay: 0.28s; }

.hero-scroll-prompt:hover .scroll-lines i::after {
  background: var(--accent-soft);
}

@keyframes scroll-run {
  from { transform: translateY(-100%); }
  to { transform: translateY(250%); }
}

/* The whole first screen (svh: the height with the browser's bars showing), the copy in the middle
   of it and the scroll lines at the bottom */
.hero {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.hero > .container {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.hero-top,
.hero-foot {
  margin-top: auto;
}

@media (min-width: 761px) {
  .hero {
    padding: calc(var(--header-h) + clamp(16px, 3vh, 40px)) 0 clamp(16px, 2vh, 28px);
  }
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* No room beside the wordmark: on a line of its own above it */
  .hero-top { flex-wrap: wrap; }
  .hero-meta { flex-basis: 100%; }
  /* ...while the social proof stays beside the wordmark, in what room is left */
  .hero-subtext { flex: 1 1 0; min-width: 0; }
  .hero-title, .hero-body { grid-column: 1; }
}

@media (max-width: 560px) {
  .hero-meta { display: none; }
  .hero-subtext { min-width: 0; max-width: 10em; font-size: 0.75rem; }
}

/* ==========================================================================
   HERO: DOT MATRIX (component/hero.njk, assets/js/hero-dots.js)
   SAGE.IS as a field of dots beside what Sage offers, rolling; the statement and
   the buttons below. On the hero's night ground (.hero's own tokens)
   ========================================================================== */
/* Two rows, not the classic hero's stretched column (.hero > .container): the field at the top,
   the statement at the foot of the first screen */
.hero-dots > .container {
  display: block;
  flex: none;
}

.hero-dots > .hero-dots-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--gutter);
  align-items: center;
  /* On a tall screen the room left over is shared above and below the field */
  margin-top: auto;
  padding-top: clamp(8px, 3vh, 40px);
}

.hero-dots {
  position: relative;
}

/* The dynamic brand's measuring copy (scripts.njk): never seen */
.hero-dots-ghost {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}

/* The brand stays in its dock with its letters unseen, still, and laid out where they land
   (scripts.njk); hero-dots.js draws them there in dots (.nav-dots) once the hero's have gone. It
   never glides there (by id, to outrank html[data-theme="home"] .dynamic-brand), so it can be
   measured the moment it's placed */
.brand-from-dots #dynamic-brand {
  transition: opacity 0.35s ease;
}

.brand-from-dots .dynamic-brand .ltr {
  visibility: hidden;
}

/* (by id, to outrank the letters' rise, .js .dynamic-brand.is-ready) */
.brand-from-dots #dynamic-brand .ltr > span {
  transform: none;
  transition: none;
}

.brand-from-dots .dynamic-brand:not(.is-docked) {
  pointer-events: none;
}

.nav-dots {
  position: fixed;
  z-index: 1001;
  pointer-events: none;
}

/* The phrase waits for the dots to finish building */
.brand-from-dots.brand-docked:not(.brand-dots-on) .brand-phrase {
  opacity: 0;
  translate: -10px 0;
  transition: opacity 0.25s ease, translate 0.4s var(--ease);
}

/* The field gives way on a short screen, so the statement and the buttons always fit on the first
   one: the rest of the hero takes about 430px, and the field is about 0.35 of its width tall */
.hero-dots-field {
  position: relative;
  width: min(100%, max(320px, calc((100svh - 430px) * 2.85)));
}

.hero-dots-field canvas {
  display: block;
  width: 100%;
}

/* Until the dots are drawn (or without script): the word in the two purples */
.hero-dots-word {
  display: block;
  width: max-content;
  margin: 0 auto;
  padding-block: 0.3em;
  font-family: var(--font-display);
  font-size: clamp(5rem, 17vw, 24rem);
  line-height: 0.8;
  white-space: nowrap;
  user-select: none;
  background: linear-gradient(90deg, #645cff, #b462ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-dots-field.is-drawn .hero-dots-word {
  display: none;
}

/* What Sage offers, rolling up without pause, five showing (three on small screens). The list is
   there twice, and each tag carries its own spacing, so moving up by half is exactly a full turn */
.hero-offers {
  --rows: 5;
  --step: 56px;
  height: calc(var(--rows) * var(--step) - 10px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

.hero-offers ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  list-style: none;
  animation: hero-offers-roll 26s linear infinite;
}

.hero-offers li {
  margin-bottom: 10px;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.9375rem;
  line-height: 22px;
  white-space: nowrap;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
}

@keyframes hero-offers-roll {
  to { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-offers ul { animation: none; }
}

.hero-dots-foot {
  margin-top: auto;
  padding-top: clamp(20px, 3.5vh, 64px);
}

.hero-dots-kicker {
  max-width: 30em;
  font-size: clamp(0.9375rem, 1vw, 1.125rem);
  line-height: 1.45;
  color: var(--ink-2);
}

.hero-dots-title {
  margin-top: clamp(12px, 2.2vh, 32px);
  font-size: clamp(2.5rem, min(5.6vw, 7.2vh), 8.5rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.hero-dots-title span {
  display: block;
  color: #5f5878;
}

.hero-dots .hero-buttons {
  margin-top: clamp(18px, 3vh, 40px);
}

@media (max-width: 960px) {
  .hero-dots > .hero-dots-head { grid-template-columns: 1fr; }
  .hero-offers { --rows: 3; }
  .hero-offers ul { align-items: flex-start; }
}

/* ==========================================================================
   INTRO (component/intro.njk, assets/js/intros/)
   Plays over the hero on load. Every variant ends the same way: it lands on
   the hero rule, the real wordmark (the dynamic brand, which sits above the
   intro) appears in place, then the hero copy and the header come in.
   html.has-intro is set in head.njk, intro-completed by intros/core.js
   ========================================================================== */
.intro {
  display: none;
}

html.has-intro {
  overflow: hidden;
}

html.has-intro .intro {
  display: block;
  position: fixed;
  inset: 0;
  /* Under the dynamic brand (1000), so the real wordmark can come in through it */
  z-index: 995;
  overflow: hidden;
  background: var(--intro-bg, var(--bg));
  cursor: pointer;
}

.intro.is-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--intro-fade, 0.45s) ease;
}

.intro-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Wrestling starts on paper: there from the first paint, before its script has run */
.intro--wrestling {
  --intro-bg: #f3f1f6;
}

/* Held back until the intro hands over */
html.has-intro .hero-dots-foot,
html.has-intro .hero-offers,
html.has-intro .hero-grid,
html.has-intro .hero-subtext,
html.has-intro .hero-meta,
html.has-intro .hero-foot {
  opacity: 0;
  transform: translateY(18px);
}

html.has-intro .header-nav,
html.has-intro .header-cta {
  opacity: 0;
  pointer-events: none;
}

html.intro-completed .hero-dots-foot,
html.intro-completed .hero-offers,
html.intro-completed .hero-grid,
html.intro-completed .hero-subtext,
html.intro-completed .hero-meta,
html.intro-completed .hero-foot {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease);
}

html.intro-completed .hero-foot {
  transition-delay: 0.2s;
}

html.intro-completed .header-nav,
html.intro-completed .header-cta {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.7s ease 0.25s;
}

/* Intros that draw the wordmark themselves hand over to the real one in place, without the rise */
.dynamic-brand.is-instant .ltr > span {
  transform: none !important;
  transition: none !important;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section {
  padding: clamp(80px, 11vw, 160px) 0 0;
}

.section-head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px var(--gutter);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  margin-bottom: clamp(48px, 7vw, 96px);
}

.section-head > div {
  grid-column: 2 / -1;
}

.section-title {
  font-size: clamp(2rem, 3.8vw, 5.25rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.045em;
  max-width: 20em;
  text-wrap: balance;
}

.section-lede {
  margin-top: clamp(20px, 2.2vh, 32px);
  max-width: 54ch;
  font-size: clamp(1.125rem, 1.25vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink-2);
}

/* Split heading: title on the left, lede on the right lined up with the title's last line */
.section-head-split {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 96px);
  align-items: end;
}

/* The title always sits just under the rule; where the lede runs longer (tablets), it's the lede that
   reaches down, not the title */
.section-head-split .section-title {
  align-self: start;
  max-width: none;
}

.section-head-split .section-lede {
  justify-self: end;
  max-width: 62ch;
  margin-top: 0;
}

/* Meet Tinker Click on desktop: the same columns as the animation + steps below (.live),
   so the title centres over the animation and the lede starts where the 01–04 steps do */
@media (min-width: 1024px) {
  #tinker .section-head-split {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 80px);
  }

  #tinker .section-head-split .section-title {
    justify-self: center;
    text-align: center;
  }

  #tinker .section-head-split .section-lede {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; }
  .section-head > div { grid-column: 1; }
  .section-head-split .section-lede { justify-self: start; }
}

.index-num {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px var(--gutter);
  margin-bottom: clamp(64px, 9vw, 128px);
}

.stats dt {
  font-size: clamp(0.8125rem, 0.9vw, 1.0625rem);
  color: var(--muted);
}

.stats dd {
  margin-top: 8px;
  font-size: clamp(3rem, 7.5vw, 7rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}

.stats small {
  margin-left: 0.04em;
  font-size: 0.4em;
  letter-spacing: -0.02em;
  color: var(--muted);
}

/* Words instead of numbers (platform names) need a smaller size to fit a column */
.stats-words dd {
  font-size: clamp(2rem, 3.6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

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

/* Platform row: logo above each name; sits under the feature list */
.platforms {
  margin: clamp(64px, 9vw, 128px) 0 0;
}

.platforms > div {
  padding-top: clamp(20px, 2.2vh, 32px);
  border-top: 1px solid var(--line);
}

.platform-logo {
  display: block;
  width: clamp(32px, 3.2vw, 56px);
  height: clamp(32px, 3.2vw, 56px);
  margin-bottom: clamp(20px, 2.5vw, 44px);
  fill: currentColor;
  color: var(--ink);
  transition: color 0.4s ease, transform 0.6s var(--ease);
}

.platforms > div:hover .platform-logo {
  color: var(--accent);
  transform: translateY(-4px);
}

.platforms .is-upcoming dd,
.platforms .is-upcoming .platform-logo {
  color: var(--muted);
}

/* Features: two big rows, who it's for and what they ask for, slid in opposite directions by the
   scroll (scripts.njk); the features are listed underneath */
.ticker {
  display: grid;
  gap: 4px;
  overflow: hidden;
  /* Full bleed, out of the container */
  margin-inline: calc(50% - 50vw);
}

.ticker-row {
  display: flex;
  width: max-content;
  will-change: transform;
}

.ticker-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding-right: 0.4em;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7.5vw, 11rem);
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Hollow letters: the outline is drawn under a fill in the page colour, so where a glyph's strokes
   overlap (as in the Chinese) the fill hides the lines inside, leaving only the outer edge */
.ticker-hollow span {
  color: var(--bg);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}

/* The solid grey dot between the words */
.ticker-dot {
  flex: none;
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  border-radius: 50%;
  background: var(--muted);
  -webkit-text-stroke: 0;
  vertical-align: middle;
}

/* The features: a list on phones, a rail of cards from 761px (scripts.njk slides it with the scroll).
   Each takes a step colour, --f */
.features {
  margin-top: clamp(40px, 5vw, 72px);
}

.feature-list {
  list-style: none;
  border-top: 1px solid var(--line);
}

/* Phones: the icon in a badge of the feature's colour, the copy beside it, the number on the right */
.feature-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  /* Scaled from the left, so the rows stay lined up with the page */
  transform-origin: 0 50%;
}

/* The row nearest the middle of the screen snaps into focus under a glass panel, a little magnified;
   the rest sit back, smaller and faded (scripts.njk). The rows reach 4px past the page on each side and
   are padded 12px in, so the glass has room around the text and some space from the screen's edges;
   their dividers are drawn inset to match */
.feature-list.is-focusing {
  border-top: 0;
}

.feature-list.is-focusing li {
  position: relative;
  margin-inline: -4px;
  padding-inline: 12px;
  border-bottom: 0;
  border-radius: 18px;
  opacity: 0.3;
  transform: scale(0.86);
  transform-origin: 50% 50%;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.feature-list.is-focusing li::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 1px;
  background: var(--line);
  transition: opacity 0.25s ease;
}

.feature-list.is-focusing li.is-focus {
  z-index: 1;
  opacity: 1;
  transform: scale(1.02);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.28));
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 0 1px var(--line), 0 22px 44px -22px rgba(18, 18, 18, 0.4);
}

/* The light catching the glass */
.feature-list.is-focusing li.is-focus::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 42%, transparent 54%);
  pointer-events: none;
}

/* No dividers against the glass */
.feature-list.is-focusing li.is-focus::after,
.feature-list.is-focusing li:has(+ .is-focus)::after {
  opacity: 0;
}



.feature-viz { display: none; }

.feature-copy {
  position: relative;
  min-height: 44px;
  padding-left: 60px;
}

.feature-num {
  position: absolute;
  top: 3px;
  right: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--muted);
}

.feature-list h3 {
  padding-right: 32px;
  font-size: clamp(1.125rem, 1.25vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.feature-icon {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: clamp(44px, 3vw, 54px);
  height: clamp(44px, 3vw, 54px);
  border-radius: 12px;
  background: color-mix(in srgb, var(--f) 14%, var(--bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--f) 22%, transparent);
  color: var(--f);
}

.feature-copy > p {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: clamp(0.9375rem, 1vw, 1.2rem);
  line-height: 1.55;
}

.features-nav { display: none; }

/* From 761px: a rail of cards running out to the right edge of the screen, aligned with the page on the left */
@media (min-width: 761px) {
  .features {
    --edge: max(var(--gutter), calc((100vw - var(--container-max, 1440px)) / 2 + var(--gutter)));
    margin-inline: calc(50% - 50vw);
  }

  .feature-list {
    display: flex;
    gap: clamp(16px, 1.5vw, 28px);
    padding: 0 var(--edge) 4px;
    overflow-x: auto;
    border-top: 0;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--edge);
    scrollbar-width: none;
  }

  .feature-list::-webkit-scrollbar { display: none; }

  .feature-list li {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 0;
    width: min(clamp(360px, 24vw, 500px), 42vw);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius);
    background: var(--bg-raised);
    scroll-snap-align: start;
  }

  .feature-viz {
    display: grid;
    place-items: center;
    height: clamp(220px, 14vw, 300px);
    padding: 18px;
    background: color-mix(in srgb, var(--f) 10%, var(--bg-raised));
    color: var(--f);
  }

  .feature-copy {
    min-height: 0;
    padding: clamp(22px, 1.8vw, 36px);
  }

  .feature-num { position: static; display: block; margin-bottom: 10px; }

  .feature-list h3 {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: clamp(1.375rem, 1.4vw, 1.85rem);
    letter-spacing: -0.03em;
  }

  .feature-list h3 { padding-right: 0; }

  .feature-icon {
    position: static;
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
  }

  .feature-copy > p { margin-top: 8px; }

  .features-nav {
    display: flex;
    align-items: center;
    margin: clamp(24px, 2.8vw, 40px) var(--edge) 0;
  }

  .features-progress {
    display: block;
    flex: 1;
    height: clamp(2px, 0.15vw, 3px);
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }

  .features-progress i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--ink);
    border-radius: 999px;
    will-change: width;
    transition: width 0.08s linear;
  }

  /* Pinned in the middle of the screen while the scroll slides the cards across (scripts.njk sets its
     top and the section's height). A clean solid progress line indicates scroll position. */
  .features.is-scrub .features-pin { position: sticky; }
  .features.is-scrub .feature-list { overflow-x: hidden; scroll-snap-type: none; cursor: auto; }
  .features.is-scrub .features-progress {
    height: clamp(2px, 0.15vw, 3px);
    background: var(--line);
    margin-right: 0;
  }
  .features.is-scrub .features-progress i {
    display: block;
    height: 100%;
  }

  /* On screens tall enough, the platforms row is pinned under the rail with it (scripts.njk), lined
     up with the page, and the section keeps the space it left after it */
  .features-pin > .platforms { margin: clamp(32px, 4vw, 56px) var(--edge) 0; }
  .features.has-platforms { margin-bottom: clamp(64px, 9vw, 128px); }
}

/* The examples on the cards, in the card's colour */
.fv-say { display: grid; overflow: hidden; font-size: 2rem; font-weight: 500; letter-spacing: -0.04em; text-align: center; }
.fv-covers { display: grid; grid-template-columns: repeat(3, 44px); gap: 8px; }
.fv-covers i { aspect-ratio: 3 / 4; border-radius: 6px; background: color-mix(in srgb, var(--f) 18%, var(--bg)); }
.fv-covers i:nth-child(5) { animation: fv-flash 2.4s ease infinite; }

@keyframes fv-flash {
  0%, 40% { background: color-mix(in srgb, var(--f) 18%, var(--bg)); box-shadow: none; }
  45% { background: #fff; box-shadow: 0 0 30px #fff; }
  60%, 100% { background: var(--f); box-shadow: none; }
}

.fv-opts { display: grid; gap: 8px; width: min(260px, 100%); font-size: 0.875rem; color: var(--ink); }
.fv-opts span { display: flex; gap: 10px; align-items: center; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); animation: fv-pick 4.5s infinite; }
.fv-opts span::before { content: ""; width: 12px; height: 12px; border: 1.5px solid var(--muted); border-radius: 50%; animation: fv-dot 4.5s infinite; animation-delay: inherit; }
.fv-opts span:nth-child(2) { animation-delay: 1.5s; }
.fv-opts span:nth-child(3) { animation-delay: 3s; }

@keyframes fv-pick {
  0%, 30% { border-color: var(--f); }
  34%, 100% { border-color: var(--line); }
}

@keyframes fv-dot {
  0%, 30% { border-color: var(--f); background: radial-gradient(var(--f) 45%, transparent 50%); }
  34%, 100% { border-color: var(--muted); background: none; }
}

.fv-files { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 280px; }
.fv-files span { padding: 7px 12px; border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 0.875rem; box-shadow: 0 0 0 1px var(--line); animation: fv-bob 3s ease-in-out infinite; }
.fv-files span:nth-child(2) { animation-delay: 0.4s; }
.fv-files span:nth-child(3) { animation-delay: 0.8s; }
.fv-files span:last-child { color: var(--f); box-shadow: 0 0 0 1px var(--f); animation-delay: 1.2s; }

@keyframes fv-bob {
  50% { transform: translateY(-6px); }
}

.fv-code { margin: 0; padding: 14px 18px; border-radius: 10px; background: var(--bg); color: var(--ink-2); font: 0.8125rem/1.8 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; }
.fv-code b { color: var(--f); font-weight: 500; }
.fv-cmd { display: flex; gap: 6px; align-items: center; min-width: min(240px, 100%); padding: 12px 18px; border: 1.5px solid var(--f); border-radius: 999px; background: var(--bg); color: var(--ink); font: 1rem ui-monospace, "SF Mono", Menlo, monospace; }
.fv-cmd > span { display: grid; overflow: hidden; }
.fv-cmd i { width: 1.5px; height: 1.1em; background: var(--f); animation: ui-blink 1s steps(1) infinite; }
.fv-graph { width: min(280px, 100%); }

/* Words that change (data-cycle) roll up out of their line */
.fv-w { grid-area: 1 / 1; white-space: nowrap; }
.fv-w.is-in { animation: fv-in 0.6s var(--ease) both; }
.fv-w.is-out { animation: fv-out 0.4s var(--ease-in-out) both; }

@keyframes fv-in { from { transform: translateY(100%); } }
@keyframes fv-out { to { transform: translateY(-100%); } }

/* Live interface (Meet Tinker): a small app (Cat & Fish) that is described, built, translated and
   shared. .live carries the step (data-step 0–3) and --c, that step's colour. The stage is a size
   container: --u is 1% of the app's width, so the app scales as one piece, and --ch is its height in
   --u; --k scales its type up on phones */
.live { position: relative; --c: var(--node-1); }

/* The orb's halo is drawn on this (sphere.js): over the whole width of the screen and well above and
   below the demo, so the particles can fly in from far off as it gathers */
.live-canvas {
  position: absolute;
  z-index: 5;
  top: -35vh;
  left: calc(50% - 50vw);
  /* A canvas keeps its own shape unless given both sizes, so top and bottom alone won't stretch it */
  width: 100vw;
  height: calc(100% + 70vh);
  pointer-events: none;
}
.live[data-step="1"] { --c: var(--node-2); }
.live[data-step="2"] { --c: var(--node-3); }
.live[data-step="3"] { --c: var(--node-4); }

.live-stage {
  --cw: 40cqw;
  --k: 1;
  --ch: 125;
  --u: calc(var(--cw) / 100);
  --ph: calc(var(--u) * 11 * var(--k));
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  position: relative;
  container-type: size;
  aspect-ratio: 16 / 9;
  /* Sized from the viewport height so the stage and the steps under it fit on one screen */
  width: min(100%, max(480px, calc((100svh - 340px) * 16 / 9)));
  margin-inline: auto;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  background: radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, var(--c) 14%, var(--bg-raised)), var(--bg-raised) 70%);
  color: #141414;
  perspective: 1800px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The app card: a prompt pill on step 1, the app on 2 and 3, a gallery card on 4 */
.ui-card {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: calc(var(--u) * 100);
  height: calc(var(--u) * var(--ch));
  border-radius: calc(var(--u) * 6);
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.04), 0 34px 64px -30px rgba(20, 20, 50, 0.4);
  transform-style: preserve-3d;
  transition: width 0.9s var(--ease), height 0.9s var(--ease), border-radius 0.9s var(--ease), translate 0.9s var(--ease),
    scale 0.9s var(--ease), background-color 0.6s ease;
}

.live[data-step="0"] .ui-card {
  width: min(calc(var(--u) * 108), 92cqw);
  height: calc(var(--ph) + var(--u) * 8);
  border-radius: calc(var(--ph) / 2 + var(--u) * 4);
  translate: -50% 0;
}

.live[data-step="3"] .ui-card { scale: 0.7; translate: -50% -56%; }

.ui-body {
  position: absolute;
  left: calc(var(--u) * 6);
  top: calc(var(--u) * 6);
  width: calc(var(--u) * 88);
  height: calc(var(--u) * (var(--ch) - 16) - var(--ph));
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3.5);
  transform-style: preserve-3d;
}

/* Blocks of the app come in one after another (--i) */
.ui-b {
  transition: opacity 0.5s ease, transform 0.8s var(--ease);
  transition-delay: calc(0.25s + var(--i, 0) * 0.07s);
}

.live[data-step="0"] .ui-b {
  opacity: 0;
  transform: translateY(calc(var(--u) * 4));
  transition-duration: 0.3s;
  transition-delay: 0s;
}

.ui-head { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(var(--u) * 3); flex: none; }

.ui-eyebrow {
  display: grid;
  font-family: var(--mono);
  font-size: max(8.5px, calc(var(--u) * 2.3 * var(--k)));
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
}

.ui-title {
  display: grid;
  margin-top: calc(var(--u) * 1.2);
  font-family: var(--font-display);
  font-size: calc(var(--u) * 7.6 * var(--k));
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.ui-badge {
  display: inline-grid;
  flex: none;
  padding: calc(var(--u) * 1) calc(var(--u) * 2.4);
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font-size: calc(var(--u) * 2.3 * var(--k));
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: opacity 0.4s ease, scale 0.6s var(--ease), background-color 0.6s ease;
}

.ui-badge.is-empty { opacity: 0; scale: 0.7; }

.ui-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: none;
  height: calc(var(--u) * 8.5 * var(--k));
  padding: calc(var(--u) * 1);
  border-radius: 999px;
  background: #f1efeb;
}

.ui-seg > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.6);
  border-radius: 999px;
  color: #8a857d;
  font-size: max(8.5px, calc(var(--u) * 2.4 * var(--k)));
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ui-seg > .is-on { background: #fff; color: #141414; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.2); }
.ui-seg > span > span { display: inline-grid; }
.ui-seg svg { flex: none; width: calc(var(--u) * 3 * var(--k)); height: calc(var(--u) * 3 * var(--k)); }

.ui-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  gap: calc(var(--u) * 3.5);
  transform-style: preserve-3d;
}

/* Each tile in one of the step colours (fixed, so they stay bright in dark mode too) */
.ui-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
  min-height: 0;
  padding: calc(var(--u) * 3.2) calc(var(--u) * 4);
  border-radius: calc(var(--u) * 4.5);
  color: #fff;
  background: linear-gradient(155deg, color-mix(in srgb, var(--t) 82%, #fff), var(--t) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 24px -14px var(--t);
}

.ui-tile:nth-child(1) { --t: #2b4dff; }
.ui-tile:nth-child(2) { --t: #7a3cff; }
.ui-tile:nth-child(3) { --t: #f2541b; }
.ui-tile:nth-child(4) { --t: #0f9f72; }

.ui-tile > svg {
  box-sizing: content-box;
  flex: none;
  width: calc(var(--u) * 4.4 * var(--k));
  height: calc(var(--u) * 4.4 * var(--k));
  margin-bottom: auto;
  padding: calc(var(--u) * 0.9);
  border-radius: calc(var(--u) * 1.8);
  background: rgba(255, 255, 255, 0.2);
  fill: rgba(255, 255, 255, 0.25);
}

.ui-label {
  display: grid;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: max(8.5px, calc(var(--u) * 2.3 * var(--k)));
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Not scaled up on phones (--k), where the tiles are shorter */
.ui-value {
  display: grid;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: calc(var(--u) * 7.4);
  font-weight: 400;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.ui-bar {
  display: block;
  flex: none;
  height: calc(var(--u) * 1.1);
  margin-top: calc(var(--u) * 1.2);
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}

.ui-bar i {
  display: block;
  width: calc(var(--v) * 100%);
  height: 100%;
  border-radius: inherit;
  background: #fff;
  transition: width 1.4s var(--ease) 0.6s;
}

.live[data-step="0"] .ui-bar i { width: 0; transition-delay: 0s; }

/* The prompt: fills the pill on step 1, docks at the bottom of the app after */
.ui-prompt,
.ui-share {
  position: absolute;
  left: calc(var(--u) * 6);
  right: calc(var(--u) * 6);
  bottom: calc(var(--u) * 6);
  height: var(--ph);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  overflow: hidden;
  border-radius: 999px;
  background: #f3f1ed;
  white-space: nowrap;
}

.ui-prompt {
  padding: 0 calc(var(--u) * 1.6) 0 calc(var(--u) * 3.6);
  font-size: calc(var(--u) * 3.2 * var(--k));
  transition: left 0.9s var(--ease), right 0.9s var(--ease), bottom 0.9s var(--ease), font-size 0.9s var(--ease),
    opacity 0.4s ease, translate 0.6s var(--ease), background-color 0.5s ease;
}

.live[data-step="0"] .ui-prompt {
  left: calc(var(--u) * 4);
  right: calc(var(--u) * 4);
  bottom: calc(var(--u) * 4);
  font-size: calc(var(--u) * 3.7 * var(--k));
  background-color: transparent;
}

.live[data-step="3"] .ui-prompt { opacity: 0; translate: 0 calc(var(--u) * 4); }

.ui-prompt > svg,
.ui-share > svg {
  flex: none;
  width: calc(var(--u) * 3.6 * var(--k));
  height: calc(var(--u) * 3.6 * var(--k));
  color: var(--c);
}

.ui-caret {
  flex: none;
  width: 1.5px;
  height: 1.1em;
  margin-left: -1px;
  background: currentColor;
  animation: ui-blink 1s steps(1) infinite;
}

@keyframes ui-blink {
  50% { opacity: 0; }
}

.ui-send {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--ph) - var(--u) * 3.2);
  aspect-ratio: 1;
  margin-left: auto;
  border-radius: 50%;
  background: #141414;
  color: #fff;
}

.ui-send svg { width: 46%; height: 46%; }

/* Building: a line runs along the prompt */
.ui-prompt::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--c);
  opacity: 0;
}

.live.go[data-step="1"] .ui-prompt::after { animation: ui-build 2.8s var(--ease-in-out) 0.3s both; }

@keyframes ui-build {
  0% { width: 0; opacity: 1; }
  85% { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}

.ui-share {
  padding: 0 calc(var(--u) * 3.6);
  font-family: var(--mono);
  font-size: calc(var(--u) * 2.7 * var(--k));
  opacity: 0;
  translate: 0 calc(var(--u) * 4);
  transition: opacity 0.4s ease, translate 0.6s var(--ease);
}

.live[data-step="3"] .ui-share { opacity: 1; translate: 0 0; transition-delay: 0.35s; }
.ui-likes { display: inline-flex; gap: 0.3em; margin-left: auto; color: #f2541b; font-weight: 600; }
.ui-likes > span { display: inline-grid; font-variant-numeric: tabular-nums; }

/* Two other people's apps, fanned out behind on step 4 */
.ui-ghost {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 100);
  height: calc(var(--u) * var(--ch));
  translate: -50% -50%;
  scale: 0.6;
  opacity: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 5);
  padding: calc(var(--u) * 7);
  border-radius: calc(var(--u) * 6);
  background: #fff;
  box-shadow: 0 30px 60px -30px rgba(20, 20, 50, 0.35);
  transition: left 0.9s var(--ease), translate 0.9s var(--ease), scale 0.9s var(--ease), rotate 0.9s var(--ease), opacity 0.6s ease;
}

.ui-ghost b { width: 60%; height: calc(var(--u) * 9); border-radius: calc(var(--u) * 2); background: #ece9e3; }
.ui-ghost span { flex: 1; display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: calc(var(--u) * 4); }
/* Pastel, so they sit back behind the card */
.ui-ghost i { --g: #fff; border-radius: calc(var(--u) * 4); background: color-mix(in srgb, var(--t) 30%, var(--g)); }
.ui-ghost i:nth-child(1) { --t: #7a3cff; }
.ui-ghost i:nth-child(2) { --t: #0f9f72; }
.ui-ghost i:nth-child(3) { --t: #2b4dff; }
.ui-ghost i:nth-child(4) { --t: #f2541b; }
.live[data-step="3"] .ui-ghost { opacity: 1; scale: 0.64; }
.live[data-step="3"] .ui-ghost-l { translate: calc(-50% - var(--u) * 24) -53%; rotate: -9deg; transition-delay: 0.15s; }
.live[data-step="3"] .ui-ghost-r { translate: calc(-50% + var(--u) * 24) -53%; rotate: 9deg; transition-delay: 0.25s; }

/* Step 1: suggestions under the pill */
.ui-chips {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(50% + var(--ph) + var(--u) * 13);
  width: 92cqw;
  translate: -50% 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--u) * 2);
  transition: opacity 0.4s ease, translate 0.6s var(--ease);
}

.ui-chips span {
  padding: calc(var(--u) * 1.3) calc(var(--u) * 3);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.2);
  color: #5a564f;
  font-family: var(--mono);
  font-size: calc(var(--u) * 2.4 * var(--k));
  white-space: nowrap;
}

.live:not([data-step="0"]) .ui-chips { opacity: 0; translate: -50% calc(var(--u) * 4); }

/* The halo's spot above the step-1 pill (which starts at 50%); sized by height so it stays round
   whatever the stage's shape. The orb canvas draws there */
.live-stage > .ui-orb {
  position: absolute;
  left: 50%;
  top: 4.5%;
  height: 44%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: none;
}

.live-stage .live-counter {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 18px;
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Text that changes: the new words stack on the old in one grid cell while they swap. Most swap at
   once, as each block lands (--i); the Remix rolls each word up out of its slot and the German in
   under it (--j), so the words that roll are clipped to their line */
.ui-w { grid-area: 1 / 1; white-space: nowrap; }
.ui-body [data-t],
.ui-body [data-n] { overflow: hidden; padding-block: 0.1em; margin-block: -0.1em; }
.ui-w.is-in { animation: ui-in 1ms both; animation-delay: calc(0.45s + var(--i, 0) * 0.08s); }
.ui-w.is-out { animation: ui-out 1ms both; animation-delay: calc(0.45s + var(--i, 0) * 0.08s); }
.live.go[data-step="1"] .ui-w.is-in { animation-delay: 0.3s; }
.live[data-step="2"] .ui-w.is-in { animation: ui-roll-in 0.8s var(--ease) both; animation-delay: calc(0.15s + var(--j, 0) * 55ms); }
.live[data-step="2"] .ui-w.is-out { animation: ui-roll-out 0.55s var(--ease-in-out) both; animation-delay: calc(var(--j, 0) * 55ms); }

@keyframes ui-in { from { opacity: 0; } }
@keyframes ui-out { to { opacity: 0; } }
@keyframes ui-roll-in { from { transform: translateY(110%); } }
@keyframes ui-roll-out { to { transform: translateY(-110%); } }

/* Build: the app lies exploded in 3D, then drops together and turns to face you */
.ui-b { --z: calc(var(--u) * (10 + var(--i) * 5)); }
.live.go[data-step="1"] .ui-card { animation: ui-tilt 2.8s var(--ease-in-out) both; }
.live.go[data-step="1"] .ui-b { animation: ui-lift 2.8s var(--ease-in-out) both; animation-delay: calc(var(--i) * 0.05s); }

@keyframes ui-tilt {
  0%, 50% { transform: rotateX(54deg) rotateZ(-34deg) scale(0.8); }
  100% { transform: none; }
}

@keyframes ui-lift {
  0% { transform: translateZ(0); opacity: 0; }
  12% { opacity: 1; }
  28%, 52% { transform: translateZ(var(--z)); }
  100% { transform: translateZ(0); }
}



/* Steps under the stage: the active one is full strength, the rest wait in the background */
.live-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px var(--gutter);
  margin-top: clamp(24px, 3vw, 36px);
  list-style: none;
}

.live-step {
  display: block;
  width: 100%;
  text-align: left;
  opacity: 0.4;
  transition: opacity 0.5s ease;
}

.live-step[aria-current] {
  opacity: 1;
}

@media (hover: hover) {
  .live-step:hover { opacity: 1; }
}

.live-step[aria-current] .index-num {
  color: var(--node);
}

.live-step .index-num {
  font-size: clamp(0.8125rem, 0.85vw, 1rem);
}

.live-step h3 {
  margin: 12px 0 10px;
  font-size: clamp(1.25rem, 1.5vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.live-step p {
  max-width: 48ch;
  font-size: clamp(0.9375rem, 1.05vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
}

/* The timer line under each step's text: the current one fills until the next step (scripts.njk) */
.live-timer {
  display: block;
  height: clamp(1px, 0.12vw, 2px);
  margin-top: 16px;
  overflow: hidden;
  background: var(--line);
}

.live-timer i {
  display: block;
  height: 100%;
  background: var(--node);
  transform: scaleX(0);
  transform-origin: left;
}

.live-nav {
  display: none;
}

/* Desktop: animation on the left, the steps stacked beside it */
@media (min-width: 1024px) {
  .live {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 100px);
    align-items: center;
  }

  .live-stage {
    --cw: 54cqw;
    aspect-ratio: 4 / 3;
    width: min(100%, calc((100svh - 160px) * 4 / 3));
  }

  .live-steps {
    grid-template-columns: 1fr;
    gap: clamp(20px, 2.5vw, 40px);
    margin-top: 0;
  }

  .live-step h3 { margin-top: 6px; }
  .live-step p { max-width: 50ch; }
}

@media (max-width: 860px) {
  /* A taller stage and app, with larger type; the halo's spot keeps the size it had on the square stage */
  .live-stage {
    --cw: 84cqw;
    --k: 1.38;
    --ch: 134;
    aspect-ratio: 5 / 6;
    width: min(100%, max(280px, calc((100svh - 440px) * 5 / 6)));
  }

  .live-stage > .ui-orb { top: 11.5%; height: 37%; }
  .live-stage .live-counter { display: none; }

  /* One step at a time under the animation: all four share one spot and cross-fade */
  .live-steps { grid-template-columns: 1fr; }
  .live-steps > li { grid-area: 1 / 1; }

  .live-step {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.6s var(--ease);
  }

  .live-step[aria-current] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0.15s;
  }
  /* Previous / next arrows with a dot per step between them */
  .live-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
  }

  .live-arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: border-color 0.3s ease, background 0.3s ease;
  }

  .live-arrow:active {
    background: var(--bg-raised);
  }

  .live-dots {
    display: flex;
    gap: 4px;
  }

  .live-dot {
    position: relative;
    width: 28px;
    height: 28px;
  }

  .live-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 999px;
    background: var(--line);
    transition: width 0.4s var(--ease), margin 0.4s var(--ease), background 0.4s ease;
  }

  .live-dot[aria-current]::after {
    width: 22px;
    margin-left: -11px;
    background: var(--node);
  }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
/* Legacy FAQ layout fallback (superseded by modern stacked FAQ system) */
.section-head-stack {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* Last section before the footer keeps breathing room above it */
.section-last {
  padding-bottom: clamp(80px, 11vw, 160px);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* The footer, dark: on the hero's night, carrying on from the creed above it (its tokens the
   hero's, so everything in it, buttons and all, turns with it) */
.site-footer {
  color-scheme: dark;
  --bg: #161028;
  --bg-raised: #1f1736;
  --ink: #f1eefa;
  --ink-2: #c6c0d8;
  --muted: #8d86a3;
  --line: rgba(241, 238, 250, 0.12);
  --accent: #971aff;
  --accent-2: #971aff;
  --accent-gradient: linear-gradient(135deg, #8f86ff 0%, #b462ff 100%);
  --accent-soft: #8f86ff;
  --on-accent: #fff;
  --on-ink: #0e0b18;
  padding: clamp(48px, 6vw, 96px) 0 32px;
  background: rgb(14, 11, 26);
  color: var(--ink);
}

.footer-statement {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-top: clamp(24px, 2.5vh, 40px);
  border-top: clamp(4px, 0.35vw, 6px) solid var(--ink);
}

.footer-headline {
  font-size: clamp(2.25rem, 5.2vw, 6.5rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

/* Oversized year mark, its top lined up with "Built to tinker." */
.footer-mark {
  margin-top: -0.06em;
  font-size: clamp(3.5rem, 13vw, 12rem);
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.06em;
}

/* The logo mark on the page with the orb, in the halo's old place and size, its top lined up with the
   headline. The mark leaves more room round its ring than the halo did, so it's drawn a little past
   its box to come out the same size */
.footer-orb {
  position: relative;
  flex: none;
  width: clamp(5.4rem, 15vw, 20rem);
  aspect-ratio: 1;
}

.footer-orb img {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
}

.footer-cta {
  margin-top: clamp(24px, 3vw, 40px);
}

/* Sits just above the bottom line */
.footer-blurb {
  max-width: 68ch;
  margin-top: clamp(56px, 7vw, 120px);
  font-size: clamp(1.125rem, 1.4vw, 1.75rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  text-wrap: pretty;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(24px, 2.5vh, 40px);
  padding-top: clamp(16px, 1.8vh, 24px);
  border-top: 1px solid var(--line);
  font-size: clamp(0.8125rem, 0.85vw, 1rem);
  color: var(--muted);
}

.footer-legal {
  display: flex;
  gap: 20px;
}

.footer-legal a:hover,
.footer-credit a:hover {
  color: var(--accent);
}

.footer-credit a {
  color: var(--ink-2);
}

@media (max-width: 760px) {
  .footer-bottom { flex-direction: column; }
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 1s var(--ease);
}

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

/* ==========================================================================
   POLICY PAGES
   ========================================================================== */
.policy-nav-header {
  border-bottom: 1px solid var(--line);
}

.policy-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.brand-logo {
  width: 36px;
  height: 36px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
}

.back-link:hover {
  color: var(--accent);
}

.policy-main {
  padding: clamp(56px, 8vw, 112px) 0 clamp(80px, 10vw, 140px);
}

.policy-section {
  max-width: 760px;
}

.policy-header {
  margin-bottom: 48px;
}

.policy-header h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}

.policy-meta {
  margin-top: 16px;
  font-size: 0.875rem;
  color: var(--muted);
}

.policy-card {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.policy-card h2 {
  margin-bottom: 12px;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.policy-card p,
.policy-card li {
  color: var(--ink-2);
  line-height: 1.7;
}

.policy-card p + p,
.policy-card p + ul,
.policy-card ul + p {
  margin-top: 12px;
}

.policy-card ul {
  padding-left: 20px;
}

.policy-card strong {
  color: var(--ink);
  font-weight: 500;
}

.policy-card a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.policy-card.highlight {
  margin-top: 16px;
  padding: 28px;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg-raised);
}

/* ==========================================================================
   SAGE SPECIFIC COMPONENTS & SECTIONS
   ========================================================================== */
.header-nav {
  position: fixed;
  top: calc((var(--header-h) - var(--header-cta-h, 40px)) / 2);
  right: calc(var(--gutter) + clamp(210px, 16vw, 280px));
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.5vw, 24px);
  height: var(--header-cta-h, 40px);
}

.nav-links {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
}

.nav-link {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

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

.nav-link.nav-signin {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
}

.nav-link.nav-signin:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 1080px) {
  .header-nav {
    display: none;
  }
}

/* ==========================================================================
   EDITORIAL SECTION SYSTEM
   No cards. Sections sit straight on the page, held together by the hero's
   4-column grid, hairline rules and type; colour goes on accents (rules,
   underlines, the featured item), never on containers.
   ========================================================================== */
:root {
  /* A lighter violet for small text and underlines, readable on the dark ground */
  --accent-soft: #8f86ff;
}

.section {
  position: relative;
  isolation: isolate;
  /* The ambient glows run past the sides; phones would widen the whole page to fit them (body's
     clip doesn't stop that). clip, not hidden, so the FAQ's sticky titles still stick */
  overflow-x: clip;
  padding: clamp(96px, 12vw, 184px) 0 0;
}

/* Underlines in the copy: thin, set low, tinted violet */
u {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent-soft) 65%, transparent);
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.25s ease;
}

a:hover u {
  text-decoration-color: var(--ink);
}

/* Secondary and small buttons */
.btn-ghost {
  border-color: var(--line);
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: var(--ink);
}

.btn-sm {
  height: 38px;
  padding: 0 16px;
  font-size: 0.875rem;
}

/* Soft colour in the background, behind the type */
.ambient-glow {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  filter: blur(120px);
  opacity: 0.14;
  border-radius: 50%;
}

.ambient-glow--center {
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 90vw);
  height: 420px;
  background: radial-gradient(circle, var(--accent) 0%, var(--accent-2) 60%, transparent 80%);
}

.ambient-glow--left {
  top: 6%;
  left: -12%;
  width: min(700px, 80vw);
  height: 460px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 75%);
}

.ambient-glow--right {
  top: 10%;
  right: -12%;
  width: min(700px, 80vw);
  height: 460px;
  background: radial-gradient(circle, var(--accent-2) 0%, transparent 75%);
}

/* Section label: index number and name in the first column of .section-head */
.section-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(0.75rem, 0.8vw, 0.875rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-2);
}

.section-label .index-num {
  font-size: inherit;
  letter-spacing: 0;
  color: var(--accent-soft);
}

.section-label.is-center {
  justify-content: center;
}

.section-subtitle {
  margin-top: clamp(20px, 2.2vh, 32px);
  max-width: 40ch;
  font-size: clamp(1.25rem, 1.6vw, 1.875rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  text-wrap: pretty;
}

.section-cta {
  margin-top: clamp(28px, 3vw, 48px);
}

/* 01. Grow: a manifesto over a staircase. The title sits small at the top with the subtitle across
   from it; the statement takes over, large, its underlined phrases lit in the gradient; then the
   three pillars step down a line from idea to impact */
.grow-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px var(--gutter);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.grow-title {
  margin-top: 14px;
  font-size: clamp(1.5rem, 2.2vw, 2.75rem);
}

.grow-subtitle {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.15vw, 1.35rem);
  text-align: right;
}

.grow-lede {
  margin-top: clamp(56px, 7vw, 120px);
  font-size: clamp(2rem, 5vw, 6.5rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

/* Lit word by word as it scrolls (scripts.njk, 11): each word faint, rising to full. The
   underlined phrases take their gradient a word at a time, so each can fade on its own */
.lit-word {
  opacity: calc(0.14 + 0.86 * var(--lit, 0));
}

html [data-scroll-words] u {
  background: none;
}

[data-scroll-words] u .lit-word {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Opening the section (no header above it on the homepage) */
.section-grow .container > .grow-lede:first-child {
  margin-top: 0;
}

.grow-lede u {
  text-decoration: none;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grow-sub {
  max-width: 60ch;
  margin: clamp(28px, 3vw, 48px) 0 0 auto;
  font-size: clamp(1rem, 1.15vw, 1.35rem);
  line-height: 1.6;
  color: var(--ink-2);
}

/* The stairs: each pillar a step lower than the last; the line's three levels (0, 50%, 100% of its
   height) are the steps' drops, so it runs through each step's dot */
.grow-stairs {
  --drop: clamp(70px, 8vw, 140px);
  position: relative;
  margin-top: clamp(80px, 10vw, 160px);
  padding-bottom: calc(var(--drop) * 2);
}

.grow-path {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--drop) * 2);
  overflow: visible;
  pointer-events: none;
}

.grow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--gutter);
  list-style: none;
}

.grow-step {
  position: relative;
  padding-top: 28px;
}

.grow-step:nth-child(2) { transform: translateY(var(--drop)); }
.grow-step:nth-child(3) { transform: translateY(calc(var(--drop) * 2)); }

/* The step's dot on the line, ringed in the page colour; the last one glows */
.grow-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 6px var(--bg);
}

.grow-step:nth-child(3)::before {
  background: var(--accent-2);
  box-shadow: 0 0 0 6px var(--bg), 0 0 18px var(--accent-2);
}

.grow-icon {
  display: block;
  margin-bottom: 20px;
  color: var(--accent-soft);
}

.grow-step h3 {
  font-size: clamp(1.375rem, 1.8vw, 2.125rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.grow-step p:not(.grow-tag) {
  margin-top: 12px;
  max-width: 34ch;
  font-size: clamp(1rem, 1.05vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-2);
}

.grow-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: clamp(0.8125rem, 0.85vw, 0.9375rem);
  font-weight: 500;
  color: var(--muted);
}

.grow-tag::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.grow-step:nth-child(3) .grow-tag {
  color: var(--accent-soft);
}

@media (max-width: 860px) {
  .grow-subtitle { text-align: left; }
  .grow-stairs { padding-bottom: 0; }
  .grow-path { display: none; }
  .grow-steps { grid-template-columns: 1fr; gap: 48px; }
  .grow-step:nth-child(n) { transform: none; }
}

/* The editorial statement (used by the layout options in concepts/grow.njk) */
.statement {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px) var(--gutter);
  margin-top: clamp(104px, 12vw, 192px);
}

.statement-lede {
  grid-column: 2 / -1;
  font-size: clamp(1.625rem, 2.9vw, 3.75rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

.statement-sub {
  grid-column: 2 / span 2;
  max-width: 58ch;
  font-size: clamp(1rem, 1.15vw, 1.35rem);
  line-height: 1.6;
  color: var(--ink-2);
}

/* The hero already closes its screen, so the first section needs less room above it */
.section-grow {
  padding-top: clamp(40px, 5vw, 80px);
}

@media (max-width: 760px) {
  .statement { grid-template-columns: 1fr; }
  .statement-lede, .statement-sub { grid-column: 1; }
}

/* 02. Problem / solution, untangled: a band of lines runs the width of the screen, knotted over
   the challenge and combed straight, lit violet, over the solution (scripts.njk draws it, and
   unties more of the knot as it comes up the screen); each column sits under its half */
.section-wrestle .section-head {
  margin-bottom: clamp(40px, 5vw, 80px);
}

.untangle-band {
  position: relative;
  height: clamp(160px, 18vw, 280px);
  margin-inline: calc(50% - 50vw);
}

.untangle-band canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.untangle-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px clamp(40px, 6vw, 120px);
  margin-top: clamp(32px, 4vw, 64px);
}

.untangle-col .contrast-title {
  margin-top: 18px;
}

.contrast-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(0.75rem, 0.8vw, 0.875rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.contrast-label::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: currentColor;
}

.is-solution .contrast-label {
  color: var(--accent-soft);
}

.contrast-title {
  margin: 20px 0 8px;
  font-size: clamp(1.625rem, 2.4vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.untangle-col > p:not([class]) {
  margin-top: 16px;
  max-width: 54ch;
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink-2);
}

.untangle-col strong {
  color: var(--ink);
  font-weight: 500;
}

/* The line that answers the problem: larger, with a violet rule beside it */
.pull-quote {
  position: relative;
  margin-top: clamp(36px, 3.6vw, 56px);
  padding-left: clamp(20px, 1.8vw, 28px);
  max-width: 34ch;
  font-size: clamp(1.25rem, 1.7vw, 2rem);
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: var(--ink-2);
}

.pull-quote::before {
  content: "";
  position: absolute;
  top: 0.2em;
  bottom: 0.2em;
  left: 0;
  width: 2px;
  background: var(--accent-gradient);
}

.signature {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(36px, 3.6vw, 56px);
}

.signature-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: var(--on-accent);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.signature-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 1.0625rem;
}

.signature-name strong {
  font-weight: 500;
}

.signature-name span {
  font-size: 0.875rem;
  color: var(--muted);
}

.signature-mail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 0.9375rem;
  color: var(--ink-2);
  transition: color 0.2s ease;
}

.signature-mail:hover {
  color: var(--accent-soft);
}

/* On phones each column gets its own small band over its label (scripts.njk, 9) */
.untangle-mini {
  display: none;
  height: 104px;
  margin-bottom: 20px;
}

.untangle-mini canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 860px) {
  .untangle-cols { grid-template-columns: 1fr; }
  .untangle-band { display: none; }
  .untangle-mini { display: block; }
}

/* The product shot: a quiet window frame lit from below */
.showcase {
  position: relative;
  margin: clamp(64px, 8vw, 120px) 0 0;
}

.showcase::before {
  content: "";
  position: absolute;
  inset: 12% 6% -8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
  filter: blur(70px);
  pointer-events: none;
}

.browser-chassis {
  overflow: hidden;
  border-radius: clamp(12px, 1.1vw, 20px);
  background: #111113;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 50px 120px -40px rgba(0, 0, 0, 0.9);
}

.browser-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 16px;
  background: #161618;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.browser-dots {
  display: flex;
  gap: 7px;
}

.b-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.browser-url-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.75rem;
  color: var(--muted);
}

.visual-img {
  display: block;
  width: 100%;
  height: auto;
}

.showcase-caption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  font-size: clamp(0.875rem, 0.95vw, 1.0625rem);
  color: var(--muted);
}

.showcase-caption::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: currentColor;
}

/* 03. Steps: three stops on one line, big outlined numerals */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px var(--gutter);
  list-style: none;
}

.step {
  position: relative;
  padding-top: clamp(32px, 3.4vw, 52px);
  border-top: 1px solid var(--line);
}

/* The stop on the line */
.step::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}

.step.is-featured {
  border-top-color: transparent;
}

.step.is-featured::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent-gradient);
}

.step.is-featured::before {
  background: var(--accent-2);
  box-shadow: 0 0 14px var(--accent-2);
}

.step-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 8.5vw, 10rem);
  line-height: 0.85;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 28%, transparent);
}

.step.is-featured .step-num {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0;
}

.step-title {
  margin-top: clamp(28px, 3vw, 48px);
  font-size: clamp(1.375rem, 1.7vw, 2.125rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.step-desc {
  margin-top: 14px;
  max-width: 38ch;
  font-size: clamp(1rem, 1.05vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-2);
}

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 48px; }
}

/* 03. How it works: one stem of dots down the middle, the steps alternating either side of it.
   It lights in the Sage purples as the section scrolls (scripts.njk, 12): each step's node lights,
   its number builds in big dot-matrix figures beside it and its text comes up */
.stem {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 0 20px;
  list-style: none;
}

/* The stem and the numbers, drawn on one canvas reaching past the stem's sides */
.stem-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stem-dots canvas {
  position: absolute;
  top: 0;
  left: -40px;
}

.stem-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 140px;
  margin-bottom: clamp(80px, 10vw, 140px);
}

.stem-step:last-child { margin-bottom: 0; }

.js .stem-text {
  opacity: 0.2;
  translate: 0 20px;
  transition: opacity 0.6s ease, translate 0.7s var(--ease);
}

.js .stem-step.is-on .stem-text {
  opacity: 1;
  translate: 0 0;
}

/* Left of the stem, then right, then left */
.stem-step:nth-child(even) .stem-text { grid-column: 1; text-align: right; }
.stem-step:nth-child(odd) .stem-text { grid-column: 2; }

.stem-title {
  font-size: clamp(1.75rem, 2.6vw, 2.8rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.stem-desc {
  max-width: 36ch;
  margin-top: 14px;
  font-size: clamp(1rem, 1.1vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink-2);
}

.stem-step:nth-child(even) .stem-desc { margin-left: auto; }

.stem-node {
  position: absolute;
  left: 50%;
  top: 18px;
  width: 14px;
  height: 14px;
  translate: -7px 0;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--line);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.stem-step.is-on .stem-node {
  background: var(--accent-2);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-2) 20%, transparent), 0 0 18px var(--accent-2);
}

/* Phones: the stem down the left, every step to its right */
@media (max-width: 860px) {
  .stem-node { left: 12px; }
  /* The number builds above the title, in room left for it */
  .stem-text { padding-top: 104px; }
  .stem-step { grid-template-columns: 1fr; padding-left: 44px; }
  .stem-step:nth-child(n) .stem-text { grid-column: 1; text-align: left; }
  .stem-step:nth-child(n) .stem-desc { margin-left: 0; }
}

/* 04. Proven Advantage, sideways: the section holds the screen (.yes-stage, sticky) for as long as
   its tall wrapper (.yes-pin) takes to scroll past, and that scroll moves the row (.yes-track) left
   (scripts.njk, 13). A curving sage stem (an SVG the script draws) grows along the row to the middle
   of the screen; at each question the node lights, its leaves open, the outlined YES fills with the
   gradient and the status becomes a pill. The row ends with the answer in the middle of the screen,
   where the stem flowers. Above it a bar with the section's label and a count; below, the progress */
.section-yes {
  overflow-x: clip;
  /* The stage is a full screen of its own */
  padding-top: 0;
}

.yes-pin {
  /* Set by the script: a screen, the row's travel, and a pause at the end */
  height: 400vh;
}

.yes-stage {
  position: sticky;
  top: 0;
  display: grid;
  /* One column the width of the screen, however wide the row inside it is */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100svh;
  padding: calc(var(--header-h) + clamp(16px, 3vh, 32px)) 0 clamp(28px, 5vh, 56px);
  overflow: hidden;
}

.yes-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.yes-count {
  font-size: clamp(0.8125rem, 0.9vw, 1rem);
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.yes-count b {
  font-weight: 500;
  color: var(--ink);
}

.yes-rail {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 0;
}

.yes-track {
  /* Where the stem runs, down from the top of the row */
  --node-y: clamp(120px, 17vh, 170px);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(72px, 7vw, 140px);
  /* Breathing room before the heading; the script ends the row with the answer centred */
  padding: 0 max(calc(var(--gutter) * 2), 7vw, calc((100vw - var(--container-max)) / 2 + var(--gutter) * 2));
  list-style: none;
  will-change: transform;
}

.yes-intro {
  flex: none;
  align-self: center;
  width: min(78vw, 600px);
  padding-right: clamp(0px, 3vw, 40px);
}

.yes-intro .section-title {
  font-size: clamp(2.5rem, 4.6vw, 5rem);
}

.yes-intro .section-lede {
  margin-top: 24px;
  max-width: 32em;
}

.yes-hint {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(32px, 5vh, 56px);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* A short line drawing itself out to the right, over and over */
.yes-hint i {
  position: relative;
  width: 48px;
  height: 1px;
  overflow: hidden;
  background: var(--line);
}

.yes-hint i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-2);
  animation: yes-hint 1.8s var(--ease-in-out) infinite;
}

@keyframes yes-hint {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.yes-step {
  position: relative;
  flex: none;
  width: min(80vw, 580px);
  padding-top: calc(var(--node-y) + 52px);
}

.yes-node {
  position: absolute;
  left: 0;
  top: var(--node-y);
  z-index: 1;
  width: 16px;
  height: 16px;
  translate: -8px -8px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 22%, transparent);
  transition: background 0.4s ease, box-shadow 0.5s ease;
}

.yes-step.is-yes .yes-node {
  background: var(--accent-2);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-2) 18%, transparent), 0 0 22px var(--accent-2);
}

.yes-tag {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.yes-q {
  margin-top: 16px;
  font-size: clamp(2rem, 3.1vw, 3.4rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.045em;
  color: var(--ink-2);
}

.yes-q strong {
  font-weight: 500;
  color: var(--ink);
}

.yes-stamp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: clamp(24px, 3.4vh, 40px);
}

/* The YES: its word keeps the room, the script draws it in dots over it (faint while it waits,
   then filling with purple from the left) */
.yes-word {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(5rem, 8.5vw, 8.75rem);
  line-height: 0.86;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* The stem, leaves, buds and flower, drawn in dots on one canvas along the row */
.yes-dots {
  position: absolute;
  left: 0;
  pointer-events: none;
}

.yes-status {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.9375rem;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}

.yes-step.is-yes .yes-status {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent-2) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 45%, transparent);
}

.js .yes-step:not(.is-yes) .yes-q { opacity: 0.4; }
.yes-q { transition: opacity 0.5s ease; }

/* The answer, centred at the end of the row, where the stem flowers */
.yes-final {
  /* About as wide as the answer sets (nine of its ems), so centring it centres the words */
  width: min(86vw, calc(clamp(2.6rem, 4.8vw, 5.25rem) * 9));
}

.yes-question {
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  color: var(--muted);
}

.yes-answer {
  margin-top: 18px;
  font-size: clamp(2.6rem, 4.8vw, 5.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  transition: opacity 0.6s ease;
}

.js .yes-final:not(.is-yes) .yes-answer { opacity: 0.35; }

.yes-yes {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.yes-progress {
  height: 2px;
  background: var(--line);
}

.yes-progress i {
  display: block;
  height: 100%;
  background: var(--accent-gradient);
  transform: scaleX(var(--yes-p, 0));
  transform-origin: 0 50%;
}

@media (max-width: 760px) {
  .yes-track { gap: 56px; }
  .yes-step { width: 82vw; }
  .yes-final { width: 86vw; }
}

/* 05. It's time: a diagnosis typed in a terminal as the section holds the screen (scripts.njk,
   14). Without script it's all there, typed out */
.diag-pin {
  position: relative;
  height: 340vh;
}

/* Less room under the heading here: the terminal carries straight on from it */
.section-time .section-head {
  margin-bottom: clamp(8px, 1.5vw, 24px);
}

.diag-stage {
  position: sticky;
  top: 0;
  display: flex;
  /* At the top, just under the header, so it follows the title closely */
  align-items: flex-start;
  justify-content: center;
  height: 100vh;
  height: 100svh;
  padding: calc(var(--header-h) + 16px) var(--gutter) 24px;
}

.diag-term {
  width: min(100%, 980px);
  border-radius: 20px;
  background: #0d0b16;
  color: #c6c0d8;
  overflow: hidden;
}

.diag-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.diag-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.diag-bar span {
  margin-left: auto;
  font-size: 0.75rem;
  color: #8d86a3;
}

.diag-body {
  min-height: min(52vh, 520px);
  padding: clamp(18px, 2.4vw, 32px);
  font: 500 clamp(0.75rem, 1.05vw, 1rem) / 1.75 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.diag-body div {
  white-space: pre-wrap;
  word-break: break-word;
}

.diag-body .cmd { color: #f1eefa; }
.diag-body .ok { color: #b462ff; }
.diag-body .dim { color: #6f688a; }

/* The caret, after the last character typed */
.diag-body .caret::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.2em;
  background: #b462ff;
  animation: diag-caret 1s steps(1) infinite;
}

@keyframes diag-caret { 50% { opacity: 0; } }

/* The verdict, in big dot-matrix letters */
.diag-body canvas {
  display: block;
  width: 100%;
  height: clamp(70px, 11vh, 120px);
  margin-top: 8px;
}

.diag-cta {
  padding: 0 clamp(18px, 2.4vw, 32px) clamp(18px, 2.4vw, 28px);
}

.js .diag-cta {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.js .diag-term:not(.is-done) .diag-cta { pointer-events: none; }
.js .diag-term.is-done .diag-cta { opacity: 1; }

@media (max-width: 640px) {
  .diag-body { min-height: 58vh; }
}

/* 06. FAQ: tabs and a reading pane (scripts.njk, 3). The groups as tabs; the questions down the
   left, a dot marking the chosen one, its answer in a pane on the right that stays in view. On
   phones the answers open in place. Without script, every group and answer is shown */
.faq-tabs {
  display: flex;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  padding: 5px;
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

.faq-tab {
  flex: none;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.faq-tab span {
  margin-left: 6px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.faq-tab[aria-selected="true"] {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 2px 10px -4px rgba(22, 19, 31, 0.25);
}

.faq-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
  margin-top: clamp(28px, 4vw, 48px);
}

.faq-left {
  position: relative;
  padding-left: 26px;
}

/* The dot beside the chosen question */
.faq-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #971aff;
  box-shadow: 0 0 12px rgba(151, 26, 255, 0.6);
  opacity: 0;
  transition: translate 0.45s var(--ease);
}

.faq.is-ready .faq-marker { opacity: 1; }

.faq-list {
  list-style: none;
  border-top: 1px solid var(--line);
}

.faq-list + .faq-list { margin-top: 32px; }
.faq.is-ready .faq-list + .faq-list { margin-top: 0; }

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-q {
  width: 100%;
  padding: 18px 0;
  text-align: left;
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  transition: color 0.2s ease;
}

.faq-q:hover,
.faq-q.is-on {
  color: var(--ink);
}

.faq-a,
.faq-pane-a {
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink-2);
}

.faq-a {
  padding: 0 0 20px;
}

.faq-a p + p,
.faq-pane-a p + p { margin-top: 12px; }

.faq-a strong,
.faq-pane-a strong {
  font-weight: 500;
  color: var(--ink);
}

.faq-a a:not(.btn) u,
.faq-pane-a a:not(.btn) u {
  text-decoration-color: var(--accent-soft);
}

/* The reading pane, held in view beside the list */
.faq-pane {
  display: none;
  position: sticky;
  top: calc(var(--header-h) + 24px);
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--bg) 55%, #fff);
}

.faq.is-ready .faq-pane { display: block; }

.faq-pane-tag {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.faq-pane-q {
  margin-top: 12px;
  font-size: clamp(1.5rem, 2.3vw, 2.375rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.faq-pane-a { margin-top: 20px; }

/* Each answer comes in, line by line */
.faq-pane > * { animation: faq-in 0.55s var(--ease) both; }
.faq-pane > :nth-child(2) { animation-delay: 0.05s; }
.faq-pane > :nth-child(3) { animation-delay: 0.12s; }

@keyframes faq-in { from { opacity: 0; translate: 0 10px; } }

@media (prefers-reduced-motion: reduce) {
  .faq-pane > * { animation: none; }
}

/* Phones: the tabs across, the answers in place */
@media (max-width: 860px) {
  .faq-split { grid-template-columns: 1fr; }
  .faq-left { padding-left: 0; }
  .faq-marker,
  .faq.is-ready .faq-pane { display: none; }
  .faq-tabs { width: 100%; }
  .faq-tab { padding: 0 14px; }
}

/* Creed: back to the night (scripts.njk, 15). Once it's in view the creed comes up in light type and
   WE BUILD stands in the dots below it, until a shockwave through them leaves SAGE.IS HOW.; the dark
   footer carries on from it */
.section-builders {
  padding: clamp(96px, 12vw, 184px) 0 0;
  text-align: center;
}

/* A screen of its own, not held, on the night; it plays on its own once it's in view */
.creed-pin {
  position: relative;
}

.creed-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  height: 100svh;
  padding: calc(var(--header-h) + clamp(16px, 4vh, 48px)) var(--gutter) 0;
  overflow: hidden;
}

.creed-stage > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.creed-copy {
  position: relative;
  z-index: 1;
  transition: opacity 0.5s ease;
}

/* On the night; the words wait for it to play, then come up in its light type */
.creed-pin.is-night .creed-stage { background: rgb(14, 11, 26); }
.js .creed-pin:not(.is-told) .creed-copy { opacity: 0; }
.creed-pin.is-night .section-label { color: #8d86a3; }
.creed-pin.is-night .builders-lead { color: #c6c0d8; }

.builders-lead {
  margin: clamp(16px, 2vw, 28px) auto 0;
  max-width: 40em;
  font-size: clamp(1.125rem, 1.8vw, 2rem);
  line-height: 1.45;
  letter-spacing: -0.025em;
  color: var(--ink-2);
  text-wrap: balance;
  transition: color 0.5s ease;
}

/* Testimonials: a slow line of quotes between two rules */
.marquee {
  position: relative;
  overflow: hidden;
  margin: clamp(80px, 9vw, 144px) 0 clamp(96px, 11vw, 176px);
  padding: clamp(28px, 3vw, 48px) 0;
  border-block: 1px solid var(--line);
  white-space: nowrap;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

.marquee-track {
  display: inline-block;
  animation: marquee-scroll 80s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-list {
  display: inline-flex;
  list-style: none;
}

.marquee-list li {
  display: inline-flex;
  align-items: center;
  font-size: clamp(1.5rem, 2.6vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--ink-2);
}

.marquee-list li::after {
  content: "";
  flex: none;
  width: 0.2em;
  height: 0.2em;
  margin: 0 0.9em;
  border-radius: 50%;
  background: var(--accent-gradient);
}

@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

/* Footer: three ruled columns, then a promo line and the links */
.footer-grid-sections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px var(--gutter);
  margin-top: clamp(80px, 9vw, 144px);
}

.footer-col {
  display: flex;
  flex-direction: column;
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid var(--line);
}

.footer-card-title {
  margin-bottom: 14px;
  font-size: clamp(1.25rem, 1.5vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.footer-card-desc {
  margin-bottom: 24px;
  font-size: clamp(0.9375rem, 1vw, 1.125rem);
  line-height: 1.6;
  color: var(--ink-2);
}

.footer-card-desc a {
  color: var(--ink);
}

.footer-link-highlight {
  display: inline-block;
  font-size: clamp(0.9375rem, 1vw, 1.125rem);
  font-weight: 500;
  color: var(--accent-soft);
  transition: color 0.2s ease;
}

.footer-link-highlight:hover {
  color: var(--ink);
}

/* Newsletter: an underlined field, like the application drawer's */
.footer-newsletter-form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--ink);
  transition: border-color 0.25s ease;
}

.footer-newsletter-form:focus-within {
  border-color: var(--accent);
}

.footer-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  outline: 0;
}

.footer-input::placeholder {
  color: var(--muted);
}

/* Notice: a live dot, no panel */
.footer-alert {
  display: flex;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.footer-alert::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--node-3);
  box-shadow: 0 0 10px var(--node-3);
  animation: badge-pulse 2.5s ease-in-out infinite;
}

.footer-alert strong {
  color: var(--ink);
  font-weight: 500;
}

@keyframes badge-pulse {
  50% { opacity: 0.45; }
}

.footer-promo {
  display: block;
  margin-top: clamp(64px, 7vw, 112px);
  padding: clamp(24px, 2.6vw, 40px) 0;
  border-block: 1px solid var(--line);
  font-size: clamp(1.25rem, 2.2vw, 2.75rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.035em;
  color: var(--ink-2);
  transition: color 0.3s ease;
}

.footer-promo b,
.footer-promo strong {
  color: var(--ink);
  font-weight: 500;
}

.footer-promo:hover {
  color: var(--ink);
}

.footer-sublinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin: clamp(28px, 3vw, 44px) 0 clamp(40px, 5vw, 72px);
  font-size: clamp(0.875rem, 0.9vw, 1rem);
}

.footer-sublinks-label {
  color: var(--muted);
  font-weight: 500;
}

.footer-sublinks-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.footer-sublinks-list a {
  color: var(--ink-2);
  transition: color 0.2s ease;
}

.footer-sublinks-list a:hover {
  color: var(--accent-soft);
}

.footer-sublinks-list .sep {
  color: var(--muted);
}

.footer-legal-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-2);
}

.footer-legal-brand a {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
}

/* The mark beside the headline, at app-icon size: the artwork has its own white tile */
.footer-orb {
  width: clamp(64px, 6vw, 112px);
}

.footer-orb img {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 22% !important;
}

@media (max-width: 860px) {
  .footer-grid-sections { grid-template-columns: 1fr; gap: 48px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

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

/* ==========================================================================
   COLOUR THEMES (trial)
   Palettes drawn from Ironhill (ironhill.au): cream paper #f4eddd, moss #344128,
   deep forest #27311e, sun yellow #fec820 and mist #cfd0c0, nodding to sage the
   plant. Set with html[data-theme]; head.njk takes ?theme=<name> for the
   comparison page (concepts/palettes.njk). Without one, the site stays as above.
   ========================================================================== */

/* 01 Paper: cream ground, moss ink, sun yellow kept for small sparks */
html[data-theme="paper"],
html[data-theme="day-night"] {
  color-scheme: light;
  --bg: #f4eddd;
  --bg-raised: #ebe2cc;
  --ink: #27311e;
  --ink-2: #4f5843;
  --muted: #7e7f69;
  --line: rgba(39, 49, 30, 0.16);
  --accent: #344128;
  --accent-2: #fec820;
  --accent-gradient: linear-gradient(135deg, #344128 0%, #6b7f3a 100%);
  --accent-soft: #5c6d36;
  --on-accent: #f4eddd;
  --on-ink: #f4eddd;
  --node-1: #6b7f3a;
  --node-2: #a8862a;
  --node-3: #c8641e;
  --node-4: #3f7a52;
}

/* 02 Forest: the dark site, re-grown; cream ink, sage-to-sun accent */
html[data-theme="forest"],
html[data-theme="day-night"] main > section.section:nth-of-type(odd) {
  color-scheme: dark;
  --bg: #1d2516;
  --bg-raised: #27311e;
  --ink: #f4eddd;
  --ink-2: #c8c2ae;
  --muted: #8a8c74;
  --line: rgba(244, 237, 221, 0.12);
  --accent: #fec820;
  --accent-2: #fec820;
  --accent-gradient: linear-gradient(135deg, #a9ba86 0%, #fec820 100%);
  --accent-soft: #f2d364;
  --on-accent: #1d2516;
  --on-ink: #1d2516;
  --node-1: #a9ba86;
  --node-2: #fec820;
  --node-3: #f08a4b;
  --node-4: #6fc79a;
}

/* 03 Sage leaf: the plant itself as the ground, forest ink */
html[data-theme="sage"] {
  color-scheme: light;
  --bg: #b9c0a3;
  --bg-raised: #aab394;
  --ink: #1f2818;
  --ink-2: #39432d;
  --muted: #5a6449;
  --line: rgba(31, 40, 24, 0.18);
  --accent: #27311e;
  --accent-2: #fec820;
  --accent-gradient: linear-gradient(135deg, #27311e 0%, #4b5e2c 100%);
  --accent-soft: #2f3d1f;
  --on-accent: #f4eddd;
  --on-ink: #f4eddd;
  --node-1: #344128;
  --node-2: #8a6a12;
  --node-3: #a24a14;
  --node-4: #2f6142;
}

/* 04 Moss: Ironhill's moss as the ground, sun yellow fading to cream */
html[data-theme="moss"] {
  color-scheme: dark;
  --bg: #344128;
  --bg-raised: #3d4b30;
  --ink: #f4eddd;
  --ink-2: #d4cfba;
  --muted: #a3a689;
  --line: rgba(244, 237, 221, 0.15);
  --accent: #fec820;
  --accent-2: #fec820;
  --accent-gradient: linear-gradient(135deg, #fec820 0%, #f4eddd 100%);
  --accent-soft: #fcd659;
  --on-accent: #27311e;
  --on-ink: #344128;
  --node-1: #cfd0c0;
  --node-2: #fec820;
  --node-3: #f59a5c;
  --node-4: #8fd1a6;
}

/* 05 Day & night: paper, with every other section in forest, Ironhill-style blocks */
html[data-theme="day-night"] main > section.section:nth-of-type(odd) {
  background: var(--bg);
  color: var(--ink);
  padding-bottom: clamp(96px, 12vw, 184px);
}

/* Home (the site's theme, set in head.njk): Paper, with the hero in Forest. The fixed header
   (brand, phrase, links, CTA, bar) is in Forest too while the hero is behind it, and turns
   Paper once the hero has scrolled out from under it (header-on-paper, scripts.njk) or the
   application drawer opens over it */
html[data-theme="home"] {
  color-scheme: light;
  --bg: #f4eddd;
  --bg-raised: #ebe2cc;
  --ink: #27311e;
  --ink-2: #4f5843;
  --muted: #7e7f69;
  --line: rgba(39, 49, 30, 0.16);
  --accent: #344128;
  --accent-2: #fec820;
  --accent-gradient: linear-gradient(135deg, #344128 0%, #6b7f3a 100%);
  --accent-soft: #5c6d36;
  --on-accent: #f4eddd;
  --on-ink: #f4eddd;
  --node-1: #6b7f3a;
  --node-2: #a8862a;
  --node-3: #c8641e;
  --node-4: #3f7a52;
}

html[data-theme="home"] :is(.hero, .intro),
html[data-theme="home"]:not(.header-on-paper):not(.drawer-open) :is(.site-header-bar, .dynamic-brand, .brand-phrase, .header-nav, .header-cta) {
  color-scheme: dark;
  --bg: #1d2516;
  --bg-raised: #27311e;
  --ink: #f4eddd;
  --ink-2: #c8c2ae;
  --muted: #8a8c74;
  --line: rgba(244, 237, 221, 0.12);
  --accent: #fec820;
  --accent-2: #fec820;
  --accent-gradient: linear-gradient(135deg, #a9ba86 0%, #fec820 100%);
  --accent-soft: #f2d364;
  --on-accent: #1d2516;
  --on-ink: #1d2516;
  /* The ground, as "r, g, b": its middle, between, and its edges (night) */
  --ground-1: 29, 37, 22;
  --ground-2: 20, 26, 15;
  --ground-3: 12, 16, 9;
  /* The soft light in the middle, and the light along the line (intros/prompt.js) */
  --lens: 169, 186, 134;
  --glow: 254, 200, 32;
}

html[data-theme="home"] .hero {
  /* The loading screen's ground (intros/prompt.js): night at the edges, the forest in the middle,
     and the soft sage light that sits behind its input, here behind the copy */
  background:
    radial-gradient(min(560px, 70vw) 280px at 50% 50%, rgba(var(--lens), 0.15), rgba(var(--lens), 0)),
    radial-gradient(circle farthest-corner at 50% 50%, rgb(var(--ground-1)) 0%, rgb(var(--ground-2)) 55%, rgb(var(--ground-3)) 100%);
  color: var(--ink);
  /* Room under the scroll lines, now the hero ends on a colour change */
  padding-bottom: clamp(40px, 6vh, 80px);
}

/* Over the hero's dark top edge, the bar is night rather than forest */
html[data-theme="home"]:not(.header-on-paper):not(.drawer-open) .site-header-bar {
  background: rgba(var(--ground-3), 0.86);
}

/* Inherited text colour has to be re-set where the Forest tokens start */
html[data-theme="home"]:not(.header-on-paper):not(.drawer-open) :is(.dynamic-brand, .brand-phrase, .header-nav) {
  color: var(--ink);
}

/* The header eases between the two, rather than snapping */
html[data-theme="home"] .dynamic-brand {
  transition: transform 0.48s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.35s ease, color 0.35s ease;
}
html[data-theme="home"] .brand-phrase {
  transition: opacity 0.25s ease, translate 0.4s var(--ease), color 0.35s ease;
}
html[data-theme="home"] .site-header-bar {
  transition: opacity 0.35s ease, background-color 0.35s ease;
}
html[data-theme="home"] :is(.nav-link, .header-cta) {
  transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}

/* ==========================================================================
   HERO DEPTH (trial, assets/js/hero-depth.js)
   A forest in layers behind the hero, and the paper section's top reaching up
   into it. html[data-hero-depth] is set from the page's heroDepth, or ?depth=
   (head.njk). The homepage's, edges, keeps to the hero's own height; the others
   (concepts/depth.njk) take a full screen.
   ========================================================================== */
html[data-hero-depth] .hero {
  position: relative;
}

html[data-hero-depth]:not([data-hero-depth="edges"]) .hero {
  /* A full first screen, so the forest has room below the copy */
  min-height: 100svh;
}

html[data-hero-depth] .hero > .container {
  position: relative;
  z-index: 1;
}

/* Behind the hero's copy */
.hd-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* At the top of the next section, reaching up into the hero: over the forest, under its own copy */
.hd-front {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hd-layer {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

/* Room for what hangs over the top of the next section */
html[data-hero-depth]:not([data-hero-depth="edges"]) .section-grow {
  padding-top: clamp(140px, 13vw, 220px);
}

.hd-ground {
  position: absolute;
  left: 0;
  right: 0;
}

/* ==========================================================================
   HERO BURN (trial, assets/js/hero-burn.js)
   The hero runs 40% of a screen longer, the extra in the night of its edges, and
   the paper burns up through it as it scrolls. html[data-hero-burn] is set from
   the page's heroBurn, or ?burn= (head.njk); concepts/burn.njk compares them.
   ========================================================================== */
html[data-hero-burn] .hero {
  position: relative;
  min-height: 140svh;
  /* The copy keeps to the first screen; the rest under it is forest */
  padding-bottom: calc(40svh + clamp(40px, 6vh, 80px));
  /* The lit ground stays on the first screen, fading to the night that fills the rest */
  background:
    linear-gradient(to bottom, rgba(var(--ground-3), 0) 55%, rgb(var(--ground-3))) 0 0 / 100% 100svh no-repeat,
    radial-gradient(min(560px, 70vw) 280px at 50% 50%, rgba(var(--lens), 0.15), rgba(var(--lens), 0)) 0 0 / 100% 100svh no-repeat,
    radial-gradient(circle farthest-corner at 50% 50%, rgb(var(--ground-1)) 0%, rgb(var(--ground-2)) 55%, rgb(var(--ground-3)) 100%) 0 0 / 100% 100svh no-repeat,
    rgb(var(--ground-3));
}

.hb-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


/* ==========================================================================
   HERO AMBIENT (trial, assets/js/hero-ambient.js)
   One canvas over the hero's first screen, behind its copy and under the burn.
   html[data-hero-ambient] from the page's heroAmbient, or ?ambient= (head.njk);
   concepts/ambient.njk compares them.
   ========================================================================== */
.ha-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

html[data-hero-ambient] .hero {
  position: relative;
}

/* The copy over it */
html[data-hero-ambient] .hero > .container {
  position: relative;
  z-index: 1;
}

/* The lens variants draw their own light, which moves; the fixed one goes */
html[data-hero-ambient="lens"] .hero,
html[data-hero-ambient="veins-lens"] .hero {
  background:
    linear-gradient(to bottom, rgba(var(--ground-3), 0) 55%, rgb(var(--ground-3))) 0 0 / 100% 100svh no-repeat,
    radial-gradient(circle farthest-corner at 50% 50%, rgb(var(--ground-1)) 0%, rgb(var(--ground-2)) 55%, rgb(var(--ground-3)) 100%) 0 0 / 100% 100svh no-repeat,
    rgb(var(--ground-3));
}


/* ==========================================================================
   PALETTES (trial): the Home theme's structure, other colours.
   html[data-palette] from ?palette= (head.njk); concepts/colours.njk compares
   them. Each sets the paper side, then the hero side (hero, intro, and the
   header while it's over the hero). The sage leaves stay green throughout.
   ========================================================================== */

/* Sage in bloom: the forest and paper as now, the accent salvia's purple flower in place of the sun */
html[data-palette="bloom"] {
  --accent: #4f3a86;
  --accent-2: #8f6bd6;
  --accent-gradient: linear-gradient(135deg, #4a3a78 0%, #8f6bd6 100%);
  --accent-soft: #6a4fa3;
}

html[data-palette="bloom"] :is(.hero, .intro),
html[data-palette="bloom"]:not(.header-on-paper):not(.drawer-open) :is(.site-header-bar, .dynamic-brand, .brand-phrase, .header-nav, .header-cta) {
  --accent: #b49cff;
  --accent-2: #b49cff;
  --accent-gradient: linear-gradient(135deg, #a9ba86 0%, #b49cff 100%);
  --accent-soft: #c4b2ff;
  --on-accent: #1d2516;
  --on-ink: #1d2516;
  --glow: 170, 140, 255;
}

/* Plum night: an aubergine hero, the sage leaves its complement; lavender light; paper ink plum */
html[data-palette="plum"] {
  --bg: #f4efe9;
  --bg-raised: #ebe3da;
  --ink: #2a1d33;
  --ink-2: #54465c;
  --muted: #8a7f8e;
  --line: rgba(42, 29, 51, 0.15);
  --accent: #4a2f5c;
  --accent-2: #8fae7a;
  --accent-gradient: linear-gradient(135deg, #4a2f5c 0%, #8a5fa8 100%);
  --accent-soft: #6e4a86;
  --on-accent: #f4efe9;
  --on-ink: #f4efe9;
}

html[data-palette="plum"] :is(.hero, .intro),
html[data-palette="plum"]:not(.header-on-paper):not(.drawer-open) :is(.site-header-bar, .dynamic-brand, .brand-phrase, .header-nav, .header-cta) {
  --bg: #34243e;
  --bg-raised: #3e2c4a;
  --ink: #f4efe9;
  --ink-2: #cfc4d4;
  --muted: #9a8da0;
  --line: rgba(244, 239, 233, 0.12);
  --accent: #d0b8ff;
  --accent-2: #d0b8ff;
  --accent-gradient: linear-gradient(135deg, #a9ba86 0%, #c9a6ff 100%);
  --accent-soft: #d8c6ff;
  --on-accent: #1f1526;
  --on-ink: #1f1526;
  --ground-1: 52, 36, 62;
  --ground-2: 32, 22, 40;
  --ground-3: 16, 11, 21;
  --lens: 196, 170, 220;
  --glow: 214, 190, 255;
}

/* Smudge: white sage burning: charcoal and ash, silver smoke light, an ember for the accent */
html[data-palette="smudge"] {
  --bg: #efece6;
  --bg-raised: #e5e1d9;
  --ink: #22201d;
  --ink-2: #4d4943;
  --muted: #85807a;
  --line: rgba(34, 32, 29, 0.15);
  --accent: #2e2b27;
  --accent-2: #e8742c;
  --accent-gradient: linear-gradient(135deg, #3a3631 0%, #c4622a 100%);
  --accent-soft: #a8541f;
  --on-accent: #efece6;
  --on-ink: #efece6;
}

html[data-palette="smudge"] :is(.hero, .intro),
html[data-palette="smudge"]:not(.header-on-paper):not(.drawer-open) :is(.site-header-bar, .dynamic-brand, .brand-phrase, .header-nav, .header-cta) {
  --bg: #282521;
  --bg-raised: #322e29;
  --ink: #efece6;
  --ink-2: #c9c4bb;
  --muted: #8f8a82;
  --line: rgba(239, 236, 230, 0.12);
  --accent: #ff9a4d;
  --accent-2: #ff9a4d;
  --accent-gradient: linear-gradient(135deg, #d8d4ca 0%, #ff8a3d 100%);
  --accent-soft: #ffb27a;
  --on-accent: #1a1816;
  --on-ink: #1a1816;
  --ground-1: 40, 37, 33;
  --ground-2: 25, 23, 21;
  --ground-3: 12, 11, 10;
  --lens: 214, 208, 196;
  --glow: 255, 140, 60;
}

/* Terracotta: the herb garden: a clay-brown hero, sand paper, sage against terracotta */
html[data-palette="terracotta"] {
  --bg: #f5ece1;
  --bg-raised: #ece0d2;
  --ink: #3a2219;
  --ink-2: #634a3e;
  --muted: #9a8174;
  --line: rgba(58, 34, 25, 0.15);
  --accent: #8a3f22;
  --accent-2: #6b7f3a;
  --accent-gradient: linear-gradient(135deg, #8a3f22 0%, #c9673d 100%);
  --accent-soft: #a5512d;
  --on-accent: #f5ece1;
  --on-ink: #f5ece1;
}

html[data-palette="terracotta"] :is(.hero, .intro),
html[data-palette="terracotta"]:not(.header-on-paper):not(.drawer-open) :is(.site-header-bar, .dynamic-brand, .brand-phrase, .header-nav, .header-cta) {
  --bg: #42261c;
  --bg-raised: #4d2e22;
  --ink: #f5ece1;
  --ink-2: #d9c6b8;
  --muted: #a48a7c;
  --line: rgba(245, 236, 225, 0.12);
  --accent: #f0a070;
  --accent-2: #f0a070;
  --accent-gradient: linear-gradient(135deg, #a9ba86 0%, #f08a5d 100%);
  --accent-soft: #f5b58f;
  --on-accent: #2a160f;
  --on-ink: #2a160f;
  --ground-1: 66, 38, 28;
  --ground-2: 40, 23, 17;
  --ground-3: 20, 11, 8;
  --lens: 232, 160, 120;
  --glow: 255, 170, 110;
}

/* Slate: a cool blue-grey night, a pale cool paper, sage greening to mint */
html[data-palette="slate"] {
  --bg: #eef0eb;
  --bg-raised: #e3e7e0;
  --ink: #1b2430;
  --ink-2: #45505d;
  --muted: #7d8692;
  --line: rgba(27, 36, 48, 0.15);
  --accent: #2b3a4d;
  --accent-2: #8fae7a;
  --accent-gradient: linear-gradient(135deg, #2b3a4d 0%, #5b7a8f 100%);
  --accent-soft: #3f5a73;
  --on-accent: #eef0eb;
  --on-ink: #eef0eb;
}

html[data-palette="slate"] :is(.hero, .intro),
html[data-palette="slate"]:not(.header-on-paper):not(.drawer-open) :is(.site-header-bar, .dynamic-brand, .brand-phrase, .header-nav, .header-cta) {
  --bg: #212d3a;
  --bg-raised: #2a3847;
  --ink: #eef0eb;
  --ink-2: #c3cbd2;
  --muted: #8792a0;
  --line: rgba(238, 240, 235, 0.12);
  --accent: #c5e0a5;
  --accent-2: #c5e0a5;
  --accent-gradient: linear-gradient(135deg, #a9ba86 0%, #d6f0b8 100%);
  --accent-soft: #cfe6b4;
  --on-accent: #121a22;
  --on-ink: #121a22;
  --ground-1: 33, 45, 58;
  --ground-2: 21, 29, 38;
  --ground-3: 10, 14, 19;
  --lens: 160, 190, 170;
  --glow: 190, 225, 170;
}

/* Purple sage: the leaves themselves in the original Sage purples, #302aff and #971aff, flowing on
   a current (--leaves, --leaf-flow: sage-leaf.js, hero-ambient.js, intros/fields/leaves.js) over
   a near-black violet ground, with the original gradient and violet light */
html[data-palette="purple"] {
  --leaves: purple;
  --leaf-flow: 1;
  --bg: #f3f1f6;
  --bg-raised: #e9e6f0;
  --ink: #16131f;
  --ink-2: #474255;
  --muted: #827d8f;
  --line: rgba(22, 19, 31, 0.14);
  --accent: #302aff;
  --accent-2: #971aff;
  --accent-gradient: linear-gradient(135deg, #302aff 0%, #971aff 100%);
  --accent-soft: #4a3df0;
  --on-accent: #fff;
  --on-ink: #f3f1f6;
}

html[data-palette="purple"] :is(.hero, .intro),
html[data-palette="purple"]:not(.header-on-paper):not(.drawer-open) :is(.site-header-bar, .dynamic-brand, .brand-phrase, .header-nav, .header-cta) {
  --bg: #161028;
  --bg-raised: #1f1736;
  --ink: #f1eefa;
  --ink-2: #c6c0d8;
  --muted: #8d86a3;
  --line: rgba(241, 238, 250, 0.12);
  --accent: #971aff;
  --accent-2: #971aff;
  --accent-gradient: linear-gradient(135deg, #302aff 0%, #971aff 100%);
  --accent-soft: #8f86ff;
  --on-accent: #fff;
  --on-ink: #0e0b18;
  --ground-1: 24, 18, 44;
  --ground-2: 14, 11, 26;
  --ground-3: 6, 5, 12;
  --lens: 110, 50, 255;
  --glow: 151, 26, 255;
}

/* ==========================================================================
   JOURNEYS (trial, assets/js/journeys.js and intros/eclipse, ripple, terminal,
   aurora): five whole openings, compared in concepts/journeys.njk. The hero runs
   half a screen longer for the transition, like the burn's.
   ========================================================================== */
html[data-journey] .hero {
  position: relative;
  min-height: 150svh;
  padding-bottom: calc(50svh + clamp(40px, 6vh, 80px));
  background:
    linear-gradient(to bottom, rgba(var(--ground-3), 0) 55%, rgb(var(--ground-3))) 0 0 / 100% 100svh no-repeat,
    radial-gradient(min(560px, 70vw) 280px at 50% 50%, rgba(var(--lens), 0.12), rgba(var(--lens), 0)) 0 0 / 100% 100svh no-repeat,
    radial-gradient(circle farthest-corner at 50% 50%, rgb(var(--ground-1)) 0%, rgb(var(--ground-2)) 55%, rgb(var(--ground-3)) 100%) 0 0 / 100% 100svh no-repeat,
    rgb(var(--ground-3));
}

html[data-journey] .hero > .container {
  position: relative;
  z-index: 1;
}

.jy-back,
.jy-front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.jy-front {
  z-index: 2;
  height: 100%;
}

/* Each its own night */
html[data-journey="ripple"] :is(.hero, .intro) {
  --ground-1: 22, 20, 58;
  --ground-2: 13, 11, 36;
  --ground-3: 5, 4, 16;
}

html[data-journey="terminal"] :is(.hero, .intro) {
  --ground-1: 16, 15, 22;
  --ground-2: 9, 9, 13;
  --ground-3: 3, 3, 5;
}

html[data-journey="aurora"] :is(.hero, .intro) {
  --ground-1: 12, 14, 34;
  --ground-2: 7, 8, 20;
  --ground-3: 2, 3, 8;
}

html[data-journey="horizon"] :is(.hero, .intro) {
  --ground-1: 10, 9, 20;
  --ground-2: 5, 5, 11;
  --ground-3: 0, 0, 3;
}

/* Aurora: a centred hero, the wordmark in the middle with the note and social proof at the ends
   of the rule, and the copy centred under it */
@media (min-width: 961px) {
  html[data-journey="aurora"] .hero-top {
    position: relative;
    justify-content: center;
  }

  html[data-journey="aurora"] .hero-wordmark-wrap {
    margin: 0;
  }

  html[data-journey="aurora"] :is(.hero-meta, .hero-subtext) {
    position: absolute;
    bottom: 0;
  }

  html[data-journey="aurora"] .hero-meta { left: 0; }
  html[data-journey="aurora"] .hero-subtext { right: 0; }

  html[data-journey="aurora"] :is(.hero-title, .hero-body) {
    grid-column: 1 / -1;
    margin-left: 0;
    text-align: center;
  }

  html[data-journey="aurora"] .hero-body {
    flex-direction: column;
    align-items: center;
  }
}

/* Stairs (assets/js/stairs.js): sprigs from the staircase's points and the way into section 02,
   on one canvas laid on the page over that stretch (its top and height set there), under the header */
.st-canvas {
  position: absolute;
  left: 0;
  z-index: 50;
  pointer-events: none;
}

/* The dot sprigs (stairs.js, sprout): one canvas inside the staircase, under the steps so each
   step's point sits over its sprig's stem */
.st-sprout {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

html[data-stairs="sprout"] .grow-step {
  z-index: 2;
}

/* Phones: room above each step's copy for the sprig lying along its top */
@media (max-width: 760px) {
  html[data-stairs] .grow-step { padding-top: 56px; }
  html[data-stairs] .grow-steps { gap: 64px; }
}

/* Room between the staircase and section 02 for the way down to travel through */
html:is([data-stairs="swoop"], [data-stairs="roots"]) .section-wrestle {
  padding-top: clamp(260px, 38vh, 440px);
}

/* ==========================================================================
   GUIDE (trial, assets/js/guide.js): one element leading down the page, an SVG
   laid behind the content (its top and size set there). html[data-guide] from
   ?guide= (head.njk); concepts/guide.njk compares them.
   ========================================================================== */
.gd-svg {
  position: absolute;
  left: 0;
  z-index: -1;
  overflow: visible;
  pointer-events: none;
}

/* The leaf's layer, over the content and under the header */
.gd-over { z-index: 40; }

.gd-trail { fill: none; stroke: color-mix(in srgb, var(--ink) 32%, transparent); stroke-width: 1.3; stroke-linecap: round; }
.gd-trail-ahead { fill: none; stroke: color-mix(in srgb, var(--ink) 10%, transparent); stroke-width: 1; stroke-dasharray: 2 7; stroke-linecap: round; }
.gd-none { fill: none; stroke: none; }
.gd-ring { fill: var(--bg); stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 1.2; transition: fill 0.4s ease, stroke 0.4s ease; }
.gd-halo { fill: color-mix(in srgb, var(--accent-2) 22%, transparent); opacity: 0; transition: opacity 0.5s ease; }
.gd-stop.is-passed .gd-ring { fill: var(--accent-2); stroke: var(--accent-2); }
.gd-stop.is-passed .gd-halo { opacity: 1; }
.gd-shadow { fill: rgba(40, 20, 70, 0.14); filter: blur(4px); }
.gd-thread { fill: none; stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1.5; }
.gd-tick { fill: none; stroke: var(--accent-2); stroke-width: 1.5; stroke-linecap: round; }
.gd-head { fill: var(--accent-2); filter: drop-shadow(0 0 6px var(--accent-2)); }
.gd-stem { fill: none; stroke: #4e346c; stroke-width: 2.2; stroke-linecap: round; }
.gd-pair { transition: opacity 0.3s ease; }
.gd-bud { fill: var(--accent-2); filter: drop-shadow(0 0 5px var(--accent-2)); }
.gd-midrib { fill: none; stroke: color-mix(in srgb, var(--accent-2) 45%, transparent); stroke-width: 1.8; stroke-linecap: round; }
.gd-vein { fill: none; stroke: color-mix(in srgb, var(--accent-2) 42%, transparent); stroke-width: 1.5; stroke-linecap: round; }