/* ===========================================================
   Plumb — shared design system
   Astrelle Inc. One infrastructure company, multiple products.
   Analysis and Boundary share everything in this file. Their
   product demonstrations diverge in demo-analysis / demo-boundary.
   =========================================================== */

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

:root {
  --bg: #FAFAF8;
  --bg-warm: #F5F3EE;
  --text: #1a1a18;
  --text-secondary: #66625b;
  --text-tertiary: #6f6b62;
  --border: #e8e6e1;
  --border-light: #f0eeea;
  --accent: #c4850c;
  --accent-deep: #946507;
  --accent-light: #d99a22;
  --accent-bg: #fef3dc;
  --accent-bg-subtle: rgba(196, 133, 12, 0.07);
  --accent-glow: rgba(196, 133, 12, 0.15);
  --green: #2a9d5c;
  --green-bg: #e8f5ee;
  --red: #c0392b;
  --red-bg: #fde8e6;
  --blue: #2874a6;
  --card: #ffffff;
  --dark: #111110;
  --dark-secondary: #1e1d1b;

  /* Accent for text on light surfaces. Marginally deeper than --accent so
     display type clears 3:1; --accent stays the fill for marks and rules. */
  --accent-text: #bd800b;

  /* Text on --dark. Alphas chosen for AA on #111110:
     0.62 ~ 7.6:1, 0.50 ~ 5.3:1. Anything under 0.45 fails. */
  --on-dark: rgba(255, 255, 255, 0.92);
  --on-dark-secondary: rgba(255, 255, 255, 0.62);
  --on-dark-tertiary: rgba(255, 255, 255, 0.5);
  --on-dark-hairline: rgba(255, 255, 255, 0.3);
  --on-dark-rule: rgba(255, 255, 255, 0.1);

  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Radius and elevation. Generous corners and soft, offset shadows carry the
     density of the new layout; nothing here is a zero-offset halo. */
  --r-sm: 9px;
  --r: 15px;
  --r-lg: 22px;
  --r-pill: 999px;
  --lift-1: 0 1px 2px rgba(26, 26, 24, 0.04), 0 2px 8px rgba(26, 26, 24, 0.04);
  --lift-2: 0 1px 2px rgba(26, 26, 24, 0.05), 0 10px 30px rgba(26, 26, 24, 0.07);
  --lift-3: 0 2px 4px rgba(26, 26, 24, 0.06), 0 24px 60px rgba(26, 26, 24, 0.10);

  --gutter: 48px;
  --measure: 51ch;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ─── BROWSER SURFACES ───
   The focus ring, selection, caret and scrollbar ship as browser defaults
   that belong to no design system. Theme them from the palette. */
:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 2px;
}
.dark-section :focus-visible,
footer :focus-visible { outline-color: var(--accent-light); }

::selection { background: var(--accent-glow); color: var(--text); }
.dark-section ::selection { background: rgba(196, 133, 12, 0.35); color: #fff; }

input, textarea, select { caret-color: var(--accent-text); }

* { scrollbar-color: var(--border) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border: 3px solid var(--bg);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: #d8d5cf; }

/* Numerals in anything measured line up column to column. */
.tabular, time, .turn-index { font-variant-numeric: tabular-nums; }

a { color: inherit; }

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 200;
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--dark);
  border-radius: 3px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; }

/* A real visually-hidden utility. .skip-link is not one: it offsets against
   the nearest positioned ancestor, so inside the hero it lands on the copy. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── PLUMB MARK ─── */
.nav-mark { height: 28px; width: auto; flex-shrink: 0; }
.footer-mark { height: 26px; width: auto; opacity: 0.6; flex-shrink: 0; }

/* ─── NAV ─── */
/* The bar detaches from the top edge and floats as its own object, so the
   page ground runs behind and around it rather than being capped by a rule. */
nav.site-nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: calc(100% - 28px);
  max-width: 1256px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 10px 0 22px;
  height: 60px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid var(--border-light);
  border-radius: var(--r);
  box-shadow: var(--lift-1);
  transition: box-shadow 0.4s ease, background 0.4s ease, border-color 0.4s ease;
}
nav.site-nav.scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--border);
  box-shadow: var(--lift-2);
}

.nav-logo {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.nav-tagline {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  position: relative;
  top: -1px;
}
.nav-tagline::before { content: '·'; margin-right: 10px; color: var(--border); }

.nav-links { display: flex; align-items: center; gap: 36px; }

.nav-link {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--text); }
.nav-link[aria-current="page"] { color: var(--text); }

/* Products dropdown. Opens on hover and on click, closes on Escape,
   and every destination stays reachable by keyboard alone. */
.nav-products { position: relative; display: flex; align-items: center; }

.nav-products-trigger {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  background: none;
  border: 0;
  padding: 20px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.2s;
}
.nav-products-trigger:hover,
.nav-products[data-open="true"] .nav-products-trigger { color: var(--text); }
.nav-products-trigger svg {
  width: 9px; height: 9px;
  transition: transform 0.25s var(--ease-out);
}
.nav-products[data-open="true"] .nav-products-trigger svg { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% - 6px);
  left: -20px;
  min-width: 340px;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--r);
  box-shadow: var(--lift-3);
  padding: 9px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}
.nav-products[data-open="true"] .nav-menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.nav-menu a {
  display: block;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background 0.16s;
}
.nav-menu a:hover { background: var(--bg-warm); }
.nav-menu-name {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 3px;
}
.nav-menu-desc {
  display: block;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-secondary);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-deep);
  color: #fff;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 10px 10px 20px;
  border-radius: var(--r-pill);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.nav-cta .btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px;
}
.nav-cta:hover { background: #855a08; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(196, 133, 12, 0.28); }
.btn-arrow { transition: transform 0.2s var(--ease-out); }
.nav-cta:hover .btn-arrow, .btn-primary:hover .btn-arrow,
.btn-primary-dark:hover .btn-arrow { transform: translateX(3px); }

/* ─── BUTTONS ─── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-deep);
  color: #fff;
  font-size: 15.5px;
  font-weight: 500;
  padding: 14px 16px 14px 28px;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-primary .btn-arrow, .btn-primary-dark .btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 13px;
}
.btn-primary:hover {
  background: #855a08;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(196, 133, 12, 0.22);
}
.btn-primary-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-deep);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 15px 17px 15px 32px;
  border-radius: var(--r-pill);
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(196, 133, 12, 0.3);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-primary-dark:hover {
  background: #855a08;
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(196, 133, 12, 0.45);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 400;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
  transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { border-color: var(--accent-deep); }

/* Inline icon sizing. A bare <svg> with no intrinsic size falls back to
   300x150, so every icon that sits inside running text or a control is
   pinned here rather than at each call site. */
.btn-ghost svg,
.btn-primary svg,
.btn-primary-dark svg,
.nav-cta svg,
.related-strip svg,
.other-product svg { width: 15px; height: 15px; flex-shrink: 0; }
.nav-products-trigger svg { width: 9px; height: 9px; }

/* ─── LAYOUT ─── */
main { display: block; }

section {
  padding: 88px var(--gutter);
  max-width: 1200px;
  margin: 0 auto;
}
section.bleed { max-width: none; padding-left: 0; padding-right: 0; }
section.bleed > .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px var(--gutter);
}
.warm { background: var(--bg-warm); }
.dark-section { background: var(--dark); color: var(--on-dark); }

.split {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  column-gap: 88px;
  align-items: start;
}
.split > h2 {
  grid-column: 1;
  grid-row: 1 / span 99;
  max-width: none;
  font-size: clamp(28px, 3.1vw, 40px);
}
.split > *:not(h2) { grid-column: 2; }
.split > h2 + * { margin-top: 6px; }

@media (max-width: 1080px) {
  .split { display: block; }
  .split > h2 { max-width: 20ch; margin-bottom: 24px; }
}

.section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 20px;
  display: block;
}
.dark-section .section-label { color: var(--accent-light); }

h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.9vw, 50px);
  font-weight: 400;
  line-height: 1.13;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 20ch;
  text-wrap: balance;
}
.dark-section h2 { color: #fff; }
h2 em { font-style: italic; color: var(--accent-text); }
.dark-section h2 em { color: var(--accent-light); }
h2 + .lede { margin-top: 22px; }

h3 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.dark-section h3 { color: var(--on-dark); }

.lede {
  font-size: 17.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--text-secondary);
  max-width: 47ch;
}
.lede strong { color: var(--text); font-weight: 500; }
.dark-section .lede { color: var(--on-dark-secondary); }
.dark-section .lede strong { color: var(--on-dark); }

/* ─── PROSE ─── */
.prose-block { max-width: var(--measure); }
.prose-block p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.78;
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.prose-block p:last-child { margin-bottom: 0; }
.prose-block p strong { color: var(--text); font-weight: 500; }
.prose-block .lead-out { color: var(--text); font-weight: 400; }
.dark-section .prose-block .lead-out { color: var(--on-dark); }
.dark-section .prose-block p { color: var(--on-dark-secondary); }
.dark-section .prose-block p strong { color: var(--on-dark); }

.prose-list { list-style: none; margin: 20px 0; padding: 0; max-width: 54ch; }
.prose-list li {
  position: relative;
  padding-left: 20px;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-secondary);
}
.prose-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 13px;
  width: 6px; height: 1px;
  background: var(--accent);
}
.dark-section .prose-list li { color: var(--on-dark-secondary); }

/* ─── PAGE HERO ─── */
.page-hero {
  padding: 138px var(--gutter) 44px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.page-hero-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.4;
}
.page-hero > * { position: relative; }

.product-wordmark {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 26px;
}
.product-wordmark::after {
  content: '';
  height: 1px;
  width: 64px;
  background: linear-gradient(to right, var(--accent), transparent);
}

.page-headline {
  font-family: var(--serif);
  font-size: clamp(40px, 5.6vw, 74px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--text);
  max-width: 19ch;
  text-wrap: balance;
  margin-bottom: 24px;
}
.page-headline em { font-style: italic; color: var(--accent-text); }

.page-sub {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--text-secondary);
  max-width: 44ch;
}
.page-sub strong { color: var(--text); font-weight: 500; }

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 42px;
}

/* ─── THE VISITOR QUESTION ───
   Each product page opens on the question the visitor actually arrives with.
   Set in the display face so it reads as a spoken line, not a callout box. */
.visitor-q {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.visitor-q blockquote {
  font-family: var(--serif);
  font-size: clamp(22px, 2.7vw, 34px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: -0.01em;
  color: var(--text);
  padding-left: 26px;
  border-left: 1px solid var(--accent);
}
.visitor-q figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 20px;
  padding-left: 27px;
}

/* ─── STATEMENT STACK ─── */
.stack { max-width: 820px; border-top: 1px solid var(--border); }
.stack > li, .stack > div {
  list-style: none;
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 27px);
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: -0.01em;
  color: var(--text);
}
.dark-section .stack { border-top-color: var(--on-dark-rule); }
.dark-section .stack > li, .dark-section .stack > div {
  border-bottom-color: var(--on-dark-rule);
  color: var(--on-dark);
}

/* ─── NEGATIVE LIST (what Plumb does not do / replace) ─── */
.not-list { display: block; max-width: 52em; border-top: 1px solid var(--border); }
.not-list li {
  list-style: none;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 52ch;
}
.not-list li.affirm {
  border-bottom: none;
  padding-top: 24px;
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 400;
  line-height: 1.38;
  color: var(--text);
}
.dark-section .not-list { border-top-color: var(--on-dark-rule); }
.dark-section .not-list li {
  border-bottom-color: var(--on-dark-rule);
  color: var(--on-dark-secondary);
}
.dark-section .not-list li.affirm { color: var(--on-dark); }

/* ─── DIMENSION CHIPS ───
   The meaning dimensions. Flat and uncoloured on purpose: significance
   attaches to a finding, not to the dimension it fell under, so colour
   coding these would assert a ranking Plumb does not make. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  background: var(--bg-warm);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  padding: 8px 12px;
  white-space: nowrap;
}
.dark-section .chip {
  color: var(--on-dark-secondary);
  background: var(--dark-secondary);
  border-color: var(--on-dark-rule);
}

/* ─── CONSEQUENCE ─── */
.consequence {
  margin-top: 24px;
  padding: 20px 22px;
  background: var(--accent-bg-subtle);
  border-left: 1px solid var(--accent);
  border-radius: 0 4px 4px 0;
  max-width: 54ch;
}
.consequence p {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--text-secondary);
  margin: 0;
}
.consequence p strong { color: var(--text); font-weight: 500; }

.example-closer {
  margin-top: 28px;
  max-width: 58ch;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--text);
}
.example-closer strong { font-weight: 500; }

/* ─── MOTION ─── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.visible { opacity: 1; transform: none; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* plumb line scroll rail */
.plumb-rail {
  position: fixed;
  left: 26px; top: 0; bottom: 0;
  width: 1px;
  background: rgba(140, 135, 125, 0.22);
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.plumb-rail.on { opacity: 1; }
.plumb-rail-fill {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 0;
  background: linear-gradient(to bottom,
    rgba(196,133,12,0) 0%, rgba(196,133,12,0.45) 70%, var(--accent) 100%);
}
.plumb-rail-bob {
  position: absolute; left: -5px; top: 0;
  width: 11px; height: 2px;
  background: var(--accent);
  border-radius: 1px;
  will-change: transform;
}
@media (max-width: 1180px) { .plumb-rail { display: none; } }

/* ─── FOOTER ─── */
footer {
  background: var(--dark);
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 56px var(--gutter) 32px;
}
.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-brand { display: flex; align-items: center; gap: 9px; }
.footer-logo {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
}
.footer-tagline {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--on-dark-tertiary);
  letter-spacing: 0.04em;
}
.footer-tagline::before { content: '·'; margin-right: 10px; color: var(--on-dark-hairline); }

.footer-company {
  margin-top: 20px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--on-dark-tertiary);
  max-width: 30ch;
}
.footer-company a { color: var(--on-dark-secondary); text-decoration: none; border-bottom: 1px solid var(--on-dark-hairline); }
.footer-company a:hover { color: var(--on-dark); }

.footer-col h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-dark-tertiary);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--on-dark-secondary);
  text-decoration: none;
  padding: 5px 0;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--on-dark); }

.footer-base {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-copy {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--on-dark-tertiary);
  letter-spacing: 0.05em;
}

/* ─── CLOSING CTA ─── */
.close-band {
  background: var(--dark);
  padding: 118px var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.close-band::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(196, 133, 12, 0.3));
}
.close-inner { max-width: 620px; margin: 0 auto; position: relative; }
.close-band h2 {
  color: #fff;
  max-width: none;
  margin: 0 auto 22px;
  font-size: clamp(32px, 4.3vw, 54px);
}
.close-band h2 em { color: var(--accent-light); }
.close-band p {
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--on-dark-secondary);
  margin: 0 auto 44px;
  max-width: 40ch;
}
.close-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.close-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-tertiary);
}

/* ===========================================================
   PRODUCT SCREENSHOT SLOTS
   Real product captures drop in here. Until then the slot holds
   its own aspect ratio so the page composes at final proportions.
   Swap the whole .shot element for <img class="shot-img" ...>.
   =========================================================== */
.shot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 16 / 10;
  width: 100%;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--bg-warm) 0 10px,
      var(--border-light) 10px 11px);
  border: 1px solid var(--border);
  border-radius: var(--r);
  text-align: center;
  padding: 24px;
}
.shot[data-ratio="wide"] { aspect-ratio: 16 / 8; }
.shot[data-ratio="tall"] { aspect-ratio: 4 / 5; }
.shot-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.shot-desc {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 32ch;
}
.shot-file {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  padding: 4px 9px;
}
.dark-section .shot {
  background:
    repeating-linear-gradient(
      -45deg,
      var(--dark-secondary) 0 10px,
      rgba(255,255,255,0.045) 10px 11px);
  border-color: var(--on-dark-rule);
}
.dark-section .shot-label { color: var(--accent-light); }
.dark-section .shot-desc { color: var(--on-dark-secondary); }
.dark-section .shot-file {
  color: var(--on-dark-tertiary);
  background: var(--dark);
  border-color: var(--on-dark-rule);
}
.shot-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--lift-1);
}
.shot-caption {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-tertiary);
  margin-top: 14px;
  max-width: 44ch;
}
.dark-section .shot-caption { color: var(--on-dark-tertiary); }

/* ===========================================================
   ANALYSIS DEMONSTRATION
   Reading is horizontal. Source material on one side, the work the
   AI produced on the other, findings drawn between them. The produced
   work stays the primary artifact; Plumb is attached to it.
   =========================================================== */
.flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--r) var(--r) 0 0;
  box-shadow: var(--lift-1);
  overflow: hidden;
  background: var(--card);
}
.flow-node { padding: 26px 24px; background: var(--card); }
.flow-node.is-output { background: var(--bg-warm); }
.flow-kind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: block;
  margin-bottom: 12px;
}
.flow-node.is-output .flow-kind { color: var(--accent-deep); }
.flow-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 10px;
}
.flow-items { list-style: none; margin: 0; padding: 0; }
.flow-items li {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-secondary);
}
.flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  background: var(--card);
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  color: var(--border);
}
.flow-arrow svg { width: 15px; height: 15px; }

.flow-attach {
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--r) var(--r);
  background: var(--bg-warm);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.flow-attach-mark { height: 20px; width: auto; opacity: 0.8; flex-shrink: 0; }
.flow-attach-text {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary);
}
.flow-attach-text strong { color: var(--text); font-weight: 500; }

/* Findings. Held is as visible as changed: most of an output is fine,
   and a page that only ever shows failures misrepresents the product. */
.findings { display: grid; gap: 1px; background: var(--border-light);
  border: 1px solid var(--border-light); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--lift-1); }
.finding { background: var(--card); padding: 22px 24px; }
.finding-head {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.verdict {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  white-space: nowrap;
}
.verdict.held    { color: #1d6f41; background: var(--green-bg); }
.verdict.changed { color: #7a5206; background: var(--accent-bg); }
.verdict.missed  { color: #1c5a83; background: #e4f0f8; }
.verdict.invented{ color: #92291d; background: var(--red-bg); }
.finding-dim {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.trace { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 24px; }
.trace-side { min-width: 0; }
.trace-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: block;
  margin-bottom: 7px;
}
.trace-text {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--text);
}
.trace-text mark {
  background: var(--accent-bg);
  color: var(--text);
  padding: 1px 3px;
  border-radius: 2px;
  box-decoration-break: clone;
}
.trace-text mark.held { background: var(--green-bg); }
.trace-text del { text-decoration: line-through; color: var(--text-tertiary); }
.trace-note {
  grid-column: 1 / -1;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 52ch;
}
.trace-note strong { color: var(--text); font-weight: 500; }
.trace-source {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 8px;
  display: block;
}

/* ===========================================================
   BOUNDARY DEMONSTRATION
   Reading is vertical and sequential. Authority is a line the work
   either stays inside or steps past, turn after turn. Set on the dark
   ground so the two products never read as one layout relabelled.
   =========================================================== */
.grant {
  border: 1px solid var(--on-dark-rule);
  border-radius: var(--r);
  background: var(--dark-secondary);
  padding: 28px 30px;
}
.grant-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-light);
  display: block;
  margin-bottom: 14px;
}
.grant-text {
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: 400;
  line-height: 1.42;
  color: var(--on-dark);
  max-width: 30em;
}
.grant-text em { font-style: italic; color: var(--accent-light); }
.grant-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--on-dark-rule);
}
.grant-meta-item {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--on-dark-tertiary);
}
.grant-meta-item b { color: var(--on-dark-secondary); font-weight: 500; }

/* The track. A single continuous line stands for the granted authority;
   each turn sits against it, and the crossing is the one place the line
   is broken. Nothing else on the page uses this shape. */
.track { position: relative; margin-top: 34px; padding-left: 46px; }
.track::before {
  content: '';
  position: absolute;
  left: 15px; top: 6px; bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(196,133,12,0.55) 0%,
    rgba(196,133,12,0.55) var(--break, 100%),
    rgba(192,57,43,0.6) var(--break, 100%),
    rgba(192,57,43,0.25) 100%);
}
.turn { position: relative; padding: 0 0 30px; }
.turn:last-child { padding-bottom: 0; }
.turn::before {
  content: '';
  position: absolute;
  left: -34px; top: 7px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dark);
  border: 1px solid var(--accent);
}
.turn[data-state="crossed"]::before {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.16);
}
.turn-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 9px;
  flex-wrap: wrap;
}
.turn-index {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-tertiary);
}
.turn-state {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
}
.turn-state.inside {
  color: #7fd6a4;
  background: rgba(42, 157, 92, 0.14);
}
.turn-state.outside {
  color: #f0a79d;
  background: rgba(192, 57, 43, 0.18);
}
.turn-said {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--on-dark);
  max-width: 48ch;
}
.turn-said em { font-style: normal; color: var(--accent-light); }
.turn-read {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--on-dark-tertiary);
  margin-top: 9px;
  max-width: 48ch;
}
.turn-read strong { color: var(--on-dark-secondary); font-weight: 500; }

.crossing {
  margin-top: 26px;
  margin-left: 46px;
  padding: 20px 22px;
  background: rgba(192, 57, 43, 0.09);
  border-left: 1px solid var(--red);
  border-radius: 0 4px 4px 0;
  max-width: 50ch;
}
.crossing-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f0a79d;
  display: block;
  margin-bottom: 10px;
}
.crossing p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--on-dark-secondary);
  margin: 0;
}
.crossing p strong { color: var(--on-dark); font-weight: 500; }

/* Authority movement pairs: explain -> offer, recommend -> decide */
.moves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--on-dark-rule); border: 1px solid var(--on-dark-rule);
  border-radius: var(--r); overflow: hidden; }
.move { background: var(--dark); padding: 24px 22px; }
.move-pair {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  color: var(--on-dark);
  margin-bottom: 12px;
}
.move-pair .from { color: var(--on-dark-tertiary); }
.move-pair .to { color: var(--accent-light); }
.move-pair svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--on-dark-hairline); }
.move-desc {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--on-dark-secondary);
}

/* ===========================================================
   HOW PLUMB WORKS
   =========================================================== */
.relations { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border-light); border: 1px solid var(--border-light);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--lift-1); }
.relation { background: var(--card); padding: 30px 28px; }
.relation-product {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: block;
  margin-bottom: 18px;
}
.relation-pair {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 16px;
}
.relation-pair svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.relation-desc {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--text-secondary);
}

.qa { max-width: 780px; border-top: 1px solid var(--border); }
.qa-item { border-bottom: 1px solid var(--border); padding: 30px 0; }
.qa-q {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 14px;
  text-wrap: balance;
}
.qa-a {
  max-width: 52ch;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.78;
  color: var(--text-secondary);
}
.qa-a p + p { margin-top: 14px; }
.qa-a strong { color: var(--text); font-weight: 500; }

/* ===========================================================
   CONTACT
   =========================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 72px;
  align-items: start;
}
.form { display: grid; gap: 26px; }
.field { display: grid; gap: 9px; }
.field > label, .fieldset-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.field-hint {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-tertiary);
}
.field input[type="text"],
.field input[type="email"],
.field textarea {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 300;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 13px 15px;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.65; }
.field input::placeholder, .field textarea::placeholder {
  color: #94908a;
  font-weight: 300;
}
.field input:hover, .field textarea:hover { border-color: #d8d5cf; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg-subtle);
}
/* :user-invalid, not :invalid. A required field with no placeholder matches
   :invalid:not(:placeholder-shown) while still untouched, which would paint
   the form red before the visitor has typed anything. */
.field input:user-invalid,
.field textarea:user-invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}

fieldset { border: 0; display: grid; gap: 9px; }
.choices { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 3px; }
.choice { position: relative; }
.choice input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 16px;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.choice input:hover + span { border-color: #d8d5cf; }
.choice input:focus-visible + span {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}
.choice input:checked + span {
  color: var(--text);
  background: var(--accent-bg-subtle);
  border-color: var(--accent);
}

.form-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
button.btn-primary { border: 0; cursor: pointer; font-family: var(--sans); }
button.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.form-note {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-tertiary);
  max-width: 40ch;
}
.form-status {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
  padding: 14px 16px;
  border-radius: 4px;
  display: none;
}
.form-status[data-state="error"] {
  display: block;
  color: #92291d;
  background: var(--red-bg);
}
.form-status[data-state="ok"] {
  display: block;
  color: #1d6f41;
  background: var(--green-bg);
}

.contact-aside { border-left: 1px solid var(--border); padding-left: 44px; }
.contact-aside h3 { margin-bottom: 14px; }
.contact-aside + .contact-aside { margin-top: 44px; }
.direct {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.direct a {
  font-size: 16px;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
.direct a:hover { border-color: var(--accent-deep); }

/* ===========================================================
   ABOUT
   =========================================================== */
.thesis {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 24ch;
  text-wrap: balance;
}
.thesis em { font-style: italic; color: var(--accent-text); }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--border);
  max-width: 820px;
}
.fact {
  flex: 1 1 200px;
  padding: 22px 26px 22px 0;
  border-bottom: 1px solid var(--border);
}
.fact dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.fact dd { font-size: 15.5px; font-weight: 300; color: var(--text); line-height: 1.6; }
.fact dd a { color: var(--accent-deep); text-decoration: none; border-bottom: 1px solid var(--border); }
.fact dd a:hover { border-color: var(--accent-deep); }

/* ===========================================================
   CROSS-PRODUCT BAND
   The other product, once, as a full-width handoff. Deliberately not
   a second card next to a first: the visitor is on one product page
   and needs one door, not a menu.
   =========================================================== */
.other-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  background: var(--card);
  padding: 36px 38px;
  box-shadow: var(--lift-1);
}
.other-product-body { max-width: 44ch; }
.other-product-kind {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: block;
  margin-bottom: 12px;
}
.other-product h3 { font-size: 22px; margin-bottom: 10px; }
.other-product p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ─── RELATED STRIP ─── */
.related-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  padding-top: 26px;
  border-top: 1px solid var(--border-light);
  max-width: 1200px;
  margin: 0 auto;
}
.related-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.related-strip a {
  font-size: 14px;
  font-weight: 400;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.related-strip a:hover { border-color: var(--accent-deep); }

/* ─── HOLDING PAGE (index, pending its own specification) ─── */
.holding {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px var(--gutter) 100px;
  gap: 30px;
}
.holding .hero-mark { height: 52px; width: auto; }
.holding h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 5.4vw, 68px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text);
  max-width: 16ch;
  text-wrap: balance;
}
.holding h1 em { font-style: italic; color: var(--accent-text); }
.holding .page-sub { max-width: 40ch; }
.holding-doors {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
  max-width: 760px;
  width: 100%;
  margin-top: 18px;
  text-align: left;
}
.holding-door {
  flex: 1;
  padding: 26px 28px 26px 0;
  text-decoration: none;
}
.holding-door + .holding-door { padding-left: 28px; border-left: 1px solid var(--border); }
.holding-door span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: block;
  margin-bottom: 10px;
}
.holding-door strong {
  display: block;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 8px;
  transition: color 0.2s;
}
.holding-door p { font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--text-secondary); }
.holding-door:hover strong { color: var(--accent-text); }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1080px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 34px; }
  .moves { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; }

  section { padding: 76px var(--gutter); }
  section.bleed > .inner { padding: 76px var(--gutter); }
  .page-hero { padding: 132px var(--gutter) 64px; }
  .close-band { padding: 88px var(--gutter); }

  nav.site-nav { padding: 0 20px; gap: 14px; }
  .nav-tagline { display: none; }
  .nav-links { gap: 20px; }
  .nav-link, .nav-products-trigger { font-size: 13px; }
  .nav-menu { left: auto; right: -60px; min-width: 280px; }

  .flow { grid-template-columns: 1fr; }
  .flow-arrow {
    width: auto;
    height: 40px;
    border-left: 0; border-right: 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
  }
  .flow-arrow svg { transform: rotate(90deg); }

  .trace { grid-template-columns: 1fr; gap: 20px; }
  .trace-note { margin-top: 4px; }

  .relations { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .footer-base { flex-direction: column; align-items: flex-start; }
  .holding-doors { flex-direction: column; }
  .holding-door { padding: 24px 0; border-top: 1px solid var(--border); }
  .holding-door:first-child { border-top: 0; }
  .holding-door + .holding-door { padding-left: 0; border-left: 0; }
  .other-product { padding: 28px 24px; }
  .fact { flex-basis: 100%; }
}

.cta-compact, .nav-short { display: none; }

@media (max-width: 600px) {
  nav.site-nav { padding: 0 12px; }
  .nav-logo { font-size: 14px; gap: 7px; }
  .nav-mark { height: 24px; }
  .nav-links { gap: 12px; }
  .nav-link, .nav-products-trigger { font-size: 12.5px; white-space: nowrap; }
  .nav-long { display: none; }
  .nav-short { display: inline; }
  .nav-products-trigger { gap: 5px; }
  .nav-cta { font-size: 12px; padding: 9px 15px; gap: 6px; }
  .nav-cta .btn-arrow { display: none; }
  .cta-full { display: none; }
  .cta-compact { display: inline; }
  .nav-links { gap: 9px; }
  .nav-menu { right: -14px; min-width: calc(100vw - 28px); }

  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .track { padding-left: 34px; }
  .track::before { left: 10px; }
  .turn::before { left: -29px; }
  .crossing { margin-left: 34px; }
  .visitor-q blockquote { padding-left: 20px; }
  .visitor-q figcaption { padding-left: 21px; }
  .chip { font-size: 11px; padding: 7px 10px; }
}


/* ===========================================================
   REDUCED MOTION
   Entrances resolve to their finished state rather than being cancelled:
   .reveal rests at opacity 0 waiting for the observer, so removing the
   transition without restoring visibility would leave the page blank.
   Colour and focus transitions survive. They are feedback, not decoration.
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .plumb-rail { display: none; }

  .reveal, .reveal.visible,
  .page-hero > * {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-property: color, background-color, border-color,
                         outline-color, box-shadow, opacity;
    transition-duration: 0.15s;
    scroll-behavior: auto;
  }
}

@media print {
  nav.site-nav, .plumb-rail, .close-band { display: none; }
  body { background: #fff; }
  section { padding: 24px 0; }
}

/* ===========================================================
   HERO CAPTURE
   One field and one action, sitting in the hero rather than at the
   bottom of the page. It hands off to the contact page with the address
   already filled, because the useful first question is about the
   workflow, not the address.
   =========================================================== */
.hero-capture {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 480px;
  margin-top: 38px;
  padding: 7px 7px 7px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--lift-1);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hero-capture:focus-within {
  border-color: var(--accent);
  box-shadow: var(--lift-2), 0 0 0 3px var(--accent-bg-subtle);
}
.hero-capture input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 300;
  color: var(--text);
  background: none;
  border: 0;
  padding: 10px 14px;
}
.hero-capture input:focus { outline: none; }
.hero-capture input::placeholder { color: #94908a; }
.hero-capture button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  color: #fff;
  background: var(--accent-deep);
  border: 0;
  border-radius: var(--r-pill);
  padding: 11px 12px 11px 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, box-shadow 0.2s;
}
.hero-capture button:hover { background: #855a08; box-shadow: 0 6px 18px rgba(196,133,12,0.26); }
.hero-capture button .btn-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,0.18); font-size: 12px;
}
.capture-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-top: 14px;
}

/* ===========================================================
   SEGMENTED SWITCHER
   Three real states, not decoration. On Analysis it changes the kind of
   work being read; on Boundary it changes the authority being crossed.
   =========================================================== */
.switch {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  background: var(--bg-warm);
  border: 1px solid var(--border-light);
  border-radius: var(--r-pill);
}
.switch button {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  padding: 9px 17px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, background 0.25s var(--ease-out), box-shadow 0.25s;
}
.switch button:hover { color: var(--text-secondary); }
.switch button[aria-selected="true"] {
  color: var(--text);
  background: var(--card);
  box-shadow: var(--lift-1);
}
.dark-section .switch { background: var(--dark-secondary); border-color: var(--on-dark-rule); }
.dark-section .switch button { color: var(--on-dark-tertiary); }
.dark-section .switch button:hover { color: var(--on-dark-secondary); }
.dark-section .switch button[aria-selected="true"] {
  color: var(--dark);
  background: var(--accent-light);
  box-shadow: none;
}

/* ===========================================================
   PRODUCT PANEL
   The artifact stays the primary object and Plumb's findings are pinned
   over it. This is a drawn representation of the product's behaviour, not
   a screenshot: the real captures live further down each page.
   =========================================================== */
.hero-showcase > .switch,
.hero-showcase > .panel,
.hero-showcase > .capture-note {
  opacity: 0;
  animation: fade-up 0.85s var(--ease-out) forwards;
}
.hero-showcase > .switch { animation-delay: 0.08s; }
.hero-showcase > .panel { animation-delay: 0.18s; }
.hero-showcase > .capture-note { animation-delay: 0.34s; }

@media (prefers-reduced-motion: reduce) {
  .hero-showcase > .switch,
  .hero-showcase > .panel,
  .hero-showcase > .capture-note { opacity: 1; animation: none; }
}

.panel {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-3);
  overflow: hidden;
}
.panel-chrome {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 20px;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border-light);
}
.panel-dots { display: flex; gap: 6px; }
.panel-dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--border); display: block;
}
.panel-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--text-tertiary);
}
.panel-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.panel-badge svg { height: 15px; width: auto; }

.panel-body { position: relative; padding: 40px 44px 44px; }
/* The pins are absolutely placed, so the body has to reserve the height they
   occupy or the lower one is clipped by the panel's own overflow. */
@media (min-width: 1101px) {
  .panel-body { min-height: 440px; }
}

.artifact { max-width: 60ch; }
.artifact-kind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: block;
  margin-bottom: 16px;
}
.artifact h3 {
  font-family: var(--serif);
  font-size: clamp(23px, 2.4vw, 31px);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
}
.artifact p {
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 14px;
}
.artifact p:last-child { margin-bottom: 0; }

/* The two marks the panel is built to show. Held is as prominent as
   changed: an artifact where everything is flagged teaches the wrong thing. */
.mk {
  padding: 2px 5px;
  border-radius: 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.mk.changed { background: var(--accent-bg); box-shadow: inset 0 -1px 0 rgba(196,133,12,0.45); }
.mk.held    { background: var(--green-bg); box-shadow: inset 0 -1px 0 rgba(42,157,92,0.35); }
.mk.missed  { background: #e4f0f8; box-shadow: inset 0 -1px 0 rgba(40,116,166,0.35); }

/* Pinned findings. Absolute over the right gutter on wide screens, a plain
   stack underneath the artifact on small ones. */
.pin {
  position: absolute;
  right: 34px;
  width: 268px;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--r);
  box-shadow: var(--lift-2);
  padding: 15px 17px;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  animation: pin-in 0.6s var(--ease-out) forwards;
}
.pin::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 26px;
  width: 26px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border));
}
.pin::after {
  content: '';
  position: absolute;
  left: -29px;
  top: 23.5px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.pin.is-held::after { background: var(--green); }
.pin.is-outside::after { background: var(--red); }
.pin.is-missed::after { background: var(--blue); }
@keyframes pin-in { to { opacity: 1; transform: none; } }

.pin-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.pin-dim {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.pin-text {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--text-secondary);
}
.pin-text strong { color: var(--text); font-weight: 500; }

.panel-foot {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 16px 44px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-warm);
}
.panel-foot-item {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.panel-foot-item i {
  width: 7px; height: 7px; border-radius: 50%; display: block;
}
.panel-foot-item i.held { background: var(--green); }
.panel-foot-item i.changed { background: var(--accent); }
.panel-foot-item i.missed { background: var(--blue); }

/* Panel states driven by the switcher. */
.panel-state[hidden] { display: none; }

/* Dark variant for Boundary: same object, the authority ground. */
.panel.on-dark {
  background: var(--dark-secondary);
  border-color: var(--on-dark-rule);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 26px 64px rgba(0,0,0,0.45);
}
.panel.on-dark .panel-chrome {
  background: rgba(255,255,255,0.03);
  border-bottom-color: var(--on-dark-rule);
}
.panel.on-dark .panel-dots i { background: rgba(255,255,255,0.16); }
.panel.on-dark .panel-title { color: var(--on-dark-tertiary); }
.panel.on-dark .panel-badge { color: var(--accent-light); }
.panel.on-dark .artifact h3 { color: var(--on-dark); }
.panel.on-dark .artifact p { color: var(--on-dark); }
.panel.on-dark .artifact-kind { color: var(--on-dark-tertiary); }
.panel.on-dark .pin {
  background: var(--dark);
  border-color: var(--on-dark-rule);
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 14px 34px rgba(0,0,0,0.5);
}
.panel.on-dark .pin::before { background: linear-gradient(to right, transparent, var(--on-dark-hairline)); }
.panel.on-dark .pin-dim { color: var(--on-dark-tertiary); }
.panel.on-dark .pin-text { color: var(--on-dark-secondary); }
.panel.on-dark .pin-text strong { color: var(--on-dark); }
.panel.on-dark .panel-foot {
  background: rgba(255,255,255,0.03);
  border-top-color: var(--on-dark-rule);
}
.panel.on-dark .panel-foot-item { color: var(--on-dark-tertiary); }

/* Boundary's panel body is the turn track, not a document. */
.panel .track { margin-top: 0; }
.panel .grant { border: 0; background: none; padding: 0 0 26px; }
.panel .grant-text { font-size: clamp(18px, 1.9vw, 24px); }

@media (max-width: 1100px) {
  .panel-body { padding: 32px 30px 34px; }
  .artifact { max-width: none; }
  .pin {
    position: static;
    width: auto;
    margin-top: 14px;
    animation: none;
    opacity: 1;
    transform: none;
  }
  .pin::before, .pin::after { display: none; }
  .panel-foot { padding: 14px 30px; }
}
@media (max-width: 700px) {
  .hero-capture { flex-wrap: wrap; border-radius: var(--r); }
  .hero-capture input { flex-basis: 100%; }
  .hero-capture button { width: 100%; justify-content: center; }
  .switch {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .switch::-webkit-scrollbar { display: none; }
  .switch button { flex: 1 0 auto; padding: 9px 13px; font-size: 10px; }
  nav.site-nav { top: 8px; width: calc(100% - 16px); padding: 0 8px 0 14px; }
}

/* ===========================================================
   SCROLL BEHAVIOUR
   Two devices, both plain sticky positioning. No scroll hijacking and no
   smooth-scroll library: the page keeps the reader's own scroll speed and
   momentum, which is what makes the reference feel unfussy rather than slow.
   =========================================================== */

/* ─── STICKY CARD STACK ───
   Each card pins a little lower than the one before, so what stays visible
   under the incoming card is the previous card's header. The stack doubles as
   an index of what you have already read. */
.stack-cards { display: flex; flex-direction: column; gap: 22px; }

.stack-card {
  position: sticky;
  top: calc(112px + var(--i, 0) * 64px);
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  /* The upward shadow is what makes an incoming card read as lifting over the
     one beneath rather than joining it into a single panel. */
  box-shadow: 0 -10px 28px rgba(26, 26, 24, 0.055), var(--lift-2);
  padding: 30px 34px 34px;
}
.stack-card:last-child { margin-bottom: 8vh; }

.stack-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 30px;
}
.stack-card-num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-left: auto;
}
.stack-card-body { margin-top: 22px; }
.stack-card h3 { font-size: 20px; margin-bottom: 12px; }
.stack-card p {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--text-secondary);
  max-width: 54ch;
}
.stack-card p strong { color: var(--text); font-weight: 500; }
.stack-card p + p { margin-top: 13px; }

.dark-section .stack-card {
  background: var(--dark-secondary);
  border-color: var(--on-dark-rule);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 18px 44px rgba(0,0,0,0.45);
}
.dark-section .stack-card h3 { color: var(--on-dark); }
.dark-section .stack-card p { color: var(--on-dark-secondary); }
.dark-section .stack-card p strong { color: var(--on-dark); }
.dark-section .stack-card-num { color: var(--on-dark-tertiary); }

/* ─── SCROLLING SEQUENCE ───
   One column holds still while the other scrolls past it at normal speed. The
   rail is sticky and carries an accordion: the item matching whichever panel is
   crossing the middle of the viewport opens, the rest collapse to their title.
   Nothing is pinned in place and no scroll is intercepted, so the reader's own
   momentum carries them through. */
.scroller {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 0 64px;
  align-items: start;
}

.scroller-rail {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px 0 64px;
}
.scroller-rail h2 { margin-bottom: 18px; }
.scroller-rail .lede { margin-bottom: 34px; max-width: 34ch; }

.scroller-items { border-top: 1px solid var(--border); }
.dark-section .scroller-items { border-top-color: var(--on-dark-rule); }

.scroller-item { border-bottom: 1px solid var(--border); }
.dark-section .scroller-item { border-bottom-color: var(--on-dark-rule); }

.scroller-item-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 17px 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--sans);
  cursor: pointer;
  color: inherit;
}
.scroller-item-kind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: color 0.4s;
}
.scroller-item-name {
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-tertiary);
  transition: color 0.4s;
}
.scroller-item[data-active="true"] .scroller-item-kind { color: var(--accent-deep); }
.scroller-item[data-active="true"] .scroller-item-name { color: var(--text); font-weight: 500; }
.dark-section .scroller-item-name { color: var(--on-dark-tertiary); }
.dark-section .scroller-item[data-active="true"] .scroller-item-kind { color: var(--accent-light); }
.dark-section .scroller-item[data-active="true"] .scroller-item-name { color: var(--on-dark); }
.scroller-item-head:hover .scroller-item-name { color: var(--text-secondary); }
.dark-section .scroller-item-head:hover .scroller-item-name { color: var(--on-dark-secondary); }

/* grid-template-rows animates from nothing to content height, which `height:
   auto` cannot do and a max-height guess does badly. */
.scroller-item-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.5s var(--ease-out), opacity 0.35s ease;
}
.scroller-item-body > div { overflow: hidden; }
.scroller-item[data-active="true"] .scroller-item-body {
  grid-template-rows: 1fr;
  opacity: 1;
}
.scroller-item-body p {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--text-secondary);
  padding-bottom: 20px;
  max-width: 44ch;
}
.scroller-item-body p strong { color: var(--text); font-weight: 500; }
.dark-section .scroller-item-body p { color: var(--on-dark-secondary); }
.dark-section .scroller-item-body p strong { color: var(--on-dark); }

/* The moving column. Ordinary flow: it scrolls, it is not animated. */
.scroller-flow { display: flex; flex-direction: column; }
.scroller-panel {
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
}
.scroller-panel > .panel { transition: opacity 0.5s ease; }
.scroller-panel[data-active="false"] > .panel { opacity: 0.42; }

.scroller-caption {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-tertiary);
  margin-top: 16px;
  max-width: 56ch;
}
.dark-section .scroller-caption { color: var(--on-dark-tertiary); }

@media (max-width: 900px) {
  /* Two columns become one, the rail stops sticking, and every item is open.
     A sticky rail plus a scrolling column needs width the phone does not have. */
  .scroller { grid-template-columns: 1fr; gap: 0; }
  .scroller-rail {
    position: static;
    min-height: 0;
    padding: 0 0 30px;
    display: block;
  }
  .scroller-items { display: none; }
  .scroller-panel { min-height: 0; padding: 0 0 40px; }
  .scroller-panel[data-active="false"] > .panel { opacity: 1; }
  .stack-card { top: calc(84px + var(--i, 0) * 46px); padding: 24px 22px 26px; }
  .stack-card-num { display: none; }
}
}

/* Sticky pinning is disorienting for readers who ask for reduced motion, and
   a pinned track they cannot advance is worse than no pinning at all. Both
   devices unstick and every pane is simply laid out in order. */
@media (prefers-reduced-motion: reduce) {
  .stack-card { position: static; margin-bottom: 0; }
  .scroller { grid-template-columns: 1fr; }
  .scroller-rail { position: static; min-height: 0; padding: 0 0 30px; display: block; }
  .scroller-items { display: none; }
  .scroller-panel { min-height: 0; padding: 0 0 36px; }
  .scroller-panel[data-active="false"] > .panel { opacity: 1; }
  .scroller-item-body { grid-template-rows: 1fr; opacity: 1; transition: none; }
}

/* ===========================================================
   HOME — the platform-level question
   Deliberately not either product's demonstration. The homepage states the
   one question and the vocabulary; the product pages show it being answered.
   =========================================================== */
.question {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-3);
  overflow: hidden;
}
.question-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
}
.question-side { padding: 34px 38px; }
.question-side.is-out { background: var(--bg-warm); }
.question-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: block;
  margin-bottom: 14px;
}
.question-side.is-out .question-label { color: var(--accent-deep); }
.question-list { list-style: none; margin: 0; padding: 0; }
.question-list li {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--text-secondary);
}
.question-list li strong { color: var(--text); font-weight: 500; }

/* The seam. The plumb line itself, standing between the two sides. */
.question-seam {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 26px;
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
}
.question-seam svg { height: 34px; width: auto; }
.question-seam span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-deep);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.question-ask {
  padding: 30px 38px;
  border-top: 1px solid var(--border-light);
  font-family: var(--serif);
  font-size: clamp(21px, 2.3vw, 30px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--text);
}
.question-ask em { font-style: italic; color: var(--accent-text); }

.verdicts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-light);
  border-top: 1px solid var(--border-light);
}
.verdict-cell { background: var(--card); padding: 20px 22px 22px; }
.verdict-cell p {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 10px;
}

/* Business jobs. Typographic rows, not a card grid. */
.jobs { border-top: 1px solid var(--border); max-width: 900px; }
.job {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 26px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}
.job-mark {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  white-space: nowrap;
}
.job p {
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 27px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
}

@media (max-width: 900px) {
  .question-top { grid-template-columns: 1fr; }
  .question-seam {
    flex-direction: row;
    padding: 14px 0;
    border-left: 0; border-right: 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
  }
  .question-seam span { writing-mode: horizontal-tb; }
  .question-side { padding: 26px 24px; }
  .question-ask { padding: 24px; }
  .verdicts { grid-template-columns: 1fr 1fr; }
  .job { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 600px) {
  .verdicts { grid-template-columns: 1fr; }
}