/* ==========================================================================
   Homepage section patterns.
   There are five, and only five (DESIGN.md §5). A new section is one of
   these, not a sixth.
     Hero          near-edge card, centred stack, oversized wordmark, device
     Statement     square box on the grid, split down the middle, parallax
     Spotlight     dark rounded card, copy left, devices overflowing the edge
     Lattice       dark band, heading, card grid, numbers on a ruled row
     Ruled split   square, on the grid, dashed divider, crosshairs
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

/* The card starts BELOW the bar rather than under it: the nav is 64px and
   fixed, so it was floating on top of the hero instead of having a band of
   its own. dvh not vh, and the 96 is 64 of nav plus the 16 edge plus a
   matching 16 at the bottom, so the gap under the card equals the gap at its
   sides. Capped at 900 so it stops stretching on a tall screen.

   Three rows, not two. With two, the copy sat in the 1fr row and every pixel
   of slack on a tall viewport opened up between the headline and the device.
   Now the slack is its own row and the device sits at the bottom of it. */
.hero {
  position: relative;
  /* 103 = the measured card top on the original, 86.5 of nav, rule and top
     padding, plus a 16 bottom inset so the gap under the card matches its
     sides. The nav rule above supplies the clearance, so the margin is just
     the edge gap. */
  min-height: min(calc(100dvh - 103px), 900px);
  margin-top: var(--pd-edge);
  display: grid;
  grid-template-rows: auto 1fr auto;
  isolation: isolate;
}

/* Warm daylight ground. One variable: drop a photograph in here and the
   layers below become its tint. Deliberately not the dark green of the
   reference build. */
.hero-ground {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #101010 url("hero-bg.webp") center / cover no-repeat;
}
.hero-ground::before {
  /* hold the headline's contrast over the brightest part of the silk */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,12,11,0.52) 0%, rgba(10,12,11,0.18) 44%, rgba(10,12,11,0.42) 100%);
}
.hero-ground::after {
  /* fine grain, so the gradient does not read as a flat vector wash */
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode: overlay;
}

.hero-copy {
  position: relative;
  z-index: 3;
  padding: 80px 6% 0;
  text-align: center;
  max-width: 860px;
  margin-inline: auto;
}
/* 17ch, which is what sets the wrap. Without it the headline ran 710px wide
   and broke over two lines instead of three: same type size, a much shorter
   and much wider block, and every gap below it inherited the difference. */
.hero-copy h1 {
  color: var(--pd-card-ink);
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.14;
  max-width: 17ch;
  margin-inline: auto;
  text-wrap: balance;
}
.hero-sub {
  margin-top: 20px;
  color: rgba(242, 241, 236, 0.74);
  font-size: 0.9375rem;          /* 15px exactly; 0.94rem is 15.04 */
  line-height: 1.55;
  max-width: 46ch;
  margin-inline: auto;
  text-wrap: pretty;
}

/* The stage: oversized wordmark behind an angled device. The device is the
   only thing in flow, so it sets the stage height and everything else hangs
   off that. */
.hero-stage {
  position: relative;
  z-index: 2;
  /* Bottom of its row, so the slack collects above it rather than around it. */
  align-self: end;
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.hero-wordmark {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  font-family: var(--pd-display);
  font-weight: 200;
  font-size: clamp(4rem, 15vw, 13rem);
  line-height: 1;
  color: rgba(242, 241, 236, 0.92);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Tilted, and masked out at the wrist so the arm dissolves into the hero
   instead of ending on a cut edge. */
.hero-device {
  --fade-wrist: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0.55) 84%, transparent 100%);
  position: relative;
  z-index: 2;
  width: 380px;
  max-width: 74vw;
  rotate: 8deg;
  -webkit-mask-image: var(--fade-wrist);
  mask-image: var(--fade-wrist);
}
.hero-device-hand { display: block; width: 100%; height: auto; }
/* Measured off the file: the largest region fully enclosed by the phone body.
   Percentages, so the screen tracks the hand at any width. */
.hero-device-screen {
  position: absolute;
  left: 38.86%;
  top: 12.92%;
  width: 21.99%;
  height: 65.83%;
  overflow: hidden;
  overflow: clip;                         /* see .pd-card: never "hidden" */
}
.hero-device-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hero-chip {
  position: absolute;
  z-index: 4;
  max-width: 210px;
  line-height: 1.5;
}
.hero-chip .pd-mono { display: block; font-size: 0.76rem; }
.hero-chip--l { left: 16px;  top: 6%; }
.hero-chip--r { right: 16px; top: 62%; }

/* Below this the device fills the stage and the chips would land on top of
   it, so they go rather than get rearranged. */
@media (max-width: 1023px) {
  .hero-chip { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-chip {
    /* --pd-enter is 520ms cubic-bezier(0.2, 0, 0, 1). It was defined in
       design.css and referenced nowhere, while this was the literal. */
    animation: hero-chip-in var(--pd-enter) both;
  }
  .hero-chip--l { animation-delay: 240ms; }
  .hero-chip--r { animation-delay: 360ms; }
}
@keyframes hero-chip-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* 8 above and 40 below, which is the original's mt-2 / pb-10. The row's
   height is what sets where the device lands: it is the last auto row, so
   every pixel taken off it is a pixel the slack row gives back and the device
   moves down by. At 30/52 the device sat 29px high and the gap under the
   headline was correspondingly too big. The 8 lets the buttons overlap the
   device's rotated box, which is fine: the wrist is masked out there. */
.hero-actions {
  position: relative;
  z-index: 5;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px 6% 40px;
}

@media (max-width: 900px) {
  .hero { min-height: auto; margin-top: 12px; }
  .hero-copy { padding-top: 64px; }
}

/* --- Statement ----------------------------------------------------------- */

.statement {
  position: relative;
  margin-top: 96px;
}
.statement > .pd-rule { margin-bottom: 96px; }
.statement-box {
  position: relative;
  background: var(--pd-band);
  color: var(--pd-card-ink);
  border-radius: 0;                       /* square: it sits on the grid */
  overflow: hidden;
  overflow: clip;                         /* see .pd-card: never "hidden" */
  padding: clamp(48px, 6vw, 92px) clamp(28px, 5vw, 76px);
}
/* The silk, drifting on a scroll timeline behind everything. */
.statement-bg {
  position: absolute;
  inset: -14% 0;
  z-index: 0;
  opacity: 0.55;
  background: url("hero-bg.webp") center / cover no-repeat;
}
.statement-box::after {
  /* keep the type off the brightest part of the silk */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, rgba(15,16,15,0.86) 0%, rgba(15,16,15,0.62) 46%, rgba(15,16,15,0.80) 100%);
  pointer-events: none;
}

/* Left column carries the argument and the peptide; right column carries the
   explanation and the data. */
/* Two nested panels, not two bare columns. No column gap: with one, the left
   panel stops half a gap short of the divider and is no longer the left half.
   The breathing room lives inside each panel instead. */
.statement-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 0;
  /* Stretch, not start. Two panels of different heights either side of the
     divider stops reading as one split object. */
  align-items: stretch;
}
/* Every h2 on the page was the global token, clamp(2.1rem, 4.2vw, 3.2rem),
   which is 51.2px at 1280. The original sizes each section separately and this
   one is 35.84 there. Same for the spotlight and the lattice below. */
.statement-grid h2 {
  color: var(--pd-card-ink);
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);
  line-height: 1.14;
}

/* The outer box is square, so by the concentric rule the panels are square
   too: inner = outer - inset, and outer is 0. */
.statement-left,
.statement-right {
  background: var(--pd-nest);
  padding: clamp(22px, 2.8vw, 34px);
}

.statement-left { position: relative; }

/* The centre divider, drawn on the column boundary rather than at 50%, so it
   holds wherever the 1fr / 1.3fr split lands. No crosshair at either end: the
   section rule sits 96px clear of the box, so nothing crosses the line there
   and a mark would have no second line to name. */
.statement-right::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-image: var(--pd-dash-v);
}

/* The silver peptide. It runs past the bottom of its column on purpose, the
   same crop trick the Spotlight uses: contained reads as a thumbnail. */
.statement-helix {
  display: block;
  width: clamp(120px, 13vw, 186px);
  height: auto;
  margin: clamp(24px, 3vw, 44px) 0 0 clamp(4px, 2vw, 28px);
  filter: drop-shadow(0 30px 46px rgba(0, 0, 0, 0.5));
}

.statement-right { position: relative; min-width: 0; }
.statement-right .evidence { margin-top: clamp(28px, 3.5vw, 48px); }
.statement-read {
  font-family: var(--pd-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  line-height: 1.4;
}
@media (max-width: 900px) {
  /* Stacked: the divider has no boundary to sit on, so the gap comes back. */
  .statement-grid { grid-template-columns: 1fr; }
  .statement-right { margin-top: 12px; }
  .statement-right::before { display: none; }
  .statement-helix {
    width: 128px;
    margin: 26px auto 0;
  }
}

/* --- Evidence table (a Ruled split) -------------------------------------- */

/* A four-column data table does not fit a phone. It scrolls inside its own
   panel rather than making the page scroll. */
.pd-panel.evidence { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ev-table { width: 100%; border-collapse: collapse; min-width: 440px; }
.ev-table th {
  text-align: left;
  font-family: var(--pd-mono);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(242, 241, 236, 0.5);
  padding: 12px 14px;
  border-bottom: 1px solid rgba(242, 241, 236, 0.14);
}
.ev-table td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(242, 241, 236, 0.08);
  font-size: 0.94rem;
}
.ev-table td:first-child { font-family: var(--pd-display); font-size: 1.02rem; }
.ev-table .num { font-family: var(--pd-mono); text-align: right; font-size: 0.82rem; }
.ev-table .route,
.ev-table .grade { font-family: var(--pd-mono); font-size: 0.8rem; color: rgba(242, 241, 236, 0.62); }
.ev-table tr.minimal td { color: rgba(242, 241, 236, 0.38); }

/* --- Ruled split: the use / don't use rows ------------------------------- */

.split {
  position: relative;
  margin-top: 96px;
}
/* Six columns, matching the six the inset spans, so the divider between the
   label and the list falls on a real gridline. At 1fr 3.1fr it landed at
   24.4% of the inset, which is not one. No gap, or the rule has nothing to
   sit on: the padding moves inside the cells. */
.split-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 5fr;
  gap: 0;
  align-items: center;
}
.split-row > * { padding: 26px clamp(18px, 2.2vw, 30px); }
.split-row > :first-child { padding-left: 0; }

/* One internal rule, horizontal, closing the first row under the list only and
   not under the label.

   The label/list boundary is NOT redrawn. It sits exactly on gridline 3, and
   the page grid runs straight through this section, so drawing it again put a
   second hairline one pixel to its left: a 2px staggered ladder where a single
   line was intended. Same reason the band's own left and right edges are not
   redrawn. */
.split-row:not(.split-row--minimal) > .split-list {
  background-image: var(--pd-dash-h);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: left bottom;
}

.split-list { font-size: 0.9375rem; line-height: 1.7; }
.split-note {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
/* flex: none, or the arrow collapses to 0 wide. svg carries max-width: 100%
   from the global img/svg reset, and inside a shrink-to-fit flex container
   that resolves circularly against a width the arrow itself was setting. Both
   annotations were rendering as the word alone with no arrow. */
.split-note svg { flex: none; }
.split-note--l { right: calc(100% + 14px); }
.split-note--r { left: calc(100% + 14px); }

/* The minimal-research row is struck through over a hatch rather than
   quietly omitted (DESIGN.md §8.4). */
.split-row--minimal {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(25, 25, 25, 0.13) 0 1px,
    transparent 1px 8px
  );
}
.split-row--minimal .split-list {
  color: var(--pd-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(25, 25, 25, 0.34);
}
@media (max-width: 900px) {
  /* Stacked: the vertical has no boundary to sit on. */
  .split-row { grid-template-columns: 1fr; }
  .split-row > * { padding: 14px 0; }
  .split-note { display: none; }
}

/* --- Spotlight ----------------------------------------------------------- */

.spotlight {
  position: relative;
  padding: clamp(48px, 6vw, 88px) 0 clamp(48px, 6vw, 88px) clamp(28px, 5vw, 68px);
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 40px;
  align-items: center;
  /* The DEVICE CONTAINER is overflow: visible and the phones intentionally
     run past it (see .spot-devices). A device fully contained reads as a
     thumbnail; one running off the edge reads as a product shot. The card
     itself still clips, which is what crops the last phone at the card edge
     the way the shipped build does, and stops the overflow reaching the
     viewport and giving the whole document a sideways scroll.
     Never overflow:hidden here: it would freeze view() timelines inside. */
  overflow: clip;
}
.spotlight h2 {
  color: var(--pd-card-ink);
  max-width: 15ch;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.12;
}
/* Card ink held back, not --pd-muted. The muted token is documented as
   4.83:1 on the light page; this sits on --pd-band, where it is 3.5:1. */
.spotlight-sub {
  margin-top: 20px;
  max-width: 46ch;
  color: rgba(242, 241, 236, 0.62);
  font-size: 1rem;
  line-height: 1.6;
}

.spot-devices {
  position: relative;
  height: clamp(340px, 34vw, 460px);
  overflow: visible;
}
.spot-devices .pd-device {
  position: absolute;
  top: 0;
  --w: clamp(180px, 15.5vw, 232px);
  transform: perspective(1200px) rotateY(24deg) rotateZ(-9deg);
}
/* Spread at 24% intervals, opacity falling 14% per phone, and each one 26px
   lower than the last. Without that step the four sit on one line and read as
   a filmstrip rather than a fanned stack. The translate comes after the
   rotations, so it steps down the rotated axis, not the screen's. */
.spot-devices .pd-device:nth-child(1) { left: 0%;  opacity: 1;    z-index: 4; }
.spot-devices .pd-device:nth-child(2) { left: 24%; opacity: 0.86; z-index: 3; transform: perspective(1200px) rotateY(24deg) rotateZ(-9deg) translateY(26px); }
.spot-devices .pd-device:nth-child(3) { left: 48%; opacity: 0.72; z-index: 2; transform: perspective(1200px) rotateY(24deg) rotateZ(-9deg) translateY(52px); }
.spot-devices .pd-device:nth-child(4) { left: 72%; opacity: 0.58; z-index: 1; transform: perspective(1200px) rotateY(24deg) rotateZ(-9deg) translateY(78px); }

@media (max-width: 900px) {
  .spotlight { grid-template-columns: 1fr; padding-inline: 24px; }
  .spot-devices { height: 300px; }
  .spot-devices .pd-device:nth-child(n+3) { display: none; }
}

/* --- Lattice ------------------------------------------------------------- */

.lattice {
  /* One pad and one inset, so the nested media can be pulled back out of the
     band's padding to a constant gap without a second hardcoded number. */
  --band-pad: clamp(48px, 6vw, 84px);
  /* 12, the top of the 6-to-12 range. At 6 the gap read as a hairline against
     a card this size rather than as an inset. Inner radius follows it:
     26 - 12 = 14, still round enough to read as a corner. */
  --nest: 12px;
  padding: var(--band-pad) 0;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}
.lattice-body { padding-left: clamp(28px, 5vw, 68px); }
.lattice h2 {
  color: var(--pd-card-ink);
  max-width: 22ch;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  line-height: 1.12;
}

.lattice-card { line-height: 1.5; }
.lattice-cards {
  margin-top: 44px;
  display: grid;
  /* Column count follows the column's own width, not the viewport's. This grid
     lives inside the 1.55fr side of the band, so a viewport media query cannot
     see how wide it actually is: a hard repeat(3, 1fr) held down to 1000px and
     put three 196px cards in a 620px column at a 1200px viewport. auto-fit
     with a 230px floor gives 1 up on a phone, 2 up through the middle and 3 up
     once there is room, with no breakpoint to keep in sync. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.lattice-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.lattice-card-head .pd-mono { color: rgba(242, 241, 236, 0.42); }
.lattice-card hr {
  border: 0;
  height: 1px;
  background: rgba(242, 241, 236, 0.14);
  margin: 0 0 16px;
}
.lattice-card h3 { font-family: var(--pd-body); font-weight: 500; font-size: 1rem; line-height: 1.5; letter-spacing: normal; margin-bottom: 6px; }
.lattice-card p  { font-size: 0.9375rem; line-height: 1.55; color: rgba(242, 241, 236, 0.62); }

.lattice-foot { margin-top: 22px; color: rgba(242, 241, 236, 0.42); }

/* hard numbers on a ruled row */
.lattice-numbers {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(242, 241, 236, 0.16);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lattice-numbers .pd-num {
  color: var(--pd-card-ink);
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  font-weight: 300;
}
.lattice-numbers .pd-mono {
  display: block;
  margin-top: 10px;
  font-size: 0.75rem;             /* 12px */
  line-height: 1.5;
  letter-spacing: normal;
  color: rgba(242, 241, 236, 0.5);
}

/* full-height media column. A video sits in the same slot an image would.
   It plays only while it is on screen (see design.js), which is what
   DESIGN.md means by "nothing loops off-screen". */
/* Card in card. The media used to sit inside the band's full 48 to 84px of
   padding with another 20 to 40px of its own margin, which reads as a picture
   frame rather than as one object. It is pulled back out to a 6px inset on
   the three edges it meets, and its radius is the band's minus that inset, so
   the gap stays constant through the corner.

   Inverted elevation: the band is darker than the page, so the panel inside
   it is LIGHTER than the band, with a hairline on it. At a 6px inset the
   contrast step is what carries the separation. */
.lattice-media {
  position: relative;
  margin: calc(var(--nest) - var(--band-pad)) var(--nest)
          calc(var(--nest) - var(--band-pad)) 0;
  border-radius: calc(var(--pd-r-card) - var(--nest));
  overflow: hidden;
  overflow: clip;
  min-height: 320px;
  background: #1c1c1a;
  box-shadow: 0 0 0 1px rgba(242, 241, 236, 0.10) inset;
}
.pd-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd-media-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,12,11,0.16), rgba(10,12,11,0.52));
  pointer-events: none;
}

@media (max-width: 1000px) {
  .lattice { grid-template-columns: 1fr; }
  .lattice-numbers { grid-template-columns: 1fr; gap: 26px; }
  /* Stacked: the media is no longer beside the copy, so it takes the inset on
     all four sides instead of three. */
  .lattice-media { margin: var(--nest); min-height: 220px; }
}

/* ==========================================================================
   Phone pass (2026-09-01). See the matching blocks at the end of pages.css
   and design.css.
   ========================================================================== */

/* --- The evidence table gets the width it needs --------------------------
   .ev-table is min-width 440px inside a panel that scrolls, which is the right
   pattern. But the statement box's padding squeezed that panel to 251px on a
   375px screen, so two of the four columns were off-screen and the "Refs"
   count, which is the entire argument of the section, was two swipes away.
   Dropping the box's inset on a phone gives the panel 327px and puts three
   columns in view.
   ------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .statement-box { padding-left: 16px; padding-right: 16px; }
}

/* --- Vertical rhythm stops stacking --------------------------------------
   .section-rule drops from 96px to 64px on a phone, but the sections' own
   96px top margins did not, so a rule between two sections contributed its
   own 64 + 64 and then sat inside a 96px gap: over 200px of empty page on an
   812px screen.

   This block has to sit at the END of the file. The same three rules already
   existed in the @media at the top and were dead: .statement declares
   margin-top: 96px further down, and at equal specificity the later rule
   wins. Measured before moving them, at 375px: margin-top 96px, not 64.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .statement { margin-top: 64px; }
  .statement > .pd-rule { margin-bottom: 64px; }
  .split { margin-top: 64px; }
}

/* The nested panel's own 22px inset was the rest of the squeeze on the
   evidence table: 319 minus 44 was the 275 the panel got. The table is
   min-width 440 and scrolls by design, so this does not remove the swipe, it
   buys back a column's worth of it. */
@media (max-width: 600px) {
  .statement-right { padding-left: 0; padding-right: 0; }
}

/* --- The screens inside the device --------------------------------------
   Misha's .hero-device-screen box and its measured percentages are untouched.
   The single <img> in it becomes four, stacked and crossfading. The controls
   sit OUTSIDE .hero-device on purpose: that element is rotated 8deg and masked
   at the wrist, and both would otherwise apply to the dots.
   ------------------------------------------------------------------------ */

.hero-device-screen .hero-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.2, 0, 0, 1);
}
.hero-device-screen .hero-screen.is-on { opacity: 1; }

/* Absolute, so the device still sets the stage height (see .hero-stage).
   Clear of the wordmark: at 1502px the wordmark's box runs to y694 and this
   used to sit at y678, so the dots and the caption landed on the bottoms of
   the letters, in the same band the wrist mask is fading through. The caption
   is gone for the same reason. The screen name still reaches a screen reader
   through .hero-screen-status and each dot's aria-label. */
.hero-screen-nav {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  justify-content: center;
}

/* Named for a screen reader, not drawn. */
.hero-screen-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hero-phone-nav { display: flex; gap: 7px; }

/* Square, like every other control here. Not on the accent list: the seven
   placements are closed, so these are cream at two opacities. */
.hero-dot {
  width: 22px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(242, 241, 236, 0.26);
  cursor: pointer;
  transition: background 200ms ease;
}
.hero-dot:hover { background: rgba(242, 241, 236, 0.55); }
.hero-dot[aria-selected="true"] { background: rgba(242, 241, 236, 0.92); }

@media (max-width: 620px) {
  .hero-screen-nav { bottom: 4px; }
}