/* ============================================================
   Kim — Direction 2 "الغسلة" / THE WASH — interior pages.

   style.css holds the world: tokens, chrome, foam primitives, the
   lime band, forms, the rinse. This file holds only what the
   interior pages add on top of it.

   Two devices carry through every page:
     · SUBMERGED vs FLOATING — anything Kim guarantees is a solid
       inked plate; anything the client still has to decide is a
       dashed blank, the same device as the pack waiting for its label.
     · ONE BRIGHT SURFACE — each page breaks the surface exactly
       once, on the claim that page exists to make.

   Static design phase; class names stay Blade-conversion friendly.
   ============================================================ */

/* ---------- Page head: a shorter hero, same water ---------- */

.page-head {
  position: relative;
  overflow: hidden;
  padding-block: clamp(8rem, 19vh, 12rem) clamp(4.5rem, 10vw, 7rem);
  /* the same water as the homepage, further from the wash */
  background:
    linear-gradient(to bottom, rgba(7, 12, 30, 0.72) 0%, rgba(7, 12, 30, 0.5) 46%, rgba(7, 12, 30, 0.88) 90%, var(--deep) 100%),
    radial-gradient(120% 80% at 78% 12%, rgba(22, 34, 90, 0.8) 0%, rgba(22, 34, 90, 0) 62%),
    var(--head-ground, url("media/foam-surface.webp")) center bottom / cover no-repeat,
    var(--deep);
}
.page-head > *:not(.foam-field) { position: relative; z-index: var(--z-content); }
.page-head .foam-bed { display: none; }

/* the head can run one column or two; the figure never crowds the claim */
.head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.head-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, 4 / 3);
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(233, 242, 255, 0.09), 0 24px 48px -30px rgba(3, 6, 15, 0.9);
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--zest);
  margin-bottom: 1.1rem;
}
.kicker::before { content: ""; width: 2.2rem; height: 2px; background: var(--zest); flex: none; }

/* one step below the homepage h1: home stays the largest room in the house */
.page-head h1 {
  font-weight: 900;
  font-size: clamp(2.25rem, 5.8vw, 4.25rem);
  line-height: 1.22;
  max-width: 17ch;
  margin-bottom: 1.3rem;
}
.page-head h1 em { font-style: normal; color: var(--zest); }
.page-head .lead {
  max-width: 52ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--ice-2);
}
.page-head .hero-actions { margin-top: 2.2rem; }

/* ---------- Small shared parts ---------- */

/* a run of short facts under a head or a section, set like instrument labels */
.facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--ice-2);
}
.facts li { display: flex; align-items: baseline; gap: 0.6rem; }
.facts .strip-no { font-family: var(--font-mono); font-size: 0.75rem; color: var(--zest); letter-spacing: 0.06em; }

/* the measure for any run of reading text */
.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.1rem; }
.prose p { color: var(--ice-2); }
.prose strong { color: var(--ice); font-weight: 700; }

.sec-note {
  max-width: 68ch;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: 0.875rem;
  color: var(--ice-2);
}

/* ---------- SUBMERGED: what Kim fixes ---------- */

.terms {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.terms li {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: linear-gradient(160deg, rgba(22, 34, 90, 0.85), rgba(10, 18, 51, 0.95));
  transition: background-color var(--t-ui) var(--ease-ui);
}
.terms li:hover { background: rgba(22, 34, 90, 0.95); }
.terms h3 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.1875rem;
  margin-bottom: 0.45rem;
}
/* the seal: this one is settled, it is not up for discussion */
.terms h3::before {
  content: "";
  flex: none;
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--zest);
  box-shadow: 0 0 0 4px rgba(194, 245, 63, 0.12);
}
.terms p { color: var(--ice-2); font-size: 0.9375rem; line-height: 1.8; }
/* in a contract column the plates stack, so each fixed term faces its blank */
.contract-col .terms { grid-template-columns: minmax(0, 1fr); }

/* ---------- FLOATING: what the client still decides ---------- */

.blanks { list-style: none; display: grid; gap: clamp(1rem, 2.5vw, 1.4rem); }
.blanks-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.blank {
  border: 1.5px dashed var(--line-strong);
  background: rgba(174, 188, 226, 0.035);
  padding: clamp(1.2rem, 3vw, 1.7rem);
  transition: border-color var(--t-ui) var(--ease-ui), background-color var(--t-ui) var(--ease-ui);
}
.blank:hover { border-color: var(--zest); background: rgba(194, 245, 63, 0.05); }
.blank h3 { font-weight: 700; font-size: 1.1875rem; margin-bottom: 0.4rem; }
.blank > p { color: var(--ice-2); font-size: 0.9375rem; line-height: 1.8; }

/* the client's answer, written into the blank */
.filled {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 0.9rem;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid var(--zest);
  font-family: var(--font-display);
  font-weight: 600;
}
.filled .eg {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--ice-2);
  border: 1px solid var(--line-strong);
  padding: 0.1rem 0.4rem;
  transform: translateY(-0.1em);
}

/* ---------- The contract: two states of the same page ---------- */

.contract {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contract-col > h3 {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 800;
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
  padding-bottom: 0.9rem;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--line);
}
.contract-col > h3 .tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--ice-2);
  margin-inline-start: auto;
}
.contract-col.is-fixed > h3 { border-bottom-color: var(--zest); }

/* ---------- Pack sizes, drawn to scale ---------- */

.sizes { margin: 0; }
.size-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 3rem);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  overflow-x: auto;
  background:
    radial-gradient(110% 130% at 50% -20%, rgba(46, 74, 168, 0.4) 0%, rgba(46, 74, 168, 0) 66%),
    linear-gradient(160deg, rgba(22, 34, 90, 0.75), rgba(10, 18, 51, 0.9));
  box-shadow: inset 0 1px 0 rgba(233, 242, 255, 0.09), 0 24px 48px -30px rgba(3, 6, 15, 0.9);
  scrollbar-width: thin;
  scrollbar-color: var(--navy-2) transparent;
}

.size-unit { text-align: center; flex: none; }
.size-unit svg { display: block; margin-inline: auto; }
/* a pack's height steps up with its size; photos and drawings share the step */
.size-unit .size-drawn { height: var(--pack-h, 90px); width: auto; }
.size-unit .size-photo { display: block; margin-inline: auto; height: var(--pack-h, 90px); width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(3, 6, 15, 0.55)); }
.size-unit b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line-strong); }
.size-unit span { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--zest); font-variant-numeric: tabular-nums; }
.size-unit.is-open b { color: var(--ice-2); }
.size-unit.is-open span { color: var(--ice-2); }
.sizes figcaption { margin-top: 0.9rem; font-size: 0.875rem; color: var(--ice-2); }

/* ---------- The line map: the whole factory in one drawing ---------- */

.linemap { margin: 0; }
.linemap-frame {
  overflow-x: auto;
  border: 1px solid var(--line);
  background:
    radial-gradient(110% 130% at 50% -20%, rgba(46, 74, 168, 0.45) 0%, rgba(46, 74, 168, 0) 66%),
    linear-gradient(160deg, rgba(22, 34, 90, 0.9), rgba(10, 18, 51, 0.94));
  box-shadow: inset 0 1px 0 rgba(233, 242, 255, 0.09), 0 24px 48px -30px rgba(3, 6, 15, 0.9);
  scrollbar-width: thin;
  scrollbar-color: var(--navy-2) transparent;
}
.linemap-frame svg { display: block; width: 100%; min-width: 720px; height: auto; }
.linemap figcaption { margin-top: 1rem; font-size: 0.875rem; color: var(--ice-2); }
.linemap-hint {
  display: none;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--zest);
}
@media (max-width: 820px) { .linemap-hint { display: block; } }

/* ---------- The quote, pulled ---------- */

.pull {
  position: relative;
  max-width: 26ch;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  line-height: 1.42;
  text-wrap: balance;
}
.pull::before {
  content: "";
  display: block;
  width: 3.5rem; height: 3px;
  background: var(--zest);
  margin-bottom: 1.4rem;
}

/* ---------- What we do not claim ---------- */

.honesty {
  list-style: none;
  display: grid;
  /* four items: two rows of two, never three and an orphan */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  gap: clamp(0.9rem, 2vw, 1.25rem);
}
.honesty li {
  border: 1.5px dashed var(--line-strong);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  background: rgba(3, 6, 15, 0.35);
}
.honesty h3 { font-weight: 700; font-size: 1.0625rem; margin-bottom: 0.35rem; }
.honesty p { color: var(--ice-2); font-size: 0.9375rem; line-height: 1.8; max-width: 58ch; }

/* ---------- Steps: the railed list, without the plate column ---------- */

/* the step keeps the journey's rail, and trades the plate column for the exchange */
.stations.steps li { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); align-items: start; }
.steps .station-text > p { max-width: 52ch; }

/* what each side hands over, at this step */
.exchange {
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.exchange li { background: rgba(10, 18, 51, 0.75); padding: 0.9rem 1.1rem; }
.exchange b {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ice-2);
  margin-bottom: 0.3rem;
}
.exchange li.gives b { color: var(--zest); }
.exchange span { font-size: 0.9375rem; line-height: 1.75; }

.steps .station-text .ghost-link { margin-top: 1.1rem; font-size: 0.9375rem; }

/* ---------- Questions ---------- */

.qa-group + .qa-group { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.qa-group > h3 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--zest);
  padding-bottom: 0.8rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.qa { border-bottom: 1px solid var(--line); }
.qa > summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
  padding-block: clamp(1rem, 2.2vw, 1.4rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.9vw, 1.25rem);
  transition: color var(--t-hover) var(--ease-ui);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--zest); }
/* the marker is a bubble that fills when the answer surfaces */
.qa > summary::after {
  content: "";
  flex: none;
  margin-inline-start: auto;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  align-self: center;
  background: radial-gradient(circle at 34% 30%, var(--zest) 0 40%, transparent 41%) no-repeat center / 0 0;
  transition: border-color var(--t-hover) var(--ease-ui), background-size var(--t-hover) var(--ease-ui);
}
.qa[open] > summary::after { border-color: var(--zest); background-size: 100% 100%; }
.qa[open] > summary { color: var(--zest); }
.qa-body {
  padding: 0 0 clamp(1.2rem, 2.5vw, 1.75rem);
  padding-inline-end: 2.2rem;
  max-width: 66ch;
  color: var(--ice-2);
}
.qa-body p + p { margin-top: 0.9rem; }
.qa-body a { color: var(--ice); text-decoration-color: var(--zest); }

/* ---------- Contact page ---------- */

.reach {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.channels { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.channels li { background: rgba(10, 18, 51, 0.7); padding: 1.1rem 1.3rem; }
.channels b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; margin-bottom: 0.2rem; }
.channels span { font-size: 0.9375rem; color: var(--ice-2); }
.channels .pending {
  display: inline-block;
  border: 1px dashed var(--line-strong);
  padding: 0.15rem 0.6rem;
  font-size: 0.8125rem;
  color: var(--ice-2);
}

/* what happens after you press send */
.after { list-style: none; counter-reset: after; display: grid; gap: clamp(1rem, 2.5vw, 1.4rem); }
.after li {
  position: relative;
  counter-increment: after;
  padding-inline-start: 3.2rem;
}
.after li::before {
  content: counter(after, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 0.15rem;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--zest);
}
.after b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
.after p { color: var(--ice-2); font-size: 0.9375rem; line-height: 1.8; }

/* the long form gets one more control type than the homepage's short one */
.field select {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ice);
  background: rgba(174, 188, 226, 0.05);
  border: 0;
  border-bottom: 1.5px solid var(--line-strong);
  padding: 0.5rem 0.6rem;
  transition: border-color var(--t-hover) var(--ease-ui), background-color var(--t-hover) var(--ease-ui);
}
.field select option { background: var(--navy); color: var(--ice); }
.field select:focus { outline: none; background: rgba(174, 188, 226, 0.09); border-bottom-color: var(--zest); border-bottom-width: 2px; }

.choice { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding-top: 0.35rem; }
.choice label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; cursor: pointer; }
.choice input { width: 1rem; height: 1rem; flex: none; }

/* ---------- Every page ends at the same door ---------- */

.closer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--zest);
  background: linear-gradient(160deg, rgba(22, 34, 90, 0.7), rgba(10, 18, 51, 0.9));
}
.closer h2 { font-weight: 800; font-size: clamp(1.375rem, 3vw, 2rem); margin-bottom: 0.4rem; }
.closer p { color: var(--ice-2); max-width: 56ch; font-size: 0.9375rem; }

/* ---------- Footer, grown into a site map ---------- */

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--line);
}
.foot-mark { display: block; height: 44px; width: auto; margin-bottom: 1rem; }
.foot-id p { max-width: 42ch; }
.foot-col { display: grid; align-content: start; gap: 0.45rem; }
.foot-col h2 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--zest);
  margin-bottom: 0.4rem;
}
.foot-col a { text-decoration: none; width: fit-content; border-bottom: 1px solid transparent; transition: color var(--t-hover) var(--ease-ui), border-color var(--t-hover) var(--ease-ui); }
.foot-col a:hover { color: var(--ice); border-bottom-color: var(--zest); }
.foot .foot-todo { margin-top: 0.7rem; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .head-grid { grid-template-columns: 1fr; }
  .head-figure { max-width: 460px; }
  .reach { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-id { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .stations.steps li { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .steps .exchange { margin-inline-start: 4.5rem; }
}

@media (max-width: 760px) {
  .contract { grid-template-columns: 1fr; gap: clamp(2.5rem, 7vw, 3.5rem); }
  .closer { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 640px) {
  .steps .exchange { margin-inline-start: 0; }
  /* the foam head is proportionally taller on a narrow screen: the last line
     of the lead must clear it, or white type lands on white suds */
  .page-head { padding-block: clamp(7rem, 20vh, 9rem) clamp(5.5rem, 17vw, 7.5rem); }
  .page-head h1 { font-size: clamp(2rem, 9vw, 2.75rem); }
  .foot-grid { grid-template-columns: 1fr; }
  .qa-body { padding-inline-end: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .terms li, .blank, .qa > summary, .qa > summary::after, .foot-col a { transition: none; }
}

/* the line map's own type: set inside the SVG so it scrolls with the drawing */
.lm-label { font-family: var(--font-display); font-weight: 600; font-size: 21px; fill: var(--ice); }
.lm-no { font-family: var(--font-mono); font-size: 14px; fill: var(--zest); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

/* a section heading the page's structure needs but its design does not */
.sr-head {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* an action standing on the bright surface has to invert */
.band .btn { background: var(--deep); color: var(--zest); }
.band .btn:hover, .band .btn:focus-visible {
  background: var(--deeper);
  box-shadow: 0 14px 34px -14px rgba(7, 12, 30, 0.6);
}

/* the contact page's aside stacks above the form on narrow screens */
.reach-side { display: grid; align-content: start; gap: clamp(1.25rem, 3vw, 1.75rem); }
.reach-side .checklist { margin-top: 0; }
.reach-side .sec-note { margin-top: 0; }

/* a legend needs the label's type without being a <label> */
.field-legend {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.4rem;
}

.after-row {
  position: relative;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 3.4rem;
}
/* the journey rail, laid on its side: these are steps, not three equal blurbs */
.after-row::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  inset-inline: 0;
  border-top: 1px solid var(--line);
}
.after-row li { padding-inline-start: 0; }
.after-row li::before { top: 0; transform: translateY(-3.4rem); background: var(--deep); }
@media (max-width: 700px) {
  .after-row { padding-top: 0; }
  .after-row::before { display: none; }
  .after-row li { padding-inline-start: 3.2rem; }
  .after-row li::before { transform: none; top: 0.15rem; }
}

/* the CTA in the bar marks the page it is already on without losing its fill —
   the nav's is-here colour would otherwise paint lime text on the lime button */
.topbar-nav .btn.is-here { color: var(--deep); box-shadow: 0 0 0 3px rgba(194, 245, 63, 0.25); }

/* ---------- Pressed feedback: everything clickable answers the finger ---------- */

.ghost-link { transition: border-color var(--t-hover) var(--ease-ui), color var(--t-hover) var(--ease-ui), transform var(--t-tap) var(--ease-tap); }
.ghost-link:active { transform: translateY(1px); }
.topbar-nav a:active { transform: translateY(1px); }
.qa > summary:active { transform: translateY(1px); }
.foot-col a:active { transform: translateY(1px); }

/* ---------- Sending state: the button says something happened ---------- */

.wash-form.is-sending .btn { opacity: 0.7; pointer-events: none; }
.wash-form.is-sending .btn::after {
  content: "";
  display: inline-block;
  width: 0.65em; height: 0.65em;
  margin-inline-start: 0.6em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -0.05em;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wash-form.is-sending .btn::after { animation: none; border-top-color: currentColor; opacity: 0.4; }
  .ghost-link:active, .topbar-nav a:active, .qa > summary:active, .foot-col a:active { transform: none; }
}

/* ============================================================
   Print. A procurement buyer forwards a spec page as a PDF, and
   the screen design would dump a full-bleed near-black sheet.
   Print inverts to ink on paper and drops everything decorative.
   ============================================================ */

@media print {
  :root {
    --deep: #FFFFFF;
    --deeper: #FFFFFF;
    --ice: #101A44;
    --ice-2: #3C4A6E;
    --line: rgba(16, 26, 68, 0.22);
    --line-strong: rgba(16, 26, 68, 0.45);
  }
  body {
    background: #FFFFFF !important;
    color: #101A44;
    font-size: 11pt;
    line-height: 1.6;
  }
  /* the room's atmosphere is screen-only */
  .grain, .foam-field, .rinse, .band-foam, .vial-foam,
  .topbar, .nav-toggle, .skip, .stations::after { display: none !important; }

  main > section, .page-head { padding: 0 2mm 14pt !important; }
  .page-head { background: none !important; }
  .page-head h1, .hero h1 { font-size: 22pt; }
  .sec-head h2, .band h2 { font-size: 15pt; }
  h1, h2, h3 { color: #101A44; break-after: avoid; }
  p, li, figure, .closer, .qa { break-inside: avoid; }

  /* the bright band prints as a ruled callout, not a solid lime block */
  .band { background: none !important; color: #101A44 !important; border-block: 2pt solid #101A44; padding-block: 12pt !important; }
  .band::before, .band::after { display: none !important; }
  .band-kicker, .band > p { color: #3C4A6E !important; }

  /* lime is a light on a dark ground; on paper it reads as a smudge */
  .kicker, .qa-group > h3, .foot-col h2, .card-no, .strip-no, .facts .strip-no,
  .filled .eg, .exchange li.gives b, .linemap-hint { color: #101A44 !important; }
  .kicker::before { background: #101A44 !important; }
  .lm-no { fill: #101A44 !important; }
  .terms h3::before { background: #101A44 !important; box-shadow: none !important; }
  .claims .rank-1 { border-bottom-color: #101A44 !important; }
  .closer { border-inline-start-color: #101A44 !important; }

  .plate-art, .linemap-frame, .size-row, .wash-form, .closer, .terms li, .exchange li, .channels li {
    background: none !important;
    box-shadow: none !important;
    border: 1pt solid rgba(16, 26, 68, 0.3);
  }
  .plate-art svg, .linemap-frame svg { filter: invert(1) hue-rotate(180deg); }
  .linemap-frame { overflow: visible; }
  .linemap-frame svg { min-width: 0; }

  /* Every answer prints, opened or not. main.js opens the <details> on
     beforeprint (the cross-browser path); this is the no-JS fallback —
     a closed <details> skips painting its content slot, so the display
     override alone is not enough. */
  .qa[open] > summary, .qa > summary { color: #101A44 !important; }
  .qa > summary::after { display: none; }
  .qa-body { display: block !important; }
  .qa::details-content { content-visibility: visible !important; block-size: auto !important; }

  /* reveal-on-scroll must never hide print content */
  .js .rise, .js .rise:not(.is-up),
  .js .lift, .js .slide { opacity: 1 !important; transform: none !important; filter: none !important; }

  /* the row icons print as line art in ink; their one lime part becomes a tint,
     for the same reason the band does — lime on paper is a smudge */
  .row-icon { color: #101A44 !important; }
  .row-icon .zs { stroke: #101A44 !important; }
  .row-icon .zf { fill: #101A44 !important; fill-opacity: 0.18 !important; }

  /* a printed link is useless unless it says where it goes */
  .foot-col a::after, .qa-body a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #6B7699; }
  .btn { border: 1pt solid #101A44; color: #101A44 !important; background: none !important; }
  .foot { border-top: 1pt solid #101A44; }
  .foot-mark { display: none; }
  @page { margin: 16mm; }
}

/* ============================================================
   The foam field, as a material rather than a scatter of circles.

   media/foam-cells.svg is a Lloyd-relaxed Voronoi: packed cells with
   rounded Plateau borders where three films meet, coarse at the top
   where foam has drained and fine at the bottom where it is still wet.
   Used wherever the page needs to read as *inside* foam rather than
   beside it.
   ============================================================ */

.cellfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("media/foam-cells.svg") center bottom / cover no-repeat;
  opacity: var(--cell-o, 0.5);
  mix-blend-mode: screen;
}

/* ---------- The proof: the same test, in three shots ----------
   The slots are deliberately unmistakable placeholders. PRODUCT.md says a
   placeholder must read as temporary, so these are dashed, labelled with the
   shot they are waiting for, and stamped with the ratio to shoot.
   -------------------------------------------------------------------- */

.proof { position: relative; overflow: hidden; }
.proof::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0; bottom: 0;
  background: radial-gradient(70% 90% at 26% 40%, rgba(30, 52, 128, 0.5) 0%, rgba(30, 52, 128, 0) 68%);
  pointer-events: none;
}
.proof > * { position: relative; }

.shots {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
.shot { margin: 0; }
.shot img,
.shot video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, 4 / 3);
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(233, 242, 255, 0.09), 0 24px 48px -30px rgba(3, 6, 15, 0.9);
}
.shot video { cursor: pointer; background: var(--deep, #070C1E); }
.shot-slot {
  position: relative;
  aspect-ratio: var(--ar, 4 / 3);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.7rem;
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 1.5px dashed var(--line-strong);
  background: rgba(174, 188, 226, 0.035);
  color: var(--ice-2);
  transition: border-color var(--t-hover) var(--ease-ui), background-color var(--t-hover) var(--ease-ui), color var(--t-hover) var(--ease-ui);
}
.shot-slot:hover { border-color: var(--zest); background: rgba(194, 245, 63, 0.05); color: var(--ice); }
.shot-glyph { display: block; width: clamp(2.5rem, 7vw, 3.5rem); height: auto; }
.shot-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ice); }
.shot-spec {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--zest);
  border: 1px solid var(--line-strong);
  padding: 0.1rem 0.5rem;
}
.shot figcaption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: baseline;
  margin-top: 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ice-2);
}
.shot-no {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--zest);
}

.shot-pending { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.shot-pending span {
  display: inline-block;
  border: 1px dashed var(--line-strong);
  padding: 0.25rem 0.8rem;
  font-size: 0.8125rem;
  color: var(--ice-2);
}

/* ============================================================
   Manufacture vs. import: a comparison matrix, not a pricing tower.
   The recommended side is marked with colour and a rule, never with
   extra height — and the row where importing genuinely wins is left
   standing, because a comparison that loses nothing convinces nobody.
   ============================================================ */

.versus {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
.versus > * {
  padding: clamp(0.9rem, 2vw, 1.25rem) clamp(0.9rem, 2vw, 1.4rem);
  border-bottom: 1px solid var(--line);
}
.vs-head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.1875rem);
  padding-block: clamp(1rem, 2.4vw, 1.5rem);
}
.vs-head span {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--ice-2);
  margin-top: 0.35rem;
}
.vs-dim {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ice-2);
}
.versus p { font-size: 0.9375rem; line-height: 1.75; color: var(--ice-2); }

/* the column that is ours: lit ground, lime rule, no extra height */
.vs-ours {
  background: linear-gradient(180deg, rgba(22, 34, 90, 0.55), rgba(16, 26, 68, 0.3));
  color: var(--ice);
}
.vs-ours p { color: var(--ice); }
.versus .vs-head.vs-ours { border-top: 3px solid var(--zest); margin-top: -1px; }

/* the one row importing wins, said plainly */
.vs-concede { color: var(--ice-2); }
.vs-concede .vs-flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  border: 1px solid var(--line-strong);
  padding: 0.05rem 0.4rem;
  margin-inline-end: 0.5rem;
  transform: translateY(-0.1em);
}

.versus-note {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 68ch;
  font-size: 0.9375rem;
  color: var(--ice-2);
}

@media (max-width: 760px) {
  /* stacked, the matrix becomes one card per dimension */
  .versus { grid-template-columns: 1fr; border-top: 0; }
  /* stacked, every row labels both sides itself, so the header row is noise */
  .versus .vs-head { display: none; }
  .vs-dim {
    background: rgba(3, 6, 15, 0.5);
    border-bottom: 0;
    padding-bottom: 0.3rem;
    font-size: 1.0625rem;
    color: var(--ice);
  }
  .versus > *:not(.vs-dim):not(.vs-head) { padding-top: 0.5rem; }
  .versus .vs-cell::before {
    content: attr(data-side);
    display: block;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    color: var(--ice-2);
    margin-bottom: 0.25rem;
  }
  .versus .vs-ours.vs-cell::before { color: var(--zest); }
}

/* ---------- Narrow screens pull the smaller plates ----------
   The KSA buyer is often on mobile data; a 1600px backdrop on a 390px
   screen is 60KB of nothing. The art is identical, only the pixels differ. */
@media (max-width: 820px) {
  .page-head {
    background:
      linear-gradient(to bottom, rgba(7, 12, 30, 0.72) 0%, rgba(7, 12, 30, 0.5) 46%, rgba(7, 12, 30, 0.88) 90%, var(--deep) 100%),
      radial-gradient(120% 80% at 78% 12%, rgba(22, 34, 90, 0.8) 0%, rgba(22, 34, 90, 0) 62%),
      var(--head-ground, url("media/foam-surface-800.webp")) center bottom / cover no-repeat,
      var(--deep);
  }
  .hero {
    background:
      linear-gradient(to bottom, rgba(7, 12, 30, 0.55) 0%, rgba(7, 12, 30, 0.35) 42%, rgba(7, 12, 30, 0.82) 88%, var(--deep) 100%),
      radial-gradient(120% 80% at 78% 12%, rgba(22, 34, 90, 0.8) 0%, rgba(22, 34, 90, 0) 62%),
      var(--hero-ground, url("media/foam-hero-800.webp")) center bottom / cover no-repeat,
      var(--deep);
  }
}

/* ============================================================
   Scroll progress, in two registers.

   A hairline on the bar reads as precision — it is always there, it never
   covers anything, and it tells you exactly how far down the page you are.
   The dock reads as the world: a small vessel that fills with the same water
   as everything else, carrying the standing ask so the quote is never more
   than one tap away.

   Both are driven by the same journey. Where the browser has scroll
   timelines the compositor runs them; otherwise main.js sets --progress and
   the declarations below use it. No branch needed: an animation wins.
   ============================================================ */

:root { --origin-start: right; }
:root:dir(ltr) { --origin-start: left; }

/* ---------- The waterline under the bar ---------- */

.bar-progress {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  overflow: hidden;
}
.bar-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(to left, var(--zest-deep), var(--zest));
  box-shadow: 0 0 10px rgba(194, 245, 63, 0.55);
  transform: scaleX(var(--progress, 0));
  transform-origin: var(--origin-start) center;
}

/* ---------- The dock: the standing ask, filling as you read ---------- */

.dock {
  position: fixed;
  z-index: var(--z-bar);
  inset-block-end: clamp(1rem, 3vw, 1.75rem);
  inset-inline-end: clamp(1rem, 3vw, 1.75rem);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(22, 34, 90, 0.92), rgba(10, 18, 51, 0.96));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px -18px rgba(3, 6, 15, 0.95);
  color: var(--ice);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  overflow: hidden;
  /* parked below the fold until the visitor has actually read something */
  transform: translateY(180%);
  transition: transform var(--t-ui) var(--ease),
              border-color var(--t-hover) var(--ease-ui),
              box-shadow var(--t-hover) var(--ease-ui);
}
.dock.is-up { transform: none; }
.dock:hover, .dock:focus-visible {
  border-color: var(--zest);
  box-shadow: 0 20px 44px -18px rgba(3, 6, 15, 1), 0 0 0 3px rgba(194, 245, 63, 0.14);
}
.dock:active { transform: translateY(1px); transition-duration: var(--t-tap); }

/* the water inside the vessel */
.dock-fill {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(124, 164, 255, 0.5), rgba(43, 74, 168, 0.3));
  transform: translateY(calc((1 - var(--progress, 0)) * 100%));
}
/* it has a surface, like every other body of water on this site */
.dock-fill::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: rgba(226, 240, 255, 0.8);
  box-shadow: 0 0 8px rgba(226, 240, 255, 0.5);
}
.dock > *:not(.dock-fill) { position: relative; z-index: 1; }
.dock-icon { display: block; width: 1.15rem; height: 1.15rem; flex: none; }

@media (max-width: 420px) {
  .dock { padding: 0.7rem 0.95rem; font-size: 0.875rem; gap: 0.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dock { transition: none; }
  .bar-progress i, .dock-fill { transition: none; }
}

@supports (animation-timeline: scroll()) {
  /* the compositor owns both, and --progress becomes a fallback nobody reads */
  .bar-progress i {
    animation: progress-run linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes progress-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  .dock-fill {
    animation: dock-run linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes dock-run { from { transform: translateY(100%); } to { transform: translateY(0); } }
}