/* ==========================================================================
   Ostfro — design system
   Single stylesheet. Every colour, type, space and motion value is a token
   declared here; nothing below the token block hardcodes a colour.

   Material: porcelain and cobalt. A bright cool page, midnight text, and one
   deep saturated blue doing all the work — buttons, markers, the leading
   blades of the mark. Champagne is the single warm value and appears only
   where something is live: a status dot, the mark's catch-light. It never
   touches copy, buttons or backgrounds.

   Light (porcelain) is the default. Dark (onyx) is the toggle.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Type. Geist, self-hosted as one variable file. No third-party request,
   no flash of the wrong face: it's preloaded in the head of every page.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2-variations"),
       url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* The palette. */
  --porcelain: #F7F8FB;
  --fog:       #CBD2E1;
  --slate:     #5B6B94;
  --cobalt:    #0E3BD6;
  --cobalt-lit:#2E5BFF;
  --midnight:  #0B1230;
  --champagne: #D9B778;

  /* Semantic surfaces and text — light theme. */
  --bg:       var(--porcelain);
  --bg-2:     #EEF1F7;
  --bg-3:     #E3E8F2;
  --fg:       var(--midnight);
  --fg-2:     #2A3559;
  --muted:    var(--slate);
  --line:     rgba(11, 18, 48, 0.10);
  --line-2:   rgba(11, 18, 48, 0.20);

  /* The working colour for interface: links, markers, focus rings, icon
     tiles, current-page. Cobalt in the light theme; white in the dark one,
     where colour is rationed to the mark, the closing band and the live dot. */
  --accent:   var(--cobalt);

  /* The live accent: champagne for indicators, the mark's catch-light. */
  --ice:      var(--champagne);

  /* Cobalt sheen: the primary button and the hairline sweeps that carry it. */
  --grad:     linear-gradient(135deg, var(--cobalt-lit) 0%, var(--cobalt) 55%, #0A2FAE 100%);
  --grad-lit: linear-gradient(135deg, #4D74FF 0%, var(--cobalt-lit) 50%, var(--cobalt) 100%);

  /* Raised surfaces sit a shade above the page. */
  --card-top:    #FFFFFF;
  --card-bottom: #F3F6FD;
  --field-bg:    #FFFFFF;
  --footer-bg:   #EEF1F7;

  /* Atmosphere: a pool of cobalt light high left, a trace of warmth low
     right, so the page reads as lit rather than flat. */
  --atmos-1:  rgba(14, 59, 214, 0.07);
  --atmos-2:  rgba(217, 183, 120, 0.06);
  --atmos-3:  transparent;
  --grain:    0.018;

  /* Hairline borders on raised surfaces, brighter top-left where light hits. */
  --edge-grad: linear-gradient(140deg,
                 rgba(11, 18, 48, 0.14) 0%,
                 rgba(11, 18, 48, 0.07) 45%,
                 rgba(11, 18, 48, 0.04) 100%);
  --edge-grad-lit: linear-gradient(140deg,
                 rgba(11, 18, 48, 0.26) 0%,
                 rgba(11, 18, 48, 0.13) 45%,
                 rgba(11, 18, 48, 0.06) 100%);
  /* The one card that leads a section gets the cobalt edge. */
  --edge-grad-pro: linear-gradient(140deg,
                 rgba(14, 59, 214, 0.85) 0%,
                 rgba(14, 59, 214, 0.45) 45%,
                 rgba(217, 183, 120, 0.4) 100%);

  /* Pricing surfaces sit a step above the standard card, the lead plan a
     step above those again. */
  --plan-top:        #FFFFFF;
  --plan-bottom:     #F5F7FC;
  --plan-top-pro:    #FFFFFF;
  --plan-bottom-pro: #EEF2FF;
  --plan-wash-1:     rgba(14, 59, 214, 0.08);
  --plan-wash-2:     rgba(217, 183, 120, 0.06);

  /* The mark: six facets of cobalt, pale to deep, clockwise from the top. */
  --petal-1:  #DCE4FF;
  --petal-2:  #A9BBFF;
  --petal-3:  #6F8BFF;
  --petal-4:  #3F63F0;
  --petal-5:  var(--cobalt);
  --petal-6:  #0A2FAE;

  /* Blade tip shade and the light that catches the outer edges. */
  --tip-shade: #071F78;
  --edge-lit:  rgba(255, 255, 255, 0.7);

  /* Cobalt at low opacity: the wash behind every icon tile and the edge a
     card takes on hover. Same hue as the buttons, so the page has one blue. */
  --accent-wash:  rgba(14, 59, 214, 0.08);
  --accent-wash-2: rgba(14, 59, 214, 0.14);
  --accent-line:  rgba(14, 59, 214, 0.28);
  --edge-grad-hover: linear-gradient(140deg,
                 rgba(14, 59, 214, 0.55) 0%,
                 rgba(14, 59, 214, 0.25) 45%,
                 rgba(14, 59, 214, 0.10) 100%);

  /* Supporting colour (still tokenised). */
  --danger:       #C62828;
  --danger-line:  rgba(198, 40, 40, 0.55);
  --danger-well:  rgba(198, 40, 40, 0.06);
  --header-bg:    rgba(247, 248, 251, 0.74);

  /* Depth: a tight contact shadow and a wide soft drop, tinted midnight. */
  --shadow-card: 0 1px 2px rgba(11, 18, 48, 0.06),
                 0 18px 40px -24px rgba(11, 18, 48, 0.18);
  --shadow-card-lit: 0 1px 2px rgba(11, 18, 48, 0.08),
                 0 26px 50px -26px rgba(11, 18, 48, 0.26);
  /* Polish pass: no glows. Buttons and rings sit flat on the page. */
  --btn-glow:     none;
  --btn-glow-lit: none;
  --btn-glow-xl:  none;
  --ring-glow:    none;

  /* The mark's own ink, pinned so a theme change never shifts it. */
  --mark-ink: #05123F;

  /* Type. One family, Geist, for display and body: clean, engineered,
     identical on every device. Self-hosted; see the @font-face above. */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Geist", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --step-2:  clamp(1.85rem, 1.5rem + 1.6vw, 2.75rem);
  --step-3:  clamp(2.5rem, 1.8rem + 3.2vw, 4.5rem);

  /* Space — 1.5 ratio from 0.5rem */
  --s1: 0.5rem;
  --s2: 0.75rem;
  --s3: 1.125rem;
  --s4: 1.6875rem;
  --s5: 2.5313rem;
  --s6: 3.7969rem;
  --s7: 5.6953rem;

  --section-y:  clamp(5rem, 12vw, 11rem);
  --container:  1200px;
  --gutter:     clamp(1.25rem, 5vw, 3rem);

  /* Form fields — 56px keeps the floating label legible while clearing the
     52px minimum and the 44px tap-target floor. */
  --field-h: 56px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  400ms;

  --radius:    16px;
  --radius-sm: 10px;
  --header-h:  72px;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s3));
}

@supports (overflow-x: clip) { body { overflow-x: clip; } }

body {
  min-height: 100svh;
  background-color: var(--bg);
  color: var(--muted);
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

/* Atmosphere: three large, soft glows — violet top-left, blue bottom-right,
   a warm cyan accent lower-left — on one fixed layer behind the content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(80rem 60rem at 8% -12%, var(--atmos-1) 0%, transparent 68%),
    radial-gradient(75rem 55rem at 105% 108%, var(--atmos-2) 0%, transparent 68%),
    radial-gradient(60rem 50rem at -5% 82%, var(--atmos-3) 0%, transparent 70%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Phones and tablets skip the fixed grain layer: a full-screen composited
   noise texture is the first thing to stutter on a mid-range Android. */
@media (pointer: coarse) { body::after { display: none; } }

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

h1, h2, h3, h4 {
  color: var(--fg);
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}

h1 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: var(--step-2); font-weight: 600; }
h3 { font-size: var(--step-1); font-weight: 600; }
h4 { font-size: var(--step-0); font-weight: 600; letter-spacing: -0.02em; }

p { text-wrap: pretty; }

a {
  color: var(--fg);
  text-decoration-color: var(--line-2);
  text-underline-offset: 0.22em;
}

a:hover { text-decoration-color: currentColor; }

strong { color: var(--fg); font-weight: 500; }

ul, ol { padding-left: 1.15rem; }
li::marker { color: var(--accent); }
li + li { margin-top: var(--s1); }

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

/* Touch: no grey flash on tap, no double-tap-to-zoom delay on controls. */
a, button, .card, .system__row, .ledger__row, .lex__entry { -webkit-tap-highlight-color: transparent; }
a, button, input, select, textarea, label { touch-action: manipulation; }

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

::selection {
  background: var(--fg);
  color: var(--bg);
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

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

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }

/* Sections are separated by space, not rules. */

.stack > * + * { margin-top: var(--s3); }
.stack-lg > * + * { margin-top: var(--s5); }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s3); }
.prose h2 { margin-top: var(--s5); }
.prose h3 { margin-top: var(--s4); }

.measure { max-width: 68ch; }

.center { margin-inline: auto; text-align: center; }
.center .measure { margin-inline: auto; }

.skip-link {
  position: absolute;
  left: var(--s2);
  top: var(--s2);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--fg);
  text-decoration: none;
  transform: translateY(-150%);
}

.skip-link:focus-visible { transform: translateY(0); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Text helpers
   -------------------------------------------------------------------------- */

.lede {
  font-size: var(--step-1);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-weight: 300;
  max-width: 60ch;
}

.rule {
  height: 1px;
  border: 0;
  background: var(--line);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0.9rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--step-0);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              opacity var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

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

.btn--primary {
  position: relative;
  overflow: hidden;
  background-image: var(--grad);
  color: var(--bg);
  font-weight: 600;
  box-shadow: var(--btn-glow);
}

.btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-160%) skewX(-18deg);
  background: linear-gradient(100deg,
              transparent 0%,
              rgba(255, 255, 255, 0.45) 50%,
              transparent 100%);
}

@keyframes btn-sheen {
  from { transform: translateX(-160%) skewX(-18deg); opacity: 1; }
  to   { transform: translateX(330%) skewX(-18deg); opacity: 0; }
}

.btn--secondary {
  background: transparent;
  border-color: var(--line-2);
  color: var(--fg);
  font-weight: 500;
}

.btn--submit {
  width: 100%;
  min-height: 60px;
  padding-inline: var(--s5);
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  box-shadow: var(--btn-glow-xl);
}

@media (min-width: 560px) {
  .btn--submit { width: auto; min-width: 15rem; }
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

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

@media (hover: hover) {
  .btn--primary:hover { background-image: var(--grad-lit); }
  .btn--secondary:hover { border-color: var(--fg); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn--primary:hover::after { animation: btn-sheen 600ms var(--ease); }
}

.btn:active { transform: scale(0.98); }

/* --------------------------------------------------------------------------
   6. Surfaces
   -------------------------------------------------------------------------- */

.card,
.panel,
.svc__panel,
.well,
.form-shell {
  border: 1px solid transparent;
  background-image:
    linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%),
    var(--edge-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s4);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.card > * { position: relative; z-index: 1; }

.card h3 { margin-bottom: var(--s2); }
.card p { font-size: var(--step-0); }

/* Symmetry: every card in a row shares the same footer position — the arrow
   link or CTA is pinned to the bottom so uneven copy never staggers a row. */
.card--link { text-decoration: none; color: inherit; }

/* Hover lifts the card and deepens its shadow. The purple cursor wash that
   used to pool inside it has been removed — the lift carries the state on
   its own without tinting the surface. */
@media (hover: hover) {
  .card:hover {
    box-shadow: var(--shadow-card-lit);
    background-image:
      linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%),
      var(--edge-grad-hover);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover { transform: translateY(-6px); }
}

@media (hover: none) {
  .card:hover { transform: none; }
}

.card__icon,
.include__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--s3);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background-image: linear-gradient(150deg,
                    var(--accent-wash-2) 0%,
                    var(--accent-wash) 100%);
  color: var(--accent);
}

.card__icon svg,
.include__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.include__icon {
  flex: none;
  width: 38px;
  height: 38px;
  margin-bottom: 0;
  border-radius: var(--radius-sm);
}

.include__icon svg { width: 18px; height: 18px; stroke-width: 2; }

.includes {
  display: grid;
  gap: var(--s4);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 700px) {
  .includes { grid-template-columns: repeat(2, 1fr); column-gap: var(--s5); }
}

.includes > li { margin: 0; }

.include {
  position: relative;
  display: block;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

/* A short cobalt overline is the marker: no tile, no tick. */
.include::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 2.25rem;
  height: 2px;
  background: var(--accent);
}

.include > div { min-width: 0; }

.include h3 { font-size: var(--step-0); margin-bottom: 0.3rem; }
.include p { font-size: var(--step--1); }

.well {
  padding: var(--s4);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* Every grid stretches its rows, so cards in the same row always match
   height regardless of copy length — the symmetry the whole grid family shares. */
.grid {
  display: grid;
  gap: var(--s3);
  align-items: stretch;
}

.grid--4 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: 1fr; }

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

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

.facts {
  display: grid;
  gap: var(--s3);
  padding: 0;
  margin: 0;
}

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

.facts div { padding-top: var(--s2); border-top: 1px solid var(--line); }

.facts dt {
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  color: var(--muted);
}

.facts dd { margin: var(--s1) 0 0; color: var(--fg); font-size: var(--step-0); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  list-style: none;
  padding: 0;
}

.chips li {
  margin: 0;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
  font-size: var(--step--1);
  color: var(--fg);
}

.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 1.75rem; }
.ticks li + li { margin-top: var(--s2); }

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--grad);
}

/* --------------------------------------------------------------------------
   7. Animated mark
   -------------------------------------------------------------------------- */

.ost-mark { display: block; width: 100%; height: auto; overflow: visible; }
.ost-rotor { transform-box: view-box; transform-origin: 50% 50%; }
.ost-facet { fill-opacity: 1; }

/* The sealed state of the hero mark: one solid layer of the six blades,
   invisible until the form completes. No stroke, no glow — pitch black on
   the light page, pure white on Onyx, where black would vanish. */
.mark--hero .ost-seal { fill: #000; opacity: 0; }
html[data-theme="dark"] .mark--hero .ost-seal { fill: #FFFFFF; }


.ost-edge {
  fill: none;
  stroke: var(--edge-lit);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* Touch screens: a non-scaling stroke inside a turning group makes WebKit
   re-rasterise every frame. A plain hairline scales with the mark instead. */
@media (pointer: coarse) {
  .mark--hero .ost-edge { vector-effect: none; stroke-width: 0.45; }
}

.mark--nav .ost-edge,
.mark--sm .ost-edge { display: none; }

.ost-stop-tip { stop-color: var(--tip-shade); stop-opacity: 0.6; }
.ost-stop-1 { stop-color: var(--petal-1); }
.ost-stop-2 { stop-color: var(--petal-2); }
.ost-stop-3 { stop-color: var(--petal-3); }
.ost-stop-4 { stop-color: var(--petal-4); }
.ost-stop-5 { stop-color: var(--petal-5); }
.ost-stop-6 { stop-color: var(--petal-6); }

.ost-stop-1-deep { stop-color: color-mix(in srgb, var(--petal-1) 78%, var(--mark-ink)); }
.ost-stop-2-deep { stop-color: color-mix(in srgb, var(--petal-2) 78%, var(--mark-ink)); }
.ost-stop-3-deep { stop-color: color-mix(in srgb, var(--petal-3) 78%, var(--mark-ink)); }
.ost-stop-4-deep { stop-color: color-mix(in srgb, var(--petal-4) 78%, var(--mark-ink)); }
.ost-stop-5-deep { stop-color: color-mix(in srgb, var(--petal-5) 78%, var(--mark-ink)); }
.ost-stop-6-deep { stop-color: color-mix(in srgb, var(--petal-6) 78%, var(--mark-ink)); }

@keyframes ost-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: no-preference) {
  .ost-rotor { animation: ost-spin 24s linear infinite; }

  .brand .ost-rotor { animation-duration: 60s; }

  @media (hover: hover) {
    .brand:hover .ost-rotor { animation-duration: 8s; }
  }

  .site-footer .ost-rotor { animation-duration: 90s; }

  /* As the page scrolls the mark lifts and fades. One property on the
     wrapper, not eighteen transforms on the blades: the blades already
     carry the spin, the bloom and the seal, and stacking a per-scroll
     transform on top of those is what made the mark jump on iPhone. */
  .hero__mark {
    opacity: calc(1 - var(--aperture, 0) * var(--aperture, 0));
    transform: translateY(calc(var(--aperture, 0) * -20px));
  }
}

.mark--hero {
  width: clamp(180px, 46vw, 280px);
}

.mark--nav { width: 32px; }
.mark--sm  { width: 28px; }
.mark--md  { width: 64px; }

/* --------------------------------------------------------------------------
   8. Header + navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  padding-top: env(safe-area-inset-top);
}

@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .site-header { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.site-header.scrolled::after { opacity: 1; }

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

/* Logo block: centred on its own row on mobile, back to the left edge once
   the full nav has room from 1100px up. "Centred" here means vertically
   aligned with the rest of the row and given equal breathing space either
   side on narrow screens, not literally pinned to the viewport centre. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  color: var(--fg);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand__word {
  background-image: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--fg);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand__word { color: transparent; }
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--s3);
  margin-left: auto;
  list-style: none;
  padding: 0;
}

.nav__links li { margin: 0; }

.nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.25rem;
  color: var(--muted);
  font-size: var(--step-0);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0.25rem; right: 0.25rem; bottom: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}

.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--accent); }

.nav__links a:hover::after,
.nav__links a:focus-visible::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta { display: none; }

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 120;
}

.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--fg);
  transition: transform 300ms var(--ease), opacity 200ms linear;
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The inline nav needs the full width to breathe: eight links and the
   button. Below 1100px (every tablet, both ways round) it is the menu. */
@media (min-width: 1100px) {
  .nav__links { display: flex; }
  .nav__links a, .nav__cta { white-space: nowrap; }
  .nav__cta { display: inline-flex; margin-left: var(--s3); }
  .nav__toggle { display: none; }
}

.nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding: calc(env(safe-area-inset-top) + var(--header-h)) var(--gutter)
           calc(env(safe-area-inset-bottom) + var(--s5));
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transition: opacity 260ms var(--ease), visibility 0s linear 260ms;
}

.nav__overlay.open {
  visibility: visible;
  opacity: 1;
  transition: opacity 260ms var(--ease), visibility 0s linear 0s;
}

@media (min-width: 1100px) { .nav__overlay { display: none; } }

.nav__overlay-inner { margin-top: auto; margin-bottom: auto; width: 100%; }

.nav__overlay ul { list-style: none; padding: 0; margin: 0 0 var(--s5); }
.nav__overlay li { margin: 0; border-bottom: 1px solid var(--line); }

.nav__overlay li a {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding-block: var(--s2);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--fg);
  text-decoration: none;
}

.nav__overlay li a[aria-current="page"] { color: var(--accent); }

.nav__overlay .btn { width: 100%; }
.nav__overlay-meta { margin-top: var(--s4); font-size: var(--step--1); }

@media (prefers-reduced-motion: no-preference) {
  .nav__overlay li,
  .nav__overlay .nav__overlay-foot {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  }

  .nav__overlay.open li,
  .nav__overlay.open .nav__overlay-foot { opacity: 1; transform: none; }

  .nav__overlay.open li:nth-child(1) { transition-delay: 60ms; }
  .nav__overlay.open li:nth-child(2) { transition-delay: 120ms; }
  .nav__overlay.open li:nth-child(3) { transition-delay: 180ms; }
  .nav__overlay.open li:nth-child(4) { transition-delay: 240ms; }
  .nav__overlay.open li:nth-child(5) { transition-delay: 300ms; }
  .nav__overlay.open li:nth-child(6) { transition-delay: 360ms; }
  .nav__overlay.open li:nth-child(7) { transition-delay: 420ms; }
  .nav__overlay.open li:nth-child(8) { transition-delay: 480ms; }
  .nav__overlay.open .nav__overlay-foot { transition-delay: 540ms; }
}

body.nav-open { position: fixed; width: 100%; overflow: hidden; }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 9vw, 7rem) var(--section-y); }

.hero__grid {
  display: grid;
  gap: var(--s5);
  align-items: center;
  justify-items: center;
  text-align: center;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--s6);
    justify-items: stretch;
    text-align: left;
  }
}

/* Mobile: the mark sits on its own row, centred — not "in the literal centre
   of the screen", but aligned to the same axis as the heading and buttons
   beneath it, so nothing on the page reads off-balance. */
.hero__mark {
  order: -1;
  justify-self: center;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Phones and tablets: the mark's row is the field's room. It is tall
   enough for the form to surround the mark without touching the headline. */
@media (max-width: 899px) {
  .hero__mark { min-height: clamp(300px, 88vw, 380px); align-items: center; }
}

@media (min-width: 900px) {
  .hero__mark { order: 0; justify-self: center; }
}

.hero h1 { margin-block: var(--s3) var(--s3); }
.hero .lede { margin-bottom: var(--s4); margin-inline: auto; }

@media (min-width: 900px) {
  .hero .lede { margin-inline: 0; }
}

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

@media (min-width: 900px) {
  .hero .btn-row { justify-content: flex-start; }
}

.hero__meta {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
}

.page-head { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2rem, 5vw, 3.5rem); }
.page-head h1 { margin-block: var(--s3) var(--s3); }

/* --------------------------------------------------------------------------
   10. Steps (how it works)
   -------------------------------------------------------------------------- */

.steps {
  position: relative;
  display: grid;
  gap: var(--s5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.steps li { margin: 0; }

@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
}

.steps::before {
  content: "";
  position: absolute;
  left: 19px; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--grad);
  opacity: 0.55;
}

@media (min-width: 860px) {
  .steps::before { left: 0; right: 0; top: 19px; bottom: auto; width: auto; height: 2px; }
}

.step { position: relative; padding-left: 3.5rem; }

@media (min-width: 860px) {
  .step { padding-left: 0; padding-top: 3.5rem; }
}

.step__num {
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 999px;
  background-image:
    linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%),
    var(--edge-grad-lit);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--ring-glow);
  color: var(--accent);
  font-size: var(--step--1);
  font-weight: 600;
}

.step h3 { margin-bottom: var(--s2); }

/* --------------------------------------------------------------------------
   11. Alternating feature rows (services)
   -------------------------------------------------------------------------- */

.svc {
  display: grid;
  gap: var(--s4);
  align-items: start;
  scroll-margin-top: calc(var(--header-h) + var(--s4));
}

@media (min-width: 900px) {
  .svc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
  .svc:nth-of-type(even) .svc__body { order: 2; }
  .svc:nth-of-type(even) .svc__panel { order: 1; }
}

.svc + .svc { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--line); }

.svc__panel { padding: var(--s4); border-radius: var(--radius); box-shadow: var(--shadow-card); }

.svc__panel h4 {
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: var(--s2);
}

.svc__panel > * + * { margin-top: var(--s4); }

.svc__num { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.14em; color: var(--fg); }
.svc h2 { margin-block: var(--s2) var(--s3); }
.svc__body > * + * { margin-top: var(--s3); }

/* --------------------------------------------------------------------------
   12. Pricing band + CTA band
   -------------------------------------------------------------------------- */

.band { position: relative; background: var(--bg-2); }

.pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58rem 32rem at 50% 48%,
              var(--plan-wash-1) 0%,
              var(--plan-wash-2) 42%,
              transparent 72%);
}

.pricing > .container { position: relative; }
.pricing__sub { color: var(--muted); }

/* Three separate cards, level with each other. Each shows the same number
   of lines until "View more" opens all three together, so the row stays
   symmetrical in either state. */
.plans { display: grid; gap: var(--s4); align-items: stretch; }

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

.plan {
  --plan-scale: 1;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  padding: var(--s5) var(--s4);
  background-image:
    linear-gradient(180deg, var(--plan-top) 0%, var(--plan-bottom) 100%),
    var(--edge-grad-lit);
}

.plan .plan__name {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: var(--s2);
}

.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem; margin-bottom: var(--s2); }

.plan__amount {
  font-variant-numeric: tabular-nums;
  font-size: var(--step-3);
  font-size: min(var(--step-3), 21cqw);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg);
}

.plan__period { font-size: var(--step--1); color: var(--muted); }

.plan .plan__desc {
  color: var(--muted);
  min-height: calc(2 * 1.65em);
  padding-bottom: var(--s3);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}

/* The lead card carries a flag; the others reserve the same space so all
   three headings and prices sit on one line. */
.plan__flag,
.plan:not(.plan--pro) .plan__name::before { display: block; height: 1.4em; }
.plan:not(.plan--pro) .plan__name::before { content: ""; margin: calc(var(--s3) * -1) 0 var(--s3); }

.plan__features {
  display: grid;
  gap: var(--s2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s4);
}

/* Every card carries the same rows in the same order, so the three lists
   line up row for row; a fixed row height keeps them level even if one
   line wraps. Rows a plan does not include are dimmed with a hollow marker. */
.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin: 0;
  min-height: 1.5rem;
  font-size: var(--step--1);
  line-height: 1.5;
}

.plan__features .plan__no { color: var(--muted); opacity: 0.55; }
.plan__features .plan__no .plan__tick {
  background-image: none;
  border: 1px solid var(--line-2);
  background: transparent;
}

.plan__features li > span:last-child { min-width: 0; }

/* A group row breaks a long list into what is always on and what is
   chosen from: a small caption with a hairline above it. */
.plan__features .plan__group {
  display: block;
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg);
}

.plan__tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 0.12rem;
  border-radius: 999px;
  background-image: var(--grad);
  color: var(--bg);
}

.plan__tick svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan__cta { width: 100%; margin-top: 0; }

/* The lead plan is marked by a cobalt rule along its top and a small
   label, nothing else: no badge, no scale, no gradient type. */
.plan--pro {
  background-image:
    linear-gradient(180deg, var(--plan-top-pro) 0%, var(--plan-bottom-pro) 100%),
    var(--edge-grad-pro);
}

.plan__flag {
  margin: calc(var(--s3) * -1) 0 var(--s3);
  line-height: 1.4;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.plan .plan__badge {
  position: absolute;
  top: 0; left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background-image: var(--grad);
  color: var(--bg);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: var(--ring-glow);
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .plan.reveal    { transform: translateY(16px) scale(var(--plan-scale)); }
  .plan.reveal.in { transform: scale(var(--plan-scale)); }
}

@media (hover: hover) {
  .plan.card:hover { transform: none; }
}

/* Collapsed: the first five lines only. Open: everything. The toggle sits
   above the CTA on every card and all three open together. */
.plans.has-js:not(.is-open) .plan__features li:nth-child(n + 6) { display: none; }
.plans:not(.has-js) .plan__more { display: none; }

/* The list is followed by the toggle and the button, both pinned to the
   foot of the card, so all three cards line up top and bottom. */
.plan__features { margin-bottom: var(--s3); }

.plan__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  align-self: flex-start;
  margin: auto 0 calc(var(--s3) - 0.5rem);
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--accent-line);
  cursor: pointer;
}
.plan__more:hover { text-decoration-color: currentColor; }


/* --------------------------------------------------------------------------
   13. Timeline (work page)
   -------------------------------------------------------------------------- */

.timeline { position: relative; list-style: none; padding: 0 0 0 2.5rem; margin: 0; }

.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 10px; bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--grad);
  opacity: 0.55;
}

.timeline > li { position: relative; margin: 0; }
.timeline > li + li { margin-top: var(--s5); }

.timeline > li::before {
  content: "";
  position: absolute;
  left: -2.5rem; top: 0.55em;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--bg);
  border: 2px solid var(--accent);
}

.timeline h3 { margin-bottom: var(--s2); }

.timeline__meta {
  display: inline-block;
  margin-bottom: var(--s2);
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  color: var(--fg);
}

.split { display: grid; gap: var(--s5); }

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s6); }
}

.split__aside { align-self: start; }

@media (min-width: 900px) {
  .split__aside { position: sticky; top: calc(var(--header-h) + var(--s4)); }
}

/* --------------------------------------------------------------------------
   14. Contact form
   -------------------------------------------------------------------------- */

/* One column: the form, then three notes beneath it. The notes share the
   homepage ledger's material: no boxes, a hairline that draws in on
   reveal and turns cobalt on hover, one label, one strong line, one
   sentence and one link per column, every column the same height. */
.contact-stack { display: grid; gap: var(--s6); max-width: 58rem; margin-inline: auto; }

.notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.notes > li { margin: 0; }

.notes__col {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  row-gap: var(--s2);
  padding-block: var(--s4);
}

.notes__col::before,
.notes__col::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  pointer-events: none;
}
.notes__col::before { background: var(--line-2); }
.notes__col::after {
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 700ms var(--ease);
}
.notes__col:last-child { border-bottom: 1px solid var(--line-2); }

@media (min-width: 700px) {
  .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .notes__col { padding-inline: var(--s4); border-bottom: 1px solid var(--line-2); }
  .notes__col:first-child { padding-left: 0; }
  .notes__col:last-child { padding-right: 0; }
  .notes__col + .notes__col { border-left: 1px solid var(--line-2); }
  .notes__col + .notes__col::before,
  .notes__col + .notes__col::after { left: -1px; }
}

@media (prefers-reduced-motion: no-preference) {
  .notes__col.reveal::before { transform: scaleX(0); transform-origin: left; transition: transform 1100ms var(--ease) calc(120ms + var(--i, 0) * 90ms); }
  .notes__col.reveal.in::before { transform: scaleX(1); }
  .notes .notes__col.reveal { transition-delay: calc(var(--i, 0) * 80ms); }
}

@media (hover: hover) {
  .notes__col:hover::after { transform: scaleX(1); }
  .notes__col:hover .notes__label { color: var(--accent); }
}

.notes__label {
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}

.notes__line {
  display: block;
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg);
}

.notes__desc {
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
}

.notes__link {
  justify-self: start;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.notes__link:hover { border-bottom-color: var(--accent); }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .notes__col.reveal { transform: translateY(10px); filter: none; }
  .notes__col.reveal.in { transform: none; }
}

.form-shell {
  position: relative;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.form { display: grid; gap: var(--s3); }
.form__row { display: grid; gap: var(--s3); }

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

.field { display: block; }

.field__ring {
  position: relative;
  padding: 1px;
  border-radius: calc(var(--radius-sm) + 1px);
  background: transparent;
  transition: background var(--dur) var(--ease);
}

.field__ring:focus-within { background-image: var(--grad); }

.field__control {
  width: 100%;
  min-height: var(--field-h);
  padding: 1.5rem 1rem 0.5rem;
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-size: max(16px, var(--step-0));
  line-height: 1.35;
  transition: border-color var(--dur) var(--ease);
}

.field__control:focus { outline: none; border-color: transparent; }
.field__ring:focus-within .field__control { border-color: transparent; }

textarea.field__control { min-height: 148px; padding-top: 1.7rem; resize: vertical; }

.field__label {
  position: absolute;
  left: calc(1rem + 1px);
  top: calc(var(--field-h) / 2);
  transform: translateY(-50%);
  transform-origin: left top;
  color: var(--muted);
  font-size: max(16px, var(--step-0));
  line-height: 1.2;
  pointer-events: none;
  transition: transform 200ms var(--ease), color 200ms var(--ease);
}

.field__control:focus ~ .field__label,
.field__control:not(:placeholder-shown) ~ .field__label {
  transform: translateY(calc(var(--field-h) / -2 + 0.72rem)) scale(0.75);
  color: var(--fg);
}

textarea.field__control ~ .field__label { top: 1.75rem; }

textarea.field__control:focus ~ .field__label,
textarea.field__control:not(:placeholder-shown) ~ .field__label {
  transform: translateY(-0.95rem) scale(0.75);
}

.field--select .field__label {
  transform: translateY(calc(var(--field-h) / -2 + 0.72rem)) scale(0.75);
  color: var(--fg);
}

select.field__control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
}

select.field__control option { background: var(--field-bg); color: var(--fg); }

.field--select .field__ring::after {
  content: "";
  position: absolute;
  right: 1.15rem;
  top: calc(50% - 5px);
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.field__error { display: block; margin-top: var(--s1); font-size: var(--step--1); color: var(--danger); }
.field__error[hidden] { display: none; }

.field__control[aria-invalid="true"] { border-color: var(--danger-line); background: var(--danger-well); }

.field__ring:has(.field__control[aria-invalid="true"]):focus-within {
  background-image: none;
  background-color: var(--danger-line);
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { display: grid; gap: var(--s3); align-items: center; margin-top: var(--s2); }

@media (min-width: 560px) { .form__foot { grid-template-columns: auto minmax(0, 1fr); } }

.form__note { font-size: var(--step--1); max-width: 42ch; }
.form__status { font-size: var(--step--1); color: var(--danger); }
.form__status:empty { display: none; }

.spinner {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: 0.9;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: no-preference) { .spinner { animation: spin 700ms linear infinite; } }

.btn[data-state="idle"] .spinner { display: none; }
.btn[data-state="busy"] .btn__label { opacity: 0.7; }

.form-shell[data-view="sent"] .form { display: none; }

.form-success { display: none; text-align: center; padding-block: var(--s4); }
.form-shell[data-view="sent"] .form-success { display: block; }

.form-success .ost-mark { margin: 0 auto var(--s3); }
.form-success h2 { font-size: var(--step-1); margin-bottom: var(--s2); }
.form-success p { max-width: 44ch; margin-inline: auto; }
.form-success:focus-visible { outline: none; }

@media (prefers-reduced-motion: no-preference) {
  .form,
  .form-success { transition: opacity 260ms var(--ease); }
  .form-shell[data-fade="out"] .form { opacity: 0; }
  .form-shell[data-view="sent"] .form-success { animation: fade-in 320ms var(--ease) both; }
}

@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.panel { padding: var(--s4); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.panel + .panel { margin-top: var(--s3); }

.panel h2,
.panel h3 {
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: var(--s2);
}

.panel p + h3 { margin-top: var(--s4); }
.panel strong { display: block; font-size: var(--step-1); font-weight: 500; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  padding-top: var(--s6);
  padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom));
  background: var(--footer-bg);
  border-top: 1px solid var(--line);
}

/* One row: the brand, the pages, the copyright. Nothing repeated from the
   page above it. Wraps to three stacked rows on small screens. */
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
}

.footer-row .brand { text-decoration: none; }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s3);
  flex: 1 1 auto;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: var(--step--1);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.footer-nav a:hover { color: var(--fg); }

.footer-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s2);
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
}

.footer-copy a { color: var(--muted); text-decoration: none; }
.footer-copy a:hover { color: var(--fg); }

@media (max-width: 760px) {
  .footer-row { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   16. Scroll reveal
   -------------------------------------------------------------------------- */

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    filter: blur(7px);
    transition: opacity 800ms var(--ease),
                transform 800ms var(--ease),
                filter 800ms var(--ease);
  }

  .reveal.in { opacity: 1; transform: none; filter: blur(0); }

  @media (max-width: 899px) {
    .reveal { filter: none; transform: translateY(16px); transition: opacity 650ms var(--ease), transform 650ms var(--ease); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   17. Living layer — aurora drift, orbit ring, tilt and sweeps.
   Everything here is decorative: gated on motion preference, pointer type,
   or scripting, and none of it participates in layout.
   -------------------------------------------------------------------------- */

/* Aurora: the three fixed atmosphere glows slowly breathe and drift. */
@media (prefers-reduced-motion: no-preference) {
  body::before {
    animation: aurora-drift 26s ease-in-out infinite alternate;
    will-change: transform, opacity;
  }
}

@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1);       opacity: 1; }
  50%  { transform: translate3d(-1.5%, 1%, 0) scale(1.04); opacity: 0.85; }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1.08); opacity: 1; }
}

/* Hero mark: a fine orbit ring circles the mark; the mark itself breathes. */
.hero__mark { position: relative; display: grid; place-items: center; }

/* Iris bloom: each petal swells outward in turn — a wave travelling around
   the aperture. The animation lives on the facet/edge shapes INSIDE each
   rotated blade group (never on the group itself, whose rotate() attribute
   already bakes in its own centre). The individual `scale` property
   composes cleanly with the aperture's transform, and uniform scale about
   the shared view-box centre reads as pure outward growth. */
.mark--hero .ost-facet,
.mark--hero .ost-edge {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .mark--hero .ost-blade:nth-child(1) .ost-facet,
  .mark--hero .ost-blade:nth-child(1) .ost-edge { animation-delay: 0s; }
  .mark--hero .ost-blade:nth-child(2) .ost-facet,
  .mark--hero .ost-blade:nth-child(2) .ost-edge { animation-delay: 0.8s; }
  .mark--hero .ost-blade:nth-child(3) .ost-facet,
  .mark--hero .ost-blade:nth-child(3) .ost-edge { animation-delay: 1.6s; }
  .mark--hero .ost-blade:nth-child(4) .ost-facet,
  .mark--hero .ost-blade:nth-child(4) .ost-edge { animation-delay: 2.4s; }
  .mark--hero .ost-blade:nth-child(5) .ost-facet,
  .mark--hero .ost-blade:nth-child(5) .ost-edge { animation-delay: 3.2s; }
  .mark--hero .ost-blade:nth-child(6) .ost-facet,
  .mark--hero .ost-blade:nth-child(6) .ost-edge { animation-delay: 4s; }
}

/* ---- Hero completion seal --------------------------------------------
   The mark goes black when, and only when, the constellation around it is
   whole. The constellation script sets .is-sealed on the mark the moment
   the shape completes and clears it the moment the shape starts to let
   go; the colour drains over 900ms and returns over 900ms. No timer of its
   own, so the two can never fall out of step.
   ---------------------------------------------------------------------- */

.mark--hero .ost-blades,
.mark--hero .ost-seal { transition: opacity 900ms var(--ease); }

.mark--hero.is-sealed .ost-blades { opacity: 0; }
.mark--hero.is-sealed .ost-seal   { opacity: 1; }

/* The iris bloom animates a scale on each blade inside the turning rotor.
   Mouse-driven screens only: on touch devices it is exactly the kind of
   layered SVG animation that iOS Safari renders unevenly. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .mark--hero .ost-facet,
  .mark--hero .ost-edge { animation: iris-bloom 4.8s ease-in-out infinite; }
}

@keyframes iris-bloom {
  0%, 100% { scale: 1; }
  12%      { scale: 1.09; }
  26%      { scale: 1; }
}


/* Card tilt: the script writes --rx/--ry per card; small angles only. */
html.has-tilt .card {
  transform: perspective(1100px)
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg))
             translateY(var(--card-lift, 0px));
  transition: transform 220ms ease-out,
              box-shadow var(--dur) var(--ease);
  will-change: transform;
}

html.has-tilt .card:hover { --card-lift: -4px; box-shadow: var(--shadow-card-lit); }

/* --------------------------------------------------------------------------
   18. FX layer — beam borders, shimmer, aurora curtains.
   -------------------------------------------------------------------------- */

.hero { position: relative; }
/* The field: one canvas per hero, behind everything, sized by field.js.
   It fades in after the hero has settled so it arrives rather than pops. */
.field-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: field-in 1400ms 600ms var(--ease) forwards;
}
@keyframes field-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .field-canvas { animation: none; opacity: 1; } }
.hero > .container { position: relative; z-index: 1; }

/* ---- Beam borders: a point of light travelling the card perimeter ---- */
@property --fx-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes fx-beam { to { --fx-angle: 360deg; } }

/* These cards also carry .card, whose ::before is the cursor spotlight.
   The beam therefore lives on its own element — a .fx-beam span injected
   by fx.js — so the two effects coexist instead of overwriting each other.
   The `.plan > .fx-beam` specificity is what re-asserts absolute
   positioning over the general `.card > *` rule. */
.plan, .m-card { position: relative; }

.plan > .fx-beam,
.m-card > .fx-beam {
  position: absolute;
  inset: -1px;
  z-index: 2;
  display: block;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  background: conic-gradient(from var(--fx-angle),
    transparent 0deg, transparent 300deg,
    var(--line-2) 330deg,
    rgba(217, 183, 120, 0.95) 345deg,
    var(--line-2) 352deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .plan > .fx-beam { opacity: 1; animation: fx-beam 7s linear infinite; }
  .plan:nth-child(2) > .fx-beam { animation-delay: -2.3s; }
  .plan:nth-child(3) > .fx-beam { animation-delay: -4.6s; }

  @media (hover: hover) {
    .m-card > .fx-beam { animation: fx-beam 3.2s linear infinite; }
    .m-card:hover > .fx-beam { opacity: 1; }
  }
}

/* ---- Aurora curtains: slow ribbons of colour behind page heads ---- */
/* The curtain is sized by background-size rather than by physically
   overflowing the box, so .page-head needs no overflow clip — which keeps
   the parallaxed container inside it from being cut off as it drifts. */
.page-head { position: relative; }
.page-head > .container { position: relative; z-index: 1; }

.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    linear-gradient(100deg,
      transparent 12%, var(--line) 22%, transparent 32%,
      transparent 48%, rgba(217, 183, 120, 0.05) 58%, transparent 68%,
      transparent 80%, var(--line) 90%, transparent 100%);
  background-size: 220% 140%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .page-head::before { animation: fx-curtain 26s ease-in-out infinite alternate; }
}

@keyframes fx-curtain {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* --------------------------------------------------------------------------
   19. Icon motion — every card mark moves, and moves like the thing it is.

   Two speeds throughout: a slow idle so a page at rest reads as alive rather
   than busy, and a faster, fuller version once the card is hovered. Each
   animation is named for what it depicts — the automation arrows genuinely
   rotate, the dashboard bars genuinely rise, the chat dots genuinely type.
   `transform-box: fill-box` is what makes per-path transforms pivot about
   each path's own centre instead of the shared 24x24 view box.
   -------------------------------------------------------------------------- */

.card__icon,
.include__icon { position: relative; overflow: hidden; }

.card__icon svg,
.include__icon svg { overflow: visible; }

.card__icon svg > *,
.include__icon svg > * {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: no-preference) {

  /* A slow sheen crosses every tile, offset per card so they never sync.
     The stripe is moved with transform, never background-position: position
     animations repaint on the main thread and visibly hitch mid-sweep the
     moment the page is busy, while transforms ride the compositor and
     cannot stall. The tile's own overflow clip does the entering/leaving. */
  /* ---- spin: the automation arrows turn ---- */
  [data-anim="spin"] svg { animation: icon-spin 9s linear infinite; }
  .card:hover [data-anim="spin"] svg,
  .card--link:hover [data-anim="spin"] svg,
  .system__row:hover [data-anim="spin"] svg { animation-duration: 2.2s; }

  /* ---- type: the three chat dots fire in sequence ---- */
  [data-anim="type"] .i-dot { animation: icon-type 1.6s ease-in-out infinite; }
  [data-anim="type"] .i-dot:nth-of-type(2) { animation-delay: 0.18s; }
  [data-anim="type"] .i-dot:nth-of-type(3) { animation-delay: 0.36s; }

  /* ---- bars: the dashboard columns rise and settle ---- */
  [data-anim="bars"] svg > *:nth-child(n + 2) {
    transform-origin: 50% 100%;
    animation: icon-bar 2.6s ease-in-out infinite;
  }
  [data-anim="bars"] svg > *:nth-child(3) { animation-delay: 0.22s; }
  [data-anim="bars"] svg > *:nth-child(4) { animation-delay: 0.44s; }

  /* ---- scan: the CRM record breathes, its detail lines shuttling ---- */
  [data-anim="scan"] svg > *:nth-child(2) { animation: icon-breathe 3.4s ease-in-out infinite; }
  [data-anim="scan"] svg > *:nth-child(4) { animation: icon-shuttle 3.4s ease-in-out infinite; }

  /* ---- rock: the handset tips, the way one does in a hand ---- */
  [data-anim="rock"] svg { animation: icon-rock 4.2s ease-in-out infinite; }

  /* ---- draw: a light runs the length of the trend line ---- */
  [data-anim="draw"] svg > *:first-child {
    stroke-dasharray: 34 34;
    animation: icon-draw 3.4s ease-in-out infinite;
  }

  /* ---- lines: the document's text slides in, line after line ---- */
  [data-anim="lines"] svg > *:nth-child(2) { animation: icon-shuttle 3s ease-in-out infinite; }

  /* ---- ring: the handset shakes, then rests ---- */
  [data-anim="ring"] svg { animation: icon-ring 3.6s ease-in-out infinite; }

  /* ---- shield: the crest holds, the tick inside lands ---- */
  [data-anim="shield"] svg > *:first-child { animation: icon-breathe 4s ease-in-out infinite; }
  [data-anim="shield"] svg > *:nth-child(2) {
    stroke-dasharray: 12 12;
    animation: icon-draw 4s ease-in-out infinite;
  }

  /* ---- tick: the six checks draw themselves in turn ---- */
  [data-anim="tick"] svg > * {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: icon-tick 5.4s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.22s);
  }

  /* ---- breathe: the calendar / portal frame expands and settles ---- */
  [data-anim="breathe"] svg { animation: icon-breathe 4.6s ease-in-out infinite; }

  /* ---- shuttle: the basket rolls a little, back and forth ---- */
  [data-anim="shuttle"] svg { animation: icon-roll 3.6s ease-in-out infinite; }

  /* ---- fallback for any icon added later without a data-anim ---- */
  .card__icon:not([data-anim]) svg { animation: icon-breathe 4.4s ease-in-out infinite; }

  /* Hovering a card tips its tile forward and brightens the fill. */
  .card:hover .card__icon,
  .card--link:hover .card__icon {
    transform: translateY(-2px) rotate(-3deg) scale(1.06);
    border-color: var(--line-2);
  }
}

.card__icon {
  transition: transform 420ms var(--ease), border-color 420ms var(--ease);
}

@keyframes icon-spin { to { transform: rotate(360deg); } }
@keyframes icon-type {
  0%, 55%, 100% { opacity: 0.32; transform: translateY(0); }
  25%           { opacity: 1;    transform: translateY(-2px); }
}
@keyframes icon-bar {
  0%, 100% { transform: scaleY(0.55); }
  50%      { transform: scaleY(1); }
}
@keyframes icon-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.16); }
}
@keyframes icon-shuttle {
  0%, 100% { transform: translateX(-2.5px); opacity: 0.45; }
  50%      { transform: translateX(2.5px);  opacity: 1; }
}
@keyframes icon-roll {
  0%, 100% { transform: translateX(-1.7px); }
  50%      { transform: translateX(1.7px); }
}
@keyframes icon-rock {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(7deg); }
}
@keyframes icon-draw {
  0%   { stroke-dashoffset: 34; }
  70%  { stroke-dashoffset: -34; }
  100% { stroke-dashoffset: -34; }
}
@keyframes icon-ring {
  0%, 62%, 100%        { transform: rotate(0deg); }
  66%, 74%, 82%        { transform: rotate(-13deg); }
  70%, 78%, 86%        { transform: rotate(13deg); }
}
@keyframes icon-tick {
  0%        { stroke-dashoffset: 24; }
  22%, 78%  { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: 24; }
}

/* --------------------------------------------------------------------------
   20. Index — "what we build" on the about page.

   Fourteen entries set as a ruled list in two columns, the same material
   as the homepage ledger: no boxes, a hairline above each entry that draws
   itself in on reveal and turns cobalt on hover, a tabular number in the
   margin, the name, and the icon tile at the end of the line. Every row is
   the same height so the two columns stay level to the last rule.
   -------------------------------------------------------------------------- */

.index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--s6);
}

@media (min-width: 760px) { .index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.index > li { margin: 0; }

.index__row {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s3);
  min-height: 4.75rem;
  padding-block: var(--s2);
}

.index__row::before,
.index__row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  pointer-events: none;
}
.index__row::before { background: var(--line-2); }
.index__row::after {
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 700ms var(--ease);
}
.index__row:last-child { border-bottom: 1px solid var(--line-2); }
@media (min-width: 760px) {
  .index__row:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-2); }
}

@media (prefers-reduced-motion: no-preference) {
  .index__row.reveal::before { transform: scaleX(0); transform-origin: left; transition: transform 1100ms var(--ease) calc(120ms + var(--i, 0) * 40ms); }
  .index__row.reveal.in::before { transform: scaleX(1); }
  .index .index__row.reveal { transition-delay: calc(var(--i, 0) * 35ms); }
}

.index__num {
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}

.index__label {
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--fg);
}

.index__icon {
  width: 38px;
  height: 38px;
  margin-bottom: 0;
  border-radius: 11px;
}
.index__icon svg { width: 18px; height: 18px; }

@media (hover: hover) {
  .index__row:hover::after { transform: scaleX(1); }
  .index__row:hover .index__num { color: var(--accent); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .index__row:hover .index__icon { transform: translateY(-2px) rotate(-3deg) scale(1.06); border-color: var(--line-2); }
  .index__row:hover [data-anim="spin"] svg { animation-duration: 2.2s; }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .index__row.reveal { transform: translateY(10px); filter: none; }
  .index__row.reveal.in { transform: none; }
}

/* ---- the closing invitation ---------------------------------------------- */

.caps-cta {
  position: relative;
  margin-top: var(--s4);
  padding: var(--s5);
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background-image: linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%);
  overflow: hidden;
  text-align: center;
}

/* a slow band of light crossing the panel, so it never sits flat —
   transform-driven for the same compositor reason as the icon sheen */
.caps-cta::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent, var(--line) 50%, transparent);
  transform: translateX(-170%) skewX(-14deg);
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .caps-cta::after { animation: caps-sweep 11s ease-in-out infinite; }
}

@keyframes caps-sweep {
  0%, 55%   { transform: translateX(-170%) skewX(-14deg); }
  82%, 100% { transform: translateX(470%)  skewX(-14deg); }
}

.caps-cta__lead {
  position: relative;
  z-index: 1;
  font-family: var(--font-head);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--fg);
  margin-bottom: var(--s2);
}

.caps-cta__body {
  position: relative;
  z-index: 1;
  max-width: 54ch;
  margin: 0 auto var(--s4);
  color: var(--muted);
}

.caps-cta .btn { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   21. Onyx — the dark theme.

   Activated only by clicking the pinwheel mark in the nav; never by system
   preference, per the design decision. Everything below is a token override:
   the components never know which theme they are in. Tokens defined with
   var() in :root (--grad, --grad-warm, the edge gradients) recompute on
   their own and are deliberately not repeated here. --mark-ink and the
   button glows are pinned: the mark's ink is the mark's ink, and violet
   glow reads correctly on both grounds.
   -------------------------------------------------------------------------- */

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* Onyx — the dark theme. Near-black, not navy. White does the work; colour
   is rationed to three places so it lands: the mark's cobalt blades, the
   cobalt glass of the closing band, and the champagne live dot. */
html[data-theme="dark"] {
  --bg:       #0A0A0B;
  --bg-2:     #111113;
  --bg-3:     #18181B;
  --fg:       #F5F5F7;
  --fg-2:     #C9C9CE;
  --muted:    #8E8E96;
  --line:     rgba(255, 255, 255, 0.08);
  --line-2:   rgba(255, 255, 255, 0.16);

  --accent:   #F5F5F7;

  /* Buttons: white, with the page's black for text. A faint cool edge so
     they read as machined, not flat. */
  --grad:     linear-gradient(135deg, #FFFFFF 0%, #F0F0F3 55%, #DCDCE2 100%);
  --grad-lit: linear-gradient(135deg, #FFFFFF 0%, #F7F7F9 60%, #E4E4E9 100%);

  --card-top:    #141416;
  --card-bottom: #0F0F11;
  --field-bg:    #111113;
  --footer-bg:   #060607;
  --header-bg:   rgba(10, 10, 11, 0.72);

  /* Atmosphere: one pool of cold light high-left, a trace of cobalt low-right,
     more grain than the light theme so black never reads as dead. */
  --atmos-1:  rgba(255, 255, 255, 0.045);
  --atmos-2:  rgba(46, 91, 255, 0.10);
  --atmos-3:  transparent;
  --grain:    0.05;

  /* Machined edges: brighter where the light hits. */
  --edge-grad: linear-gradient(140deg,
                 rgba(255, 255, 255, 0.18) 0%,
                 rgba(255, 255, 255, 0.07) 45%,
                 rgba(255, 255, 255, 0.03) 100%);
  --edge-grad-lit: linear-gradient(140deg,
                 rgba(255, 255, 255, 0.32) 0%,
                 rgba(255, 255, 255, 0.12) 45%,
                 rgba(255, 255, 255, 0.05) 100%);
  --edge-grad-pro: linear-gradient(140deg,
                 rgba(255, 255, 255, 0.75) 0%,
                 rgba(255, 255, 255, 0.28) 45%,
                 rgba(217, 183, 120, 0.4) 100%);
  --edge-grad-hover: linear-gradient(140deg,
                 rgba(255, 255, 255, 0.6) 0%,
                 rgba(255, 255, 255, 0.24) 45%,
                 rgba(255, 255, 255, 0.08) 100%);

  --plan-top:        #161618;
  --plan-bottom:     #111113;
  --plan-top-pro:    #1C1C1F;
  --plan-bottom-pro: #151517;
  --plan-wash-1:     rgba(255, 255, 255, 0.06);
  --plan-wash-2:     rgba(217, 183, 120, 0.06);

  /* Icon tiles: white line on graphite. */
  --accent-wash:   rgba(255, 255, 255, 0.05);
  --accent-wash-2: rgba(255, 255, 255, 0.10);
  --accent-line:   rgba(255, 255, 255, 0.16);

  /* The mark keeps its cobalt: the one colour on the page. Lifted a step so
     it glows against black. */
  --petal-1:  #EEF2FF;
  --petal-2:  #C3D0FF;
  --petal-3:  #8FA8FF;
  --petal-4:  #5C7EFF;
  --petal-5:  var(--cobalt-lit);
  --petal-6:  #1E47E6;
  --tip-shade: #050814;
  --edge-lit:  rgba(255, 255, 255, 0.4);

  --danger:       #FF6B6B;
  --danger-line:  rgba(255, 107, 107, 0.55);
  --danger-well:  rgba(255, 107, 107, 0.08);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.6),
                 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --shadow-card-lit: 0 1px 2px rgba(0, 0, 0, 0.65),
                 0 26px 50px -26px rgba(0, 0, 0, 0.95);
  --btn-glow:     none;
  --btn-glow-lit: none;
  --btn-glow-xl:  none;
  --ring-glow:    none;
}

/* One-off soft cross-fade for browsers without the View Transitions API.
   The class lives on <html> for ~650ms around a toggle and then goes. */
html.theme-anim,
html.theme-anim body,
html.theme-anim * {
  transition: background-color 550ms var(--ease),
              color 550ms var(--ease),
              border-color 550ms var(--ease),
              box-shadow 550ms var(--ease),
              fill 550ms var(--ease),
              stroke 550ms var(--ease) !important;
}

/* --------------------------------------------------------------------------
   22. Split brand — the pinwheel is the theme switch, the word is the way
   home. The wrapper keeps the exact metrics the old single link had, so
   nothing in the header moves by a pixel.
   -------------------------------------------------------------------------- */

.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0 -6px 0 -6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.brand__home {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

/* focus/hover speed-up used to hang off the anchor; the wrapper is a span
   now, so hover still matches and focus comes from whichever child has it */
.brand:focus-within .ost-rotor { animation-duration: 8s; }

@media (prefers-reduced-motion: no-preference) {
  .brand__mark.is-flipping .ost-mark {
    animation: theme-flip 700ms var(--ease);
  }
}

@keyframes theme-flip {
  0%   { transform: rotate(0deg)   scale(1); }
  45%  { transform: rotate(200deg) scale(0.82); }
  100% { transform: rotate(360deg) scale(1); }
}

/* --------------------------------------------------------------------------
   23. Hero choreography — the homepage entrance and departure.

   On load: the headline arrives word by word (rise out of blur, 70ms
   apart), the lede and buttons follow, and the mark blooms in last. All of
   it is pure CSS animation, so it runs with or without script; the hidden
   starting states live inside the motion media query, so reduced-motion
   visitors simply see the finished page. On scroll: script drifts the hero
   away slightly faster than the page and fades it — the classic depth cue —
   and the mark leans toward the cursor.
   -------------------------------------------------------------------------- */

.hw { display: inline-block; }

.hero__mark .ost-mark { transition: transform 300ms ease-out; }

@media (prefers-reduced-motion: no-preference) {
  .hw {
    opacity: 0;
    transform: translateY(0.55em);
    filter: blur(8px);
    animation: hero-word 850ms var(--ease) forwards;
    animation-delay: calc(120ms + var(--w, 0) * 70ms);
  }

  .hero-fade {
    opacity: 0;
    transform: translateY(18px);
    animation: hero-up 900ms var(--ease) forwards;
    animation-delay: var(--d, 700ms);
  }

  .hero__mark .ost-mark {
    opacity: 0;
    scale: 0.9;
    animation: hero-bloom 1100ms var(--ease) 450ms forwards;
  }
  /* Touch screens: the arrival is a fade only; no scale to settle. */
  @media (pointer: coarse) {
    .hero__mark .ost-mark { scale: 1; animation-name: hero-fade-in; }
  }
}
@keyframes hero-fade-in { to { opacity: 1; } }

@keyframes hero-word  { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hero-up    { to { opacity: 1; transform: none; } }
@keyframes hero-bloom { to { opacity: 1; scale: 1; } }

/* ---- Section transitions -------------------------------------------------
   Cards in three-up grids rise as a staggered cascade. The independent
   translate/scale properties are used, never transform, because the tilt
   system owns transform on these cards — writing it here is exactly the
   reveal-vs-inline conflict this codebase has been bitten by before. */

@supports (translate: 0px) {
  @media (prefers-reduced-motion: no-preference) {
    .grid--3 .card.reveal {
      translate: 0 30px;
      scale: 0.965;
      transition: opacity 700ms var(--ease),
                  filter 700ms var(--ease),
                  translate 800ms var(--ease),
                  scale 800ms var(--ease);
    }
    .grid--3 .card.reveal:nth-child(3n + 2) { transition-delay: 90ms; }
    .grid--3 .card.reveal:nth-child(3n)     { transition-delay: 180ms; }
    .grid--3 .card.reveal.in { translate: 0 0; scale: 1; }
  }
}

/* Section headings wipe open left-to-right instead of only rising. */
@media (prefers-reduced-motion: no-preference) {
  .stack h2.reveal {
    clip-path: inset(-8% 102% -8% -2%);
    transition: opacity 600ms var(--ease),
                filter 600ms var(--ease),
                transform 700ms var(--ease),
                clip-path 900ms var(--ease) 100ms;
  }
  .stack h2.reveal.in { clip-path: inset(-8% -2% -8% -2%); }
}

/* --------------------------------------------------------------------------
   24. Print
   -------------------------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; }
  body::before, body::after, canvas, .oc-launch, .oc-panel,
  .site-header, .nav__overlay, .closer, .btn { display: none !important; }
  .site-footer { background: none; border: 0; padding-top: 1rem; }
  .footer-nav, .footer-copy a { display: none; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  h1, h2, h3 { color: #000; break-after: avoid; }
  .card, .plan, .panel { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .plan--pro .plan__name, .plan--pro .plan__amount { color: #000; background: none; -webkit-text-fill-color: #000; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  @page { margin: 18mm; }
}

/* --------------------------------------------------------------------------
   25. Mission page — its own layer, gated the same way as everything else.
   -------------------------------------------------------------------------- */

.mission-hero h1 { display:flex; flex-direction:column; }
.m-line { display:block; }

/* Red flickering buzz — kept from Ω, retuned for the light canvas */
.m-glitch { position:relative; display:inline-block; }
.m-glitch::before,
.m-glitch::after {
  content: attr(data-text);
  position:absolute; inset:0; overflow:hidden; opacity:0; pointer-events:none;
}
.m-glitch::before { color:var(--danger); z-index:-1; }
.m-glitch::after  { color:var(--fg-2);  z-index:-2; }
@media (prefers-reduced-motion: no-preference) {
  .m-glitch { animation: m-buzz 3.2s infinite steps(1); }
  .m-glitch::before { animation: m-slice-r 3.2s infinite steps(1); }
  .m-glitch::after  { animation: m-slice-b 3.2s infinite steps(1); }
}
@keyframes m-buzz {
  0%, 91%, 94.5%, 100% { transform: none; }
  91.5% { transform: translate(1px, 0) skewX(-1.5deg); }
  93%   { transform: translate(-2px, 0); }
}
@keyframes m-slice-r {
  0%, 91%, 95%, 100% { opacity:0; }
  91.5% { opacity:.9; transform: translate(-5px, 2px); clip-path: inset(12% 0 58% 0); }
  93%   { opacity:.9; transform: translate(4px, -2px);  clip-path: inset(64% 0 8% 0); }
  94%   { opacity:.7; transform: translate(-3px, 0);    clip-path: inset(38% 0 40% 0); }
}
@keyframes m-slice-b {
  0%, 91.5%, 95%, 100% { opacity:0; }
  92%  { opacity:.7; transform: translate(5px, -1px); clip-path: inset(52% 0 24% 0); }
  93.5%{ opacity:.7; transform: translate(-4px, 1px); clip-path: inset(6% 0 76% 0); }
}

/* ---------- The field behind the hero ---------- */
.mission-hero { position:relative; overflow:hidden; }
.mission-hero .container { position:relative; z-index:1; }

/* Phones and tablets: the field gets its own room under the lede, so the
   form never sits behind the words. Wide screens: the form sits to the
   right of the headline and the canvas needs no room of its own. */
.mission-hero__field { display: none; }
@media (max-width: 899px) {
  .mission-hero__field { display: block; height: clamp(260px, 80vw, 340px); margin-top: var(--s4); }
}

/* Floating orbs of light in banded sections */
.m-proof, .m-shift, .m-engine-wrap { position:relative; overflow:hidden; }
.m-orb {
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  filter: blur(60px); opacity:.55;
}
.m-orb--a { width:34rem; height:34rem; top:-10rem; left:-8rem;
  background: radial-gradient(closest-side, rgba(14,59,214,.14), transparent); }
.m-orb--b { width:28rem; height:28rem; bottom:-9rem; right:-7rem;
  background: radial-gradient(closest-side, rgba(217,183,120,.12), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .m-orb--a { animation: m-float-a 18s ease-in-out infinite alternate; }
  .m-orb--b { animation: m-float-b 22s ease-in-out infinite alternate; }
}
@keyframes m-float-a { to { transform: translate3d(4rem, 3rem, 0) scale(1.15); } }
@keyframes m-float-b { to { transform: translate3d(-4rem, -3rem, 0) scale(1.12); } }
.m-proof .container, .m-shift .container { position:relative; z-index:1; }

/* Proof cards: sweeping gradient edge on hover + entrance pop */
.m-card { overflow:hidden; }
.m-card .card__icon { margin-bottom: var(--s3); }
.m-card h3 { margin-top: var(--s1); }


/* Facts */
.m-fact-num { color: var(--fg); font-variant-numeric: tabular-nums; font-size: var(--step-2); font-weight:700; letter-spacing:-0.03em; line-height:1; margin-bottom: var(--s2); }
.m-src { display:block; margin-top: var(--s2); font-size: var(--step--1); letter-spacing:.01em; color:var(--fg); font-weight:500; }


/* ---------- TRANSMISSION: statements that build and dissolve ---------- */
.m-trans { position:relative; overflow:hidden; }
.m-trans .container { position:relative; z-index:1; display:grid;
  grid-template-columns: 4px 1fr; gap: var(--s5); align-items:start; }
.m-trans-rail { position:relative; width:4px; border-radius:4px;
  background: var(--bg-3); align-self:stretch; min-height:100%; overflow:hidden; }
.m-trans-rail-fill { position:absolute; inset:0 0 auto 0; height:0%;
  background: var(--grad); border-radius:4px; transition: height 120ms linear; }
.m-trans-stack { display:flex; flex-direction:column; gap: clamp(3rem, 9vh, 7rem); }

.m-trans-card {
  position:relative; padding: var(--s5) var(--s5) var(--s5) var(--s5);
  border:1px solid transparent; border-radius: var(--radius);
  background-image: linear-gradient(180deg, var(--card-top), var(--card-bottom)), var(--edge-grad);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: var(--shadow-card); overflow:hidden;
  opacity:0; transform: translateY(42px) scale(.94) rotateX(8deg);
  filter: blur(10px); transform-origin: center bottom;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease), filter 700ms var(--ease), box-shadow 500ms var(--ease);
}
.m-trans-card.in { opacity:1; transform:none; filter: blur(0); }
/* dissolve out again once it leaves the top of the viewport */
.m-trans-card.out { opacity:0; transform: translateY(-30px) scale(.97); filter: blur(8px); }

.m-trans-card::before {
  content: attr(data-t);
  position:absolute; top: var(--s3); right: var(--s4);
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(3rem, 7vw, 6rem); font-weight:700; line-height:1;
  color: var(--bg-3); z-index:0; letter-spacing:-.05em;
}
.m-trans-card::after {
  content: attr(data-tag);
  position:absolute; left: var(--s5); top: var(--s3);
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--step--1); letter-spacing:.01em; color: var(--muted); font-weight:600;
}
.m-trans-line {
  position:relative; z-index:1; margin-top: var(--s5);
  font-size: var(--step-2); font-weight:600; letter-spacing:-.03em;
  line-height:1.2; color: var(--fg); text-wrap:balance; max-width: 24ch;
}
.m-trans-line em { font-style:normal; background-image: var(--grad-lit);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
/* cursor-following glow inside each card */
.m-trans-glow { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  transition: opacity 400ms var(--ease);
  background: radial-gradient(18rem 18rem at var(--gx,50%) var(--gy,50%),
    rgba(14,59,214,.10), rgba(217,183,120,.05) 40%, transparent 70%); }
@media (hover:hover) { .m-trans-card:hover .m-trans-glow { opacity:1; } }
@media (max-width: 700px) {
  .m-trans .container { grid-template-columns: 1fr; }
  .m-trans-rail { display:none; }
}

/* ---------- THE SHIFT: designed panels ---------- */
.m-panels { display:grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 820px) { .m-panels { grid-template-columns: repeat(2, 1fr); } }
.m-panel--wide { grid-column: 1 / -1; }

.m-panel {
  position:relative; overflow:hidden; padding: var(--s5);
  border:1px solid transparent; border-radius: var(--radius);
  background-image: linear-gradient(180deg, var(--card-top), var(--card-bottom)), var(--edge-grad);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: var(--shadow-card);
  opacity:0; transform: translateY(34px) scale(.97); filter: blur(8px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease),
              filter 700ms var(--ease), box-shadow 400ms var(--ease);
}
.m-panel.in { opacity:1; transform:none; filter: blur(0); }
@media (hover:hover) {
  .m-panel:hover { box-shadow: var(--shadow-card-lit); transform: translateY(-5px); }
}
.m-panel-spot { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  transition: opacity 400ms var(--ease);
  background: radial-gradient(16rem 16rem at var(--gx,50%) var(--gy,50%),
    rgba(14,59,214,.12), rgba(217,183,120,.05) 42%, transparent 72%); }
@media (hover:hover) { .m-panel:hover .m-panel-spot { opacity:1; } }
.m-panel > *:not(.m-panel-spot) { position:relative; z-index:1; }

.m-panel-head { display:flex; align-items:center; justify-content:space-between;
  gap: var(--s3); margin-bottom: var(--s3); }
.m-panel-num {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--step-1); font-weight:700; letter-spacing:-.03em;
  background-image: var(--grad-lit); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.m-panel-icon { display:grid; place-items:center; width:44px; height:44px; flex:none;
  border-radius: var(--radius-sm); border:1px solid var(--accent-line); background: var(--accent-wash); }
.m-panel-icon svg { width:22px; height:22px; fill:none; stroke: var(--accent);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.m-panel h3 { margin-bottom: var(--s2); }
.m-panel p { font-size: var(--step-0); }

/* before -> after swap strip */
.m-swap { display:flex; align-items:center; flex-wrap:wrap; gap: var(--s2);
  margin-top: var(--s4); padding-top: var(--s3); border-top:1px solid var(--line); }
.m-swap-was { color: var(--muted); font-size: var(--step--1); text-decoration: line-through;
  text-decoration-color: var(--danger-line); text-decoration-thickness:2px; }
.m-swap-arrow { color: var(--fg); font-weight:700; }
.m-swap-now { padding:.25em .8em; border-radius:99px; background-image: var(--grad);
  color:var(--bg); font-size: var(--step--1); font-weight:700; letter-spacing:.08em;
  box-shadow: var(--ring-glow); }

/* Engine gets its own light too */
/* Engine */
.m-engine { max-width: 760px; }
.m-engine-form { display:flex; gap: var(--s2); flex-wrap:wrap; }
.m-engine-input {
  flex:1 1 320px; height: var(--field-h); padding: 0 var(--s3);
  border-radius: var(--radius-sm); border:1px solid var(--line-2);
  background: var(--field-bg); color: var(--fg); font-size: var(--step-0);
}
.m-engine-input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.m-engine-result {
  margin-top: var(--s3); min-height: 140px; padding: var(--s4);
  border-radius: var(--radius); border:1px solid transparent;
  background-image: linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%), var(--edge-grad);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: var(--shadow-card);
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--step--1); line-height:2; letter-spacing:.04em; color: var(--muted);
  white-space: pre-wrap;
}
.m-engine-result b { color: var(--fg); font-weight:600; }
.m-engine-result .m-hit { color: var(--fg); font-weight:600; }
.m-engine-result .m-miss { color: var(--danger); font-weight:600; }
.m-engine-idle { letter-spacing:.2em; color:var(--muted); }
.m-caret { display:inline-block; width:.6em; height:1.1em; margin-left:.3em;
  vertical-align:text-bottom; background:var(--fg); }
@media (prefers-reduced-motion: no-preference) { .m-caret { animation: m-blink 1s steps(1) infinite; } }
@keyframes m-blink { 50% { opacity:0; } }
.m-engine-result a { color: var(--fg); }

/* Doctrine */
.m-doctrine { text-align:center; }
.m-slam-line { font-size: var(--step-1); font-weight:500; color:var(--muted); letter-spacing:-0.02em; }
.m-slam-big { font-size: clamp(3rem, 2rem + 5vw, 6rem); font-weight:700; letter-spacing:-0.04em; line-height:1; margin-top: var(--s1); }
.m-cascade {
  margin-top: var(--s4); min-height: 3.5em;
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--step--1); letter-spacing:.18em; line-height:2.2; color: var(--muted);
  max-width: 46ch; margin-inline:auto;
}
.m-cascade .m-word { opacity:0; display:inline-block; transform: translateY(6px); margin: 0 .35em;
  transition: opacity .5s var(--ease), transform .5s var(--ease); }
.m-cascade .m-word.in { opacity:1; transform:none; }
.m-cascade .m-word--red { color: var(--danger); font-weight:700; }
.m-cite { margin-top: var(--s4); font-size: var(--step--1); letter-spacing:.14em;
  color: var(--fg); font-weight:500; }

/* --------------------------------------------------------------------------
   26. Insights page — question list.
   -------------------------------------------------------------------------- */

.ins-item { max-width: 780px; }
.ins-item { padding-block: var(--s5); border-bottom: 1px solid var(--line); }
.ins-item:last-child { border-bottom: 0; }
.ins-q { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s3); }
.ins-mark { flex: none; width: 10px; height: 10px; margin-top: .55em; border-radius: 50%;
  background-image: var(--grad); box-shadow: var(--ring-glow); }
.ins-q h2 { font-size: var(--step-1); }
.ins-a > * + * { margin-top: var(--s3); }

/* --------------------------------------------------------------------------
   27. Page transitions, typographic finish, log, prose,
   forced colours. The small things that read as a person having cared.
   -------------------------------------------------------------------------- */

/* Cross-document view transitions: the brand stays put, the page crossfades. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 260ms; }

/* Typography set like a book: hanging quotes, tabular figures where numbers
   line up, stylistic sets where the face offers them. */
body { hanging-punctuation: first last; }
h1, h2, h3, .lede { font-kerning: normal; font-feature-settings: "kern", "liga", "calt"; }
.plan__amount, .m-fact-num, .log__entry time, table { font-variant-numeric: tabular-nums; }
p, li, dd { text-wrap: pretty; }

/* Change log */
.log { list-style: none; padding: 0; margin: 0; max-width: 72ch; }
.log__entry { position: relative; padding-left: var(--s5); padding-bottom: var(--s5); border-left: 1px solid var(--line-2); }
.log__entry:last-child { padding-bottom: 0; }
.log__entry::before {
  content: ""; position: absolute; left: -5px; top: 0.5em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--bg);
}
.log__entry time { display: block; font-size: var(--step--1); color: var(--muted); margin-bottom: var(--s1); }
.log__entry h2 { font-size: var(--step-1); margin-bottom: var(--s2); }
.log__entry p + p { margin-top: var(--s2); }

/* Long-form pages */
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--step-1); margin-top: var(--s5); margin-bottom: var(--s2); }
.prose h2:first-child { margin-top: 0; }
.prose p + p { margin-top: var(--s3); }
.prose .facts { margin-block: var(--s3); }
.prose__meta { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--muted); }

.notfound .btn-row { margin-top: var(--s4); }

/* Windows High Contrast and other forced-colour modes: give every surface a
   real border, keep the brand out of the way, let the platform paint. */
@media (forced-colors: active) {
  body::before, body::after { display: none; }
  .card, .plan, .panel, .well, .form-shell, .card__icon, .include__icon, .index__icon, .m-panel-icon {
    border: 1px solid CanvasText; background: Canvas;
  }
  .btn { border: 2px solid ButtonText; forced-color-adjust: none; }
  .btn--primary { background: ButtonText; color: Canvas; }
  .log__entry::before { background: Highlight; }
}

@media (prefers-contrast: more) {
  :root { --line: rgba(11, 18, 48, 0.28); --line-2: rgba(11, 18, 48, 0.45); --muted: #3D4A6E; }
  html[data-theme="dark"] { --line: rgba(255, 255, 255, 0.3); --line-2: rgba(255, 255, 255, 0.5); --muted: #C4C4CA; }
}

/* --------------------------------------------------------------------------
   28. Closer. No box. A heading, one line to write on, one button. The
   underline draws itself across the page as the section arrives.
   -------------------------------------------------------------------------- */

.closer {
  border-top: 1px solid var(--line);
  padding-block: var(--section-y);
}
.closer h2 {
  font-size: var(--step-3);
  letter-spacing: -0.035em;
  max-width: 14ch;
  margin-bottom: var(--s5);
}

.closer__form { position: relative; }
.closer__line {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-bottom: var(--s2);
}
.closer__line::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line-2);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1200ms var(--ease), background-color 300ms var(--ease);
}
.closer__form.in .closer__line::after,
.closer__form:not(.reveal) .closer__line::after { transform: scaleX(1); }
.closer__line:focus-within::after { background: var(--accent); }

.closer__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  outline: none;
  caret-color: var(--ice);
}
.closer__input::placeholder { color: var(--muted); opacity: 1; }
.closer__go { flex: none; }

.closer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  margin-top: var(--s4);
  max-width: none;
}
.closer__foot p { margin: 0; max-width: 60ch; color: var(--muted); }
.closer__link { color: var(--fg); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--line-2); white-space: nowrap; }
.closer__link:hover { text-decoration-color: var(--accent); }

@media (max-width: 560px) {
  .closer__line { flex-direction: column; align-items: stretch; gap: var(--s3); padding-bottom: var(--s3); }
  .closer__go { width: 100%; }
  .closer h2 { max-width: none; }
}

@media (forced-colors: active) {
  .closer__line { border-bottom: 1px solid CanvasText; }
  .closer__line::after { display: none; }
}

/* --------------------------------------------------------------------------
   29. Held mark. While a visitor has hold of the pinwheel the blooms pause,
   so what they feel under the hand is one solid object.
   -------------------------------------------------------------------------- */

.ost-mark.is-held .ost-facet,
.ost-mark.is-held .ost-edge { animation-play-state: paused; }
.mark--hero, .mark--cta { user-select: none; -webkit-user-select: none; pointer-events: bounding-box; }

/* --------------------------------------------------------------------------
   30. Client code. Sits under the plans and reads as part of the pricing,
   not a coupon box. A plan on the client rate carries a quiet cobalt label.
   -------------------------------------------------------------------------- */

.code {
  max-width: 34rem;
  margin: var(--s5) auto 0;
  text-align: center;
}
.code__label { display: block; margin-bottom: var(--s2); font-size: var(--step--1); color: var(--muted); }
.code__row { display: flex; gap: var(--s2); align-items: stretch; }
.code__ring { flex: 1 1 auto; }
.code__row .btn { flex: none; min-height: var(--field-h); padding-inline: 1.5rem; }
.code__status { min-height: 1.5em; margin: var(--s2) 0 0; font-size: var(--step--1); color: var(--muted); }
.code__status[data-tone="good"] { color: var(--accent); }
html[data-theme="dark"] .code__status[data-tone="good"],
html[data-theme="dark"] .plan--client .plan__price::after,
html[data-theme="dark"] .plan--client .plan__amount { color: #8FA8FF; -webkit-text-fill-color: #8FA8FF; }
.code__status[data-tone="bad"] { color: var(--danger); }
.code[data-applied="true"] .field__ring { background-image: var(--grad); }
@media (max-width: 480px) {
  .code__row { flex-direction: column; }
}

.plan--client .plan__price::after {
  content: "client rate";
  display: block;
  margin-top: 0.2rem;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--accent);
}
.plan__amount { transition: color 300ms var(--ease); }
.plan--client .plan__amount { color: var(--accent); }
.plan--client.plan--pro .plan__amount { color: var(--accent); }

/* --------------------------------------------------------------------------
   31. Demo page. Follows the site theme like every other page. One centred
   glass panel, two equal halves, one hairline between them.
   -------------------------------------------------------------------------- */

/* Demo pages follow the site theme like every other page. Glass and chip
   values are tokens so the panels read right in both themes. */
:root {
  --glass:        rgba(255, 255, 255, 0.62);
  --glass-solid:  #FFFFFF;
  --glass-well:   rgba(11, 18, 48, 0.035);
  --chip:         rgba(11, 18, 48, 0.05);
  --demo-label:   var(--accent);

}
html[data-theme="dark"] {
  --glass:        rgba(20, 20, 22, 0.6);
  --glass-solid:  #141416;
  --glass-well:   rgba(255, 255, 255, 0.03);
  --chip:         rgba(255, 255, 255, 0.06);
  --demo-label:   var(--accent);

}

.demo-hero {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.demo-hero .container { position: relative; max-width: 46rem; }
.demo-hero h1 { margin-block: var(--s3); }
.demo-hero .lede { margin-inline: auto; }


.demo-stage { padding-block: 0 var(--section-y); }
.demo-stage .container { max-width: 62rem; }

.demo-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: calc(var(--radius) * 1.6);
  background-color: var(--glass-solid);
  box-shadow: var(--shadow-card-lit);
  overflow: hidden;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .demo-panel {
    background-color: var(--glass);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
            backdrop-filter: blur(28px) saturate(1.4);
  }
}
/* rim light, same construction as the closing band */
.demo-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(150deg,
    rgba(14, 59, 214, 0.55) 0%,
    rgba(14, 59, 214, 0.22) 30%,
    rgba(11, 18, 48, 0.06) 60%,
    rgba(217, 183, 120, 0.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

@media (min-width: 860px) {
  .demo-panel { grid-template-columns: 1fr 1fr; }
}

/* Two halves, identical in structure, divided by one hairline. */
.demo-col {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 4vw, 3.25rem);
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.demo-col + .demo-col { border-top: 1px solid var(--line); }
@media (min-width: 860px) {
  .demo-col + .demo-col { border-top: 0; border-left: 1px solid var(--line); }
}
.demo-col h2 { font-size: var(--step-1); margin-bottom: var(--s1); }
.demo-col__note { margin-bottom: var(--s4); font-size: var(--step--1); color: var(--muted); min-height: 1.5em; }
.demo-col .form { display: flex; flex-direction: column; gap: var(--s3); flex: 1 1 auto; }
.demo-col__btn { width: 100%; margin-top: var(--s1); }
.demo-col .form__status { margin-top: var(--s1); }
.demo-col .form-success { padding-block: var(--s5); }

.demo-foot {
  margin: var(--s4) auto 0;
  max-width: 40ch;
  text-align: center;
  font-size: var(--step--1);
  color: var(--muted);
}

@media (forced-colors: active) {
  .demo-panel { background: Canvas; border: 1px solid CanvasText; }
  .demo-panel::before { display: none; }
}

/* --------------------------------------------------------------------------
   32. Demo library (/demos). Each demo is one ruled entry in the same
   material as the homepage ledger and the About index: a hairline above,
   an eyebrow and a number, the name set large, one summary, then two
   ruled columns, what to try and every way in. No glass, no rim, no chips.
   Phone first: one column, what to try before ways in, every link a full
   44px target, credentials allowed to wrap.
   -------------------------------------------------------------------------- */

.demo-hero--library { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.dl-session { margin-top: var(--s3); }

.dl { padding-block: 0 var(--section-y); }
.dl .container { max-width: 72rem; }
.dl-status { text-align: center; color: var(--muted); font-size: var(--step--1); }
.dl-status[hidden] { display: none; }
.dl-list { display: grid; gap: var(--s6); }

.dl-entry {
  border-top: 1px solid var(--line-2);
  padding-top: var(--s3);
}

.dl-entry__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}
.dl-entry__sector,
.dl-entry__num,
.dl-col__label {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.dl-entry__num { font-variant-numeric: tabular-nums; }

.dl-entry__name {
  margin: var(--s3) 0 0;
  font-size: var(--step-2);
  letter-spacing: -0.025em;
}
.dl-entry__summary {
  margin: var(--s2) 0 0;
  max-width: 60ch;
  color: var(--muted);
}
.dl-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s3);
  margin: var(--s2) 0 0;
  font-size: var(--step--1);
  color: var(--muted);
}
.dl-entry__meta span + span::before {
  content: "\00b7";
  margin-right: var(--s3);
}

.dl-entry__body {
  display: grid;
  gap: var(--s5);
  margin-top: var(--s5);
}
@media (min-width: 860px) {
  .dl-entry__body { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s6); }
}

.dl-col { min-width: 0; }
.dl-col__label { margin-bottom: var(--s2); }

.dl-steps,
.dl-ways {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-2);
}
.dl-steps > li,
.dl-ways > li { margin: 0; border-bottom: 1px solid var(--line); }
.dl-steps > li:last-child,
.dl-ways > li:last-child { border-bottom-color: var(--line-2); }

.dl-step {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--s2);
  padding-block: var(--s3);
  font-size: var(--step-0);
  line-height: 1.5;
}
.dl-step__num {
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--muted);
  line-height: 1.7;
}
.dl-step__text { color: var(--fg); }

.dl-way {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s3);
  align-items: start;
  padding-block: var(--s3);
}
.dl-way__text { min-width: 0; }
.dl-way__label { margin: 0; font-size: var(--step-0); font-weight: 600; letter-spacing: -0.015em; color: var(--fg); }
.dl-way__who { margin: 0.15rem 0 0; font-size: var(--step--1); color: var(--muted); }
.dl-way__cred {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  margin: 0.5rem 0 0;
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--step--1);
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.dl-way__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); flex: none; }

.dl-way__open {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  margin-top: -0.6rem;
  padding-inline: 0.25rem;
  color: var(--accent);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.dl-way__open span { font-size: 0.85em; }
@media (hover: hover) { .dl-way__open:hover { border-bottom-color: var(--accent); } }
.dl-way__open:focus-visible { outline-offset: 2px; }

.dl-entry__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s5);
}
.dl-entry__host { font-size: var(--step--1); color: var(--muted); }

@media (max-width: 560px) {
  .dl-entry__meta { flex-direction: column; gap: 0.2rem; }
  .dl-entry__meta span + span::before { content: none; }
  .dl-entry__foot .btn { width: 100%; }
  .dl-entry__host { width: 100%; text-align: center; }
}

@media (forced-colors: active) {
  .dl-entry, .dl-steps, .dl-ways { border-color: CanvasText; }
}

/* ---- ring: the call handler's sound waves pulse outward ---- */
@media (prefers-reduced-motion: no-preference) {
  [data-anim="ring"] .i-wave { animation: icon-wave 2.4s ease-in-out infinite; }
  [data-anim="ring"] .i-wave:nth-of-type(2) { animation-delay: 0.3s; }
  .system__row:hover [data-anim="ring"] .i-wave { animation-duration: 1.1s; }

  /* ---- slide: the order line ticks across the basket ---- */
  [data-anim="slide"] .i-line { animation: icon-line 3s ease-in-out infinite; }
  .system__row:hover [data-anim="slide"] .i-line { animation-duration: 1.2s; }
}
@keyframes icon-wave { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes icon-line { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(3px); opacity: 0.4; } }

/* --------------------------------------------------------------------------
   33. Systems. The homepage service section as a numbered typographic list
   rather than a card grid: a number, the moving mark in the margin, the
   name, the description, a hairline between entries. Same six systems,
   same icon motion, no boxes.
   -------------------------------------------------------------------------- */

.systems {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line-2);
}

.systems > li { margin: 0; border-bottom: 1px solid var(--line); }

.system__row {
  display: grid;
  grid-template-columns: 3ch 1.5rem minmax(0, 1fr) auto;
  grid-template-areas:
    "num icon title arrow"
    "num icon desc  arrow";
  column-gap: var(--s3);
  row-gap: var(--s1);
  align-items: start;
  padding-block: var(--s4);
  color: inherit;
  text-decoration: none;
}

@media (min-width: 860px) {
  .system__row {
    grid-template-columns: 3ch 1.5rem minmax(0, 0.9fr) minmax(0, 1.4fr) auto;
    grid-template-areas: "num icon title desc arrow";
    column-gap: var(--s4);
    align-items: baseline;
  }
}

.system__num {
  grid-area: num;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--muted);
  line-height: 1.6;
}

.system__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent);
  overflow: visible;
}

.system__icon svg {
  width: 22px;
  height: 22px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.system__icon svg > * { transform-box: fill-box; transform-origin: 50% 50%; }

.system__title {
  grid-area: title;
  font-size: var(--step-1);
  margin: 0;
  transition: color var(--dur) var(--ease);
}

.system__desc {
  grid-area: desc;
  margin: 0;
  font-size: var(--step-0);
  color: var(--muted);
}

.system__arrow {
  grid-area: arrow;
  align-self: center;
  width: 22px;
  height: 22px;
  color: var(--muted);
  transition: color var(--dur) var(--ease), translate var(--dur) var(--ease);
}

.system__arrow svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

@media (hover: hover) {
  .system__row:hover .system__title { color: var(--accent); }
  .system__row:hover .system__arrow { color: var(--accent); translate: 6px 0; }
}

.system__row:focus-visible { outline-offset: -2px; }

/* The section intro sits left over a left-set list. */
.systems-intro { text-align: left; margin-inline: 0; }
.systems-intro .measure { margin-inline: 0; }

/* --------------------------------------------------------------------------
   34. Ledger — "Included in every plan". Six terms, one per row, ruled edge
   to edge. Number in the margin, title and line side by side. The rule
   above each row draws itself across as the row arrives, and on hover
   the whole rule turns cobalt: full width, never a stub.
   -------------------------------------------------------------------------- */

.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.ledger > li { margin: 0; }

.ledger__lede { margin-top: var(--s3); color: var(--muted); }

.ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  grid-template-areas:
    "num title"
    "num desc";
  column-gap: var(--s2);
  row-gap: 0.3rem;
  padding-block: var(--s3);
}

@media (min-width: 700px) {
  .ledger__row {
    grid-template-columns: 2.5rem minmax(0, 0.9fr) minmax(0, 1.4fr);
    grid-template-areas: "num title desc";
    column-gap: var(--s3);
    align-items: baseline;
    padding-block: var(--s4);
  }
}

/* The rule: a hairline in the resting state, cobalt on hover. It draws
   from the left as the row reveals. */
.ledger__row::before,
.ledger__row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  pointer-events: none;
}
.ledger__row::before { background: var(--line-2); }
.ledger__row::after {
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 700ms var(--ease);
}
.ledger__row:last-child { border-bottom: 1px solid var(--line-2); }

@media (prefers-reduced-motion: no-preference) {
  .ledger__row.reveal::before { transform: scaleX(0); transform-origin: left; transition: transform 1100ms var(--ease) 120ms; }
  .ledger__row.reveal.in::before { transform: scaleX(1); }
}

@media (hover: hover) {
  .ledger__row:hover::after { transform: scaleX(1); }
  .ledger__row:hover .ledger__num { color: var(--accent); }
}

.ledger__num {
  grid-area: num;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--muted);
  line-height: 1.6;
  transition: color var(--dur) var(--ease);
}

.ledger__title {
  grid-area: title;
  margin: 0;
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.ledger__desc {
  grid-area: desc;
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
}

/* Every row is the same height: the line reserves two lines on desktop,
   so a longer or shorter sentence never changes the rhythm. */
@media (min-width: 700px) {
  .ledger__desc { min-height: calc(2 * 1.65em); }
}

/* The ledger's own reveal: rows rise less and never blur, so the rule
   drawing across is the motion you notice. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .ledger__row.reveal { transform: translateY(10px); filter: none; }
  .ledger__row.reveal.in { transform: none; }
}

/* --------------------------------------------------------------------------
   35. Mission page, second half — the mission in three lines and a lexicon.
   Same ruled, typographic material as the homepage ledger: no cards, no
   glow, no counters. The headword is the only thing set large.
   -------------------------------------------------------------------------- */

.m-eyebrow {
  margin: 0 0 var(--s2);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* One column, everything on one left edge: eyebrow, the three lines, the
   copy. The three lines are the same size and never wrap. */
.m-mission-inner { max-width: 44rem; }
.m-mission-inner .m-eyebrow { margin-bottom: var(--s3); }
.m-three {
  display: block;
  margin: 0 0 var(--s5);
  font-size: min(var(--step-3), 8.6vw);
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: initial;
}
.m-three span { display: block; white-space: nowrap; }
.m-three.reveal { clip-path: none !important; }
.m-three span:nth-child(2) { color: var(--accent); }
.m-three span:nth-child(3) { color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .m-three.reveal span { opacity: 0; transform: translateY(0.35em); transition: opacity 700ms var(--ease), transform 800ms var(--ease); }
  .m-three.reveal.in span { opacity: 1; transform: none; }
  .m-three.reveal.in span:nth-child(2) { transition-delay: 160ms; }
  .m-three.reveal.in span:nth-child(3) { transition-delay: 320ms; }
}

.m-mission-body .lede { font-weight: 400; }

.lex { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.lex > li { margin: 0; }

.lex__entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "word tag"
    "body body";
  column-gap: var(--s3);
  row-gap: var(--s2);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 860px) {
  .lex__entry {
    grid-template-columns: 12rem minmax(0, 1fr) auto;
    grid-template-areas: "word body tag";
    column-gap: var(--s5);
    align-items: baseline;
  }
}

/* The rule turns cobalt across its full width on hover. */
.lex__entry::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 700ms var(--ease);
  pointer-events: none;
}
@media (hover: hover) {
  .lex__entry:hover::after { transform: scaleX(1); }
  .lex__entry:hover .lex__word { color: var(--accent); }
}

.lex__word {
  grid-area: word;
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
  overflow-wrap: normal;
  transition: color var(--dur) var(--ease);
}

.lex__body { grid-area: body; min-width: 0; }
.lex__def { margin: 0; font-size: var(--step-0); color: var(--fg); }
.lex__eg {
  margin: 0.4rem 0 0;
  font-size: var(--step--1);
  color: var(--muted);
}
.lex__eg-tag {
  margin-right: 0.5em;
  font-style: italic;
  color: var(--accent);
}

.lex__tag {
  grid-area: tag;
  align-self: start;
  justify-self: end;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  color: var(--muted);
  white-space: nowrap;
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .lex__entry.reveal { transform: translateY(10px); filter: none; }
  .lex__entry.reveal.in { transform: none; }
}