/* ==========================================================================
   KPS Warranty — Public surfaces
   Brand register. Where the application is a quiet working surface, this is
   the docket itself: graphite ground, hairline rules, mono data columns,
   and one violet stamp.
   ========================================================================== */

.marketing {
  background: var(--chrome);
  color: var(--chrome-ink);
}
/* base.css pins headings to --ink for the working surface. On the graphite
   ground they take the ground's colour instead. */
.marketing h1, .marketing h2, .marketing h3,
.marketing h4, .marketing h5, .marketing h6 { color: inherit; }
.sec--paper, .sec--paper h1, .sec--paper h2, .sec--paper h3,
.sec--paper h4, .sec--paper h5, .sec--paper h6 { color: var(--ink); }
.dock, .dock h1, .dock h2, .dock h3, .docket { color: var(--ink); }

/* Grain. A docket is printed on paper, not rendered on glass. */
.grain::before {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

.wrap { width: min(1180px, 100% - clamp(2rem, 6vw, 6rem)); margin-inline: auto; min-width: 0; }
.hero__in > *, .duo > *, .sec > *, .tour-grid > * { min-width: 0; }
.wrap--narrow { width: min(880px, 100% - clamp(2rem, 6vw, 6rem)); }
/* The fold gets more width than the rest of the page, so the headline can
   hold two lines instead of breaking to three. */
.hero .wrap { width: min(1340px, 100% - clamp(2rem, 6vw, 6rem)); }

/* ---- brand type scale: modular, ratio 1.28, hero ceiling 6rem ---------- */
.d1 {
  font-size: clamp(2.4rem, 4.6vw, 4.15rem);
  max-width: 20ch;
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.034em;
  line-height: 1.02;
  text-wrap: balance;
}
/* Balance picked a break that split "returned alarm". The phrase break is a
   copy decision, so it lives in the markup — and only where there is room. */
.brk { display: none; }
@media (min-width: 1040px) {
  .d1 { text-wrap: normal; max-width: none; }
  .brk { display: inline; }
}
.d2 {
  font-size: clamp(1.75rem, 3.1vw, 2.6rem);
  max-width: 22ch;
  font-weight: 650;
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.028em;
  line-height: 1.08;
  text-wrap: balance;
}
.d3 {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 620;
  letter-spacing: -0.022em;
  line-height: 1.18;
}
.lede {
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.62;
  max-width: 58ch;
  text-wrap: pretty;
}

/* ---- top bar ------------------------------------------------------------ */
.mhead {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in oklab, var(--chrome) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--chrome-line);
}
.mhead__in { display: flex; align-items: center; gap: var(--s-5); height: 66px; }
.mbrand {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--chrome-ink); text-decoration: none;
}
.mbrand svg { width: 30px; height: 30px; }
.mbrand b {
  font-size: var(--t-16); font-weight: 700; letter-spacing: -0.02em;
  font-variation-settings: "wdth" 108; display: block; line-height: 1.05;
  color: inherit;
}
/* Scoped to the inner subline. Unscoped, `.mbrand span` also matched the
   wrapper span, so the brand NAME inherited the muted subline colour —
   invisible enough on graphite, and 2.48:1 on the white sign-in form. */
.mbrand > span > span {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--chrome-ink-2);
}
.mnav { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
/* Scoped away from .btn — a blanket `.mnav a` colour out-specified every
   button's own ink and left them unreadable against their own background. */
.mnav a:not(.btn) {
  color: var(--chrome-ink-2); text-decoration: none;
  font-size: var(--t-13); font-weight: 550;
  transition: color var(--d-state) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .mnav a:not(.btn):hover { color: var(--chrome-ink); }
}
.mnav .btn { text-decoration: none; }
@media (max-width: 767px) { .mnav a:not(.btn) { display: none; } }

/* ---- hero --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 82%; }
/* The scrim holds >= 0.86 alpha across the whole copy column, then falls
   away so the photograph is still visible beside it.

   0.86 is not a guess. Against a PURE WHITE photograph — the worst case for
   light type — it yields 11.9:1 on the headline and 5.25:1 on the lede. The
   design therefore cannot be broken by swapping in a brighter picture, which
   an eyeballed scrim tuned to one image absolutely can be. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      oklch(0.17 0.005 285 / 0.95) 0%,
      oklch(0.17 0.005 285 / 0.92) 40%,
      oklch(0.17 0.005 285 / 0.86) 53%,
      oklch(0.17 0.005 285 / 0.40) 74%,
      oklch(0.17 0.005 285 / 0.30) 100%),
    linear-gradient(180deg,
      oklch(0.17 0.005 285 / 0.50) 0%,
      oklch(0.17 0.005 285 / 0.10) 38%,
      oklch(0.17 0.005 285 / 0.66) 100%);
}
@media (max-width: 999px) {
  .hero__media::after {
    background: linear-gradient(180deg,
      oklch(0.17 0.005 285 / 0.92) 0%,
      oklch(0.17 0.005 285 / 0.88) 55%,
      oklch(0.17 0.005 285 / 0.96) 100%);
  }
}
/* A deliberate fold. The band sits on the floor of the viewport, the two
   columns share the space above it, and their optical centres agree —
   previously `align-items:center` centred a 683px copy block against a 413px
   panel and neither the tops nor the bottoms lined up. */
.hero__inner {
  position: relative; z-index: 2;
  min-height: calc(100svh - 66px);
  display: flex; flex-direction: column;
  padding: clamp(3rem, 7vh, 5.5rem) 0 clamp(1.25rem, 2.5vh, 2rem);
}
.hero__grid {
  flex: 1 1 auto;
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  align-content: center;
}
@media (min-width: 1040px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(392px, 430px);
    align-items: center;
  }
}
.hero__copy { max-width: 53rem; }
.hero__copy .lede { color: var(--chrome-ink-2); margin-top: var(--s-5); max-width: 46ch; }
.hero__mark {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--chrome-3);
  border-radius: var(--r-full);
  font-size: var(--t-12); font-weight: 600; color: var(--chrome-ink-2);
  margin-bottom: var(--s-5);
}
.hero__mark i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--stamp); flex: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--stamp) 30%, transparent);
}
/* The specification band — the footer of a docket, anchoring the fold. */
.hero__band {
  flex: none;
  display: grid; gap: var(--s-4) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: clamp(2rem, 4vh, 3.25rem) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--chrome-line);
}
.hero__band div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hero__band dt {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: color-mix(in oklab, var(--chrome-ink-2) 82%, transparent);
}
.hero__band dd {
  margin: 0; font-family: var(--font-data); font-size: var(--t-13);
  font-weight: 500; color: var(--chrome-ink); line-height: 1.4;
}

/* ---- the date-code check ------------------------------------------------ */
.dock {
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-4);
  box-shadow: 0 32px 80px oklch(0 0 0 / 0.45), 0 2px 0 oklch(1 0 0 / 0.06) inset;
  overflow: hidden;
}
.dock__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-2);
}
.dock__title { font-size: var(--t-14); font-weight: 650; letter-spacing: -0.01em; }
.dock__body { padding: var(--s-5); display: grid; gap: var(--s-4); }
.dock__row { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .dock__row { grid-template-columns: 1fr; } }
.dock__foot {
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--hairline);
  background: var(--surface-2);
  font-size: var(--t-12); color: var(--ink-3);
}
.dock__samples { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dock__samples button {
  font-family: var(--font-data); font-size: var(--t-11);
  padding: 3px var(--s-2);
  border: 1px solid var(--hairline-2); border-radius: var(--r-1);
  background: var(--surface); color: var(--ink-2);
  transition: border-color var(--d-state) var(--ease-out), color var(--d-state) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .dock__samples button:hover { border-color: var(--stamp); color: var(--stamp); }
}

/* ---- sections ----------------------------------------------------------- */
.sec { position: relative; padding: clamp(4rem, 9vw, 7.5rem) 0; }
.sec--paper { background: var(--surface); color: var(--ink); }
.sec--paper .lede { color: var(--ink-2); }
.sec--rule { border-top: 1px solid var(--chrome-line); }
.sec__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec__head .lede { margin-top: var(--s-4); }
.sec--paper .sec__head .lede { color: var(--ink-2); }
.marketing .sec:not(.sec--paper) .lede { color: var(--chrome-ink-2); }

/* ---- the pipeline: an instrument scale, not a row of cards -------------- */
.scale { position: relative; }
.scale__rail {
  position: absolute; left: 0; right: 0; top: 26px; height: 1px;
  background: var(--hairline);
}
.sec--paper .scale__rail { background: var(--hairline-2); }
.scale__steps {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  position: relative;
}
.stage { position: relative; padding-top: 62px; }
.stage__tick {
  position: absolute; top: 0; left: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);
}
.stage__n {
  width: 34px; height: 34px;
  display: grid; place-content: center;
  border-radius: 50%;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline-2);
  font-family: var(--font-data); font-size: var(--t-13); font-weight: 600;
}
.stage:first-child .stage__n { background: var(--stamp); color: var(--ink-invert); border-color: var(--stamp); }
.stage__mark { width: 1px; height: 18px; background: var(--hairline-2); margin-left: 17px; }
.stage__who {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s-2);
}
.stage__t { font-size: var(--t-16); font-weight: 650; letter-spacing: -0.015em; margin-bottom: var(--s-2); }
.stage__b { font-size: var(--t-13); line-height: 1.6; color: var(--ink-2); }

/* ---- a two-up: figure beside prose ------------------------------------- */
.duo { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .duo--flip > :first-child { order: 2; } }
.figure { position: relative; border-radius: var(--r-4); overflow: hidden; background: var(--surface-3); }
.figure img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
/* The caption sits on its own ground rather than on whatever the photograph
   happens to be doing behind it. A scrim that fades to transparent puts the
   first line of text over an unknown colour. */
.figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-6) var(--s-4) var(--s-3);
  background: linear-gradient(180deg,
    oklch(0.16 0.004 285 / 0) 0%,
    oklch(0.16 0.004 285 / 0.86) 34%,
    oklch(0.16 0.004 285 / 0.94) 100%);
  color: oklch(0.96 0.002 285);
  font-size: var(--t-12);
}

/* ---- ruled specification list ------------------------------------------ */
.ruled { border-top: 1px solid var(--hairline); }
.marketing .sec:not(.sec--paper) .ruled { border-color: var(--chrome-line); }
.ruled__row {
  display: grid; gap: var(--s-2) var(--s-5);
  grid-template-columns: minmax(140px, 200px) 1fr;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hairline);
}
.marketing .sec:not(.sec--paper) .ruled__row { border-color: var(--chrome-line); }
.ruled__k {
  font-family: var(--font-data); font-size: var(--t-12);
  letter-spacing: 0.02em; color: var(--ink-3);
}
.marketing .sec:not(.sec--paper) .ruled__k { color: var(--chrome-ink-2); }
.ruled__v { font-size: var(--t-14); line-height: 1.6; color: var(--ink-2); }
.marketing .sec:not(.sec--paper) .ruled__v { color: var(--chrome-ink); }
.ruled__v strong { color: var(--ink); font-weight: 600; }
.marketing .sec:not(.sec--paper) .ruled__v strong { color: var(--chrome-ink); }
@media (max-width: 620px) { .ruled__row { grid-template-columns: 1fr; } }

/* ---- worked example: the allowance ------------------------------------- */
.docket {
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-3);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.docket__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hairline-2);
  background: var(--surface-2);
  font-size: var(--t-12); font-weight: 650;
}
.docket__stamp {
  margin-left: auto;
  font-family: var(--font-data); font-size: var(--t-11); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--stamp);
  border: 1.5px solid var(--stamp);
  border-radius: var(--r-1);
  padding: 2px var(--s-2);
  transform: rotate(-2.5deg);
}
.docket table { width: 100%; border-collapse: collapse; font-size: var(--t-13); }
.docket th, .docket td { padding: var(--s-2) var(--s-4); text-align: left; border-bottom: 1px solid var(--hairline); }
.docket thead th {
  font-size: var(--t-11); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-3); font-weight: 650;
}
.docket tfoot th, .docket tfoot td {
  border-bottom: 0; border-top: 1px solid var(--hairline-2);
  font-weight: 650; color: var(--ink);
}
.docket .tar { text-align: right; }

/* ---- footer ------------------------------------------------------------- */
.mfoot { border-top: 1px solid var(--chrome-line); padding: clamp(3rem, 6vw, 5rem) 0 var(--s-8); }
.mfoot__grid { display: grid; gap: var(--s-8); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.mfoot h4 {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: color-mix(in oklab, var(--chrome-ink-2) 80%, transparent);
  margin-bottom: var(--s-3);
}
.mfoot ul { list-style: none; margin: 0; padding: 0; }
.mfoot li { margin-bottom: var(--s-2); }
.mfoot a { color: var(--chrome-ink-2); text-decoration: none; font-size: var(--t-13); }
@media (hover: hover) and (pointer: fine) { .mfoot a:hover { color: var(--chrome-ink); } }
.mfoot__base {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  margin-top: var(--s-10); padding-top: var(--s-5);
  border-top: 1px solid var(--chrome-line);
  font-size: var(--t-12); color: color-mix(in oklab, var(--chrome-ink-2) 78%, transparent);
}

/* ---- one orchestrated first load --------------------------------------- */
/* Content is visible by default; the reveal only enhances it, so a headless
   render or a background tab never ships a blank page. */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 720ms var(--ease-out) both; }
  .rise-1 { animation-delay: 40ms; }
  .rise-2 { animation-delay: 100ms; }
  .rise-3 { animation-delay: 160ms; }
  .rise-4 { animation-delay: 220ms; }
  .rise-5 { animation-delay: 300ms; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---- sign-in ------------------------------------------------------------ */
.auth {
  min-height: 100vh; min-height: 100dvh;
  display: grid;
}
@media (min-width: 940px) { .auth { grid-template-columns: 1fr minmax(440px, 0.85fr); } }
.auth__aside {
  position: relative; overflow: hidden; isolation: isolate;
  display: none; padding: clamp(3rem, 6vw, 5rem);
  align-content: space-between;
}
@media (min-width: 940px) { .auth__aside { display: grid; } }
.auth__aside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.auth__aside::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, oklch(0.19 0.005 285 / 0.95), oklch(0.19 0.005 285 / 0.995));
}
.auth__form {
  background: var(--surface); color: var(--ink);
  display: grid; align-content: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
}
.auth__form .inner { width: min(400px, 100%); margin-inline: auto; }

/* ---- the determination diagram ----------------------------------------- */
.lflow { max-width: 100%; height: auto; min-width: 900px; }
.lflow__node rect { fill: var(--surface); stroke: var(--hairline-2); stroke-width: 1; }
.lflow__node--accept rect { fill: var(--accept-bg); stroke: var(--accept-line); }
.lflow__node--decline rect { fill: var(--decline-bg); stroke: var(--decline-line); }
.lflow__t { font-size: 11px; font-weight: 650; fill: var(--ink-3); letter-spacing: 0.02em; text-transform: uppercase; }
.lflow__s { font-family: var(--font-data); font-size: 15px; font-weight: 600; fill: var(--ink); }
.lflow__n { font-size: 11px; fill: var(--ink-3); }
.lflow__e { font-size: 11px; font-weight: 600; }
.lflow__node--accept .lflow__s { fill: var(--accept); }
.lflow__node--decline .lflow__s { fill: var(--decline); }

/* ==========================================================================
   PLATFORM TOUR
   Each screen is shown as the layout it is, drawn as a wireframe. A grid of
   identical text cards would tell you nothing about what you are opening.
   ========================================================================== */
.tour-index { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tour-index a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--chrome-3); border-radius: var(--r-full);
  color: var(--chrome-ink-2); text-decoration: none;
  font-size: var(--t-12); font-weight: 550;
  transition: border-color var(--d-state) var(--ease-out), color var(--d-state) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tour-index a:hover { border-color: var(--stamp); color: var(--chrome-ink); }
}
.tour-index span { font-family: var(--font-data); font-size: var(--t-11); opacity: 0.62; }

.tour-group { margin-bottom: clamp(3rem, 6vw, 4.5rem); scroll-margin-top: 90px; }
.tour-group__head {
  display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap;
  padding-bottom: var(--s-3); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--hairline-2);
}
.tour-group__head p { margin: 0; font-size: var(--t-13); color: var(--ink-3); }

.tour-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.tour-card {
  display: grid; grid-template-columns: 92px 1fr; gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--hairline); border-radius: var(--r-3);
  background: var(--surface); text-decoration: none;
  transition: border-color var(--d-state) var(--ease-out), box-shadow var(--d-state) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tour-card:hover { border-color: var(--hairline-3); box-shadow: var(--shadow-1); }
  .tour-card:hover .g-on { fill: var(--stamp); }
}
.tour-card__glyph {
  border: 1px solid var(--hairline); border-radius: var(--r-2);
  background: var(--surface-2); overflow: hidden;
  align-self: start;
}
.tour-card__glyph svg { width: 100%; height: auto; display: block; }
.tour-card__body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.tour-card__name { font-size: var(--t-14); font-weight: 650; color: var(--ink); letter-spacing: -0.012em; }
.tour-card__note { font-size: var(--t-12); line-height: 1.55; color: var(--ink-2); }

/* wireframe parts */
.g-side  { fill: var(--chrome); }
.g-bar   { fill: var(--hairline-3); }
.g-row   { fill: var(--hairline); }
.g-col   { fill: none; stroke: var(--hairline-2); stroke-width: 1; }
.g-card  { fill: var(--surface); stroke: var(--hairline-2); stroke-width: 1; }
.g-panel { fill: none; stroke: var(--hairline-2); stroke-width: 1; }
.g-field { fill: var(--surface); stroke: var(--hairline-2); stroke-width: 1; }
.g-btn   { fill: var(--stamp); }
.g-hero  { fill: var(--chrome-2); }
.g-code  { fill: var(--chrome); }
.g-node  { fill: var(--surface); stroke: var(--hairline-3); stroke-width: 1; }
.g-edge  { stroke: var(--hairline-3); stroke-width: 1; fill: none; }
.g-dot   { fill: var(--hairline-2); }
.g-on    { fill: var(--hairline-3); transition: fill var(--d-state) var(--ease-out); }
.g-rail  { fill: var(--hairline); }
.g-cells rect { fill: var(--surface); stroke: var(--hairline); stroke-width: 1; }

/* ---- the first fold's call to action ------------------------------------ */
.hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: clamp(1.75rem, 3.5vh, 2.5rem);
}
.hero__hint {
  margin: var(--s-4) 0 0;
  max-width: 52ch;
  font-size: var(--t-13);
  line-height: 1.6;
  color: var(--chrome-ink-2);
}

/* The verdict row is tight inside a 430px panel — let it wrap onto two
   lines rather than squeezing the message to three words a line. */
.instr .warranty__top { flex-wrap: wrap; row-gap: var(--s-2); }
.instr .warranty__msg { flex: 1 1 100%; order: 3; font-size: var(--t-12); }
.instr .warranty__top .tag { order: 2; }

/* ==========================================================================
   THE INSTRUMENT — the warranty check, as a piece of bench equipment
   ========================================================================== */
.hero__panel { min-width: 0; }
.instr {
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-4);
  box-shadow: 0 40px 90px oklch(0 0 0 / 0.5), 0 0 0 1px oklch(1 0 0 / 0.07);
  overflow: hidden;
}
.instr__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--chrome); color: var(--chrome-ink);
  border-bottom: 1px solid var(--chrome-line);
}
.instr__title { font-size: var(--t-13); font-weight: 650; letter-spacing: -0.005em; }
.instr__ref {
  margin-left: auto; font-size: var(--t-11);
  letter-spacing: 0.08em; color: var(--chrome-ink-2);
}
.instr__lamp {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--chrome-3);
  transition: background-color var(--d-state) var(--ease-out),
              box-shadow var(--d-state) var(--ease-out);
}
.instr__lamp[data-state="ok"]   { background: oklch(0.72 0.15 150); box-shadow: 0 0 0 3px oklch(0.72 0.15 150 / 0.22); }
.instr__lamp[data-state="bad"]  { background: oklch(0.68 0.19 27);  box-shadow: 0 0 0 3px oklch(0.68 0.19 27 / 0.22); }
.instr__lamp[data-state="wait"] { background: oklch(0.80 0.14 78);  box-shadow: 0 0 0 3px oklch(0.80 0.14 78 / 0.22); }

.instr__body { padding: var(--s-5); display: grid; gap: var(--s-4); }
.instr__row { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .instr__row { grid-template-columns: 1fr; } }
.instr__samples { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.instr__samples-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.instr__samples span { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); }
.instr__samples button {
  font-family: var(--font-data); font-size: var(--t-11);
  padding: 3px var(--s-2);
  border: 1px solid var(--hairline-2); border-radius: var(--r-1);
  background: var(--surface); color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--d-state) var(--ease-out), color var(--d-state) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .instr__samples button:hover { border-color: var(--stamp); color: var(--stamp); }
}
.instr__foot {
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--hairline);
  background: var(--surface-2);
  font-size: var(--t-12); color: var(--ink-3); line-height: 1.5;
}
.instr__foot strong { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   INTERFACE PLATES — the running platform, not a picture of it
   ========================================================================== */
.plate-lead {
  display: grid; gap: var(--s-3);
  max-width: 62ch; margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.plate-lead p { margin: 0; font-size: var(--t-14); line-height: 1.6; color: var(--chrome-ink-2); }
.sec--paper .plate-lead p { color: var(--ink-2); }

/* A plate is a piece of the application, so it wears the application's ink —
   inheriting the graphite section's light text put white type on the plate's
   white ground and the column titles vanished. */
.plate {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-4);
  overflow: hidden;
  box-shadow: 0 24px 60px oklch(0 0 0 / 0.32);
  transition: transform var(--d-modal) var(--ease-out),
              box-shadow var(--d-modal) var(--ease-out);
}
.sec--paper .plate { box-shadow: var(--shadow-2); }
@media (hover: hover) and (pointer: fine) {
  .plate:hover { transform: translateY(-3px); box-shadow: 0 34px 74px oklch(0 0 0 / 0.42); }
  .sec--paper .plate:hover { box-shadow: var(--shadow-3); }
  .plate:hover .plate__open { color: var(--stamp); }
  .plate:hover .plate__open span { transform: translateX(3px); }
}
.plate__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-2);
  flex-wrap: wrap;
}
.plate__crumb {
  font-size: var(--t-11); letter-spacing: 0.06em;
  color: var(--ink-3); text-transform: uppercase;
}
.plate__name { font-size: var(--t-13); font-weight: 650; color: var(--ink); }
.plate__open {
  margin-left: auto; font-size: var(--t-12); font-weight: 600; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: color var(--d-state) var(--ease-out);
}
.plate__open span { transition: transform var(--d-state) var(--ease-out); }
.plate__body { padding: var(--s-4); background: var(--surface-3); }
.plate__body--pad { padding: var(--s-5); background: var(--surface); display: grid; gap: var(--s-4); }

/* a static rendering of the app's own toolbar */
.plate__toolbar {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.plate__search, .plate__chip {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 var(--s-3);
  border: 1px solid var(--hairline-2); border-radius: var(--r-2);
  background: var(--surface); color: var(--ink-3);
  font-size: var(--t-12);
}
.plate__search { min-width: 170px; color: var(--ink-3); }
.plate__chip--ghost { border-radius: var(--r-full); }
.plate .board { gap: var(--s-3); }
.plate .unit { pointer-events: none; }
.plate .btn { pointer-events: none; }

/* the Test & advance plate */
.adv-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.adv-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; }
.adv-value { display: flex; align-items: center; background: var(--surface-2); color: var(--ink); }
.adv-sub {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
  padding-top: var(--s-2); border-top: 1px solid var(--hairline);
}
.adv-result { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* the reconciliation plate */
.plate .alloc { border: 1px solid var(--hairline); border-radius: var(--r-3); background: var(--surface); }
.plate .alloc__sum { font-size: var(--t-14); }
.alloc__foot {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--hairline);
  background: var(--surface-2);
  font-size: var(--t-12);
}
.tick {
  display: inline-block; width: 14px; height: 14px;
  border: 1px solid var(--hairline-3); border-radius: 4px;
  background: var(--surface);
}
.tick--on {
  background: var(--stamp); border-color: var(--stamp);
  background-image: linear-gradient(45deg, transparent 40%, var(--surface) 40%);
  background-size: 3px 3px;
}
.tick--on { position: relative; background-image: none; }
.tick--on::after {
  content: ""; position: absolute; inset: 2px;
  background: var(--ink-invert);
  clip-path: polygon(14% 45%, 0 60%, 39% 100%, 100% 22%, 84% 8%, 39% 70%);
}

/* ==========================================================================
   LAYOUT — top-aligned pairs, because centring two columns of different
   height leaves both of them floating against nothing
   ========================================================================== */
.split-hard { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) {
  .split-hard { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .split-hard--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.split-hard > * { min-width: 0; }

.duo--top { align-items: start; }

.sec__head--split {
  display: grid; gap: var(--s-5);
  align-items: end;
  max-width: none;
}
@media (min-width: 900px) {
  .sec__head--split { grid-template-columns: minmax(0, 1fr) auto; }
}
.sec__head--split .lede { margin-top: var(--s-4); }
.sec--tight { padding: clamp(3rem, 6vw, 5rem) 0; }

/* ==========================================================================
   THE DECISION — the diagram is the section, not a band floating in it
   ========================================================================== */
.decision-flow {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  overflow-x: auto; overscroll-behavior-x: contain;
}
.decision-flow .lflow { min-width: 940px; width: 100%; height: auto; display: block; }

.worked { margin-top: clamp(2.5rem, 5vw, 4rem); }
.worked__head {
  display: grid; gap: var(--s-2);
  max-width: 62ch; margin-bottom: var(--s-4);
}
.worked__head p { margin: 0; font-size: var(--t-13); color: var(--ink-3); }
.worked__table {
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  overflow-x: auto; overscroll-behavior-x: contain;
  background: var(--surface);
}
.worked__table table { min-width: 780px; }
.worked__table thead th { background: var(--surface-2); }
.worked__table td { vertical-align: top; padding-top: var(--s-3); padding-bottom: var(--s-3); }

.note-line {
  margin: 0; font-size: var(--t-14); line-height: 1.65;
  color: var(--chrome-ink-2); max-width: 46ch;
}
.sec--paper .note-line { color: var(--ink-2); }

/* ==========================================================================
   TRACKER
   ========================================================================== */
.tracker {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
}
.track-result { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }

/* the figure in a top-aligned pair should meet the copy, not float */
.duo--top .figure { position: sticky; top: 96px; }
@media (max-width: 899px) { .duo--top .figure { position: static; } }

/* ==========================================================================
   THE HEADER ON A PHONE
   The brand lockup plus two buttons overran 375px and wrapped out of the
   66px bar. The subline goes, the name steps down, the gap tightens.
   ========================================================================== */
@media (max-width: 719px) {
  .mhead__in { gap: var(--s-3); }
  .mbrand svg { width: 26px; height: 26px; }
  .mbrand b { font-size: var(--t-14); }
  .mbrand span span { display: none; }
  .mnav { gap: var(--s-2); }
  .mnav .btn { height: var(--ctl-sm); padding: 0 var(--s-2); font-size: var(--t-12); }
}
@media (max-width: 419px) {
  .mnav .btn--on-dark { display: none; }
}

/* The fold on a phone: the band still anchors it, but the panel needs air
   above it and the hero is allowed to run past one screen. */
@media (max-width: 1039px) {
  .hero__inner { min-height: 0; padding-top: clamp(2.5rem, 6vh, 4rem); }
  .hero__grid { gap: var(--s-8); }
  .hero__band { margin-top: var(--s-8); }
}