/* ==========================================================================
   TokenWake — tokenwake.com
   House style carried over from the Tier Zero decks. Do not invent a new look.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------ */
:root {
  --navy:       #0E1E38;  /* primary dark background            */
  --gold:       #D4A843;  /* accent, rules, numbers            */
  --dark-gold:  #B8860B;  /* gold text on light backgrounds    */
  --cream:      #F5F3F0;  /* light section background          */
  --warm-tint:  #FBF7EC;  /* alternating rows / cards          */
  --body:       #4A4A4A;  /* body text on light                */
  --gray:       #8A8A8A;  /* captions                          */
  --light-blue: #C9D2E0;  /* body text on navy                 */
  --border:     #E2E0DC;  /* hairline card borders             */

  --serif: Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Calibri, "Helvetica Neue", Arial, sans-serif;
  --mono:  "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;

  --maxw: 1120px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --shadow-card: 0 1px 2px rgba(14, 30, 56, .04), 0 8px 24px rgba(14, 30, 56, .06);
}

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

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

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

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--body);
  background: var(--cream);
  line-height: 1.6;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--dark-gold); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }
.sec-navy a:hover, .cta-band a:hover { color: var(--gold); }
.sec-navy a.link-white { color: #fff; }
.sec-navy a.link-white:hover { color: var(--gold); }

/* ---- Margin tile: a side note beside a narrow paragraph ------------------ */
.with-aside { display: grid; grid-template-columns: minmax(0, 68ch) minmax(0, 17rem);
  gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; justify-content: center;
  max-width: 100%; margin: 0 auto 2rem; text-align: left; }
.with-aside > p { margin: 0; }
.side-tile { border: 1px solid rgba(212,168,67,.35); border-left: 3px solid var(--gold);
  background: rgba(212,168,67,.06); padding: 1.15rem 1.25rem; }
.side-tile p { margin: 0; }
.with-aside.aside-far { justify-content: space-between; max-width: 100%; }
.with-aside.aside-hero { grid-template-columns: minmax(0, 40rem) minmax(0, 17rem); max-width: 100%;
  gap: clamp(2rem, 9vw, 7.5rem); justify-content: center; }
.aside-hero .side-tile { margin-top: 3.5rem; }
@media (max-width: 900px) { .aside-hero .side-tile { margin-top: 0; } }

@media (max-width: 900px) {
  .with-aside { grid-template-columns: 1fr; max-width: 68ch; }
  .with-aside.aside-far { max-width: 68ch; }
}

/* on a phone the tile is replaced by a plain link sitting under the headline */
.hero-inline-link { display: none; }
@media (max-width: 900px) {
  /* the tile's COLUMN has to collapse too, not just the tile */
  .with-aside.aside-hero,
  .with-aside.aside-far { grid-template-columns: 1fr; max-width: 68ch; }
  .aside-hero .side-tile { display: none; }
  .hero-inline-link { display: block; margin: 0 0 1.25rem; }
}

h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.12; color: var(--navy); }

/* ---- The gold rule at the top of every page ----------------------------- */
.goldrule { height: 6px; background: var(--gold); width: 100%; }

/* ---- Layout ------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

section { padding-block: clamp(3.5rem, 8vw, 6rem); }

/* Alternating section themes */
.sec-cream { background: var(--cream); color: var(--body); }
.sec-navy  { background: var(--navy);  color: var(--light-blue); }
.sec-navy h1, .sec-navy h2, .sec-navy h3 { color: #fff; }
.sec-warm  { background: var(--warm-tint); color: var(--body); }

/* ---- Kicker + gold tick ------------------------------------------------- */
.kicker {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--dark-gold);
  margin: 0 0 1rem;
}
.sec-navy .kicker { color: var(--gold); }
/* centred kicker in a left-aligned wrap — the tick has to come with it */
.kicker.centred { text-align: center; }
.kicker.centred::after { margin-inline: auto; }
.kicker::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--gold);
  margin-top: 0.6rem;
}

/* ---- Type scale --------------------------------------------------------- */
.display { font-size: clamp(2.25rem, 6vw, 4rem); letter-spacing: -0.01em; margin: 0 0 1rem; }
h2       { font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0 0 1rem; }
h3       { font-size: clamp(1.2rem, 2.5vw, 1.5rem); margin: 0 0 0.5rem; }
/* Peer topics inside one section: full section-head weight, with a rule and air
   above so long sections read as distinct blocks instead of one continuous scroll. */
.sub-head {
  margin-top: 4.5rem; padding-top: 3rem;
  border-top: 1px solid rgba(212, 168, 67, 0.3);
}
.lede    { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.5; }
.sec-navy .lede { color: var(--light-blue); }
.caption { color: var(--gray); font-size: 0.9rem; }
.sec-navy .caption { color: #93a2bd; }

.mono-num { font-family: var(--mono); color: var(--dark-gold); }
.sec-navy .mono-num { color: var(--gold); }

/* the hero fills from directly under the nav — the inherited section padding
   would put ~96px of empty navy above the kicker and below the credentials */
.hero {
  display: flex; flex-direction: column;
  /* reach the bottom of the screen so the cream section never peeks in; the
     PHOTO takes the slack, not the copy, so nothing above it moves */
  min-height: calc(100vh - 96px);
  padding-block: 0;              /* the inherited section padding would add ~96px each end */
}
.hero-split { display: flex; flex-direction: column; align-items: stretch; flex: 1 1 auto; }

/* ---- home hero -------------------------------------------------------------
   Sequence, taken from the deck title slide: name, tagline, the contrast, then
   the claim in a panel. The tagline is house wording and is not reworded. */
/* an overline above the name: names the subject before anything else runs */
.hero-sub {
  font-family: var(--serif); font-weight: 700; font-style: italic; color: #fff;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.25;
  margin: 0 0 0.5rem;
}
/* the problem is stated large in white; the answer is the gold line under it */
.hero-contrast {
  /* Georgia, like the line under it — the two statements share a voice */
  font-family: var(--serif); font-weight: 700; color: #fff;
  font-size: clamp(1.4rem, 3vw, 2.3rem); line-height: 1.3;
  margin: 2.2rem 0 0; text-wrap: balance;
}
.hero-answer {
  /* a step larger than the line above, and gold: the answer leads */
  font-family: var(--serif); font-weight: 700; color: var(--gold);
  font-size: clamp(1.75rem, 4.1vw, 3.2rem); line-height: 1.2;
  margin: 1.7rem 0 0; text-wrap: balance;
}
.sec-navy h1.hero-answer { color: var(--gold); }
.hero-claim {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(212, 168, 67, 0.22);
  border-radius: 5px;
  padding: clamp(0.85rem, 2vw, 1.15rem) clamp(1.1rem, 3vw, 2rem);
  margin: 2.5rem 0 0;
}
.hero-claim p { margin: 0; }
.hero-claim .sub {
  /* no ch cap and no balance: it should run as one line on a wide screen and
     wrap naturally on a narrow one */
  color: var(--light-blue); font-size: clamp(1.18rem, 1.95vw, 1.5rem);
  font-weight: 600; line-height: 1.5;
}
/* the token-pipe image sits directly under this line — the two words point at it */
/* the coins spilling out of the pipe sit directly under this phrase */
.hero-claim .sub strong { font-weight: inherit; color: var(--gold); }
/* the method line carries more weight than the list of inputs above it */
.hero-claim .sub .lead-line {
  display: inline-block; margin-top: 0.6rem;
}
.hero-banner {
  font-family: var(--serif); font-weight: 700; font-style: italic; color: var(--gold);
  font-size: clamp(1.25rem, 2.4vw, 1.8rem); line-height: 1.25;
  margin: 2.2rem 0 0; text-align: center;
}
.hero-cred {
  display: flex; justify-content: center; align-items: center;
  gap: 0.5rem 2rem; flex-wrap: wrap;
  padding: 0.9rem var(--gutter);
  border-top: 1px solid rgba(212, 168, 67, 0.28);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.72rem; color: var(--light-blue);
}
.hero-cred span + span {
  padding-left: 2rem; border-left: 1px solid rgba(212, 168, 67, 0.3);
}
.hero-split .hero-text {
  flex: 0 0 auto;                /* size to the text; let the photo take the rest */
  display: flex; align-items: center;
  /* almost nothing on top — the nav already gives the hero its air */
  padding-top: clamp(2.75rem, 5vw, 4rem);
  padding-bottom: clamp(1.75rem, 3.2vw, 2.5rem);
  padding-right: var(--gutter);
  padding-left: var(--gutter);   /* tight to the left edge */

  /* Spotlight: a radial lift a few shades above the navy, sitting behind the wordmark.
     Wide and low-contrast on purpose - it should read as depth, not as a visible shape. */
  background-image:
    radial-gradient(ellipse 66% 72% at 30% 40%,
                    rgba(32, 68, 124, 0.55) 0%,
                    rgba(22, 46, 84, 0.26) 38%,
                    rgba(14, 30, 56, 0) 72%);
}
.hero-content { max-width: 72rem; margin-inline: auto; }
.hero-content .kicker { margin-bottom: 1rem; }
.hero-content .kicker::after { margin-top: 0.5rem; }
.hero-content .lede { font-size: clamp(1.2rem, 2vw, 1.55rem); }
.hero-split .hero-photo {
  flex: 1 1 auto; align-self: stretch;   /* absorbs the leftover height */ min-height: clamp(130px, 14vh, 168px);
  background-color: var(--navy);
  /* soft navy fade on the seam so the split isn't a hard line */
  background-image:
    linear-gradient(180deg, var(--navy) 0%, rgba(14, 30, 56, 0) 18%),
    image-set(url("token-pipe.webp") type("image/webp"),
              url("token-pipe.jpg")  type("image/jpeg"));
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
}

@media (max-width: 860px) {
  .hero { min-height: 0; }
  .hero-split { flex-direction: column; }
  .hero-split .hero-photo { min-height: 240px; }
  .hero-cred span + span { border-left: 0; padding-left: 0; }
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.6rem;
  border-radius: 2px;
  border: 1.5px solid var(--gold);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  text-decoration: none;
}
.btn-primary { background: var(--gold); color: var(--navy); }
.btn-primary:hover { background: var(--dark-gold); border-color: var(--dark-gold); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy); }
.sec-navy .btn-ghost { color: #fff; }
.btn-ghost:hover { background: var(--gold); color: var(--navy); }
.btn:focus-visible { outline: 3px solid var(--dark-gold); outline-offset: 3px; }

/* ---- Nav ---------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 30, 56, .96);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid rgba(212, 168, 67, .18);
}
.nav .wrap { display: flex; align-items: center; gap: 1.5rem; padding-block: 0.9rem; max-width: none; }
.nav-brand {
  display: flex; align-items: center;
  text-decoration: none; margin-right: auto;
}
.nav-brand img { height: 60px; width: auto; display: block; }
.nav-links { display: flex; gap: 1.4rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.72rem; color: var(--light-blue); text-decoration: none;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold); }
.nav-cta { padding: 0.5rem 1rem; font-size: 0.9rem; }
.nav-links a.nav-sample { font-weight: 700; color: var(--gold); }
.nav-links a.nav-sample:hover { color: #fff; }
.nav-links a.nav-cta { color: var(--navy); }         /* navy on gold, not the nav link color */
.nav-links a.nav-cta:hover { color: #fff; }          /* white on the darker gold hover */
.nav-toggle { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: .3rem .45rem; font-size: 1.7rem; line-height: 1; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;                 /* closed by default on mobile */
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--navy); border-bottom: 1px solid rgba(212,168,67,.18);
    padding: 0.5rem var(--gutter) 1.25rem;
    box-shadow: 0 14px 26px rgba(0, 0, 0, .35);
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 0.75rem 0; font-size: 0.85rem; }
  .nav-cta { margin-top: 0.5rem; }
}

/* ---- Cards -------------------------------------------------------------- */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  color: var(--body);            /* keep card text dark even on navy sections */
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
}
.card .kicker { font-size: 0.7rem; }
.card h3 { margin-top: 0; color: var(--navy); }
.card .kicker { color: var(--dark-gold); }   /* keep card labels readable on any section */
.card .caption { color: var(--gray); }
.gold-num { color: var(--dark-gold); font-weight: 700; }
.card p:last-child { margin-bottom: 0; }

.card-num {
  font-family: var(--serif); font-weight: 700; font-size: 2.5rem;
  color: var(--navy); line-height: 1; margin-bottom: 0.5rem;
}

/* ---- The cost-inversion signature element ------------------------------- */
.inversion {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(1.5rem, 5vw, 4rem); flex-wrap: wrap; text-align: center;
  margin-block: 2rem;
}
.inversion figure { margin: 0; }
.inversion .label {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.72rem; color: var(--gray); margin-bottom: 0.5rem;
}
.sec-navy .inversion .label { color: #93a2bd; }
.inversion .sticker { font-family: var(--serif); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--gray); }
.inversion .arrow { font-family: var(--mono); color: var(--gold); font-size: 1.5rem; align-self: center; }
.inversion .true {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(3.5rem, 12vw, 7rem); color: var(--dark-gold); line-height: 0.9;
}
.sec-navy .inversion .true { color: var(--gold); }

/* ---- Tables ------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.catalog { border-collapse: collapse; width: 100%; min-width: 640px; background: #fff; }
table.catalog caption { text-align: left; }
table.catalog th, table.catalog td {
  text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
table.catalog thead th {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.7rem; color: var(--dark-gold); border-bottom: 2px solid var(--gold);
}
table.catalog tbody tr:nth-child(even) { background: var(--warm-tint); }
table.catalog td.price { font-family: var(--mono); white-space: nowrap; }

/* ---- Numbered step list ------------------------------------------------- */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1rem; }
.steps li {
  counter-increment: step; position: relative;
  background: #fff; border: 1px solid var(--border); border-radius: 3px;
  box-shadow: var(--shadow-card); padding: 1.5rem 1.5rem 1.5rem 4.5rem;
}
.steps li::before {
  content: counter(step); position: absolute; left: 1.25rem; top: 1.35rem;
  font-family: var(--serif); font-weight: 700; font-size: 1.5rem;
  color: var(--gold); width: 2rem; text-align: center;
}

/* ---- Big date banner (models page) -------------------------------------- */
.date-banner {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em;
  border: 2px solid var(--gold); color: var(--navy); background: var(--warm-tint);
  padding: 1rem 1.5rem; display: inline-block; font-size: 0.95rem; font-weight: 600;
}

/* ---- Forms -------------------------------------------------------------- */
.form-field { margin-bottom: 1.25rem; }
.form-field label {
  display: block; font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.72rem; color: var(--navy);
  margin-bottom: 0.4rem; font-weight: 600;
}
.form-field input, .form-field textarea, .form-field select {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--body);
  padding: 0.75rem 0.9rem; border: 1px solid var(--border); border-radius: 2px;
  background: #fff;
}
.form-field textarea { min-height: 160px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--gold);
}
/* ---- Collapsible field hints: a small "?" beside the label ----------------- */
.lbl-row { display: flex; align-items: center; gap: 0.5rem; }
.lbl-row label { margin-bottom: 0; }
.hint-btn {
  width: 1.2rem; height: 1.2rem; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--dark-gold); border-radius: 50%; background: transparent;
  color: var(--dark-gold); font-family: var(--mono); font-size: 0.72rem; line-height: 1;
}
.hint-btn:hover, .hint-btn:focus-visible { background: var(--dark-gold); color: #fff; }
.hint {
  margin: 0.5rem 0 0; font-size: 0.87rem; line-height: 1.55; color: var(--body);
  background: var(--warm-tint); border-left: 2px solid var(--gold); padding: 0.6rem 0.85rem;
}
.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;
}

.form-note { font-size: 0.85rem; color: var(--gray); margin-top: 0.35rem; }
.form-check { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1.25rem; }
.form-check input { width: auto; margin-top: 0.25rem; flex: none; }
.form-check label { font-family: var(--sans); text-transform: none; letter-spacing: normal; font-size: 0.95rem; font-weight: 400; color: var(--body); margin: 0; }

/* ---- Case-study chart ---------------------------------------------------- */
.chart-fig { margin: 2.5rem 0 0; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 1rem;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.7rem; color: var(--light-blue);
}
.chart-legend span { display: flex; align-items: center; gap: 0.55rem; }
.swatch { width: 18px; height: 3px; border-radius: 2px; display: inline-block; flex: none; }

/* Plain bullet list inside cards (no gold marker) */
.plain-list { margin: 0; padding-left: 1.15rem; }
.plain-list li { margin-bottom: 0.5rem; line-height: 1.55; }
.plain-list li:last-child { margin-bottom: 0; }
.plain-list.scan li { margin-bottom: 0.9rem; }

/* ---- Workflow step table (intake) --------------------------------------- */
.steps-head { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 2px solid var(--gold); }
.step-table-scroll { overflow-x: auto; margin-top: 1rem; }
/* The step table is the one element that wants every pixel, so on wide screens it
   breaks out of the 920px form and centres on the viewport instead. */
@media (min-width: 1120px) {
  .step-table-scroll {
    width: min(94vw, 1560px);
    margin-left: calc(50% - min(47vw, 780px));
  }
}
.mobile-only { display: none; }
.step-table { width: 100%; border-collapse: collapse; }
.step-table thead th {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.68rem; font-weight: 700; color: var(--navy); text-align: left;
  padding: 0 0.5rem 0.5rem; border-bottom: 1px solid var(--gold); white-space: nowrap;
}
.step-table td { padding: 0.4rem 0.5rem; vertical-align: middle; border-bottom: 1px solid var(--border); }
.step-table .step-num {
  font-family: var(--mono); font-weight: 700; color: var(--dark-gold); text-align: center;
  font-size: 1rem; width: 2.2rem; vertical-align: middle; border-bottom: 1px solid var(--border);
}
.step-table input, .step-table select, .step-table textarea {
  width: 100%; font-family: var(--sans); font-size: 0.92rem; color: var(--body);
  padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 2px; background: #fff;
}
.step-table input:focus, .step-table select:focus, .step-table textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold);
}
/* Free-text cells wrap so people can read back what they typed. */
.step-table textarea { resize: vertical; line-height: 1.4; min-height: 3.5rem; display: block; }
.step-table td { vertical-align: top; }
.step-table .step-num, .step-table .cell-del { vertical-align: top; padding-top: 0.9rem; }
#ai-limit-warning {
  margin-top: 0.75rem; border-left: 3px solid #B3261E; background: #fff;
  padding: 0.6rem 0.85rem; color: #B3261E; font-size: 0.88rem;
}
.col-step { width: 2.2rem; }
.col-perf { width: 9rem; }
.col-hard { width: 8rem; }
.col-fail { width: 10rem; }
.col-retry { width: 6.5rem; }
.col-spawn { width: 8.5rem; }
.col-del { width: 2.2rem; }
.cell-del { text-align: center; }
.row-del {
  background: none; border: 0; cursor: pointer; color: var(--gray);
  font-size: 1.2rem; line-height: 1; padding: 0.25rem 0.4rem; border-radius: 2px;
}
.row-del:hover { color: #B3261E; background: rgba(179, 38, 30, .08); }
.row-del:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.del-text { display: none; }
.radio-pair { display: inline-flex; gap: 0.7rem; }
.radio-pair label {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--sans); font-size: 0.9rem; color: var(--body); white-space: nowrap;
}
.radio-pair input { width: auto; margin: 0; }
.example-row td { color: var(--body); font-style: italic; background: #FBEFC9; }
.example-row .step-num {
  color: var(--dark-gold); background: #FBEFC9; font-style: normal; font-weight: 700;
  font-size: 0.72rem; box-shadow: inset 3px 0 0 var(--gold);
}
.ex-tag {
  display: inline-block; font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.62rem; font-weight: 700; color: var(--navy);
  background: var(--gold); border-radius: 2px;
  padding: 0.08rem 0.4rem; margin-right: 0.5rem; font-style: normal; vertical-align: middle;
}

/* Stack the step table into cards on narrow screens */
@media (max-width: 720px) {
  .step-table .example-row .step-num::before { content: none; }
  .step-table thead { position: absolute; left: -9999px; }
  .step-table, .step-table tbody, .step-table tr, .step-table td { display: block; width: 100%; }
  .step-table tr {
    border: 1px solid var(--border); border-radius: 3px; background: #fff;
    padding: 0.5rem 0.85rem 0.85rem; margin-top: 1rem;
  }
  .step-table .step-num {
    display: block; text-align: left; width: auto; border: 0; color: var(--dark-gold);
    padding: 0 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  }
  .step-table .step-num::before { content: "Step "; }
  .step-table td { border: 0; padding: 0.35rem 0; }
  .step-table td::before {
    content: attr(data-label); display: block;
    font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
    font-size: 0.66rem; color: var(--navy); margin-bottom: 0.3rem; font-weight: 600;
  }
  /* Delete control reads as a labelled button once rows stack into cards */
  .mobile-only { display: block; }
  .step-table .cell-del::before { content: none; }
  .step-table .cell-del { text-align: left; padding-top: 0.6rem; }
  .row-del { font-size: 0.95rem; color: #B3261E; padding: 0.3rem 0; }
  .del-text { display: inline; font-family: var(--sans); }
}

/* ---- Moat bullets (gold marker + claim) --------------------------------- */
/* ---- Comparison table sits straight on the navy section -------------------- */

/* ---- Divider that fades at both ends --------------------------------------- */
.rule-fade {
  height: 1px; border: 0; margin: 4rem auto 3.25rem; width: 100%;
  background: linear-gradient(90deg, rgba(212,168,67,0) 0%, rgba(212,168,67,.5) 25%,
              rgba(212,168,67,.5) 75%, rgba(212,168,67,0) 100%);
}

/* ---- Category comparison matrix ------------------------------------------- */
.matrix { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.94rem; }
.matrix th, .matrix td { padding: 0.68rem 0.6rem; vertical-align: middle; }
.matrix thead th {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.07em;
  font-size: 0.6rem; font-weight: 700; color: var(--gold); line-height: 1.45;
  border-bottom: 1px solid rgba(212, 168, 67, 0.35); text-align: center;
}
.matrix thead th:first-child { text-align: left; }
.matrix tbody tr { border-bottom: 1px solid rgba(212, 168, 67, 0.14); }
.matrix tbody tr:last-child { border-bottom: 0; }
.matrix .mark { text-align: center; color: var(--gold); font-size: 1rem; font-weight: 700; }
.matrix .none { text-align: center; color: #5C7397; }

/* ---- Category comparison table --------------------------------------------
   Capabilities down the side, TokenWake against everyone else. This replaced a
   7-column matrix with one row per vendor category: it needed a sideways scroll
   on a phone, and more reading than the argument was worth on a laptop. The
   category and vendor names it used to carry now live in the .whoelse footnote.
   A tick under "Everyone else" means at least one of those categories does it. */
.matrix-compact { margin: 2rem auto 0; text-align: left; max-width: 36rem; }
.matrix-compact .matrix { min-width: 0; }
.matrix-compact .cap {
  color: #fff; font-family: var(--serif); font-weight: 700;
  font-size: 0.95rem; line-height: 1.25; width: 55%;
}
.matrix-compact thead th:not(:first-child) { width: 22.5%; }
.matrix-compact tr.turn td, .matrix-compact tr.turn th { border-top: 1px solid rgba(212, 168, 67, 0.35); }
.whoelse { max-width: 36rem; margin: 2rem auto 0; }
.asof { margin: 0.55rem auto 0; }

/* ---- Pricing tiers as horizontal rows (four cards were too narrow) --------- */
.tiers { margin-top: 2rem; border-top: 1px solid var(--border); }
.tier { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 10rem);
  gap: clamp(1rem, 3vw, 2.5rem); padding: 1.6rem clamp(0.75rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--border); align-items: start; }
.tier:nth-child(even) { background: var(--warm-tint); }
.tier h3 { margin: 0; }
.tier .kicker { margin-bottom: 0.45rem; }
.tier ul { margin: 0; padding-left: 1.1rem; list-style: disc; }
.tier li { margin-bottom: 0.4rem; line-height: 1.5; font-size: 0.97rem; }
.tier li:last-child { margin-bottom: 0; }
.tier-price { text-align: right; }
.tier-price .mono-num { display: block; font-size: 1.5rem; line-height: 1.1; }
.tier-price .caption { margin: 0.35rem 0 0; }
@media (max-width: 860px) {
  .tier { grid-template-columns: 1fr; gap: 0.85rem; }
  .tier-price { text-align: left; }
}

/* ---- Standing chips: bordered mono labels, credentials not evidence --------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.chips li {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.66rem; color: var(--navy); border: 1px solid var(--gold);
  padding: 0.55rem 0.85rem; background: #fff;
}
.sec-navy .chips li { color: var(--gold); background: transparent; }
/* Hero block sits ~1.2in left of the standard wrap: wider box, thinner gutter.
   Both values only bind on wide screens, so small screens are untouched. */
.hero-shift { max-width: 1400px; padding-inline: clamp(1.25rem, 2vw, 1.5rem); }

/* ---- Orbital hero: art left, copy right (echoes tierzerosolutions.io) ------- */
.hero-orbit {
  display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 46rem);
  gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center;
}
.orbit { display: block; width: 100%; max-width: 240px; height: auto; }
.orbit-sys { transform-box: fill-box; transform-origin: center; transform: rotate(-24deg); }
@media (prefers-reduced-motion: no-preference) {
  .orbit-sys { animation: orbit-spin 70s linear infinite; }
}
@keyframes orbit-spin { from { transform: rotate(-24deg); } to { transform: rotate(336deg); } }
@media (max-width: 860px) {
  .hero-orbit { grid-template-columns: 1fr; gap: 0; }
  .orbit { display: none; }   /* decorative only; off on small screens, as on tierzerosolutions.io */
}

/* ---- "Point it at X and it becomes Y" — the generality claim, demonstrated --- */
.pointit {
  list-style: none; margin: 2rem 0 0; padding: 0 0 0 1.35rem;
  border-left: 2px solid rgba(212, 168, 67, 0.45); display: grid; gap: 0.65rem;
}
.pointit li { color: #fff; font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.45; }
.pointit .becomes { color: var(--gold); }
.pointit li.stamp {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.68rem; color: #93a2bd; border-top: 1px solid rgba(212, 168, 67, 0.28);
  padding-top: 0.85rem; margin-top: 0.35rem;
}

.moat {
  list-style: none; margin: 2rem auto 0; padding: 0; max-width: 42rem;
  text-align: left; display: grid; gap: 1rem;
}
.moat li { position: relative; padding-left: 1.9rem; line-height: 1.5; }
.moat li::before { content: "\2726"; position: absolute; left: 0; top: 0; color: var(--gold); }
.sec-navy .moat strong { color: #fff; }

/* ---- Proven Math: navy receipts panel (gold number + claim) ------------- */
.receipts {
  background: var(--navy); border-radius: 4px; margin-top: 2rem;
  padding: 0.25rem clamp(1.25rem, 4vw, 2.5rem);
}
.receipt {
  display: grid; grid-template-columns: minmax(0, 8rem) 1fr; gap: 1.75rem;
  align-items: baseline; padding: 1.4rem 0;
  border-bottom: 1px solid rgba(212, 168, 67, 0.18);
}
.receipt:last-child { border-bottom: 0; }
.receipt-num {
  font-family: var(--serif); font-weight: 700; color: var(--gold);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1; text-align: right;
}
.receipt-txt { color: var(--light-blue); font-size: 1rem; line-height: 1.5; }
.receipt-txt strong { color: #fff; }
@media (max-width: 640px) {
  .receipt { grid-template-columns: 1fr; gap: 0.3rem; }
  .receipt-num { text-align: left; }
}

/* ---- Legal document pages ----------------------------------------------- */
.legal h2 { margin-top: 2.25rem; font-size: 1.4rem; }
.legal h3 { margin-top: 1.5rem; font-size: 1.1rem; }
.legal p, .legal li { line-height: 1.7; }
.legal ul, .legal ol { padding-left: 1.25rem; }
.legal .caption { margin-top: -0.5rem; }

/* ---- Callout ------------------------------------------------------------ */
/* The hero's one inline link. It keeps the gold it already had and gains a
   hairline underline - enough to read as clickable without turning the phrase
   into a button. Hover/focus brings the underline up to full gold. */
.hero-claim .sub a.cascade-link {
  color: var(--gold);
  /* dotted, not solid: a solid rule heavy enough to be noticed reads as emphasis,
     and one light enough to avoid that reads as nothing. Dots are never emphasis,
     so the phrase stays light and is still unmistakably a link. */
  text-decoration: underline dotted;
  text-decoration-color: rgba(212, 168, 67, 0.9);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.hero-claim .sub a.cascade-link:hover,
.hero-claim .sub a.cascade-link:focus-visible {
  color: var(--gold);
  text-decoration-style: solid;
  text-decoration-color: var(--gold);
}

/* Footnote marker: the asterisk beside "six model-bearing steps" and the one
   that opens the callout it points at. */
.fn-mark {
  font-family: var(--mono); font-size: 0.85em; vertical-align: super; line-height: 0;
  text-decoration: none; color: var(--dark-gold); padding-left: 0.1em;
}
a.fn-mark:hover { color: var(--navy); }
h3 .fn-mark { padding: 0 0.15em 0 0; }

/* Step-count ladder in the pricing callout. .matrix is navy-only — its header and
   rules are gold on dark; this is the light-background equivalent. */
.cascade { width: 100%; border-collapse: collapse; margin: 0.9rem 0 0; }
.cascade thead th {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.62rem; font-weight: 700; color: var(--dark-gold); line-height: 1.4;
  border-bottom: 1px solid var(--border); padding: 0.4rem 0.5rem; text-align: right;
}
.cascade thead th:first-child, .cascade td:first-child { text-align: left; }
.cascade td {
  padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); text-align: right;
  font-family: var(--mono); font-size: 0.88rem;
}
.cascade td:first-child { font-family: var(--sans); font-size: 0.94rem; }
.cascade tbody tr:last-child td { border-bottom: 0; }
.cascade tr.here td { font-weight: 700; color: var(--navy); background: rgba(212, 168, 67, 0.12); }

/* The offer table on /pricing. Five offers as rows so they can be read across
   rather than one at a time; stacks to labelled blocks on a phone. */
.offers { width: 100%; border-collapse: collapse; margin-top: 2rem; }
.offers thead th {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.62rem; font-weight: 700; color: var(--dark-gold); line-height: 1.4;
  text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border);
}
.offers thead th.price, .offers td.price { text-align: right; }
.offers th, .offers td {
  padding: 0.95rem 0.7rem; vertical-align: top; border-bottom: 1px solid var(--border);
  font-size: 0.94rem; line-height: 1.5;
}
.offers tbody th[scope="row"] {
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--navy);
  width: 20%; text-align: left;
}
.offers .offer-tag {
  display: block; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.6rem; font-weight: 700; color: var(--dark-gold); margin-bottom: 0.15rem;
}
.offers tbody tr:nth-child(even) { background: var(--warm-tint); }
.offers tbody tr:last-child th, .offers tbody tr:last-child td { border-bottom: 0; }
.offers td.needs { color: var(--gray); width: 20%; }
.offers td.price { white-space: nowrap; width: 16%; }
.offers td.price .mono-num { display: block; font-size: 1.15rem; }
.offers td.price .caption { display: block; margin: 0.2rem 0 0; font-size: 0.8rem; }

@media (max-width: 820px) {
  .offers thead { position: absolute; left: -9999px; }
  .offers, .offers tbody, .offers tr, .offers th, .offers td { display: block; width: auto; }
  .offers tbody tr { border-bottom: 1px solid var(--border); padding: 0.9rem 0; }
  .offers tbody tr:last-child { border-bottom: 0; }
  .offers th, .offers td { border-bottom: 0; padding: 0.2rem 0; }
  .offers tbody th[scope="row"] { font-size: 1.15rem; padding-bottom: 0.35rem; }
  .offers td.needs::before, .offers td.price::before {
    content: attr(data-label); display: block;
    font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
    font-size: 0.6rem; font-weight: 700; color: var(--dark-gold); margin-top: 0.5rem;
  }
  .offers td.price { text-align: left; }
}

.callout {
  border-left: 3px solid var(--gold); background: var(--warm-tint);
  padding: 1rem 1.25rem; margin: 1.25rem 0;
}
.callout strong { color: var(--navy); }

/* ---- Gated / lead-magnet block ------------------------------------------ */
.gated {
  border: 1px dashed var(--gold); background: rgba(212,168,67,.06);
  padding: 2rem; border-radius: 3px;
}

/* ---- CTA band (repeated at foot of every page) -------------------------- */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 0.5rem; }
.cta-band .lede { max-width: 44ch; margin-inline: auto; margin-bottom: 1.75rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Introductory-offer badge + one-line forecast line (pricing CTA) */
.cta-band .cta-forecast-line { max-width: none; margin-bottom: 1.25rem; }
@media (min-width: 861px) { .cta-band .cta-forecast-line { white-space: nowrap; } }
/* Slim CTA — reference pages get one line and one button, not a full band */
.cta-slim { padding-block: clamp(2.25rem, 4vw, 3rem); text-align: center; }
.cta-slim .slim-line {
  font-family: var(--serif); font-weight: 700; color: #fff;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.3;
  max-width: 46ch; margin: 0 auto 1.5rem;
}
.intro-badge {
  display: inline-block; border: 1.5px solid var(--gold); color: var(--gold);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.8rem; padding: 0.5rem 1.1rem; border-radius: 2px;
}
.intro-badge .mono-num { color: var(--gold); font-size: 1.05rem; letter-spacing: 0; }

/* Brand tagline, featured on the home closing panel */
.home-tagline {
  font-family: var(--serif); font-weight: 700; color: var(--dark-gold);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.12; margin: 0 0 1rem;
}
.sec-navy .home-tagline { color: var(--gold); }   /* brighter on navy */

/* ---- Footer ------------------------------------------------------------- */
.footer { background: var(--navy); color: var(--light-blue); padding-block: 2.5rem; font-size: 0.9rem; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.85rem 1.75rem;
  background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(212, 168, 67, 0.18);
  border-radius: 3px; padding: 1.15rem 2.25rem; }
.footer-links a { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.72rem; }
.footer-legal { margin: 0 0 0 auto; }
.footer a { color: var(--light-blue); text-decoration: none; }
.footer a:hover { color: var(--gold); }
.footer .tagline { font-family: var(--serif); font-style: italic; color: #fff; margin-right: auto; }
.footer .fine { color: #93a2bd; font-size: 0.8rem; width: 100%; margin-top: 0.5rem; }

/* ---- Utilities ---------------------------------------------------------- */
.center { text-align: center; }
.gold { color: var(--dark-gold); }
.sec-navy .gold { color: var(--gold); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1rem; }
.narrow { max-width: 68ch; }
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--gold); color: var(--navy);
  padding: 0.5rem 1rem; z-index: 100; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---- Quiet scroll reveal (respects reduced-motion via block above) ------ */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* anchored sections clear the sticky nav */
section[id] { scroll-margin-top: 6rem; }
/* anchors that land on a heading rather than a whole section clear the sticky nav themselves */
[id]:not(section) { scroll-margin-top: 7rem; }

/* the three "today's" lines stack again once they would wrap */
@media (max-width: 760px) {
}

/* footer nav: a tidy two-column index on a phone, not a ragged wrap */
@media (max-width: 640px) {
  .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem 1rem; padding: 1.1rem 1.25rem; width: 100%; }
  .footer-legal { margin: 0; }
}

/* ---- Numerai alpha chart, on the navy About panel ------------------------ */
/* the chart and everything said about it sit centred as one block */
.alpha-fig { margin: 2rem 0 0; padding: 0; text-align: center; }
.alpha-chart { display: block; width: 100%; max-width: 38rem; height: auto; margin: 0 auto; }
.alpha-fig figcaption { color: var(--light-blue); font-size: 0.82rem; line-height: 1.55;
  margin: 1rem auto 0; max-width: 38rem; text-wrap: balance; }
.alpha-fig figcaption strong { color: #fff; }
.alpha-note { text-align: center; max-width: 38rem; margin-inline: auto; }