/* ============================================================================
   BALLY DOES AI — FAMILY CHASSIS  ·  family-chassis.css
   ----------------------------------------------------------------------------
   The shared shell for the two page FAMILIES (5 city pages, 6 trade FAQ pages).
   Executes §1–§2 of premium-build-system/FAMILY-BUILD-SPEC.md.

   Loaded AFTER premium-teal.css. Reads tokens only — no raw palette hex except
   inside the closer's navy step, where the value IS the design (three distinct
   navy planes so the closer never merges with the site footer beneath it).

   BAND ORDER, no exceptions:
     .fam-masthead  →  [SIGNATURE SLOT]  →  .fam-body  →  .fam-closer

   OWNERSHIP: this file is the ONLY place the .fam-* chassis is defined. A page
   that needs something the chassis lacks means the chassis is wrong — report it,
   do not fork it into a page <style>. Page <style> carries the signature slot's
   own instance rules and nothing else (~40 lines, the family-drift test).

   MOTION BUDGET: M6 fade-up (.reveal) only. No pinning, no scrub, no second
   mechanic. Everything below renders a complete resting state with JS off.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0 · UTILITY
   --------------------------------------------------------------------------- */
.fam-vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================================
   1 · MASTHEAD — typographic, ~40vh, on --paper.
   NO textured hero, NO photographic hero, NO halo radial, NO .band--deep.
   This is the single change that retires the repeated teal-texture ground.
   ========================================================================== */
.fam-masthead {
  position: relative;
  background: var(--paper);
  padding-top: clamp(7.6rem, 16vh, 10.6rem);
  padding-bottom: clamp(2.2rem, 4.6vh, 3.4rem);
  min-height: 44vh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
}
/* one faint ruled field — pure CSS, no asset, no request. Reads as drafting
   paper rather than "another textured hero". */
.fam-masthead::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px);
  background-size: clamp(64px, 7vw, 108px) 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 42%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 42%, #000 78%, transparent 100%);
  opacity: 0.9;
}
.fam-masthead > .shell { position: relative; z-index: 1; width: 100%; }
.fam-masthead__inner { position: relative; }
/* wide: the index rail is lifted into the right column so the masthead reads as a
   spread instead of a left-hugging block with a dead half. */
@media (min-width: 1080px) { .fam-masthead__main { padding-right: 268px; } }

/* breadcrumb */
.fam-crumb {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-aa);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.fam-crumb a { color: var(--muted-aa); transition: color var(--dur-fast) var(--ease-out-quart); }
.fam-crumb a:hover { color: var(--teal-deep); }
.fam-crumb i { font-style: normal; color: var(--line); }

/* ---- index rail — six hairlines, current one burgundy. Doubles as sibling
   navigation. NO per-member colour: the POSITION is the fingerprint, which is
   what keeps the palette lock intact.
   Narrow: a compact horizontal tick motif under the breadcrumb.
   Wide (>=1080px): a vertical mono index in the masthead's right column. ---- */
.fam-ticks { position: relative; display: flex; align-items: flex-end; gap: 13px; height: 24px; margin-top: clamp(1.4rem, 3vh, 2rem); }
.fam-ticks__hd { display: none; }
.fam-ticks__t { position: relative; display: block; width: 12px; height: 24px; }
.fam-ticks__t::before {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 1px; height: 13px;
  background: color-mix(in oklab, var(--ink) 32%, transparent);
  transition: height var(--dur-fast) var(--ease-out-quart), width var(--dur-fast) var(--ease-out-quart), background var(--dur-fast) var(--ease-out-quart);
}
.fam-ticks__t:hover::before, .fam-ticks__t:focus-visible::before { height: 20px; background: var(--teal-deep); }
.fam-ticks__t[aria-current="page"]::before { width: 2px; height: 24px; background: var(--burgundy); }
/* narrow: pure hairline motif. The names would only repeat the label line
   directly beneath it, and the closer's rail carries full sibling navigation. */
.fam-ticks__t .o, .fam-ticks__t span { display: none; }

@media (min-width: 1080px) {
  .fam-ticks { display: block; height: auto; margin: 0; position: absolute; right: 0; bottom: 4px; width: 216px; }
  .fam-ticks__hd {
    display: block; padding-bottom: 11px; border-bottom: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 10px; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-aa);
  }
  .fam-ticks__t {
    width: auto; height: auto; display: flex; align-items: center; gap: 11px;
    padding: 9px 0; border-bottom: 1px solid var(--line-soft);
  }
  .fam-ticks__t::before { position: static; width: 14px; height: 1px; flex: none; }
  .fam-ticks__t:hover::before, .fam-ticks__t:focus-visible::before { width: 22px; height: 1px; }
  .fam-ticks__t[aria-current="page"]::before { width: 22px; height: 2px; }
  .fam-ticks__t .o {
    display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 500;
    letter-spacing: 0.1em; color: var(--muted-aa);
  }
  .fam-ticks__t span {
    display: block; position: static; opacity: 1;
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
    color: var(--muted-aa); margin-left: auto;
    transition: color var(--dur-fast) var(--ease-out-quart);
  }
  .fam-ticks__t:hover span, .fam-ticks__t:focus-visible span { color: var(--teal-deep); }
  .fam-ticks__t[aria-current="page"] span,
  .fam-ticks__t[aria-current="page"] .o { color: var(--burgundy); }
}

/* family label + ordinal */
.fam-label {
  margin-top: clamp(2.1rem, 3.6vh, 2.8rem);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.fam-label b { font-weight: 500; color: var(--burgundy); }
.fam-label i { font-style: normal; width: 26px; height: 1px; background: var(--burgundy); display: inline-block; }

.fam-masthead h1 {
  margin-top: clamp(0.9rem, 1.9vh, 1.4rem);
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-5); line-height: 1.02; letter-spacing: -0.012em;
  color: var(--ink); max-width: 19ch; text-wrap: balance;
}
.fam-masthead h1 em { font-style: italic; color: var(--burgundy); letter-spacing: 0.005em; }

.fam-dek {
  margin-top: clamp(1.1rem, 2.2vh, 1.6rem);
  max-width: 60ch; font-size: var(--step-1); font-weight: 300;
  line-height: 1.55; color: var(--muted);
}
.fam-dek a { color: var(--ink); border-bottom: 1px solid var(--teal-deep); white-space: nowrap; }
.fam-dek a:hover { color: var(--teal-deep); }

.fam-cta {
  margin-top: clamp(1.4rem, 2.8vh, 2rem);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

/* ---- mono spec strip — the masthead's terminal rule ---- */
.fam-spec {
  margin-top: clamp(1.8rem, 3.4vh, 2.6rem);
  padding-top: 15px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-aa);
}
.fam-spec span { display: inline-flex; align-items: center; gap: 9px; }
.fam-spec span::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: color-mix(in oklab, var(--teal-deep) 60%, transparent);
}
.fam-spec a { color: var(--muted-aa); transition: color var(--dur-fast) var(--ease-out-quart); }
.fam-spec a:hover { color: var(--teal-deep); }

/* ============================================================================
   2 · SIGNATURE SLOT SHELL (family-specific artwork lives in the members)
   ========================================================================== */
.fam-sig { position: relative; padding-block: clamp(3.4rem, 7vw, 6rem); overflow: clip; }
.fam-sig__grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(2.2rem, 4.4vw, 3.6rem);
  align-items: center;
}
@media (min-width: 900px) {
  .fam-sig__grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr); gap: clamp(2.6rem, 5vw, 5rem); }
}
.fam-sig__intro h2 {
  margin-top: 16px;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-4); line-height: 1.05; letter-spacing: -0.008em; color: var(--ink);
  max-width: 15ch;
}
.fam-sig__intro h2 em { font-style: italic; color: var(--burgundy); }
.fam-sig__intro p { margin-top: 15px; max-width: 46ch; color: var(--muted); font-weight: 300; line-height: 1.62; }

/* the Linear FIG isometric figure: 1px stroke, no fills, no shadows, depth by
   repeating the same shape with decaying stroke-opacity. ~1KB, zero runtime. */
.fam-fig { margin-top: clamp(1.8rem, 3.4vw, 2.6rem); width: 100%; max-width: 392px; height: auto; display: block; }
.fam-fig .s { stroke: var(--ink); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.fam-fig .t { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.15em; fill: var(--muted-aa); text-transform: uppercase; }
.fam-fig .o { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; fill: var(--burgundy); }
@media (max-width: 899px) { .fam-fig { display: none; } }

/* ---- .fam-thread — the trade family's intake artifact.
   A message TRANSCRIPT card. Never a voice-call UI, never a phone-answering
   screen, never an Instagram/Facebook DM. Text-back intake is shipped, so this
   is the honest artifact. ---- */
.fam-thread { position: relative; margin: 0; }
/* the STAGE holds the card and nothing else — the slot's glow and contact pool
   anchor here so they can never bleed under the caption text below. */
.fam-thread__stage { position: relative; isolation: isolate; }
.fam-thread__card {
  position: relative; z-index: 1; border-radius: var(--r-md);
  background: var(--surface);
  /* linear-06: lit top edge, tight contact shadow, one wide ambient */
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(20,26,36,0.10),
    0 44px 84px -46px rgba(20,26,36,0.55);
  overflow: hidden;
}
.fam-thread__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px clamp(16px, 2.4vw, 24px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(105deg, var(--paper-2) 0%, var(--paper) 62%, var(--wash-deep) 100%);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--muted-aa);
}
.fam-thread__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green-deep);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--green-deep) 20%, transparent); flex: none;
}
.fam-thread__tag { margin-left: auto; color: var(--burgundy); letter-spacing: 0.2em; }

.fam-thread__log {
  list-style: none; margin: 0;
  padding: clamp(18px, 2.6vw, 26px) clamp(16px, 2.4vw, 24px) clamp(26px, 3.4vw, 38px);
  display: flex; flex-direction: column; gap: 12px;
}
.fam-thread__msg { display: flex; flex-direction: column; max-width: 84%; }
.fam-thread__msg p {
  font-size: 15px; line-height: 1.5; padding: 11px 15px; border-radius: 14px;
  text-wrap: pretty;
}
.fam-thread__msg time {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  color: var(--muted); margin-top: 7px;
}
/* OUT = the shop's automatic reply. Oryzo single-source lighting: the lit edge
   is upper-left, matching the band's ground gradient, so a flat rounded
   rectangle reads as a physical object. */
.fam-thread__msg--out { align-self: flex-start; }
.fam-thread__msg--out p {
  color: var(--ink-inv);
  background: linear-gradient(105deg, #235F57 0%, #1A5049 26%, #164740 44%, #123B35 72%, #0F332E 100%);
  border-radius: 14px 14px 14px 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 7px 15px -13px rgba(15,51,46,0.75);
}
.fam-thread__msg--out time { margin-left: 3px; }
/* IN = the customer */
.fam-thread__msg--in { align-self: flex-end; align-items: flex-end; }
.fam-thread__msg--in p {
  color: var(--ink);
  background: linear-gradient(105deg, #F1F3F1 0%, #E9ECEA 46%, #E1E5E4 100%);
  border-radius: 14px 14px 4px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 6px 16px -12px rgba(20,26,36,0.55);
}
.fam-thread__msg--in time { margin-right: 3px; }
.fam-thread__msg--key p { box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 0 1px rgba(96,196,180,0.34), 0 12px 26px -14px rgba(15,51,46,0.9); }

.fam-thread__foot {
  border-top: 1px solid var(--line);
  padding: 13px clamp(16px, 2.4vw, 24px);
  background: var(--paper-2);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-aa);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.fam-thread__cap {
  margin-top: 34px; font-size: 13px; line-height: 1.5; max-width: 52ch;
  color: color-mix(in oklab, var(--muted) 76%, var(--ink) 24%);
}

/* ============================================================================
   3 · BODY MODULE
   ========================================================================== */
/* explicitly opaque: the body band must never composite against whatever the
   compositor has underneath it, so pixel auditors read one unambiguous ground. */
.fam-body { position: relative; background: var(--paper); padding-block: clamp(3.2rem, 6.4vw, 5.4rem); }
.fam-body__inner { max-width: 940px; margin-inline: auto; }

/* ---- hard rules: ONE dense object. The audit's finding on this family was
   three bezel cards each holding one short line over a large empty area, so the
   cards are collapsed into a single panel with a content-height rule strip. ---- */
.fam-rules {
  border-radius: var(--r-md);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(20,26,36,0.28);
  overflow: hidden;
}
.fam-rules__head { padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.2rem) clamp(1.3rem, 2.4vw, 1.8rem); }
.fam-rules__head h2 {
  margin-top: 14px;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-3); line-height: 1.08; color: var(--ink); max-width: 20ch;
}
.fam-rules__head h2 em { font-style: italic; color: var(--burgundy); }
.fam-rules__head p { margin-top: 12px; color: var(--muted); max-width: 52ch; font-weight: 300; }
.fam-rules__list {
  list-style: none; margin: 0; display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .fam-rules__list { grid-template-columns: repeat(3, 1fr); } }
.fam-rules__list li {
  padding: clamp(1.05rem, 2.2vw, 1.45rem) clamp(1.4rem, 3vw, 1.9rem);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 9px;
}
.fam-rules__list li:first-child { border-top: 0; }
@media (min-width: 760px) {
  .fam-rules__list li { border-top: 0; border-left: 1px solid var(--line); }
  .fam-rules__list li:first-child { border-left: 0; }
}
.fam-rules__list .n {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--burgundy);
}
.fam-rules__list p { font-size: 15.5px; line-height: 1.42; color: var(--ink); font-weight: 500; text-wrap: pretty; }

/* ---- Q&A ---- */
.fam-qa { margin-top: clamp(3rem, 6vw, 5rem); }
.fam-qa__head h2 {
  margin-top: 14px;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-4); line-height: 1.04; letter-spacing: -0.008em; color: var(--ink);
  max-width: 24ch;
}
.fam-qa__list { position: relative; margin-top: clamp(1.5rem, 3vw, 2.2rem); border-top: 1px solid var(--line); }
/* ordinal spine — one hairline ties the ten rows into a single object instead of
   ten unrelated bars. Decorative, so it stops short of the last row's rule. */
.fam-qa__list::before {
  content: ""; position: absolute; left: 1.85rem; top: 0; bottom: 1px; width: 1px;
  background: linear-gradient(to bottom, var(--line) 0%, var(--line) 78%, transparent 100%);
  pointer-events: none;
}
@media (max-width: 559px) { .fam-qa__list::before { display: none; } }

.fam-q { border-bottom: 1px solid var(--line); }
.fam-q > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 2.6rem 1fr 1.75rem;
  align-items: start; gap: clamp(8px, 1.6vw, 16px);
  padding: clamp(1.05rem, 2.1vw, 1.4rem) 0;
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.fam-q > summary::-webkit-details-marker { display: none; }
.fam-q__n {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; color: var(--muted-aa); padding-top: 0.42em;
}
.fam-q__t { font-size: var(--step-1); line-height: 1.34; font-weight: 400; color: var(--ink); text-wrap: pretty; }
.fam-q__chev {
  width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--line);
  position: relative; margin-top: 0.18em; justify-self: end;
  transition: transform 0.4s var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart), background var(--dur-fast) var(--ease-out-quart);
}
.fam-q__chev::before, .fam-q__chev::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--teal-deep); border-radius: 2px;
}
.fam-q__chev::before { width: 11px; height: 1.6px; transform: translate(-50%, -50%); }
.fam-q__chev::after  { width: 1.6px; height: 11px; transform: translate(-50%, -50%); transition: transform 0.4s var(--ease-out-quart); }
.fam-q > summary:hover .fam-q__t { color: var(--teal-deep); }
.fam-q > summary:hover .fam-q__chev { border-color: color-mix(in oklab, var(--teal-deep) 40%, transparent); }
.fam-q[open] .fam-q__t { color: var(--teal-deep); }
.fam-q[open] .fam-q__n { color: var(--burgundy); }
/* rotate 180deg, not 90deg: the surviving stroke must stay HORIZONTAL so an open
   row reads as a minus. A 90deg turn leaves a vertical bar, which reads as "|". */
.fam-q[open] .fam-q__chev { transform: rotate(180deg); background: color-mix(in oklab, var(--teal-deep) 12%, transparent); border-color: color-mix(in oklab, var(--teal-deep) 40%, transparent); }
.fam-q[open] .fam-q__chev::after { transform: translate(-50%, -50%) scaleY(0); }

/* A closed <details> in current Chromium keeps a measurable box for its content
   (content-visibility, not display:none), which makes pixel auditors sample a
   ground the user never sees. Collapse it properly. */
.fam-q:not([open]) .fam-q__a { display: none; }

/* answer-first: one direct sentence in --ink at 600, then the detail in --muted */
.fam-q__a {
  grid-column: 2 / -1;
  margin-left: calc(2.6rem + clamp(8px, 1.6vw, 16px));
  padding: 0 0 clamp(1.15rem, 2.3vw, 1.6rem);
  max-width: 66ch; color: var(--muted); font-weight: 300; line-height: 1.68;
}
@media (max-width: 559px) { .fam-q__a { margin-left: 0; } }
.fam-q__a b { color: var(--ink); font-weight: 600; }
.fam-q__a a { color: var(--ink); border-bottom: 1px solid var(--teal-deep); }
.fam-q__a a:hover { color: var(--teal-deep); }
.fam-q[open] .fam-q__a { animation: famAnswer 0.42s var(--ease-out-quart) both; }
@keyframes famAnswer { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* ============================================================================
   4 · CLOSER — the ONE navy dark-guest band.
   ⚠ The canonical site footer beneath it is ALSO navy. Three distinct planes
   keep them from reading as one undifferentiated slab:
     closer ground  #1E314F → #1A2B48   (lighter, gradient)
     recessed rail  rgba(11,17,27,.36)  (bounded rectangle, lit 1px edge)
     footer         #16263F              (flat, darkest)
   plus a lit terminal hairline on the closer's bottom edge.
   ========================================================================== */
.fam-closer.band--deep {
  background: linear-gradient(180deg, #1E314F 0%, #1B2C49 62%, #1A2B48 100%);
  box-shadow: inset 0 1px 0 rgba(243,245,248,0.10), inset 0 -1px 0 rgba(243,245,248,0.20);
  /* the quiet greys, re-tuned for THIS lighter navy (the .band--deep values are
     computed for #16263F and drop under 4.5:1 here) */
  --muted-2:  #9AA4B6;
  --muted-aa: #9AA4B6;
  /* burgundy is the family's marker colour, but .band--deep's #C05576 only makes
     3.6:1 against the recessed rail plane. This tint is the same hue, legible at
     mono label sizes on that plane (5.9:1) — the ground-aware rule, not a new colour. */
  --burgundy-lit: #DD86A0;
  padding-block: clamp(3.6rem, 7vw, 6.2rem) 0;
  position: relative;
}
.fam-closer__top { display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 3vw, 2rem); }
@media (min-width: 900px) {
  .fam-closer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: clamp(2.4rem, 5vw, 5rem); align-items: end; }
}
.fam-closer h2 {
  margin-top: 18px; max-width: 17ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-4); line-height: 1.04; letter-spacing: -0.008em; color: var(--ink);
}
.fam-closer h2 em { font-style: italic; color: var(--glow); }
.fam-closer__dek {
  color: var(--muted); font-weight: 300; line-height: 1.6; max-width: 44ch;
  padding-bottom: 18px; border-bottom: 1px solid rgba(243,245,248,0.12);
}
.fam-closer__row { margin-top: clamp(1.3rem, 2.6vw, 1.8rem); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* recessed sibling rail */
.fam-closer__rail {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  border-radius: var(--r-md);
  background: rgba(11,17,27,0.36);
  box-shadow: inset 0 0 0 1px rgba(243,245,248,0.11), inset 0 1px 0 rgba(243,245,248,0.06);
  overflow: hidden;
}
.fam-closer__raillabel {
  padding: 13px clamp(16px, 2.4vw, 22px);
  border-bottom: 1px solid rgba(243,245,248,0.09);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-aa);
}
.fam-closer__rail ol { list-style: none; margin: 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 600px) { .fam-closer__rail ol { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .fam-closer__rail ol { grid-template-columns: repeat(3, 1fr); } }
.fam-closer__rail li { border-top: 1px solid rgba(243,245,248,0.07); }
.fam-closer__rail a, .fam-closer__rail .cur {
  display: flex; align-items: baseline; gap: 12px;
  padding: 15px clamp(16px, 2.4vw, 22px);
  transition: background var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);
}
.fam-closer__rail a:hover { background: rgba(243,245,248,0.05); }
.fam-closer__rail .n { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--muted-aa); }
.fam-closer__rail .t { font-size: 15.5px; color: var(--ink); }
.fam-closer__rail a:hover .t { color: var(--glow); }
.fam-closer__rail .cur .t { color: var(--muted-aa); }
.fam-closer__rail .cur .n { color: var(--burgundy-lit); }
.fam-closer__rail .m {
  margin-left: auto; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-aa);
}
.fam-closer__rail .cur .m { color: var(--burgundy-lit); }

/* terminal hook — the last row on the page before the footer */
.fam-closer__hook {
  margin-top: clamp(2.2rem, 4.4vw, 3.4rem);
  border-top: 1px solid rgba(243,245,248,0.16);
  padding-block: clamp(1.3rem, 2.6vw, 1.9rem) clamp(1.6rem, 3.2vw, 2.4rem);
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.fam-closer__hook .k {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-aa);
}
.fam-closer__hook a {
  font-family: var(--font-display); font-size: var(--step-2); color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 12px;
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.fam-closer__hook a:hover { color: var(--glow); }
.fam-closer__hook a .o { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--glow); }

/* ============================================================================
   5 · RESPONSIVE + REDUCED MOTION
   ========================================================================== */
@media (max-width: 767px) {
  .fam-masthead { min-height: 0; padding-top: clamp(6.6rem, 20vh, 8.4rem); }
  .fam-masthead h1 { font-size: var(--step-4); max-width: 16ch; }
  .fam-cta .btn { width: 100%; justify-content: space-between; }
  .fam-closer__row .btn { width: 100%; justify-content: space-between; }
  .fam-thread__msg { max-width: 92%; }
  .fam-ticks { gap: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .fam-q[open] .fam-q__a { animation: none; }
  .fam-q__chev, .fam-q__chev::after, .fam-ticks__t::before, .fam-ticks__t span { transition: none; }
}