/* Adversary Club waitlist. Shared base for the three variants.
   Tokens mirror web/src/design/tokens.css. No amber, no red: --stress is only for a bot under attack. */

/* Self-hosted fonts (SIL Open Font License, see assets/fonts/OFL-*.txt), latin and latin-ext subsets from Google Fonts.
   Plus Jakarta Sans and JetBrains Mono are variable in weight; Newsreader carries the opsz axis. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-normal-latin.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: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/newsreader-italic-latin.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: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/newsreader-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/newsreader-normal-latin.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-normal-latin.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;
}

:root {
  --plate: #e7ece8;
  --pane: #f5f8f5;
  --pane-fixed: #f5f8f5;
  --ink: #0f1d1a;
  --ink-fixed: #0f1d1a;
  --ink-2: #4d5f5a;
  --line: #b5c3bc;
  --line-2: #d3dcd6;
  --verdigris: #0f6b66;
  --vitrine: #0a1715;
  --vitrine-2: #122421;
  --vitrine-text: #dce8e3;
  --vitrine-strong: #eaf6f2;
  --glow: #2ee6c5;
  --glow-45: rgba(46, 230, 197, 0.45);
  --stress: #8b5cff;
  --wash-base: #dbe6e0;
  --wash-glow: rgba(46, 230, 197, 0.3);
  --wash-verdigris: rgba(15, 107, 102, 0.14);
  --wash-pane: rgba(245, 248, 245, 0.85);
  --hover-tint: rgba(15, 29, 26, 0.06);
  --me-tint: rgba(15, 107, 102, 0.08);
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-text: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.25s;
  --shadow-lift: 0 14px 30px rgba(15, 29, 26, 0.12);
  --shadow-float: 0 32px 64px -32px rgba(15, 29, 26, 0.28), 0 1px 2px rgba(15, 29, 26, 0.06);
  --page-max: 1280px;
  --page-pad: 40px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background: var(--plate);
  color: var(--ink);
  font: 400 17px/1.5 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection {
  background: var(--glow);
  color: var(--ink-fixed);
}
:focus-visible {
  outline: 2px solid var(--verdigris);
  outline-offset: 3px;
  border-radius: 4px;
}
h1,
h2,
h3,
p,
dl,
dd,
figure {
  margin: 0;
}
button,
input {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- page frame ---------- */
.page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.main {
  flex: 1;
}

/* ---------- top bar ---------- */
.top {
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line-2);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  min-height: 44px;
  white-space: nowrap;
}
.logo svg,
.logo img {
  flex: none;
}

/* ---------- type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.1;
  font-variation-settings: 'opsz' 20;
  font-size: clamp(38px, 2.2vw + 22px, 54px);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.display em {
  font-style: italic;
  font-weight: 400;
}
.pitch {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(13px, 0.3vw + 12px, 15.5px);
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 36ch;
  text-wrap: pretty;
}
.pitch + .mono {
  margin-top: 20px;
  max-width: 52ch;
}
.mono {
  font: 400 12px/1.5 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.mono b {
  font-weight: 400;
  color: var(--ink);
}
.mono-11 {
  font-size: 11px;
  letter-spacing: 0.04em;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid var(--line);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ink);
  background: transparent;
  white-space: nowrap;
}
.chip.verd {
  border-color: var(--verdigris);
  color: var(--verdigris);
}
.chip.solid {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--pane);
}
.chip.glow {
  background: var(--glow);
  border-color: var(--glow);
  color: var(--ink-fixed);
}
.chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- hero grid ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  padding: 72px 0 88px;
}
.copy {
  display: flex;
  flex-direction: column;
}
.copy .formcard {
  margin-top: 40px;
}
@media (max-width: 1080px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 0 64px;
  }
}
@media (max-width: 720px) {
  .hero {
    padding: 36px 0 48px;
  }
  .copy .formcard {
    margin-top: 32px;
  }
}

/* ---------- wash panel with plate grid ---------- */
.panel {
  position: relative;
  isolation: isolate;
  border-radius: 24px;
  padding: 48px 40px;
  display: grid;
  place-items: center;
}
.wash {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  border-radius: 24px;
  background: var(--wash-base);
}
.wash span {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(64px);
  will-change: transform;
}
.wash .a {
  width: 72%;
  left: -14%;
  top: -24%;
  background: var(--wash-glow);
}
.wash .b {
  width: 64%;
  right: -18%;
  bottom: -28%;
  background: var(--wash-verdigris);
}
.wash .c {
  width: 58%;
  left: 28%;
  bottom: -14%;
  background: var(--wash-pane);
}
.grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  opacity: 0.5;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 100%);
}
.grid .minor {
  stroke: var(--line-2);
  stroke-opacity: 0.5;
}
.grid .major {
  stroke: var(--line);
  stroke-opacity: 0.8;
}
@media (max-width: 720px) {
  .panel {
    padding: 20px 16px;
    border-radius: 18px;
  }
  .wash,
  .grid {
    border-radius: 18px;
  }
}

/* ---------- cards ---------- */
.card {
  width: 100%;
  background: var(--pane);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  box-shadow: var(--shadow-float);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
  line-height: 1.45;
}
.cardTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cardFoot {
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.formcard {
  max-width: 520px;
  box-shadow: none;
  gap: 18px;
}
.formcard h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
}
.formHead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- form ---------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.label {
  font-size: 13px;
  font-weight: 600;
}
.label .opt {
  font-weight: 400;
  color: var(--ink-2);
}
.control {
  width: 100%;
  min-height: 48px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--pane);
  padding: 0 14px;
  font-size: 15px;
  color: var(--ink);
  transition: box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.control::placeholder {
  color: var(--ink-2);
}
.control:focus {
  outline: none;
  border-color: var(--verdigris);
  box-shadow: 0 0 0 3px rgba(15, 107, 102, 0.2);
}
.control[aria-invalid='true'] {
  border-color: var(--verdigris);
  box-shadow: inset 0 0 0 1px var(--verdigris);
}
.control[aria-invalid='true']:focus {
  box-shadow: inset 0 0 0 1px var(--verdigris), 0 0 0 3px rgba(15, 107, 102, 0.2);
}
/* Access code boxes, VK#-XXXX-XXXXX. One grid, so all 12 boxes share the width equally on any screen. */
.otp {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto repeat(4, minmax(0, 1fr)) auto repeat(5, minmax(0, 1fr));
  align-items: center;
  column-gap: 4px;
  max-width: 560px;
}
.otpGroup {
  display: contents;
}
.otpBox {
  min-width: 0;
  padding: 0;
  text-align: center;
  /* 16px stops iOS zooming in on focus. */
  font: 500 16px/1 var(--font-mono);
  text-transform: uppercase;
}
.otpDash {
  padding: 0 2px;
  font: 500 16px/1 var(--font-mono);
  color: var(--ink-2);
}
@media (max-width: 420px) {
  .otp {
    column-gap: 2px;
  }
  .otpDash {
    padding: 0 1px;
  }
  .otpBox {
    border-radius: 6px;
  }
}
.hint {
  font: 400 12px/1.5 var(--font-mono);
  color: var(--ink-2);
}
.err {
  display: none;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
}
.err.on {
  display: flex;
}
.err svg {
  flex: none;
  margin-top: 2px;
  color: var(--verdigris);
}
/* Terms and privacy checkbox. Native box, tinted, so keyboard and screen readers behave as usual. */
.agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}
.agreeBox {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--verdigris);
  cursor: pointer;
}
.agreeBox[aria-invalid='true'] {
  outline: 2px solid var(--verdigris);
  outline-offset: 2px;
}
.agree a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.agree a:hover {
  text-decoration-color: var(--ink);
}
/* honeypot: off screen, out of the tab order, hidden from assistive tech */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.consent {
  font: 400 12px/1.5 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.consent a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.consent a:hover {
  text-decoration-color: var(--ink);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 500 14px/1 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: scale(0.985);
}
.btn-primary {
  background: var(--ink);
  color: var(--pane);
}
.btn-primary:hover {
  box-shadow: 0 0 0 3px var(--glow-45), 0 8px 20px rgba(15, 29, 26, 0.18);
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary:hover {
  background: var(--hover-tint);
}
.btn-glow {
  background: var(--glow);
  color: var(--ink-fixed);
}
.btn-glow:hover {
  box-shadow: 0 8px 20px rgba(46, 230, 197, 0.35);
}
.btn-sm {
  min-height: 36px;
  padding: 0 16px;
  font-size: 13px;
}
.btn[disabled],
.btn[aria-disabled='true'] {
  background: var(--line-2);
  color: var(--ink-2);
  border-color: transparent;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.lnk {
  position: relative;
  background: none;
  border: 0;
  padding: 10px 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font: 500 14px/1 var(--font-text);
  color: var(--ink);
  text-decoration: none;
}
.lnk::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.lnk:hover::after,
.lnk:focus-visible::after {
  transform: scaleX(1);
}
@media (max-width: 900px) {
  .btn {
    min-height: 44px;
  }
  .btn-sm {
    min-height: 40px;
  }
}

/* ---------- success and failure ---------- */
.done {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.done h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.12;
}
/* The share box is a small vitrine: the dark glass of the terminal, a glow edge, and one slow sheen. */
.share {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: start;
  margin-top: 4px;
  padding: 20px 20px 18px;
  border: 1px solid rgba(46, 230, 197, 0.35);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(46, 230, 197, 0.16), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(139, 92, 255, 0.14), transparent 60%),
    var(--vitrine);
  color: var(--vitrine-text);
  box-shadow: var(--shadow-float), inset 0 1px 0 rgba(234, 246, 242, 0.06);
  overflow: hidden;
}
.share::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(234, 246, 242, 0.07) 50%, transparent 60%);
  transform: translateX(-100%);
  pointer-events: none;
}
.share ::selection {
  background: var(--glow);
  color: var(--ink-fixed);
}
.shareKicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 11px/1.5 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--glow);
}
.shareKicker .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 0 3px rgba(46, 230, 197, 0.2), 0 0 10px var(--glow);
}
.shareHead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--vitrine-strong);
  text-wrap: balance;
}
.shareHead em {
  font-style: normal;
  color: var(--glow);
}
.share q {
  quotes: none;
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-left: 2px solid var(--stress);
  border-radius: 0 8px 8px 0;
  background: rgba(220, 232, 227, 0.05);
  font: 400 13px/1.55 var(--font-mono);
  color: rgba(220, 232, 227, 0.86);
  overflow-wrap: anywhere;
}
.shareRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.shareBtn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(46, 230, 197, 0.35);
  border-radius: 50%;
  background: rgba(220, 232, 227, 0.05);
  color: var(--glow);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast) var(--ease);
}
.shareBtn[hidden] {
  display: none;
}
.shareBtn:hover {
  transform: translateY(-1px);
  background: var(--glow);
  color: var(--ink-fixed);
  box-shadow: 0 6px 16px rgba(46, 230, 197, 0.3);
}
.shareBtn:active {
  transform: scale(0.95);
}
.shareBtn:focus-visible {
  outline-color: var(--glow);
}
.shareBtn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shareBtn svg.brand {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke: none;
}
.shareBtn .icoDone,
.shareBtn.is-done .icoCopy {
  display: none;
}
.shareBtn.is-done .icoDone {
  display: block;
}
.shareBtn.is-done {
  background: var(--glow);
  color: var(--ink-fixed);
}
.shareStatus {
  min-height: 1.5em;
  font: 400 12px/1.5 var(--font-mono);
  color: rgba(220, 232, 227, 0.62);
}
.shareStatus:empty {
  min-height: 0;
}
@media (max-width: 420px) {
  .share {
    padding: 18px 16px 16px;
  }
  .shareRow {
    gap: 6px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .share::after {
    animation: shareSheen 6s var(--ease) 0.6s infinite;
  }
  @keyframes shareSheen {
    0% { transform: translateX(-100%); }
    30%, 100% { transform: translateX(100%); }
  }
}
.alert {
  display: none;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--verdigris);
  border-radius: 14px;
  background: var(--pane);
  font-size: 14px;
}
.alert.on {
  display: flex;
}
.alert svg {
  flex: none;
  margin-top: 2px;
  color: var(--verdigris);
}

/* ---------- footer ---------- */
.foot {
  margin-top: auto;
  padding: 24px 0 32px;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font: 400 12px/1.5 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.foot a {
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin: -12px 0;
}
.foot a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footLinks {
  display: flex;
  gap: 20px;
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hi {
    opacity: 0;
    animation: rise 0.8s var(--ease) forwards;
  }
  .hi1 {
    animation-delay: 0.02s;
  }
  .hi2 {
    animation-delay: 0.08s;
  }
  .hi3 {
    animation-delay: 0.16s;
  }
  .hi4 {
    animation-delay: 0.26s;
  }
  .paneIn {
    opacity: 0;
    animation: paneIn 1s var(--ease) 0.12s forwards;
  }
  .wash .a {
    animation: driftA 18s ease-in-out infinite alternate;
  }
  .wash .b {
    animation: driftB 24s ease-in-out infinite alternate;
  }
  .wash .c {
    animation: driftC 21s ease-in-out infinite alternate;
  }
  .wash[data-paused] span {
    animation-play-state: paused;
  }
  .msg {
    animation: msgIn 0.4s var(--ease) both;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes paneIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes driftA {
  to {
    transform: translate(20%, 16%) scale(1.08);
  }
}
@keyframes driftB {
  to {
    transform: translate(-18%, -16%) scale(1.12);
  }
}
@keyframes driftC {
  to {
    transform: translate(-14%, -20%) scale(0.94);
  }
}
@keyframes msgIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- chat (gatekeeper) ---------- */
.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 280px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.msg {
  align-self: flex-start;
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--me-tint);
  border: 1px solid rgba(15, 107, 102, 0.2);
  font-size: 14px;
  line-height: 1.45;
}
.msg.me {
  align-self: flex-end;
  background: var(--plate);
  border-color: var(--line-2);
}
.msg.note {
  background: transparent;
  border-style: dashed;
  border-color: var(--line);
  color: var(--ink-2);
}
.who {
  display: block;
  margin-bottom: 6px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.03em;
  color: var(--ink-2);
}
.say {
  display: flex;
  gap: 8px;
  align-items: center;
}
.say .control {
  flex: 1;
  min-height: 44px;
}
.cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--me-tint);
  border: 1px solid rgba(15, 107, 102, 0.25);
}
.cap b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--verdigris);
}
.labelBlock {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.labelBlock .mono {
  line-height: 1.55;
}
.state-stress {
  color: var(--stress);
}
.state-broken {
  color: var(--verdigris);
}

/* sealed form: the real form sits under glass until the gate opens or the visitor skips */
.sealed {
  position: relative;
}
.glass {
  position: absolute;
  inset: -1px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: rgba(231, 236, 232, 0.72);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  backdrop-filter: blur(7px) saturate(1.1);
  overflow: hidden;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.glass::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 46%;
  height: 24%;
  background: var(--pane-fixed);
  opacity: 0.35;
  clip-path: polygon(0 60%, 64% 0, 100% 0, 0 100%);
}
.glass p {
  max-width: 30ch;
  font-size: 15px;
  color: var(--ink);
}
.glass.lift {
  opacity: 0;
  transform: translateY(-28px) scale(1.01);
  pointer-events: none;
}
.sealed[data-sealed='true'] .formBody {
  filter: blur(0.4px);
}

/* ---------- terminal ---------- */
.term {
  position: relative;
  width: 100%;
  max-width: 820px;
  background: var(--vitrine);
  color: var(--vitrine-text);
  border: 1px solid rgba(220, 232, 227, 0.14);
  border-radius: 18px;
  box-shadow: var(--shadow-float);
  font: 400 13px/1.65 var(--font-mono);
  overflow: hidden;
}
.term::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 44%;
  height: 26%;
  background: var(--pane-fixed);
  opacity: 0.045;
  clip-path: polygon(0 62%, 64% 0, 100% 0, 0 100%);
  pointer-events: none;
}
.term ::selection {
  background: var(--glow);
  color: var(--ink-fixed);
}
.termBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(220, 232, 227, 0.14);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(220, 232, 227, 0.62);
}
.termBar .chip {
  border-color: rgba(46, 230, 197, 0.6);
  color: var(--glow);
}
.termBody {
  padding: 18px 20px 14px;
  min-height: 300px;
  max-height: 460px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(220, 232, 227, 0.3) transparent;
}
.ln {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: rgba(220, 232, 227, 0.86);
}
.ln.cmd {
  color: var(--vitrine-strong);
}
.ln.ok {
  color: var(--glow);
}
.ln.dim {
  color: rgba(220, 232, 227, 0.55);
}
.ps {
  color: var(--glow);
}
.termIn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 18px;
}
.termIn input {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--vitrine-strong);
  caret-color: var(--glow);
  font: inherit;
}
.termIn input::placeholder {
  color: rgba(220, 232, 227, 0.4);
}
.termIn:focus-within .ps {
  text-shadow: 0 0 12px rgba(46, 230, 197, 0.6);
}
.termWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.termFoot {
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ink-2);
  text-align: center;
}
.formRow {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 72px;
  align-items: start;
}
.formRow h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
}
.formRow .lede {
  margin-top: 12px;
  font-size: 15px;
  color: var(--ink-2);
  max-width: 44ch;
}
@media (max-width: 1080px) {
  .formRow {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
@media (max-width: 720px) {
  .termBody {
    min-height: 280px;
    padding: 14px 14px 10px;
  }
  .termIn {
    padding: 0 14px 14px;
  }
  .formRow {
    margin-top: 40px;
  }
}

/* ---------- specimen under glass ---------- */
.spec {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.spec .glassBg {
  fill: var(--vitrine-2);
  transition: fill 0.5s var(--ease);
}
.spec .hl {
  fill: var(--pane-fixed);
  opacity: 0.045;
}
.spec .org path,
.spec .org circle {
  transform-box: fill-box;
  transform-origin: center;
}
.spec .ba {
  fill: var(--glow);
  opacity: 0.18;
}
.spec .bb {
  fill: var(--glow);
  opacity: 0.32;
}
.spec .core {
  fill: var(--glow);
  opacity: 0.95;
}
.spec .r1 {
  fill: none;
  stroke: var(--glow);
  stroke-width: 1.2;
  stroke-dasharray: 6 10;
  opacity: 0.55;
}
.spec .r2 {
  fill: none;
  stroke: var(--glow);
  stroke-width: 1;
  stroke-dasharray: 2 14;
  opacity: 0.3;
}
.spec .fil {
  fill: none;
  stroke: var(--glow);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.5;
}
.spec .st .ba,
.spec .st .bb,
.spec .st .core {
  fill: var(--stress);
}
.spec .st .r1,
.spec .st .r2,
.spec .st .fil {
  stroke: var(--stress);
}
.spec .st {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.spec .calm {
  transition: opacity 0.4s;
}
.spec[data-state='stress'] .st {
  opacity: 1;
}
.spec[data-state='broken'] .st {
  opacity: 0.5;
}
.spec[data-state='broken'] .calm {
  opacity: 0.35;
}
.spec .shards {
  opacity: 0;
  transition: opacity 0.3s;
}
.spec .sh {
  fill: rgba(46, 230, 197, 0.05);
  transform-box: fill-box;
  transform-origin: center;
}
.spec .sh:nth-of-type(1) { --dx: 3px; --dy: -3px; --rt: 1.2deg; }
.spec .sh:nth-of-type(2) { --dx: 3px; --dy: 3px; --rt: -0.8deg; }
.spec .sh:nth-of-type(3) { --dx: -2px; --dy: 4px; --rt: 0.9deg; }
.spec .sh:nth-of-type(4) { --dx: -3px; --dy: -2px; --rt: -1.1deg; }
.spec .sh:nth-of-type(5) { --dx: 1px; --dy: -4px; --rt: 0.6deg; }
.spec .cr {
  fill: none;
  stroke: var(--vitrine-strong);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.25s;
}
.spec[data-state='broken'] .shards,
.spec[data-state='broken'] .cr {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .spec[data-state='calm'] .calm .ba {
    animation: breathe 4.6s ease-in-out infinite;
  }
  .spec[data-state='calm'] .calm .bb {
    animation: breathe 3.4s ease-in-out infinite reverse;
  }
  .spec[data-state='calm'] .calm .core {
    animation: pulse 2.8s ease-in-out infinite;
  }
  .spec[data-state='calm'] .calm .r1 {
    animation: spin 48s linear infinite;
  }
  .spec[data-state='stress'] .st .core {
    animation: pulse 0.9s ease-in-out infinite;
  }
  .spec[data-state='broken'] .sh {
    animation: shard 0.6s var(--ease) forwards;
  }
}
@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.95;
  }
  50% {
    opacity: 0.6;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes shard {
  to {
    transform: translate(var(--dx), var(--dy)) rotate(var(--rt));
  }
}
.specCard {
  max-width: 520px;
}
.specGrid {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 480px) {
  .specGrid {
    grid-template-columns: 1fr;
  }
  .specGrid .spec {
    max-width: 160px;
  }
}
.specName {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
}
.sys {
  position: relative;
  font: 400 12px/1.9 var(--font-mono);
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--plate);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 14px 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sys .k {
  color: var(--ink-2);
}
.redact {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  margin: 0 1px;
  padding: 0 5px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--verdigris);
  font: inherit;
  line-height: 1.35;
  cursor: pointer;
  isolation: isolate;
}
.redact::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 3px;
  background: var(--ink);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.redact:hover::after,
.redact:focus-visible::after,
.redact[aria-pressed='true']::after {
  transform: translateY(-115%) scaleY(0.5);
  opacity: 0;
}
.redact:focus-visible {
  outline-offset: 2px;
}
.redact[aria-pressed='true'] {
  box-shadow: inset 0 0 0 1px rgba(15, 107, 102, 0.35);
  background: var(--me-tint);
}
.redact.flag[aria-pressed='true'] {
  background: var(--glow);
  color: var(--ink-fixed);
  box-shadow: none;
}
.specFoot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .specGrid {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
  }
  .sys {
    font-size: 11.5px;
  }
}

/* ---------- /waitlist: ink wash background ---------- */
/* The canvas paints verdigris and glow ink over the plate colour. Tints are capped in the shader
   (glow 0.20, verdigris 0.09) so --ink-2 text on top stays above 4.5:1 everywhere. */
.fluidPage {
  background: var(--plate);
}
/* Static wash: shown without WebGL, with reduced motion, and under the canvas while it fades in. */
.fluidPage::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(56% 48% at 16% 24%, rgba(46, 230, 197, 0.16), rgba(46, 230, 197, 0) 72%),
    radial-gradient(42% 38% at 64% 10%, rgba(46, 230, 197, 0.08), rgba(46, 230, 197, 0) 72%),
    radial-gradient(50% 44% at 84% 74%, rgba(15, 107, 102, 0.09), rgba(15, 107, 102, 0) 72%);
}
.fluid {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.fluid[data-on] {
  opacity: 1;
}
.fluid[hidden] {
  display: none;
}
.fluidPage .page {
  position: relative;
  z-index: 1;
}
/* Nothing heavier than 500 on this page. */
.fluidPage .label {
  font-weight: 500;
}

/* ---------- skip warning ---------- */
.glassIntro,
.skipWarn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.glassIntro[hidden],
.skipWarn[hidden] {
  display: none;
}
.skipWarn h2 {
  margin: 0;
  font: 400 26px/1.15 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.skipWarn p {
  max-width: 34ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.skipWarn p b {
  font-weight: 500;
}
.skipActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.sealed[data-warning='true'] .glass {
  background: rgba(231, 236, 232, 0.9);
}
@media (prefers-reduced-motion: no-preference) {
  .skipWarn {
    animation: warnIn 0.45s var(--ease) both;
  }
  @keyframes warnIn {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* Production page polish (impeccable findings): keep the header on one line at phone width, 12px minimum for
   mono captions, cards commit to a hairline edge instead of a diffuse shadow. The header row inset and the logo
   weight live in the base .top and .logo rules so the legal pages match. */
.fluidPage .top .chip {
  white-space: nowrap;
}
/* The tagline chip stays beside the logo while it fits on one line. When it doesn't, the row wraps and the chip
   drops under the logo, left-aligned, still one line. */
.fluidPage .top {
  flex-wrap: wrap;
  row-gap: 2px;
}
/* Phones: same 20px side inset as the legal pages. */
@media (max-width: 600px) {
  .fluidPage {
    --page-pad: 20px;
  }
}
@media (max-width: 380px) {
  .fluidPage .logo {
    gap: 8px;
    font-size: 14px;
  }
  /* 11px keeps the one-line chip inside the 280px content width at 320px. */
  .fluidPage .top .tagChip {
    padding: 0 7px;
    font-size: 11px;
    letter-spacing: 0;
  }
}
.fluidPage .cardFoot,
.fluidPage .who {
  font-size: 12px;
}
.fluidPage .card {
  box-shadow: 0 1px 2px rgba(15, 29, 26, 0.06);
}

/* Gatekeeper card header: just the agent's name and what it does. */
.agentHead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.agentName {
  font: 400 22px/1.15 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* /waitlist on laptop screens: fit the whole page in one viewport (about 1280x700 and up) so it does not scroll.
   Fields go two to a row, the copy column gets more width so the headline stays on one line and the pitch on three,
   and the chat panel stretches to the copy column instead of setting the row height (contain: size). */
@media (min-width: 1081px) {
  .fluidPage .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px;
    align-items: stretch;
    padding: 32px 0 28px;
  }
  .fluidPage .pitch {
    margin-top: 14px;
    max-width: 48ch;
  }
  .fluidPage .copy .formcard {
    margin-top: 24px;
    max-width: 640px;
    padding: 20px 22px;
    gap: 14px;
  }
  .fluidPage .form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 16px;
    align-items: start;
  }
  .fluidPage .form .actions,
  .fluidPage .form .fieldWide {
    grid-column: 1 / -1;
  }
  /* Wide fields put their hint on the label row to save height. */
  .fluidPage .fieldWide {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 6px;
    align-items: baseline;
  }
  .fluidPage .fieldWide > * {
    grid-column: 1 / -1;
  }
  .fluidPage .fieldWide > .label {
    grid-column: 1;
    grid-row: 1;
  }
  .fluidPage .fieldWide > .hint {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }
  .fluidPage .control {
    min-height: 44px;
  }
  .fluidPage .panel {
    contain: size;
    min-height: 440px;
    padding: 32px;
    display: flex;
    flex-direction: column;
  }
  .fluidPage .panel > .card {
    flex: 1;
    min-height: 0;
  }
  .fluidPage .chat {
    flex: 1;
    min-height: 0;
    max-height: none;
  }
  .fluidPage .foot {
    padding: 14px 0 18px;
  }
  /* Spare height on taller screens goes above and below the hero, not all above the footer. */
  .fluidPage .main {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
/* Short laptop windows (about 700px tall): less air around the hero so the page still fits without scrolling. */
@media (min-width: 1081px) and (max-height: 740px) {
  .fluidPage .hero {
    padding: 14px 0 12px;
  }
  .fluidPage .copy .formcard {
    margin-top: 18px;
    padding: 16px 22px;
    gap: 10px;
  }
  .fluidPage .form {
    gap: 10px 16px;
  }
  .fluidPage .control {
    min-height: 40px;
  }
}

/* Big monitors: the layout above is drawn for about 1280x720 and stops growing at --page-max. Past that, scale the
   whole waitlist page up in steps and let the column widen, so it fills a 1920, 2560 or 4K screen instead of sitting
   in a 1280px strip. Each step also needs the height, so the page still fits one screen without scrolling.
   zoom goes on .wrap, not .page, so .page's 100vh min-height is not scaled with it. */
@media (min-width: 1600px) and (min-height: 860px) {
  .fluidPage {
    --page-max: 1360px;
  }
  .fluidPage .copy .formcard {
    max-width: none;
  }
  .fluidPage .wrap {
    zoom: 1.1;
  }
}
@media (min-width: 1900px) and (min-height: 1000px) {
  .fluidPage {
    --page-max: 1440px;
  }
  .fluidPage .wrap {
    zoom: 1.2;
  }
}
@media (min-width: 2400px) and (min-height: 1250px) {
  .fluidPage {
    --page-max: 1520px;
  }
  .fluidPage .wrap {
    zoom: 1.4;
  }
}
@media (min-width: 3400px) and (min-height: 1400px) {
  .fluidPage {
    --page-max: 1600px;
  }
  .fluidPage .wrap {
    zoom: 1.6;
  }
}
@media (min-width: 3600px) and (min-height: 1900px) {
  .fluidPage .wrap {
    zoom: 2;
  }
}

/* 404.html */
.notFound {
  padding-block: 18vh;
}
.notFound p {
  margin-top: 12px;
}

/* ---------- privacy.html and terms.html ----------
   Long-form legal pages. Every rule is scoped under .legal (the class on their body), so nothing here
   touches the waitlist page or the 404. Appended last on purpose; the shared rules above stay as they are. */
.legal .top .chip {
  text-decoration: none;
}
.legal .top .chip:hover {
  border-color: var(--verdigris);
  color: var(--verdigris);
}
.legal .doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 0 80px;
}
/* Reading text is set in Newsreader at a text optical size; headings, labels and the summary card stay sans. */
.legal .doc {
  --font-read: var(--font-display);
}
.legal .lede {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(19px, 0.4vw + 17px, 21px);
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}
.legal .summary {
  margin-top: 36px;
  box-shadow: none;
  gap: 12px;
  font-size: 16px;
  line-height: 1.55;
}
.legal .summary h2 {
  font: 500 12px/1.5 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--verdigris);
}
.legal .summary ul {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 10px;
  font-family: var(--font-read);
  font-size: 18px;
  font-variation-settings: 'opsz' 16;
  line-height: 1.5;
}
.legal .part {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line-2);
  font-family: var(--font-read);
  font-size: 19px;
  font-variation-settings: 'opsz' 16;
  line-height: 1.65;
  text-wrap: pretty;
}
.legal .part h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  font-variation-settings: 'opsz' 20;
  text-wrap: balance;
}
.legal .part h3 {
  margin: 32px 0 0;
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}
.legal .part p,
.legal .part ul {
  margin-top: 14px;
}
.legal .part ul {
  margin-bottom: 0;
  padding-left: 1.25em;
}
.legal .part li + li {
  margin-top: 6px;
}
.legal .doc a {
  color: var(--verdigris);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.legal .doc a:hover {
  text-decoration-thickness: 2px;
}
.legal .fields {
  margin-top: 16px;
  border-top: 1px solid var(--line-2);
}
.legal .fields > div {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 4px 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
}
.legal .fields dt {
  font: 600 15px/1.6 var(--font-text);
  padding-top: 2px;
}
.legal .fields dd {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
}
.legal .backLink {
  margin-top: 48px;
  font: 400 13px/1.5 var(--font-mono);
}

/* "On this page" contents. Below 1100px it is a collapsible box under the summary card; from 1100px up it
   becomes a sticky left column and legal-toc.js marks the section being read with aria-current. */
.legal .part h2,
.legal .part h3 {
  scroll-margin-top: 24px;
}
@media (prefers-reduced-motion: no-preference) {
  html:has(body.legal) {
    scroll-behavior: smooth;
  }
}
.legal .toc {
  margin-top: 24px;
}
.legal .tocBox {
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--pane);
}
.legal .tocBox summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font: 500 12px/1.5 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--verdigris);
  cursor: pointer;
  list-style: none;
}
.legal .tocBox summary::-webkit-details-marker {
  display: none;
}
.legal .tocBox summary::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}
.legal .tocBox[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}
.legal .toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Left padding lines the link text up with the summary label: 5px + the -1px margin + 2px border + 12px. */
.legal .tocBox > ol {
  padding: 0 18px 16px 5px;
}
.legal .toc ol ol {
  margin: 2px 0 6px;
}
.legal .toc a {
  display: block;
  padding: 6px 0 6px 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font: 500 14px/1.4 var(--font-text);
  color: var(--ink-2);
  text-decoration: none;
  overflow-wrap: normal;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.legal .toc ol ol a {
  padding: 4px 0 4px 26px;
  font-size: 13px;
  font-weight: 400;
}
.legal .toc a:hover {
  color: var(--ink);
  text-decoration: none;
}
.legal .toc .is-active > a {
  color: var(--ink);
}
.legal .toc a[aria-current] {
  border-left-color: var(--verdigris);
  color: var(--verdigris);
}
@media (min-width: 1100px) {
  .legal .doc {
    max-width: none;
    display: grid;
    grid-template-columns: 220px minmax(0, 720px);
    column-gap: 64px;
    justify-content: center;
    align-items: start;
  }
  .legal .doc > * {
    grid-column: 2;
  }
  /* Spans every row so the sticky box can travel the full length of the notice. */
  .legal .doc > .toc {
    grid-column: 1;
    grid-row: 1 / span 99;
    position: sticky;
    top: 32px;
    margin-top: 6px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .legal .tocBox {
    border: 0;
    border-radius: 0;
    background: none;
  }
  .legal .tocBox summary {
    padding: 0 0 12px;
    cursor: default;
  }
  .legal .tocBox summary::after {
    display: none;
  }
  .legal .tocBox > ol {
    padding: 0;
    border-left: 1px solid var(--line-2);
  }
}
@media (max-width: 600px) {
  .legal {
    --page-pad: 20px;
  }
  .legal .doc {
    padding: 28px 0 56px;
  }
  .legal .part {
    font-size: 18px;
  }
  .legal .part h2 {
    font-size: 24px;
  }
  .legal .fields > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- season one countdown (glitch) ---------- */
/* A small vitrine card: live dot, phase line and local start time on top, then four Newsreader numbers cut into
   the logo's four bands. countdown.js tears the bands sideways when a number changes. The card sizes its numbers
   from its own width (container query units), so the same markup works above the chat, under the pitch or in
   the top bar. */
.countdown {
  container: cd / inline-size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px 12px;
  border-radius: 18px;
  color: var(--vitrine-text);
  background:
    radial-gradient(120% 90% at 50% -30%, rgba(46, 230, 197, 0.12), transparent 60%),
    linear-gradient(180deg, var(--vitrine-2), var(--vitrine));
  box-shadow:
    0 0 0 1px rgba(46, 230, 197, 0.14),
    0 18px 40px -24px rgba(10, 23, 21, 0.55);
}
.countdown[hidden] {
  display: none;
}
/* Faint scanlines, like the vitrine stage in the arena. */
.countdown::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(220, 232, 227, 0.025) 0 1px, transparent 1px 4px);
}
.cdHead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  font: 500 11px/1.3 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cdDot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 8px var(--glow-45);
}
.cdPhase {
  color: var(--vitrine-strong);
}
.cdWhen {
  margin-left: auto;
  color: rgba(220, 232, 227, 0.62);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
/* Narrow cards: the local time gets its own line, lined up under the phase text. */
@container cd (max-width: 440px) {
  .cdWhen {
    flex-basis: 100%;
    margin-left: 0;
    padding-left: 17px;
  }
}
.cdNums {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 72;
  font-size: clamp(34px, 13cqi, 60px);
  line-height: 1;
}
.cdGroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cdNum {
  position: relative;
  display: inline-block;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}
.cdSpacer {
  visibility: hidden;
}
.cdGhost,
.cdSlice {
  position: absolute;
  inset: 0;
  white-space: nowrap;
}
.cdGhost {
  color: var(--glow);
  opacity: 0.3;
  transform: translateX(0.035em);
}
.cdSlice {
  color: var(--vitrine-strong);
}
.cdS0 {
  clip-path: inset(0 -20% 59.4% -20%);
  transform: translateX(-0.03em);
}
.cdS1 {
  clip-path: inset(40.6% -20% 45.8% -20%);
  transform: translateX(0.045em);
}
.cdS2 {
  clip-path: inset(54.2% -20% 36.5% -20%);
  transform: translateX(-0.015em);
}
.cdS3 {
  clip-path: inset(63.5% -20% 0 -20%);
  transform: translateX(0.018em);
}
.cdS1,
.cdS2 {
  color: var(--glow);
}
.cdUnit {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(220, 232, 227, 0.55);
}
.cdShort {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .cdDot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--glow);
    animation: cdPing 2.4s var(--ease) infinite;
  }
}
@keyframes cdPing {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* Slot: above the gatekeeper chat. On laptops the panel is a fixed-height flex column, so the chat gives up the
   height and the page still fits one screen. Below 1081px the panel is a centered grid, so stretch it. */
.panel > .countdown {
  justify-self: stretch;
  align-self: stretch;
  flex: none;
  margin-bottom: 16px;
}
@media (min-width: 1081px) and (max-height: 820px) {
  .fluidPage .panel > .countdown {
    margin-bottom: 12px;
    padding: 10px 16px 9px;
    gap: 7px;
  }
  .fluidPage .panel > .countdown .cdNums {
    font-size: clamp(30px, 10cqi, 44px);
  }
  .fluidPage .panel > .countdown .cdGroup {
    gap: 4px;
  }
}

/* Slot: under the pitch, above the form. Same width as the form card at every size (520px, 640px on laptops). */
.copy > .countdown {
  margin-top: 24px;
  max-width: 520px;
}
.copy > .countdown + .formcard {
  margin-top: 20px;
}
@media (min-width: 1081px) {
  .fluidPage .copy > .countdown {
    max-width: 640px;
    margin-top: 18px;
    padding: 10px 18px 9px;
    gap: 7px;
  }
  .fluidPage .copy > .countdown .cdNums {
    font-size: clamp(30px, 7cqi, 44px);
  }
  .fluidPage .copy > .countdown + .formcard {
    margin-top: 16px;
  }
}

/* Slot: the top bar. One line on laptops, its own full-width row under the logo on tablets and phones. */
.top > .countdown {
  container-type: normal;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  margin-left: auto;
}
.top > .countdown .cdHead {
  flex-wrap: nowrap;
  white-space: nowrap;
}
.top > .countdown .cdWhen {
  order: 3;
}
.top > .countdown .cdNums {
  display: flex;
  gap: 10px;
  font-size: 22px;
}
.top > .countdown .cdGroup {
  flex-direction: row;
  align-items: baseline;
  gap: 2px;
}
.top > .countdown .cdLong {
  display: none;
}
.top > .countdown .cdShort {
  display: inline;
}
.top > .countdown .cdUnit {
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
}
@media (min-width: 1081px) and (max-width: 1279px) {
  .top > .countdown .cdWhen {
    display: none;
  }
}
@media (max-width: 1080px) {
  .top > .countdown {
    order: 3;
    flex: 1 0 100%;
    margin: 6px 0 4px;
    justify-content: space-between;
  }
}
@media (max-width: 560px) {
  .top > .countdown .cdWhen {
    display: none;
  }
  .top > .countdown .cdP2 {
    display: none;
  }
}