/* ============================================================
   Cognitivv PM — marketing site styles
   ------------------------------------------------------------
   Loaded by the PM pages only (/, /product, /approval, /why).
   The LMS pages keep site.css; the two never meet.

   Corner semantics, borrowed from the Square System spec:
     structure is square  — nav, sections, buttons, tables, rules
     the mess is rounded  — scrap cards, sticky notes, chat bubbles
     the app is rounded   — product-preview chrome only
   The hero animates the first two into each other: as the scraps
   converge they lose their rotation AND their radius. Mess becomes
   structure, literally.
   ============================================================ */

:root {
  --nav-h: 60px;
  --topbar-h: 34px;
  --page-max: 1240px;
  --prose-max: 720px;

  /* Square motif */
  --sq: 9px;
  --sq-sm: 6px;

  --rule: 1px solid var(--line-1);
  --rule-2: 1px solid var(--line-2);
  --rule-hard: 2px solid var(--fg-1);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

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

/* Available to screen readers, invisible on screen. Used where a section
   needs a heading for document structure but the design already reads. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The sticky nav must not cover anchor targets. */
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg-cream);
  color: var(--fg-1);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Instrument Serif ships no bold face. Emphasis is italic, never faux-bold. */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.06;
  margin: 0;
}
h1 em, h2 em, h3 em, .display em {
  font-style: italic;
  color: var(--accent);
}

p { margin: 0; }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 32px;
}

.wrap-narrow { max-width: 880px; }

section { position: relative; }

.band {
  padding: 104px 0;
  border-top: var(--rule);
}
.band-tight { padding: 72px 0; }
.band-soft { background: var(--bg-cream-soft); }
.band-deep { background: var(--bg-cream-deep); }

.band-dark {
  background: var(--bg-charcoal);
  color: var(--fg-on-dark-1);
  border-top: none;
}
.band-dark h2, .band-dark h3 { color: var(--fg-on-dark-1); }
/* Cards keep their cream surface inside a dark band, so their headings
   have to keep their ink too — otherwise cream on cream. */
.band-dark .card h3 { color: var(--fg-1); }
.band-dark .lede, .band-dark p { color: var(--fg-on-dark-2); }

/* Eyebrow — the square marker promoted from the wordmark's i-dots. */
.eyebrow {
  display: flex;
  /* flex-start, not center: when the label wraps to two lines the marker has
     to stay level with the first line rather than float between them. */
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: var(--sq);
  height: var(--sq);
  margin-top: 5px;
  background: var(--accent);
  flex: none;
}
.eyebrow-center { justify-content: center; }
.band-dark .eyebrow { color: var(--accent-soft); }

.sec-head { max-width: 780px; margin-bottom: 48px; }
.sec-head h2 { text-wrap: balance; }
.sec-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head-center .eyebrow { justify-content: center; }

h2 { font-size: clamp(32px, 4.2vw, 52px); }
h3 { font-size: clamp(22px, 2.4vw, 30px); }
/* A heading that is an h2 for document structure but sits at h3 scale —
   used where a section's only heading belongs to a component. */
.guard-h { font-size: clamp(22px, 2.4vw, 30px); }

.lede {
  font-size: 19px;
  line-height: 1.62;
  color: var(--fg-2);
  margin-top: 20px;
}
.lede-sm { font-size: 17px; }

.note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-3);
}

/* A hairline with a square node on it — the Deco touch, used sparingly. */
.rule-node {
  position: relative;
  height: 1px;
  background: var(--line-1);
  margin: 56px 0;
}
.rule-node::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--sq);
  height: var(--sq);
  background: var(--accent);
  transform: translateY(-50%);
}

/* ------------------------------------------------------------
   Buttons — structure, so square
   ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s var(--ease-out),
              color .16s var(--ease-out),
              border-color .16s var(--ease-out),
              transform .16s var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }

.btn-ghost {
  background: var(--bg-cream);
  color: var(--fg-1);
  border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--fg-1); background: rgba(42, 38, 34, 0.04); }

.btn-on-dark {
  background: transparent;
  color: var(--fg-on-dark-1);
  border-color: var(--line-on-dark-2);
}
.btn-on-dark:hover { border-color: var(--fg-on-dark-1); background: rgba(250, 246, 239, 0.06); }

.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-lg { padding: 16px 30px; font-size: 16px; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* ------------------------------------------------------------
   Topbar + nav
   ------------------------------------------------------------ */

.topbar {
  height: var(--topbar-h);
  background: var(--bg-charcoal);
  color: var(--fg-on-dark-2);
  display: flex;
  align-items: center;
}
.topbar .wrap {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
}
.topbar a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--fg-on-dark-2);
}
.topbar a:hover { color: var(--accent-soft); }

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  /* Opaque on purpose. At 92% the dark bands ("Where this goes", the
     footer lead-in) read straight through the bar as ghosted white text,
     and a backdrop blur over a flat fill buys nothing to pay for it. */
  background: var(--bg-cream);
  border-bottom: var(--rule);
}
.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-logo { flex: none; display: flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 26px; width: auto; }
.nav-mark {
  margin-left: 10px;
  padding-left: 10px;
  border-left: var(--rule-2);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-press);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}
/* Direct children only: the mega panel lives inside .nav-links and its
   links must not inherit the top-level bar's type and underline. */
.nav-links > a {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nav-links > a:hover,
.nav-links > a[aria-current="page"] {
  color: var(--fg-1);
  border-bottom-color: var(--accent);
}

.nav-actions { display: flex; align-items: center; gap: 10px; }

.nav-burger {
  display: none;
  margin-left: auto;
  padding: 8px;
  background: none;
  border: 1px solid var(--line-2);
  color: var(--fg-1);
  cursor: pointer;
}

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0 20px;
  background: var(--bg-cream);
  border-bottom: var(--rule);
  box-shadow: 0 14px 24px -18px rgba(42, 38, 34, 0.45);
}
.nav-mobile.open { display: flex; }
/* The drawer's own items are styled in components.css (.nav-m-*). Only the
   CTAs at its foot are plain children here. */
.nav-mobile > .btn { margin-top: 10px; }

/* ------------------------------------------------------------
   HERO — chaos to order
   ------------------------------------------------------------
   Resting state is the ORGANISED state. Without JS (or with
   reduced motion) the scraps sit in a tidy grid and every word
   is on screen. JS scatters them on load; scroll un-scatters.
   ------------------------------------------------------------ */

.chaos { border-top: none; }

/* The runway only exists once pm.js has actually built the timeline,
   which is when it adds `.scrub`. If anime.js fails to load we never
   get here, and the hero keeps its plain resting layout. */
.scrub .chaos { height: 320vh; }

.chaos-sticky {
  padding: 56px 0 72px;
}
.scrub .chaos-sticky {
  position: sticky;
  top: var(--nav-h);
  /* svh, not vh: on a phone 100vh includes the browser chrome that is
     hiding, and the bottom of the grid ends up under it. */
  height: calc(100svh - var(--nav-h));
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

/* Centered copy, with the grid the scraps file into sitting directly
   beneath it. One column, so the assembly happens below the headline
   rather than beside it. */
.chaos-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.chaos-copy {
  position: relative;
  z-index: 3;
  max-width: 940px;
  text-align: center;
}
/* Everything in the hero has to fit one sticky viewport, so its vertical
   rhythm is height-aware: at 1280x720 the fixed spacing overflowed by 8px. */
.chaos-copy .eyebrow { margin-bottom: clamp(10px, 2vh, 18px); }

.chaos-h1 {
  /* Height-aware as well as width-aware: on a short laptop screen the
     headline has to shrink or the grid below it gets clipped. */
  font-size: clamp(32px, min(5vw, 7.2vh), 64px);
  letter-spacing: -0.022em;
}
.chaos-h1 .l2 { display: block; font-style: italic; color: var(--accent); }

.chaos-sub {
  margin: clamp(12px, 2.4vh, 22px) auto 0;
  max-width: 34em;
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-2);
}

.chaos-copy .btn-row { justify-content: center; margin-top: clamp(16px, 3vh, 28px); }

/* ---- the stage ---- */

.chaos-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  margin-top: clamp(14px, 2.8vh, 26px);
}

.scraps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.4vh, 12px);
}

/* A scrap. Its resting state is FILED: square, square-on, aligned.
   pm.js throws it out to a rounded, rotated, scattered position and
   scroll walks it back. Mess becomes structure in the CSS itself. */
.scrap {
  position: relative;
  background: var(--bg-cream-soft);
  border: var(--rule);
  border-left: 4px solid var(--fg-4);
  border-radius: 0;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  transform-origin: 50% 50%;
  will-change: transform;
}
.scrap-src {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.scrap-body {
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg-1);
}
.scrap-body b { font-weight: 600; color: var(--danger); }

.scrap-slack    { border-left-color: #7c5cbf; }
.scrap-cal      { border-left-color: var(--warning); }
.scrap-drive    { border-left-color: var(--danger); }
.scrap-mail     { border-left-color: #4d7ba6; }
.scrap-ticket   { border-left-color: var(--info); }
.scrap-doc      { border-left-color: var(--success); }
.scrap-note {
  background: #f6e6b8;
  border-left-color: var(--warning);
  color: #5a4d2a;
}
.scrap-note .scrap-src { color: #8a7742; }
.scrap-note .scrap-body { color: #5a4d2a; }
.scrap-call     { border-left-color: var(--accent); }

.scraps-caption {
  margin-top: 20px;
  padding-top: 16px;
  border-top: var(--rule);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--fg-3);
}
.scraps-caption b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  color: var(--fg-1);
}

/* Scroll cue, JS only — it points at a scrub that only exists with JS. */
.scroll-cue { display: none; }
.scrub .scroll-cue {
  display: flex;
  margin-top: clamp(14px, 3.2vh, 30px);
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  z-index: 4;
}
.scroll-cue i {
  width: var(--sq-sm);
  height: var(--sq-sm);
  background: var(--accent);
  animation: cue 1.8s var(--ease-in-out) infinite;
}
@keyframes cue {
  0%, 100% { transform: translateY(-3px); opacity: .4; }
  50%      { transform: translateY(3px);  opacity: 1; }
}

/* ------------------------------------------------------------
   The decision record artifact
   ------------------------------------------------------------ */

.record {
  background: var(--bg-cream-soft);
  border: var(--rule-hard);
  border-radius: 0;
  padding: 30px 32px;
  box-shadow: var(--shadow-lg);
}
.record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: var(--rule-hard);
  margin-bottom: 22px;
}
.record-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.record-id {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
}
.record-row { padding: 14px 0; border-bottom: var(--rule); }
.record-row:last-child { border-bottom: none; padding-bottom: 0; }
.record-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.record-value { font-size: 15px; line-height: 1.55; color: var(--fg-1); }

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--success-tint);
  color: #46612f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.stamp::before {
  content: "";
  width: var(--sq-sm);
  height: var(--sq-sm);
  background: var(--success);
}

/* ------------------------------------------------------------
   THE FLOW — sticky app window + scrolling chapters
   ------------------------------------------------------------ */

.flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: start;
}

.chapters { display: flex; flex-direction: column; }

.chapter {
  padding: 40px 0;
  border-bottom: var(--rule);
}
.chapter:last-child { border-bottom: none; }
.js .chapter {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: none;
  opacity: .34;
  transition: opacity .45s var(--ease-out);
}
.js .chapter.is-active { opacity: 1; }

.chapter-num {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-press);
  margin-bottom: 16px;
}
.chapter-num::before {
  content: "";
  width: var(--sq);
  height: var(--sq);
  background: var(--accent);
  flex: none;
}
.chapter h3 { font-size: clamp(24px, 2.6vw, 34px); }
.chapter p:not([class]) { margin-top: 14px; color: var(--fg-2); font-size: 16.5px; line-height: 1.62; }
.chapter .refuses {
  margin-top: 18px;
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-1);
}
.chapter .refuses b { font-weight: 700; }

/* The app window — rounded, because rounded is the app. */
.appwin-col { position: relative; }
.js .appwin-col {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
}

.appwin {
  background: var(--bg-cream-soft);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.appwin-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  height: 44px;
  background: var(--bg-cream-deep);
  border-bottom: var(--rule);
}
.appwin-dots { display: flex; gap: 6px; }
.appwin-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d8cdba; display: block; }
.appwin-url {
  flex: 1;
  height: 26px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--bg-cream);
  border: var(--rule);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
}
.appwin-url b { color: var(--fg-1); font-weight: 600; }

.appwin-body { position: relative; padding: 22px 24px 24px; }
.js .appwin-body { height: 600px; }

/* Progress rail — seven segments, one per screen. */
.rail { display: flex; gap: 5px; margin-bottom: 22px; }
.rail i {
  flex: 1;
  height: 5px;
  background: var(--bg-cream-deep);
  display: block;
}
.rail i.done { background: var(--accent-soft); }
.rail i.cur  { background: var(--accent); }

.screens { position: relative; }
.js .screens { height: calc(100% - 27px); }

.screen { padding-bottom: 40px; }
.screen:last-child { padding-bottom: 0; }
.js .screen {
  position: absolute;
  inset: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .4s var(--ease-out),
              transform .4s var(--ease-out),
              visibility 0s linear .4s;
}
.js .screen.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .4s var(--ease-out),
              transform .4s var(--ease-out),
              visibility 0s;
}

.screen-step {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.screen-h {
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 10px 0 8px;
}
.screen-b { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin-bottom: 18px; }

.greeting {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 12px;
  background: var(--accent-tint);
  color: var(--accent-press);
  font-size: 12.5px;
  font-weight: 600;
}

/* ---- mock form controls (the product's interface language) ---- */

.mock-area {
  border: var(--rule-2);
  border-radius: 10px;
  background: var(--bg-cream);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-1);
  min-height: 104px;
}
.mock-area.is-placeholder { color: var(--fg-4); }
.mock-count {
  margin-top: 8px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-3);
}

.mock-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 11px 0;
  border-bottom: var(--rule);
}
.mock-row:last-of-type { border-bottom: none; }
.mock-row-label { font-size: 13.5px; font-weight: 600; }
.mock-row-help { font-size: 11.5px; color: var(--fg-3); font-weight: 400; display: block; margin-top: 2px; }

.seg {
  display: flex;
  border: var(--rule-2);
  border-radius: 8px;
  overflow: hidden;
}
.seg span {
  flex: 1;
  padding: 8px 6px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-2);
  border-right: var(--rule);
}
.seg span:last-child { border-right: none; }
.seg span.on { background: var(--accent); color: #fff; font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 7px 13px;
  border: var(--rule-2);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-2);
}
.chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.teams { display: flex; flex-direction: column; }
/* The tallest screen in the window. Tighter here, roomy in the safeguard panel. */
.screen .team { padding: 7px 0; }
.team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8.5px 0;
  border-bottom: var(--rule);
  font-size: 13px;
}
.team:last-child { border-bottom: none; }
.verdict {
  flex: none;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.verdict.yes { background: var(--danger-tint); color: var(--danger); }
.verdict.no  { background: var(--bg-cream-deep); color: var(--fg-3); }
.verdict.open { background: transparent; border: 1px dashed var(--line-2); color: var(--fg-4); }

.banner {
  padding: 13px 15px;
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  font-size: 13.5px;
  line-height: 1.5;
}
.banner.warn { border-left-color: var(--warning); background: var(--warning-tint); }
.banner.stop { border-left-color: var(--danger); background: var(--danger-tint); }

.checkrow {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  font-size: 13px;
  line-height: 1.5;
}
.checkrow i {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border: 1.5px solid var(--line-strong);
  background: transparent;
}
.checkrow.on i {
  background: var(--accent);
  border-color: var(--accent);
}

.mock-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: var(--rule);
}
.mock-btn {
  padding: 9px 18px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.mock-btn.off { background: var(--bg-cream-deep); color: var(--fg-4); }
.mock-btn.done { background: var(--success); }
.mock-help { font-size: 11.5px; color: var(--fg-3); }

.outcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.outcard {
  border: var(--rule-2);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--bg-cream);
}
.outcard h4 {
  margin: 0 0 4px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
}
.outcard p { font-size: 11.5px; line-height: 1.45; color: var(--fg-3); }

/* ------------------------------------------------------------
   Safeguards
   ------------------------------------------------------------ */

.guards { display: grid; gap: 0; }
.guard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 64px 0;
  border-top: var(--rule);
}
.guard:first-child { border-top: none; padding-top: 0; }
.guard-flip .guard-media { order: -1; }
.guard-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-press);
  margin-bottom: 14px;
}
.guard-body p:not([class]) { margin-top: 16px; color: var(--fg-2); font-size: 16.5px; line-height: 1.62; }

.panel {
  background: var(--bg-cream-soft);
  border: var(--rule-2);
  padding: 26px 28px;
  box-shadow: var(--shadow-md);
}
.panel-title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 18px;
}

/* ---- tier calculator ---- */

.tier-controls { display: flex; flex-direction: column; gap: 20px; }
.tier-field label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 8px;
}
.tier-field .val {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-press);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--bg-cream-deep);
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: var(--accent);
  border: 2px solid var(--bg-cream-soft);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: var(--accent);
  border: 2px solid var(--bg-cream-soft);
  cursor: pointer;
}

.tier-seg {
  display: flex;
  border: var(--rule-2);
}
.tier-seg button {
  flex: 1;
  padding: 9px 6px;
  background: transparent;
  border: none;
  border-right: var(--rule);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
}
.tier-seg button:last-child { border-right: none; }
.tier-seg button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.tier-out {
  margin-top: 26px;
  padding-top: 22px;
  border-top: var(--rule-hard);
}
.tier-name {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.1;
  margin-bottom: 10px;
}
.tier-name[data-tier="unknown"] { color: var(--danger); }
.tier-name[data-tier="executive"] { color: var(--accent-press); }
.tier-banner {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-2);
}
.tier-rules {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 13.5px;
}
.tier-rules th, .tier-rules td {
  text-align: left;
  padding: 10px 12px 10px 0;
  border-bottom: var(--rule);
  vertical-align: top;
}
.tier-rules th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.tier-rules td:first-child { font-weight: 600; white-space: nowrap; }
.js .tier-static { display: none; }
.tier-live { display: none; }
.js .tier-live { display: block; }

/* ------------------------------------------------------------
   Cards / grids used across sections
   ------------------------------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--line-1);
  border: var(--rule);
}
/* Wherever auto-fit gives two columns, a set of three cards leaves an empty
   cell painted in the grid's own line colour. The odd card out takes the
   full row instead. The floor used to be 561px and the hole survived at 550
   and 560 — measured by stepping the viewport 320 to 1440 in 10px. Below two
   columns `grid-column: 1 / -1` is a no-op, so there is no floor now. */
@media (max-width: 830px) {
  .cards > .card:nth-child(3):last-child,
  .cards > .card:nth-child(4):nth-last-child(1):nth-child(odd) { grid-column: 1 / -1; }
}
.card {
  background: var(--bg-cream);
  padding: 28px 26px;
}
.band-soft .card { background: var(--bg-cream-soft); }
/* A span is inline, so width/height would be ignored — this has to be a
   block or the marker collapses to a sliver of its own border. */
.card-mark {
  display: block;
  width: 22px;
  height: 22px;
  background: var(--accent);
  margin-bottom: 18px;
}
.card-mark-o {
  background: transparent;
  border: 2px solid var(--accent);
}
.card h3 { font-family: var(--font-ui); font-size: 17px; font-weight: 700; letter-spacing: 0; }
.card p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.card .mono-tag {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-press);
}

/* Two-column "is / is not" */
.contrast {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-2);
  border: var(--rule-2);
}
.contrast > div { background: var(--bg-cream); padding: 30px 28px; }
.contrast h3 {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.contrast .is h3 { color: var(--success); }
.contrast .isnt h3 { color: var(--danger); }
.contrast ul { margin: 0; padding: 0; list-style: none; }
.contrast li {
  position: relative;
  padding: 11px 0 11px 24px;
  border-bottom: var(--rule);
  font-size: 15px;
  line-height: 1.55;
}
.contrast li:last-child { border-bottom: none; }
.contrast li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: var(--sq-sm);
  height: var(--sq-sm);
}
.contrast .is li::before { background: var(--success); }
.contrast .isnt li::before { background: transparent; border: 1.5px solid var(--danger); }

/* Roadmap */
.roadmap { border-top: var(--rule-on-dark, 1px solid rgba(250,246,239,0.14)); }
.stage-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(250, 246, 239, 0.14);
  align-items: baseline;
}
.stage-row:last-child { border-bottom: none; }
/* A roadmap marker. Sentence case and the UI face, not shouting monospace:
   it says where a row sits in a sequence, it is not a status badge. */
.stage-tag {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--accent-soft);
}
.stage-row h3 {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--fg-on-dark-1);
}
.stage-row p { font-size: 15px; line-height: 1.6; color: var(--fg-on-dark-2); }
.stage-row.now .stage-tag { color: var(--accent); }

/* Trust strip */
.trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  padding: 22px 0;
  border-top: var(--rule);
  border-bottom: var(--rule);
  font-size: 13px;
  color: var(--fg-3);
}
.trust b {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--fg-1);
}
.trust .sep { width: 1px; height: 16px; background: var(--line-2); }

/* ------------------------------------------------------------
   Prose (subpages)
   ------------------------------------------------------------ */

.prose { max-width: var(--prose-max); }
.prose h2 { margin-top: 56px; font-size: clamp(28px, 3.4vw, 40px); }
.prose h3 {
  margin-top: 36px;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}
.prose p { margin-top: 16px; font-size: 17px; line-height: 1.68; color: var(--fg-2); }
.prose p strong { color: var(--fg-1); font-weight: 600; }
.prose ul { margin: 16px 0 0; padding-left: 0; list-style: none; }
.prose li {
  position: relative;
  padding: 8px 0 8px 22px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--fg-2);
}
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: var(--sq-sm);
  height: var(--sq-sm);
  background: var(--accent);
}
.prose blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.4;
  color: var(--fg-1);
}
.prose blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-style: normal;
  color: var(--fg-3);
}

.page-head { padding: 72px 0 56px; border-bottom: var(--rule); }
.page-head h1 { font-size: clamp(38px, 5.6vw, 66px); max-width: 16em; }
.page-head .lede { max-width: 34em; }

/* Screen spec blocks on /product */
.spec {
  border-top: var(--rule);
  padding: 44px 0;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 36px;
}
.spec-n {
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 1;
  color: var(--accent);
}
.spec h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 6px; }
.spec .who {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.who-human { background: var(--fg-1); color: var(--bg-cream-soft); }
.who-ai { background: var(--accent); color: #fff; }
.who-combo { background: var(--accent-tint); color: var(--accent-press); }
.spec-quote {
  margin: 18px 0;
  padding: 16px 18px;
  background: var(--bg-cream-soft);
  border: var(--rule);
  font-size: 15px;
  line-height: 1.55;
}
.spec-quote .q-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}

/* ------------------------------------------------------------
   Final CTA + footer
   ------------------------------------------------------------ */

.cta { padding: 108px 0; text-align: center; }
.cta h2 { font-size: clamp(36px, 5vw, 62px); max-width: 16em; margin: 0 auto; }
.cta .lede { max-width: 34em; margin-left: auto; margin-right: auto; }
.cta .btn-row { justify-content: center; }

/* The footer lives in design_system/footer.css now: one component, one
   markup, both stylesheet families. See the note at the top of that file. */
}

/* Short viewports: the hero still has to fit one screen. The cue is the
   first thing to go — it's decoration, and the grid it points at is the
   thing that must stay whole. */
@media (max-height: 700px) {
  .scrap { padding: 10px 12px; }
}
@media (max-height: 660px) {
  .scrub .scroll-cue { display: none; }
}

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

@media (max-width: 1080px) {
  .flow-grid { gap: 40px; }
  .guard { gap: 36px; }
}

@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  .band { padding: 72px 0; }

  /* The burger may hide the map; it must not hide the ask. The primary
     CTA stays on the bar at every width — only "Sign in" moves inside. */
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
  .nav-actions .btn-ghost { display: none; }
  .nav-actions .btn-sm { padding: 11px 16px; font-size: 14px; }
  /* Same button twice, an inch apart — the bar copy is the one that stays. */
  .nav-mobile .btn-primary { display: none; }
  .nav-burger { display: block; margin-left: 0; }

  /* The scrub is no longer switched off by width. pm.js measures whether
     the copy and the grid fit one viewport with the real fonts loaded and
     only then adds .scrub; on a phone that doesn't fit, .scrub never lands
     and the section reads top to bottom with no runway. A CSS override
     here used to force position: static while a later rule still grew the
     runway to 240vh — a 1,200px blank gap on every phone. */
  .chaos-stage { margin-top: 32px; }
  .scraps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .flow-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .js .appwin-col { position: static; }
  .js .appwin-body { height: auto; }
  .js .screens { height: auto; }
  .js .screen {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding-bottom: 36px;
    border-bottom: var(--rule);
    margin-bottom: 24px;
  }
  .js .screen:last-child { border-bottom: none; margin-bottom: 0; }
  .js .chapter {
    min-height: 0;
    opacity: 1;
    padding: 28px 0;
    border-bottom: var(--rule);
  }
  .rail { display: none; }

  .guard,
  .guard-flip .guard-media { grid-template-columns: minmax(0, 1fr); order: 0; }
  .guard { gap: 28px; padding: 44px 0; }

  .contrast { grid-template-columns: minmax(0, 1fr); }
  .stage-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .spec { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .spec-n { font-size: 34px; }
  .outcards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  /* Two compact columns, so the whole grid fits a phone viewport under the
     copy and the scrub can run. One column was taller than the screen. */
  .scraps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .scrap { padding: 9px 10px; border-left-width: 3px; }
  .scrap-src { font-size: 9.5px; margin-bottom: 3px; }
  .scrap-body { font-size: 12px; line-height: 1.35; }
  .scraps-caption { font-size: 12px; }
  .scrub .chaos-copy .eyebrow { margin-bottom: 8px; }
  .scrub .chaos-h1 { font-size: clamp(24px, 6.4vw, 30px); }
  .scrub .chaos-sub { font-size: 14px; margin-top: 8px; }
  .scrub .chaos-stage { margin-top: 16px; }
  /* Outranks the desktop clearance rule (.chaos-sec .chaos-stage, later in
     the file) that opened a ~100px gap between copy and grid on phones. */
  .scrub .chaos-sec .chaos-stage { margin-top: 12px; }
  /* Less thumb: the pinned stretch is the runway minus the box, and 240vh
     of section on a phone was ~1,240px of scrolling for one effect. */
  .scrub .chaos { height: 200vh; }
  .scrub .chaos.chaos-sec { height: 170vh; }
  .scrub .chaos-copy .btn-row { margin-top: 12px; }
  .mock-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .record { padding: 22px 20px; }
}

/* ------------------------------------------------------------
   Reduced motion — the organised resting state, no scrub at all
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .scrub .chaos { height: auto; }
  .scrub .chaos-sticky {
    position: static;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 56px 0 72px;
  }
  .scrub .scroll-cue { display: none; }
  .js .chapter { opacity: 1; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   THE THREAD — one question, moving through three places
   ------------------------------------------------------------
   The section's claim is that these are three shapes of the same
   question. So rather than three static cards, one is lit at a
   time and the light steps along them, in the hue of the product
   that answers each. Pointing at a card takes the light and
   holds it. With no JS, or under reduced motion, every card sits
   at full strength and nothing moves — which is the same content,
   just without the argument being acted out.
   ============================================================ */

.cards-thread .card {
  --c: var(--accent);
  position: relative;
  transition: background var(--dur-3) ease;
}
.cards-thread .card[data-accent="bug"] { --c: var(--p-bug); }
.cards-thread .card[data-accent="pm"]  { --c: var(--p-pm); }
.cards-thread .card[data-accent="lms"] { --c: var(--p-lms); }

/* The marker is the product's square. Quiet until the light reaches it. */
.cards-thread .card-mark {
  background: var(--c);
  opacity: 0.3;
  transform: scale(0.82);
  transform-origin: 0 50%;
  transition: opacity var(--dur-3) ease, transform var(--dur-3) cubic-bezier(0.22, 1, 0.36, 1);
}
/* A hairline of the hue along the top edge, drawn on as the card lights. */
.cards-thread .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cards-thread .card h3,
.cards-thread .card p { transition: color var(--dur-3) ease; }
.cards-thread .card p { color: var(--fg-3); }

/* Lit. JS sets .is-lit; :hover and :focus-within take it directly, so the
   card responds to a pointer even before the timer comes round. */
.cards-thread .card.is-lit,
.cards-thread .card:hover,
.cards-thread .card:focus-within { background: var(--bg-cream-soft); }
.cards-thread .card.is-lit .card-mark,
.cards-thread .card:hover .card-mark,
.cards-thread .card:focus-within .card-mark { opacity: 1; transform: scale(1); }
.cards-thread .card.is-lit::before,
.cards-thread .card:hover::before,
.cards-thread .card:focus-within::before { transform: scaleX(1); }
.cards-thread .card.is-lit p,
.cards-thread .card:hover p,
.cards-thread .card:focus-within p { color: var(--fg-2); }

/* No script, no cycle: every card reads as lit so nothing looks broken. */
html:not(.thread-js) .cards-thread .card-mark { opacity: 1; transform: scale(1); }
html:not(.thread-js) .cards-thread .card::before { transform: scaleX(1); }
html:not(.thread-js) .cards-thread .card p { color: var(--fg-2); }

@media (prefers-reduced-motion: reduce) {
  .cards-thread .card,
  .cards-thread .card-mark,
  .cards-thread .card::before,
  .cards-thread .card h3,
  .cards-thread .card p { transition: none; }
  .cards-thread .card-mark { opacity: 1; transform: scale(1); }
  .cards-thread .card::before { transform: scaleX(1); }
  .cards-thread .card p { color: var(--fg-2); }
}

/* ============================================================
   PRODUCT PLATES  (homepage "Three cuts")
   ------------------------------------------------------------
   Three tall tiles. The top of each is a field of the product's
   own hue with an artifact of the product sitting in it — a real
   screenshot where we have one, an honest HTML mock where we
   don't. The artifacts are the memorable thing; the copy under
   them is one sentence and a link, and stays quiet.
   ============================================================ */

.prods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.prod {
  --c: var(--accent);
  --c-ink: var(--accent-press);
  --c-tint: var(--accent-tint);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-cream-soft);
  border: 1px solid var(--line-1);
}
.prod[data-accent="bug"] { --c: var(--p-bug); --c-ink: var(--p-bug-ink); --c-tint: var(--p-bug-tint); }
.prod[data-accent="pm"]  { --c: var(--p-pm);  --c-ink: var(--p-pm-ink);  --c-tint: var(--p-pm-tint); }
.prod[data-accent="lms"] { --c: var(--p-lms); --c-ink: var(--p-lms-ink); --c-tint: var(--p-lms-tint); }

/* The colour field. The artifact is anchored top-left with a little air
   and allowed to run off the right and bottom edges, so it reads as a
   window onto the product rather than a thumbnail centred in a frame. */
.prod-art {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3.1;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 18% 0%, color-mix(in srgb, var(--c) 78%, white) 0%, transparent 55%),
    linear-gradient(165deg, var(--c) 0%, var(--c-ink) 100%);
}
.prod-shot {
  position: absolute;
  left: 16%;
  top: 19%;
  width: 118%;
  transform-origin: 0 0;
  transform: scale(0.7);
  box-shadow: 0 24px 60px -18px rgba(26, 24, 22, 0.55);
  pointer-events: none;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 640ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* The moving part. Pointing at a plate slides its artifact up and toward
   you, as if you had picked the sheet up off the desk to read it: more of
   the record comes into the window and the shadow deepens under it. The
   plate itself does not move, so the grid stays still. */
.prod:hover .prod-shot,
.prod:focus-within .prod-shot {
  transform: scale(0.74) translate(-5%, -7%);
  box-shadow: 0 34px 70px -16px rgba(26, 24, 22, 0.62);
}
.prod:hover .prod-shot-img,
.prod:focus-within .prod-shot-img { transform: scale(0.84) translate(-4%, -6%); }

/* A square from the wordmark's i-dots sits in the plate's top-right corner
   and blinks, slowly and out of step across the three plates. It is the
   one non-user-triggered motion on the page: a cursor on the product,
   waiting for a person. */
.prod-art::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 11px;
  height: 11px;
  background: var(--bg-cream-soft);
  opacity: 0.92;
  animation: prod-blink 2.8s steps(1, end) infinite;
}
.prod[data-accent="pm"]  .prod-art::after { animation-delay: -0.9s; }
.prod[data-accent="lms"] .prod-art::after { animation-delay: -1.9s; }
/* @keyframes prod-blink lives in components.css, next to the mega card
   that shares it. */
@media (prefers-reduced-motion: reduce) {
  .prod-shot, .prod-shot-img { transition: none; }
  .prod:hover .prod-shot, .prod:hover .prod-shot-img { transform: none; }
  .prod-art::after { animation: none; }
}
/* The mocks reuse their real page styles; only the geometry changes here. */
.prod-shot.panel  { padding: 20px 22px; border: none; }
.prod-shot.record { padding: 22px 24px; border: none; }
.prod-shot .team { padding: 8px 0; font-size: 13px; }
.prod-shot .banner { font-size: 12.5px; }
.prod-shot .record-row { padding: 11px 0; }
.prod-shot .record-value { font-size: 14px; }
.prod-shot .stamp { margin-left: 8px; vertical-align: middle; }
.prod-shot-img {
  width: 112%;
  height: auto;
  border-radius: 8px;
  transform: scale(0.8);
}

.prod-body { padding: 24px 26px 26px; }
.prod-body h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.1;
}
.prod-body p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.prod-go {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c) 45%, transparent);
  text-underline-offset: 4px;
}
.prod-go:hover { text-decoration-color: var(--c); }

/* --- Kept for later, not used on the site (founder, 2026-09-17) ---
   A product status line: sentence case, a dot in the product's hue.
   "In build" / "Running with pilot teams" / "Live". Drop it back in with
   <span class="prod-status">Live</span> above the h3 when there is a
   status worth stating. */
.prod-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-ink);
}
.prod-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
}

/* ============================================================
   STRIPES — the three-panel portrait band (about page)
   ============================================================ */

.stripes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: var(--line-2);
  border: var(--rule);
}
.stripe {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(320px, 46vw, 560px);
  padding: 22px 20px;
  background: var(--bg-charcoal-2);
  color: var(--fg-on-dark-1);
  overflow: hidden;
}
/* Placeholder texture until real portraits land. Swap `background-image`
   on .stripe-photo for the shot and this disappears behind it. */
.stripe-photo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 24, 22, 0.1) 0%, rgba(26, 24, 22, 0.86) 76%),
    repeating-linear-gradient(135deg, rgba(232, 106, 44, 0.18) 0 2px, rgba(232, 106, 44, 0) 2px 9px),
    var(--bg-charcoal-3);
  background-size: cover;
  background-position: center;
}
.stripe-initials {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62%;
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 96px);
  color: rgba(250, 246, 239, 0.16);
  letter-spacing: 0.04em;
}
.stripe-body { position: relative; }
.stripe-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  color: var(--fg-on-dark-1);
}
.stripe-role {
  margin: 6px 0 0;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.stripe-note { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--fg-on-dark-2); }

/* ------------------------------------------------------------
   Responsive — products, stripes
   ------------------------------------------------------------ */

@media (max-width: 900px) {
  .prods { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .stripes { grid-template-columns: minmax(0, 1fr); }
  .stripe { min-height: 300px; }
}

/* ============================================================
   CONTACT — copy on the left, the form on the right
   ------------------------------------------------------------
   The form is a Tally embed mounted by contact.js. Until it has
   a form id the authored fallback card shows in its place.
   ============================================================ */

.contact { padding: 96px 0 108px; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.contact-copy h2, .contact-copy h1 { font-size: clamp(34px, 4.4vw, 56px); }
.contact-copy .lede-sm { margin-top: 18px; }
.contact-page { border-top: none; min-height: calc(100vh - 60px); }
.contact-copy .lede { max-width: 30em; }
.contact-alt { margin: 26px 0 0; font-size: 15px; color: var(--fg-3); }
.contact-alt a { color: var(--fg-1); font-weight: 600; text-underline-offset: 4px; }

.contact-form {
  position: relative;
  border-radius: var(--r-md);
  background: var(--bg-cream);
  border: 1px solid var(--line-1);
  padding: clamp(22px, 2.6vw, 34px);
}
/* Once the real form mounts, the card gets out of its way. The form carries
   its own cream (the same token) and its own column, so a second border and
   a second gutter would read as a box inside a box. The Tally embed is
   loaded with transparentBackground, so what you see behind it is this
   surface. */
.contact-form.has-form {
  padding: 6px 0 0;
  background: transparent;
  border-color: transparent;
}
.contact-form iframe {
  display: block;
  width: 100%;
  border: 0;
  /* dynamicHeight resizes this from inside the frame. If that message never
     arrives — a blocked script, a slow network — the authored height still
     shows the whole form rather than clipping it. */
  min-height: 880px;
}
@media (max-width: 860px) {
  .contact-form iframe { min-height: 980px; }
}
.contact-fallback-h {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.12;
  color: var(--fg-1);
}
.contact-fallback p:not(.contact-fallback-h) { margin: 0; font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.contact-fallback .btn { margin-top: 24px; }

@media (max-width: 860px) {
  .contact { padding: 72px 0 84px; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

/* ============================================================
   BAND WASH — a band's colour arrives as you scroll into it
   ------------------------------------------------------------
   Each band keeps its own background. With JS, it is first
   painted in the colour of the band above it and washes to its
   own once its top edge has entered the viewport (pm.js sets
   --band-bg). The hard edge between bands goes away and the dark
   arrives as you reach it — without ever letting a neighbouring
   band change this one's colour, which is what a single
   body-wide crossfade does to cream text on a dark band.
   Without JS, --band-bg is unset and the fallbacks paint.
   ============================================================ */

html.surface-js .band       { background-color: var(--band-bg, var(--bg-cream)); }
html.surface-js .band-soft,
html.surface-js .cta        { background-color: var(--band-bg, var(--bg-cream-soft)); }
html.surface-js .band-deep  { background-color: var(--band-bg, var(--bg-cream-deep)); }
html.surface-js .band-dark  { background-color: var(--band-bg, var(--bg-charcoal)); }
html.surface-js .band, html.surface-js .cta {
  transition: background-color 760ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  html.surface-js .band, html.surface-js .cta { transition: none; }
}