/* ==========================================================================
   Trojected marketing site — styles.css
   Sections: 1 tokens · 2 base · 3 header · 4 hero · 5 section skeletons ·
             6 footer · 7 motion / reduced motion · 8 breakpoints
   Measurements come from the Wix screenshots (2× captures of a 1723 px
   viewport); see DESIGN_PLAN.md §3.
   ========================================================================== */

/* 0. Fonts (self-hosted, latin subset, variable weight; PAGE_AUDIT row 26) --- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --black: #000000;
  --white: #ffffff;
  --gray: #9a9a9a;          /* body / subtitles on black */
  --gray-light: #bebebe;    /* lighter body (hero subtitle, pages) */
  --line: #3a3a3a;          /* neutral 1px borders */

  --blue: #3d7fff;
  --green: #2ee06e;
  --yellow: #facf33;
  --orange: #ff8c1a;
  --red: #ff423a;
  --purple: #9700ff;
  --pink: #ff00d0;

  /* hero underline / divider / CTA underline: fades out at both ends */
  --rainbow-linear: linear-gradient(90deg,
      transparent 0%, var(--yellow) 8%, var(--orange) 22%, var(--red) 36%,
      var(--pink) 50%, var(--purple) 63%, var(--blue) 77%, var(--green) 90%,
      transparent 100%);
  /* card borders: clockwise from the left edge */
  --rainbow-conic: conic-gradient(from 270deg,
      var(--blue), var(--green), var(--yellow), var(--orange),
      var(--red), var(--pink), var(--purple), var(--blue));

  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* type scale: the vw values are the reference sizes over the 1723 px viewport */
  --fs-h1: clamp(2.75rem, 6.8vw, 7.3rem);         /* ≈117 px */
  --fs-h2: clamp(2.125rem, 4.64vw, 5rem);          /* 80 px */
  --fs-sub: clamp(0.9375rem, 1.51vw, 1.625rem);    /* 26 px */
  --fs-hero-sub: clamp(0.9375rem, 1.6vw, 1.75rem); /* 28 px */
  --fs-body: clamp(1rem, 1.22vw, 1.3125rem);       /* 21 px */
  --fs-brand: clamp(1.25rem, 1.63vw, 1.75rem);     /* 28 px */
  --fs-footer: 1.0625rem;                          /* 17 px */

  --container: 1336px;
  --gutter: clamp(16px, 5.6vw, 96px);
  --header-h: clamp(60px, 4.6vw, 79px);

  --radius-panel: 24px;
  --radius-card: 18px;
  --radius-step: 14px;
  --radius-badge: 12px;

  /* hero bars */
  --bar-gap: clamp(6px, 3.25vw, 56px);
  --bar-radius: 14px;
  --bar-border: 3.5px;
  --pill-w: 57px;        /* cap; pills are flex-sized to the bar below this */
  --pill-h: clamp(6px, 0.7vw, 12px);
  --pill-gap: 8px;
  --name-h: clamp(1.125rem, 1.62vw, 1.75rem);  /* fixed line box so font-fitting never moves the pills */
  --bar-h3: 64%;   /* outer bars */
  --bar-h2: 59%;
  --bar-h1: 53%;
  --bar-h0: 47%;   /* focused centre bar */
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-weight: 600;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main { flex: 1 0 auto; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 4px; }
.skip-link {                                      /* keyboard users jump past the header (PAGE_AUDIT row 31) */
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--white);
  color: var(--black);
  font-weight: 700;
}
.skip-link:focus { top: 12px; outline-offset: 2px; }
.sr-only {                                        /* visually hidden, read by screen readers (the inert badges' "coming soon", S20) */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
em { color: var(--white); font-style: italic; }

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

/* 3. Header ---------------------------------------------------------------- */
.site-header .container {
  display: flex;
  align-items: center;
  height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand-icon { width: clamp(24px, 1.86vw, 32px); height: auto; }
.brand-name {
  font-size: var(--fs-brand);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
}

/* 4. Hero ------------------------------------------------------------------ */
.hero { padding-bottom: clamp(48px, 6vw, 96px); }

/* the stage shares the panel's box; bars sit on it, outside the panel's clip,
   so their glow can spill past the rounded video */
.hero-stage { position: relative; }

.hero-panel {
  position: relative;
  height: clamp(560px, calc(100svh - var(--header-h) - 12px), 830px);
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: #101010;
  isolation: isolate;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* darkens the lower half so the bars, pills and labels sit on black */
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, 0.5) 26%,
      rgba(0, 0, 0, 0.92) 48%, #000 60%, #000 100%);
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: clamp(36px, 6.5%, 60px) clamp(16px, 4vw, 48px) 0;
}
.hero-title-part { display: inline-block; }
.hero-title {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--white);
}
.hero-sub {
  margin-top: clamp(8px, 0.7vw, 12px);
  font-size: var(--fs-sub);
  font-weight: 700;
  color: #d4d4d4; /* lighter than the section subtitles: it sits on the video */
}
.hero-copy .badge { margin-top: clamp(24px, 3.4vw, 58px); }

.badge {
  display: inline-block;
  border-radius: 8px;
  line-height: 0;
  transition: transform 0.25s ease;
}
.badge:hover,
.badge:focus-visible { transform: scale(0.94); }
.badge img { height: clamp(46px, 3.4vw, 58px); width: auto; }
.badge[aria-disabled="true"] { cursor: default; }

/* bars: seven columns edge to edge, bottoms flush with the panel */
.bars {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--bar-gap);
  align-items: end;
  pointer-events: none;   /* the list box covers the whole stage; only the bars themselves are interactive */
}
.bar { pointer-events: auto; }
.bar {
  --glow: 0 0 34px color-mix(in srgb, var(--c) 50%, transparent);
  --label-alpha: 0.35;
  --bar-alpha: 0.7;   /* resting opacity: outer bars sit back, centre is full */
  position: relative;
  container-type: inline-size;   /* labels + pills size from the bar's own width (see the @supports block at the end) */
  opacity: var(--bar-alpha);
  height: var(--bar-h3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: clamp(6px, 0.7vw, 12px) 6px clamp(5px, 0.45vw, 8px);
  border-radius: var(--bar-radius);
  border: var(--bar-border) solid #0b0b0b;
  /* clip + no-repeat: otherwise the gradient tiles under the bottom border
     and a sliver of full colour shows there */
  background: linear-gradient(180deg,
      var(--c) 0%,
      color-mix(in srgb, var(--c) 72%, #000) 28%,
      color-mix(in srgb, var(--c) 28%, #000) 58%,
      #050505 78%,
      #050505 100%) no-repeat;
  background-clip: padding-box;
  box-shadow: var(--glow);
  will-change: transform, opacity;
}
.bar[data-d="2"] { height: var(--bar-h2); --label-alpha: 0.55; --bar-alpha: 0.8; --glow: 0 0 36px color-mix(in srgb, var(--c) 55%, transparent); }
.bar[data-d="1"] { height: var(--bar-h1); --label-alpha: 0.8;  --bar-alpha: 0.9; --glow: 0 0 38px color-mix(in srgb, var(--c) 60%, transparent); }
.bar[data-d="0"] {
  height: var(--bar-h0);
  --label-alpha: 1;
  --bar-alpha: 1;
  --glow: 0 0 42px color-mix(in srgb, var(--c) 75%, transparent);
}

.bar-top,
.bar-name {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 700;
  color: var(--white);
  opacity: var(--label-alpha);
}
.bar-top {
  font-size: clamp(0.75rem, 1.28vw, 1.375rem);                   /* 22 px */
  line-height: 1.15;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}
.bar-state,
.bar-score { display: block; width: 100%; white-space: nowrap; overflow: hidden; }
.bar-name {
  font-size: clamp(0.8125rem, 1.28vw, 1.375rem);                 /* 22 px */
  height: var(--name-h);
  line-height: var(--name-h);
}
.bar-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5px, 0.55vw, 9px);
  width: 100%;
}
.pills { display: flex; gap: var(--pill-gap); width: 100%; justify-content: center; }
.pill {
  display: block;
  flex: 1 1 0;
  max-width: var(--pill-w);
  height: var(--pill-h);
  border-radius: 99px;
  background: linear-gradient(90deg, #050505 0%, #0d1f4a 35%, var(--blue) 100%);
}
.pill-green { background: linear-gradient(90deg, #050505 0%, #0b2e1a 35%, var(--green) 100%); }

/* rotating label (centre bar) */
.bar-name[data-rotate] {
  transition: opacity 0.26s ease, transform 0.26s ease;
}
.bar-name[data-rotate].is-out { opacity: 0; transform: translateY(-8px); }
.bar-name[data-rotate].is-prep { opacity: 0; transform: translateY(8px); transition: none; }

/* 5. Section skeletons (built out in later sessions) ----------------------- */
.section { padding: clamp(96px, 12vw, 200px) 0; }
.section-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-align: center;
}
.section-sub {
  margin-top: clamp(12px, 1.6vw, 24px);
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--gray);
  text-align: center;
}
/* 5f. CTA: two headline lines over rainbow rules, badge centred below (reference 05-cta.png) */
.cta {
  --cta-indent: clamp(0px, 5.63vw, 97px);         /* line two sits 97 px in, so at 118 px it ends flush with the container's right edge */
  --cta-rule: clamp(7px, 0.81vw, 14px);
  padding-top: clamp(96px, 13.5vw, 232px);
  padding-bottom: clamp(60px, 7vw, 112px);        /* was 72–230 px: the band between the badge and the footer tightened 2026-10-01, a deliberate deviation from 05-cta.png */
}
.cta-title {
  font-size: clamp(2.375rem, 6.85vw, 7.375rem);   /* 118 px */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.cta-line { display: block; }
.cta-line--2 { margin-top: clamp(10px, 1.16vw, 20px); }
.cta-text { display: block; position: relative; z-index: 1; }   /* the letters paint over the rules, so descenders cross them rather than hide behind */
.cta-line--2 .cta-text { padding-left: var(--cta-indent); }
.cta-rule {                                       /* both rules span the full container width */
  display: block;
  height: var(--cta-rule);
  margin-top: clamp(-10px, -0.58vw, -3px);        /* pulled up into the descender space so the text sits close on the rule, the j crossing it as in the reference */
}
.cta-rule--solid {
  border-radius: 999px;
  background: linear-gradient(90deg,
      #FACF33 0%, #FF8C1A 16%, #FF423A 30%, #FF00D0 43%,
      #9700FF 54%, #3D7FFF 67%, #2EE06E 82%, rgba(46, 224, 110, 0) 100%);
}
.cta-rule--dashes {                               /* seven pills on a 7-column grid sharing one continuous gradient */
  --g: clamp(6px, 0.93vw, 16px);
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--g);
}
.cta-rule--dashes i {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
}
.cta-rule--dashes i::before {                     /* the whole row's gradient, shifted left by this pill's slot, so it flows across the gaps */
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * var(--k) * (100% + var(--g)));
  width: calc(700% + 6 * var(--g));
  height: 100%;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 0%, #2EE06E 11%, #3D7FFF 24%, #9700FF 37%,
      #FF00D0 50%, #FF423A 63%, #FF8C1A 77%, #FACF33 92%);   /* only the first pill fades in from black */
}
.cta-rule--dashes i:nth-child(1) { --k: 0; }
.cta-rule--dashes i:nth-child(2) { --k: 1; }
.cta-rule--dashes i:nth-child(3) { --k: 2; }
.cta-rule--dashes i:nth-child(4) { --k: 3; }
.cta-rule--dashes i:nth-child(5) { --k: 4; }
.cta-rule--dashes i:nth-child(6) { --k: 5; }
.cta-rule--dashes i:nth-child(7) { --k: 6; }
.cta-badge { position: relative; margin-top: clamp(36px, 3.7vw, 64px); text-align: center; }
.cta-qr {                                         /* desktop-only QR of the ct=web-qr campaign link (S8); main.js draws and shows it once the App Store URL exists */
  position: absolute;
  top: 50%;
  left: calc(50% + clamp(46px, 3.4vw, 58px) * 1.5 + 28px);   /* the badge is 3:1, so 1.5 × its height is half its width */
  display: block;
  width: 128px;
  height: 128px;
  padding: 8px;
  border-radius: 12px;
  background: var(--white);
  transform: translateY(-50%);
  line-height: 0;
}
/* phones: under ~480 px the 38 px floor no longer fits on one line, so the type follows the container instead.
   Line two is 10.50 em wide and its indent 0.82 em, so container / 11.36 lands it flush with the right end of
   its dash row, the same fit as the 1723 px reference; both rules keep the full container width. */
@media (max-width: 480px) {
  .cta { --cta-indent: 0.822em; }
  .cta-title { font-size: calc((100vw - 2 * var(--gutter)) / 11.36); white-space: nowrap; }
}
.cta-qr[hidden] { display: none; }
.cta-qr svg { display: block; width: 100%; height: 100%; }
@media (max-width: 720px) { .cta-qr { display: none; } }
/* entrance (main.js adds .is-in when the section is ~20 % up the viewport): line one and its solid rule wipe in
   together from the left (1.35 s from 0.25 s); line two and its dash row wipe in together (1.35 s from 1.05 s);
   then the badge rises at 1.95 s. Text and rules share one easing and width so the fronts move together. */
.cta {                                            /* entrance timing in one place (slowed 2026-09-11 at Will's request) */
  --cta-wipe: 1.35s;                              /* each left-to-right sweep */
  --cta-l1: 0.25s;                                /* line one + solid rule start */
  --cta-l2: 1.05s;                                /* line two + dash row start (line one is ~60 % through) */
  --cta-badge: 1.95s;                             /* badge rises as line two finishes */
}
.cta-text, .cta-rule--solid { transition: clip-path var(--cta-wipe) cubic-bezier(0.2, 0.8, 0.2, 1) var(--cta-l1); }
.cta-line--2 .cta-text, .cta-rule--dashes { transition: clip-path var(--cta-wipe) cubic-bezier(0.2, 0.8, 0.2, 1) var(--cta-l2); }   /* line two and its dash row sweep together */
.cta-badge { transition: opacity 0.8s ease var(--cta-badge), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) var(--cta-badge); }
/* the resting clip must be a shape too (a transition to `none` has no in-between values and just snaps);
   the negative top/bottom/left insets keep descenders and glyph overhang unclipped */
.js .cta-text, .js .cta-rule--solid, .js .cta-rule--dashes { clip-path: inset(-0.35em -0.1em -0.35em -0.1em); }
.js .cta:not(.is-in) .cta-text, .js .cta:not(.is-in) .cta-rule--solid, .js .cta:not(.is-in) .cta-rule--dashes { clip-path: inset(-0.35em 100% -0.35em -0.1em); }   /* left-to-right wipes; clip-path so gradients never stretch */
.js .cta:not(.is-in) .cta-badge { opacity: 0; transform: translateY(18px); }

/* 5h. Launch gate (index.html only, while SITE_LOCKED is true in main.js). <html data-gate> holds <main> back
   until main.js has decided; locked, a six-slot code field sits where the page would be. No JS: no gate. */
html.js[data-gate] body > main:not(.gate),
html.js[data-gate] .skip-link { display: none; }
html.js[data-gate=""] .site-footer { display: none; }   /* back once main.js has decided, so the footer never jumps */
.gate {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 6vw, 96px) var(--gutter);
  text-align: center;
}
.gate-label {
  display: block;
  font-size: clamp(1.0625rem, 1.51vw, 1.625rem);
  font-weight: 600;
  color: var(--gray-light);
}
.gate-field {
  --slot: clamp(36px, 11.5vw, 64px);              /* 45 px at 390, 37 px at 320, 64 px from 557 px up */
  --gap: clamp(10px, 1.1vw, 16px);
  --rule: clamp(6px, 0.62vw, 9px);
  position: relative;
  width: calc(6 * var(--slot) + 5 * var(--gap));
  margin: clamp(26px, 2.8vw, 40px) auto 0;
}
.gate-input {                                     /* the one real field: invisible, stretched over the six slots that mirror it */
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;                                /* below 16 px iOS zooms the page on focus */
  cursor: text;
}
.gate-slots { display: grid; grid-template-columns: repeat(6, var(--slot)); gap: var(--gap); }
.gate-slot { position: relative; display: block; }
.gate-slot b {
  display: block;
  height: calc(var(--slot) * 1.22);
  font-size: calc(var(--slot) * 0.98);
  font-weight: 800;
  line-height: calc(var(--slot) * 1.22);
  color: var(--white);
}
.gate-slot i {                                    /* six dashes sharing one continuous rainbow, like the CTA's dash row */
  position: relative;
  display: block;
  height: var(--rule);
  border-radius: 999px;
  overflow: hidden;
  opacity: 0.3;
  transition: opacity 0.2s ease;
}
.gate-slot i::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * var(--k) * (100% + var(--gap)));
  width: calc(600% + 5 * var(--gap));
  height: 100%;
  background: linear-gradient(90deg, #FACF33 0%, #FF8C1A 18%, #FF423A 34%, #FF00D0 50%, #9700FF 64%, #3D7FFF 80%, #2EE06E 100%);
}
.gate-slot.is-filled i,
.gate-input:focus ~ .gate-slots .gate-slot.is-active i { opacity: 1; }
.gate-input:focus ~ .gate-slots .gate-slot.is-active:not(.is-filled)::before {   /* caret in the slot that takes the next digit; with its lit dash it is the focus mark */
  content: "";
  position: absolute;
  left: 50%;
  top: 22%;
  width: 2px;
  height: 50%;
  margin-left: -1px;
  background: var(--white);
  animation: gate-caret 1.1s steps(1) infinite;
}
.gate-field.is-wrong { animation: gate-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
.gate-msg {
  min-height: 1.4em;
  margin-top: clamp(18px, 1.6vw, 24px);
  font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--gray);
}
@keyframes gate-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes gate-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* 5g. Secondary pages: support / privacy / cookies (reference/pages). One centred card under a page title,
   the footer pinned to the bottom of the viewport when the content is short. */
body.page { min-height: 100svh; display: flex; flex-direction: column; }
body.page main { flex: 1 0 auto; }
.page-hero { text-align: center; }
.page-title {
  font-size: var(--fs-h2);                        /* 80 px, like the home section titles */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}
.page-sub {
  margin-top: clamp(12px, 1.2vw, 21px);
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--gray);
}
.page-body { padding-top: clamp(28px, 3vw, 52px); padding-bottom: clamp(48px, 5vw, 80px); }
.page-back { margin-top: clamp(28px, 3vw, 52px); font-size: var(--fs-body); font-weight: 700; }   /* 404: the one link back home */
.page-back a { color: var(--white); text-decoration: underline; text-underline-offset: 0.14em; }
.page-back a:hover { color: var(--gray-light); }
.page-card {                                      /* 1021 px, 3 px conic rainbow frame, black inside */
  position: relative;
  max-width: 1021px;
  margin-inline: auto;
  padding: clamp(18px, 1.4vw, 24px) clamp(20px, 2.1vw, 36px) clamp(22px, 2vw, 34px);
  border: 4px solid transparent;
  border-radius: 16px;
  background: linear-gradient(var(--black), var(--black)) padding-box, var(--rainbow-conic) border-box;
}
.page-card-icon {
  position: absolute;
  top: clamp(18px, 1.85vw, 32px);
  right: clamp(18px, 1.8vw, 31px);
  width: clamp(34px, 2.8vw, 48px);
  height: auto;
  color: var(--white);
}
.page-card h2 {
  padding-right: clamp(50px, 4vw, 70px);          /* keep clear of the icon */
  font-size: clamp(1.5rem, 2.67vw, 2.875rem);     /* 46 px */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.page-card p {
  margin-top: 10px;                               /* runs the card's full inner width, as the reference does */
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  color: var(--gray-light);
}
.page-card h2 + p { margin-top: clamp(6px, 0.5vw, 8px); }
.page-mail { font-weight: 700; color: var(--white); text-decoration: underline; text-underline-offset: 0.12em; }
.page-card .page-card-note,
.page-card .page-card-links {                     /* the small gray line(s) at the foot of the card */
  margin-top: clamp(22px, 1.75vw, 30px);
  font-size: clamp(0.9375rem, 1.05vw, 1.125rem);  /* 18 px */
  font-weight: 500;
  color: var(--gray);
}
.page-card-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; max-width: none; }
.page-card-links a { color: var(--gray); text-decoration: underline; text-underline-offset: 0.12em; }
.page-card-links a:hover, .page-mail:hover { color: var(--white); }
.page-card--plain {                               /* "Questions about your data?": 2 px gray frame, link on the right */
  margin-top: clamp(24px, 2.1vw, 36px);
  padding: clamp(18px, 1.4vw, 24px) clamp(20px, 2.1vw, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  border: 2px solid #555;
  background: none;
}
.page-card--plain p { margin: 0; font-weight: 500; }
.page-card-link { font-size: var(--fs-body); font-weight: 600; color: var(--gray-light); text-decoration: underline; text-underline-offset: 0.14em; }
.page-card-link:hover { color: var(--white); }

/* 5b. Control the Chaos ---------------------------------------------------- */
.chaos { padding-top: clamp(32px, 4.5vw, 72px); padding-bottom: clamp(80px, 10vw, 160px); }
.chaos .section-sub { margin-bottom: clamp(40px, 4.4vw, 76px); }
.chaos-stage {
  display: grid;
  grid-template-columns: minmax(0, clamp(340px, 35.9vw, 618px)) minmax(0, 1fr);   /* 618 px at the reference width, shrinking with the text */
  column-gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.chaos-cards { display: grid; gap: clamp(24px, 2.5vw, 44px); }
.chaos-item { display: grid; position: relative; }
.chaos-item::before {                      /* rainbow glow behind the active box; the box's black fill hides it inside */
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-card);
  background: var(--rainbow-conic);
  filter: blur(22px);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.chaos-card {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 2vw, 34px) clamp(22px, 2.1vw, 36px);
  border: 2px solid transparent;
  border-radius: var(--radius-card);
  background: linear-gradient(var(--black), var(--black)) padding-box, var(--rainbow-conic) border-box;
  transition: opacity 0.45s ease, transform 0.6s ease;
}
.chaos-card h3 {
  font-size: clamp(1.5rem, 2.67vw, 2.875rem);   /* 46 px */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.chaos-card p {
  margin-top: clamp(8px, 0.7vw, 12px);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--gray);
}
.chaos-card p em { color: var(--white); font-style: italic; font-weight: 700; }
.chaos-card-shot { display: none; }             /* phone view only */

.chaos-phone { display: flex; justify-content: center; align-items: center; min-width: 0; }
.phone-stack {
  position: relative;
  height: min(78svh, 790px);
  aspect-ratio: 1000 / 2050;
  max-width: 100%;
}
.phone-stack > picture { position: absolute; inset: 0; }
.phone-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.45s ease;
  filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.08));
}
.phone-shot.is-active { opacity: 1; }

@media (min-width: 721px) {
  .chaos-cards { grid-auto-rows: 1fr; }          /* the three cards are always the same height, whatever wraps (tweaks round, item 2) */
  .js .chaos-card { opacity: 0.4; }              /* inactive cards sit back while the stage is pinned */
  .js .chaos-card.is-active { opacity: 1; }
  .js .chaos-item.is-active::before { opacity: 0.5; }
}
.js .chaos-card:not(.is-in) { opacity: 0; transform: translateY(24px); }   /* entrance, revealed by JS */


/* 5c. See It In Action ------------------------------------------------------ */
.action { padding-top: clamp(32px, 4.5vw, 72px); padding-bottom: clamp(80px, 10vw, 160px); }
.action .section-sub { margin-bottom: clamp(40px, 4.4vw, 76px); }
.action-stage {                                  /* mirror of the chaos stage: phone left, steps right */
  --badge: clamp(40px, 3.54vw, 61px);
  --badge-overhang: calc(var(--badge) / 2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, calc(clamp(400px, 35.9vw, 618px) + var(--badge-overhang)));   /* 400 px floor: the one-line subs need it at 1024 px (tweaks round, item 3) */
  column-gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.action-phone { display: flex; justify-content: center; align-items: center; min-width: 0; }
.frag-stack {                                    /* four cropped fragments of the real screens, stacked; the tallest (A1, 1100×1300) sets the box */
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 1100 / 1300;
  max-height: min(72svh, 640px);
}
.frag-stack > picture { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.frag-shot {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: drop-shadow(0 0 36px rgba(255, 255, 255, 0.07));
}
.frag-shot.is-active { opacity: 1; transform: none; }
.action-steps {
  display: grid;
  gap: clamp(18px, 1.63vw, 28px);
  padding-left: var(--badge-overhang);           /* room for the half of the badge outside each card */
}
.action-item { display: grid; position: relative; }
.action-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;                        /* title over its one-line sub (PAGE_AUDIT row 4) */
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.4vw, 7px);
  min-height: clamp(64px, 5.86vw, 101px);
  padding: clamp(14px, 1.3vw, 22px) clamp(20px, 2.4vw, 40px) clamp(14px, 1.3vw, 22px) clamp(40px, 3.6vw, 62px);
  border: 1px solid #555;
  border-radius: var(--radius-step);
  background: var(--black);
  transition: opacity 0.45s ease, transform 0.6s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}
.action-step h3 {
  font-size: clamp(1.375rem, 2.67vw, 2.875rem);   /* 46 px */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: center;
}
.action-step p {
  max-width: 30em;
  font-size: clamp(0.9375rem, 1.05vw, 1.125rem);  /* 18 px */
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--gray);
}
.step-num {                                      /* rainbow-bordered number, centred on the card's left edge */
  position: absolute;
  left: calc(-1 * var(--badge-overhang));
  top: 50%;
  transform: translateY(-50%);
  width: var(--badge);
  height: var(--badge);
  display: grid;
  place-items: center;
  font-size: clamp(1.25rem, 2.55vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--white);
  border: 2px solid transparent;
  border-radius: var(--radius-badge);
  background: linear-gradient(var(--black), var(--black)) padding-box, var(--rainbow-conic) border-box;
}
@media (min-width: 721px) { .action-step-shot { display: none; } }   /* shots are for the phone layout only */

@media (min-width: 721px) {
  .js .action-step { opacity: 0.4; }
  .js .action-step.is-active {
    opacity: 1;
    border-color: #9a9a9a;
    box-shadow: 0 0 34px rgba(255, 255, 255, 0.08);
  }
}
.js .action-step:not(.is-in) { opacity: 0; transform: translateY(24px); }

/* 5e. Timeline-Smart Features ---------------------------------------------- */
.features { padding-top: clamp(32px, 4.5vw, 72px); padding-bottom: clamp(80px, 10vw, 160px); }
.features .section-sub { margin-bottom: clamp(30px, 3.2vw, 56px); }
.feature-grid {                                   /* featured card across the top, then 3 + 3 */
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: auto repeat(2, minmax(0, 1fr));   /* the two rows of small cards share one height (tweaks round, item 4) */
  gap: clamp(24px, 3vw, 52px) clamp(20px, 2.26vw, 39px);   /* (d) taller row gap: each card reads as a unit */
}
.feature {                                        /* border + icon in the card's own accent */
  --accent: var(--blue);
  /* (a) calm frames: ~60 % accent at the top-left fading to a grayed accent; the icon carries the full colour */
  --accent-head: color-mix(in srgb, var(--accent) 60%, #2a2a2a);
  --accent-tail: color-mix(in srgb, var(--accent) 22%, #202020);
  --i: 0;
  position: relative;
  min-height: clamp(120px, 9.9vw, 170px);
  padding: clamp(18px, 1.57vw, 27px) clamp(22px, 2.1vw, 36px);   /* 170 px tall at the reference width */
  border: 2px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    linear-gradient(135deg, var(--accent-head) 0%, var(--accent-tail) 100%) border-box;
  /* entrance (opacity/transform, staggered by column --i and row --row-delay) + hover glow (box-shadow) */
  --enter-delay: calc(var(--i) * 70ms + var(--row-delay, 0ms));
  transition:
    box-shadow 0.25s ease,
    opacity 0.6s ease var(--enter-delay),
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) var(--enter-delay);
}
@media (hover: hover) {
  .feature:hover {                                /* border to the full accent, glow outside only */
    --accent-head: var(--accent);
    --accent-tail: var(--accent);
    box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .feature.is-settled:hover { transform: translateY(-3px); }   /* lift */
}
.feature.is-settled {                             /* after the entrance: no stagger delays on hover */
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.js .feature:not(.is-in) { opacity: 0; transform: translateY(24px); }   /* each card reveals as its row scrolls in */
.feature-icon .draw {                             /* icon shapes stroke in one after another (--t / --d set per shape by main.js); main.js starts each icon in turn */
  transition: stroke-dashoffset var(--d, 0.45s) ease var(--t, 0s);
}
.feature { grid-column: span 2; }                 /* six small cards, three per row */
.feature--featured {                              /* Priorities: the section's hero, rainbow frame, live demo */
  grid-column: 1 / -1;
  --frame: 3px;
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);  /* wide text column keeps the card short */
  column-gap: clamp(24px, 3.5vw, 60px);
  align-items: center;
  padding: clamp(22px, 1.9vw, 32px) clamp(24px, 2.6vw, 44px);
  border-width: var(--frame);
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    var(--rainbow-conic) border-box;
  box-shadow: 0 0 60px rgba(255, 255, 255, 0.05);
}
@media (hover: hover) {
  .feature--featured:hover {
    background:
      linear-gradient(var(--black), var(--black)) padding-box,
      var(--rainbow-conic) border-box;
    box-shadow: 0 0 70px rgba(255, 255, 255, 0.1);
  }
}
.feature--featured .feature-head .feature-icon { width: clamp(34px, 2.55vw, 44px); }
.feature.feature--featured h3 { font-size: clamp(1.75rem, 3.2vw, 3.5rem); }   /* 56 px, outranks .feature h3 */
.feature .feature-lead {                          /* outranks .feature p */
  max-width: none;
  margin-top: clamp(10px, 0.9vw, 14px);
  font-size: clamp(1.125rem, 1.51vw, 1.625rem);                            /* 26 px */
  font-weight: 700;
  color: var(--white);
}
.feature--featured .feature-main > p:last-child { max-width: 46em; }

/* live demo: three mini timelines, the app's TimelineCellV2 in miniature (label inside the gradient when
   the bar is tall enough, else above it; deadline + goal pills; name on black; white-to-colour when
   ahead), stepping through a scripted loop and re-ranking by priority (main.js) */
.priority-demo { --c-hint: var(--white); display: grid; gap: clamp(10px, 0.9vw, 14px); justify-items: center; }
.pd-stage {
  --g: clamp(10px, 1.2vw, 18px);
  position: relative;
  width: 100%;
  max-width: 290px;
  height: clamp(136px, 9.3vw, 156px);
}
.pd-bar {                                          /* one cell column; --slot = rank, highest priority left */
  position: absolute;
  bottom: 0;
  left: calc(var(--slot) * (100% + var(--g)) / 3);
  width: calc((100% - 2 * var(--g)) / 3);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: left 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}
.pd-stage.is-reset .pd-bar { opacity: 0; }
.pd-stage.is-snap *, .pd-stage.is-snap *::before, .pd-stage.is-snap *::after { transition: none !important; }
.pd-cell {                                         /* the app's borderView: black, colour glow; holds body + pills + name */
  --glow-c: var(--c);
  height: var(--h);
  display: flex;
  flex-direction: column;
  padding: 3px 3px 0;
  border-radius: 10px;
  background: #000;
  box-shadow: 0 0 22px color-mix(in srgb, var(--glow-c) 45%, transparent);
  transition: height 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
.pd-bar.is-ahead .pd-cell { --glow-c: #fff; }
.pd-bar.is-mover .pd-cell {                        /* "about to move": the app's white guide outline */
  box-shadow: 0 0 26px color-mix(in srgb, var(--glow-c) 60%, transparent), 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.pd-body {                                         /* the app's timeView: colour at the top fading to black */
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--c) 0%, #000 100%);
  overflow: hidden;
}
.pd-body::after {                                  /* negative level: white at the bottom instead of black */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--c) 0%, #fff 100%);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.pd-bar.is-ahead .pd-body::after { opacity: 1; }
.pd-top {                                          /* state word over the signed level */
  display: block;
  width: 100%;
  text-align: center;
  font-size: clamp(0.6875rem, 0.75vw, 0.8125rem);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--white);
  text-shadow: 0.9px 0.9px 0 rgba(0, 0, 0, 0.7);
  transition: opacity 0.35s ease;
}
.pd-top b { display: block; }
.pd-top--in { position: absolute; top: 5px; left: 0; z-index: 1; }
.pd-top--out { position: relative; padding-bottom: 2px; }
.pd-bar.is-out .pd-top--in, .pd-bar:not(.is-out) .pd-top--out { opacity: 0; }
.pd-bar.is-ahead .pd-top--in { text-shadow: 1.6px 1.6px 0 rgba(0, 0, 0, 0.7); }   /* deeper shadow on the lighter fill, like the app */
.pd-pills { display: flex; align-items: center; gap: 4px; height: 12px; padding: 0 1px; }
.pd-pill {                                         /* deadline (blue, left) and weekly goal (green, right); --warn = the app's warning border */
  --pc: var(--blue);
  position: relative;
  flex: 1 1 0;
  height: 7px;
  border-radius: 4px;
  border: 1px solid var(--warn, transparent);
  background: #242424;
  overflow: hidden;
  transition: border-color 0.4s ease;
}
.pd-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--p) * 100%);
  border-radius: 4px;
  background: linear-gradient(90deg, #000 0%, var(--pc) 100%);
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pd-pill--goal { --pc: var(--green); }
.pd-name {
  display: block;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: clamp(0.6875rem, 0.75vw, 0.8125rem);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  color: var(--white);
  transition: color 0.3s ease;
}
.pd-chips {                                       /* the highlighted timeline's score breakdown, in the app's factor icons */
  display: flex;
  align-items: center;
  gap: 8px;
}
.pd-chip-label { min-width: 4.8em; text-align: right; font-size: 0.75rem; font-weight: 700; color: var(--gray); margin-right: 2px; }
.pd-chip {
  --c: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid #333;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--white);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.pd-chip-icon { width: 15px; height: 15px; color: var(--c); }
.pd-chip-val { min-width: 2em; text-align: center; }
.pd-chip.is-hint,
.priority-demo[data-hint="all"] .pd-chip {
  transform: translateY(-2px) scale(1.08);
  border-color: var(--c);
  box-shadow: 0 0 16px color-mix(in srgb, var(--c) 55%, transparent);
}
.pd-chip.is-updated { animation: pd-chip-pop 0.7s ease; }
@keyframes pd-chip-pop {
  35% { transform: translateY(-2px) scale(1.1); border-color: var(--c); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 55%, transparent); }
}
.priority-demo[data-hint="rank"] .pd-name { color: var(--yellow); }
.pd-caption {
  min-height: 4.2em;                              /* room for three lines: the longest caption wraps to three, and the card must not jump mid-loop */
  font-size: clamp(0.75rem, 0.8vw, 0.875rem);
  font-weight: 600;
  font-style: italic;
  color: var(--gray);
  text-align: center;
  transition: opacity 0.3s ease;
}
.pd-caption.is-swap { opacity: 0; }
.pd-steps { display: flex; gap: 4px; margin-top: -4px; }   /* step dots: click to jump; the loop also holds while the card is hovered or focused */
.pd-dot {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.pd-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3c3c3c;
  transition: background 0.3s ease, transform 0.3s ease;
}
.pd-dot:hover::before { background: #8a8a8a; }
.pd-dot[aria-current="step"]::before { background: var(--white); transform: scale(1.25); }
.pd-dot:focus-visible { outline: 2px solid var(--white); outline-offset: -2px; border-radius: 50%; }
.feature-tag {                                    /* role label in the card's accent: top-left, in flow, so every card's label sits where the featured card's does */
  display: block;
  margin-bottom: clamp(8px, 0.7vw, 12px);
  font-size: clamp(0.6875rem, 0.75vw, 0.8125rem);  /* 13 px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.9;
}
.feature-head {                                   /* (b) icon leads the title: one left-aligned scan path */
  display: flex;
  align-items: center;
  gap: clamp(10px, 0.9vw, 14px);
}
.feature h3 {
  font-size: clamp(1.5rem, 2.67vw, 2.875rem);     /* 46 px */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.feature p {
  margin-top: clamp(12px, 0.95vw, 16px);          /* (d) a little more air under the title */
  max-width: 32em;                                /* (d) shorter measure */
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--gray);
}
.feature p em { color: var(--white); font-style: italic; font-weight: 600; }   /* (c) emphasis, not a second headline */
.feature-icon {
  flex: 0 0 auto;
  width: clamp(30px, 2.2vw, 38px);
  height: auto;
  color: var(--accent);
}

/* icon hover motion on the six small cards (hover-capable devices; off under reduced motion) */
@media (hover: hover) {
  .feature-icon g, .feature-icon path, .feature-icon circle, .feature-icon rect { transform-box: view-box; }
  /* Goals: the dart sways about the bullseye centre, its tip sweeping along the ring */
  .feature:hover .ic-dart { transform-origin: 12px 12px; animation: ic-sway 2.4s ease-in-out infinite alternate; }
  /* Sessions: the minute hand ticks forward, the hour hand creeps */
  .feature:hover .ic-min { transform-origin: 12px 12px; animation: ic-tick 6s steps(12, end) infinite; }
  .feature:hover .ic-hr { transform-origin: 12px 12px; animation: ic-creep 6s linear infinite; }
  /* Weights: the beam rocks about the pivot, right down as left goes up, and back */
  .feature:hover .ic-beam { transform-origin: 12px 6.5px; animation: ic-rock 2.6s ease-in-out infinite alternate; }
  /* Statistics: the arrow pivots at the line's last bend, so the line's end follows its direction */
  .feature:hover .ic-arrow { transform-origin: 12.5px 15.5px; animation: ic-point 2s ease-in-out infinite alternate; }
  /* Auto Align: the three strokes twinkle out of phase */
  .feature:hover .ic-align path { animation: ic-twinkle 1.6s ease-in-out infinite alternate; }
  .feature:hover .ic-align path:nth-child(2) { animation-delay: -0.55s; }
  .feature:hover .ic-align path:nth-child(3) { animation-delay: -1.1s; }
  /* Todos: the box walks the app's checkbox states: white unchecked → orange (due soon) → green checked
     → orange unchecked → red (overdue) → yellow checked → white unchecked; the check draws in the box's colour */
  .feature:hover .ic-todo-box { animation: ic-box 6.6s linear infinite; }
  .feature:hover .ic-todo-check { animation: ic-check 6.6s linear infinite; }
}
@keyframes ic-sway { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes ic-tick { to { transform: rotate(360deg); } }
@keyframes ic-creep { to { transform: rotate(30deg); } }
@keyframes ic-rock { from { transform: rotate(0deg); } to { transform: rotate(15deg); } }
@keyframes ic-point { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes ic-twinkle { from { opacity: 1; } to { opacity: 0.35; } }
@keyframes ic-box {                              /* seven phases of ~0.95 s; short colour blends between them */
  0%, 12.5% { stroke: #fff; }
  14.5%, 27% { stroke: var(--orange); }
  29%, 41.5% { stroke: var(--green); }
  43.5%, 56% { stroke: var(--orange); }
  58%, 70.5% { stroke: var(--red); }
  72.5%, 85% { stroke: var(--yellow); }
  87%, 100% { stroke: #fff; }
}
@keyframes ic-check {                            /* draws in during the green and yellow phases, retracts before each ends */
  0%, 29% { stroke-dashoffset: var(--off); stroke: var(--green); }
  33%, 39.5% { stroke-dashoffset: 0; stroke: var(--green); }
  43.5%, 72.5% { stroke-dashoffset: var(--off); stroke: var(--yellow); }
  76.5%, 83% { stroke-dashoffset: 0; stroke: var(--yellow); }
  87%, 100% { stroke-dashoffset: var(--off); stroke: var(--yellow); }
}

@media (max-width: 900px) {
  .feature-grid { grid-template-rows: auto repeat(3, minmax(0, 1fr)); }   /* three rows of two */
  .feature { grid-column: span 3; }                                       /* small cards: two per row */
  .feature--featured { grid-column: 1 / -1; }
  .feature--featured { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }   /* text over the demo */
  .priority-demo { justify-self: center; width: min(100%, 420px); }
}

@media (max-width: 640px) {
  .feature-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 18px; }
  .feature { min-height: 0; }
  .feature { grid-column: 1 / -1; }
  .feature--featured { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .pd-stage { max-width: 260px; height: 150px; }
}

/* 5d. Phone layout for both pinned stages (after both blocks on purpose) --- */
@media (max-width: 720px) {
  /* phone layout for both stages (desktop's pinned two-column stage holds down to 721 px) */
  .chaos-stage, .action-stage { grid-template-columns: minmax(0, 1fr); }
  .chaos-phone, .action-phone { display: none; }
  .chaos-cards, .action-steps { gap: clamp(40px, 8vw, 64px); }
  .action-steps { padding-left: 0; }
  .action-step { margin-left: var(--badge-overhang); }
  .action-step-shot {                        /* fragments sit whole above their step, no window, no mask */
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
  }
  .action-step-shot img { width: min(88%, 340px); height: auto; border-radius: 10px; }
  .chaos-card-shot {                         /* a window onto the phone shot, fading out under the box */
    display: flex;
    justify-content: center;
    height: clamp(230px, 50vw, 320px);
    overflow: hidden;
    align-items: flex-start;
    margin-bottom: -44px;
    -webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0) 96%);
    mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0) 96%);
  }
  .chaos-card-shot img {
    width: min(74%, 300px);
    height: auto;
    transform: translateY(var(--shot-shift, 0%));   /* per card: which part of the screen shows (set in the HTML) */
  }
}

/* 5h. Built for: four audience cards with the feature cards' frames, an icon each, six example timelines as pills
   (tweaks round, item 7). Four columns ≥ 1024 px, 2 × 2 to 721 px, one column below; reveal via [data-reveal]. */
.builtfor { padding-top: clamp(32px, 4.5vw, 72px); padding-bottom: clamp(80px, 10vw, 160px); }
.builtfor .section-sub { margin-bottom: clamp(30px, 3.2vw, 56px); }
.who-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.26vw, 39px);
}
.who-card {
  --accent: var(--blue);
  --accent-head: color-mix(in srgb, var(--accent) 60%, #2a2a2a);
  --accent-tail: color-mix(in srgb, var(--accent) 22%, #202020);
  --i: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 1.57vw, 27px) clamp(18px, 1.7vw, 28px) clamp(20px, 1.7vw, 30px);
  border: 2px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    linear-gradient(135deg, var(--accent-head) 0%, var(--accent-tail) 100%) border-box;
  transition: box-shadow 0.25s ease, transform 0.25s ease, opacity 0.6s ease calc(var(--i) * 70ms), translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i) * 70ms);
}
.who-card .feature-head { gap: clamp(8px, 0.8vw, 12px); }
.who-card .feature-icon { width: clamp(26px, 1.9vw, 32px); }
.who-card h3 {
  font-size: clamp(1.25rem, 1.75vw, 1.875rem);   /* 30 px */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;                            /* one line each; the names are chosen to fit at every width */
}
.who-line {
  margin-top: clamp(8px, 0.7vw, 12px);
  font-size: clamp(0.9375rem, 1.02vw, 1.0625rem);  /* 17 px */
  font-weight: 600;
  line-height: 1.35;
  color: var(--gray);
}
.who-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(14px, 1.2vw, 20px);
}
.who-list li {
  padding: 5px 11px;
  border-radius: 999px;
  background: #1e1e1e;
  font-size: clamp(0.75rem, 0.8vw, 0.875rem);    /* 14 px */
  font-weight: 600;
  line-height: 1.3;
  color: var(--gray-light);
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, opacity 0.5s ease calc(0.35s + var(--i) * 70ms + var(--k) * 40ms);
}
@media (hover: hover) {
  .who-card:hover {
    --accent-head: var(--accent);
    --accent-tail: var(--accent);
    box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 35%, transparent);
    transform: translateY(-3px);
  }
  .who-card:hover .who-list li { color: var(--white); background: #262626; }
  /* icon motion, in the feature cards' language */
  .who-card:hover .ic-tassel { transform-origin: 22px 9px; animation: ic-sway 2s ease-in-out infinite alternate; }
  .who-card:hover .ic-rline { animation: ic-twinkle 1.4s ease-in-out infinite alternate; }
  .who-card:hover .ic-rline:nth-of-type(3) { animation-delay: -0.45s; }
  .who-card:hover .ic-rline:nth-of-type(4) { animation-delay: -0.9s; }
  .who-card:hover .ic-pencil { transform-origin: 12px 12px; animation: ic-point 2s ease-in-out infinite alternate; }
  .who-card:hover .ic-flame { transform-origin: 12px 16px; animation: ic-flicker 1.1s ease-in-out infinite alternate; }
}
@keyframes ic-flicker { from { transform: scaleY(1); opacity: 0.85; } to { transform: scaleY(1.07) scaleX(0.97); opacity: 1; } }
.js .builtfor:not(.is-in) .who-card { opacity: 0; translate: 0 24px; }
.js .builtfor:not(.is-in) .who-list li { opacity: 0; }
@media (max-width: 1023px) {
  .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .who-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}


/* 6. Footer ---------------------------------------------------------------- */
.site-footer {
  padding: clamp(36px, 3.9vw, 56px) var(--gutter) clamp(26px, 2.1vw, 36px);   /* bottom padding raised 2026-09-12 (was 16–20 px); top tightened 2026-10-01 with the CTA's bottom padding */
  text-align: center;
}
.footer-links {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(12px, 1.2vw, 20px);                 /* two gaps per pair now that a dot sits between links */
  font-size: var(--fs-footer);
  font-weight: 600;
  color: var(--gray);
}
.footer-links a { color: var(--gray); transition: color 0.2s ease; }
.footer-links a:hover { color: var(--white); }
.footer-links a[aria-current="page"] { color: var(--white); }   /* current page reads white; the leading dot went when the separators arrived (2026-09-12) */
.footer-sep { font-size: 0.85em; color: var(--gray); opacity: 0.9; }
.footer-meta {                                    /* brand line and legal line as one row under the links, stacked on phones (2026-10-01) */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 14px;
  margin-top: clamp(14px, 1.2vw, 18px);
  font-size: clamp(0.8125rem, 0.95vw, 0.875rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--gray);
  text-wrap: balance;                             /* under ~360 px both lines wrap; balanced, neither leaves a one-word orphan */
}
.footer-tagline { font-weight: 600; color: var(--gray-light); }   /* the page's one plain statement of what this is (S11); the maker clause lives on the Support page */
@media (max-width: 720px) {
  .footer-meta { flex-direction: column; align-items: center; }
  .footer-meta .footer-sep { display: none; }
}

/* 7. Motion ---------------------------------------------------------------- */
/* Bars are hidden only when JS has run; GSAP (or the CSS fallback) reveals them. */
.bar[data-d="0"] { --dist: 0; }
.bar[data-d="1"] { --dist: 1; }
.bar[data-d="2"] { --dist: 2; }
.bar[data-d="3"] { --dist: 3; }
.js .hero:not(.is-in) .bar { opacity: 0.01; transform: translateY(-48px); }
.js .hero.css-in .bar {
  transition: opacity 1s ease-out, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-duration: calc(1s + var(--dist) * 0.267s);
}
.js .hero:not(.is-in) .hero-copy > * { opacity: 0; }
.js .hero.css-in .hero-copy > * { transition: opacity 1s ease-out; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero:not(.is-in) .bar { opacity: var(--bar-alpha); transform: none; }
  .js .hero:not(.is-in) .hero-copy > * { opacity: 1; }
  .badge { transition: none; }
  .bar-name[data-rotate] { transition: none; }
  .bar { will-change: auto; }
  .js .chaos-card:not(.is-in), .js .action-step:not(.is-in) { opacity: 1; transform: none; }
  .js .feature:not(.is-in) { opacity: 1; transform: none; }
  .js .cta-text, .js .cta-rule--solid, .js .cta-rule--dashes, .js .cta:not(.is-in) .cta-text, .js .cta:not(.is-in) .cta-badge, .js .cta:not(.is-in) .cta-rule--solid, .js .cta:not(.is-in) .cta-rule--dashes { opacity: 1; transform: none; clip-path: none; }
  .cta-text, .cta-badge, .cta-rule--solid, .cta-rule--dashes { transition: none; }
  .js .builtfor:not(.is-in) .who-card, .js .builtfor:not(.is-in) .who-list li { opacity: 1; translate: none; }
  .who-card, .who-list li { transition: none; }
  .pd-bar, .pd-cell, .pd-body::after, .pd-top, .pd-pill, .pd-pill::before, .pd-name, .pd-chip, .pd-caption, .pd-dot::before { transition: none; animation: none; }
  .phone-shot, .frag-shot, .chaos-card, .action-step, .feature, .feature-icon .draw { transition: none; }
  .frag-shot { transform: none; }
  .feature-icon * { animation: none !important; }
  .gate-field.is-wrong, .gate-slot::before { animation: none !important; }   /* no shake, steady caret; the message still says the code was wrong */
  .gate-slot i { transition: none; }
}

/* 8. Breakpoints ----------------------------------------------------------- */
@media (max-width: 1100px) {
  /* tablet / half-window desktop: seven bars get too thin, keep five */
  :root { --bar-gap: clamp(12px, 3vw, 34px); }
  .bars { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bar[data-d="3"] { display: none; }
  .bar-top, .bar-name { font-size: clamp(0.875rem, 1.6vw, 1.25rem); }
  .bar[data-d="2"] { --label-alpha: 0.6; }       /* outer pair of the five-bar layout: 60 % minimum (PAGE_AUDIT row 34) */
}

@media (max-width: 900px) {
  .hero-panel { height: clamp(520px, calc(100svh - var(--header-h) - 12px), 760px); }
}

@media (max-width: 640px) {
  :root {
    --bar-h1: 52%;
    --bar-h0: 46%;
    --bar-radius: 12px;
  }
  .hero-panel { height: clamp(540px, 74svh, 640px); border-radius: 20px; }
  .hero-copy { padding-top: 34px; }
  .hero-title { font-size: clamp(2.75rem, 13.3vw, 3.5rem); }
  .hero-sub { font-size: 0.9375rem; margin-top: 12px; }
  .hero-copy .badge { margin-top: 22px; }
  .hero-shade {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, 0.55) 22%,
        rgba(0, 0, 0, 0.92) 40%, #000 50%, #000 100%);
  }

  /* seven bars don't fit 390 px legibly: keep the middle three */
  .bars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bar[data-d="3"], .bar[data-d="2"] { display: none; }
  .bar { padding: 8px 6px 6px; border-width: 2.5px; }
  .bar[data-d="1"] { --label-alpha: 0.85; }      /* the visible outer pair on phones (PAGE_AUDIT row 34) */
  .bar-top { font-size: 0.9375rem; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55); }
  .bar-name { font-size: 0.9375rem; }
  .bar-foot { gap: 6px; }
  :root { --pill-h: 8px; --name-h: 1.375rem; --bar-gap: clamp(28px, 10vw, 44px); }
  .footer-links { gap: 12px; }
}

/* 9. Bar-relative sizing (container query units) ---------------------------
   Labels and pills follow the width of their own bar, so they stay in
   proportion at the top and bottom of every breakpoint. Browsers without
   cqw support keep the viewport-based sizes declared above. */
@supports (font-size: 1cqw) {
  /* gentle slope with a base size: ~15.7 px on an 89 px phone bar,
     22 px from ~130 px bars upward (1cqw = 1 % of the bar's content width) */
  .bar-top,
  .bar-name { font-size: clamp(13px, 8px + 11cqw, 22px); }
  .bar-name {
    height: calc(clamp(13px, 8px + 11cqw, 22px) * 1.3);
    line-height: calc(clamp(13px, 8px + 11cqw, 22px) * 1.3);
  }
  .pill { height: clamp(6px, 3px + 7.3cqw, 12px); }
}