/* ============================================================================
   TENTRO TECH AND DEVICE SOLUTIONS LTD — tentrotech.pro
   Design language: a technical specification sheet.
   Mid-tone stone ground, basalt ink, one signal colour (amber).
   Deliberately unlike the sibling sites: no band/grid/card/panel skeleton.
   ========================================================================== */

:root {
  /* --- stone: the ground. A warm concrete mid-tone, never white ---------- */
  --stone-50:  #fbfaf8;   /* raised plate */
  --stone-100: #f4f2ee;   /* plate deck */
  --stone-200: #eae7e1;   /* page ground */
  --stone-300: #ddd9d1;   /* sunken deck */
  --stone-400: #c9c4ba;   /* heavy fill, chart bars */

  /* --- basalt: the inverted surfaces ------------------------------------ */
  --basalt-950: #0e1115;
  --basalt-900: #14181d;   /* footer, inverted deck */
  --basalt-800: #1c222a;   /* lifted inside basalt */
  --basalt-700: #2a3138;   /* the lightest dark surface */

  /* --- type on stone ---------------------------------------------------- */
  --ink:   #14181d;
  --ink-2: #3f474f;
  --ink-3: #565e67;        /* quietest tone that clears 4.5:1 on --stone-300 */

  /* --- type on basalt --------------------------------------------------- */
  --on-basalt:   #eeeeea;
  --on-basalt-2: #b3b8bd;
  --on-basalt-3: #929aa2;  /* clears 4.5:1 on --basalt-700 */

  /* --- amber: the only chromatic colour on the site --------------------- */
  --amber-700: #7f4d0d;    /* links and marks on stone */
  --amber-600: #9a6013;
  --amber-500: #c4841f;
  --amber-400: #d8a04a;    /* marks on basalt */
  --amber-300: #e8bf83;
  --amber-wash: rgba(196, 132, 31, 0.10);

  /* --- rules ------------------------------------------------------------ */
  --rule:        rgba(20, 24, 29, 0.15);
  --rule-soft:   rgba(20, 24, 29, 0.075);
  --rule-strong: rgba(20, 24, 29, 0.34);
  --rule-dark:      rgba(238, 238, 234, 0.14);
  --rule-dark-soft: rgba(238, 238, 234, 0.07);
  --rule-dark-2:    rgba(238, 238, 234, 0.28);

  /* --- type ------------------------------------------------------------- */
  --face-display: "Chivo", "Helvetica Neue", Arial, sans-serif;
  --face-text: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --face-code: "Azeret Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* --- metrics ---------------------------------------------------------- */
  --gutter-max: 1220px;
  --gutter-pad: 30px;
  --code-col: 156px;
  --shadow-plate: 0 1px 0 rgba(20, 24, 29, 0.05), 0 12px 32px -22px rgba(20, 24, 29, 0.45);
}

/* ============================================================ base ======= */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--stone-200);
  color: var(--ink-2);
  font-family: var(--face-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--face-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

a { color: var(--amber-700); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

strong { color: var(--ink); font-weight: 600; }
em { font-style: italic; }

code {
  font-family: var(--face-code);
  font-size: 0.86em;
  background: var(--stone-300);
  border-radius: 2px;
  padding: 1px 5px;
  color: var(--ink);
  word-break: break-word;
}
.deck--basalt code { background: var(--basalt-700); color: var(--on-basalt); }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 40px 0;
}

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

::selection { background: var(--amber-300); color: var(--basalt-900); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--basalt-900);
  color: var(--on-basalt);
  padding: 12px 20px;
  font-family: var(--face-code);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ========================================================= layout ======== */

.gutter {
  width: 100%;
  max-width: var(--gutter-max);
  margin: 0 auto;
  padding: 0 var(--gutter-pad);
}

/* Reading-width column, aligned to the left gutter rather than centred, so a
   narrow section still lines up with the rest of the page. */
.measure { max-width: 920px; }

/* A deck is a major horizontal region of the page. */
.deck {
  padding: 92px 0;
  position: relative;
}
.deck--top { padding-top: 66px; }
.deck--short { padding: 62px 0; }

.deck--plate {
  background: var(--stone-100);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.deck--sunken {
  background: var(--stone-300);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.deck--basalt {
  background: var(--basalt-900);
  color: var(--on-basalt-2);
}
.deck--basalt h1,
.deck--basalt h2,
.deck--basalt h3,
.deck--basalt h4 { color: var(--on-basalt); }
.deck--basalt strong { color: var(--on-basalt); }
.deck--basalt a { color: var(--amber-300); }

/* ======================================================== typography ===== */

.tag {
  font-family: var(--face-code);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 20px;
  display: block;
}
.tag--amber { color: var(--amber-700); }
.deck--basalt .tag { color: var(--on-basalt-3); }
.deck--basalt .tag--amber { color: var(--amber-400); }

.display {
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.028em;
}

.title {
  font-size: clamp(28px, 3.3vw, 40px);
  letter-spacing: -0.024em;
}

.subtitle {
  font-size: clamp(21px, 2.2vw, 26px);
  letter-spacing: -0.018em;
}

.lede {
  font-size: clamp(17px, 1.35vw, 19.5px);
  line-height: 1.66;
  color: var(--ink-2);
  max-width: 62ch;
}
.deck--basalt .lede { color: var(--on-basalt-2); }

.prose { max-width: 68ch; }
.prose h3 {
  font-size: 20px;
  margin: 38px 0 12px;
  letter-spacing: -0.012em;
}
.prose h4 {
  font-family: var(--face-text);
  font-size: 15px;
  font-weight: 600;
  margin: 26px 0 8px;
}
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 20px; }
.prose li { margin-bottom: 9px; }
.prose li::marker { color: var(--amber-600); }

/* A section head: mono index, rule, then the heading. */
.head {
  margin-bottom: 52px;
  max-width: 74ch;
}
.head__rule {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.head__rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.deck--basalt .head__rule::after { background: var(--rule-dark); }
.head__rule .tag { margin: 0; }
.head__note {
  margin-top: 18px;
  color: var(--ink-3);
  font-size: 16px;
  max-width: 66ch;
}
.deck--basalt .head__note { color: var(--on-basalt-3); }

/* ========================================================== topbar ======= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(234, 231, 225, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.topbar.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 10px 26px -24px rgba(20, 24, 29, 0.85);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { text-decoration: none; }
.wordmark__mark { width: 36px; height: 36px; flex: none; display: block; }
.wordmark__name {
  display: block;
  font-family: var(--face-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.13em;
  line-height: 1.1;
  text-transform: uppercase;
}
.wordmark__sub {
  display: block;
  font-family: var(--face-code);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 3px;
}

.nav-set {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-set a {
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.004em;
  text-decoration: none;
  position: relative;
  padding: 6px 0;
}
.nav-set a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1.5px;
  background: var(--amber-600);
  transition: right 0.26s ease;
}
.nav-set a:hover { color: var(--ink); text-decoration: none; }
.nav-set a:hover::after { right: 0; }
.nav-set a.is-current { color: var(--ink); }
.nav-set a.is-current::after { right: 0; }

/* The nav's own `a` rule is more specific than `.act`, so the button restates
   the colour and padding it would otherwise lose. */
.nav-set a.act {
  color: var(--stone-50);
  padding: 9px 17px;
}
.nav-set a.act:hover { color: #fff; }
.nav-set a.act::after { display: none; }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--rule);
  background: transparent;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform 0.24s ease, opacity 0.18s ease;
}
.nav-toggle span { top: 50%; margin-top: -0.75px; }
.nav-toggle span::before { content: ""; top: -6px; left: 0; transform: none; }
.nav-toggle span::after { content: ""; top: 6px; left: 0; transform: none; }
.nav-toggle[aria-expanded="true"] span { transform: translateX(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::before { opacity: 0; }
.nav-toggle[aria-expanded="true"] span::after { transform: rotate(-90deg); top: 0; }

/* ============================================================ act ======== */

.act {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--face-text);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 13px 24px;
  border-radius: 2px;
  border: 1px solid var(--basalt-900);
  background: var(--basalt-900);
  color: var(--stone-50);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.act:hover {
  text-decoration: none;
  background: var(--basalt-700);
  border-color: var(--basalt-700);
  color: #fff;
  transform: translateY(-1px);
}
.act--sm { padding: 9px 17px; font-size: 13.5px; }

.act--line {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.act--line:hover {
  background: transparent;
  color: var(--amber-700);
  border-color: var(--amber-600);
}

.act--amber {
  background: var(--amber-600);
  border-color: var(--amber-600);
  color: #fff;
}
.act--amber:hover { background: var(--amber-700); border-color: var(--amber-700); }

/* `.deck--basalt a` outranks `.act`, so the buttons restate their colour. */
.deck--basalt .act { color: var(--stone-50); }
.deck--basalt .act:hover { color: #fff; }
.deck--basalt .act--amber { color: #fff; }
.deck--basalt .act--line {
  color: var(--on-basalt);
  border-color: var(--rule-dark-2);
}
.deck--basalt .act--line:hover { color: var(--amber-300); border-color: var(--amber-400); }

.acts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* ========================================================== opener ======= */

.opener {
  padding: 84px 0 76px;
  border-bottom: 1px solid var(--rule);
}

.opener__body {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: 62px;
  align-items: start;
}

.opener__claim em {
  font-style: normal;
  color: var(--amber-700);
  border-bottom: 2px solid var(--amber-500);
  padding-bottom: 1px;
}

.opener__lede { margin-top: 28px; }

.opener__acts { margin-top: 34px; }

.opener__foot {
  margin-top: 30px;
  font-family: var(--face-code);
  font-size: 11.5px;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* the filed-record plate, with drawing-style corner brackets */
.plate {
  position: relative;
  background: var(--stone-50);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 32px 30px 26px;
  box-shadow: var(--shadow-plate);
}
.plate::before,
.plate::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--amber-500);
  pointer-events: none;
}
.plate::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.plate::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.plate__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 6px;
}
.plate__head .tag { margin: 0; }
.plate__stamp {
  font-family: var(--face-code);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  color: var(--amber-700);
  text-transform: uppercase;
}

/* ===================================================== ledger (dl) ======= */

.ledger { margin: 0; }
.ledger__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.ledger__row:last-child { border-bottom: 0; padding-bottom: 0; }
.ledger dt {
  font-family: var(--face-code);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 3px;
}
.ledger dd {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}
.ledger dd small {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 3px;
  line-height: 1.5;
}
.deck--basalt .ledger__row { border-color: var(--rule-dark-soft); }
.deck--basalt .ledger dt { color: var(--on-basalt-3); }
.deck--basalt .ledger dd { color: var(--on-basalt); }
.deck--basalt .ledger dd small { color: var(--on-basalt-3); }

.ledger--wide .ledger__row { grid-template-columns: 210px minmax(0, 1fr); }

/* ====================================================== index-rule ======= */

/* A four-cell fact rule directly beneath the opener. */
.index-rule {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--rule);
  background: var(--stone-100);
}
.index-rule__cell {
  padding: 26px 30px 24px;
  border-left: 1px solid var(--rule-soft);
}
.index-rule__cell:first-child { border-left: 0; }
.index-rule__k {
  display: block;
  font-family: var(--face-code);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 9px;
}
.index-rule__v {
  display: block;
  font-family: var(--face-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.25;
}

/* ======================================================= line-item ======= */

/* The site's signature device: a ruled catalogue line with a mono code
   column on the left, the substance in the middle, terms on the right. */
.lines {
  border-top: 1px solid var(--rule-strong);
}

.line-item {
  display: grid;
  grid-template-columns: var(--code-col) minmax(0, 1fr) 250px;
  gap: 40px;
  padding: 40px 0 42px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.line-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 2px;
  background: var(--amber-500);
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.line-item:hover::before,
.line-item.is-in::before { width: var(--code-col); }
.line-item:hover::before { width: 100%; }

.line-item__code {
  font-family: var(--face-code);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.9;
}
.line-item__no {
  display: block;
  font-family: var(--face-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 14px;
}
.line-item__sic { display: block; color: var(--amber-700); }

.line-item__title {
  font-size: 25px;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.line-item__body { color: var(--ink-2); }
.line-item__body p { margin-bottom: 14px; }

.line-item__meta {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink-3);
  border-left: 1px solid var(--rule);
  padding-left: 24px;
}
.line-item__meta strong {
  display: block;
  font-family: var(--face-code);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

/* a compact checklist used inside line items and prose */
.marks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.marks li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 14.5px;
  line-height: 1.58;
}
.marks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 1.5px;
  background: var(--amber-500);
}
.marks li:last-child { margin-bottom: 0; }
.deck--basalt .marks li::before { background: var(--amber-400); }

/* ========================================================== stages ======= */

/* The engagement sequence: numbered stages on a ruled stack. */
.stages { counter-reset: stage; }

.stage {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 30px;
  padding: 30px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.stage:last-child { border-bottom: 1px solid var(--rule); }

.stage__num {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  font-family: var(--face-code);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: transparent;
  transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}
.stage.is-in .stage__num {
  background: var(--basalt-900);
  border-color: var(--basalt-900);
  color: var(--amber-300);
}

.stage__title {
  font-size: 19px;
  letter-spacing: -0.014em;
  margin-bottom: 8px;
}
.stage__body { font-size: 15.5px; color: var(--ink-2); }
.stage__out {
  margin-top: 12px;
  font-family: var(--face-code);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--amber-700);
}

.deck--basalt .stage { border-color: var(--rule-dark); }
.deck--basalt .stage:last-child { border-bottom-color: var(--rule-dark); }
.deck--basalt .stage__num { border-color: var(--rule-dark-2); color: var(--on-basalt); }
.deck--basalt .stage.is-in .stage__num {
  background: var(--amber-500);
  border-color: var(--amber-500);
  color: var(--basalt-950);
}
.deck--basalt .stage__body { color: var(--on-basalt-2); }
.deck--basalt .stage__out { color: var(--amber-400); }

/* =========================================================== terms ======= */

/* Engagement formats as a specification table, not cards. */
.terms {
  border-top: 1px solid var(--rule-strong);
}
.terms__row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.6fr) 200px;
  gap: 34px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.terms__name {
  font-family: var(--face-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.terms__name small {
  display: block;
  font-family: var(--face-code);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 7px;
}
.terms__what { font-size: 15px; color: var(--ink-2); }
.terms__basis {
  font-family: var(--face-code);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--amber-700);
}

.deck--basalt .terms { border-top-color: var(--rule-dark-2); }
.deck--basalt .terms__row { border-bottom-color: var(--rule-dark); }
.deck--basalt .terms__name { color: var(--on-basalt); }
.deck--basalt .terms__name small { color: var(--on-basalt-3); }
.deck--basalt .terms__what { color: var(--on-basalt-2); }
.deck--basalt .terms__basis { color: var(--amber-400); }

/* ====================================================== assurances ======= */

.assurances {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.assurance {
  background: var(--stone-50);
  padding: 28px 26px 26px;
}
.assurance__v {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  display: block;
  margin-bottom: 12px;
}
.assurance__v span { color: var(--amber-600); }
.assurance__k {
  font-family: var(--face-code);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 10px;
}
.assurance__t { font-size: 14px; line-height: 1.58; color: var(--ink-2); }

.deck--basalt .assurances { background: var(--rule-dark); border-color: var(--rule-dark); }
.deck--basalt .assurance { background: var(--basalt-800); }
.deck--basalt .assurance__v { color: var(--on-basalt); }
.deck--basalt .assurance__v span { color: var(--amber-400); }
.deck--basalt .assurance__k { color: var(--on-basalt-3); }
.deck--basalt .assurance__t { color: var(--on-basalt-2); }

/* ============================================================ note ======= */

.note {
  border-left: 2px solid var(--amber-500);
  padding: 4px 0 4px 22px;
  font-size: 15.5px;
  color: var(--ink-2);
  max-width: 70ch;
}
.note strong { color: var(--ink); }
.deck--basalt .note { border-left-color: var(--amber-400); color: var(--on-basalt-2); }

.callout {
  background: var(--stone-50);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 26px 28px;
  position: relative;
}
.callout::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--amber-500);
  border-right: 0;
  border-bottom: 0;
}
.callout h3 {
  font-size: 17px;
  margin: 0 0 10px;
  letter-spacing: -0.012em;
}
.callout p { font-size: 15px; }

/* ======================================================== two-up ========= */

.two-up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 46px;
}
.three-up {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 62px;
  align-items: start;
}
.split--rail { grid-template-columns: 280px minmax(0, 1fr); gap: 54px; }

/* a plain ruled block used in three-up groups */
.block {
  border-top: 1px solid var(--rule-strong);
  padding-top: 20px;
}
.block__k {
  font-family: var(--face-code);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-700);
  display: block;
  margin-bottom: 12px;
}
.block h3 {
  font-size: 18px;
  letter-spacing: -0.014em;
  margin-bottom: 10px;
}
.block p { font-size: 15px; color: var(--ink-2); }
.deck--basalt .block { border-top-color: var(--rule-dark-2); }
.deck--basalt .block__k { color: var(--amber-400); }
.deck--basalt .block p { color: var(--on-basalt-2); }

/* ============================================================= qa ======== */

.qa { border-top: 1px solid var(--rule-strong); }

.qa details {
  border-bottom: 1px solid var(--rule);
}
.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--face-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.4;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before,
.qa summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  background: var(--amber-600);
  transition: transform 0.28s ease, opacity 0.2s ease;
}
.qa summary::before { width: 13px; height: 1.5px; margin-top: -0.75px; }
.qa summary::after { width: 1.5px; height: 13px; margin-top: -6.5px; margin-right: 5.75px; }
.qa details[open] summary::after { transform: rotate(90deg); opacity: 0; }
.qa summary:hover { color: var(--amber-700); }
.qa__a {
  padding: 0 60px 26px 0;
  font-size: 15.5px;
  color: var(--ink-2);
  max-width: 74ch;
}
.qa__a p { margin-bottom: 14px; }

.deck--basalt .qa { border-top-color: var(--rule-dark-2); }
.deck--basalt .qa details { border-bottom-color: var(--rule-dark); }
.deck--basalt .qa summary { color: var(--on-basalt); }
.deck--basalt .qa__a { color: var(--on-basalt-2); }

/* ========================================================= pagehead ====== */

.pagehead {
  padding: 62px 0 54px;
  border-bottom: 1px solid var(--rule);
  background: var(--stone-100);
}
.crumbs {
  font-family: var(--face-code);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 24px;
}
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--amber-700); }
.crumbs span { margin: 0 8px; color: var(--stone-400); }

/* ============================================================= toc ======= */

.toc {
  position: sticky;
  top: 100px;
  border-top: 1px solid var(--rule-strong);
  padding-top: 18px;
}
.toc__k {
  font-family: var(--face-code);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 14px;
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.toc li { counter-increment: toc; margin-bottom: 2px; }
.toc a {
  display: block;
  padding: 7px 0 7px 34px;
  font-size: 14.5px;
  color: var(--ink-2);
  position: relative;
  border-bottom: 1px solid var(--rule-soft);
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 7px;
  font-family: var(--face-code);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--stone-400);
}
.toc a:hover { color: var(--amber-700); text-decoration: none; }
.toc a:hover::before { color: var(--amber-600); }

/* ======================================================== contact ======== */

.route-list {
  border-top: 1px solid var(--rule-strong);
}
.route-list__row {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 30px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.route-list__sub {
  font-family: var(--face-code);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--amber-700);
  word-break: break-word;
}
.route-list__for { font-size: 15px; color: var(--ink-2); }

.mailplate {
  background: var(--basalt-900);
  color: var(--on-basalt-2);
  border-radius: 3px;
  padding: 38px 36px;
  position: relative;
}
/* On an already-basalt deck the panel needs to lift off its ground, otherwise
   only the corner brackets read and the surface disappears. */
.deck--basalt .mailplate {
  background: var(--basalt-800);
  border: 1px solid var(--rule-dark);
}
.mailplate::before,
.mailplate::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--amber-400);
}
.mailplate::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.mailplate::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.mailplate__k {
  font-family: var(--face-code);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-basalt-3);
  display: block;
  margin-bottom: 14px;
}
.mailplate__a {
  font-family: var(--face-display);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 29px);
  letter-spacing: -0.02em;
  color: var(--amber-300);
  word-break: break-word;
  display: inline-block;
}
.mailplate__a:hover { color: var(--amber-300); }
.mailplate__n { margin-top: 18px; font-size: 14.5px; color: var(--on-basalt-2); }

/* ========================================================= footplate ===== */

.footplate {
  background: var(--basalt-950);
  color: var(--on-basalt-2);
  padding: 68px 0 30px;
  border-top: 3px solid var(--amber-600);
}
.footplate__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--rule-dark);
}
.footplate__name {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-basalt);
  margin-bottom: 14px;
}
.footplate__t { font-size: 14.5px; color: var(--on-basalt-3); max-width: 40ch; }
.footplate__k {
  font-family: var(--face-code);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-basalt-3);
  display: block;
  margin-bottom: 16px;
}
.footplate ul { list-style: none; margin: 0; padding: 0; }
.footplate li { margin-bottom: 9px; }
.footplate li a, .footplate__t a {
  color: var(--on-basalt-2);
  font-size: 14.5px;
  text-decoration: none;
}
.footplate li a:hover, .footplate__t a:hover { color: var(--amber-300); }

.footplate__legal {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--face-code);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--on-basalt-3);
  line-height: 1.8;
}
.footplate__legal p { margin: 0; max-width: 78ch; }

/* ========================================================== reveal ======= */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.62s ease, transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================== 404 ========= */

.gone {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 90px 0;
}
.gone__code {
  font-family: var(--face-code);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber-700);
  margin-bottom: 22px;
}

/* ======================================================= responsive ====== */

@media (max-width: 1080px) {
  .line-item { grid-template-columns: 128px minmax(0, 1fr); }
  .line-item__meta {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: 18px;
  }
  .terms__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .terms__basis { grid-column: 1 / -1; }
  .split--rail { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
  :root { --code-col: 128px; }
}

@media (max-width: 960px) {
  :root { --gutter-pad: 22px; }

  .nav-toggle { display: block; }
  .nav-set {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--stone-100);
    border-bottom: 1px solid var(--rule);
    padding: 8px var(--gutter-pad) 20px;
  }
  .nav-set.is-open { display: flex; }
  .nav-set a {
    padding: 14px 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 16px;
  }
  .nav-set a::after { display: none; }
  .nav-set a.act {
    margin-top: 16px;
    padding: 13px 22px;
    justify-content: center;
    border-bottom: 0;
  }

  .opener__body { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .index-rule { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index-rule__cell { border-top: 1px solid var(--rule-soft); }
  .index-rule__cell:nth-child(-n+2) { border-top: 0; }
  .index-rule__cell:nth-child(odd) { border-left: 0; }
  .assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-up, .three-up, .split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .split--rail { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .footplate__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .deck { padding: 68px 0; }
  .opener { padding: 56px 0 54px; }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .line-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 32px 0 34px;
  }
  .line-item::before { width: 0 !important; }
  .line-item.is-in::before { width: 72px !important; }
  .line-item__no { display: inline-block; margin-right: 12px; margin-bottom: 0; font-size: 22px; }
  .line-item__code { line-height: 1.6; }
  .stage { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .terms__row, .route-list__row, .ledger__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ledger--wide .ledger__row { grid-template-columns: minmax(0, 1fr); }
  .assurances { grid-template-columns: minmax(0, 1fr); }
  .index-rule { grid-template-columns: minmax(0, 1fr); }
  .index-rule__cell { border-left: 0; }
  .index-rule__cell:nth-child(-n+2) { border-top: 1px solid var(--rule-soft); }
  .index-rule__cell:first-child { border-top: 0; }
  .footplate__top { grid-template-columns: minmax(0, 1fr); }
  .qa__a { padding-right: 0; }
  .mailplate { padding: 34px 26px; }
  .plate { padding: 28px 22px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .topbar, .nav-toggle, .act, .footplate { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .deck { padding: 18pt 0; }
  .reveal { opacity: 1; transform: none; }
}