/* My Unclaimed Estate — myunclaimedestate.com
   Filename-versioned: nginx serves css/js immutable, so a change ships as
   mue.v6.css, never as a query string. */

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/sourcesans3-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */
:root {
  /* Sampled from the brand mark: the logo carries exactly two inks. */
  --ink: #00241B;
  --ink-soft: #0B3A2C;
  --body: #253029;
  --muted: #5A6B62;
  --gold: #C08830;
  --gold-deep: #8A5E18;      /* gold dark enough for text on paper */
  --gold-wash: #F3E6D0;
  --paper: #F4F7F2;          /* faint green cast, not a warm cream */
  --paper-lift: #FBFCFA;
  --rule: #DCE4DA;
  --rule-strong: #C2CFBF;

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ui: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --measure: 38rem;          /* ~72 characters at the body size */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --band: clamp(3rem, 7vw, 5.5rem);   /* vertical rhythm between sections */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--display);
  font-variation-settings: 'opsz' 14, 'SOFT' 0, 'WONK' 0;
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); font-variation-settings: 'opsz' 90, 'SOFT' 0, 'WONK' 0; }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); font-variation-settings: 'opsz' 60, 'SOFT' 0, 'WONK' 0; }
h3 { font-size: 1.28rem; font-variation-settings: 'opsz' 30, 'SOFT' 0, 'WONK' 0; letter-spacing: -0.005em; }
h4 { font-size: 1.06rem; font-variation-settings: 'opsz' 20, 'SOFT' 0, 'WONK' 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 0.18em; }
a:hover { color: var(--gold-deep); }

:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 2px;
}

img, svg { max-width: 100%; }

strong { font-weight: 650; color: var(--ink); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.1rem; z-index: 99; font-family: var(--ui);
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- layout */
.wrap {
  width: min(72rem, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.measure { max-width: var(--measure); }
/* The reading column sits in the middle of the page. Left-pinned, it left
   half of a desktop screen empty beside every section. Text inside it stays
   left-aligned; only the column is centred. */
.wrap--measure > * { max-width: var(--measure); margin-inline: auto; }
.wrap > .measure, .wrap > .rows { margin-inline: auto; }

.section { padding-block: var(--band); }
.section--tight { padding-block: calc(var(--band) * 0.6); }
.section--dark {
  background: var(--ink);
  color: #CBD8CE;
}
.section--dark h2, .section--dark h3, .section--dark strong { color: var(--paper); }
/* .lede sets its own colour for the light ground; without this it stays dark
   green on dark green in the band. */
.section--dark .lede { color: #B6C6BA; }
.section--dark a { color: var(--paper); text-decoration-color: var(--gold); }

.lede {
  font-size: clamp(1.13rem, 2.2vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0;
}

/* ---------------------------------------------------------------- header */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.masthead__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.5rem;
}
.masthead__brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.masthead__brand img { width: 2.4rem; height: 2.4rem; }
.masthead__name {
  font-family: var(--display);
  font-variation-settings: 'opsz' 20, 'SOFT' 0, 'WONK' 0;
  font-size: 1.02rem; font-weight: 650; color: var(--ink);
  line-height: 1.15; letter-spacing: -0.01em;
}
.masthead__nav {
  margin-left: auto;
  display: flex; align-items: center; gap: 1.35rem;
  font-family: var(--ui); font-size: 0.94rem;
}
.masthead__call {
  font-family: var(--ui); font-weight: 700; font-size: 1rem;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  margin-left: 1.5rem;
}
.masthead__call:hover { text-decoration: underline; }
.masthead__nav a { text-decoration: none; color: var(--body); }
.masthead__nav a:hover, .masthead__nav a[aria-current] { color: var(--ink); text-decoration: underline; }
/* Narrow screens scroll the nav rather than hiding it: this is a ten-page
   site and the footer is a long way down when you are looking for the FAQ. */
@media (max-width: 52rem) {
  .masthead__inner { flex-wrap: wrap; min-height: 0; padding-block: 0.7rem; row-gap: 0.15rem; }
  .masthead__nav {
    order: 3; width: 100%; margin-left: 0;
    gap: 1.1rem; overflow-x: auto; padding-bottom: 0.45rem;
    scrollbar-width: none;
  }
  .masthead__nav::-webkit-scrollbar { display: none; }
  .masthead__nav a { white-space: nowrap; }
  /* the number stays on the first row, where it cannot be scrolled out of view */
  .masthead__call { order: 2; margin-left: auto; font-size: 0.97rem; }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-block;
  font-family: var(--ui); font-size: 1rem; font-weight: 600;
  padding: 0.82rem 1.45rem;
  border-radius: 3px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--ink-soft); color: var(--paper); }
.btn--ghost { border-color: var(--rule-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-lift); }
.section--dark .btn--primary { background: var(--gold); color: #1A1204; }
.section--dark .btn--primary:hover { background: #D9A24E; color: #1A1204; }
.section--dark .btn--ghost { border-color: #4A5F53; color: var(--paper); }
.section--dark .btn--ghost:hover { border-color: var(--paper); background: rgba(255,255,255,.06); }

/* ---------------------------------------------------------------- receipts */
/* Citation chips: these are the page's evidence, so they read as references
   rather than decoration. Sans, so they sit apart from the argument. */
.cites { font-family: var(--ui); font-size: 0.84rem; line-height: 1.5; }
.cite {
  display: inline-block;
  padding: 0.18em 0.5em 0.2em;
  margin: 0 0.25em 0.35em 0;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--paper-lift);
}
.cite:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.section--dark .cite {
  border-color: #3C5147; background: transparent; color: #B6C6BA;
}
.section--dark .cite:hover { border-color: var(--gold); color: var(--gold); }

/* ---------------------------------------------------------------- footer */
.foot {
  background: var(--ink); color: #A9BBAE;
  font-family: var(--ui); font-size: 0.92rem;
  padding-block: 3rem 2.5rem;
}
.foot a { color: #CBD8CE; }
.foot a:hover { color: var(--gold); }
.foot__grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.foot__brand img { width: 9rem; }
.foot__addr { margin-bottom: 0.9rem; line-height: 1.65; }
/* the base rule inks <strong> dark green, which vanished on this background */
.foot strong { color: var(--paper); }
.foot__h {
  color: var(--paper); font-family: var(--ui); font-size: 0.88rem;
  font-weight: 700; margin-bottom: 0.7rem; line-height: 1.3; letter-spacing: 0;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.42rem; }
.foot__legal {
  margin-top: 2.5rem; padding-top: 1.4rem;
  border-top: 1px solid #234438;
  font-size: 0.84rem; color: #8FA396;
}
.foot__legal p { margin-bottom: 0.5rem; max-width: 46rem; }

/* ------------------------------------------------------- the clock section */
/* The one piece of non-user-triggered motion on the site. As each clock
   scrolls in, its claim is drawn onto the house, so the reader watches the
   property get papered over. Everything else on the page stays still. */
.clock { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 62rem) {
  .clock { grid-template-columns: 1fr 26rem; }
  .clock__stage { position: sticky; top: 5.5rem; order: 2; }
}

.clock__stage svg { width: 100%; height: auto; display: block; }
.clock__caption {
  font-family: var(--ui); font-size: 0.84rem; color: #8FA396;
  margin-top: 0.9rem;
}

.clock__step {
  padding: 1.35rem 0 1.5rem;
  border-top: 1px solid #234438;
}
.clock__step:first-child { border-top: 0; }
.clock__when {
  font-family: var(--ui); font-weight: 700; font-size: 0.86rem;
  color: var(--gold); margin-bottom: 0.35rem;
}
.clock__step h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.clock__step p { color: #BACABD; }

/* annotation layers inside the stage */
.mark { opacity: 0; transition: opacity .55s ease; }
.mark.is-on { opacity: 1; }
.mark__lead { stroke: var(--gold); stroke-width: 1.2; fill: none; }
.mark__tag { fill: var(--gold); }
.mark__label {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 11px; font-weight: 600; fill: #1A1204;
}
.house__line { stroke: #CBD8CE; }
.house__fill { fill: #CBD8CE; }
.house__glass { fill: #1E3A2E; transition: fill .55s ease; }
.is-vacant .house__glass { fill: #0A1A12; }

@media (prefers-reduced-motion: reduce) {
  .mark { opacity: 1; transition: none; }
  .house__glass { transition: none; }
}
/* Nothing here depends on JS having run: without IntersectionObserver the
   script turns every mark on at load, so the diagram is complete rather than
   blank. */

/* ---------------------------------------------------------------- prose */
.prose h2 { margin-top: 2.2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.9em; }
.prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1.15em; }
.prose li { margin-bottom: 0.5em; }
.prose blockquote {
  margin: 1.6em 0; padding: 0.2em 0 0.2em 1.3rem;
  border-left: 3px solid var(--gold);
  color: var(--ink-soft);
  font-size: 1.1rem; line-height: 1.55;
}

/* a plain definition row — used where content genuinely pairs a term with a
   consequence, instead of chopping everything into identical cards */
.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid; gap: 0.3rem 2rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 46rem) {
  .row { grid-template-columns: 13rem 1fr; }
  /* citations belong under the answer they support, not under the term */
  .row > .cites { grid-column: 2; }
}
/* A term column plus a 34rem measure does not fit in 34rem: held to the
   measure, the answer column shrank to ~19rem, about 35 characters a line.
   Rows get the measure plus the term column, so the answer keeps its measure. */
.rows.measure, .wrap--measure > .rows { max-width: 49rem; }
.row__term {
  font-family: var(--ui); font-weight: 650; color: var(--ink); font-size: 0.97rem;
}
.row p { color: var(--body); }

/* ---------------------------------------------------------------- people */
.people { display: grid; gap: 1.6rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.person img, .person__ph {
  width: 100%; aspect-ratio: 1; border-radius: 2px; object-fit: cover;
  display: block;
}
/* Monogram tiles rather than photographs. Only one of these five has a
   headshot on file, and a page whose whole argument is "we are real, go and
   check" is the last place to put four invented faces. Swap these for real
   photographs when they exist -- the markup takes an <img> in the same slot. */
.person__ph {
  background: var(--ink);
  display: grid; place-items: center;
}
.person__ph span {
  font-family: var(--display);
  font-variation-settings: 'opsz' 48, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 500; color: var(--gold);
  letter-spacing: 0.06em; line-height: 1;
}
.person__name { font-weight: 650; color: var(--ink); margin: 0.6rem 0 0.1rem; }
.person__role { font-family: var(--ui); font-size: 0.87rem; color: var(--muted); }

/* ---------------------------------------------------------------- forms */
.field { margin-bottom: 1.15rem; }
.field label, .legend {
  display: block; font-family: var(--ui); font-weight: 600;
  font-size: 0.94rem; color: var(--ink); margin-bottom: 0.32rem;
}
.field .hint { font-family: var(--ui); font-weight: 400; font-size: 0.86rem; color: var(--muted); }
input[type=text], input[type=tel], input[type=email], textarea, select {
  width: 100%; font-family: var(--ui); font-size: 1rem;
  padding: 0.68rem 0.75rem;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  background: var(--paper-lift); color: var(--body);
}
input:focus, textarea:focus, select:focus { border-color: var(--ink); }
textarea { min-height: 7rem; resize: vertical; }
.field-pair { display: grid; gap: 1.15rem; }
@media (min-width: 34rem) { .field-pair { grid-template-columns: 1fr 1fr; } }

.consent { margin: 1.5rem 0; }
.consent__item { display: grid; grid-template-columns: 1.15rem 1fr; gap: 0.6rem; margin-bottom: 0.9rem; }
.consent__item input { margin-top: 0.28rem; align-self: start; }
.consent__item label {
  font-family: var(--ui); font-size: 0.83rem; line-height: 1.5;
  color: var(--muted); font-weight: 400; margin: 0;
}
.form-note { font-family: var(--ui); font-size: 0.83rem; color: var(--muted); }
.form-status { font-family: var(--ui); font-size: 0.95rem; margin-top: 1rem; }
.form-status[data-state=error] { color: #8C2F1D; }
.form-status[data-state=ok] { color: var(--ink); }
.ref-input { font-family: var(--ui); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------------------------------------------------------------- opener */
.opener {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  padding-top: clamp(2rem, 4vw, 2.6rem);
  border-top: 1px solid var(--rule);
}
@media (min-width: 54rem) { .opener { grid-template-columns: 1.15fr 1fr; } }

.opener__ref label {
  display: block; font-family: var(--ui); font-weight: 650;
  font-size: 0.95rem; color: var(--ink); margin-bottom: 0.45rem;
}
.opener__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.opener__row input { flex: 1 1 12rem; min-width: 0; }
.opener__ref .form-note { margin-top: 0.7rem; max-width: 28rem; }

.opener__call h2 { font-size: 1.42rem; }
.opener__number {
  font-family: var(--ui); font-size: clamp(1.35rem, 3.4vw, 1.7rem);
  font-weight: 700; margin-top: 0.6rem;
}
.opener__number a { text-decoration: none; color: var(--ink); }
.opener__number a:hover { text-decoration: underline; }
.section--dark .opener__number a { color: var(--gold); }

/* two closing routes, side by side — not cards, just two columns of prose */
.ends { display: grid; gap: clamp(2rem, 5vw, 4rem); margin-top: 2.4rem; }
@media (min-width: 50rem) { .ends { grid-template-columns: 1fr 1fr; } }
.end h3 { font-size: 1.22rem; }
.section--dark .rows, .section--dark .row { border-color: #234438; }
.section--dark .row p { color: #BACABD; }
.section--dark .row__term { color: var(--paper); }

/* ---------------------------------------------------------------- hero */
.hero { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 56rem) {
  .hero { grid-template-columns: 1fr 17rem; }
  .hero__mark { justify-self: end; max-width: 17rem; }
}
.hero__mark { margin: 0; max-width: 13rem; }
.hero__mark img { width: 100%; height: auto; }
.hero__mark figcaption {
  font-family: var(--ui); font-size: 0.83rem; line-height: 1.45;
  color: var(--muted); margin-top: 0.9rem;
}

/* ---------------------------------------------------------------- intake */
.intake { display: grid; gap: clamp(2rem, 5vw, 3.5rem); margin-top: 2.4rem; align-items: start; }
/* Grid children default to min-width:auto, so one long unbreakable token sets
   the column width for everything. contact@myunclaimedestate.com is 270px of
   unbreakable text and was forcing the whole contact form off a 320px screen.
   `anywhere` (not `break-word`) is the one that changes intrinsic sizing. */
.intake > * { min-width: 0; }
.intake__aside a, .foot a, .prose a { overflow-wrap: anywhere; }
@media (min-width: 60rem) { .intake { grid-template-columns: minmax(0,1fr) 20rem; } }
.intake form { max-width: 34rem; }
.intake__aside {
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.4rem 1.5rem 1.6rem;
}
.intake__aside h2 { font-size: 1.12rem; }
.intake__aside .rows { border-top: 0; }
.intake__aside .row { grid-template-columns: 1fr; padding: 0.9rem 0; gap: 0.2rem; }
.intake__aside .row > .cites { grid-column: auto; }
.intake__aside .row:last-child { border-bottom: 0; padding-bottom: 0; }
.intake__aside .row p { margin-bottom: 0; }
.intake__aside .row p + p { margin-top: 0.35rem; }

.form-success {
  border-left: 3px solid var(--gold);
  padding: 0.2rem 0 0.2rem 1.3rem;
}
.form-success h2, .form-success h3 { margin-bottom: 0.4em; }

.callout {
  background: var(--gold-wash);
  border-radius: 3px;
  padding: 1.1rem 1.3rem;
  margin: 1.6em 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------ centred sections */
/* Section titles are centred with a short gold rule under them, the way the
   Stop My Auction Now pages head a section. Titles inside long-form prose
   (privacy, terms, the inherited-property article) stay left with their text. */
.wrap--measure > h2, .wrap > .measure > h2,
.wrap--measure > h1, .wrap--measure > .lede { text-align: center; }
.wrap--measure > h2::after, .wrap > .measure > h2::after {
  content: ''; display: block;
  width: 3rem; height: 2px; margin: 1.1rem auto 0;
  background: var(--gold);
}
.wrap--measure > h2 + p, .wrap > .measure > h2 + p { margin-top: 1.4rem; }
/* A heading block that introduces wide content (the clocks, the team, the two
   ways to reach us) centres its short intro under the title. */
.wrap > .measure > h2 ~ p { text-align: center; }
.wrap--measure > h2 + .rows { margin-top: 2rem; }
/* the one-line blurbs that close a section read as captions, centred */
.wrap > p.measure { text-align: center; }

/* Alternate light bands so each section reads as its own block rather than
   as a gap. Dark bands keep their own ground. */
main > .section:nth-of-type(even):not(.section--dark) { background: #FFFFFF; }

/* ======================================================= even page width */
/* A single centred 38rem column still left a third of a desktop screen blank
   on each side. On wide screens the page now uses its full width: prose
   sections split into a title column and a text column, and definition rows
   become a grid of cards sized so every line of cards is full. */

/* --- prose sections: title left, text right ----------------------------- */
@media (min-width: 60rem) {
  .wrap--measure:has(> h2):not(:has(> .rows)) {
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .wrap--measure:has(> h2):not(:has(> .rows)) > * {
    grid-column: 2; max-width: none; margin-inline: 0;
  }
  .wrap--measure:has(> h2):not(:has(> .rows)) > h2 {
    grid-column: 1; grid-row: 1 / span 20;
    position: sticky; top: 1.5rem;
    text-align: left; margin: 0;
  }
  .wrap--measure:has(> h2):not(:has(> .rows)) > h2::after { margin-left: 0; }
  .wrap--measure:has(> h2):not(:has(> .rows)) > h2 + p { margin-top: 0; }
}

/* --- long-form pages: each h2 sits beside the text it heads ------------- */
.wrap--measure > .prose { max-width: 46rem; }
@media (min-width: 60rem) {
  .wrap--measure > .prose:has(> h2) {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .wrap--measure > .prose:has(> h2) > * { grid-column: 2; }
  /* auto-placement puts each h2 on the same line as its first paragraph */
  .wrap--measure > .prose:has(> h2) > h2 { grid-column: 1; margin-top: 2.2rem; font-size: 1.55rem; }
  .wrap--measure > .prose:has(> h2) > h2 + * { margin-top: 2.2rem; }
  .wrap--measure > .prose:has(> h2) > h2:first-child,
  .wrap--measure > .prose:has(> h2) > h2:first-child + * { margin-top: 0; }
  .wrap--measure:has(> .prose > h2) > h1 { max-width: none; text-align: left; }
}
/* the card grid that follows a split intro needs air above it */
.wrap + .wrap > .rows { margin-top: 2.5rem; }
.wrap--measure > .lede { max-width: 46rem; }

/* --- definition rows as a card grid ------------------------------------- */
@media (min-width: 46rem) {
  .wrap > .rows, .wrap--measure > .rows {
    max-width: none;
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 0;
  }
  /* three across when the count divides by three, so no line is left short */
  .wrap > .rows:has(> .row:nth-child(3n):last-child),
  .wrap--measure > .rows:has(> .row:nth-child(3n):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* an odd card out in a two-across grid takes the whole line */
  .wrap > .rows:not(:has(> .row:nth-child(3n):last-child)) > .row:last-child:nth-child(odd),
  .wrap--measure > .rows:not(:has(> .row:nth-child(3n):last-child)) > .row:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .wrap > .rows > .row, .wrap--measure > .rows > .row {
    display: block;
    padding: 1.5rem 1.6rem 1.6rem;
    background: #FFFFFF;
    border: 1px solid var(--rule);
    border-top: 3px solid var(--gold);
  }
  main > .section:nth-of-type(even) .wrap > .rows > .row,
  main > .section:nth-of-type(even) .wrap--measure > .rows > .row { background: var(--paper); }
  .wrap > .rows > .row > .row__term, .wrap--measure > .rows > .row > .row__term {
    font-family: var(--display); font-size: 1.2rem; font-weight: 600;
    line-height: 1.25; margin-bottom: 0.7rem;
    font-variation-settings: 'opsz' 30, 'SOFT' 0, 'WONK' 0;
  }
  .wrap > .rows > .row > .cites, .wrap--measure > .rows > .row > .cites { margin-top: 1rem; }
  .wrap--measure > .rows + p { text-align: center; margin-top: 2rem; }
}

/* --- numbered steps (how it works), SMAN-style -------------------------- */
.rows--steps { counter-reset: step; }
.rows--steps > .row > .row__term::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--display); font-size: 2rem; font-weight: 600; line-height: 1;
  color: var(--gold); margin-bottom: 0.6rem;
}

/* ================================================================ v5 */
/* v5 (2026-09-23): the page was measured against stopmyauctionnow.com and
   lost on first impression -- no photograph, no button, a header that
   scrolled away. v5 adds a masthead that stays, a photographic hero with the
   reference box as its one action, a gold trust strip, and the cost row. */

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.btn--gold { background: var(--gold); color: #1A1204; border-color: var(--gold); }
.btn--gold:hover { background: #D9A24E; border-color: #D9A24E; color: #1A1204; }

/* ---------------------------------------------------- masthead that stays */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 247, 242, 0.97);
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
  backdrop-filter: saturate(1.2) blur(6px);
}
.masthead__cta { padding: 0.62rem 1.1rem; font-size: 0.95rem; white-space: nowrap; }
.masthead__call { margin-left: 1.2rem; }
.masthead__toggle { display: none; }
/* the clock diagram pins itself under the masthead, not behind it */
@media (min-width: 62rem) { .clock__stage { top: 6rem; } }

/* Below 64rem five links, a number and a button do not fit on one line.
   With JS the links fold behind a menu button; without it (no .js on
   <html>) the v4 scrolling row below still applies. */
@media (max-width: 64rem) {
  .js .masthead__inner { flex-wrap: nowrap; min-height: 4rem; padding-block: 0.55rem; }
  .js .masthead__nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    box-shadow: 0 14px 28px rgba(0, 36, 27, 0.12);
    padding: 0.4rem var(--gutter) 1rem; margin: 0; width: auto; overflow: visible;
  }
  .js .masthead.is-open .masthead__nav { display: flex; }
  .js .masthead__nav a {
    padding: 0.85rem 0; border-bottom: 1px solid var(--rule);
    font-size: 1.05rem; color: var(--ink);
  }
  .js .masthead__call { margin-left: auto; order: 0; }
  .js .masthead__toggle {
    display: inline-grid; place-items: center;
    width: 2.75rem; height: 2.75rem; margin-left: 0.5rem;
    background: transparent; border: 1px solid var(--rule-strong); border-radius: 3px;
    cursor: pointer; color: var(--ink);
  }
  .masthead__bars, .masthead__bars::before, .masthead__bars::after {
    display: block; width: 1.25rem; height: 2px; background: currentColor;
    position: relative; transition: transform .2s ease, background-color .2s ease;
  }
  .masthead__bars::before, .masthead__bars::after { content: ''; position: absolute; left: 0; }
  .masthead__bars::before { top: -6px; }
  .masthead__bars::after { top: 6px; }
  .is-open .masthead__bars { background: transparent; }
  .is-open .masthead__bars::before { transform: translateY(6px) rotate(45deg); }
  .is-open .masthead__bars::after { transform: translateY(-6px) rotate(-45deg); }
  .masthead { position: sticky; }
  .masthead__inner { position: static; }
}
@media (max-width: 64rem) { .masthead { position: sticky; } .masthead > .wrap { position: relative; } }
/* A phone keeps the logo, the gold button and the menu. The number is in the
   hero and the footer, one thumb away. */
@media (max-width: 40rem) {
  .js .masthead__call { display: none; }
  .js .masthead__cta { margin-left: auto; }
  .masthead__name { font-size: 0.95rem; }
}
@media (max-width: 22rem) { .masthead__name { display: none; } }
/* no-JS fallback keeps the v4 layout, plus the button */
@media (max-width: 52rem) {
  html:not(.js) .masthead__cta { order: 2; margin-left: 0.6rem; }
}

/* ---------------------------------------------------- photographic hero */
.hero-photo {
  position: relative; overflow: hidden;
  background: var(--ink); color: #D5E0D8;
  display: grid; align-items: center;
  min-height: clamp(32rem, 76vh, 44rem);
}
.hero-photo__img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 30%;
}
.hero-photo::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgba(0, 36, 27, 0.96) 0%, rgba(0, 36, 27, 0.9) 34%,
    rgba(0, 36, 27, 0.45) 58%, rgba(0, 36, 27, 0.05) 80%);
}
.hero-photo__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 5rem); }
.hero-photo__copy { max-width: 35rem; }
.hero-photo h1 { color: var(--paper); margin-bottom: 0.4em; }
.hero-photo .lede { color: #D5E0D8; margin-bottom: 1.8rem; }
.eyebrow {
  font-family: var(--ui); font-weight: 700; font-size: 0.86rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.9rem;
}

/* On a phone the photograph becomes a band above the words: over a face,
   white text is unreadable at any gradient that still shows the face. */
@media (max-width: 46rem) {
  .hero-photo { display: block; min-height: 0; }
  .hero-photo__img { display: block; position: relative; }
  .hero-photo__img img {
    position: relative; height: clamp(15rem, 62vw, 20rem);
    object-position: 50% 28%;
  }
  .hero-photo::before {
    inset: auto 0 auto 0; top: 0; height: clamp(15rem, 62vw, 20rem);
    background: linear-gradient(180deg, rgba(0,36,27,0) 55%, rgba(0,36,27,1) 100%);
  }
  .hero-photo__inner { padding-block: 0.4rem 2.6rem; }
}

/* the reference box: the one thing on the page we most want done */
.ref-box {
  background: var(--paper-lift); color: var(--body);
  border-top: 3px solid var(--gold); border-radius: 3px;
  padding: 1.25rem 1.3rem 1.2rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}
.ref-box label {
  display: block; font-family: var(--ui); font-weight: 700;
  font-size: 0.98rem; color: var(--ink); margin-bottom: 0.55rem;
}
.ref-box__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ref-box__row input {
  flex: 1 1 11rem; min-width: 0;
  font-size: 1.2rem; padding: 0.72rem 0.85rem; letter-spacing: 0.1em;
}
.ref-box__row .btn { flex: 0 0 auto; font-size: 1.02rem; }
@media (max-width: 30rem) { .ref-box__row .btn { flex: 1 1 100%; } }
.ref-box__note {
  font-family: var(--ui); font-size: 0.88rem; color: var(--muted);
  margin: 0.75rem 0 0;
}
.ref-box__note a { color: var(--ink); font-weight: 700; white-space: nowrap; }
.ref-box.is-warn input { border-color: #8C2F1D; }
.ref-box.is-warn .ref-box__note { color: #8C2F1D; }

/* ---------------------------------------------------- gold trust strip */
.trust { background: var(--gold); color: #1A1204; }
.trust__list {
  list-style: none; margin: 0 auto; padding-block: 1rem;
  display: grid; gap: 0.6rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  font-family: var(--ui); font-weight: 700; font-size: 0.95rem; line-height: 1.3;
}
@media (min-width: 60rem) {
  .trust__list { grid-template-columns: repeat(4, auto); justify-content: space-between; }
}
.trust__list li { display: flex; align-items: center; gap: 0.55rem; }
.trust__list li::before {
  content: ''; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.3' fill='none' stroke='%23C08830' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}

/* ---------------------------------------------------- cost figures */
.figures {
  display: grid; gap: 1.25rem; margin-top: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.figure {
  background: #FFFFFF; border: 1px solid var(--rule); border-top: 3px solid var(--gold);
  padding: 1.4rem 1.4rem 1.3rem;
  display: flex; flex-direction: column;
}
.figure__n {
  font-family: var(--display); font-weight: 600; color: var(--ink);
  font-size: clamp(2.1rem, 4vw, 2.6rem); line-height: 1; margin-bottom: 0.7rem;
  font-variation-settings: 'opsz' 90, 'SOFT' 0, 'WONK' 0;
}
.figure__what { font-size: 0.98rem; line-height: 1.55; flex: 1; }
.figure .cites { margin-top: 0.9rem; }
.costs { background: var(--paper); }