/*
  MobileFlow site. Foundation styles only; the visual design pass
  replaces these values, not the class names. Tokens first, then layout,
  then components. Brand fields use each brand's own palette so the three
  cards read as three companies.
*/

:root {
  /* Base palette (mf-brain brand bible neutrals) */
  --ink: #0b0b0b;
  --ink-soft: #2a2f33;
  --muted: #5b6670;
  --surface: #f8f8f8;
  --paper: #ffffff;
  --line: #dde6ea;
  --accent: #0098d0;
  /* The accent where it carries text or sits under text: 5.3:1 on paper,
     5.0:1 on surface. --accent itself stays for borders and glows. */
  --accent-strong: #00739e;
  /* Small print on the ink footer: 4.9:1 on --ink. */
  --note-on-ink: #73818d;

  /* Depth: soft, neutral, so the page stays black and white. */
  --shadow-rest: 0 1px 2px rgba(11, 11, 11, 0.04), 0 10px 28px -18px rgba(11, 11, 11, 0.16);
  --shadow-lift: 0 2px 4px rgba(11, 11, 11, 0.05), 0 26px 48px -26px rgba(11, 11, 11, 0.28);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Brand fields. The Hytch field is Hytch's own ground, as on hytch.org. */
  --hytch-bg: #050607;
  --hytch-fg: #0b0b0b;
  --hytch-accent: #0098d0;
  --hytch-ice: #61adfb;
  --arcus-bg: #03111c;
  --arcus-fg: #f5fafb;
  --arcus-accent: #10dce4;
  --tally-bg: #ede9df;
  --tally-fg: #111110;
  --tally-accent: #be9a70;

  --font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Square corners everywhere on the site, buttons included. */
  --radius: 0;
  --wrap: 1160px;
  --gutter: 20px;
}

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

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

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font-head);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

h3 {
  font-size: 1.2rem;
}

p {
  margin: 0 0 1em;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: var(--gutter);
  top: 12px;
  background: var(--paper);
  padding: 8px 12px;
  z-index: 10;
}

/* Header */

.site-header {
  background: var(--hytch-bg);
  border-bottom: 1px solid #1c2226;
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  min-height: 68px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.25rem;
  text-decoration: none;
  letter-spacing: -0.02em;
}

.wordmark img,
.footer-mark {
  width: 51px;
  height: 34px;
  /* The mark ships black; the header and footer sit on ink. */
  filter: brightness(0) invert(1);
}

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
}

.site-nav a {
  text-decoration: none;
  color: #d6dde2;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--hytch-ice);
}

.site-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--paper);
  color: var(--hytch-bg);
}

.site-nav .nav-cta:hover {
  background: var(--hytch-ice);
  color: var(--hytch-bg);
}

/* Hero */

.hero {
  padding: 72px 0 40px;
}

.hero .lede {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 46rem;
}

.eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75em;
}

/* Brand grid: three companies side by side */

.section .brands {
  margin-top: 24px;
  padding-bottom: 0;
}

.brands {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 8px 0 64px;
}

.brand {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
}

.brand-field {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  padding: 28px;
}

.brand-field img,
.brand-field video {
  display: block;
  width: 140px;
  height: 140px;
  object-fit: contain;
}

/* Logo videos carry the field color; their edges fade so the frame never shows */
.brand-field video {
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect;
}

/* The Hytch scene fills the card's height and fades into the field at its sides */
.brand-field--scene {
  padding: 0;
}

.brand-field--scene video {
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
}

.brand--hytch .brand-field {
  background: var(--hytch-bg);
}


/* Arcus and Tally sit in the Hytch field's black: a band of each brand's own
   color, the size of the Hytch scene, fades into it at its sides, and the
   logo video plays on that band */
.brand--arcus .brand-field,
.brand--tally .brand-field {
  background: var(--hytch-bg);
}

.brand--arcus .brand-field::before,
.brand--tally .brand-field::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  height: 100%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  transition: transform 0.6s var(--ease-out);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
}

.brand--arcus .brand-field::before {
  background: var(--arcus-bg);
}

.brand--tally .brand-field::before {
  background: var(--tally-bg);
}

.brand-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}

.brand-body h2,
.brand-body h3 {
  font-size: 1.5rem;
  margin-bottom: 0.25em;
}

.brand-tag {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.75em;
}

.brand-body .button {
  margin-top: auto;
}

/* The intent, action, outcome diagram in "How Hytch, Arcus and Tally work
   together". Its background is --surface, so it sits on the page without a
   frame. On a phone its labels shrink below reading size, so a text line
   repeats them there; screen readers get them from the alt text. */
.flow-figure {
  margin: 36px 0 8px;
}

.flow-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.flow-steps {
  display: none;
}

@media (max-width: 700px) {
  .flow-figure {
    margin-inline: calc(var(--gutter) * -1);
  }

  .flow-steps {
    display: block;
    margin: 4px var(--gutter) 0;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink-soft);
    text-align: center;
  }
}

/* Visit buttons: square, with a glassy white to silver face and a 2px border
   that glows in the business's own color while a bright arc travels slowly
   around it. Ink on the face reads 12.9:1 at its darkest point. The arc
   angle falls back to 0deg, so a browser without @property shows a still
   border instead of a flickering one. */
@property --mf-rim-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes mf-rim-turn {
  to {
    --mf-rim-angle: 360deg;
  }
}

.button {
  --rim: var(--ink);
  --rim-soft: color-mix(in srgb, var(--rim) 22%, #d3d7db);
  --rim-hot: color-mix(in srgb, var(--rim) 40%, #ffffff);
  --rim-glow: color-mix(in srgb, var(--rim) 28%, transparent);
  position: relative;
  display: inline-block;
  align-self: flex-start;
  padding: 13px 23px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-head);
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.3) 46%, rgba(255, 255, 255, 0) 52%) padding-box,
    linear-gradient(180deg, #ffffff 0%, #eef0f2 50%, #cdd2d7 100%) padding-box,
    conic-gradient(
      from var(--mf-rim-angle, 0deg),
      var(--rim-soft) 0deg,
      var(--rim) 60deg,
      var(--rim-hot) 100deg,
      var(--rim) 140deg,
      var(--rim-soft) 220deg,
      var(--rim-soft) 360deg
    ) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(11, 11, 11, 0.08),
    0 0 10px -4px var(--rim-glow),
    0 4px 12px -6px rgba(11, 11, 11, 0.25);
}

/* The glow travels with the arc: the same sweep, blurred, painted behind the
   face. .brand-body is its stacking context, so the glow sits above the card
   and below the button; the button itself must not start a stacking context
   (no transform or z-index), or the glow would cover the face. */
.brand-body {
  position: relative;
  z-index: 0;
}

.button::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: conic-gradient(
    from var(--mf-rim-angle, 0deg),
    transparent 0deg,
    var(--rim) 70deg,
    var(--rim-hot) 100deg,
    var(--rim) 130deg,
    transparent 220deg
  );
  filter: blur(10px);
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.button:hover::after {
  opacity: 0.55;
}

.brand--hytch .button {
  --rim: var(--hytch-ice);
}

.brand--arcus .button {
  --rim: var(--arcus-accent);
}

.brand--tally .button {
  --rim: var(--tally-accent);
}

@media (prefers-reduced-motion: no-preference) {
  .button {
    animation: mf-rim-turn 7s linear infinite;
  }
}

/* Sections and facet pages */

.section {
  padding: 56px 0;
  border-top: 1px solid var(--line);
}

.facet-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.facet-list li {
  flex: 0 1 calc((100% - 48px) / 4);
  min-width: min(260px, 100%);
}

.facet-list a {
  display: block;
  height: 100%;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
}

.facet-list a:hover {
  border-color: var(--accent);
}

.facet-list strong {
  display: block;
  font-family: var(--font-head);
  margin-bottom: 6px;
}

.facet-list span {
  color: var(--muted);
  font-size: 0.95rem;
}

.prose {
  max-width: 46rem;
}

.prose h2 {
  margin-top: 1.6em;
}


.note {
  font-size: 0.9rem;
  color: var(--muted);
}

/* Footer */

.site-footer {
  background: var(--hytch-bg);
  color: #b9c3ca;
  padding: 80px 0 40px;
  font-size: 0.95rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px 32px;
}

.footer-cta {
  align-items: flex-end;
  padding-bottom: 48px;
  margin-bottom: 40px;
  border-bottom: 1px solid #1c2226;
}

.footer-cta-title {
  margin: 0;
  max-width: 34rem;
  color: #ffffff;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.footer-mark {
  margin-bottom: 14px;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.site-footer a {
  color: #ffffff;
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 600;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer .note {
  color: var(--note-on-ink);
}

@media (max-width: 900px) {
  .brands {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 48px 0 28px;
  }
}

/* ---------------------------------------------------------------------------
   Motion and depth, October 2026 polish.
   Depth stays soft and neutral so the page keeps its black and white feel;
   color only arrives as a glow in each business's own hue. Every animation is
   gated on prefers-reduced-motion, and hover effects on a fine pointer.
   --------------------------------------------------------------------------- */

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

.button:focus-visible {
  outline-offset: 4px;
}

/* Depth at rest */

.brand {
  --glow: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: var(--shadow-rest);
  transition:
    transform 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out);
}

.brand--hytch {
  --glow: color-mix(in srgb, var(--hytch-ice) 55%, transparent);
}

.brand--arcus {
  --glow: color-mix(in srgb, var(--arcus-accent) 55%, transparent);
}

.brand--tally {
  --glow: color-mix(in srgb, var(--tally-accent) 65%, transparent);
}

.brand-field {
  position: relative;
  overflow: hidden;
}

.brand-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 62% at 50% 55%, var(--glow), transparent 72%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}

.brand-field img,
.brand-field video {
  position: relative;
  z-index: 1;
  transition: transform 0.6s var(--ease-out);
}

.facet-list a,
.through > article {
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.03), 0 8px 20px -16px rgba(11, 11, 11, 0.14);
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    border-color 0.2s ease;
}

/* Hover: each card glows in its own business's color */

@media (hover: hover) and (pointer: fine) {
  .brand:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--glow) 60%, var(--line));
    box-shadow:
      var(--shadow-lift),
      0 30px 60px -32px var(--glow),
      0 0 0 1px color-mix(in srgb, var(--glow) 55%, transparent);
  }

  .brand:hover .brand-field::after {
    opacity: 1;
  }

  .brand:hover .brand-field img,
  .brand:hover .brand-field video {
    transform: scale(1.05);
  }

  .brand--arcus:hover .brand-field::before,
  .brand--tally:hover .brand-field::before {
    transform: translateX(-50%) scale(1.05);
  }

  .facet-list a:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
  }
}

/* The veil a brand card opens into on its way to that business's site
   (assets/site.js sets its clip and colors). */

.brand-veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.brand-veil img {
  width: 140px;
  height: 140px;
  object-fit: contain;
}

/* Entrances: the brand cards rise in a short stagger on load; facet tiles and
   the per-business articles rise as they scroll into view where the browser
   supports scroll-driven animation, and simply appear where it does not. */

@media (prefers-reduced-motion: no-preference) {
  @keyframes mf-rise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
  }

  .brands .brand {
    animation: mf-rise 0.8s var(--ease-out) backwards;
  }

  .brands .brand:nth-child(1) {
    animation-delay: 0.08s;
  }

  .brands .brand:nth-child(2) {
    animation-delay: 0.18s;
  }

  .brands .brand:nth-child(3) {
    animation-delay: 0.28s;
  }

  @supports (animation-timeline: view()) {
    .facet-list li,
    .through > article,
    .flow-figure {
      animation: mf-rise linear backwards;
      animation-timeline: view();
      animation-range: entry 5% entry 60%;
    }

    .facet-list li:nth-child(4n + 2),
    .through > article:nth-child(3n + 2) {
      animation-range: entry 12% entry 67%;
    }

    .facet-list li:nth-child(4n + 3),
    .through > article:nth-child(3n + 3) {
      animation-range: entry 19% entry 74%;
    }

    .facet-list li:nth-child(4n + 4) {
      animation-range: entry 26% entry 81%;
    }
  }
}

/* Page transitions between MobileFlow pages. The header holds still, the
   page beneath it crossfades with a short lift, and a facet tile expands into
   the header of the page it opens (assets/site.js names the pair). */

@view-transition {
  navigation: auto;
}

.site-header {
  view-transition-name: site-header;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes mf-page-out {
    to {
      opacity: 0;
      transform: translateY(-6px);
    }
  }

  @keyframes mf-page-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  @keyframes mf-fade-out {
    to {
      opacity: 0;
    }
  }

  @keyframes mf-fade-in {
    from {
      opacity: 0;
    }
  }

  ::view-transition-old(root) {
    animation: mf-page-out 0.22s ease both;
  }

  ::view-transition-new(root) {
    animation: mf-page-in 0.38s var(--ease-out) 0.06s both;
  }

  ::view-transition-group(facet-tile) {
    animation-duration: 0.5s;
    animation-timing-function: var(--ease-out);
  }

  ::view-transition-image-pair(facet-tile) {
    overflow: hidden;
    border-radius: var(--radius);
  }

  ::view-transition-old(facet-tile),
  ::view-transition-new(facet-tile) {
    height: 100%;
    object-fit: none;
    object-position: left top;
  }

  ::view-transition-old(facet-tile) {
    animation: mf-fade-out 0.16s ease both;
  }

  ::view-transition-new(facet-tile) {
    animation: mf-fade-in 0.34s ease 0.12s both;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* Plain-language blocks: problem cards, audience cards, numbered steps */

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
}

/* Four to a row on wide screens; a short last row sits centered. */
.cards > .card {
  flex: 0 1 calc((100% - 60px) / 4);
  min-width: min(260px, 100%);
}

.card {
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-rest);
}

.card h3 {
  margin-top: 0;
}

.card p {
  margin-bottom: 0;
  color: var(--ink-soft);
}

.steps {
  padding-left: 1.4em;
}

.steps li {
  margin-bottom: 0.8em;
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---------------------------------------------------------------------------
   Home page, October 29 2026 design: dark hero,
   audience doors, numbered problems, a step timeline, the government and
   investor split, and the principles row. The platform cards are unchanged.
--------------------------------------------------------------------------- */

.cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  font-family: var(--font-head);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.cta--accent {
  background: var(--hytch-ice);
  color: var(--hytch-bg);
}

.cta--accent:hover {
  background: #ffffff;
}

.cta--ghost {
  color: #ffffff;
  border-color: #3a444b;
}

.cta--ghost:hover {
  border-color: #ffffff;
}

.cta--ink {
  background: var(--ink);
  color: #ffffff;
}

.cta--ink:hover {
  background: var(--accent-strong);
}

.site-footer .cta--light {
  background: #ffffff;
  color: var(--hytch-bg);
}

.site-footer .cta--light:hover {
  background: var(--hytch-ice);
  text-decoration: none;
}

.eyebrow--accent {
  color: var(--accent-strong);
}

.eyebrow--ice {
  color: var(--hytch-ice);
}

/* Hero */

.hero--home {
  padding: 0;
  background: var(--hytch-bg);
  color: #ffffff;
}

.hero-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
  padding-top: 88px;
  padding-bottom: 72px;
}

.hero-copy {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 62rem;
}

.hero--home .eyebrow {
  color: var(--hytch-ice);
  letter-spacing: 0.12em;
}

.hero--home h1 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hero-question {
  margin: 32px 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8d9aa3;
}

.hero--home .lede {
  max-width: 38rem;
  margin: 28px 0 0;
  color: #b9c3ca;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 36px 0 0;
}

.tick {
  flex: none;
}

.doors {
  border-top: 1px solid #1c2226;
}

.doors ul {
  list-style: none;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.doors li + li a {
  padding-left: 24px;
}

.doors li:not(:last-child) a {
  border-right: 1px solid #1c2226;
}

.doors a {
  display: block;
  height: 100%;
  padding: 28px 24px 28px 0;
  color: #ffffff;
  text-decoration: none;
}

.doors a span {
  display: block;
  font-size: 0.85rem;
  color: #8d9aa3;
}

.doors a strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-head);
  font-size: 1.15rem;
}

.doors a:hover strong {
  color: var(--hytch-ice);
}

@media (max-width: 560px) {
  .doors li a,
  .doors li + li a {
    padding: 20px 0;
    border-right: 0;
  }

  .doors li:not(:last-child) a {
    border-right: 0;
    border-bottom: 1px solid #1c2226;
  }
}

/* Bands */

.band {
  padding: 104px 0 96px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.band--surface {
  background: var(--surface);
}

.band .eyebrow {
  letter-spacing: 0.12em;
}

.band-title {
  max-width: 46rem;
  margin: 0;
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.band-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 40px;
  margin-bottom: 48px;
}

.band-head > p {
  max-width: 26rem;
  margin: 0;
  color: var(--muted);
}

.band-head + .brands {
  padding-bottom: 0;
}

.problems,
.timeline,
.principles {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
}

.problems {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 40px;
  counter-reset: problem;
}

.problems li {
  padding-top: 22px;
  border-top: 3px solid var(--ink);
  counter-increment: problem;
}

.problems li::before {
  content: "0" counter(problem);
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--accent-strong);
}

.problems h3 {
  margin: 18px 0 10px;
  font-size: 1.35rem;
}

.problems p,
.timeline p,
.principles p {
  margin: 0;
  color: var(--ink-soft);
}

.timeline {
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 40px 0;
  counter-reset: step;
}

.timeline li {
  padding-right: 28px;
  border-top: 2px solid var(--hytch-ice);
  counter-increment: step;
}

.timeline li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: -23px;
  background: var(--hytch-ice);
  color: var(--hytch-bg);
  font-family: var(--font-head);
  font-weight: 800;
}

.timeline h3 {
  margin: 22px 0 8px;
  font-size: 1.25rem;
}

.timeline p {
  font-size: 0.95rem;
}

.timeline .who {
  margin-top: 14px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--muted);
}

.band .loop + .facet-list,
.band .timeline + .facet-list {
  margin-top: 64px;
  justify-content: center;
}

.principles {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
  margin-top: 48px;
}

.principles li {
  padding: 26px;
  background: var(--paper);
  border: 1px solid var(--line);
}

.principles h3 {
  margin: 16px 0 8px;
  font-size: 1.1rem;
}

.principles p {
  font-size: 0.95rem;
}

.band .more {
  margin: 32px 0 0;
}

.band .more a {
  color: var(--accent-strong);
  font-family: var(--font-head);
  font-weight: 700;
}

/* Government and investors */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  border-top: 1px solid var(--line);
}

.split-pane {
  padding: 88px var(--gutter);
  background: var(--paper);
}

.split-pane--dark {
  background: var(--hytch-bg);
  color: #f5fafb;
}

.split-inner {
  max-width: 520px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .split-pane--dark .split-inner {
    margin-right: 48px;
  }

  .split-pane:not(.split-pane--dark) .split-inner {
    margin-left: 48px;
  }
}

.split h2 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  line-height: 1.15;
}

.ticks {
  list-style: none;
  margin: 28px 0 36px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ticks li {
  display: flex;
  gap: 12px;
}

.ticks .tick {
  margin-top: 4px;
  color: var(--hytch-ice);
}

.ticks--ink {
  color: var(--ink-soft);
}

.ticks--ink .tick {
  color: var(--accent-strong);
}

/* ---------------------------------------------------------------------------
   Inner pages, October 29 2026: the same dark hero, type scale and section
   rhythm as the home page, so every page reads as one site.
--------------------------------------------------------------------------- */

.hero:not(.hero--home) {
  padding: 88px 0 80px;
  background: var(--hytch-bg);
  color: #ffffff;
}

.hero:not(.hero--home) .eyebrow {
  color: var(--hytch-ice);
  letter-spacing: 0.12em;
}

.hero:not(.hero--home) h1 {
  max-width: 56rem;
  margin: 0;
  font-weight: 800;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.07;
  letter-spacing: -0.02em;
}

.hero:not(.hero--home) h2 {
  margin: 32px 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8d9aa3;
}

.hero:not(.hero--home) .lede {
  max-width: 44rem;
  margin: 24px 0 0;
  color: #b9c3ca;
}

.hero:not(.hero--home) h2 + .lede {
  margin-top: 0;
}

.section {
  padding: 96px 0;
  background: var(--paper);
}

.section:nth-of-type(odd) {
  background: var(--surface);
}

.section > .wrap > h2,
.section article > h2,
.section .prose > h2 {
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.section .prose > h2:first-child,
.section article > h2:first-child {
  margin-top: 0;
}

.section .prose p,
.section .prose li {
  color: var(--ink-soft);
}

.section > .wrap > h2 + .brands {
  margin-top: 32px;
}

.card {
  border-top: 3px solid var(--ink);
}

@media (max-width: 700px) {
  .hero:not(.hero--home) {
    padding: 56px 0 48px;
  }

  .section {
    padding: 64px 0;
  }
}

/* How it works as a loop (Andrew 2026-10-29, canvas direction 2): the steps
   on the left, a ring around MobileFlow on the right. */

.loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px 72px;
}

.loop-copy {
  flex: 1 1 420px;
  min-width: 0;
}

.loop-steps {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.loop-steps li {
  display: flex;
  gap: 16px;
}

.loop-steps p {
  margin: 0;
  color: var(--ink-soft);
}

.loop-steps strong {
  color: var(--ink);
  font-family: var(--font-head);
}

.loop-num {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hytch-ice);
  color: var(--hytch-bg);
  font-family: var(--font-head);
  font-weight: 800;
}

.loop-figure {
  position: relative;
  flex: 1 1 420px;
  max-width: 600px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.loop-ring {
  position: absolute;
  inset: 10%;
  width: 80%;
  height: 80%;
}

/* One streak of light: a ring segment that fades from a bright head to
   nothing, glowing, turning clockwise over the gray track. */
.loop-streak {
  position: absolute;
  inset: calc(16.667% - 2px);
  filter: drop-shadow(0 0 6px var(--hytch-ice)) drop-shadow(0 0 2px var(--hytch-ice));
}

.loop-streak span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 250deg, var(--hytch-ice) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes mf-loop-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .loop-streak {
    animation: mf-loop-spin 7s linear infinite;
  }
}

.loop-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(26%, 112px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--hytch-bg);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.loop-core strong {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(0.85rem, 1.6vw, 1.1rem);
}

.loop-core span {
  max-width: 76%;
  font-size: clamp(0.62rem, 1vw, 0.75rem);
  line-height: 1.35;
  color: #b9c3ca;
}

.loop-node {
  position: absolute;
  width: 25%;
  min-width: 112px;
  padding: 12px 8px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-rest);
  text-align: center;
}

.loop-node strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(0.8rem, 1.4vw, 1rem);
}

.loop-node span {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--muted);
}

.loop-node--top {
  left: 50%;
  top: 10%;
}

.loop-node--right {
  left: 88%;
  top: 50%;
}

.loop-node--bottom {
  left: 50%;
  top: 90%;
}

.loop-node--left {
  left: 12%;
  top: 50%;
}

.loop-node--dark {
  background: var(--hytch-bg);
  border-color: var(--hytch-bg);
  color: #ffffff;
}

.loop-node--dark span {
  color: var(--arcus-accent);
}

/* Phones: when the header wraps, the nav rows sit centered under the mark. */
@media (max-width: 700px) {
  .site-header .wrap {
    justify-content: center;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .site-nav {
    flex: 1 1 100%;
  }

  .site-nav ul {
    justify-content: center;
  }
}

/* Glossary: a term, then its definition. */
.glossary dt {
  margin-top: 1.4em;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
}

.glossary dd {
  margin: 0.3em 0 0;
  color: var(--ink-soft);
}