/* ==========================================================================
   AIOS, coachaios.com
   White, navy and black on Apple's system type. See DESIGN.md.
   No web fonts, no build step, no framework.
   ========================================================================== */

:root {
  /* Colour. See DESIGN.md section 3. */
  --white: #FFFFFF;
  --ink: #0B0B0F;
  --navy: #14284C;
  --navy-deep: #0B1B36;
  --navy-light: #9DB4E4;
  --slate: #5D6675;
  --slate-muted: #8792A6;
  --grey: #8A92A0;
  --grey-light: #A9B0BC;
  --grey-pale: #AEB5C0;
  --grey-faint: #C7CDD6;
  --line-strong: #D5DCE8;
  --line: #DCE0E8;
  --line-soft: #E8EAEE;   /* product UI only */
  --line-faint: #EAEDF2;  /* product UI only */
  --wash: #F7F9FC;
  --wash-cool: #FBFCFD;
  --track: #F1F3F7;
  --segment-pale: #CDD3DD;

  /* Liquid gold. Approved 30 August 2026, replacing the flat #A97F2B that
     only ever existed in the mockups. Four treatments below. DESIGN.md 3.1. */
  --g-shadow: #5C3F12;
  --g-base:   #C6902E;
  --g-mid:    #E8B65B;
  --g-light:  #F6D98A;
  --g-glint:  #FFF3D6;
  --g-ink:    #3A2A0D;   /* text on a poured gold surface */

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(20px, 3vw, 36px);
  --section-y: clamp(70px, 8.5vw, 120px);
  --wide: 1240px;
  --centred: 1120px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--navy-deep); }
img { display: block; }

/* Section separation is whitespace alone. There are no dividers on the page;
   the only hairlines live inside the product UI mockups. DESIGN.md 7.2. */
.section { padding: var(--section-y) var(--gutter); }
.wrap { max-width: var(--wide); margin: 0 auto; }
.centred { max-width: var(--centred); margin: 0 auto; text-align: center; }

/* ===== HEADER ============================================================ */
.hdr {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.hdr__inner {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter);
  height: 70px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 20px;
}
.hdr__nav {
  display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px);
  font-size: 13.5px; letter-spacing: -0.005em; white-space: nowrap;
}
.hdr__nav a { color: var(--slate); transition: color .2s; }
.hdr__nav a:hover { color: var(--ink); }
.hdr__logo { display: flex; align-items: center; gap: 9px; justify-self: center; }
.hdr__logo img { width: 34px; height: 34px; }
.hdr__logo span { font-size: 18px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.hdr__cta { justify-self: end; }

/* ===== BUTTONS =========================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.008em;
  padding: 14px 26px; border-radius: 999px;
  transition: background .25s, transform .25s, box-shadow .25s, color .25s;
}
.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover {
  background: var(--navy-deep); color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(11, 27, 54, .5);
}
.btn--sm { font-size: 13.5px; padding: 9px 18px; gap: 7px; }
.btn--sm:hover { transform: translateY(-1px); box-shadow: none; }
.btn--text {
  color: var(--navy); padding: 14px 20px;
  transition: opacity .2s;
}
.btn--text:hover { opacity: .7; }

/* ===== TYPE ============================================================== */
/* The H2 sizes differ on purpose: each headline is tuned to land on one line
   at desktop. Do not normalise them. DESIGN.md 4. */
.h1 {
  margin: 0; font-size: clamp(40px, 6.2vw, 90px); font-weight: 600;
  line-height: 1.05; letter-spacing: -0.038em; color: var(--ink);
  text-wrap: balance;
}
.h2 { margin: 0; font-weight: 600; color: var(--ink); text-wrap: balance; }
.h2--gap     { font-size: clamp(30px, 4.1vw, 54px);  line-height: 1.06; letter-spacing: -0.036em; }
.h2--lenses  { font-size: clamp(30px, 4.1vw, 56px);  line-height: 1.06; letter-spacing: -0.036em; }
.h2--spine   { font-size: clamp(26px, 3.35vw, 44px); line-height: 1.06; letter-spacing: -0.036em; }
.h2--modules { font-size: clamp(25px, 3.1vw, 40px);  line-height: 1.07; letter-spacing: -0.034em; }
.h2--about   { font-size: clamp(24px, 2.9vw, 38px);  line-height: 1.08; letter-spacing: -0.032em; }
.h2--limits  { font-size: clamp(23px, 2.75vw, 36px); line-height: 1.08; letter-spacing: -0.032em; }

.intro {
  margin: 20px auto 0; font-size: 18px; line-height: 1.55;
  letter-spacing: -0.012em; color: var(--slate); text-wrap: pretty;
}
.caption { font-size: 13px; color: var(--grey-light); }

/* ===== HERO ============================================================== */
.hero { padding: clamp(64px, 8vw, 104px) var(--gutter) 0; overflow-x: clip; }
.hero__inner { max-width: 1140px; margin: 0 auto; text-align: center; }
/* Each line rides up out of its own clipping box. */
.hero__line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero__line > span { display: block; }
.hero__accent { color: var(--navy); }
.hero__sub {
  margin: 26px auto 0; max-width: 620px;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5;
  letter-spacing: -0.014em; color: var(--slate); text-wrap: pretty;
}
.hero__actions {
  margin-top: 30px;
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}
.hero__stage { position: relative; max-width: 1000px; margin: clamp(48px, 5.5vw, 78px) auto 0; }
.hero__caption { margin: clamp(58px, 6.5vw, 82px) auto 0; }

/* ===== HARDWARE: MACBOOK =================================================
   Built entirely in CSS, no images. The brushed aluminium is two stacked
   gradients: a fine repeating grain plus a broad light sweep. One alone
   reads as flat plastic. DESIGN.md 11. */
.mac { position: relative; }
.mac__lid {
  position: relative;
  border-radius: 15px 15px 4px 4px;
  padding: 2.5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(0,0,0,.1);
  background-image:
    repeating-linear-gradient(93deg, rgba(255,255,255,.5) 0 1px, rgba(0,0,0,.025) 1px 2px, rgba(255,255,255,0) 2px 3.5px),
    linear-gradient(102deg, #FAFBFB 0%, #DDE0E4 20%, #F3F4F6 38%, #C6CAD0 62%, #E9EBEE 80%, #BFC4CA 100%);
}
.mac__bezel {
  border-radius: 13px 13px 3px 3px;
  padding: 9px 9px 11px;             /* heavier at the bottom */
  background: linear-gradient(#1C1F24, #0A0B0E 60%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.7);
}
/* container-type is load bearing: every interior value is in cqw, so the
   mockup scales with the machine instead of breaking. */
.mac__screen {
  position: relative; border-radius: 3px; overflow: hidden;
  background: var(--white);
  aspect-ratio: 1.545;
  container-type: inline-size;
  box-shadow: inset 0 0 0 1px rgba(11,27,54,.12);
}
.mac__notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 12.4%; height: 2.7%;
  background: #0A0B0E; border-radius: 0 0 5px 5px; z-index: 14;
}
.mac__vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 11;
  background: radial-gradient(130% 110% at 50% -10%, rgba(255,255,255,0) 52%, rgba(11,27,54,.05) 100%);
}
.mac__glare {
  position: absolute; inset: 0; pointer-events: none; z-index: 12;
  mix-blend-mode: screen;
  background: linear-gradient(112deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.12) 14%, rgba(255,255,255,.02) 24%, rgba(255,255,255,0) 36%);
}
.mac__gloss {
  position: absolute; inset: 0; pointer-events: none; z-index: 12;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 18px 26px -24px rgba(255,255,255,.9);
}
.mac__hinge {
  position: relative; height: 3px; margin: 0 5.5%;
  background: linear-gradient(#565C64, #25292F 50%, #767C84);
}
/* A flat clipped trapezoid, never a 3D rotateX: the transform magnified the
   deck past the chassis and overflowed the lip. Narrower at the hinge, wider
   at the front is the whole illusion. */
.mac__deck {
  position: relative; width: 100%; aspect-ratio: 9.2;
  clip-path: polygon(1.6% 0%, 98.4% 0%, 100% 100%, 0% 100%);
  background-image: linear-gradient(180deg, #C7CBD1 0%, #E9EBEE 6%, #D6DADF 34%, #C3C8CF 66%, #AFB4BC 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
/* Pixel padding, not percentage: percentage vertical padding resolves against
   width and collapses the interior. */
.mac__deck-inner {
  position: absolute; inset: 0; padding: 5px 7.5% 4px;
  display: flex; flex-direction: column; gap: 4px;
}
.mac__keys {
  flex: 1; display: flex; flex-direction: column; gap: 1.5px;
  padding: 2px; border-radius: 2px; background: #AFB4BC;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.24);
}
.mac__keyrow { display: flex; gap: 1.1%; }
.mac__key {
  border-radius: .5px;
  background: linear-gradient(#3D4249, #272B31);
  box-shadow: 0 .5px 0 rgba(255,255,255,.32);
}
.mac__trackpad {
  flex: 0 0 34%; width: 31%; margin: 0 auto; border-radius: 1.5px;
  background: linear-gradient(#DDE0E5, #C6CAD1);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 -.5px 0 rgba(255,255,255,.5);
}
.mac__deck-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,.05) 100%);
}
.mac__lip {
  position: relative; height: 7px; width: 100%;
  border-radius: 0 0 9px 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  background: linear-gradient(#B4B9C1 0%, #9CA1A9 55%, #84898F 100%);
}
.mac__lip::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 13%; height: 3px; border-radius: 0 0 4px 4px;
  background: linear-gradient(rgba(0,0,0,.24), rgba(0,0,0,.02));
}
/* Two shadow layers, both nudged right of centre to match one light source. */
.mac__shadow { position: relative; height: 20px; }
.mac__shadow::before {
  content: ''; position: absolute; top: 0; left: 9%; right: 5%; height: 11px;
  background: radial-gradient(ellipse 50% 100% at 46% 0%, rgba(11,27,54,.32), rgba(11,27,54,0) 76%);
}
.mac__shadow::after {
  content: ''; position: absolute; top: 1px; left: -2%; right: -9%; height: 46px;
  filter: blur(11px);
  background: radial-gradient(ellipse 54% 100% at 54% 0%, rgba(11,27,54,.14), rgba(11,27,54,0) 74%);
}

/* ===== HARDWARE: IPHONE ================================================== */
.iphone {
  position: absolute; right: clamp(-16px, -1.2vw, 0px); bottom: -40px;
  width: clamp(114px, 10.5vw, 158px); z-index: 6;
}
.iphone__rail {
  border-radius: 29px; padding: 2.5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  background-image:
    repeating-linear-gradient(94deg, rgba(255,255,255,.2) 0 1px, rgba(0,0,0,.06) 1px 2px, rgba(255,255,255,0) 2px 3px),
    linear-gradient(120deg, #8A8F97, #2A2E34 34%, #9BA0A8 58%, #33373D 86%, #767B83);
}
.iphone__bezel {
  border-radius: 27px; padding: 5px; background: #06070A;
  box-shadow: inset 0 0 3px rgba(0,0,0,.9);
}
.iphone__screen {
  position: relative; border-radius: 22px; overflow: hidden;
  background: var(--white); aspect-ratio: 9 / 19.5;
  container-type: inline-size;
}
.iphone__notch {
  position: absolute; top: 2.4%; left: 50%; transform: translateX(-50%);
  width: 31%; height: 4.3%; background: #06070A; border-radius: 999px; z-index: 8;
}
.iphone__glare {
  position: absolute; inset: 0; pointer-events: none; z-index: 7;
  mix-blend-mode: screen;
  background: linear-gradient(116deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.09) 16%, rgba(255,255,255,0) 32%);
}
.iphone__btn { position: absolute; width: 3px; background: linear-gradient(#9AA0A8, #3C4046); }
.iphone__btn--l1 { left: -3px; top: 22%; height: 7%;  border-radius: 2px 0 0 2px; }
.iphone__btn--l2 { left: -3px; top: 32%; height: 11%; border-radius: 2px 0 0 2px; }
.iphone__btn--r1 { right: -3px; top: 28%; height: 13%; border-radius: 0 2px 2px 0; }
.iphone__shadow {
  position: absolute; left: 6%; right: 2%; bottom: -12px; height: 24px;
  filter: blur(8px); z-index: -1;
  background: radial-gradient(ellipse 54% 100% at 52% 0%, rgba(11,27,54,.28), rgba(11,27,54,0) 74%);
}

/* ===== PRODUCT UI: the AIOS shell on the hero screen =====================
   Everything here is sized in cqw against .mac__screen. The only hairlines
   on the whole page live in this block and its siblings. */
.ui {
  display: grid; grid-template-columns: 17% 1fr 26%; height: 100%;
  text-align: left;   /* the hero centres its column; screens must not inherit it */
}
.ui__side {
  border-right: 1px solid var(--line-soft);
  padding: 3cqw 1.7cqw;
  display: flex; flex-direction: column; gap: 2.1cqw;
  background: var(--wash-cool);
}
.ui__brand { font-size: 1.5cqw; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.ui__nav { display: flex; flex-direction: column; gap: .35cqw; }
.ui__nav-item {
  font-size: 1.08cqw; padding: .72cqw .85cqw;
  display: flex; align-items: center; justify-content: space-between; gap: .4cqw;
  color: var(--grey-pale);
}
.ui__nav-item.is-live {
  font-weight: 500; border-radius: .5cqw;
  background: var(--navy); color: var(--white);
}
.ui__chip {
  font-family: var(--mono); font-size: .62cqw; font-style: normal;
  letter-spacing: .08em; color: var(--grey-faint);
}
.ui__nav-item.is-live .ui__chip { color: var(--navy-light); }
.ui__mode {
  margin-top: auto; padding-top: 1.2cqw; border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: .66cqw; letter-spacing: .09em;
  color: var(--grey-light); line-height: 1.8;
}
.ui__main {
  padding: 3cqw 2.1cqw; display: flex; flex-direction: column; gap: 1.1cqw;
  min-width: 0; position: relative;
}
.ui__head { display: flex; align-items: center; gap: .85cqw; }
.ui__head h3 { margin: 0; font-size: 1.9cqw; font-weight: 600; letter-spacing: -0.028em; color: var(--ink); }
.ui__count {
  font-family: var(--mono); font-size: .85cqw; color: var(--white);
  background: var(--navy); border-radius: 999px; padding: .2cqw .68cqw;
}
.ui__row {
  border: 1px solid var(--line-faint); border-radius: .6cqw;
  padding: 1.1cqw 1.3cqw;
  display: flex; align-items: center; justify-content: space-between; gap: 1cqw;
}
.ui__row.is-first {
  border-color: var(--line-strong); border-left: 2px solid var(--navy);
  background: var(--wash);
}
.ui__row-name { font-size: 1.26cqw; font-weight: 500; color: var(--ink); }
.ui__row-meta {
  margin-top: .26cqw; font-family: var(--mono); font-size: .8cqw; color: #7A8290;
}
.ui__row-meta em { font-style: normal; color: var(--navy); }
.ui__row-act { margin-top: .4cqw; font-size: 1cqw; color: var(--slate); }
.ui__row-act b { color: var(--ink); font-weight: 500; }
.ui__acts { display: flex; gap: .45cqw; flex-shrink: 0; }
.ui__btn {
  font-size: .85cqw; font-weight: 500;
  padding: .52cqw 1cqw; border-radius: .45cqw;
}
.ui__btn--go { background: var(--navy); color: var(--white); }
.ui__btn--ghost { border: 1px solid #C6CEDC; color: var(--navy); }
.ui__btn--no { border: 1px solid var(--line); color: var(--slate); }
.ui__foot {
  margin-top: auto; padding-top: 1cqw; border-top: 1px solid var(--line-faint);
  display: flex; align-items: center; justify-content: space-between; gap: 1cqw;
  font-size: .85cqw; color: #7A8290;
}
.ui__foot em { font-style: normal; color: var(--navy); }
.ui__cursor {
  position: absolute; left: 20cqw; top: 7.5cqw; width: 2cqw; height: 2cqw;
  z-index: 13; filter: drop-shadow(0 1px 2px rgba(0,0,0,.32));
}
.ui__draft {
  border-left: 1px solid var(--line-soft); padding: 3cqw 1.5cqw;
  display: flex; flex-direction: column; gap: .9cqw;
  background: var(--wash-cool); min-width: 0;
}
.ui__draft-head { font-size: .95cqw; font-weight: 500; color: #7A8290; }
.ui__draft-body {
  font-size: 1cqw; line-height: 1.6; color: var(--slate);
  display: flex; flex-direction: column; gap: .66cqw;
}
.ui__draft-body b { color: var(--ink); font-weight: 500; }
.ui__draft-foot {
  margin-top: auto; padding-top: 1cqw; border-top: 1px solid var(--line-soft);
  font-size: .92cqw; color: var(--navy);
}

/* Phone screen contents, sized against .iphone__screen. */
.pui { text-align: left; padding: 10.5cqw 5.5cqw 5cqw; display: flex; flex-direction: column; gap: 3.2cqw; height: 100%; }
.pui__label { font-size: 4cqw; font-weight: 500; color: #7A8290; }
.pui__title { font-size: 7cqw; font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; color: var(--ink); }
.pui__card {
  border: 1px solid var(--line-strong); border-left: 2px solid var(--navy);
  border-radius: 2.6cqw; background: var(--wash);
  padding: 3.4cqw 3.2cqw; display: flex; flex-direction: column; gap: 1.5cqw;
}
.pui__name { font-size: 4.6cqw; font-weight: 500; color: var(--ink); }
.pui__meta { font-family: var(--mono); font-size: 3.4cqw; color: #7A8290; }
.pui__meta em { font-style: normal; color: var(--navy); }
.pui__go {
  margin-top: .9cqw; font-size: 3.9cqw; font-weight: 500;
  background: var(--navy); color: var(--white);
  padding: 2.4cqw; border-radius: 999px; text-align: center;
}
.pui__foot { margin-top: auto; font-size: 3.4cqw; color: var(--grey-light); line-height: 1.5; }

/* ===== THE GAP: donut ==================================================== */
.gap-section { margin-top: clamp(80px, 9.5vw, 126px); padding: clamp(70px, 8.5vw, 116px) var(--gutter); }
.gap__grid {
  margin-top: clamp(44px, 5.5vw, 72px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 6vw, 88px); align-items: center;
}
.donut { position: relative; max-width: 380px; margin: 0 auto; width: 100%; }
.donut__spin {
  animation: spinSlow 48s linear infinite;
  transform-box: view-box; transform-origin: 140px 140px;
}
.donut svg { width: 100%; height: auto; display: block; }
/* The centre label sits outside the rotating wrapper so it stays upright. */
.donut__centre {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.donut__figure {
  font-size: clamp(48px, 5.8vw, 74px); font-weight: 600;
  line-height: .9; letter-spacing: -0.045em; color: var(--navy);
}
.donut__label { font-size: 14px; color: var(--grey); }

.legend { display: flex; flex-direction: column; gap: 0; }
.legend__row { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; }
.legend__swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; margin-top: 8px; }
.legend__pct {
  font-size: 30px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; min-width: 80px;
}
.legend__text { font-size: 17px; line-height: 1.45; letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; }
.legend__source { margin: 18px 0 0; font-size: 12.5px; color: var(--grey-light); line-height: 1.6; }

/* ===== THE SPINE ========================================================= */
.spine { position: relative; margin-top: clamp(48px, 6vw, 76px); }
.spine svg { width: 100%; height: auto; display: block; }
.spine__label { position: absolute; max-width: 19ch; }
.spine__label--up { transform: translateY(-100%); }
.spine__label b {
  display: block; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600;
  letter-spacing: -0.028em; color: var(--ink);
}
.spine__label span {
  display: block; margin-top: 5px;
  font-size: clamp(12.5px, 1.05vw, 14.5px); line-height: 1.45; color: var(--slate);
}
.spine__label--capture { left: 8.6%;  top: 73%; }
.spine__label--decide  { left: 36.5%; top: 36%; }
.spine__label--approve { left: 64.9%; top: 67%; max-width: 21ch; }
.spine__label--act     { left: 81.5%; top: 24.5%; }

/* ===== THE LIMITS ======================================================== */
.limits__copy {
  margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.limits__copy p {
  margin: 0; max-width: 60ch; font-size: 17.5px; line-height: 1.55;
  letter-spacing: -0.012em; color: var(--slate); text-wrap: pretty;
}
.limits__rows { margin-top: clamp(44px, 5vw, 68px); display: flex; flex-direction: column; }
.limit {
  display: grid; grid-template-columns: minmax(96px, 120px) 1fr;
  gap: clamp(18px, 3vw, 36px); padding: 22px 0;
}
.limit__key { display: flex; align-items: center; gap: 9px; height: fit-content; }
.limit__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--navy); flex-shrink: 0; }
.limit__key span { font-size: 14px; font-weight: 500; }
.limit__title { font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.limit p {
  margin: 7px 0 0; max-width: 58ch; font-size: 16.5px; line-height: 1.5;
  letter-spacing: -0.01em; color: var(--slate); text-wrap: pretty;
}
.pull {
  margin: clamp(32px, 4vw, 46px) auto 0; max-width: 52ch; text-align: center;
  font-size: clamp(20px, 2.1vw, 27px); font-weight: 500; line-height: 1.32;
  letter-spacing: -0.028em; color: var(--ink); text-wrap: pretty;
}

/* ===== THREE LENSES: horizontal snap rail ================================ */
.lenses { padding: var(--section-y) 0; }
.lenses__head { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.rail {
  margin-top: clamp(44px, 5.5vw, 72px);
  display: flex; gap: clamp(24px, 3vw, 40px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--gutter) 12px;
  scrollbar-width: thin;
}
.lens {
  flex: 0 0 min(820px, 86vw); scroll-snap-align: center;
  display: flex; flex-direction: column; gap: 14px;
}
.lens h3 {
  margin: 0; text-align: center; font-size: clamp(22px, 2vw, 28px);
  font-weight: 600; letter-spacing: -0.03em; color: var(--ink);
}
.lens__copy {
  margin: 0 auto; max-width: 60ch; text-align: center;
  font-size: 16.5px; line-height: 1.5; letter-spacing: -0.01em;
  color: var(--slate); text-wrap: pretty;
}
.lens__caption { text-align: center; }
/* A lidless machine: screen, thin base, shadow. No keyboard, which overlapped
   at this size and was removed. */
.slab { position: relative; margin-top: 4px; }
.slab__lid {
  position: relative; border-radius: 11px 11px 3px 3px; padding: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  background-image:
    repeating-linear-gradient(93deg, rgba(255,255,255,.5) 0 1px, rgba(0,0,0,.025) 1px 2px, rgba(255,255,255,0) 2px 3.5px),
    linear-gradient(102deg, #FAFBFB, #DDE0E4 20%, #F3F4F6 38%, #C6CAD0 62%, #E9EBEE 80%, #BFC4CA);
}
.slab__bezel {
  border-radius: 10px 10px 2px 2px; padding: 6px 6px 8px;
  background: linear-gradient(#1C1F24, #0A0B0E 60%);
}
.slab__screen {
  position: relative; border-radius: 2px; overflow: hidden;
  background: var(--white); aspect-ratio: 1.545; container-type: inline-size;
}
.slab__notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 12.4%; height: 2.7%; background: #0A0B0E;
  border-radius: 0 0 4px 4px; z-index: 14;
}
.slab__base {
  position: relative; height: 6px; width: 100%; border-radius: 0 0 8px 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  background: linear-gradient(#B4B9C1 0%, #9CA1A9 55%, #84898F 100%);
}
.slab__shadow { position: relative; height: 16px; }
.slab__shadow::after {
  content: ''; position: absolute; top: 0; left: -1%; right: -6%; height: 34px;
  filter: blur(9px);
  background: radial-gradient(ellipse 54% 100% at 53% 0%, rgba(11,27,54,.13), rgba(11,27,54,0) 74%);
}
.scene { width: 100%; height: 100%; display: block; }

/* Lens 3 is a DOM dashboard rather than an SVG, sized in cqw like the rest. */
.dash { display: grid; grid-template-columns: 15.5% 1fr; height: 100%; font-size: 1cqw; text-align: left; }
.dash__side {
  border-right: 1px solid var(--line-soft); background: var(--wash-cool);
  padding: 2.6cqw 1.4cqw; display: flex; flex-direction: column; gap: .5cqw;
}
.dash__nav { font-size: 1cqw; color: var(--grey-pale); padding: .55cqw .6cqw; border-radius: .4cqw; }
.dash__nav.is-on { background: var(--navy); color: var(--white); font-weight: 500; }
.dash__body { padding: 2.6cqw 2cqw; display: flex; flex-direction: column; gap: 1.5cqw; min-width: 0; }
.dash__h { margin: 0; font-size: 1.8cqw; font-weight: 600; letter-spacing: -0.028em; color: var(--ink); }
.dash__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9cqw; }
.dash__card { border: 1px solid var(--line-faint); border-radius: .6cqw; padding: .9cqw 1cqw; }
.dash__card.is-live { border-color: var(--line-strong); background: var(--wash); }
.dash__card-top { display: flex; align-items: center; justify-content: space-between; gap: .4cqw; }
.dash__card-name { font-size: 1.05cqw; font-weight: 500; color: var(--ink); }
.dash__card.is-planned .dash__card-name { color: var(--grey-pale); }
.dash__tag {
  font-family: var(--mono); font-size: .58cqw; letter-spacing: .1em;
  padding: .18cqw .45cqw; border-radius: .3cqw;
}
.dash__tag--live { background: var(--navy); color: var(--white); }
.dash__tag--planned { border: 1px solid var(--line); color: var(--grey-faint); }
.dash__card-stats { margin-top: .6cqw; display: flex; gap: .9cqw; font-size: .72cqw; color: var(--slate); }
.dash__card-stats b { font-size: 1.15cqw; font-weight: 600; color: var(--navy); display: block; letter-spacing: -0.03em; }
.dash__card-empty { margin-top: .6cqw; font-size: .72cqw; color: var(--grey-faint); }
.dash__cols { display: grid; grid-template-columns: 1fr 30%; gap: 1.6cqw; min-height: 0; }
.dash__list { display: flex; flex-direction: column; }
.dash__item {
  display: grid; grid-template-columns: 1.4cqw 1fr auto; gap: .8cqw;
  align-items: center; padding: .68cqw 0;
  border-bottom: 1px solid var(--line-faint);
  font-size: .95cqw; color: var(--slate);
}
.dash__item:last-child { border-bottom: none; }
.dash__mark { width: 1.2cqw; height: 1.2cqw; border-radius: 999px; }
.dash__mark--done { background: var(--navy); display: flex; align-items: center; justify-content: center; }
.dash__mark--wait { border: .18cqw solid var(--navy); }
.dash__mark--next { border: .18cqw solid var(--grey-faint); }
.dash__time { font-family: var(--mono); font-size: .72cqw; color: var(--grey-light); }
.dash__log { border-left: 1px solid var(--line-soft); padding-left: 1.4cqw; display: flex; flex-direction: column; gap: .9cqw; }
.dash__log-h { font-family: var(--mono); font-size: .66cqw; letter-spacing: .1em; color: var(--grey-light); }
.dash__log-item { display: flex; flex-direction: column; gap: .18cqw; }
.dash__log-time { font-family: var(--mono); font-size: .62cqw; color: var(--navy); }
.dash__log-text { font-size: .8cqw; line-height: 1.45; color: var(--slate); }
.dash__foot {
  margin-top: auto; padding-top: .9cqw; border-top: 1px solid var(--line-faint);
  font-size: .8cqw; color: var(--grey-light);
}

/* ===== MODULES =========================================================== */
.modules__rows { margin-top: clamp(36px, 4.5vw, 56px); display: flex; flex-direction: column; }
.module {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 32px); padding: 24px 0;
}
.module--live { background: linear-gradient(90deg, rgba(20,40,76,.035), rgba(20,40,76,0) 62%); }
.module__name { display: flex; align-items: center; gap: 12px; }
.module__name span:first-child {
  font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.035em; color: var(--ink);
}
.module--planned .module__name span:first-child { color: var(--slate-muted); }
.module__tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; border-radius: 5px;
}
.module__tag--live { background: var(--navy); color: var(--white); padding: 5px 9px; }
.module__tag--planned { border: 1px solid var(--line); color: var(--grey); padding: 4px 9px; }
.module p {
  margin: 0; font-size: 16.5px; line-height: 1.5; letter-spacing: -0.01em;
  color: var(--slate); text-wrap: pretty;
}
.module--planned p { color: var(--slate-muted); }
.module__state { font-size: 15px; line-height: 1.5; color: var(--navy); }
.module--planned .module__state { color: var(--grey-light); }

/* ===== WHY THIS EXISTS =================================================== */
.about__copy { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.about__copy p {
  margin: 0; max-width: 62ch; font-size: 17.5px; line-height: 1.58;
  letter-spacing: -0.012em; color: var(--slate); text-wrap: pretty;
}

/* ===== CTA: the block is the button ====================================== */
.cta-section { background: var(--white); padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(64px, 7vw, 110px); }
.cta {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: clamp(16px, 2vw, 26px);
  max-width: clamp(320px, 72vw, 760px); aspect-ratio: 1; margin: 0 auto;
  padding: clamp(28px, 4vw, 56px); border-radius: clamp(24px, 3vw, 40px);
  background: var(--navy-deep); color: var(--white); text-align: center;
  overflow: hidden;
  box-shadow: 0 26px 60px -30px rgba(11,27,54,.7);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.cta:hover {
  color: var(--white);
  transform: translateY(-6px);
  box-shadow: 0 40px 80px -34px rgba(11,27,54,.8);
}
.cta__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 12%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 12%, transparent 78%);
}
.cta__h {
  position: relative; font-size: clamp(24px, 3.6vw, 50px); font-weight: 600;
  line-height: 1.05; letter-spacing: -0.038em; text-wrap: balance;
}
.cta__h em { font-style: normal; color: var(--navy-light); }
.cta__p {
  position: relative; max-width: 44ch; font-size: clamp(14px, 1.25vw, 17.5px);
  line-height: 1.5; letter-spacing: -0.012em; color: rgba(255,255,255,.72); text-wrap: pretty;
}
.cta__pill {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  background: var(--white); color: var(--navy-deep);
  font-size: clamp(14px, 1.15vw, 16px); font-weight: 500; letter-spacing: -0.008em;
  padding: clamp(13px, 1.3vw, 17px) clamp(22px, 2.2vw, 30px); border-radius: 999px;
}
.cta__fine { position: relative; font-size: clamp(12px, 1vw, 13.5px); color: rgba(255,255,255,.45); }
.cta__aside { margin: clamp(22px, 2.5vw, 34px) auto 0; text-align: center; font-size: 14.5px; color: var(--grey); }
.cta__aside a { border-bottom: 1px solid rgba(20,40,76,.35); padding-bottom: 1px; }
.cta__aside a:hover { border-color: var(--navy); }

/* ===== FOOTER ============================================================ */
.ftr { background: var(--white); padding: clamp(48px, 6vw, 72px) var(--gutter) 40px; }
.ftr__cols {
  max-width: var(--wide); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px;
}
.ftr__brand { display: flex; flex-direction: column; gap: 12px; }
.ftr__id { display: flex; align-items: center; gap: 10px; }
.ftr__id img { width: 30px; height: 30px; }
.ftr__id span { font-size: 17px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.ftr__brand p { margin: 0; max-width: 30ch; font-size: 14px; line-height: 1.55; color: var(--grey); }
.ftr__col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ftr__col > span:first-child { color: var(--grey-light); }
.ftr__col a { color: var(--slate); }
.ftr__col a:hover { color: var(--ink); }
.ftr__base {
  max-width: var(--wide); margin: clamp(36px, 4vw, 52px) auto 0; padding-top: 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--grey-light);
}

/* ===== FOCUS ============================================================= */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px;
}
.cta:focus-visible { outline-color: var(--white); }

/* ===== MOTION ============================================================
   Entry animations are gated by .reveal, which script.js adds. The base
   stylesheet never hides anything, so the page renders complete with
   JavaScript off. DESIGN.md 7. */
@keyframes rise   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
/* The two labels above the path carry their own translate. Plain rise ends at
   transform:none and would drop them onto the line. */
@keyframes riseUp { from { opacity: 0; transform: translateY(calc(-100% + 20px)); } to { opacity: 1; transform: translateY(-100%); } }
@keyframes fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes clipUp { from { opacity: 0; transform: translateY(104%); } to { opacity: 1; transform: translateY(0); } }
@keyframes draw   { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
@keyframes pop    { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: scale(1); } }
@keyframes deviceIn { from { opacity: 0; transform: translateY(48px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes phoneIn  { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
@keyframes segA { from { stroke-dashoffset: 105.56; } to { stroke-dashoffset: 0; } }
@keyframes segB { from { stroke-dashoffset: 467.47; } to { stroke-dashoffset: 0; } }
@keyframes segC { from { stroke-dashoffset: 180.96; } to { stroke-dashoffset: 0; } }
@keyframes glareDrift { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes spinSlow { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes armSwing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(6deg); } }
@keyframes antPulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes tagFill { 0%, 4% { fill: #fff; } 6%, 11% { fill: #14284C; } 13%, 100% { fill: #fff; } }
@keyframes tagText { 0%, 4% { fill: #5D6675; } 6%, 11% { fill: #fff; } 13%, 100% { fill: #5D6675; } }
@keyframes runDot {
  0% { offset-distance: 0%; opacity: 0; }
  1.5% { opacity: 1; }
  13% { offset-distance: 100%; opacity: 1; }
  14.5% { opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes ringPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20,40,76,.35); }
  50% { box-shadow: 0 0 0 .9cqw rgba(20,40,76,0); }
}
@keyframes cursorRun {
  0%, 8% { transform: translate(0, 0); opacity: 0; }
  13% { opacity: 1; }
  40% { transform: translate(27cqw, 6.4cqw); }
  48% { transform: translate(27cqw, 6.4cqw) scale(.8); }
  55% { transform: translate(27cqw, 6.4cqw) scale(1); }
  90% { transform: translate(27cqw, 6.4cqw); opacity: 1; }
  100% { opacity: 0; }
}
@keyframes chipHit {
  0%, 42% { background: #14284C; }
  48%, 58% { background: #0B1B36; }
  64%, 100% { background: #14284C; }
}

/* Entry. The markup carries the finished state; .is-armed is added by
   script.js and is the only thing that hides anything, so with JavaScript off
   the page renders complete. DESIGN.md 7. */
.is-armed { opacity: 0; }
.reveal.in-view { animation: rise 1s var(--d, 0s) both; }
.spine__label--up.reveal.in-view { animation: riseUp 1s var(--d, 0s) both; }
.reveal--fade.in-view { animation: fade .9s var(--d, 0s) both; }
.reveal--clip.in-view { animation: clipUp 1s var(--d, 0s) var(--ease-out) both; }
.reveal--device.in-view { animation: deviceIn 1.25s var(--d, .54s) var(--ease-out) both; }
.reveal--phone.in-view { animation: phoneIn 1.1s var(--d, .88s) var(--ease-out) both; }

/* These animate geometry, not opacity, so they arm by resetting the dash
   offset rather than by going transparent. */
.reveal--draw.is-armed, .reveal--segA.is-armed,
.reveal--segB.is-armed, .reveal--segC.is-armed { opacity: 1; }
.reveal--draw.is-armed { stroke-dashoffset: 1600; }
.reveal--segA.is-armed { stroke-dashoffset: 105.56; }
.reveal--segB.is-armed { stroke-dashoffset: 467.47; }
.reveal--segC.is-armed { stroke-dashoffset: 180.96; }
.reveal--draw.in-view { animation: draw 1.7s cubic-bezier(.42, 0, .3, 1) both; }
.reveal--segA.in-view { animation: segA .9s cubic-bezier(.3, 0, .2, 1) both; }
.reveal--segB.in-view { animation: segB 1.15s .34s cubic-bezier(.3, 0, .2, 1) both; }
.reveal--segC.in-view { animation: segC .95s .78s cubic-bezier(.3, 0, .2, 1) both; }
.reveal--pop.in-view { animation: pop .5s var(--d, 0s) both; }

/* Loops. Paused unless the scene is on screen. */
.mac__glare { animation: glareDrift 14s ease-in-out infinite; }
.ui__cursor { animation: cursorRun 7.5s 1.4s ease-in-out infinite; }
.ui__btn--go { animation: chipHit 7.5s 1.4s ease-in-out infinite; }
/* Each figure carries its own --dur and --d, so no two are in phase. Six
   figures moving together reads as a broken animation. */
.arm { animation: armSwing var(--dur, 3.8s) var(--d, 0s) ease-in-out infinite; transform-box: fill-box; }
.ant { animation: antPulse var(--dur, 3s) var(--d, 0s) ease-in-out infinite; transform-box: fill-box; }
[data-anim="tagFill"] { animation: tagFill var(--dur, 13.5s) var(--d, 0s) linear infinite; }
[data-anim="tagText"] { animation: tagText var(--dur, 13.5s) var(--d, 0s) linear infinite; }
.packet {
  animation: runDot var(--dur, 13s) var(--d, 0s) linear infinite;
  transform-box: fill-box; transform-origin: 50% 50%;
  offset-anchor: center; offset-rotate: 0deg;
}
.ringPulse { animation: ringPulse 2.6s ease-in-out infinite; }

[data-scene]:not(.is-running) .arm,
[data-scene]:not(.is-running) .ant,
[data-scene]:not(.is-running) [data-anim],
[data-scene]:not(.is-running) .packet,
[data-scene]:not(.is-running) .ringPulse,
[data-scene]:not(.is-running) .ui__cursor,
[data-scene]:not(.is-running) .ui__btn--go,
[data-scene]:not(.is-running) .mac__glare { animation-play-state: paused; }

/* The reference has no reduced-motion block. It should. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    /* Zeroing duration alone is not enough. The entry animations use fill-mode
       both, so a delayed one holds its from state, opacity 0, for the whole
       delay: .reveal--device sat invisible for 540ms with motion reduced. */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }
  .is-armed { opacity: 1; }
  .donut__spin, .mac__glare, .ui__cursor { animation: none; }
  .packet { display: none; }
}

/* ===== RESPONSIVE ========================================================
   Fluid throughout. The only real breakpoint is the header, whose three
   column grid crowds on a narrow phone. */
@media (max-width: 620px) {
  .hdr__inner { grid-template-columns: auto 1fr; height: 62px; }
  .hdr__nav { display: none; }
  .hdr__logo { justify-self: start; }
  .iphone { bottom: -26px; }
}
@media (max-width: 420px) {
  .hdr__cta { font-size: 12.5px; padding: 8px 14px; }
  .legend__pct { font-size: 26px; min-width: 62px; }
  .limit { grid-template-columns: 1fr; gap: 10px; }
}

/* ===== COMPANY PAGES =====
   blog, brand, status, terms, privacy, thank you, 404. Same tokens and the
   same header and footer as the homepage. */
.page { padding: clamp(56px, 7vw, 96px) var(--gutter) clamp(48px, 6vw, 80px); }
.page__inner { max-width: 760px; margin: 0 auto; }
.page h1 {
  margin: 0 0 18px; font-size: clamp(30px, 4vw, 50px); font-weight: 600;
  line-height: 1.06; letter-spacing: -0.036em; color: var(--ink);
}
.page__lede {
  margin: 0 0 34px; font-size: 18px; line-height: 1.55;
  letter-spacing: -0.012em; color: var(--slate); text-wrap: pretty;
}
.page h2 {
  margin: 34px 0 10px; font-size: clamp(19px, 1.8vw, 23px); font-weight: 600;
  letter-spacing: -0.028em; color: var(--ink);
}
.page p, .page li {
  font-size: 16.5px; line-height: 1.6; letter-spacing: -0.01em; color: var(--slate);
}
.page p { margin: 0 0 14px; }
.page ul { margin: 0 0 14px; padding-left: 20px; }
.page li { margin-bottom: 8px; }
.page__meta { margin-top: 34px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--grey-light); }

/* Status rows. Hairlines here are page furniture, so they use --line, and
   they are the one list on the site that needs a rule to read as a table. */
.status-row {
  display: grid; grid-template-columns: 10px 1fr auto;
  align-items: center; gap: 14px; padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16.5px; color: var(--ink);
}
.status-row:first-child { border-top: 1px solid var(--line); }
.status-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--navy); }
.status-dot--live { opacity: 1; }
.status-dot--build { opacity: .55; }
.status-dot--planned { opacity: .22; }
.status-state {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grey);
}
.status-state--live { color: var(--navy); }

/* Centred single-message pages: thank you and 404. */
.msg {
  min-height: 72vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 60px var(--gutter);
}
.msg__code {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--navy); margin-bottom: 20px;
}
.msg h1 { margin: 0 0 16px; font-size: clamp(28px, 4vw, 44px); font-weight: 600; line-height: 1.08; letter-spacing: -0.034em; }
.msg p { margin: 0 0 30px; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--slate); }
.msg__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* The routed path is a desktop drawing. Below this the 1200 by 300 box is too
   short to hold four absolutely placed labels, so they become a plain list
   under the curve rather than piling onto it. */
@media (max-width: 760px) {
  .spine__label {
    position: static; transform: none !important; max-width: none;
  }
  .spine__labels {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 20px; margin-top: 26px;
  }
  .spine__label--up.reveal.in-view { animation: rise 1s var(--d, 0s) both; }
}
@media (max-width: 460px) {
  .spine__labels { grid-template-columns: 1fr; gap: 18px; }
  .donut { max-width: 268px; }
}

/* ===== LIQUID GOLD =======================================================
   Options A to D from the approved preview. At most one animated treatment
   in any given visual area, so B's hover sweep and C's ambient sweep never
   sit together. */

/* A, foil gradient text. Wordmark and large gold headline moments. */
.gold-foil {
  background: linear-gradient(180deg,
    var(--g-mid) 0%, var(--g-light) 20%, var(--g-glint) 32%,
    var(--g-base) 48%, var(--g-shadow) 64%, var(--g-base) 80%, var(--g-mid) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline-block;
}

/* At wordmark size the glint band lands mid-letter and washes out on white,
   so the small variant drops it and keeps the darker bands. */
.gold-foil--sm {
  background: linear-gradient(180deg,
    var(--g-mid) 0%, var(--g-light) 14%, var(--g-base) 34%,
    var(--g-shadow) 62%, var(--g-base) 84%, var(--g-mid) 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* B, poured button. Primary gold CTAs. */
.btn--gold {
  position: relative; overflow: hidden;
  color: var(--g-ink); border: none;
  background: linear-gradient(180deg, var(--g-mid) 0%, var(--g-base) 55%, #A9791F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -3px 5px rgba(92,63,18,.35),
    0 10px 24px -10px rgba(140,100,30,.6);
}
.btn--gold::after {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .9s ease;
}
.btn--gold:hover { color: var(--g-ink); transform: translateY(-2px); }
.btn--gold:hover::after { left: 130%; }

/* C, ambient shine sweep. Small tags and dividers only. */
.gold-shine {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--g-base) 0%, var(--g-mid) 50%, var(--g-base) 100%);
  color: var(--g-ink);
}
.gold-shine::after {
  content: ""; position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.65) 50%, transparent 80%);
  transform: skewX(-20deg);
  animation: goldSweep 3.6s ease-in-out infinite;
}
@keyframes goldSweep { 0% { left: -75%; } 35% { left: 130%; } 100% { left: 130%; } }

/* D, liquid accent dot. Small circular gold accents. */
.gold-dot {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%,
    var(--g-glint) 0%, var(--g-mid) 30%, var(--g-base) 62%, var(--g-shadow) 100%);
  box-shadow: 0 1px 2px rgba(92,63,18,.45);
}

@media (prefers-reduced-motion: reduce) {
  .gold-shine::after { animation: none; display: none; }
  .btn--gold::after { display: none; }
}

/* ===== WURA PAGE =========================================================
   One background throughout, no per-section colour blocks, no mono eyebrow
   labels. Type sizing follows the site's existing scale, not the mockup's.
   Gold leads on this page rather than accenting: every button is gold, and
   gold family text uses --g-shadow, never --g-base, which only clears 3:1 on
   white and fails AA at body and label sizes. --g-base stays on surfaces,
   borders and graphics, where the ratio does not apply. */
.wura-hero { padding-top: clamp(48px, 6vw, 84px); }

.wura-h1 { margin: 0; }
.wura-h1__lead {
  display: block;
  font-size: clamp(40px, 6.4vw, 78px); font-weight: 600;
  line-height: 1.02; letter-spacing: -0.04em; color: var(--ink);
}
/* Only the proper noun takes the foil. The full sentence in gradient text
   would put the glint band across a whole paragraph of headline, which washes
   out on white. DESIGN.md 3.1. */
.wura-h1__rest {
  display: block; margin: clamp(14px, 1.6vw, 20px) auto 0; max-width: 24ch;
  font-size: clamp(21px, 2.6vw, 34px); font-weight: 500;
  line-height: 1.2; letter-spacing: -0.028em; color: var(--ink);
  text-wrap: balance;
}
.wura-sub {
  margin: 24px auto 0; max-width: 56ch;
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55;
  letter-spacing: -0.012em; color: var(--slate); text-wrap: pretty;
}
.wura-line {
  margin: clamp(26px, 3vw, 38px) auto 0; max-width: 46ch;
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 500; line-height: 1.3; letter-spacing: -0.032em; color: var(--ink);
  text-wrap: pretty;
}
.wura-actions {
  margin-top: 32px; display: flex; justify-content: center;
  align-items: center; gap: 12px; flex-wrap: wrap;
}
.wura-note {
  margin: 18px auto 0; max-width: 54ch;
  font-size: 14px; line-height: 1.55; color: var(--slate);
  text-align: center;
}

/* The secondary button. Gold family so the page keeps its rule, but outlined
   rather than poured so the hierarchy against .btn--gold is unmistakable. */
.btn--gold-ghost {
  color: var(--g-shadow);
  border: 1.5px solid var(--g-base);
  background: transparent;
}
.btn--gold-ghost:hover {
  color: var(--g-shadow); border-color: var(--g-shadow);
  background: rgba(232, 182, 91, .12);
  transform: translateY(-2px);
}

.stage { max-width: 1000px; margin: clamp(40px, 5vw, 68px) auto 0; }

/* ===== BROWSER CHROME ===================================================== */
.browser {
  max-width: 640px; margin: 0 auto;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; text-align: left;
  box-shadow: 0 30px 60px -34px rgba(11, 27, 54, .22);
}
.browser--wide { max-width: 100%; }
.browser__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-faint);
}
.browser__dots { display: flex; gap: 6px; }
.browser__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.browser__addr {
  flex: 1; text-align: center; border-radius: 6px; padding: 6px 12px;
  background: var(--wash); color: var(--grey);
  font-family: var(--mono); font-size: 12px;
}

/* ===== VOICE AND VIDEO CALL ==============================================
   The hero mockup. CSS and one inline SVG, no video file, because most of
   this page's traffic arrives on a phone from social. */
.vcall {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 14px; padding: 14px;
  background: var(--wash-cool);
}
.vcall__video {
  position: relative; overflow: hidden; border-radius: 10px;
  min-height: clamp(210px, 23vw, 280px);
  background: #F1E3CB;
}
/* An illustration, deliberately not a photograph. A rendered face on a page
   with no clients yet reads as proof this product does not have. DESIGN.md 2. */
.vcall__figure { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vcall__tag {
  position: absolute; left: 12px; bottom: 12px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(11, 11, 15, .62); color: var(--white);
  font-size: 12px; font-weight: 500; letter-spacing: -0.005em;
}
.vcall__side {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 18px 16px; border-radius: 10px;
  background: var(--white); border: 1px solid var(--line-faint);
}
.vcall__who { display: flex; align-items: center; gap: 9px; }
.vcall__orb {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%,
    var(--g-glint) 0%, var(--g-mid) 30%, var(--g-base) 62%, var(--g-shadow) 100%);
  animation: orbPulse 2.8s ease-in-out infinite;
}
.vcall__name { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.vcall__say {
  margin: 0; font-size: 15px; line-height: 1.5;
  letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty;
}
/* The slot Wura is proposing. Interface, like the rest of this mockup, and
   covered by the disclaimer under it: no figure here is a measurement. */
.vcall__slot {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 14px; border-radius: 9px;
  background: var(--wash); border-left: 3px solid var(--g-base);
}
.vcall__slot-k { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.vcall__slot-v { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.vcall__ctrls { margin-top: auto; display: flex; gap: 8px; padding-top: 6px; }
.vcall__ctrl { width: 28px; height: 28px; border-radius: 50%; }
.vcall__ctrl--on { background: var(--track); border: 1px solid var(--line); }
.vcall__ctrl--end { background: var(--navy-deep); }

/* The "speaking" cue. Bars carry their own height and their own --d and
   --dur, so no two are in phase: eight bars moving together reads as a
   loading spinner, not a voice. */
.wave { display: flex; align-items: center; gap: 4px; height: 30px; }
.wave i {
  display: block; width: 3px; border-radius: 999px;
  background: linear-gradient(180deg, var(--g-mid), var(--g-base));
  transform-origin: center;
  animation: waveBar var(--dur, 1.1s) var(--d, 0s) ease-in-out infinite;
}
.wave i:nth-child(1)  { height: 12px; }
.wave i:nth-child(2)  { height: 22px; }
.wave i:nth-child(3)  { height: 30px; }
.wave i:nth-child(4)  { height: 17px; }
.wave i:nth-child(5)  { height: 26px; }
.wave i:nth-child(6)  { height: 11px; }
.wave i:nth-child(7)  { height: 20px; }
.wave i:nth-child(8)  { height: 14px; }
.wave i:nth-child(9)  { height: 24px; }
.wave i:nth-child(10) { height: 16px; }
.wave--lg { height: 44px; gap: 5px; }
.wave--lg i { width: 4px; }
.wave--lg i:nth-child(1)  { height: 18px; }
.wave--lg i:nth-child(2)  { height: 32px; }
.wave--lg i:nth-child(3)  { height: 44px; }
.wave--lg i:nth-child(4)  { height: 25px; }
.wave--lg i:nth-child(5)  { height: 38px; }
.wave--lg i:nth-child(6)  { height: 16px; }
.wave--lg i:nth-child(7)  { height: 29px; }
.wave--lg i:nth-child(8)  { height: 21px; }
.wave--lg i:nth-child(9)  { height: 35px; }
.wave--lg i:nth-child(10) { height: 23px; }

@media (max-width: 700px) {
  .vcall { grid-template-columns: 1fr; }
  .vcall__video { min-height: 200px; }
}

/* ===== PROBLEM: THE DEAD END =============================================
   The "before" visual. Grey, and completely static: nothing in this block
   animates, because nothing in the situation it depicts is happening. That
   stillness is what the transformation section is contrasted against, and it
   is why no rule below gives it a keyframe. */
.deadend {
  max-width: 680px; margin: clamp(34px, 4vw, 50px) auto 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 22px; align-items: center; text-align: left;
  padding: 24px; border-radius: 12px;
  background: var(--wash); border: 1px solid var(--line-faint);
}
.deadend__form { display: flex; flex-direction: column; gap: 14px; }
.deadend__row { display: flex; flex-direction: column; gap: 7px; }
.deadend__lab { width: 62px; height: 6px; border-radius: 999px; background: var(--line-soft); }
.deadend__lab--sm { width: 44px; }
.deadend__lab--lg { width: 78px; }
.deadend__field {
  height: 34px; border-radius: 7px;
  background: var(--white); border: 1px solid var(--line-soft);
}
.deadend__field--tall { height: 62px; }
.deadend__btn {
  align-self: flex-start; margin-top: 4px;
  padding: 9px 20px; border-radius: 999px;
  background: var(--line-soft); color: var(--grey-faint);
  font-size: 13.5px; font-weight: 500;
}
.deadend__after { display: flex; flex-direction: column; gap: 12px; }
.deadend__state {
  margin: 0; font-size: 16px; line-height: 1.45;
  letter-spacing: -0.012em; color: var(--slate);
}
.deadend__wait {
  margin: 0; display: flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--slate);
}
.deadend__dots { display: flex; gap: 4px; }
.deadend__dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--grey-faint);
}
@media (max-width: 620px) {
  .deadend { grid-template-columns: 1fr; gap: 18px; }
}

/* ===== TRANSFORMATION: WURA ENGAGING =====================================
   The contrast shift. Same white page, but gold, warm shadow and movement
   against the grey stillness above it. */
.engage {
  max-width: 900px; margin: clamp(34px, 4vw, 52px) auto 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; overflow: hidden;
  border-radius: 16px; border: 1px solid var(--g-light);
  background: var(--white);
  box-shadow: 0 34px 70px -40px rgba(140, 100, 30, .5);
  text-align: left;
}
.engage__voice {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(22px, 3vw, 32px);
}
.engage__line {
  margin: 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.45;
  letter-spacing: -0.018em; color: var(--ink); text-wrap: pretty;
}
/* The demo Wura is putting on screen. Structure only, never figures: an empty
   frame of what a service looks like is honest, a populated one is not. */
.engage__screen {
  position: relative;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--wash-cool); border-left: 1px solid var(--line-faint);
}
.engage__screen-bar { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.engage__screen-bar i {
  display: block; height: 8px; border-radius: 999px; background: var(--line-soft);
}
.engage__screen-bar i:first-child { width: 58%; }
.engage__screen-bar i:last-child { width: 34%; }
.engage__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.engage__items li {
  display: flex; align-items: center; gap: 11px;
  font-size: 15px; letter-spacing: -0.012em; color: var(--ink);
}
.gold-dot--sm { width: 9px; height: 9px; }
/* Wura walking the visitor down the list. The highlight rides the items
   themselves rather than a cursor at measured offsets, which had to be
   re-derived from item height and gap on every type change. */
.engage__items li {
  padding: 8px 12px; margin-left: -12px; border-radius: 8px;
  animation: engageRead 6.6s var(--d, 0s) ease-in-out infinite;
}
.engage__items li:nth-child(1) { --d: 0s; }
.engage__items li:nth-child(2) { --d: 2.2s; }
.engage__items li:nth-child(3) { --d: 4.4s; }
@media (max-width: 700px) {
  .engage { grid-template-columns: 1fr; }
  .engage__screen { border-left: none; border-top: 1px solid var(--line-faint); }
}

/* ===== HOW IT WORKS: THE STEP FLOW =======================================
   Numerals on one rail, a short label under each. */
.flow {
  list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0;
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.flow--five { grid-template-columns: repeat(5, 1fr); }
/* The numerals sit at the left of each column, not its centre, so the rail
   runs from the first numeral's centre to the last one's. The subtrahend is
   the total gap width: three 28px gaps at four columns, four at five. */
.flow__rail {
  position: absolute; top: 21px; height: 2px;
  left: 22px; right: calc((100% - 84px) / 4 - 22px);
  background: linear-gradient(90deg, var(--g-base), var(--g-mid), var(--g-base));
}
.flow--five .flow__rail { right: calc((100% - 112px) / 5 - 22px); }
.flow__step { position: relative; display: flex; flex-direction: column; gap: 12px; }
.flow__num {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); border: 1.5px solid var(--line);
  font-family: var(--mono); font-size: 13px; color: var(--g-shadow);
}
.flow__label { font-weight: 600; font-size: 19px; letter-spacing: -0.032em; }
.flow__body { font-size: 15px; line-height: 1.5; color: var(--slate); }

/* Five columns crowd before four do, so the stack comes earlier than the
   760px this block used when the flow had four steps. */
@media (max-width: 900px) {
  .flow, .flow--five { grid-template-columns: 1fr; gap: 0; }
  .flow__rail, .flow--five .flow__rail {
    top: 8px; bottom: 8px; left: 21px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg, var(--g-base), var(--g-mid), var(--g-base));
  }
  .flow__step {
    display: grid; grid-template-columns: 44px 1fr;
    column-gap: 18px; row-gap: 4px; padding-bottom: 28px;
  }
  .flow__step:last-child { padding-bottom: 0; }
  .flow__num { grid-row: 1 / span 2; }
  .flow__label, .flow__body { grid-column: 2; }
}

/* ===== LIFECYCLE: THE JOURNEY ============================================
   The rail is grey up to the booking and gold after it, so the eye reads the
   argument before the copy does: everyone else stops at the third node. */
.arc {
  --arc-gap: 24px;
  list-style: none; margin: clamp(40px, 5vw, 60px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--arc-gap);
  text-align: left;
}
.arc__stop { position: relative; display: flex; flex-direction: column; gap: 10px; }
.arc__node {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--white); border: 2px solid var(--line-strong);
}
.arc__stop--pivot .arc__node,
.arc__stop--on .arc__node {
  border-color: var(--g-base);
  background: radial-gradient(circle at 35% 30%,
    var(--g-glint) 0%, var(--g-mid) 30%, var(--g-base) 62%, var(--g-shadow) 100%);
}
/* The outgoing segment. Grey out of the first two stops, gold out of the
   pivot and everything after it. */
.arc__stop::after {
  content: ""; position: absolute; top: 8px; left: 26px;
  width: calc(100% - 26px + var(--arc-gap)); height: 2px;
  background: var(--line-strong);
}
.arc__stop--pivot::after,
.arc__stop--on::after {
  background: linear-gradient(90deg, var(--g-base), var(--g-mid));
}
.arc__stop:last-child::after { display: none; }
.arc__label { font-weight: 600; font-size: 18px; letter-spacing: -0.03em; color: var(--ink); }
.arc__body { font-size: 14.5px; line-height: 1.5; color: var(--slate); }
.arc__aside { font-size: 13px; line-height: 1.45; color: var(--slate); }

@media (max-width: 900px) {
  .arc { grid-template-columns: 1fr; gap: 0; }
  .arc__stop {
    display: grid; grid-template-columns: 18px 1fr;
    column-gap: 20px; row-gap: 5px; padding-bottom: 26px;
  }
  .arc__stop:last-child { padding-bottom: 0; }
  .arc__node { grid-row: 1 / -1; align-self: start; margin-top: 4px; }
  .arc__label, .arc__body, .arc__aside { grid-column: 2; }
  .arc__stop::after {
    top: 26px; bottom: 4px; left: 8px;
    width: 2px; height: auto;
  }
  .arc__stop--pivot::after,
  .arc__stop--on::after {
    background: linear-gradient(180deg, var(--g-base), var(--g-mid));
  }
}

/* ===== GOVERNANCE: THE AUTONOMY SLIDER ===================================
   A real range input, not a picture of one, so it is keyboard operable and
   announces itself. script.js only swaps the panel text: with JavaScript off
   the control still renders on its middle setting with that setting's copy
   already in the markup. */
.gov { max-width: 620px; margin: clamp(34px, 4vw, 48px) auto 0; }
.gov__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; background: transparent; cursor: pointer;
}
.gov__range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--g-base), var(--g-mid), var(--g-base));
}
.gov__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    var(--g-glint) 0%, var(--g-mid) 30%, var(--g-base) 62%, var(--g-shadow) 100%);
  border: 2px solid var(--white);
  box-shadow: 0 3px 10px -3px rgba(92, 63, 18, .7);
}
.gov__range::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--g-base), var(--g-mid), var(--g-base));
}
.gov__range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    var(--g-glint) 0%, var(--g-mid) 30%, var(--g-base) 62%, var(--g-shadow) 100%);
  border: 2px solid var(--white);
  box-shadow: 0 3px 10px -3px rgba(92, 63, 18, .7);
}
.gov__range:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; border-radius: 999px; }
.gov__scale {
  margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr;
  font-size: 13px; color: var(--slate);
}
.gov__scale span:nth-child(2) { text-align: center; }
.gov__scale span:last-child { text-align: right; }
.gov__panel {
  margin-top: 22px; padding: 22px 24px; border-radius: 12px;
  background: var(--wash); border: 1px solid var(--line-faint);
  text-align: left;
}
.gov__title { margin: 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.gov__desc { margin: 0; font-size: 16.5px; line-height: 1.55; letter-spacing: -0.01em; color: var(--slate); }
@media (max-width: 460px) {
  .gov__scale { font-size: 11.5px; }
}

/* ===== PROOF: THE EMPTY FRAME ============================================
   Marked in progress without inventing anything. The slots stay empty until
   there is something measured to put in them. DESIGN.md 2. */
.tag {
  display: inline-block; padding: 7px 15px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
}
.pending {
  list-style: none; margin: clamp(32px, 4vw, 46px) auto 0; padding: 0;
  max-width: 760px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.pending li { display: flex; flex-direction: column; gap: 10px; }
.pending__slot {
  height: 62px; border-radius: 10px;
  border: 1px dashed var(--line-strong); background: var(--wash-cool);
}
.pending__label { font-size: 13.5px; color: var(--slate); }
@media (max-width: 620px) {
  .pending { grid-template-columns: 1fr; }
  .pending__slot { height: 46px; }
}

/* ===== WAITLIST ==========================================================
   Interim. The end state for this spot is talking to the Wura voice agent in
   place, which is the next project phase. DESIGN.md 9. */
.signup {
  margin: clamp(28px, 3.5vw, 40px) auto 0; max-width: 490px;
  display: flex; gap: 10px;
}
.signup input {
  flex: 1; min-width: 0; padding: 14px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white);
  font-family: var(--font); font-size: 15px; color: var(--ink);
}
.signup input:focus {
  outline: none; border-color: var(--g-base);
  box-shadow: 0 0 0 3px rgba(198, 144, 46, .18);
}
.signup .btn { cursor: pointer; }
/* The booking route stays available and stays visually secondary: body text,
   not a button. */
.signup__aside { margin: 18px auto 0; font-size: 15px; color: var(--slate); }
.signup__aside a { color: var(--g-shadow); text-decoration: underline; text-underline-offset: 2px; }
.signup__aside a:hover { color: var(--g-ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 560px) {
  .signup { flex-direction: column; }
  .signup .btn { justify-content: center; }
}

/* ===== WURA MOTION =======================================================
   Every loop here is gated by [data-scene] like the rest of the site, so
   nothing animates off screen. DESIGN.md 11. The waveform ends its cycle at
   full height, so the reduced motion block below leaves a natural static
   waveform rather than a row of collapsed stubs. */
@keyframes waveBar {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(.3); }
}
@keyframes orbPulse {
  0%   { box-shadow: 0 0 0 0 rgba(198, 144, 46, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(198, 144, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(198, 144, 46, 0); }
}
@keyframes engageRead {
  0%, 4%    { background: transparent; }
  9%, 26%   { background: rgba(232, 182, 91, .24); }
  33%, 100% { background: transparent; }
}

[data-scene]:not(.is-running) .wave i,
[data-scene]:not(.is-running) .vcall__orb,
[data-scene]:not(.is-running) .engage__items li { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .wave i, .vcall__orb { animation: none; }
  .engage__items li { animation: none; }
}

/* The homepage's route to Wura. Poured gold at pill size, sitting above the
   headline on its own spacing. Not a mono eyebrow label. DESIGN.md 7.0. */
.wura-tag {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 auto 24px; padding: 8px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
  position: relative; overflow: hidden;
  color: var(--g-ink); border: none;
  background: linear-gradient(180deg, var(--g-mid) 0%, var(--g-base) 55%, #A9791F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -3px 5px rgba(92,63,18,.35),
    0 8px 18px -10px rgba(140,100,30,.6);
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.wura-tag::after {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); transition: left .9s ease;
}
.wura-tag:hover {
  color: var(--g-ink); transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -3px 5px rgba(92,63,18,.35),
    0 12px 24px -10px rgba(140,100,30,.7);
}
.wura-tag:hover::after { left: 130%; }
.wura-tag__arrow { transition: transform .25s ease; }
.wura-tag:hover .wura-tag__arrow { transform: translateX(3px); }
/* The tag adds a row above the headline, so the hero opens a little higher
   to keep the composition where it was. */
.hero { padding-top: clamp(48px, 6.4vw, 84px); }

@media (prefers-reduced-motion: reduce) {
  .wura-tag::after { display: none; }
}