/* MakersCost -- the film chrome, ported from design/MakersCost.dc.html.

   THE ONE IDEA. The app is paper floating on footage. A page is never a
   dark band cut against a light page: ONE clip is fixed behind the whole
   document at full strength, and the paper sheet slides up over it. Scroll
   the sheet away and the same clip is still there, uncut.

   That is why the ground is `position: fixed` rather than a 260px window,
   and why the band above the sheet is now an empty spacer -- the footage it
   used to own belongs to the page.

   Everything here is measured off the canvas, not eyeballed: the tokens are
   style.css's :root (the canvas lifted them verbatim), and the two shadows
   below are the canvas's FILM_SHADOW and CARD_SHADOW.

   Loaded last, so it wins over the older chrome it replaces. */

:root {
  /* Type over footage. Two stops: a tight one for edge definition, a wide
     one so a white glyph never sits on a bright frame with nothing under
     it. Not a drop shadow for depth -- a legibility floor. */
  --film-shadow: 0 1px 2px rgba(12,10,8,.6), 0 10px 30px rgba(12,10,8,.4);
  /* Paper lifted off footage. The long -24px spread is what separates a
     white card from a bright frame behind it without a border doing the
     work. */
  --card-shadow: 0 1px 2px rgba(26,25,23,.06), 0 24px 48px -24px rgba(12,10,8,.55);
  --sheet-shadow: 0 -32px 64px -24px rgba(12,10,8,.6);
  --sheet-crown: 1px solid rgba(255,255,255,.35);
  --glass-fill: rgba(30,26,22,.52);
  --glass-line: rgba(255,255,255,.24);
  --band-h: 320px;
  --sheet-pad-x: 56px;
}

/* The document's own ground is the dark the footage fades into, so an
   over-scroll or a short page never flashes white. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: #2A251F; overflow-x: hidden; }
::selection { background: var(--selected-fill); }
input, select, button, textarea { font: inherit; }

/* ==================================================================
   1. THE GROUND -- one clip, fixed, behind everything
   ================================================================== */

.ground {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Each page's fallback IS its clip's dominant gradient, so the sides
     read correctly before the video loads and identically if it never
     does. A page that fails to load its footage still looks composed. */
  background: radial-gradient(126% 96% at 50% 4%, #A79C8C 0%, #6E6455 40%, #3A342C 100%);
}
.ground--filament { background: radial-gradient(126% 96% at 80% 20%, #7A6E5C 0%, #4A4238 40%, #2A251F 100%); }
.ground--materials { background: radial-gradient(126% 96% at 20% 80%, #8A7B66 0%, #52493D 40%, #2A251F 100%); }

.ground__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.ground__media.is-ready { opacity: 1; }

/* Base wash: keeps the footage alive rather than crushing it. The copy
   scrim below does the legibility work, and only where copy sits. */
.ground__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24,20,16,.30) 0%, rgba(24,20,16,.22) 46%, rgba(24,20,16,.34) 100%);
}
/* Copy space. Left-heavy, because the band's eyebrow and H1 are
   left-aligned in the 1180 column -- the right of the frame stays open so
   the clip is still identifiable. */
.ground__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(24,20,16,.92) 0%, rgba(24,20,16,.80) 38%, rgba(24,20,16,.52) 66%, rgba(24,20,16,.30) 100%);
}
.ground__scrim--right {
  background: linear-gradient(90deg, rgba(24,20,16,.90) 0%, rgba(24,20,16,.78) 42%, rgba(24,20,16,.50) 70%, rgba(24,20,16,.34) 100%);
}

/* ==================================================================
   2. THE BAND -- now a spacer, not a window
   ================================================================== */

.page-band {
  position: relative;
  z-index: 1;
  height: var(--band-h);
  min-height: 0;
  overflow: visible;
  background: none;
  display: block;
}
.page-band__inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  /* Top-anchored, clearing the fixed nav. The old band justified its stack
     to the bottom because the band was the picture; now the picture runs
     the whole page and the heading simply starts below the chrome. */
  padding: 132px var(--sheet-pad-x) 0;
  text-shadow: var(--film-shadow);
  pointer-events: none;
}
.page-band-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.page-band-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  max-width: 20ch;
  text-wrap: pretty;
}
.page-band-title em { font-style: italic; font-weight: 400; }
.page-band-title.long { font-size: 36px; max-width: 26ch; }

/* ==================================================================
   3. THE SHEET -- paper, floating on the clip
   ================================================================== */

.sheet {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin: -30px auto 0;
  padding: 48px var(--sheet-pad-x) 72px;
  background: var(--paper);
  border-radius: 24px 24px 0 0;
  /* The crown is a hairline of light along the fold, and the shadow is
     thrown UPWARD onto the footage. Together they are what makes the
     paper read as sliding out from under the picture rather than being
     pasted on top of it. */
  border-top: var(--sheet-crown);
  box-shadow: var(--sheet-shadow);
  /* The page ends in paper, not in a strip of dark under the last
     paragraph: the sheet is the last thing on the page and must reach the
     bottom of the viewport even when its content does not. */
  min-height: calc(100vh - var(--band-h) + 30px);
}
main.sheet { max-width: 1180px; }

/* ==================================================================
   4. THE NAV -- fixed everywhere, two states
   ------------------------------------------------------------------
   Glass while it is over footage; paper once the sheet's crown reaches
   y = 40. One identity, two skins, and the transition is the whole
   handoff between the picture and the app.
   ================================================================== */

.hero-nav {
  position: fixed;
  z-index: 50;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  background: none;
  border-bottom: none;
  backdrop-filter: none;
  pointer-events: none;
  text-shadow: none;
}

/* -- the two skins, applied to each floating element rather than to a
   slab behind the row. The row itself is never a bar. -- */
.hero-nav .hero-brand,
.hero-nav .hero-pills,
.hero-nav .hero-bookmarklet-link {
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(22px);
  transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.hero-nav.on-sheet .hero-brand,
.hero-nav.on-sheet .hero-pills,
.hero-nav.on-sheet .hero-bookmarklet-link {
  background: var(--surface);
  border-color: var(--line);
  backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(26,25,23,.04), 0 10px 26px -16px rgba(26,25,23,.22);
}

.hero-nav .hero-brand {
  justify-self: start;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 6px;
  border-radius: 999px;
  pointer-events: auto;
}
/* The brand is an anchor, so the global `a { color: var(--link) }` reaches
   it. Nothing inside it inherits that today -- the wordmark and the tile
   both set their own -- but a future child would come out link-blue on a
   page whose palette has no blue in it. */
.hero-nav .hero-brand { color: inherit; }
.hero-nav .hero-brand:hover { text-decoration: none; color: inherit; }

.hero-logo-tile {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(255,255,255,.14);
  backdrop-filter: none;
  transition: background .25s ease, border-color .25s ease;
}
.hero-nav.on-sheet .hero-logo-tile { border-color: var(--line); background: var(--surface-alt); }
.hero-logo-glyph {
  width: 13px; height: 13px; border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,.92);
  transition: border-color .25s ease;
}
.hero-nav.on-sheet .hero-logo-glyph { border-color: var(--ink); }
.hero-wordmark {
  font-family: var(--font-serif);
  font-size: 23px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #FFFFFF;
  transition: color .25s ease;
}
.hero-nav.on-sheet .hero-wordmark { color: var(--ink); }

.hero-pills {
  min-width: 0;
  display: flex;
  gap: 3px;
  padding: 6px;
  border-radius: 999px;
  pointer-events: auto;
}
.hero-pills .pill {
  padding: 9px 17px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  background: transparent;
  color: rgba(255,255,255,.94);
  transition: background .25s ease, color .25s ease;
}
.hero-pills .pill.active { background: rgba(255,255,255,.94); color: var(--ink); font-weight: 700; }
.hero-pills .pill:hover { color: #FFFFFF; text-decoration: none; }
.hero-pills .pill.active:hover { color: var(--ink); }
.hero-nav.on-sheet .hero-pills .pill { color: var(--muted); }
.hero-nav.on-sheet .hero-pills .pill:hover { color: var(--ink); }
.hero-nav.on-sheet .hero-pills .pill.active { background: var(--selected-fill); color: var(--ink); }

.hero-nav-right {
  justify-self: end;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}
.hero-bookmarklet-link {
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  color: rgba(255,255,255,.9);
}
.hero-bookmarklet-link:hover { color: #FFFFFF; text-decoration: none; }
.hero-nav.on-sheet .hero-bookmarklet-link { color: var(--muted); }
.hero-nav.on-sheet .hero-bookmarklet-link:hover { color: var(--ink); }

.hero-new-btn {
  white-space: nowrap;
  display: flex; align-items: center; gap: 9px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background .25s ease, color .25s ease;
}
.hero-new-btn:hover { color: var(--ink); text-decoration: none; opacity: .92; }
.hero-new-btn .arrow { font-size: 13px; }
.hero-new-btn__short { display: none; }
.hero-nav.on-sheet .hero-new-btn { background: var(--ink-strong); color: var(--ink-on-dark); }
.hero-nav.on-sheet .hero-new-btn:hover { color: var(--ink-on-dark); }

/* Legacy alias: .past-hero was the old name for this state and is still
   set by the report wrapper. Same skin, one source. */
.hero-nav.past-hero .hero-brand,
.hero-nav.past-hero .hero-pills,
.hero-nav.past-hero .hero-bookmarklet-link {
  background: var(--surface);
  border-color: var(--line);
  backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(26,25,23,.04), 0 10px 26px -16px rgba(26,25,23,.22);
}
.hero-nav.past-hero .hero-logo-tile { border-color: var(--line); background: var(--surface-alt); }
.hero-nav.past-hero .hero-logo-glyph { border-color: var(--ink); }
.hero-nav.past-hero .hero-wordmark { color: var(--ink); }
.hero-nav.past-hero .hero-pills .pill { color: var(--muted); }
.hero-nav.past-hero .hero-pills .pill.active { background: var(--selected-fill); color: var(--ink); }
.hero-nav.past-hero .hero-bookmarklet-link { color: var(--muted); }
.hero-nav.past-hero .hero-new-btn { background: var(--ink-strong); color: var(--ink-on-dark); }

/* ==================================================================
   5. PAPER FURNITURE
   ------------------------------------------------------------------
   The pieces that appear on both the landing's dark bands and the
   pages' sheets. One rule the canvas is strict about: long copy is
   NEVER set on footage. A paragraph over video goes on a white strip
   (.lead-strip); only headings, eyebrows and one-line leads take the
   film treatment.
   ================================================================== */

.rule-dark,
.rule-paper {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 14px;
}
.rule-dark { border-bottom: 1px solid rgba(255,255,255,.24); text-shadow: var(--film-shadow); }
.rule-paper { border-bottom: 1px solid var(--line); }

.eyebrow-dark, .aux-dark, .eyebrow-paper, .aux-paper {
  font-family: var(--font-mono);
  font-size: 10.5px;
}
.eyebrow-dark, .eyebrow-paper { letter-spacing: 0.14em; text-transform: uppercase; }
.eyebrow-dark { color: rgba(255,255,255,.92); }
.aux-dark { color: rgba(255,255,255,.72); }
.eyebrow-paper { color: var(--muted-2); }
.aux-paper { color: var(--muted); }

.eyebrow-block {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  text-shadow: var(--film-shadow);
}

.h2-film, .h2-film--big, .h2-paper {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.h2-film {
  font-size: 46px;
  margin: 28px 0 0;
  max-width: 24ch;
  color: #FFFFFF;
  text-shadow: var(--film-shadow);
}
.h2-film--big {
  font-size: 52px;
  line-height: 1.06;
  margin: 0 0 18px;
  max-width: 18ch;
  color: #FFFFFF;
  text-shadow: var(--film-shadow);
}
.h2-film em, .h2-film--big em, .film-h1 em { font-style: italic; font-weight: 400; }
.h2-paper {
  font-size: 46px;
  margin: 28px 0 0;
  max-width: 24ch;
  color: var(--ink);
}
.lead-paper {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink-2);
  text-wrap: pretty;
}

.lead-strip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  padding: 20px 24px;
  margin-top: 22px;
  max-width: 70ch;
}
.lead-strip p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink-2);
  text-wrap: pretty;
}
.lead-strip p + p { margin-top: 10px; }

.paper-card, .paper-card--tight {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
}
.paper-card { padding: 28px 26px 30px; gap: 12px; }
.paper-card--tight { padding: 22px; gap: 10px; }

.card-num {
  font-family: var(--font-serif);
  font-size: 38px; font-weight: 300; line-height: 1;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.card-title, .card-title--sm {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--ink);
}
.card-title { font-size: 22px; line-height: 1.2; }
.card-title--sm { font-size: 20px; line-height: 1.18; }
.card-body, .card-body--sm { margin: 0; color: var(--ink-2); text-wrap: pretty; }
.card-body { font-size: 14.5px; line-height: 1.6; }
.card-body--sm { font-size: 14px; line-height: 1.55; }
.card-meta {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.card-tag {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted-2);
}
/* The tier badge is pinned to the card's foot so a row of cards agrees on
   where confidence is stated, whatever length the copy runs to. */
.card-tier { margin-top: auto; padding-top: 16px; }

.grid-3, .grid-4 { display: grid; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 44px; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 42px; }

/* -- buttons ------------------------------------------------------- */
.btn-white, .btn-glass, .btn-white-sm, .btn-ink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  margin-top: 0;
}
.btn-white { gap: 10px; padding: 17px 32px; background: #FFFFFF; color: var(--ink); font-size: 15.5px; font-weight: 700; }
.btn-glass {
  gap: 10px; padding: 17px 28px; color: #FFFFFF; font-size: 15.5px; font-weight: 500;
  background: var(--glass-fill); border: 1px solid var(--glass-line); backdrop-filter: blur(22px);
}
.btn-white-sm { gap: 9px; margin-top: 28px; padding: 15px 26px; background: #FFFFFF; color: var(--ink); font-size: 14.5px; font-weight: 600; }
.btn-ink { gap: 9px; margin-top: 28px; padding: 14px 24px; background: var(--ink-strong); color: var(--ink-on-dark); font-size: 14px; font-weight: 600; }
.btn-white:hover, .btn-white-sm:hover { color: var(--ink); text-decoration: none; opacity: .92; }
.btn-glass:hover { color: #FFFFFF; text-decoration: none; background: rgba(30,26,22,.66); }
.btn-ink:hover { color: var(--ink-on-dark); text-decoration: none; opacity: .92; }

/* -- the foot of every sheet --------------------------------------- */
.footer-rule {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 96px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.foot-wordmark { font-family: var(--font-serif); font-size: 22px; color: var(--ink); }
.foot-note {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}

/* ==================================================================
   6. THE LANDING -- six bands over six crossfading layers
   ------------------------------------------------------------------
   The crossfade weights are computed in the page's own script and are a
   partition: for band i, the fade-in at its top edge minus the fade-out
   at its bottom edge. They sum to exactly 1 everywhere, so two layers
   are lit during a crossing and one otherwise -- no dip, no flash, no
   seam. Content opacity is never touched, so type never double-exposes.
   ================================================================== */

.film-layers { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #2A251F; }
.film-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  background: radial-gradient(126% 96% at 50% 4%, #A79C8C 0%, #6E6455 40%, #3A342C 100%);
}
.film-layer--hero { background: radial-gradient(126% 96% at 50% 4%, #A79C8C 0%, #6E6455 40%, #3A342C 100%); }
.film-layer--filament { background: radial-gradient(126% 96% at 80% 20%, #7A6E5C 0%, #4A4238 40%, #2A251F 100%); }
.film-layer--materials { background: radial-gradient(126% 96% at 20% 80%, #8A7B66 0%, #52493D 40%, #2A251F 100%); }
/* Layer 0 is lit on load, before the script has run a frame. */
.film-layer:first-child { opacity: 1; }

.film-layer__drift { position: absolute; inset: 0; will-change: transform; }
.film-layer__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.film-layer__media.is-ready { opacity: 1; }
/* The blurred twin sits on its own fallback gradient and never fades in
   from transparent: it is the defocused ground a band's copy sits on, and
   a crossfade inside a crossfade reads as a fault. */
.film-layer__media--blur {
  inset: -8%;
  width: 116%; height: 116%;
  opacity: 1;
  transition: none;
  filter: blur(58px) saturate(.72) brightness(.72);
}
.film-layer__media--blur-deep { filter: blur(64px) saturate(.6) brightness(.55); }

.film-layer__wash { position: absolute; inset: 0; }
.film-layer__wash--hero {
  background: linear-gradient(180deg, rgba(24,20,16,.46) 0%, rgba(24,20,16,.22) 24%, rgba(24,20,16,.34) 56%, rgba(24,20,16,.80) 100%);
}
.film-layer__wash--blur {
  background: linear-gradient(180deg, rgba(20,17,14,.62) 0%, rgba(20,17,14,.68) 50%, rgba(20,17,14,.74) 100%);
}
.film-layer__wash--blur-deep {
  background: linear-gradient(180deg, rgba(20,17,14,.74) 0%, rgba(20,17,14,.78) 50%, rgba(20,17,14,.82) 100%);
}
.film-layer__wash--bookend {
  background: linear-gradient(180deg, rgba(24,20,16,.30) 0%, rgba(24,20,16,0) 30%, rgba(24,20,16,0) 70%, rgba(24,20,16,.56) 100%);
}
.film-layer__wash--bookend-deep {
  background: linear-gradient(180deg, rgba(24,20,16,.30) 0%, rgba(24,20,16,0) 30%, rgba(24,20,16,0) 70%, rgba(24,20,16,.62) 100%);
}
.film-layer__copy { position: absolute; inset: 0; }
.film-layer__copy--hero {
  background: radial-gradient(62% 58% at 50% 50%, rgba(24,20,16,.60) 0%, rgba(24,20,16,.34) 48%, rgba(24,20,16,0) 100%);
}
@media (max-width: 639px) {
  /* The headline fills far more of a phone's frame, so the pool of shade
     under it has to widen to match or the last line runs off its edge. */
  .film-layer__copy--hero {
    background: radial-gradient(90% 68% at 50% 50%, rgba(24,20,16,.60) 0%, rgba(24,20,16,.34) 48%, rgba(24,20,16,0) 100%);
  }
}
.film-layer__copy--left {
  background: linear-gradient(100deg, rgba(24,20,16,.92) 0%, rgba(24,20,16,.80) 38%, rgba(24,20,16,.52) 66%, rgba(24,20,16,.30) 100%);
}
.film-layer__copy--right {
  background: linear-gradient(90deg, rgba(24,20,16,.90) 0%, rgba(24,20,16,.78) 42%, rgba(24,20,16,.50) 70%, rgba(24,20,16,.34) 100%);
}

/* -- the band rail: which band you are on, at a glance -- */
.rail {
  position: fixed;
  z-index: 45;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 11px;
  pointer-events: none;
  transition: opacity .25s ease;
}
.rail.is-hidden { opacity: 0; }
.rail__dot {
  display: block;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  transition: height .35s ease, background .35s ease;
}
.rail__dot.is-on { height: 22px; background: rgba(255,255,255,.95); }

.landing { position: relative; z-index: 1; }
.band {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 120px var(--sheet-pad-x);
  /* `safe center` is the whole point of the pair. A band centres its
     content in the viewport, but when the content is TALLER than the
     space -- a phone, a short laptop, a large-text setting -- plain
     `center` overflows in both directions and pushes the first line up
     under the fixed nav. `safe` falls back to start in exactly that
     case, so the padding that clears the nav is never overrun. */
  justify-content: center;
  justify-content: safe center;
}
.band--hero {
  align-items: center;
  text-align: center;
  padding: 130px 40px 90px;
}
.band--sheet { min-height: 0; padding: 0; display: block; }
.band__inner { max-width: 1180px; margin: 0 auto; width: 100%; }
.band__inner--split {
  max-width: 1180px; margin: 0 auto; width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 56px;
  align-items: center;
}
.band__copy { max-width: 640px; }

/* -- the hero band -- */
.film-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 17px;
  border-radius: 999px;
  background: var(--glass-fill);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(22px);
}
.film-badge__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--positive-hero); flex: none; }
.film-badge__text {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255,255,255,.94);
}
.film-h1 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.028em;
  color: #FFFFFF;
  margin: 26px 0 0;
  max-width: 15ch;
  text-wrap: balance;
  text-shadow: var(--film-shadow);
}
.film-leads { margin-top: 24px; max-width: 600px; }
.film-leads p { margin: 0; font-size: 16.5px; line-height: 1.55; text-shadow: var(--film-shadow); }
.film-leads .lead-bold { font-weight: 500; color: #FFFFFF; }
.film-leads .lead-plain { margin-top: 8px; color: rgba(255,255,255,.92); }
.hero-buttons {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; justify-content: center;
  margin-top: 36px;
}
.input-row {
  display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;
  margin-top: 52px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
  text-shadow: var(--film-shadow);
}

/* -- the materials demo panel -- */
.demo-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  padding: 26px;
}
.demo-panel__rows { margin-top: 18px; }
.demo-row { display: flex; align-items: center; gap: 12px; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.demo-row + .demo-row { padding: 14px 0 0; border-bottom: none; }
.demo-row__swatch { width: 22px; height: 22px; border-radius: 999px; flex: none; border: 1px solid rgba(26,25,23,.20); }
.demo-row__what { flex: 1; min-width: 0; }
.demo-row__name { font-size: 14.5px; color: var(--ink); }
.demo-row__meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
.demo-row__cost { font-family: var(--font-serif); font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-panel__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.demo-panel__total { font-family: var(--font-serif); font-size: 38px; font-weight: 300; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }

/* -- band 6: the landing's own sheet, the hand-off into the app -- */
.landing-sheet {
  position: relative;
  background: var(--paper);
  border-radius: 24px 24px 0 0;
  border-top: var(--sheet-crown);
  box-shadow: var(--sheet-shadow);
  padding: 96px var(--sheet-pad-x) 64px;
  /* The page must end in paper. With an empty history this sheet is short,
     and without a floor the last thing a first-time visitor sees is a strip
     of the body's dark under the footer rule. */
  min-height: 92vh;
}
.landing-sheet__lift { height: 8vh; }

/* ==================================================================
   7. ANALYZE -- four ways in, on paper
   ------------------------------------------------------------------
   The four-mode switch used to be glass bars floating on the hero. It
   is a working form, and a working form belongs on paper: the canvas
   moves it onto a white card with the confidence it will earn stated
   beside it, before you commit anything.
   ================================================================== */

.mode-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.mode-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-3);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mode-tab:hover { border-color: var(--chip-border); }
.mode-tab__tag {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.mode-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mode-radio:focus-visible + .mode-tab { outline: 2px solid var(--ink); outline-offset: 2px; }

.work-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px; align-items: flex-start; }
.work-card {
  flex: 1 1 460px;
  min-width: 0;
  padding: 28px 30px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.work-title { margin: 0; font-family: var(--font-serif); font-size: 26px; font-weight: 500; color: var(--ink); }
.work-help { margin: 8px 0 0; max-width: 62ch; color: var(--muted); font-size: 14.5px; line-height: 1.6; text-wrap: pretty; }

.drop-zone {
  margin-top: 26px;
  border: 1px dashed var(--chip-border);
  border-radius: 18px;
  background: repeating-linear-gradient(135deg, var(--selected-fill) 0 6px, #F7F5F1 6px 12px);
  padding: 44px 30px;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.drop-zone.is-dragover { border-color: var(--ink); background: var(--selected-fill); }
.drop-zone__title { font-family: var(--font-serif); font-size: 22px; color: var(--ink); }
.drop-zone__title em { font-style: italic; font-weight: 400; }
.drop-zone__help { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
/* The native control, dressed. Keeping the real <input type=file> rather
   than a <label> wrapping a hidden one means the browser's own "no file
   chosen" / filename readout still does its job -- there is no custom
   state to keep in sync, which is the whole reason drag-and-drop is a
   pure enhancement here. */
.drop-zone input[type="file"] {
  margin-top: 20px;
  font-size: 13px;
  color: var(--muted);
  max-width: 100%;
}
.drop-zone input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  background: var(--ink-strong);
  color: var(--ink-on-dark);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.drop-zone input[type="file"]::file-selector-button:hover { opacity: .92; }

.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 7px;
  font-weight: 400;
}
.field-pill {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  /* background-COLOR, not the shorthand: style.css draws the select caret
     with two background-images, and `background: <colour>` resets those to
     none -- which silently turns every <select> on this page into a box
     with no affordance at all. */
  background-color: var(--surface-alt);
  color: var(--ink);
  font-size: 14px;
}
/* The shorthand padding above also clears the room style.css reserves for
   that caret. */
select.field-pill { padding-right: 32px; }
.field-area {
  width: 100%;
  min-height: 190px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  background-color: var(--surface-alt);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
}
.manual-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 14px; }
.manual-grid__wide { grid-column: 1 / -1; }
.dims-line { display: flex; align-items: center; gap: 10px; }
.dims-line .field-pill { flex: 1 1 0; min-width: 0; width: auto; }
.dims-x { font-family: var(--font-mono); font-size: 12px; color: var(--muted); flex: none; }

.upload-progress { margin: 14px 0 0; }
.upload-progress__bar { display: block; width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--rule); }
.upload-progress__bar::-webkit-progress-bar { background: var(--rule); border-radius: 3px; }
.upload-progress__bar::-webkit-progress-value { background: var(--ink); border-radius: 3px; }
.upload-progress__bar::-moz-progress-bar { background: var(--ink); border-radius: 3px; }
.upload-progress__note { margin: 7px 0 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.work-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line-3);
  flex-wrap: wrap;
}
.work-footer .field-hint, .work-note { margin: 0; font-size: 13px; color: var(--ink-2); }
.primary-btn {
  margin: 0;
  padding: 13px 26px;
  border: none;
  border-radius: 999px;
  background: var(--ink-strong);
  color: var(--ink-on-dark);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.primary-btn:hover { opacity: .92; }

.side-rail {
  flex: 1 1 300px;
  max-width: 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 96px;
}
.side-card {
  padding: 22px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.side-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-2);
}
.side-card__why { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); text-wrap: pretty; }
.tier-legend { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.tier-legend__row { display: flex; align-items: flex-start; gap: 10px; }
.tier-legend__note { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

.caution-card {
  margin-top: 24px;
  background: var(--caution-fill);
  border: 1px solid var(--caution-line);
  border-radius: 18px;
  padding: 24px 26px;
}
.caution-card p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.caution-tag {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--caution-ink);
}
.caution-card__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }

/* ==================================================================
   8. HISTORY -- what you have already costed
   ================================================================== */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.stat-card {
  padding: 20px 22px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.stat-value {
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: 34px; font-weight: 300; line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-tab {
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.filter-tab:hover { border-color: var(--chip-border); color: var(--ink); text-decoration: none; }
.filter-tab.is-on { background: var(--ink-strong); border-color: var(--ink-strong); color: var(--ink-on-dark); }
.filter-tab.is-on:hover { color: var(--ink-on-dark); }
/* The search sits in .filter-row's flex line. Its <form> wrapper needs no
   look of its own, only the right flex behaviour and none of the browser's
   default form margin. */
.filter-search { margin: 0; flex: 0 1 auto; }
.search-wide {
  width: 210px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: var(--surface);
  font-size: 13px;
  color: var(--ink);
}

/* ==================================================================
   9. NARROW
   ------------------------------------------------------------------
   The canvas switches on two widths and so does this: 1120px is where
   the nav drops its secondary link rather than let the row wrap, and
   640px is where every two-up becomes one-up and the film type steps
   down a size. Between them nothing changes, because nothing needs to.
   ================================================================== */

/* The bookmarklet link is the first thing to go: it is a shortcut to a
   page the nav can still reach, and keeping it wraps the CTA. */
@media (max-width: 1119px) {
  .hero-bookmarklet-link { display: none; }
}

@media (max-width: 860px) {
  :root { --sheet-pad-x: 28px; }
  .film-h1 { font-size: 68px; }
  .h2-film, .h2-paper { font-size: 40px; }
  .h2-film--big { font-size: 44px; }
  .side-rail, .calc-panel-sticky { position: static; max-width: none; }
}

@media (max-width: 639px) {
  /* 260px was the canvas's mobile band. The nav is two rows tall here,
     which the canvas's was not, so the band grows by the extra row --
     otherwise the page's own name starts under the chrome. */
  :root { --band-h: 300px; --sheet-pad-x: 20px; }

  /* Two rows on a phone. Four uppercase pills cannot share a line with
     the brand and the CTA at 375px -- the grid's centre column has no
     room and the brand slides under the button. Dropping the pills was
     the other option and it is worse: it leaves a phone with no way to
     reach Materials or History at all. So the pills take their own row
     and scroll sideways if even that is not enough. */
  .hero-nav {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    row-gap: 9px;
    padding: 12px 14px;
  }
  .hero-wordmark { font-size: 19px; }
  .hero-new-btn { padding: 10px 15px; }
  .hero-new-btn__long { display: none; }
  .hero-new-btn__short { display: inline; }
  /* Explicit placement, all three. Auto-flow put the CTA on a third row
     of its own -- a full-width item in the middle of the flow pushes
     whatever follows past it -- and the nav then covered the badge under
     it. */
  .hero-nav .hero-brand { grid-row: 1; grid-column: 1; }
  .hero-nav-right { grid-row: 1; grid-column: 2; }
  .hero-pills {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: stretch;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hero-pills::-webkit-scrollbar { display: none; }
  .hero-pills .pill { padding: 8px 13px; }


  .rail { display: none; }

  /* The two-row nav is ~126px tall, so everything it sits over starts
     lower here than on a desktop. */
  .band { padding: 132px 20px 96px; }
  .band--hero { padding: 150px 20px 80px; }
  .band__inner--split { grid-template-columns: 1fr; gap: 32px; }
  .grid-3 { grid-template-columns: 1fr; margin-top: 32px; }
  .grid-4 { grid-template-columns: 1fr; margin-top: 30px; }

  .film-h1 { font-size: 48px; }
  .h2-film, .h2-paper, .page-band-title { font-size: 34px; }
  .h2-film--big { font-size: 36px; }
  .page-band-title.long { font-size: 29px; max-width: none; }
  .film-leads p, .lead-strip p { font-size: 15.5px; }
  .lead-strip { padding: 18px 20px; }

  .hero-buttons { flex-direction: column; width: 100%; margin-top: 32px; }
  .hero-buttons > * { width: 100%; }
  .input-row { gap: 18px; margin-top: 38px; }

  .landing-sheet { padding: 64px 20px 56px; }
  .page-band__inner { padding: 146px 20px 0; }
  .sheet { padding: 40px 20px 64px; border-radius: 20px 20px 0 0; }
  .footer-rule { margin-top: 56px; }

  .work-card { padding: 24px 22px; }
  .manual-grid { grid-template-columns: 1fr; }
  .paper-card { padding: 24px 22px 26px; }
  .filter-search { flex: 1 1 100%; }
  .search-wide { width: 100%; }
  .filter-row { gap: 14px; }
}

/* Short viewports -------------------------------------------------------
   The design is authored at desktop widths only and says nothing about
   short windows (README open question #7). A 96px display line plus two
   leads plus two buttons is taller than a 700px-tall window, and a band
   centres its content -- so on a short screen the headline would ride up
   under the fixed nav. this file uses `justify-content: safe center` so it
   cannot, and these rules give it the room not to need that fallback.
   Tighten the type rather than let anything disappear. */
/* Height-gated only above the phone breakpoint: a 375x667 handset matches
   both queries, and without the min-width the short-viewport size (72px)
   would win over the narrow one (48px) purely by source order. */
@media (min-width: 640px) and (max-height: 760px) {
  .film-h1 { font-size: 72px; margin-top: 20px; }
  .film-leads { margin-top: 18px; }
  .hero-buttons { margin-top: 26px; }
  .input-row { margin-top: 32px; }
}
@media (min-width: 640px) and (max-height: 640px) {
  .film-h1 { font-size: 56px; }
  /* The badge is a freshness stamp, not a control; it is the one thing
     here whose absence costs nothing. */
  .film-badge { display: none; }
  .input-row { display: none; }
}

/* ==================================================================
   10. STILLNESS
   ------------------------------------------------------------------
   design/README.md: "the design is deliberately still". Reduced motion
   holds every clip on frame one, drops the drift and turns the
   crossfade into a hard switch -- the page still composes, it simply
   stops moving.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ground__media, .film-layer__media { transition: none; opacity: 1; }
  .film-layer__drift { transform: none !important; }
  .hero-nav .hero-brand,
  .hero-nav .hero-pills,
  .hero-nav .hero-bookmarklet-link,
  .hero-nav .hero-new-btn,
  .rail, .rail__dot { transition: none; }
}

/* ==================================================================
   11. STRAGGLERS
   ------------------------------------------------------------------
   Two rules that outlived the sections they were written in.
   ================================================================== */

/* The one-line opener under a sheet's heading. Used by Materials and by
   the bookmarklet page; it is a lead, not a paragraph, so it keeps its
   own measure rather than inheriting .lead-paper's. */
.sheet-lead {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 30px;
  max-width: 640px;
  text-wrap: pretty;
}
.sheet-lead strong { font-weight: 700; color: var(--ink); }

/* Report has no band and no footage: it is a document, not a doorway. So
   the paper is not a 1180px card floating on a picture -- with nothing
   behind it that would just be a white column on a dark field. It takes
   the whole width, keeps the nav's paper state from the first pixel, and
   the measure moves inside, onto the content.

   The top padding clears the nav (81px tall) with a real gap rather than
   a hairline: the listing title is the first thing on the page and must
   not read as tucked under the chrome. */
.report-nav-wrap + main.sheet {
  margin-top: 0;
  max-width: none;
  border-radius: 0;
  border-top: none;
  box-shadow: none;
  padding-top: 116px;
  min-height: 100vh;
}
.report-nav-wrap + main.sheet > .report-shell { max-width: 1180px; margin: 0 auto; }
@media (max-width: 639px) {
  /* The nav is two rows tall on a phone, so 116px puts the listing header
     under it. */
  .report-nav-wrap + main.sheet { padding-top: 152px; }
  /* Thumbnail, title and asking price on one 375px line leaves the title
     about eight characters wide. The price takes its own row. */
  .listing-header { flex-wrap: wrap; }
  .listing-header .meta { flex: 1 1 180px; }
  .listing-price-block { flex: 1 1 100%; text-align: left; }
}

/* ==================================================================
   12. THE MODE SWITCH -- CSS only
   ------------------------------------------------------------------
   Four visually-hidden radios and plain sibling selectors, the same
   trick the report's size chips use. Switching modes and submitting
   any of the forms both work with JavaScript off, which matters here
   more than anywhere: this page IS the app's front door.
   ================================================================== */

.mode-panel, .mode-why { display: none; }
.side-card__tier { margin: 14px 0 0; }

#hm-threemf:checked     ~ .mode-tabs label[for="hm-threemf"],
#hm-manual:checked      ~ .mode-tabs label[for="hm-manual"],
#hm-source:checked      ~ .mode-tabs label[for="hm-source"],
#hm-bookmarklet:checked ~ .mode-tabs label[for="hm-bookmarklet"],
#hm-url:checked         ~ .mode-tabs label[for="hm-url"] {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
  color: var(--ink-on-dark);
}
#hm-threemf:checked     ~ .mode-tabs label[for="hm-threemf"] .mode-tab__tag,
#hm-manual:checked      ~ .mode-tabs label[for="hm-manual"] .mode-tab__tag,
#hm-source:checked      ~ .mode-tabs label[for="hm-source"] .mode-tab__tag,
#hm-bookmarklet:checked ~ .mode-tabs label[for="hm-bookmarklet"] .mode-tab__tag,
#hm-url:checked         ~ .mode-tabs label[for="hm-url"] .mode-tab__tag {
  border-color: rgba(243,241,236,.34);
  color: rgba(243,241,236,.82);
}

#hm-threemf:checked     ~ .work-row .mode-panel-threemf,
#hm-manual:checked      ~ .work-row .mode-panel-manual,
#hm-source:checked      ~ .work-row .mode-panel-source,
#hm-bookmarklet:checked ~ .work-row .mode-panel-bookmarklet,
#hm-url:checked         ~ .work-row .mode-panel-url,
#hm-threemf:checked     ~ .work-row .mode-why-threemf,
#hm-manual:checked      ~ .work-row .mode-why-manual,
#hm-source:checked      ~ .work-row .mode-why-source,
#hm-bookmarklet:checked ~ .work-row .mode-why-bookmarklet,
#hm-url:checked         ~ .work-row .mode-why-url { display: block; }

/* The keyboard's own focus ring, on the label the hidden radio drives. */
#hm-threemf:focus-visible     ~ .mode-tabs label[for="hm-threemf"],
#hm-manual:focus-visible      ~ .mode-tabs label[for="hm-manual"],
#hm-source:focus-visible      ~ .mode-tabs label[for="hm-source"],
#hm-bookmarklet:focus-visible ~ .mode-tabs label[for="hm-bookmarklet"],
#hm-url:focus-visible         ~ .mode-tabs label[for="hm-url"] {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Forms inside the work card carry the card's own rhythm, not the
   global form spacing style.css gives a bare <form>. */
.mode-panel { margin: 0; }
.mode-panel .field-label { margin-top: 0; }
.mode-panel .caution-card a { color: var(--caution-ink); text-decoration: underline; }
.mode-panel .caution-card a:hover { color: var(--ink); }

/* Sign-in has no navigation, only an identity: every destination behind a
   pill needs the session this page exists to create. Dropping the pills
   leaves a one-item grid, which would centre the wordmark. */
.hero-nav--bare { grid-template-columns: auto; justify-content: start; }