/* Homepage v2. Built from 03_Website/mockups/home-healthier-feed-sep2026/home.css by build_prod.py. */
:root { --e-out: cubic-bezier(.16, 1, .3, 1); --e-in: cubic-bezier(.4, 0, 1, 1); --e-io: cubic-bezier(.65, 0, .35, 1); --e-pop: cubic-bezier(.2, 1.4, .4, 1); }
/* Homepage v2 hero. Loaded after the site's style.css; uses its tokens and fonts.
   The background is the town square's world seen from further back, so every colour below is
   the town square's own token, value for value (css/town-square.css). Change them there, then here. */

.hf-hero, .hf-descent, .hf-end {
  --sky-0: #93AAC2; --sky-1: #AEBBCB; --sky-2: #F0DCC6; --sky-3: #FFC79A;
  --b-top: #F6F0E4; --b-right: #B7A992; --b-left: #6F665C;
  --plane: #9E9488; --edge: #8A7E6C;
  --ground: #CFC5B5; --ground-2: #DAD1C2; --line: #B5AA98;
  --fig: #3A342C; --fig-w: #B02B0D; --fig-rim: rgba(255, 255, 255, .62);
  --win: #B08A2C; --win-cool: #8FA6BD; --pool: #FFB268; --glow: .3;
  --accent: #B02B0D;
  --grain: .06; --grain-blend: multiply;
  --cloud: 255, 255, 255;
  --hf-dwell: 5200;
}
[data-theme="dark"] .hf-hero, [data-theme="dark"] .hf-descent, [data-theme="dark"] .hf-end {
  --sky-0: #0E1430; --sky-1: #2A2141; --sky-2: #5E3244; --sky-3: #9B5138;
  --b-top: #6A6458; --b-right: #3E3831; --b-left: #211D1A;
  --plane: #171319; --edge: #8A6552;
  --ground: #241A21; --ground-2: #33242A; --line: #452F33;
  --fig: #8E8371; --fig-w: #FF6343; --fig-rim: rgba(0, 0, 0, .55);
  --win: #EDBD1F; --win-cool: #9FBEE0; --pool: #FF9A3C; --glow: 1;
  --accent: #FF6343;
  --grain: .13; --grain-blend: overlay;
  --cloud: 190, 170, 200;
}

/* The nav floats on the sky, and turns frosted as soon as the page moves under it (home.js sets .hf-frost) */
html.hf-page .nav { transition: padding .4s var(--e-out), top .3s var(--e-io), background-color .2s var(--e-out); }
html.hf-page:not(.hf-frost) .nav {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- Frame ---------- */
.hf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(760px, 100vh, 960px);
  padding: 128px 0 72px;
  background: var(--sky-2);
}
/* Phones only: the hero keeps its own tall art (the square below has its own, blended into it).
   On desktop the hero sits on the shared .hf-world instead. */
.hf-scene { display: none; }
.hf-scene-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
  opacity: 0; transition: opacity 1.2s var(--e-out);
}
.hf-scene-video.is-on { opacity: 1; }
.hf-grain {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
  opacity: var(--grain); mix-blend-mode: var(--grain-blend);
}
/* keeps the headline on a quiet ground, the way the town square's scrim does */
.hf-wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(var(--bg-rgb), .72) 0%, rgba(var(--bg-rgb), .2) 30%, rgba(var(--bg-rgb), 0) 52%),
    linear-gradient(100deg, rgba(var(--bg-rgb), .5) 0%, rgba(var(--bg-rgb), .22) 34%, rgba(var(--bg-rgb), 0) 56%);
}
.hf-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 20%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--bg-rgb), 0), var(--bg));
}

.hf-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

/* ---------- Headline ---------- */
.hf-copy { padding-bottom: 96px; }
.hf-headline {
  font-family: 'Bree Serif', serif;
  font-weight: 400;
  font-size: clamp(40px, 3.8vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--text);
  max-width: 12.5ch;
  margin: 0 0 26px;
  text-wrap: balance;
}
/* the audience word is a dropdown: the word sweeps on its own (the underline fills while it waits) until a pick */
.hf-pick-wrap { position: relative; display: block; }
.hf-picker {
  appearance: none; background: none; border: 0; margin: 0; padding: 0;
  font: inherit; letter-spacing: inherit; color: var(--accent); cursor: pointer;
  display: inline-flex; align-items: center; gap: .16em; border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}
.hf-picker:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.hf-rot { position: relative; display: inline-block; height: 1.16em; width: var(--rw, 4.3em); transition: width .45s var(--e-out) var(--rd, .1s); }
.hf-prog { position: absolute; left: 0; right: 0; bottom: .015em; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 20%, transparent); }
/* the hero's timer: one run per audience (home.js sets --dwell and restarts it); its end moves to the next audience */
.hf-prog::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.hf-prog.is-running::after { animation: hfProg var(--dwell, 5200ms) linear forwards; }
.hf-prog.is-paused::after { animation-play-state: paused; }
.hf-picker.is-set .hf-prog::after { animation: none; transform: none; }
@keyframes hfProg { to { transform: scaleX(1); } }
.hf-chev {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: .7em; height: .7em; border-radius: 50%; transform: translateY(.06em);
  background: color-mix(in srgb, var(--accent) 13%, transparent); transition: background .2s;
}
.hf-chev svg { width: .44em; height: .44em; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.hf-picker:hover .hf-chev { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.hf-picker[aria-expanded="true"] .hf-chev svg { transform: rotate(180deg); }
/* the hint: a soft ring keeps pulsing off the chevron until the visitor touches the dropdown */
.hf-chev::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: hfHint 2.6s var(--e-out) 1.4s 3; }   /* three hints, then still */
.hf-picker.is-touched .hf-chev::after { animation: none; }
@keyframes hfHint { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.75); opacity: 0; } }
.hf-menu {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 30;
  min-width: 250px; margin: 0; padding: 6px; list-style: none;
  background: var(--bg); border: 1px solid rgba(var(--ink-rgb), .1); border-radius: 14px;
  box-shadow: 0 26px 60px -24px rgba(20, 16, 14, .5);
  font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 500; line-height: 1.2; letter-spacing: 0;
}
.hf-menu[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .hf-menu:not([hidden]) { animation: hfMenuIn .18s var(--e-out) both; } }
@keyframes hfMenuIn { from { opacity: 0; translate: 0 -6px; } }   /* translate, so the phone's centring transform stays */
.hf-menu li { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 14px; border-radius: 9px; color: var(--text); cursor: pointer; }
.hf-menu li:hover, .hf-menu li.is-focus { background: rgba(var(--ink-rgb), .06); }
.hf-menu li[aria-selected="true"] { color: var(--accent); font-weight: 600; }
.hf-menu li[aria-selected="true"]::after { content: ""; flex: none; width: 12px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(-45deg); }
.hf-word {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  color: var(--accent);
  opacity: 0;
  transform: translateY(0.42em);
  transition: opacity 0.45s var(--e-out), transform 0.65s var(--e-out);
}
/* words not on screen are hidden outright, so copying the headline or reading it aloud gives one word, not four */
.hf-word:not(.is-active):not(.is-leaving) { visibility: hidden; }
.hf-word.is-active { opacity: 1; transform: none; }
.hf-word.is-leaving { opacity: 0; transform: translateY(-0.42em); }

.hf-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(var(--ink-rgb), 0.72);
  max-width: 28ch;
  margin: 0;
}
.hf-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 34px; }
.hf-alt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: rgba(var(--ink-rgb), 0.62);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(var(--ink-rgb), 0.25);
  transition: color 0.2s;
}
.hf-alt:hover { color: var(--text); }

/* ---------- Product stage ---------- */
.hf-show { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* desktop: the product side runs past the site column toward the window edge, so the web apps read at full size */
@media (min-width: 1025px) {
  .hf-show { margin-right: calc(-1 * clamp(0px, (100vw - 1152px) / 2 - 32px, 220px)); }
}
.hf-stage { position: relative; height: 600px; }

.hf-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.985);
  transition: opacity 0.55s var(--e-out), transform 0.7s var(--e-out), visibility 0s linear 0.7s;
}
.hf-panel.is-active > .hf-phone, .hf-panel.is-active > .hf-window, .hf-panel.is-active > .hf-code, .hf-panel.is-active > .hf-pipeline { animation: hfFloat 7s var(--e-io) infinite 1s; }
@keyframes hfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* phones: windows sit at the top of the stage, so each slide's payoff (toast, credit, first rows) is in the first screen */
@media (max-width: 600px) { .hf-panel { align-items: flex-start; } }
.hf-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.7s var(--e-out) 0.12s, transform 0.85s var(--e-out) 0.12s, visibility 0s;
}

/* Phone: same frame as the site's .phone-mockup, sized to the stage */
.hf-phone {
  position: relative;
  width: 244px;
  padding: 11px;
  background: #1a1a1a;
  border-radius: 40px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 34px 70px -22px rgba(20, 16, 14, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hf-phone::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 22px;
  background: #111;
  border-radius: 12px;
  z-index: 2;
}
.hf-phone video, .hf-phone img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  object-position: top;
  border-radius: 29px;
  background: #111;
}

/* Browser window for the desktop products */
.hf-window {
  width: 100%;
  max-width: 820px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  box-shadow: 0 34px 70px -26px rgba(20, 16, 14, 0.45);
}
.hf-window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
}
.hf-window-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--ink-rgb), 0.16); flex: none; }
.hf-window-bar span {
  margin: 0 auto;
  transform: translateX(-16px);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  background: rgba(var(--ink-rgb), 0.05);
  padding: 3px 12px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.hf-window > video, .hf-window > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top;
  background: #fff;
}
.hf-window--dark { background: #151312; border-color: rgba(255, 255, 255, 0.08); }
.hf-window--dark .hf-window-bar { background: #1d1b19; border-bottom-color: rgba(255, 255, 255, 0.06); }
.hf-window--dark .hf-window-bar i { background: rgba(255, 255, 255, 0.16); }
.hf-window--dark .hf-window-bar span { color: #8f8a84; background: rgba(255, 255, 255, 0.06); }
.hf-window--dark > img { aspect-ratio: 1100 / 532; background: #151312; }

/* Newsreel Studio (rebuilt from the Studio v4 prototype; stays light in both themes, like the product) */
.hf-window--studio { background: #F9F7F3; border-color: rgba(20, 16, 14, 0.1); }
.hf-window--studio .hf-window-bar { background: #F1EEE8; border-bottom-color: rgba(20, 16, 14, 0.07); }
.hf-window--studio .hf-window-bar i { background: rgba(20, 16, 14, 0.16); }
.hf-window--studio .hf-window-bar span { color: #7a746d; background: rgba(20, 16, 14, 0.05); }
.hf-studio { display: flex; flex-direction: column; gap: 18px; padding: 26px 26px 28px; min-height: 338px; }
.hf-studio-brand {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0;
  font-family: 'Bree Serif', serif; font-size: 18px; color: #14100E;
}
.hf-studio-brand svg { color: #14100E; }
.hf-studio-input {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid rgba(20, 16, 14, 0.1);
  border-radius: 14px;
  box-shadow: 0 10px 26px -16px rgba(20, 16, 14, 0.3);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #14100E;
  white-space: nowrap;
  overflow: hidden;
}
.hf-studio-ph { position: absolute; left: 16px; right: 16px; overflow: hidden; text-overflow: ellipsis; color: #8a847d; transition: opacity 0.2s; }
.hf-studio.has-text .hf-studio-ph { opacity: 0; }
.hf-studio-text { overflow: hidden; text-overflow: ellipsis; }
.hf-caret { flex: none; width: 1.5px; height: 18px; margin-left: 1px; background: #14100E; opacity: 0; }
.hf-studio.is-typing .hf-caret { opacity: 1; animation: hfBlink 1s steps(1) infinite; }
@keyframes hfBlink { 50% { opacity: 0; } }

.hf-studio-result {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--e-out), transform 0.6s var(--e-out);
}
.hf-studio.is-done .hf-studio-result { opacity: 1; transform: none; }
.hf-studio-clip { border-radius: 16px; overflow: hidden; background: #111; box-shadow: 0 14px 30px -16px rgba(20, 16, 14, 0.5); }
.hf-studio-clip video { display: block; width: 100%; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; }
.hf-studio-ready { margin: 0 0 4px; font-family: 'Bree Serif', serif; font-size: 18px; color: #14100E; }
.hf-studio-meta { margin: 0 0 12px; font-family: 'DM Sans', sans-serif; font-size: 13.5px; line-height: 1.45; color: #6b655f; max-width: 30ch; }
.hf-studio-btn {
  display: inline-flex;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--red);
  color: #14100E;
}

/* API call: dark in both themes, like a terminal */
.hf-code {
  width: 100%;
  max-width: 540px;
  border-radius: 14px;
  overflow: hidden;
  background: #13110F;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 34px 70px -26px rgba(20, 16, 14, 0.55);
}
.hf-code-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
}
.hf-code-bar em { font-style: normal; letter-spacing: 0.08em; color: #8a847d; }
.hf-code pre {
  margin: 0;
  padding: 16px 18px 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  line-height: 1.62;
  color: #CFC7BC;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.hf-code .c-key { color: #FF8A70; }
.hf-code .c-str { color: #EDE5D8; }
.hf-code .c-dim { color: #6f6963; }

/* Prototype-only marker on the writers stand-in */
.hf-standin {
  position: absolute;
  top: 9%;
  right: 7%;
  margin: 0;
  max-width: 170px;
  padding: 6px 9px;
  border-radius: 3px;
  background: var(--yellow);
  color: #14100E;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.35;
  transform: rotate(3deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* ---------- Under the stage: the audience picker and the caption. No card. ----------
   The text sits on the scene; a feathered glow (no edges) and a text halo keep it legible. */
.hf-card { position: relative; z-index: 3; padding: 0 4px; }
.hf-card::before {
  content: ""; position: absolute; inset: -30px -48px -26px; z-index: -1; pointer-events: none;
  background: rgba(var(--bg-rgb), .9);
  -webkit-mask-image: radial-gradient(farthest-side, #000 58%, transparent 100%);
  mask-image: radial-gradient(farthest-side, #000 58%, transparent 100%);
}
.hf-card .hf-tabs, .hf-card .hf-cap { text-shadow: 0 0 2px rgba(var(--bg-rgb), .9), 0 0 10px rgba(var(--bg-rgb), .8); }

.hf-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; }
.hf-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  min-width: 0; padding: 6px 0 4px; margin: 0;
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; text-align: left; white-space: nowrap;
  color: rgba(var(--ink-rgb), .64);
  background: none; border: 0; cursor: pointer; transition: color .2s;
}
.hf-tab:hover { color: var(--text); }
.hf-tab.is-active { color: var(--text); font-weight: 600; }
.hf-tab:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.hf-tab i {
  order: -1; position: relative; display: block; width: 100%; height: 3px; border-radius: 2px; overflow: hidden;
  background: rgba(var(--ink-rgb), .14); transition: background .2s;
}
.hf-tab:hover i { background: rgba(var(--ink-rgb), .25); }
.hf-tab.is-past i { background: var(--b-right); }
.hf-tab i::after { content: ""; position: absolute; inset: 0; background: var(--red); transform-origin: left; transform: scaleX(var(--p, 0)); }

.hf-caps { display: grid; }
.hf-cap {
  grid-area: 1 / 1; margin: 0;
  font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.5; color: var(--text);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--e-out), visibility 0s linear .4s;
}
.hf-cap.is-active { opacity: 1; visibility: visible; transition: opacity .5s var(--e-out) .15s, visibility 0s; }
.hf-cap a {
  display: table; margin-top: 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 500; color: var(--text);
  text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.hf-cap a::after { content: " \2192"; }


/* ---------- Tablet and phone ---------- */
@media (max-width: 1024px) {
  /* the headline starts well clear of the nav: 88px from the hamburger to its capitals, about three times the
     largest gap below it, so it reads as the start of the page; plus the event banner's height while it shows
     (Jack, Oct 2; phone spacing critic) */
  .hf-hero { min-height: 0; padding: 136px 0 36px; transition: padding-top .3s var(--e-io); }
  .mm-banner:not([hidden]):not(.is-closing) ~ .hf-descent .hf-hero { padding-top: 178px; }
  .hf-grid { grid-template-columns: 1fr; gap: 30px; justify-items: center; }
  .hf-copy { padding-bottom: 0; text-align: center; max-width: 640px; }
  .hf-headline { margin-left: auto; margin-right: auto; max-width: 14ch; }
  .hf-word { left: 0; right: 0; text-align: center; }
  .hf-menu { left: 50%; transform: translateX(-50%); }
  .hf-picker .hf-word { left: 50%; right: auto; translate: -50% 0; text-align: left; }  /* the dropdown hugs the word, so measure the word itself */
  .hf-pick-wrap { width: max-content; position: relative; left: 50%; transform: translateX(-50%); }  /* centred on the screen even when wider than the headline box */
  .hf-sub { margin: 0 auto; }
  .hf-actions { justify-content: center; }
  .hf-show { width: 100%; max-width: 760px; }
  .hf-stage { height: 520px; }
}
@media (max-width: 600px) {
  .mm-banner:not([hidden]):not(.is-closing) ~ .hf-descent .hf-hero { padding-top: 176px; }   /* the phone banner is 40px */
  .hf-headline { font-size: 34px; letter-spacing: -0.02em; margin-bottom: 18px; }
  .hf-sub { font-size: 17px; }
  .hf-actions { margin-top: 26px; gap: 16px; }
  .hf-actions .btn-lg { padding: 17px 34px; }
  .hf-stage { height: 440px; }
  .hf-menu { font-size: 16px; min-width: 220px; }
  .hf-phone { width: 190px; padding: 9px; border-radius: 32px; }
  .hf-phone::before { top: 11px; width: 60px; height: 18px; }
  .hf-phone video, .hf-phone img { border-radius: 24px; }
  .hf-window-bar { height: 28px; padding: 0 10px; }
  .hf-window-bar i { width: 7px; height: 7px; }
  .hf-window-bar span { font-size: 10px; padding: 2px 8px; }
  .hf-studio { padding: 16px 14px 18px; gap: 12px; min-height: 0; }
  .hf-studio-brand { font-size: 15px; }
  .hf-studio-input { min-height: 44px; font-size: 12px; padding: 0 12px; }
  .hf-studio-ph { left: 12px; right: 12px; }
  .hf-studio-result { grid-template-columns: 70px 1fr; gap: 12px; }
  .hf-studio-ready { font-size: 15px; }
  .hf-studio-meta { font-size: 12px; margin-bottom: 8px; }
  .hf-studio-btn { font-size: 11px; padding: 6px 10px; }
  .hf-code-bar { padding: 9px 12px; font-size: 10px; }
  .hf-code { position: relative; }
  .hf-code pre { font-size: 9.6px; line-height: 1.55; padding: 12px 12px 14px; white-space: pre; overflow: hidden; }
  .hf-code::after { content: ""; position: absolute; top: 30px; right: 0; bottom: 0; width: 42px; background: linear-gradient(to right, rgba(19, 17, 15, 0), #13110F); pointer-events: none; }
  .hf-standin { top: 3%; right: 1%; max-width: 132px; font-size: 10px; }
  .hf-cap { font-size: 14px; }
  .hf-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; margin-bottom: 12px; }
  .hf-tab { min-height: 44px; justify-content: flex-start; padding: 8px 0 6px; font-size: 12px; }
  .hf-card::before { inset: -22px -20px -20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hf-word, .hf-panel, .hf-panel.is-active, .hf-cap, .hf-cap.is-active, .hf-studio-result { transition: opacity 0.2s var(--e-out); transform: none !important; }
  .hf-studio .hf-caret { animation: none; }
}

/* ---------- AI: the licensing pipeline ---------- */
.hf-pipeline {
  position: relative;
  width: 100%;
  max-width: 540px;
  padding: 18px 18px 14px;
}
/* no card: a feathered glow (no edges) gives the diagram quiet ground on the scene */
.hf-pipeline::before {
  content: ""; position: absolute; inset: -34px -44px; z-index: -1; pointer-events: none;
  background: rgba(var(--bg-rgb), .97);
  -webkit-mask-image: radial-gradient(farthest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(farthest-side, #000 72%, transparent 100%);
}
.pl-kicker {
  margin: 0 0 6px;
  text-align: center;
  font-family: 'Bree Serif', serif;
  font-size: 21px;
  line-height: 1.2;
  color: var(--text);
}
.pl-kicker span + span { color: var(--accent); }
.pl-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pl-svg--tall { display: none; }
.pl-line { fill: none; stroke: rgba(var(--ink-rgb), .22); stroke-width: 1.4; }
.pl-line--next { stroke-dasharray: 5 6; animation: plDash 1.6s linear infinite; }
@keyframes plDash { to { stroke-dashoffset: -22; } }
.pl-dot { fill: var(--red); }
.pl-node rect { fill: var(--bg); stroke: rgba(var(--ink-rgb), .18); stroke-width: 1.2; }
.pl-node text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-anchor: middle;
  fill: var(--text);
}
.pl-node--next rect { fill: transparent; stroke-dasharray: 4 4; stroke: rgba(var(--ink-rgb), .26); }
.pl-node--next text { fill: rgba(var(--ink-rgb), .68); }
.pl-core { fill: var(--bg); stroke: var(--red); stroke-width: 2.2; }
.pl-hub text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-anchor: middle;
  fill: var(--text);
}
.pl-ring { fill: none; stroke: var(--red); transform-box: fill-box; transform-origin: center; }
.pl-ring--1 { stroke-opacity: .28; stroke-width: 1.2; animation: plPulse 3.2s var(--e-out) infinite; }
.pl-ring--2 { stroke-opacity: .14; stroke-width: 1; animation: plPulse 3.2s var(--e-out) infinite 1.1s; }
@keyframes plPulse { 0% { transform: scale(.9); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.12); opacity: 0; } }
.pl-foot {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--ink-rgb), .08);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(var(--ink-rgb), .82);
}
.pl-legend { flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text); }
.pl-legend i { flex: none; display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--red); }
.pl-legend i.is-next { border-top: 2px dashed rgba(var(--ink-rgb), .4); margin-left: 8px; }
.pl-stat b { color: var(--accent); font-weight: 600; }
.pl-stat em { font-style: normal; opacity: .75; }

@media (max-width: 600px) {
  .hf-pipeline { padding: 12px 10px 10px; }
  .hf-pipeline::before { inset: -26px -18px; }
  .pl-kicker { font-size: 16px; margin-bottom: 4px; }
  .pl-svg--wide { display: none; }
  .pl-svg--tall { display: block; max-height: 280px; }
  .pl-node text { font-size: 11px; letter-spacing: .04em; }
  .pl-foot { flex-direction: column; gap: 4px; font-size: 13px; margin-top: 4px; padding-top: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-line--next, .pl-ring, .hf-panel.is-active > * { animation: none !important; }
  .hf-scene-video { display: none; }
  .pl-dot { display: none; }
}

/* nothing in the scene animates while the hero is scrolled away */
.hf-hero.is-offscreen .pl-svg * { animation-play-state: paused !important; }


/* ======================================================================
   The descent: hero and town square on one tall picture. No cards.
   ====================================================================== */
.hf-descent { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(to bottom, var(--sky-2) 0 50%, var(--bg) 85%); }
.hf-descent > section { position: relative; z-index: 2; }
.hf-descent .hf-hero { background: transparent; }
.hf-descent .hf-fade, .hf-descent .hf-grain { display: none; }
/* the wash keeps the headline quiet; it fades out before the hero ends, so there is no seam */
.hf-descent .hf-wash {
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 92%);
}
/* the picture ends in plain ground, where the square's heading sits */
.hf-descent::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--bg-rgb), 0) 0%, rgba(var(--bg-rgb), .8) 55%, var(--bg) 85%);
}

/* the picture, sized by home.js to cover the descent at the art's own 3712:4608 shape */
.hf-world {
  position: absolute; top: 0; left: 50%; z-index: 0;
  width: var(--ww, 100%); height: var(--wh, 100%);
  transform: translateX(-50%);
  background: url("/images/home-v2/scene/desktop-light-descent.jpg") top center / 100% 100% no-repeat;
  /* the art's last 7% is a flat padded band; fade the picture (and its loops) out before it */
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 92.5%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 92.5%);
}
[data-theme="dark"] .hf-world { background-image: url("/images/home-v2/scene/desktop-dark-descent.jpg"); }
.hf-world-video { position: absolute; left: 0; width: 100%; height: 45.3125%; object-fit: fill; opacity: 0; transition: opacity 1.2s var(--e-out); }
.hf-world-video.is-on { opacity: 1; }
.hf-world-video--top { top: 0; }
.hf-world-video--square { top: 52.0833%; }

/* birds crossing the sky: real proportions (the old stretched viewBox drew them as 2px dashes that flickered) */
.hf-birds { position: absolute; left: 0; top: 3%; width: 100%; height: 18%; overflow: hidden; pointer-events: none; }
.hf-bird { position: absolute; left: 0; top: var(--by); width: 22px; height: 10px; animation: hfBird var(--bd, 40s) linear infinite; animation-delay: var(--bdl, 0s); }
.hf-bird svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 70%; animation: hfFlap .8s var(--e-io) infinite alternate; }
.hf-descent.is-offscreen .hf-bird, .hf-descent.is-offscreen .hf-bird svg { animation-play-state: paused; }
.hf-bird path { fill: none; stroke: rgba(46, 38, 33, .9); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hf-bird--1 { --bd: 38s; --bdl: -6s; --by: 26%; }
.hf-bird--2 { --bd: 46s; --bdl: -20s; --by: 52%; width: 18px; height: 8px; }
.hf-bird--3 { --bd: 42s; --bdl: -31s; --by: 12%; width: 20px; height: 9px; }
[data-theme="dark"] .hf-bird path { stroke: rgba(246, 240, 228, .75); }
.hf-bird--1 { width: 26px; height: 11px; }
@keyframes hfBird { from { transform: translate(-40px, 0); } to { transform: translate(calc(100vw + 40px), -18px); } }
@keyframes hfFlap { from { transform: scaleY(1); } to { transform: scaleY(.55); } }

/* where each group stands: a warm pool on the ground (lamplight), only for the group in turn */
.hf-spots { position: absolute; inset: 0; pointer-events: none; }
.hf-spot {
  position: absolute; left: var(--x); top: var(--y); width: var(--s, 9%); aspect-ratio: 2.6 / 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  opacity: 0; transition: opacity .7s var(--e-out);
  background: radial-gradient(closest-side, rgba(255, 178, 104, .7), rgba(255, 178, 104, .28) 55%, rgba(255, 178, 104, 0));
}
[data-theme="dark"] .hf-spot { background: radial-gradient(closest-side, rgba(255, 154, 60, .75), rgba(255, 154, 60, .3) 55%, rgba(255, 154, 60, 0)); }
.hf-descent[data-pop="read"] .hf-spot[data-pop="read"],
.hf-descent[data-pop="write"] .hf-spot[data-pop="write"],
.hf-descent[data-pop="inst"] .hf-spot[data-pop="inst"] { opacity: 1; }

/* ---------- the square: just the heading over the picture, centred ---------- */
.hf-square { display: flex; flex-direction: column; align-items: stretch; min-height: var(--sq-min, 760px); padding: 52px 0 46px; }
.hf-square-art { display: none; }
.hf-square-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; text-align: center; }
/* no card: one feathered glow (no edges) behind the heading and its button */
.hf-square-inner::before {
  content: ""; position: absolute; left: 50%; top: -60px; width: min(1180px, 100%); height: calc(100% + 130px);
  transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: rgba(var(--bg-rgb), .94);
  -webkit-mask-image: radial-gradient(farthest-side, #000 58%, transparent 100%);
  mask-image: radial-gradient(farthest-side, #000 58%, transparent 100%);
}
.hf-eyebrow {
  margin: 0 0 12px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--accent);
}
.hf-square-hed {
  margin: 0;
  font-family: 'Bree Serif', serif; font-weight: 400;
  font-size: clamp(34px, 3.7vw, 54px); line-height: 1.04; letter-spacing: -.015em;
  color: var(--text); text-wrap: balance;
}
.hf-square-hed em { font-style: normal; color: var(--accent); }
.hf-square-cta { gap: 10px; }
.hf-legend, .hf-marker { display: none; }

/* ---------- desktop: the groups are labels in the picture, with leader lines ---------- */
.hf-annot {
  position: absolute; top: 0; left: 50%; z-index: 3;
  width: var(--ww, 100%); height: var(--wh, 100%);
  transform: translateX(-50%);
  pointer-events: none;
}
.hf-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hf-lead path { fill: none; stroke: var(--b-left); stroke-opacity: .6; stroke-width: 1px; vector-effect: non-scaling-stroke; transition: stroke .3s, stroke-width .3s, stroke-opacity .3s; }
.hf-lead .hf-end { fill: var(--b-left); fill-opacity: .7; transition: fill .3s; }
[data-theme="dark"] .hf-lead path { stroke: rgba(246, 240, 228, .45); stroke-opacity: 1; }
[data-theme="dark"] .hf-lead .hf-end { fill: rgba(246, 240, 228, .55); }
.hf-descent[data-pop="read"] .hf-lead[data-pop="read"] path,
.hf-descent[data-pop="write"] .hf-lead[data-pop="write"] path,
.hf-descent[data-pop="inst"] .hf-lead[data-pop="inst"] path { stroke: var(--red); stroke-opacity: 1; stroke-width: 1.6px; }
.hf-descent[data-pop="read"] .hf-lead[data-pop="read"] .hf-end,
.hf-descent[data-pop="write"] .hf-lead[data-pop="write"] .hf-end,
.hf-descent[data-pop="inst"] .hf-lead[data-pop="inst"] .hf-end { fill: var(--red); fill-opacity: 1; }

.hf-tag {
  all: unset; box-sizing: border-box; position: absolute; left: var(--x); top: var(--y);
  width: 264px; padding: 8px 2px 10px; cursor: pointer; pointer-events: auto;
  text-shadow: 0 0 2px rgba(var(--bg-rgb), .95), 0 0 8px rgba(var(--bg-rgb), .9), 0 0 16px rgba(var(--bg-rgb), .7);
}
.hf-tag--end { transform: translateX(-100%); text-align: right; }
.hf-tag--centre { transform: translateX(-50%); text-align: center; }
.hf-tag--mid { transform: translate(-50%, -50%); width: 228px; text-align: center; }
.hf-tag--mid span { font-size: 15px; }
.hf-tag b {
  display: block; margin: 0 0 4px;
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text); transition: color .3s;
}
.hf-tag span { display: block; font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.4; color: var(--text); }
.hf-tag::before {
  content: ""; position: absolute; inset: -16px -26px -14px; z-index: -1; pointer-events: none;
  background: rgba(var(--bg-rgb), .92);
  -webkit-mask-image: radial-gradient(farthest-side, #000 58%, transparent 100%);
  mask-image: radial-gradient(farthest-side, #000 58%, transparent 100%);
}
.hf-tag[aria-pressed="true"] b { color: var(--accent); }
.hf-tag { padding-top: 14px; }
.hf-tag i { position: absolute; left: 2px; right: 2px; top: 2px; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(var(--ink-rgb), .12); }
.hf-tag i::after, .hf-pick i::after { content: ""; position: absolute; inset: 0; background: var(--red); transform-origin: left; transform: scaleX(var(--p, 0)); }
.hf-tag--end i::after { transform-origin: right; }
.hf-tag--centre i::after, .hf-tag--mid i::after { transform-origin: center; }
.hf-tag:hover b { color: var(--accent); }
.hf-tag:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 4px; }

/* ---------- phones and portrait tablets ---------- */
@media (min-width: 821px) and (max-width: 1100px) {
  .hf-tag { width: 220px; }
  .hf-tag span { font-size: 15px; }
}
@media (max-width: 820px) {
  .hf-world, .hf-annot, .hf-descent::after { display: none; }
  .hf-descent { background: var(--bg); }
  .hf-descent .hf-hero { background: var(--sky-2); }
  .hf-descent .hf-grain { display: block; }
  .hf-descent .hf-wash { -webkit-mask-image: none; mask-image: none; }
  .hf-scene {
    display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden;
    background: var(--sky-2) url("/images/home-v2/scene/mobile-light.jpg") center bottom / cover no-repeat;
  }
  [data-theme="dark"] .hf-scene { background-image: url("/images/home-v2/scene/mobile-dark.jpg"); }

  /* the square art, 140% wide, blended into the hero art above and fading to plain ground below */
  .hf-square { min-height: 150vw; padding: 50px 0 36px; }  /* shorter on phones (design critic, loop round 1); the art's fade ends at the foot */
  .hf-square-art {
    display: block; position: absolute; left: -20%; top: -90px; width: 140%; aspect-ratio: 1536 / 2752; z-index: 0;
    background: url("/images/home-v2/scene/mobile-light-square.jpg") center top / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 110px, #000 calc(150vw - 60px), transparent calc(150vw + 90px));
    mask-image: linear-gradient(to bottom, transparent 0, #000 110px, #000 calc(150vw - 60px), transparent calc(150vw + 90px));
  }
  [data-theme="dark"] .hf-square-art { background-image: url("/images/home-v2/scene/mobile-dark-square.jpg"); }
  .hf-square-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; transition: opacity 1.2s var(--e-out); }
  .hf-square-video.is-on { opacity: 1; }

  .hf-square-inner { position: relative; z-index: 1; gap: 18px; }
  .hf-square-inner::before { top: -40px; height: calc(100% + 90px); width: 120%; }
  .hf-square-hed { font-size: 30px; margin-bottom: 18px; }
  /* the art shows through here, then the list sits on plain ground below it */
  .hf-legend {
    display: block; list-style: none; margin: calc(140vw * 2752 / 1536 - 90px - 250px) 0 0; padding: 0; width: 100%;
    text-align: left; border-top: 1px solid rgba(var(--ink-rgb), .1);
  }
  .hf-legend li { margin: 0; border-bottom: 1px solid rgba(var(--ink-rgb), .1); }
  .hf-legend .hf-pick {
    all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px;
    width: 100%; padding: 14px 2px 15px; cursor: pointer;
  }
  .hf-legend .hf-pick:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }
  .hf-legend em, .hf-marker {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; font-style: normal;
    background: #F6F0E4; color: #14100E; border: 1px solid rgba(20, 16, 14, .3);
    transition: background .3s, border-color .3s;
  }
  .hf-legend em { grid-row: 1 / span 2; margin-top: 1px; }
  .hf-legend b {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--text);
  }
  .hf-legend span { font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.45; color: rgba(var(--ink-rgb), .8); }
  .hf-legend i { position: absolute; left: 0; right: 0; top: -1px; height: 2px; overflow: hidden; }
  .hf-legend .hf-pick[aria-pressed="true"] em { background: var(--red); border-color: var(--red); }
  .hf-legend .hf-pick[aria-pressed="true"] b { color: var(--accent); }

  .hf-marker { display: inline-flex; position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
  .hf-descent[data-pop="read"] .hf-marker[data-pop="read"],
  .hf-descent[data-pop="write"] .hf-marker[data-pop="write"],
  .hf-descent[data-pop="inst"] .hf-marker[data-pop="inst"] { background: var(--red); border-color: var(--red); }
}
@media (prefers-reduced-motion: reduce) {
  .hf-bird, .hf-bird svg { animation: none !important; }
  .hf-birds, .hf-world-video, .hf-square-video { display: none !important; }
}


/* proof, on plain ground below the art (design critic, Oct 1): press | schools, a hairline between */
.hf-press {
  display: grid; grid-template-columns: auto 1px auto; column-gap: 56px; justify-content: center; align-items: start;
  padding-top: 8px; text-align: left; position: relative;
}
/* no box: a full-width mist rises out of the page under the row, so it reads cleanly over the picture */
.hf-press::before { content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; top: -90px; bottom: -8px; transform: translateX(-50%); pointer-events: none; background: linear-gradient(to bottom, rgba(var(--bg-rgb), 0) 0%, rgba(var(--bg-rgb), .9) 55%, var(--bg) 80%); }
.hf-press-label { margin: 0 0 14px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.4; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--ink-rgb), .55); }
.hf-press-rule { width: 1px; height: 52px; align-self: center; background: rgba(var(--ink-rgb), .14); }
[data-theme="dark"] .hf-press-rule { background: rgba(var(--ink-rgb), .16); }
.hf-press-logos, .hf-press-names { display: flex; align-items: center; height: 24px; }
.hf-press-logos { gap: 36px; }
.hf-press-logos a { display: block; line-height: 0; }
.hf-press-logos img { display: block; width: auto; filter: var(--logo-filter); opacity: .55; transition: opacity .2s; }
.hf-press-logos a:hover img { opacity: .85; }
.hf-logo--forbes { height: 20px; }
.hf-logo--cnn { height: 18px; }
.hf-logo--gazette { height: 24px; }
.hf-press-names { gap: 28px; }
.hf-uni { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -.005em; color: rgba(var(--ink-rgb), .55); white-space: nowrap; }
.hf-press-brag { margin: 10px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: rgba(var(--ink-rgb), .55); }
.hf-press + .hf-why { padding-top: 72px; }
/* desktop: the art is already transparent for its last ~130px, so the proof rises into that plain ground */

@media (max-width: 600px) {
  .hf-press { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-top: 32px; }
  .hf-press-group { display: flex; flex-direction: column; align-items: center; }
  .hf-press-rule { width: 40px; height: 1px; margin: 20px 0; }
  .hf-press-label { font-size: 10.5px; margin-bottom: 12px; }
  .hf-press-logos { gap: 28px; }
  .hf-logo--forbes { height: 18px; }
  .hf-logo--cnn { height: 16px; }
  .hf-logo--gazette { height: 21px; }
  .hf-press-names { gap: 18px; }
  .hf-uni { font-size: 14px; }
  .hf-press-brag { font-size: 11px; white-space: nowrap; }
  .hf-press + .hf-why { padding-top: 56px; }
}

/* ======================================================================
   Below the square (design critic round 3): plain sections, separated by space
   and a red Mono eyebrow. No cards, no grey bands, no hairlines. One accent.
   ====================================================================== */
.hf-why, .hf-what, .hf-how, .hf-people, .hf-faq, .hf-writers { --accent: #B02B0D; background: var(--bg); padding: 120px 0 0; }
[data-theme="dark"] :is(.hf-why, .hf-what, .hf-how, .hf-people, .hf-faq, .hf-writers) { --accent: #FF6343; }
.hf-faq { padding-bottom: 120px; }
.hf-sec-hed {
  margin: 0 0 48px; max-width: 22ch;
  font-family: 'Bree Serif', serif; font-weight: 400;
  font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.015em;
  color: var(--text); text-wrap: balance;
}
/* the one sentence under a section heading (Why now, What Newsreel is) */
.hf-lede { margin: 24px 0 0; max-width: 40ch; font-family: 'DM Sans', sans-serif; font-size: 18px; line-height: 1.5; color: rgba(var(--ink-rgb), .76); }
.hf-lede a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(var(--ink-rgb), .35); text-underline-offset: 3px; }
.hf-lede a:hover { text-decoration-color: var(--accent); }
/* What Newsreel is: the long sentence takes the section-heading size on a wider measure */
.hf-sec-hed.hf-what-hed { max-width: 32ch; margin-bottom: 0; }
.hf-textlink {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 500; color: var(--text);
  text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.hf-textlink::after { content: " \2192"; }
.hf-textlink:hover { color: var(--accent); }

/* why now: one headline, two figures, the source */
/* Why now (design critic, Oct 1): one headline, two numbers, no charts */
.hf-why { padding-bottom: 0; }
.hf-why .hf-eyebrow { margin-bottom: 28px; }
.hf-why-hed { margin: 0 0 56px; max-width: 24ch; font-family: 'Bree Serif', serif; font-weight: 400; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -.015em; color: var(--text); text-wrap: balance; }
.hf-why-hed em { font-style: normal; color: var(--accent); }
.hf-why-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 96px; max-width: 920px; align-items: start; }
.hf-why-fig .hf-fig-num { margin: 0 0 12px; font-size: clamp(72px, 8vw, 112px); line-height: 1; letter-spacing: -.02em; }
.hf-why-fig .hf-fig-text { margin: 0; max-width: 30ch; font-size: 18px; line-height: 1.5; }
.hf-why-fig .hf-source { margin: 16px 0 0; font-size: 11.5px; }
@media (max-width: 820px) {
  .hf-why-hed { font-size: 32px; line-height: 1.1; margin-bottom: 40px; }
  .hf-why-figs { grid-template-columns: 1fr; row-gap: 48px; }
  .hf-why-fig .hf-fig-num { font-size: 80px; }
  .hf-why-fig .hf-fig-text { font-size: 17px; }
  .hf-why-fig .hf-source { font-size: 11px; }
}
.hf-fig-num {
  margin: 0 0 14px; font-family: 'Bree Serif', serif; font-weight: 400;
  font-size: clamp(64px, 7vw, 96px); line-height: 1; letter-spacing: -.02em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.hf-fig-text { margin: 0; max-width: 32ch; font-family: 'DM Sans', sans-serif; font-size: 18px; line-height: 1.5; color: rgba(var(--ink-rgb), .78); }
.hf-source { margin: 44px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: rgba(var(--ink-rgb), .55); }

/* how it works: three steps side by side, current 2.1 screenshots in a thin frame */
.hf-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.hf-step { margin: 0; }
/* the three graphics: drawn in the page's tokens, so they follow light and dark */
.g-svg { display: block; width: min(360px, 100%); height: auto; overflow: visible; margin: 0 0 30px; }
.g-cap { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .16em; fill: rgba(var(--ink-rgb), .55); }
.g-cap--red { fill: var(--accent); }
.g-cap--end { text-anchor: end; }
.g-cap--mid, .g-cap--loop { text-anchor: middle; }
.g-ph { fill: rgba(var(--ink-rgb), .1); }
.g-ph--dark { fill: rgba(var(--ink-rgb), .22); }
.g-track { fill: rgba(var(--ink-rgb), .1); }
.g-seal-dot { fill: var(--red); }
.g-seal-ring { fill: none; stroke: var(--red); stroke-width: 1.5; opacity: 0; }
.g-seal-check { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.g-seal-check--lg { stroke-width: 2.4; }
.g-seal, .g-seal-ring, .g-done, .g-arc-end, .g-progress, .g-post, .g-fill { transform-box: fill-box; transform-origin: center; }
.g-progress, .g-fill { transform-origin: 0 50%; }
/* 01 who's talking */
.g-anon { opacity: .3; }
.g-anon-av { fill: rgba(var(--ink-rgb), .1); }
.g-q { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 600; text-anchor: middle; fill: rgba(var(--ink-rgb), .45); }
.g-handle { font-family: 'IBM Plex Mono', monospace; font-size: 12px; fill: rgba(var(--ink-rgb), .7); }
.g-strike { stroke: var(--red); stroke-width: 1.6; stroke-dasharray: 232; stroke-dashoffset: 0; }
.g-name { font-family: 'Bree Serif', serif; font-size: 19px; fill: var(--text); }
.g-role { font-family: 'DM Sans', sans-serif; font-size: 12.5px; fill: rgba(var(--ink-rgb), .65); }
.g-verified { font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 600; fill: var(--text); }
/* 02 reporting, not posting */
.g-post { fill: rgba(var(--ink-rgb), .16); }
.g-thumb { fill: rgba(var(--ink-rgb), .12); }
.g-progress { fill: var(--red); }
/* 03 a habit that ends */
.g-loop-g { transform-box: view-box; transform-origin: 180px 142px; }
.g-loop { fill: none; stroke: rgba(var(--ink-rgb), .24); stroke-width: 1.4; stroke-dasharray: 4 7; }
.g-loop-head { fill: none; stroke: rgba(var(--ink-rgb), .4); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.g-ring { fill: none; stroke: rgba(var(--ink-rgb), .09); stroke-width: 14; }
.g-arc { fill: none; stroke: var(--red); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 14 100; stroke-dashoffset: 0; }
.g-center { font-family: 'Bree Serif', serif; font-size: 22px; text-anchor: middle; fill: var(--text); }
/* why now: to scale */
.g-bars { display: block; width: 100%; max-width: 320px; height: auto; overflow: visible; margin-top: 24px; }
.g-fill { fill: rgba(var(--ink-rgb), .38); }
.g-fill--red { fill: var(--red); }


@keyframes gAnon { 0%, 30% { opacity: 1; } 40%, 92% { opacity: .3; } 100% { opacity: 1; } }
@keyframes gStrike { 0%, 30% { stroke-dashoffset: 232; } 40%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 232; } }
@keyframes gVer { 0%, 40% { opacity: 0; transform: translateY(10px); } 52%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px); } }
@keyframes gPop { 0%, 52% { transform: scale(0); } 58% { transform: scale(1.25); } 62%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes gRing { 0%, 56% { opacity: 0; transform: scale(1); } 60% { opacity: .7; } 80%, 100% { opacity: 0; transform: scale(2.4); } }
@keyframes gPost { 0% { opacity: 0; transform: translateY(8px); } 8% { opacity: 1; transform: none; } 70% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes gProg { 0%, 8% { transform: scaleX(0); } 68%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes gDone { 0%, 68% { transform: scale(0); } 74% { transform: scale(1.25); } 78%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes gSpin { to { transform: rotate(360deg); } }
@keyframes gArc { 0%, 10% { stroke-dashoffset: 14; } 46%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 14; } }
@keyframes gArcEnd { 0%, 46% { transform: scale(0); } 52% { transform: scale(1.25); } 56%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes gCenter { 0%, 50% { opacity: 0; } 60%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gGrow { from { transform: scaleX(0); } }
/* 02: slides swipe past like the feed */
.g-slide { fill: rgba(var(--ink-rgb), .05); stroke: rgba(var(--ink-rgb), .1); }
.g-slide--accent { fill: var(--red); stroke: none; }
.g-ph--light { fill: rgba(255, 255, 255, .72); }
.g-quote { font-family: 'Bree Serif', serif; font-size: 44px; fill: #fff; }
.g-play-bg { fill: rgba(0, 0, 0, .45); }
.g-play { fill: #fff; }
.g-dots circle { fill: rgba(var(--ink-rgb), .2); }
.g-dots .is-on { fill: var(--red); }
/* 03: writers come out of their separate newsletters into one feed */
.g-solo { opacity: .32; }
.g-solo-av { fill: rgba(var(--ink-rgb), .2); }
.g-face-av { fill: rgba(var(--ink-rgb), .3); }
.g-media { fill: rgba(var(--ink-rgb), .14); }
.g-playc { fill: rgba(var(--ink-rgb), .35); }
.g-playt { fill: #fff; }
.g-solo-ring { fill: none; stroke: rgba(var(--ink-rgb), .28); stroke-width: 1.3; stroke-dasharray: 3 4; }
.g-env { fill: none; stroke: rgba(var(--ink-rgb), .42); stroke-width: 1.3; stroke-linejoin: round; }
.g-feed-line { stroke: rgba(var(--ink-rgb), .1); stroke-width: 1; }
.g-face { transform-box: view-box; }
.g-face-ring { fill: none; stroke: var(--red); stroke-width: 1.6; }

@keyframes gStrip { 0.00%, 14.88% { transform: translateX(0px); } 20.00%, 34.88% { transform: translateX(-112px); } 40.00%, 54.88% { transform: translateX(-224px); } 60.00%, 74.88% { transform: translateX(-336px); } 80.00%, 94.88% { transform: translateX(-448px); } 100% { transform: translateX(-560px); } }
@keyframes gGather { 0%, 22% { transform: translate(var(--sx), var(--sy)); } 48%, 90% { transform: translate(0, 0); } 100% { transform: translate(var(--sx), var(--sy)); } }
@keyframes gSolo { 0%, 24% { opacity: 1; } 40%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes gRow { 0%, 44% { opacity: 0; } 56%, 90% { opacity: 1; } 100% { opacity: 0; } }

.hf-step-num { margin: 0 0 6px; font-family: 'Bree Serif', serif; font-size: 22px; color: rgba(var(--ink-rgb), .42); }
.hf-step-hed { margin: 0 0 8px; font-family: 'Bree Serif', serif; font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--text); }
.hf-step-text { margin: 0; max-width: 30ch; font-family: 'DM Sans', sans-serif; font-size: 17px; line-height: 1.5; color: rgba(var(--ink-rgb), .76); }

/* the people: faces first, then the deal for writers */
.hf-faces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.hf-face { margin: 0; }
.hf-face img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; margin: 0 0 16px; }
.hf-face b { display: block; margin: 0 0 4px; font-family: 'Bree Serif', serif; font-weight: 400; font-size: 22px; color: var(--text); }
.hf-face span { display: block; font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.45; color: rgba(var(--ink-rgb), .7); }
.hf-more { margin: 22px 0 72px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: rgba(var(--ink-rgb), .55); }
.hf-deal-label { margin: 0 0 18px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.hf-deal-row { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.hf-deal-row li { margin: 0; font-family: 'DM Sans', sans-serif; font-size: 17px; line-height: 1.45; color: rgba(var(--ink-rgb), .78); }
.hf-deal-row b { display: block; margin: 0 0 6px; font-family: 'Bree Serif', serif; font-weight: 400; font-size: 40px; line-height: 1; color: var(--text); }

/* the FAQ keeps the site's hairline accordion */
.hf-faq-list { max-width: 760px; }

/* start reading: the page ends in the world it opened in */
.hf-end { position: relative; overflow: hidden; isolation: isolate; padding: 150px 0 120px; text-align: center; background: var(--sky-2); }
.hf-end-art {
  position: absolute; inset: 0; z-index: -2;
  background: url("/images/home-v2/scene/desktop-light-descent.jpg") 50% 16% / 100% auto no-repeat;
}
[data-theme="dark"] .hf-end-art { background-image: url("/images/home-v2/scene/desktop-dark-descent.jpg"); }
.hf-end-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--bg) 0%, rgba(var(--bg-rgb), 0) 32%, rgba(var(--bg-rgb), 0) 72%, var(--bg) 100%);
}
.hf-end-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hf-end-inner::before {
  content: ""; position: absolute; left: 50%; top: -70px; width: min(1040px, 100%); height: calc(100% + 140px);
  transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: rgba(var(--bg-rgb), .92);
  -webkit-mask-image: radial-gradient(farthest-side, #000 50%, transparent 100%);
  mask-image: radial-gradient(farthest-side, #000 50%, transparent 100%);
}
.hf-end-hed { margin: 0; font-family: 'Bree Serif', serif; font-weight: 400; font-size: clamp(44px, 5vw, 72px); line-height: 1; letter-spacing: -.02em; color: var(--text); }
.hf-end-price { margin: 0 0 12px; font-family: 'DM Sans', sans-serif; font-size: 20px; color: rgba(var(--ink-rgb), .82); }
.hf-end-links { display: flex; gap: 24px; margin: 8px 0 0; }
.hf-count { margin: 20px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: rgba(var(--ink-rgb), .68); }
.hf-count b { color: var(--text); font-weight: 600; }

/* footer: links readable, Merch gone (in the build) */
.footer .footer-col a, .footer .footer-bottom a { color: rgba(var(--ink-rgb), .62); }
.footer .footer-col a:hover, .footer .footer-bottom a:hover { color: var(--text); }

@media (max-width: 820px) {
  .hf-why, .hf-what, .hf-how, .hf-people, .hf-faq { padding-top: 72px; }
  .hf-faq { padding-bottom: 72px; }
  .hf-sec-hed { margin-bottom: 32px; }
  .hf-figures { grid-template-columns: 1fr; gap: 32px; }
  /* steps and faces become a row you swipe; the page itself never scrolls sideways */
  .hf-steps { grid-template-columns: 1fr; gap: 64px; }
  .g-svg { width: min(320px, 100%); margin-bottom: 22px; }
  .hf-faces {
    display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -20px; padding: 0 20px 10px; scroll-padding-inline: 20px; scrollbar-width: none;
  }
  .hf-faces::-webkit-scrollbar { display: none; }
  .hf-face { flex: 0 0 62%; scroll-snap-align: start; }
  .hf-deal-row { grid-template-columns: 1fr; gap: 22px; }
  .hf-deal-row b { font-size: 32px; }
  .hf-end { padding: 110px 0 90px; }
  .hf-end-art { background: url("/images/home-v2/scene/mobile-light.jpg") 50% 50% / cover no-repeat; }
  [data-theme="dark"] .hf-end-art { background-image: url("/images/home-v2/scene/mobile-dark.jpg"); }
  .hf-end-links { flex-direction: column; gap: 10px; }
}


/* ======================================================================
   Readers: real stories scrolling past like a feed. Cards stay light in both
   themes, like the app. Three columns, the middle one runs the other way.
   ====================================================================== */
.hf-panel[data-key="readers"] { align-items: stretch; }
.sw {
  position: relative; width: 100%; max-width: 560px; height: 100%; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 82%, transparent 100%);
}
.sw-track { display: flex; flex-direction: column; gap: 18px; padding-bottom: 18px; }
.sw-copy { display: contents; }
.sw-col--2 .sw-track { margin-top: -190px; }
[data-theme="dark"] .sw-card { filter: brightness(.88); }
.sw-card {
  background: #fff; color: #14100E; border-radius: 16px; overflow: hidden; font-family: 'DM Sans', sans-serif;
  box-shadow: 0 0 0 1px rgba(20, 16, 14, .07), 0 20px 40px -24px rgba(20, 16, 14, .5);
}
.sw-by { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 13px; line-height: 1; }
.sw-av { flex: none; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #e6e1db; }
.sw-by b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-ver {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: #FF6343 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.4 5.2l1.8 1.8 3.6-3.9' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.sw-media { position: relative; aspect-ratio: 4 / 5; background: #1d1a18; }
.sw-media img, .sw-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sw-play { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .45); }
.sw-play::before { content: ""; position: absolute; left: 10px; top: 8px; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.sw-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 4px; }
.sw-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.sw-dots i:first-child { background: #fff; }
.sw-hed {
  margin: 11px 12px 5px; font-family: 'Bree Serif', serif; font-size: 15.5px; line-height: 1.24;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sw-meta { margin: 0 12px 12px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(20, 16, 14, .5); }
@media (prefers-reduced-motion: no-preference) {
  .sw-track { animation: swUp 52s linear infinite; }
  .sw-col--2 .sw-track { animation-duration: 60s; animation-direction: reverse; }
  .sw-col--3 .sw-track { animation-duration: 47s; }
  .hf-panel:not(.is-active) .sw-track, .hf-hero.is-offscreen .sw-track, .sw:hover .sw-track { animation-play-state: paused; }
}
@keyframes swUp { to { transform: translateY(-50%); } }
@media (max-width: 600px) {
  .sw { grid-template-columns: 250px 250px; gap: 14px; max-width: none; justify-content: start; padding-left: calc(50% - 125px); }
  .sw-track { gap: 12px; padding-bottom: 12px; }
  .sw-by { padding: 8px 9px; gap: 6px; font-size: 11.5px; }
  .sw-av { width: 22px; height: 22px; }
  .sw-hed { margin: 8px 9px 4px; font-size: 13.5px; }
  .sw-meta { margin: 0 9px 10px; font-size: 9.5px; }
}

/* AI: labels instead of boxes */
.pl-end { fill: var(--red); }
.pl-end--lab { fill: var(--bg); stroke: rgba(var(--ink-rgb), .45); stroke-width: 1.4; }
.pl-src { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-anchor: end; fill: var(--text); }
.pl-src--mid { text-anchor: middle; font-size: 11px; letter-spacing: .04em; }
.pl-lab { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -.005em; fill: var(--text); }
.pl-lab--mid { text-anchor: middle; font-size: 13.5px; }


/* AI: an assistant answers from a Newsreel story and credits the writer. Stays light in both themes, like a product. */
.ai-chat {
  margin: 14px auto 0; width: 100%; max-width: 540px; border-radius: 16px; overflow: hidden; background: #fff; color: #14100E;
  box-shadow: 0 0 0 1px rgba(20, 16, 14, .08), 0 30px 60px -30px rgba(20, 16, 14, .5); font-family: 'DM Sans', sans-serif;
}
.ai-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(20, 16, 14, .07); font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(20, 16, 14, .55); }
.ai-spark { width: 14px; height: 14px; background: #14100E; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: .7; }
.ai-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 20px; min-height: 236px; }
.ai-q { align-self: flex-end; max-width: 80%; margin: 0; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: #F1EEE9; font-size: 15px; line-height: 1.35; }
/* the typing dots sit in the answer's own cell and only fade, so the bubble never changes height */
.ai-a { align-self: flex-start; max-width: 92%; display: grid; gap: 12px; }
.ai-a-text { grid-area: 1 / 1; margin: 0; font-size: 16px; line-height: 1.5; }
.ai-typing { grid-area: 1 / 1; align-self: start; display: flex; gap: 4px; padding: 6px 0; opacity: 0; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(20, 16, 14, .35); }
.ai-src { display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; border-radius: 12px; background: rgba(255, 99, 67, .08); box-shadow: inset 0 0 0 1px rgba(255, 99, 67, .25); }
.ai-src img { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ai-src-text { display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 6px; row-gap: 2px; font-size: 13px; min-width: 0; }
.ai-src-text b { font-weight: 600; }
.ai-src-ver { width: 13px; height: 13px; border-radius: 50%; background: #FF6343 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.4 5.2l1.8 1.8 3.6-3.9' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat; }
.ai-src-text em { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: rgba(20, 16, 14, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the loop: question, the assistant thinks, the answer streams in, then the credit lands */
@media (prefers-reduced-motion: no-preference) {
  .hf-panel.is-active .ai-q { animation: aiQ 9s var(--e-out) infinite; }
  .hf-panel.is-active .ai-typing { animation: aiTyping 9s linear infinite; }
  .hf-panel.is-active .ai-typing i { animation: aiDot .9s var(--e-io) infinite; }
  .hf-panel.is-active .ai-typing i:nth-child(2) { animation-delay: .15s; }
  .hf-panel.is-active .ai-typing i:nth-child(3) { animation-delay: .3s; }
  .hf-panel.is-active .ai-a-text span { animation: aiWord 9s linear infinite backwards; animation-delay: calc(var(--i) * .11s); }   /* backwards: words stay hidden until their turn */
  .hf-panel.is-active .ai-src { animation: aiSrc 9s var(--e-out) infinite; }
  .hf-hero.is-offscreen .ai-chat * { animation-play-state: paused !important; }
}
@keyframes aiQ { 0% { opacity: 0; transform: translateY(8px); } 5%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* typing at 0.4s, the answer from 1.3s, the credit at 3.6s: all of it readable for the slide's last 4.4s */
@keyframes aiTyping { 0%, 3% { opacity: 0; } 4%, 13% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes aiDot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes aiWord { 0%, 14% { opacity: 0; } 15.5%, 93% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes aiSrc { 0%, 34% { opacity: 0; transform: translateY(10px) scale(.98); } 40%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (max-width: 600px) {
  .ai-body { padding: 14px 14px 16px; min-height: 0; gap: 12px; }
  .ai-q { font-size: 14px; }
  .ai-a-text { font-size: 14.5px; }
}


/* WRITERS: the Earnings page, moving. Dark like the real dashboard, type sized up so it reads at a glance. */
.hf-earn .er { display: grid; grid-template-columns: 150px minmax(0, 1fr); aspect-ratio: 16 / 9.4; background: #0B0A09; color: #F2EEE9; font-family: 'DM Sans', sans-serif; }
.er-side { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; border-right: 1px solid rgba(255, 255, 255, .07); }
.er-logo { width: 78px; height: auto; margin: 2px 0 16px 4px; opacity: .92; filter: brightness(0) invert(1) !important; }  /* the site's logo filter would turn it black */
.er-create { margin-bottom: 10px; padding: 8px 10px; border-radius: 8px; background: #FF6343; color: #fff; font-size: 12.5px; font-weight: 600; }
.er-nav { padding: 7px 10px; border-radius: 7px; font-size: 12.5px; color: rgba(242, 238, 233, .62); }
.er-nav.is-on { background: rgba(255, 255, 255, .07); color: #F2EEE9; font-weight: 600; }
.er-main { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 22px 16px; overflow: hidden; }
.er-h { margin: 0; font-family: 'Bree Serif', serif; font-size: 24px; line-height: 1.1; }
.er-sub { margin: 4px 0 14px; font-size: 12.5px; color: rgba(242, 238, 233, .62); }
.er-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.er-top .er-sub { margin-bottom: 12px; }
.er-total { text-align: right; }
.er-total b { display: block; font-family: 'Bree Serif', serif; font-weight: 400; font-size: 28px; line-height: 1; color: #7BD88F; font-variant-numeric: tabular-nums; }
.er-total span { display: block; margin-top: 4px; font-size: 11.5px; color: rgba(242, 238, 233, .62); }
.er-total i, .er-src i { font-style: normal; font-variant-numeric: tabular-nums; }
.er-srcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.er-src { position: relative; padding: 10px 11px; border-radius: 10px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: box-shadow .3s var(--e-out), background .3s var(--e-out); }
.er-src.is-hit { background: rgba(255, 99, 67, .12); box-shadow: inset 0 0 0 1px rgba(255, 99, 67, .5); }
.er-src-k { display: block; font-size: 11px; color: rgba(242, 238, 233, .62); }
.er-src b { display: block; margin-top: 3px; font-family: 'Bree Serif', serif; font-weight: 400; font-size: 21px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.er-src em { display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: rgba(242, 238, 233, .5); }
.er-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.er-stat { padding: 11px 12px; border-radius: 10px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.er-stat b { display: block; font-family: 'Bree Serif', serif; font-weight: 400; font-size: 26px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.er-stat--money b { color: #7BD88F; }
.er-stat span { display: block; margin-top: 4px; font-size: 11.5px; color: rgba(242, 238, 233, .62); }
.er-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.er-rows li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; overflow: hidden; }
.er-bar { position: absolute; inset: 0 auto 0 0; z-index: 0; width: calc(var(--w) * 100%); background: rgba(255, 99, 67, .16); border-radius: inherit; transform-origin: left; }
.er-rows li > :not(.er-bar) { position: relative; z-index: 1; }
.er-n { font-size: 11px; color: rgba(242, 238, 233, .45); }
.er-t { min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.er-t em { display: block; font-style: normal; font-size: 11px; color: rgba(242, 238, 233, .5); }
.er-v { text-align: right; font-size: 13px; }
.er-v b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.er-v em { display: block; font-style: normal; font-size: 11px; color: rgba(242, 238, 233, .5); }
.er-toast {
  position: absolute; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 9px; max-width: 78%;
  padding: 9px 12px; border-radius: 10px; background: #F2EEE9; color: #14100E; font-size: 12px; line-height: 1.3;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(12px); transition: opacity .35s var(--e-out), transform .5s var(--e-out);
}
.er-toast.is-on { opacity: 1; transform: none; }
.er-toast em { flex: none; font-style: normal; font-weight: 700; color: #1F8A3A; }
.er-spark { flex: none; width: 12px; height: 12px; background: #14100E; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
@media (prefers-reduced-motion: no-preference) {
  .hf-panel.is-active .er-rows li { animation: erRow .6s var(--e-out) both; animation-delay: calc(.35s + var(--d) * .12s); }
  .hf-panel.is-active .er-bar { animation: gGrow 1.1s var(--e-out) both; animation-delay: calc(.6s + var(--d) * .12s); }
}
@keyframes erRow { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 600px) {
  .hf-earn .er { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; }
  .er-side { display: none; }
  .er-main { padding: 14px 14px 56px; }
  .er-h { font-size: 20px; }
  .er-sub { font-size: 11.5px; margin-bottom: 10px; }
  .er-stats { gap: 6px; margin-bottom: 10px; }
  .er-srcs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .er-src b { font-size: 17px; }
  .er-total b { font-size: 21px; }
  .er-rows li:nth-child(n+3) { display: none; }
  .er-stat { padding: 8px; }
  .er-stat b { font-size: 19px; }
  .er-stat span { font-size: 10px; }
  .er-rows li:nth-child(n+4) { display: none; }
  .er-t { font-size: 12px; }
  .er-toast { left: 12px; right: 12px; max-width: none; bottom: 10px; font-size: 11px; }
}


/* "Example" on windows whose numbers or people are illustrative */
.hf-example { flex: none; margin-left: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(255, 99, 67, .14); color: #E5553A; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* JOURNALISTS & EXPERTS: the network first, then the earnings page */
/* the two scenes never overlap: the network leaves in .3s, then the earnings window rises in. It moves with
   `translate`, not `transform`, so the window's float (hfFloat) keeps running */
.hf-panel[data-key="writers"] > .jx-net { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: opacity .45s var(--e-out) .24s, visibility 0s; }
.hf-panel[data-key="writers"] > .hf-earn { transition: opacity .5s var(--e-out) .3s, translate .7s var(--e-out) .3s, visibility 0s; }
.hf-panel[data-scene="earn"] > .jx-net { opacity: 0; visibility: hidden; transition: opacity .3s var(--e-in), visibility 0s linear .3s; }
.hf-panel[data-scene="net"] > .hf-earn { opacity: 0; visibility: hidden; translate: 0 14px; transition: opacity .2s var(--e-in), translate 0s linear .2s, visibility 0s linear .2s; }
.jx-net::before { content: ""; position: absolute; inset: -10px -30px; z-index: -1; pointer-events: none; background: rgba(var(--bg-rgb), .95); -webkit-mask-image: radial-gradient(farthest-side, #000 70%, transparent 100%); mask-image: radial-gradient(farthest-side, #000 70%, transparent 100%); }
.jx-cap { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.jx-svg { display: block; width: 100%; max-width: 660px; height: auto; overflow: visible; }
.jx-edge { fill: none; stroke: rgba(var(--ink-rgb), .22); stroke-width: 1.3; stroke-dasharray: 100; stroke-dashoffset: 0; }
.jx-dot { fill: rgba(var(--ink-rgb), .26); }
.jx-dot--red { fill: var(--red); }
.jx-ring { fill: var(--bg); stroke: var(--red); stroke-width: 2; }
.jx-name { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; text-anchor: middle; fill: var(--text); }
.jx-role { font-family: 'DM Sans', sans-serif; font-size: 11.5px; text-anchor: middle; fill: rgba(var(--ink-rgb), .62); }
.jx-pulse { fill: var(--red); }
.jx-node, .jx-dot { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .hf-panel.is-active[data-scene="net"] .jx-edge { animation: jxDraw 1.1s var(--e-out) both; animation-delay: var(--d); }
  .hf-panel.is-active[data-scene="net"] .jx-node { animation: jxPop .6s var(--e-pop) both; animation-delay: var(--d); }
  .hf-panel.is-active[data-scene="net"] .jx-dot { animation: jxPop .5s var(--e-out) both; animation-delay: var(--d); }
}
@keyframes jxDraw { from { stroke-dashoffset: 100; } }
@keyframes jxPop { from { opacity: 0; transform: scale(.4); } }

/* EDUCATORS: one steady Classroom screen, light in both themes like the product */
.ed { display: grid; grid-template-columns: minmax(0, 1fr) 262px; gap: 22px; align-items: center; aspect-ratio: 16 / 9.4; padding: 22px 24px; overflow: hidden; background: #FAF8F5; color: #14100E; font-family: 'DM Sans', sans-serif; }
.ed-kicker { margin: 0 0 6px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #B02B0D; }
.ed-h { margin: 0; font-family: 'Bree Serif', serif; font-size: 21px; line-height: 1.18; }
.ed-by { margin: 6px 0 14px; font-size: 12.5px; color: rgba(20, 16, 14, .6); }
.ed-tabs { display: inline-flex; gap: 3px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 16, 14, .09); }
.ed-tab { padding: 6px 14px; border-radius: 999px; font-size: 12.5px; color: rgba(20, 16, 14, .7); transition: background .3s var(--e-out), color .3s var(--e-out); }
.ed-tab.is-on { background: #14100E; color: #fff; }
.ed-texts, .ed-metas { display: grid; }
.ed-texts { margin-top: 14px; min-height: 162px; }
.ed-text, .ed-meta { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(4px); transition: opacity .18s var(--e-out), transform .18s var(--e-out); }
.ed-text.is-on, .ed-meta.is-on { opacity: 1; transform: none; transition: opacity .35s var(--e-out) .2s, transform .35s var(--e-out) .2s; }   /* out first, then in: no overlap */
.ed-text { font-size: 15px; line-height: 1.55; }
.ed-meta { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .06em; color: rgba(20, 16, 14, .55); }
.ed-side { display: grid; }
.ed-card { grid-area: 1 / 1; align-self: center; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 16, 14, .08), 0 16px 34px -22px rgba(20, 16, 14, .45); transition: opacity .4s var(--e-out) .3s, transform .5s var(--e-out) .3s, visibility 0s linear .3s; }   /* the incoming card waits for the outgoing one */
.hf-panel[data-scene="assign"] .ed-card--subs, .hf-panel[data-scene="subs"] .ed-card--assign { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s var(--e-out), transform .4s var(--e-out), visibility 0s linear .3s; }
@media (max-width: 600px) {   /* phones: the next card follows sooner, so the window is never empty */
  .ed-card { transition-delay: .1s; }
  .hf-panel[data-scene="assign"] .ed-card--subs, .hf-panel[data-scene="subs"] .ed-card--assign { transition: opacity .18s var(--e-in), transform .4s var(--e-out), visibility 0s linear .18s; }
}
.ed-label { margin: 0 0 5px; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(20, 16, 14, .5); }
.ed-field { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: #F4F1EC; font-size: 13px; }
.ed-check { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; font-size: 13px; }
.ed-check::before { content: ""; width: 16px; height: 16px; border-radius: 5px; background: #FF6343 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.4 5.2l1.8 1.8 3.6-3.9' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.ed-btn { display: grid; margin-top: 12px; padding: 10px; border-radius: 10px; background: #FF6343; color: #fff; font-size: 14px; font-weight: 600; text-align: center; transition: transform .2s var(--e-pop); }
.ed-btn span { grid-area: 1 / 1; transition: opacity .25s var(--e-out); }
.ed-btn span + span { opacity: 0; }
.ed.is-assigned .ed-btn span:first-child { opacity: 0; }
.ed.is-assigned .ed-btn span + span { opacity: 1; }
.ed.is-pressing .ed-btn { transform: scale(.97); }
.ed-subs-head { display: flex; align-items: baseline; justify-content: space-between; }
.ed-count { margin: 0; font-size: 12px; color: rgba(20, 16, 14, .6); }
.ed-count b { font-family: 'Bree Serif', serif; font-size: 20px; font-weight: 400; color: #14100E; }
.ed-subs-bar { height: 6px; margin: 6px 0 12px; border-radius: 3px; background: rgba(20, 16, 14, .08); overflow: hidden; }
.ed-subs-bar i { display: block; height: 100%; width: 92.9%; border-radius: inherit; background: #FF6343; transform-origin: left; }
.ed-subs-cols, .ed-subs li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 54px 30px; align-items: center; gap: 8px; }
.ed-subs-cols { padding: 0 4px 6px; font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(20, 16, 14, .5); }
.ed-subs { list-style: none; margin: 0; padding: 0; }
.ed-subs li { padding: 7px 4px; border-top: 1px solid rgba(20, 16, 14, .07); font-size: 12.5px; }
.ed-av { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #EDE7DF; font-size: 10.5px; font-weight: 600; }
.ed-subs b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: no-preference) {
  .hf-panel[data-scene="subs"] .ed-subs li { animation: erRow .5s var(--e-out) both; animation-delay: calc(.3s + var(--d) * .35s); }
  .hf-panel[data-scene="subs"] .ed-subs-bar i { animation: gGrow 1.8s var(--e-out) .2s both; }
}
@media (max-width: 600px) {
  .ed { grid-template-columns: 1fr; aspect-ratio: auto; height: 360px; padding: 14px; align-items: start; }
  .ed-h { font-size: 16px; }
  .ed-by { margin-bottom: 10px; }
  .ed-tab { padding: 5px 10px; font-size: 11.5px; }
  .ed-text { font-size: 13px; }
  .ed-texts { min-height: 150px; }
  /* phone: one pane at a time, the story while the level changes, then the panel */
  .ed-side { position: absolute; left: 14px; right: 14px; top: 46px; bottom: 14px; align-content: center; }
  .hf-ed { position: relative; }
  .hf-panel[data-scene="levels"] .ed-side { opacity: 0; visibility: hidden; }
  .hf-panel:not([data-scene="levels"]) .ed-story { opacity: 0; transition: opacity .3s var(--e-out); }
  .ed-story { transition: opacity .4s var(--e-out); }
  .ed-side { transition: opacity .4s var(--e-out); }
  .jx-name { font-size: 22px; }
  .jx-role { display: none; }
  .jx-cap { text-align: center; padding: 0 12px; font-size: 10px; }
}


/* Midterm Mania banner: one bright purple bar, the event's pixel title, nothing else loud.
   Closing slides it up and the nav follows (banner.html adds .is-closing, then hides it). */
.mm-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; height: 42px; display: flex; background: #6D28D9; color: #fff; transition: transform .3s var(--e-io); }
.mm-banner[hidden] { display: none; }
.mm-banner.is-closing { transform: translateY(-100%); }
.mm-banner:not([hidden]):not(.is-closing) ~ .nav { top: 42px; }
.mm-link { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 48px 0 16px; color: inherit; text-decoration: none; font-family: 'DM Sans', sans-serif; font-size: 13.5px; white-space: nowrap; }
.mm-live { display: inline-flex; align-items: center; gap: 7px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.mm-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: mmDot 1.8s var(--e-io) infinite; }
@keyframes mmDot { 50% { opacity: .35; } }
.mm-title { font-family: 'Jersey 25', 'VT323', monospace; font-weight: 400; font-size: 25px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.mm-long { color: rgba(255, 255, 255, .9); }
.mm-when { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: rgba(255, 255, 255, .9); }
.mm-w-short { display: none; }
.mm-count { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: rgba(255, 255, 255, .9); }
.mm-count b { font-weight: 700; color: #fff; }
.mm-cta { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.mm-link:hover .mm-cta { text-decoration-thickness: 2.5px; }
.mm-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: rgba(255, 255, 255, .85); font-size: 20px; line-height: 1; cursor: pointer; }
.mm-close:hover { color: #fff; background: rgba(255, 255, 255, .14); }
@keyframes navUp { to { transform: translateY(-40px); } }
@media (prefers-reduced-motion: reduce) { .mm-live i { animation: none; } .mm-banner, html.hf-page .nav, .hf-hero { transition: none; } }
@media (max-width: 1180px) { .mm-long { display: none; } }
@media (max-width: 860px) { .mm-live, .mm-count { display: none; } }
@media (max-width: 600px) {
  /* phones: the banner scrolls away with the page and the nav rides up with it, pixel for pixel */
  .mm-banner { position: absolute; height: 40px; }
  .mm-banner:not([hidden]):not(.is-closing) ~ .nav { top: 40px; }
  @supports (animation-timeline: scroll()) {
    .mm-banner:not([hidden]):not(.is-closing) ~ .nav { animation: navUp linear both; animation-timeline: scroll(root); animation-range: 0px 40px; }
  }
  .mm-link { gap: 10px; padding: 0 40px 0 12px; font-size: 12.5px; }
  .mm-title { font-size: 21px; }
  .mm-w-long { display: none; }
  .mm-w-short { display: inline; }
}


/* Ticker: big rolling digits on plain ground, no tiles */
.hf-ticker { display: flex; flex-direction: column; align-items: center; padding: 0 0 34px; text-align: center; }
.hf-ticker-inner { display: flex; flex-direction: column; align-items: center; }

.hf-odo { display: inline-flex; align-items: flex-end; margin: 0; font-family: 'Bree Serif', serif; font-size: clamp(44px, 4.2vw, 56px); line-height: 1; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.odo-d { display: inline-block; height: 1.05em; overflow: hidden; }
.odo-col { display: flex; flex-direction: column; transform: translateY(calc(var(--n) * -1.05em)); }
.odo-col span { display: block; height: 1.05em; line-height: 1.05em; }
.odo-sep { display: inline-block; line-height: 1.05em; margin: 0 .02em; }
.hf-ticker-label { display: inline-flex; align-items: center; gap: 10px; margin: 8px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink-rgb), .62); }
.hf-ticker-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
@media (prefers-reduced-motion: no-preference) {
}
@media (max-width: 820px) { .hf-ticker-label { font-size: 10.5px; } }


/* 01: hundreds of applicants, a select few let in and verified */
.gv-dot { fill: rgba(var(--ink-rgb), .3); transform-box: fill-box; transform-origin: center; }
.gv-sel { fill: var(--red); opacity: 0; }
.gv-pick { fill: var(--red); }
.gv-tick { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gv-few { opacity: 1; }
.gv-face { transform-box: view-box; }
.gv-ring { fill: var(--bg); stroke: var(--red); stroke-width: 1.6; }
.gv-check { transform-box: fill-box; transform-origin: center; }
.gv-dot:not(.gv-sel) { opacity: .22; }

@keyframes gvDot { 0% { opacity: 0; transform: scale(.4); } 8% { opacity: 1; transform: none; } 26% { opacity: 1; } 34%, 92% { opacity: .16; } 100% { opacity: 0; } }
@keyframes gvSel { 0%, 24% { opacity: 0; } 28%, 40% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes gvFace { 0%, 38% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.25); } 42% { opacity: 1; transform: translate(var(--sx), var(--sy)) scale(.25); } 58%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes gvFew { 0%, 52% { opacity: 0; } 60%, 92% { opacity: 1; } 100% { opacity: 0; } }


/* How it works: each graphic plays once when it first comes into view, then rests on its finished frame
   (fresh design critic, round 1). Before it plays, and with reduced motion, the finished frame shows. */
.g-strip { transform: translateX(-224px); }
@media (prefers-reduced-motion: no-preference) {
  .hf-how.is-played .gv-dot { animation: gvDot1 5.6s var(--e-out) both; animation-delay: calc(var(--i) * 5ms); }
  .hf-how.is-played .gv-sel { animation: gvSel1 5.6s var(--e-out) both; }
  .hf-how.is-played .gv-face { animation: gvFace1 5.6s var(--e-io) both; animation-delay: calc(var(--n) * .1s); }
  .hf-how.is-played .gv-tick { animation: gvTick1 5.6s var(--e-out) both; animation-delay: calc(var(--n) * .1s); }
  .hf-how.is-played .gv-few { animation: gvFew1 5.6s var(--e-out) both; }
  .hf-how.is-played .g-strip { animation: gStrip1 5.6s var(--e-io) both; }
  .hf-how.is-played .g-progress { animation: gProg1 5.6s var(--e-io) both; }
  .hf-how.is-played .g-done { animation: gDone1 5.6s var(--e-out) both; }
  .hf-how.is-played .g-face { animation: gGather1 5.6s var(--e-io) both; animation-delay: calc(var(--n) * .12s); }
  .hf-how.is-played .g-solo { animation: gSolo1 5.6s var(--e-out) both; animation-delay: calc(var(--n) * .12s); }
  .hf-how.is-played .g-row { animation: gRow1 5.6s var(--e-out) both; animation-delay: calc(var(--n) * .12s); }
}
@keyframes gvDot1 { 0% { opacity: 0; transform: scale(.4); } 16% { opacity: 1; transform: none; } 44% { opacity: 1; } 62%, 100% { opacity: .22; } }
@keyframes gvSel1 { 0%, 38% { opacity: 0; } 46%, 58% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes gvFace1 { 0%, 58% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.3); } 62% { opacity: 1; transform: translate(var(--sx), var(--sy)) scale(.3); } 86%, 100% { opacity: 1; transform: none; } }
@keyframes gvTick1 { 0%, 84% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes gvFew1 { 0%, 80% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes gStrip1 { 0%, 18% { transform: translateX(0); } 34%, 50% { transform: translateX(-112px); } 66%, 100% { transform: translateX(-224px); } }
@keyframes gProg1 { 0%, 20% { transform: scaleX(0); } 86%, 100% { transform: scaleX(1); } }
@keyframes gDone1 { 0%, 84% { transform: scale(0); } 92% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes gGather1 { 0%, 26% { transform: translate(var(--sx), var(--sy)); } 74%, 100% { transform: translate(0, 0); } }
@keyframes gSolo1 { 0%, 26% { opacity: 1; } 70%, 100% { opacity: .32; } }
@keyframes gRow1 { 0%, 60% { opacity: 0; } 84%, 100% { opacity: 1; } }

/* Why now: headline left, the two numbers stacked right */
.hf-why-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 7vw, 112px); align-items: start; }
.hf-why-wrap .hf-why-hed { margin-bottom: 0; max-width: 16ch; }
.hf-why-wrap .hf-why-figs { display: flex; flex-direction: column; gap: 0; max-width: none; padding-top: 6px; }
.hf-why-fig { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: baseline; column-gap: 28px; padding: 26px 0; border-top: 1px solid rgba(var(--ink-rgb), .12); }
.hf-why-fig + .hf-why-fig { border-bottom: 1px solid rgba(var(--ink-rgb), .12); }
.hf-why-fig .hf-fig-num { margin: 0; font-size: clamp(64px, 6.4vw, 96px); }
.hf-why-fig .hf-fig-text { max-width: 32ch; }
.hf-why-fig .hf-source { margin-top: 10px; font-size: 12px; color: rgba(var(--ink-rgb), .6); }

/* People: one photo treatment */
.hf-face img { aspect-ratio: 1 / 1; object-position: 50% 22%; filter: grayscale(1) contrast(1.04); }
.hf-people { padding-bottom: 120px; }

/* For writers: a quiet band of its own */
.hf-writers { background: var(--surface); padding: 96px 0; }
.hf-writers-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 7vw, 112px); align-items: start; }
.hf-writers-hed { margin: 0 0 22px; max-width: 16ch; font-family: 'Bree Serif', serif; font-weight: 400; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; letter-spacing: -.015em; color: var(--text); }
.hf-writers-list { list-style: none; margin: 0; padding: 0; }
.hf-writers-list li { padding: 20px 0; border-top: 1px solid rgba(var(--ink-rgb), .12); font-family: 'DM Sans', sans-serif; font-size: 19px; line-height: 1.45; color: var(--text); }
.hf-writers-list li:last-child { border-bottom: 1px solid rgba(var(--ink-rgb), .12); }

/* FAQ: heading left, questions right */
.hf-faq-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 7vw, 112px); align-items: start; }
.hf-faq-hed { margin: 0; font-family: 'Bree Serif', serif; font-weight: 400; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.015em; color: var(--text); }
.hf-faq-wrap .hf-faq-list { max-width: none; }

/* End: type only, on the accent; the ticker is the hero */
.hf-end { background: #B02B0D; color: #fff; padding: 120px 0 110px; }
.hf-end-inner::before { display: none; }
.hf-end .hf-ticker { padding-bottom: 56px; }
.hf-end .hf-odo { font-size: clamp(88px, 11vw, 168px); color: #fff; }
.hf-end .hf-ticker-label { color: rgba(255, 255, 255, .78); font-size: 12px; }
.hf-end-hed { color: #fff; }
.hf-end-price { color: rgba(255, 255, 255, .86); }
.hf-end .btn-primary { background: #fff; color: #B02B0D; }
.hf-end .btn-primary:hover { background: #F6F0E4; }
.hf-end .hf-textlink { color: #fff; text-decoration-color: rgba(255, 255, 255, .55); }
.hf-end .hf-textlink:hover { color: #fff; text-decoration-color: #fff; }

/* the ticker rests on its real number; the script only zeroes it just before it rolls */
.hf-ticker.odo-armed .odo-col { transform: translateY(0); transition: none; }
.hf-ticker.odo-rolling .odo-col { transition: transform 1.6s var(--e-out); transition-delay: calc(.1s + var(--i) * .09s); }

/* footer: the wordmark fills the empty first column */
.footer-brand img { display: block; height: 26px; width: auto; filter: var(--logo-filter); }
.footer-brand p { margin: 12px 0 0; max-width: 26ch; font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.5; color: rgba(var(--ink-rgb), .62); }

/* hero wall in dark mode: the app's own dark cards, not dimmed white ones */
[data-theme="dark"] .sw-card { filter: none; background: #1C1917; color: #F6F0E4; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 40px -24px rgba(0, 0, 0, .7); }
[data-theme="dark"] .sw-meta { color: rgba(246, 240, 228, .6); }

@media (max-width: 820px) {
  .hf-why-wrap, .hf-writers-wrap, .hf-faq-wrap { grid-template-columns: 1fr; row-gap: 32px; }
  .hf-why-fig { grid-template-columns: 1fr; row-gap: 6px; padding: 22px 0; }
  .hf-why-fig .hf-fig-num { font-size: 72px; }
  .hf-writers { padding: 64px 0; }
  .hf-writers-list li { font-size: 17px; }
  .hf-end { padding: 84px 0 80px; }
  .hf-end .hf-odo { font-size: 76px; }
}


/* fresh critic round 2 */
.hf-how { --red: var(--accent); }                       /* one red: the graphics use the brick accent, not the coral */
.hf-why-wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.hf-why-wrap .hf-why-hed { max-width: 19ch; }
.hf-why-hed em { white-space: nowrap; }
.hf-face img { object-position: 50% 50%; filter: none; }
/* For writers: one centred claim, its three terms in a row; breaks the left/right rhythm of its neighbours */
.hf-writers-wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 36px; }
.hf-writers-wrap > div { display: flex; flex-direction: column; align-items: center; }
.hf-writers-hed { max-width: 20ch; }
.hf-writers-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; max-width: 980px; text-align: left; }
.hf-writers-list li, .hf-writers-list li:last-child { border: 0; border-top: 2px solid var(--accent); padding: 16px 0 0; font-size: 17px; }
/* end band: the number is the headline; the button carries "Start reading" */
.hf-end .hf-ticker { padding-bottom: 40px; }
.hf-end-btn { font-family: 'DM Sans', sans-serif; font-weight: 700; letter-spacing: 0; text-transform: none; font-size: 17px; }
.hf-end-price { margin: 14px 0 6px; }
@media (max-width: 820px) {
  .hf-writers-list { grid-template-columns: 1fr; gap: 22px; }
  .hf-why-hed em { white-space: normal; }
}


/* fresh critic round 3: the notes two or more rounds agreed on */
/* type: serif + sans; mono only for the counter caption */
.hf-why .hf-eyebrow, .hf-how .hf-eyebrow, .hf-people .hf-eyebrow, .hf-writers .hf-eyebrow, .hf-press-label {
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: none;
}
.hf-source, .hf-why-fig .hf-source { font-family: 'DM Sans', sans-serif; font-size: 13px; font-style: italic; letter-spacing: 0; }
.hf-textlink { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; }
.g-cap { font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.hf-how .gv-pick { r: 9px; }
/* Why now: the numbers sit level with the headline's foot */
.hf-why-wrap { align-items: center; }
/* For writers: ink band, two columns */
.hf-writers { background: #14100E; color: #F6F0E4; --accent: #FF8A6E; }
.hf-writers .hf-writers-hed, .hf-writers .hf-writers-list li { color: #F6F0E4; }
.hf-writers .hf-textlink { color: #F6F0E4; text-decoration-color: var(--accent); }
.hf-writers-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); justify-items: stretch; text-align: left; row-gap: 32px; align-items: start; }
.hf-writers-wrap > div { align-items: flex-start; }
.hf-writers-list { display: block; max-width: none; }
.hf-writers-list li, .hf-writers-list li:last-child { padding: 20px 0; border: 0; border-top: 1px solid rgba(246, 240, 228, .18); font-size: 19px; }
.hf-writers-list li:last-child { border-bottom: 1px solid rgba(246, 240, 228, .18); }
[data-theme="dark"] .hf-writers { background: #F6F0E4; color: #14100E; --accent: #B02B0D; }
[data-theme="dark"] .hf-writers .hf-writers-hed, [data-theme="dark"] .hf-writers .hf-writers-list li, [data-theme="dark"] .hf-writers .hf-textlink { color: #14100E; }
[data-theme="dark"] .hf-writers-list li, [data-theme="dark"] .hf-writers-list li:last-child { border-color: rgba(20, 16, 14, .16); }
/* FAQ: plus marks you can see */
.hf-faq .faq-question::after { color: var(--accent); font-size: 26px; }
/* end band: the button and the price on one line, both legible */
.hf-end-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; }
.hf-end-row .hf-end-price { margin: 0; color: #fff; font-size: 17px; }
.hf-end .hf-ticker-label { color: #fff; }
@media (max-width: 820px) {
  .hf-writers-wrap { grid-template-columns: 1fr; }
  .hf-writers-list li, .hf-writers-list li:last-child { font-size: 17px; }
}


/* fresh critic round 4: what held across rounds */
/* red lives in the end band and the links; headlines, labels and diagram captions are ink and grey */
.hf-why-hed em { color: inherit; }
.hf-why .hf-eyebrow, .hf-how .hf-eyebrow, .hf-people .hf-eyebrow { color: rgba(var(--ink-rgb), .55); }
.hf-how .g-cap--red { fill: var(--text); }
.hf-faq .faq-question::after { color: var(--text); }
/* no mono anywhere below the hero: tracked sans caps */
.hf-press-brag, .hf-ticker-label, .hf-press-label { font-family: 'DM Sans', sans-serif; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; }
.hf-press-brag { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; }
/* end band: one button, the price beneath it */
.hf-end-price { margin: 14px 0 0; color: #fff; font-size: 16px; }


/* How it works: real app screens in a thin frame, no device chrome; each pans down once on first view */
.hf-screen { width: min(300px, 100%); aspect-ratio: 4 / 5; margin: 0 0 28px; overflow: hidden; border-radius: 18px; background: #fff;
  box-shadow: 0 0 0 1px rgba(var(--ink-rgb), .1), 0 30px 60px -36px rgba(20, 16, 14, .45); }
.hf-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
@media (prefers-reduced-motion: no-preference) {
  .hf-how.is-played .hf-screen img { animation: hfPan 7s var(--e-io) .6s both; }
  .hf-how.is-played .hf-step:nth-child(2) .hf-screen img { animation-delay: 1s; }
  .hf-how.is-played .hf-step:nth-child(3) .hf-screen img { animation-delay: 1.4s; }
}
@keyframes hfPan { 0%, 12% { object-position: 50% 0%; } 100% { object-position: 50% 62%; } }
@media (max-width: 820px) { .hf-screen { width: min(320px, 100%); } }


/* kept critic K1 */
/* How it works frames: the profile stops just under "Verified by Newsreel"; the story crop has no side bars */
.hf-step:first-child .hf-screen img { animation: none !important; object-position: 50% 0%; }
/* dark mode: the writer band is one step up from the page, not inverted */
[data-theme="dark"] .hf-writers { background: #1C1917; color: #F6F0E4; --accent: #FF8A6E; }
[data-theme="dark"] .hf-writers .hf-writers-hed, [data-theme="dark"] .hf-writers .hf-writers-list li, [data-theme="dark"] .hf-writers .hf-textlink { color: #F6F0E4; }
[data-theme="dark"] .hf-writers-list li, [data-theme="dark"] .hf-writers-list li:last-child { border-color: rgba(246, 240, 228, .18); }
.hf-writers .hf-eyebrow { color: rgba(246, 240, 228, .6); }
/* end band: back in the illustrated world, a quiet bookend */
.hf-end { background: var(--sky-2); color: var(--text); min-height: 420px; padding: 120px 0 110px; }
.hf-end-art { display: block; }
.hf-end-inner::before { display: block; }
.hf-end .hf-ticker { padding: 0 0 18px; }
.hf-ticker-line { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; font-family: 'DM Sans', sans-serif; font-size: 17px; color: rgba(var(--ink-rgb), .78); }
.hf-end .hf-odo { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0; color: var(--text); }
.hf-end-hed { color: var(--text); font-size: clamp(48px, 5.4vw, 72px); margin: 0 0 26px; }
.hf-end .btn-primary { background: var(--red); color: #fff; }
.hf-end .btn-primary:hover { background: var(--accent); }
.hf-end-btn { font-family: 'DM Sans', sans-serif; font-weight: 700; letter-spacing: 0; text-transform: none; font-size: 17px; }
.hf-end-price { margin: 14px 0 0; color: rgba(var(--ink-rgb), .82); font-size: 17px; }
.hf-end .hf-ticker-label { display: none; }
/* footer finish */
.footer-brand p { max-width: 34ch; font-size: 14px; }
.footer-bottom, .footer-bottom p, .footer-bottom span { color: rgba(var(--ink-rgb), .6) !important; }
@media (max-width: 820px) {
  .hf-end { padding: 90px 0 84px; }
  .hf-ticker-line { flex-wrap: wrap; justify-content: center; font-size: 15px; }
  .hf-end .hf-odo { font-size: 15px; }
}

/* four people across on desktop, two on phone (kept critic K1) */
.hf-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 820px) {
  .hf-faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; overflow: visible; margin: 0; padding: 0; }
  .hf-face { flex: none; }
}

.hf-end .hf-ticker-line { display: flex; flex-direction: row; flex-wrap: nowrap; white-space: nowrap; align-items: baseline; justify-content: center; }
.hf-end .hf-ticker-line .hf-odo { display: inline-flex; }
@media (max-width: 600px) { .hf-end .hf-ticker-line { flex-wrap: wrap; white-space: normal; } }


/* How it works: motion graphic (left, the feed) + real app screen (right, Newsreel). Plays once, rests finished. */
.mx { width: min(380px, 100%); }
.mx-frame { fill: none; stroke: rgba(var(--ink-rgb), .14); stroke-width: 1; }
/* 01 */
.mv-dot { fill: rgba(var(--ink-rgb), .3); opacity: .2; transform-box: fill-box; transform-origin: center; }
.mv-sel { fill: var(--accent); opacity: 1; }
.mv-go { fill: var(--accent); opacity: 0; transform-box: view-box; }
.mv-ring { fill: none; stroke: var(--accent); stroke-width: 1.8; transform-box: fill-box; transform-origin: center; }
/* 02 */
.mf-av { fill: rgba(var(--ink-rgb), .16); }
.mf-img { fill: rgba(var(--ink-rgb), .08); }
.mf-fade { fill: url(#mxfg); }
[data-theme="dark"] .mf-fade { display: none; }
.mp-bar { fill: var(--accent); transform-box: fill-box; transform-origin: 0 50%; }
.mp-end { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
/* 03 */
.mo-solo { opacity: .3; }
.mo-face { transform-box: view-box; }
.mo-ring { fill: none; stroke: var(--bg); stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  .mf-scroll { animation: mfScroll 14s linear infinite; }
  .hf-how.is-offscreen .mf-scroll { animation-play-state: paused; }
  .hf-how.is-played .mv-dot { animation: mvDot 5.8s var(--e-out) both; animation-delay: calc(var(--i) * 6ms); }
  .hf-how.is-played .mv-sel { animation: mvSel 5.8s var(--e-out) both; }
  .hf-how.is-played .mv-go { animation: mvGo 5.8s var(--e-io) both; animation-delay: calc(var(--n) * .14s); }
  .hf-how.is-played .mv-ring { animation: mvRing 5.8s var(--e-out) both; }
  .hf-how.is-played .mp-bar { animation: mpBar 6s var(--e-io) .8s both; }
  .hf-how.is-played .mp-end { animation: mpEnd 6s var(--e-out) .8s both; }
  .hf-how.is-played .mo-face { animation: moFace 5.8s var(--e-io) 1.2s both; animation-delay: calc(1.2s + var(--n) * .14s); }
  .hf-how.is-played .mo-solo { animation: moSolo 5.8s var(--e-out) 1.2s both; animation-delay: calc(1.2s + var(--n) * .14s); }
}
@keyframes mfScroll { from { transform: translateY(40px); } to { transform: translateY(-360px); } }
@keyframes mvDot { 0% { opacity: 0; transform: scale(.4); } 14% { opacity: 1; transform: none; } 36% { opacity: 1; } 52%, 100% { opacity: .2; } }
@keyframes mvSel { 0%, 36% { fill: rgba(var(--ink-rgb), .3); } 46%, 100% { fill: var(--accent); } }
@keyframes mvGo { 0%, 52% { opacity: 0; transform: translate(var(--sx), var(--sy)); } 56% { opacity: 1; transform: translate(var(--sx), var(--sy)); } 82% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes mvRing { 0%, 84% { opacity: 0; transform: scale(.5); } 92% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } }
@keyframes mpBar { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes mpEnd { 0%, 92% { transform: scale(0); } 96% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes moFace { 0%, 20% { transform: translate(var(--sx), var(--sy)) scale(1.4); } 80%, 100% { transform: none; } }
@keyframes moSolo { 0%, 20% { opacity: 1; } 70%, 100% { opacity: .3; } }

/* kept critic K2 */
.hf-end .btn-primary { color: #14100E; }
.hf-faq-hed { position: sticky; top: 120px; align-self: start; }
.hf-face img[src*="people-dominic"] { object-position: 35% 30%; filter: contrast(.94); }


/* How it works, sequenced: one 4:5 panel per step; the problem plays, then turns into the real screen and rests there.
   Default styles are the finished frame (also what reduced motion and a still capture show). */
.mx2 { width: min(300px, 100%); }
.q-l1 { opacity: 0; }
.q-prob { opacity: 0; }
.qv-dot { fill: rgba(var(--ink-rgb), .28); }
.qv-sel { fill: var(--accent); }
.qv-go { fill: var(--accent); opacity: 0; transform-box: view-box; }
.qv-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.qf-av { fill: rgba(var(--ink-rgb), .28); }
.qf-bar { fill: rgba(var(--ink-rgb), .2); }
.qf-bar--d { fill: rgba(var(--ink-rgb), .32); }
.qf-img { fill: rgba(var(--ink-rgb), .12); }
.q-bar { fill: var(--accent); transform-box: fill-box; transform-origin: 0 50%; }
.q-end { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.qo-ring { fill: none; stroke: rgba(var(--ink-rgb), .28); stroke-width: 1.4; stroke-dasharray: 4 5; }
.qo-env { fill: none; stroke: rgba(var(--ink-rgb), .4); stroke-width: 1.4; stroke-linejoin: round; }
.qo-face { transform-box: view-box; }
.qo-fring { fill: none; stroke: var(--bg); stroke-width: 2.5; }
@media (prefers-reduced-motion: no-preference) {
  .hf-how.is-played .mx2 .q-l1 { animation: qL1 3.6s var(--e-out) both; animation-delay: var(--qd, 0s); }
  .hf-how.is-played .mx2 .q-l2 { animation: qL2 3.6s var(--e-out) both; animation-delay: var(--qd, 0s); }
  .hf-how.is-played .mx2 .q-prob { animation: qProb 3.6s var(--e-out) both; animation-delay: var(--qd, 0s); }
  .hf-how.is-played .q1 .q-fix, .hf-how.is-played .q3 .q-fix { animation: qFix 3.6s var(--e-out) both; animation-delay: var(--qd, 0s); }
  .hf-how.is-played .q1 .qv-sel { animation: qvSel 3.6s var(--e-out) both; animation-delay: var(--qd, 0s); }
  .hf-how.is-played .q1 .qv-go { animation: qvGo 3.6s var(--e-io) both; animation-delay: calc(var(--qd, 0s) + var(--n) * .06s); }
  .hf-how.is-played .q1 .qv-ring { animation: qvRing 3.6s var(--e-out) both; animation-delay: var(--qd, 0s); }
  .hf-how.is-played .q2 .qf-scroll { animation: qScroll 3.6s linear both; animation-delay: var(--qd, 0s); }
  .hf-how.is-played .q2 .q-slide { animation: qSlide 3.6s var(--e-out) both; animation-delay: var(--qd, 0s); }
  .hf-how.is-played .q2 .q-bar { animation: qBar 5.2s var(--e-io) both; animation-delay: var(--qd, 0s); }
  .hf-how.is-played .q2 .q-end { animation: qEnd 5.2s var(--e-out) both; animation-delay: var(--qd, 0s); }
  .hf-how.is-played .q3 .qo-face { animation: qoFace 3.6s var(--e-io) both; animation-delay: calc(var(--qd, 0s) + var(--n) * .07s); }
  .hf-how.is-offscreen .mx2 * { animation-play-state: paused !important; }
}
.hf-step:nth-child(2) .mx2 { --qd: .5s; }
.hf-step:nth-child(3) .mx2 { --qd: 1s; }
@keyframes qL1 { 0%, 40% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes qL2 { 0%, 46% { opacity: 0; } 58%, 100% { opacity: 1; } }
@keyframes qProb { 0%, 40% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes qFix { 0%, 40% { opacity: 0; } 58%, 100% { opacity: 1; } }
@keyframes qvSel { 0%, 16% { fill: rgba(var(--ink-rgb), .28); } 26%, 100% { fill: var(--accent); } }
@keyframes qvGo { 0%, 38% { opacity: 0; transform: translate(var(--sx), var(--sy)); } 42% { opacity: 1; transform: translate(var(--sx), var(--sy)); } 64% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: none; } }
@keyframes qvRing { 0%, 64% { opacity: 0; transform: scale(.4); } 74% { opacity: 1; transform: scale(1.3); } 82%, 100% { opacity: 1; transform: scale(1); } }
@keyframes qScroll { 0% { transform: translate(0, 36px); } 45%, 100% { transform: translate(0, -160px); } }
@keyframes qSlide { 0%, 38% { transform: translateY(380px); } 60%, 100% { transform: none; } }
@keyframes qBar { 0%, 44% { transform: scaleX(0); } 96%, 100% { transform: scaleX(1); } }
@keyframes qEnd { 0%, 94% { transform: scale(0); } 97% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes qoFace { 0%, 40% { opacity: 1; transform: translate(var(--sx), var(--sy)) scale(1.5); } 66%, 100% { opacity: 1; transform: none; } }
/* the problem shows during the play only; the q2 feed sits behind the slide-up story, so it simply stays hidden at rest */

/* FAQ: the sticky heading drifted (the list is shorter than the screen); top-aligned on a wider list column */
.hf-faq-hed { position: static; align-self: start; }
.hf-faq-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }


/* 02 and 03: the earlier looping motion graphics are back (Jack) — they loop, they don't rest */
.g-reward, .g-one { width: min(360px, 100%); }
.g-reward .g-cap--red, .g-one .g-cap--red { fill: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .hf-how .g-reward .g-strip { animation: gStrip 10.75s var(--e-io) infinite; }
  .hf-how .g-reward .g-progress { animation: gProg 6s var(--e-io) infinite; }
  .hf-how .g-reward .g-done { animation: gDone 6s var(--e-out) infinite; }
  /* 03 starts 1.2s after 02, so the two loops never move in step */
  .hf-how .g-one .g-face { animation: gGather 9s var(--e-io) infinite; }
  .hf-how .g-one .g-solo { animation: gSolo 9s var(--e-io) infinite; }
  .hf-how .g-one .g-row { animation: gRow 9s var(--e-io) infinite; }
  .hf-how .g-one .g-face, .hf-how .g-one .g-solo, .hf-how .g-one .g-row { animation-delay: calc(1.2s + var(--i, 0s)); }
  .hf-how.is-offscreen .g-reward *, .hf-how.is-offscreen .g-one * { animation-play-state: paused !important; }
}
.g-one .g-solo { opacity: 0; }

/* the three steps share rows (graphic, title, text) so the titles line up whatever each graphic's height */
@media (min-width: 821px) {
  .hf-steps { grid-template-rows: auto auto 1fr; row-gap: 0; }
  .hf-step { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .hf-step > svg { align-self: center; margin-bottom: 28px; }
}


/* The square (Jack, Oct 2): a bigger heading with more air above it, and the proof row on the picture */
.hf-square { padding: 84px 0 110px; }
.hf-square-hed { font-size: clamp(46px, 5.2vw, 78px); line-height: 1.02; }
.hf-square-inner::before { top: -70px; height: calc(100% + 150px); width: min(1320px, 110%); }
.hf-square .hf-press { position: relative; z-index: 2; margin-top: auto; padding: 22px 0 0; background: none; }
.hf-square .hf-press::before {
  content: ""; left: 50%; right: auto; top: -30px; bottom: -34px; width: min(980px, 100%); transform: translateX(-50%);
  background: rgba(var(--bg-rgb), .9);
  -webkit-mask-image: radial-gradient(farthest-side, #000 52%, transparent 100%);
  mask-image: radial-gradient(farthest-side, #000 52%, transparent 100%);
}
.hf-square .hf-press-logos img { opacity: .75; }
.hf-square .hf-press-label, .hf-square .hf-uni, .hf-square .hf-press-brag { color: rgba(var(--ink-rgb), .72); }
@media (min-width: 821px) { .hf-square .hf-press { margin-top: auto; } }
@media (max-width: 820px) {
  .hf-square { min-height: calc(150vw + 210px); padding: 56px 0 60px; }
  .hf-square-art {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 110px, #000 calc(150vw + 150px), transparent calc(150vw + 300px));
    mask-image: linear-gradient(to bottom, transparent 0, #000 110px, #000 calc(150vw + 150px), transparent calc(150vw + 300px));
  }
  .hf-square-hed { font-size: 38px; }
  .hf-square .hf-press { padding-top: 24px; }
  .hf-square .hf-press::before { top: -24px; bottom: -28px; width: 150%; }
}


/* The square, labelled (Jack, Oct 2): two call-outs say what the picture means. Lines draw in, then the words. */
.hf-lab { overflow: visible; }
.hf-lab--m { display: none; }
.lab-line { fill: none; stroke: var(--accent); stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lab-dot { fill: var(--accent); }
.lab-ring { fill: none; stroke: var(--accent); stroke-width: 1.6px; vector-effect: non-scaling-stroke; opacity: .55; transform-box: fill-box; transform-origin: center; }
.lab-text { font-family: 'DM Sans', sans-serif; font-size: 41px; font-weight: 500; fill: var(--text);
  paint-order: stroke; stroke: rgba(var(--bg-rgb), .92); stroke-width: 14px; stroke-linejoin: round; }
.lab-strong { font-weight: 700; }
.lab-text--2 .lab-strong { fill: var(--text); }
.lab-text tspan:first-child { fill: var(--accent); }
.lab-text--2 tspan:first-child { fill: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  html.js .hf-lab:not(.is-on) .lab-line { stroke-dashoffset: 1; }
  html.js .hf-lab:not(.is-on) .lab-dot, html.js .hf-lab:not(.is-on) .lab-text, html.js .hf-lab:not(.is-on) .lab-ring { opacity: 0; }
  /* both call-outs are read by 1.5s (1.2s on phones, where people scroll past faster) */
  .hf-lab.is-on .lab-dot { animation: labPop .5s var(--e-pop) both; }
  .hf-lab.is-on .lab-line { animation: labDraw .6s var(--e-io) .1s both; }
  .hf-lab.is-on .lab-text { animation: labText .5s var(--e-out) .55s both; }
  .hf-lab.is-on .lab-dot--2 { animation-delay: .45s; }
  .hf-lab.is-on .lab-line--2 { animation-delay: .55s; }
  .hf-lab.is-on .lab-text--2 { animation-delay: 1s; }
  .hf-lab.is-on .lab-ring { animation: labRing 3.2s var(--e-io) 1.4s 2 both; }   /* two pulses, then still */
}
@media (prefers-reduced-motion: no-preference) and (max-width: 820px) {
  .hf-lab.is-on .lab-line { animation-duration: .5s; animation-delay: .1s; }
  .hf-lab.is-on .lab-text { animation-duration: .4s; animation-delay: .45s; }
  .hf-lab.is-on .lab-dot--2 { animation-delay: .35s; }
  .hf-lab.is-on .lab-line--2 { animation-delay: .45s; }
  .hf-lab.is-on .lab-text--2 { animation-delay: .8s; }
}
@keyframes labPop { from { opacity: 0; transform: scale(0); } }
@keyframes labDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes labText { from { opacity: 0; transform: translateY(8px); } }
@keyframes labRing { 0%, 100% { opacity: .2; transform: scale(.96); } 50% { opacity: .7; transform: scale(1.04); } }
.lab-dot, .lab-text { transform-box: fill-box; transform-origin: center; }
@media (max-width: 820px) {
  .hf-lab--m { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
  .hf-lab--m .lab-text { font-size: 31px; stroke-width: 12px; }
}

/* ======================================================================
   Type + motion critic, round 1
   ====================================================================== */
/* hero: one slide out (200ms), then the next in (450ms after a 240ms gap); no float under the windows */
.hf-panel { transition: opacity .2s var(--e-in), transform .2s var(--e-in), visibility 0s linear .2s; }
.hf-panel.is-active { transition: opacity .45s var(--e-out) .24s, transform .6s var(--e-out) .24s, visibility 0s; }
.hf-panel.is-active > .hf-phone, .hf-panel.is-active > .hf-window, .hf-panel.is-active > .hf-code, .hf-panel.is-active > .hf-pipeline { animation: none; }
.hf-word { transition: opacity .2s var(--e-in), transform .2s var(--e-in); }
.hf-word.is-active { transition: opacity .4s var(--e-out) calc(.12s + var(--wd, 0s)), transform .6s var(--e-out) calc(.12s + var(--wd, 0s)); }
/* How it works 02 and 03 on one 9s clock; 03 half a beat behind */
@media (prefers-reduced-motion: no-preference) {
  .hf-how .g-reward .g-strip { animation-duration: 9s; }
  .hf-how .g-reward .g-progress, .hf-how .g-reward .g-done { animation-duration: 9s; }
}

/* type scale: D1 60-64 / D2 44 / stats 84 / H3 24 / body 20, 17, 15, 13 */
.hf-headline { font-size: clamp(40px, 4.2vw, 60px); line-height: 1.02; letter-spacing: -.02em; }
@media (min-width: 1025px) { .hf-grid { grid-template-columns: minmax(0, 580px) minmax(0, 1fr); } }   /* desktop only: phones keep the one-column hero */
.hf-square-hed, .hf-end-hed { font-size: clamp(44px, 4.45vw, 64px); line-height: 1.02; letter-spacing: -.02em; }
.hf-why-hed, .hf-sec-hed, .hf-writers-hed, .hf-faq-hed { font-size: clamp(32px, 3.06vw, 44px); line-height: 1.08; letter-spacing: -.015em; }
.hf-why-fig .hf-fig-num { font-size: clamp(64px, 5.85vw, 84px); letter-spacing: -.03em; }
.hf-step-hed, .hf-face b { font-size: 24px; line-height: 1.2; letter-spacing: -.005em; }
.hf-why-fig .hf-fig-text, .hf-writers-list li, .hf-writers-list li:last-child, .hf-step-text { font-size: 17px; }
.hf-faq .faq-question { font-size: 17px; font-weight: 500; }
.hf-face span { font-size: 15px; }

/* one label style: Plex Mono 11 / 500 / .12em caps, muted ink, never red */
.hf-eyebrow, .hf-why .hf-eyebrow, .hf-how .hf-eyebrow, .hf-people .hf-eyebrow, .hf-press-label, .hf-square .hf-press-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(var(--ink-rgb), .55);
}
.hf-writers .hf-eyebrow { color: rgba(246, 240, 228, .6); }
.g-cap, .hf-how .g-cap--red, .g-reward .g-cap--red, .g-one .g-cap--red { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; fill: rgba(var(--ink-rgb), .55); }
.jx-cap { font-size: 11px; font-weight: 500; letter-spacing: .12em; color: rgba(var(--ink-rgb), .55); }
/* nav in DM Sans; every CTA DM Sans 15/600 */
.nav-links a, .nav-login-trigger:not(.btn) { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.btn, .btn-lg, .hf-end-btn, .nav-cta .nav-login-trigger.btn { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.hf-alt { font-family: 'DM Sans', sans-serif; font-size: 15px; }
/* banner: Jersey for the title only, DM Sans 13.5 for the rest */
.mm-live, .mm-when, .mm-count, .mm-long, .mm-cta { font-family: 'DM Sans', sans-serif; font-size: 13.5px; letter-spacing: 0; text-transform: none; }
.mm-live { font-weight: 600; }
/* product windows: nothing under 11px */
.ed-subs-cols, .ed-label, .ed-kicker, .hf-example, .sw-meta, .ed-meta { font-size: 11px; }
.hf-writers .hf-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.nav .nav-cta .nav-login-trigger.btn, .nav .nav-cta .btn { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; }
/* footer on the body scale: links 15, fine print 13 */
.footer .footer-col a, .footer-brand p { font-size: 15px; }
.footer .footer-bottom, .footer .footer-bottom a, .footer .footer-bottom p, .footer .footer-bottom span { font-size: 13px; }
/* fixed-width digit slots are inline-blocks: keep every counting number on one line */
.er-total b, .er-total span, .er-src b, .er-src em, .er-stat b, .hf-fig-num { white-space: nowrap; }


/* ======================================================================
   Type + motion critic, round 2
   ====================================================================== */
/* fixed-width digit slots, only while a number is counting (span.tn beats the older `.er-total span`) */
span.tn { display: inline-block; width: .6em; text-align: center; font-size: inherit; margin: 0; color: inherit; }
/* How it works 01: the dots leave 1.2-1.5s, then the screen enters 1.5-1.9s; no overlap */
@keyframes qProb { 0%, 33.3% { opacity: 1; } 41.7%, 100% { opacity: 0; } }
@keyframes qFix { 0%, 41.7% { opacity: 0; } 52.8%, 100% { opacity: 1; } }
@keyframes qL1 { 0%, 33.3% { opacity: 1; } 41.7%, 100% { opacity: 0; } }
@keyframes qL2 { 0%, 41.7% { opacity: 0; } 52.8%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .hf-how.is-played .mx2 .q-prob, .hf-how.is-played .q1 .q-fix, .hf-how.is-played .mx2 .q-l1, .hf-how.is-played .mx2 .q-l2 { animation-timing-function: var(--e-io); }
}
/* labels: .62 ink (about 5.4:1 at 11px) */
.hf-eyebrow, .hf-why .hf-eyebrow, .hf-how .hf-eyebrow, .hf-people .hf-eyebrow, .hf-press-label, .hf-square .hf-press-label, .jx-cap { color: rgba(var(--ink-rgb), .62); }
.g-cap, .hf-how .g-cap--red, .g-reward .g-cap--red, .g-one .g-cap--red { fill: rgba(var(--ink-rgb), .62); }
/* earnings: the toast sits in its own strip below the rows */
.er-rows { padding-bottom: 44px; }
.er-toast { bottom: 12px; }
/* Classroom: room between the submissions label and the count */
.ed-subs-head { gap: 12px; }
.hf-earn .er { aspect-ratio: 16 / 10.8; }   /* room for the toast strip below the third row */
.er-rows { padding-bottom: 0; }


/* ======================================================================
   Type + motion critic, round 3
   ====================================================================== */
/* How it works 01: one of the hundreds becomes Nadya. The chosen dot holds while the others fade (1.2-1.5s);
   the screen grows out of it from 1.45s (scale .06 -> 1, .45s --e-out) and the dot fades in its first 120ms. */
.qv-hero { fill: var(--accent); opacity: 0; }
.q1 .q-fix { transform-box: view-box; transform-origin: 150px 242px; }
@media (prefers-reduced-motion: no-preference) {
  .hf-how.is-played .q1 .q-fix { animation: q1Grow 3.6s var(--e-out) both; }
  .hf-how.is-played .q1 .qv-hero { animation: q1Hero 3.6s linear both; }
}
@keyframes q1Grow { 0%, 40.3% { opacity: 0; transform: scale(.06); } 41.5% { opacity: 1; } 52.8%, 100% { opacity: 1; transform: scale(1); } }
@keyframes q1Hero { 0%, 15% { opacity: 0; } 20%, 40.3% { opacity: 1; } 43.6%, 100% { opacity: 0; } }
/* reduced motion: step 03 shows where the writers came from, not an empty column */
@media (prefers-reduced-motion: reduce) { .g-one .g-solo { opacity: .35 !important; } }
/* equal space under every How it works heading */
.hf-how h3, .hf-how .hf-step-hed { min-height: 2.4em; margin-bottom: 14px; }
.nw { white-space: nowrap; }
.hf-sec-hed, .hf-why-hed, .hf-writers-hed, .hf-faq-hed, .hf-square-hed, .hf-end-hed { text-wrap: balance; }
/* type + motion critic R4: the 24px heads balance too */
.hf-how h3, .hf-people h3, .hf-step-hed { text-wrap: balance; }
/* phones: the R1 type scale must not override the phone headline size ("journalists & experts" has to fit 390px) */
@media (max-width: 600px) {
  .hf-headline { font-size: 34px; }
  .hf-square-hed, .hf-end-hed { font-size: 38px; }
  .hf-why-hed, .hf-sec-hed, .hf-writers-hed, .hf-faq-hed { font-size: 30px; }
  .hf-why-fig .hf-fig-num { font-size: 64px; }
  .hf-step-hed, .hf-face b { font-size: 21px; }
}
@media (max-width: 400px) { .hf-pick-wrap { font-size: .86em; } }   /* the longest word, "journalists & experts", fits a 360px phone */

/* type + motion final pass */
/* phones: one column for Why now, For writers and the FAQ (later desktop grid rules had overridden this) */
@media (max-width: 820px) {
  .hf-why-wrap, .hf-writers-wrap, .hf-faq-wrap { grid-template-columns: 1fr; row-gap: 32px; }
  .hf-why-wrap .hf-why-hed, .hf-faq-hed, .hf-writers-hed { max-width: none; }
}
/* the hero's small text gets the same halo as the square's call-outs, so it reads over the drawing (no box) */
.hf-sub, .hf-alt, .pl-stat { text-shadow: 0 0 2px var(--bg), 0 0 10px var(--bg), 0 0 18px var(--bg); }
@media (max-width: 600px) { .hf-sub { color: var(--text); } }

/* Jack, Oct 2 (live, on his phone) ---------------------------------------------------------------
   1. The proof row moved off the picture to its own band below it: on phones it fought the call-outs. */
.hf-proof { position: relative; z-index: 2; padding: 8px 0 0; }
.hf-proof .hf-press::before { display: none; }   /* plain ground here: no mist needed */
.hf-proof .hf-press-logos img { opacity: .75; }
.hf-proof .hf-press-label, .hf-proof .hf-uni, .hf-proof .hf-press-brag { color: rgba(var(--ink-rgb), .72); }
.hf-proof + .hf-why { padding-top: 72px; }
@media (max-width: 600px) { .hf-proof { padding-top: 0; } .hf-proof + .hf-why { padding-top: 56px; } }
@media (max-width: 820px) { .hf-square { min-height: calc(150vw + 120px); } }   /* the square no longer holds the row */

/* 2. Hero text reads in both themes: a soft ground behind the words (no box), full-strength small text. */
.hf-copy { position: relative; }
.hf-copy::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -90px -140px -70px -180px;
  background: radial-gradient(closest-side, rgba(var(--bg-rgb), .86), rgba(var(--bg-rgb), .62) 55%, rgba(var(--bg-rgb), 0));
}
.hf-sub { color: var(--text); }
.hf-alt { color: rgba(var(--ink-rgb), .86); text-decoration-color: rgba(var(--ink-rgb), .45); }
@media (max-width: 1024px) { .hf-copy::before { inset: -60px -40px -50px; } }

/* 3. Phones: the hero's city fades into the square's, instead of ending on a hard line. */
@media (max-width: 820px) {
  .hf-descent .hf-hero { background: transparent; }
  .hf-scene, .hf-descent .hf-grain {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent);
  }
}
@media (min-width: 821px) { .hf-proof { margin-top: -110px; } }   /* desktop: rise into the picture's plain fade, still clear of the call-outs */
@media (max-width: 820px) {   /* the shorter square (above): its art fades out by the square's foot, not below it */
  .hf-square-art {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 110px, #000 calc(150vw + 60px), transparent calc(150vw + 210px));
    mask-image: linear-gradient(to bottom, transparent 0, #000 110px, #000 calc(150vw + 60px), transparent calc(150vw + 210px));
  }
}
/* where the call-outs cannot clear the heading and still fit the screen, home.js hides them (visibility, so they keep their size) */
.hf-annot-off .hf-annot { visibility: hidden; }