/* groundtruth.works: "Change budget" concept. Chaptered editorial grammar.
   Tokens first, then the page's own classes. Engine selectors are never restyled. */

:root {
  /* Blue-black pen on cool field paper, one cobalt mark. Not cream, not terracotta. */
  --sc-canvas:      #FCFCFB;
  --sc-surface:     #FFFFFF;
  --sc-ink:         #1B1F24;
  --sc-ink-soft:    #5D646E;
  --sc-accent:      #2247D6;
  --sc-accent-ink:  #F7F8F5;
  --sc-font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sc-font-text:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sc-shadow-color: 215 25% 12%;
  --sc-r-sm: 6px; --sc-r-md: 6px; --sc-r-lg: 6px;
  --sc-maxw: 84rem;

  /* page-local */
  --gt-hair: color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --gt-hair-strong: color-mix(in oklab, var(--sc-ink) 26%, transparent);
  --gt-dot: color-mix(in oklab, var(--sc-ink) 7%, transparent);
  --gt-strength: #2A7A55;
  --gt-watch: #B07A14;
  --gt-risk: #B3352C;
  --gt-fold: 0rem;

  /* Tighter vertical rhythm: the engine default (clamp(4.5rem,9vw,11rem)) left
     too much white between sections. Override here so every section closes up. */
  --sc-section: clamp(2.5rem, 4.5vw, 5rem);
}

/* Schibsted at 500 carries the headline weight the way Ramp's grotesk does. */
.sc-display { font-weight: 500; letter-spacing: -0.03em; }
.sc-display strong { font-weight: 600; }
.sc-display .soft { color: var(--sc-accent); font-weight: 500; }
.sc-display--xl { font-size: clamp(2.6rem, 1.6rem + 4.8vw, 5.6rem); line-height: 1.0; }
.sc-display--lg { font-size: clamp(2rem, 1.5rem + 2.1vw, 3.2rem); line-height: 1.06; }
.sc-display--md { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.1; }
.sc-body { font-size: var(--sc-t-base); }
.sc-body + .sc-body { margin-top: var(--sc-4); }
.sc-lede { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); color: var(--sc-ink-soft); max-width: 52ch; }
.sc-label { font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sc-ink-soft); }

/* Every chapter paints its own ground. No drift: a chapter change is a cut. */
.chapter { position: relative; background: transparent; color: var(--sc-ink); }
.dots { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main { position: relative; z-index: 1; }
/* Field-book squares, not Ramp's dots. */
.chapter--dotted {
  background-image: linear-gradient(var(--gt-dot) 1px, transparent 1px), linear-gradient(90deg, var(--gt-dot) 1px, transparent 1px);
  background-size: 24px 24px;
}
.chapter--dark {
  --sc-canvas: #151A21;
  --sc-surface: #1D232C;
  --sc-ink: #E8EBE6;
  --sc-ink-soft: #A3ABB4;
  --sc-accent: #8FB0FF;
  --sc-accent-ink: #151A21;
  --gt-hair: color-mix(in oklab, var(--sc-ink) 16%, transparent);
  --gt-hair-strong: color-mix(in oklab, var(--sc-ink) 30%, transparent);
  --gt-dot: color-mix(in oklab, var(--sc-ink) 10%, transparent);
  background: var(--sc-canvas);
  color: var(--sc-ink);
}
.chapter--dark .sc-body, .chapter--dark .sc-lede { color: var(--sc-ink-soft); }
/* Light text on dark: a touch more leading and tracking. */
.chapter--dark .sc-body { line-height: 1.7; letter-spacing: 0.002em; }

/* The product surface bleeds to the right edge. It reads as a screen wider
   than the page, cropped by it, which is what a real one is. */
.chapter--wide .chapter__inner { max-width: none; padding-right: 0; }
.chapter--wide .app { max-width: 92rem; border-radius: 8px 0 0 8px; border-right: 0; }
.chapter__inner {
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding-inline: calc(var(--sc-gutter) + var(--gt-fold)) var(--sc-gutter);
}

/* --------------------------------------------------------- buttons, links -- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.15rem; border-radius: var(--sc-r-sm);
  font-weight: 500; font-size: 0.95rem; line-height: 1; text-decoration: none;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  border: 1px solid transparent;
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
  white-space: nowrap;
}
.btn:hover { background: color-mix(in oklab, var(--sc-accent) 88%, var(--sc-ink)); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--ghost { background: transparent; color: var(--sc-ink); border-color: var(--gt-hair-strong); }
.btn--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 5%, transparent); }

/* Slim sticky top bar. Hidden over the hero (which carries its own wordmark and
   CTA), it slides in once you scroll past, keeping the brand and the one action
   reachable on a long page. Sits under the engine's z-60 progress chrome. */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 55;
  background: color-mix(in oklab, var(--sc-canvas) 85%, transparent);
  -webkit-backdrop-filter: saturate(1.1) blur(8px); backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--gt-hair);
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform 0.32s ease, opacity 0.32s ease;
}
.topbar.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.topbar__inner { position: relative; width: 100%; max-width: var(--sc-maxw); margin-inline: auto; display: flex; align-items: center; gap: 1rem 1.5rem; padding: 0.55rem var(--sc-gutter); }
.topbar__mark { margin-right: auto; }
.topbar__nav { display: flex; align-items: center; gap: 1.25rem; }
.topbar__nav a:not(.btn) { color: var(--sc-ink-soft); text-decoration: none; font-size: 0.85rem; transition: color 140ms var(--sc-ease-out); }
.topbar__nav a:not(.btn):hover { color: var(--sc-accent); }
.topbar__cta { padding: 0.5rem 1.05rem; font-size: 0.85rem; }
.topbar__cta--panel { display: none; }
.topbar__burger { display: none; }
/* Anchor jumps (#register, #top, #talk) clear the fixed bar. */
html { scroll-padding-top: 3.5rem; }
@media (prefers-reduced-motion: reduce) { .topbar { transform: none; transition: opacity 0.25s ease; } }

/* Mobile: section links collapse behind a hamburger that drops a panel below the bar. */
@media (max-width: 860px) {
  .topbar__cta--bar { display: none; }
  .topbar__burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .topbar__burger span { display: block; height: 2px; width: 1.35rem; margin-inline: auto; background: var(--sc-ink); border-radius: 2px; transition: transform 180ms ease, opacity 180ms ease; }
  .topbar.menu-open .topbar__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .topbar.menu-open .topbar__burger span:nth-child(2) { opacity: 0; }
  .topbar.menu-open .topbar__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .topbar__nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--sc-surface); border-bottom: 1px solid var(--gt-hair); box-shadow: 0 14px 30px -20px hsl(var(--sc-shadow-color) / 0.55); padding: 0.25rem var(--sc-gutter) 1rem; }
  .topbar.menu-open .topbar__nav { display: flex; }
  .topbar__nav a:not(.btn) { padding: 0.75rem 0; font-size: 1rem; border-bottom: 1px solid var(--gt-hair); }
  .topbar__cta--panel { display: inline-flex; justify-content: center; margin-top: 0.85rem; padding: 0.7rem 1rem; }
}
.textlink { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--gt-hair-strong); text-underline-offset: 0.25em; }
.textlink:hover { text-decoration-color: var(--sc-accent); }

/* ------------------------------------------------------------ title page -- */
.title {
  min-height: 80svh; display: grid; align-content: center;
  padding-block: clamp(2.5rem, 5vh, 3.5rem);
}
.title__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.25rem, 4vh, 2.5rem); }
.wordmark { font-family: var(--sc-font-display); font-size: 1.25rem; letter-spacing: -0.01em; text-decoration: none; color: var(--sc-ink); }
.wordmark b { font-weight: 400; color: var(--sc-accent); }
.title h1 { max-width: 16ch; }
.title .sc-lede { margin-top: var(--sc-6); }
.title__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: var(--sc-7); }
.title__live { margin-top: clamp(3rem, 9vh, 6rem); display: flex; align-items: center; gap: 0.75rem; }
.title__live .pill { font-family: var(--sc-font-mono); font-size: 0.7rem; padding: 0.25rem 0.5rem; background: color-mix(in oklab, var(--sc-ink) 6%, transparent); border-radius: 4px; }

/* -------------------------------------------------------- generic chapter -- */
.chapter__head { padding-top: var(--sc-section); }
.chapter__head h2 { max-width: 20ch; }
.chapter__head .sc-lede { margin-top: var(--sc-5); }
.prose { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); padding-block: var(--sc-section); align-items: start; }
.prose__col > * + * { margin-top: var(--sc-4); }
.prose__col h2 { margin-top: var(--sc-9); }
.prose__col h2:first-child { margin-top: 0; }
.prose__col h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); letter-spacing: -0.02em; line-height: 1.1; margin: var(--sc-8) 0 0; max-width: 24ch; }
.prose__col h3 + p { margin-top: var(--sc-4); }

/* Media column: a still, or the drawn plate when the still isn't there. */
.plate { margin: 0; position: relative; overflow: clip; border: 1px solid var(--gt-hair); border-radius: var(--sc-r-sm); background: var(--sc-surface); aspect-ratio: 4 / 5; }
.plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Photo plate: oversize vertically so the small parallax has headroom to move
   without exposing an edge at the top or bottom of the frame. */
.plate picture { position: absolute; inset: -8% 0; width: 100%; height: 116%; }
.plate picture img { position: static; width: 100%; height: 100%; object-fit: cover; }
.plate figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.75rem 1rem; font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); background: linear-gradient(to top, var(--sc-surface) 60%, transparent); }
.plate--sticky { position: sticky; top: clamp(4rem, 10vh, 7rem); }

/* ------------------------------------------------- chapter 1: talk, map -- */
/* The chapter is one column now: heading, lede, then the product surface
   stuck to the top while the conversation inside it runs. */
.talk { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sc-4); padding-block: var(--sc-section) 0; }
.talk__h { max-width: 20ch; margin: 0; }
.talk__lede { margin: 0 0 var(--sc-3); max-width: 60ch; font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem); line-height: 1.55; color: var(--sc-ink-soft); }
/* Fiction disclosure, moved to the top of the demo. Quiet note, not a banner. */
.talk__note { margin: 0; max-width: 64ch; font-size: 0.85rem; line-height: 1.5; color: var(--sc-ink-soft); }
.talk__note .sc-label { margin-right: 0.5rem; }
.talk__runway { height: 210vh; }
.talk__h { max-width: 15ch; margin: 0; }

/* The app window. Real markup running real logic on clearly-labelled sample
   information: every row, reading and counter is computed from the transcript
   beside it, the three views are operable, and the filters filter. Nothing
   here is a painted screenshot. */
.app {
  margin: 0;
  position: sticky; top: clamp(2rem, 6vh, 4rem);
  height: min(78svh, 44rem);
  display: flex; flex-direction: column;
  border: 1px solid var(--gt-hair-strong); border-radius: 8px;
  background: var(--sc-surface); overflow: clip;
  font-size: 12px; line-height: 1.45;
  box-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / 0.05), 0 16px 40px -16px hsl(var(--sc-shadow-color) / 0.22);
}
.app__bar {
  display: flex; align-items: center; gap: 0.75rem; flex: none;
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--gt-hair);
  background: color-mix(in oklab, var(--sc-ink) 2.5%, var(--sc-surface));
}
.app__mark { font-family: var(--sc-font-display); font-weight: 600; font-size: 13px; letter-spacing: -0.02em; color: var(--sc-accent); }
.app__ws { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; padding: 0.15rem 0.4rem; border-radius: 4px; background: color-mix(in oklab, var(--sc-ink) 5%, transparent); }
.app__ws b { font-weight: 500; white-space: nowrap; }
.app__ws i { font-style: normal; color: var(--sc-ink-soft); font-size: 11px; white-space: nowrap; }
.app__key { margin-left: auto; padding: 0.1rem 0.35rem; border: 1px solid var(--gt-hair-strong); border-radius: 4px; font-family: var(--sc-font-mono); font-size: 10px; color: var(--sc-ink-soft); }
.app__session { display: flex; align-items: center; gap: 0.35rem; font-family: var(--sc-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); white-space: nowrap; }
/* Play/pause for the hybrid demo: auto-plays in view, scroll still scrubs. */
.app__play { margin-left: auto; display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.22rem 0.6rem; border: 1px solid var(--gt-hair-strong); border-radius: 999px; background: var(--sc-surface); cursor: pointer; font-family: var(--sc-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink); white-space: nowrap; transition: border-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out); }
.app__play:hover { border-color: var(--sc-accent); color: var(--sc-accent); }
.app__play:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.app__play-i { width: 11px; height: 11px; fill: currentColor; flex: none; }
.app__play-i--pause { display: none; }
.app__play[aria-pressed="true"] .app__play-i--play { display: none; }
.app__play[aria-pressed="true"] .app__play-i--pause { display: inline; }
@media (prefers-reduced-motion: reduce) { .app__play { display: none; } }
.livedot { width: 5px; height: 5px; border-radius: 50%; background: var(--gt-strength); box-shadow: 0 0 0 3px color-mix(in oklab, var(--gt-strength) 16%, transparent); }
@media (prefers-reduced-motion: no-preference) { .livedot { animation: gtpulse 2.4s ease-in-out infinite; } }
@keyframes gtpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.app__body { flex: 1; display: grid; grid-template-columns: 9.5rem 17rem minmax(0, 1fr) 12rem; min-height: 0; }

.app__rail { display: flex; flex-direction: column; gap: 1px; padding: 0.5rem 0.4rem; border-right: 1px solid var(--gt-hair); background: color-mix(in oklab, var(--sc-ink) 1.5%, var(--sc-surface)); overflow: hidden; }
.app__railhead { margin: 0.6rem 0 0.25rem; padding-inline: 0.45rem; font-family: var(--sc-font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.app__railhead:first-child { margin-top: 0; }
.app__rail > span { display: flex; align-items: center; gap: 0.45rem; padding: 0.32rem 0.45rem; border-radius: 4px; color: var(--sc-ink-soft); white-space: nowrap; }
.app__rail > span.on { background: color-mix(in oklab, var(--sc-accent) 10%, transparent); color: var(--sc-accent); font-weight: 500; }
.app__rail b { margin-left: auto; font-weight: 400; font-variant-numeric: tabular-nums; font-size: 11px; opacity: 0.75; }
.app__rail svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.app__rail > span.on svg circle { fill: currentColor; stroke: none; }
.app__meta { flex-direction: column; align-items: flex-start !important; gap: 0 !important; color: var(--sc-ink) !important; }
.app__meta i { font-style: normal; font-size: 11px; color: var(--sc-ink-soft); }


/* ------------------------------------------------------ the conversation --
   This is the point of the whole page: someone talks, and the tool writes
   down what it hears. So the talking happens inside the product, and every
   line that produced a record carries those records with it. */
.conv { position: relative; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--gt-hair); background: color-mix(in oklab, var(--sc-ink) 1.5%, var(--sc-surface)); }
.conv::before { content: ""; position: absolute; left: 0; right: 0; top: 2.1rem; height: 1.6rem; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-ink) 1.5%, var(--sc-surface)), transparent); }
.conv__head { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--gt-hair); flex: none; }
.conv__head h4 { margin: 0; font-size: 12px; font-weight: 600; }
.conv__mode { margin-left: auto; font-family: var(--sc-font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent); border: 1px solid color-mix(in oklab, var(--sc-accent) 35%, transparent); border-radius: 3px; padding: 0.1rem 0.3rem; }
.conv__list { list-style: none; margin: 0; padding: 0.7rem; flex: 1; min-height: 0; overflow: hidden; position: relative; display: flex; flex-direction: column; gap: 0.7rem; scroll-behavior: smooth; }
.conv__list li { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.5rem; opacity: 0; transform: translateY(6px); transition: opacity 460ms var(--sc-ease-out), transform 460ms var(--sc-ease-out); }
.conv__list li.on { opacity: 1; transform: none; }
.conv__who { grid-column: 1; font-family: var(--sc-font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.conv__list time { grid-column: 2; grid-row: 1; font-family: var(--sc-font-mono); font-size: 9.5px; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.conv__b { grid-column: 1 / -1; }
.conv__b p { margin: 0; font-size: 12.5px; line-height: 1.5; }
.conv__gt .conv__who { color: var(--sc-accent); }
.conv__gt .conv__b { padding-left: 0.6rem; border-left: 2px solid color-mix(in oklab, var(--sc-accent) 45%, transparent); }
.conv__gt .conv__b p { color: var(--sc-ink-soft); }
.conv__made { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-top: 0.4rem; }
.conv__made-l { width: 100%; font-family: var(--sc-font-mono); font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sc-accent); }
.chip { display: inline-flex; align-items: center; gap: 0.28rem; padding: 0.12rem 0.4rem; border: 1px solid var(--gt-hair-strong); border-radius: 3px; background: var(--sc-surface); font-size: 10.5px; line-height: 1.35; }
.chip i { width: 6px; height: 6px; border-radius: 2px; background: var(--sc-ink-soft); flex: none; }
.chip i.k--person, .chip i.k--champion { border-radius: 50%; background: var(--sc-accent); }
.chip i.k--friction, .chip i.k--concern { background: var(--gt-risk); }
.chip i.k--history, .chip i.k--pattern { background: var(--gt-watch); }
.chip i.k--system { background: var(--gt-strength); }
.chip i.k--records { background: var(--sc-ink-soft); }
.conv__mic { display: flex; align-items: center; gap: 0.5rem; flex: none; padding: 0.5rem 0.7rem; border-top: 1px solid var(--gt-hair); font-family: var(--sc-font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.conv__wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.conv__wave i { width: 2px; background: var(--sc-accent); border-radius: 1px; height: 30%; }
@media (prefers-reduced-motion: no-preference) {
  .conv__wave i { animation: gtwave 1s ease-in-out infinite; }
  .conv__wave i:nth-child(2) { animation-delay: 0.15s; }
  .conv__wave i:nth-child(3) { animation-delay: 0.3s; }
  .conv__wave i:nth-child(4) { animation-delay: 0.45s; }
}
@keyframes gtwave { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.conv.is-done .conv__wave i { animation: none; height: 25%; background: var(--gt-strength); }

.app__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.app__head { display: flex; align-items: center; gap: 0.6rem; min-width: 0; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--gt-hair); flex: none; }
.app__head h4 { margin: 0; flex: none; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.app__n { flex: none; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.app__n b { font-weight: 500; color: var(--sc-ink); }
.app__views { margin-left: auto; flex: none; display: flex; gap: 1px; padding: 2px; border-radius: 5px; background: color-mix(in oklab, var(--sc-ink) 5%, transparent); }
.app__views button { all: unset; cursor: pointer; padding: 0.22rem 0.5rem; border-radius: 4px; color: var(--sc-ink-soft); font-size: 11px; }
.app__views button[aria-selected="true"] { background: var(--sc-surface); color: var(--sc-ink); font-weight: 500; box-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / 0.08); }
.app__views button:focus-visible, .app__filters button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; }

.app__filters { display: flex; gap: 0.3rem; flex-wrap: wrap; padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--gt-hair); flex: none; }
.app__filters button { all: unset; cursor: pointer; padding: 0.18rem 0.5rem; border: 1px solid var(--gt-hair); border-radius: 999px; font-size: 11px; color: var(--sc-ink-soft); }
.app__filters button.on { border-color: var(--sc-accent); color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 8%, transparent); }

.app__panels { flex: 1; min-height: 0; position: relative; }
.app__panels::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2rem; pointer-events: none; z-index: 2; background: linear-gradient(to top, var(--sc-surface), transparent); }
.panel { position: absolute; inset: 0; display: none; overflow: auto; }
.panel.on { display: block; }

/* records table */
.recs { width: 100%; border-collapse: collapse; table-layout: fixed; }
.recs th:nth-child(1), .recs td:nth-child(1) { width: 21%; }
.recs th:nth-child(2), .recs td:nth-child(2) { width: 35%; }
.recs th:nth-child(3), .recs td:nth-child(3) { width: 17%; }
.recs th:nth-child(4), .recs td:nth-child(4) { width: 17%; }
.recs th:nth-child(5), .recs td:nth-child(5) { width: 10%; }
.recs thead th {
  position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 500;
  padding: 0.4rem 0.6rem; background: color-mix(in oklab, var(--sc-ink) 2.5%, var(--sc-surface));
  border-bottom: 1px solid var(--gt-hair); font-family: var(--sc-font-mono);
  font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.recs tbody tr { border-bottom: 1px solid var(--gt-hair); opacity: 0; display: none; }
.recs tbody tr.on:hover { background: color-mix(in oklab, var(--sc-ink) 3%, transparent); }
.recs tbody tr.on { display: table-row; opacity: 1; animation: recin 420ms var(--sc-ease-out) both; }
@media (prefers-reduced-motion: reduce) { .recs tbody tr.on { animation: none; } }
@keyframes recin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.recs tbody tr.is-new { background: color-mix(in oklab, var(--sc-accent) 6%, transparent); }
.recs td { padding: 0.42rem 0.6rem; vertical-align: middle; overflow: hidden; }
.recs td:first-child { padding-left: 0.75rem; }
.recs td:last-child { padding-right: 0.75rem; }
.recs__name b { display: block; font-weight: 500; color: var(--sc-ink); }
.recs__lens { color: var(--sc-ink-soft); font-size: 11px; white-space: nowrap; }
.recs__at { font-family: var(--sc-font-mono); font-size: 10px; color: var(--sc-ink-soft); text-align: right; font-variant-numeric: tabular-nums; }

.k { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 11px; color: var(--sc-ink-soft); white-space: nowrap; max-width: 100%; overflow: hidden; }
.k::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--sc-ink-soft); flex: none; }
.k--person::before, .k--champion::before { border-radius: 50%; background: var(--sc-accent); }
.k--friction::before, .k--concern::before { background: var(--gt-risk); }
.k--history::before, .k--pattern::before { background: var(--gt-watch); }
.k--system::before { background: var(--gt-strength); }
.k--records::before { background: var(--sc-ink-soft); }
.pill { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 10px; border: 1px solid var(--gt-hair-strong); color: var(--sc-ink-soft); white-space: nowrap; }
.pill--risk { border-color: var(--gt-risk); color: var(--gt-risk); background: color-mix(in oklab, var(--gt-risk) 7%, transparent); }
.pill--watch { border-color: var(--gt-watch); color: var(--gt-watch); background: color-mix(in oklab, var(--gt-watch) 9%, transparent); }
.pill--strong, .pill--strength { border-color: var(--gt-strength); color: var(--gt-strength); background: color-mix(in oklab, var(--gt-strength) 9%, transparent); }
.recs__empty { margin: 0; padding: 1.5rem 0.75rem; color: var(--sc-ink-soft); }
.recs__empty[hidden] { display: none; }

/* evidence view */
.evid { list-style: none; margin: 0; padding: 0; }
.evid li { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--gt-hair); display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.6rem; }
.evid time { font-family: var(--sc-font-mono); font-size: 10.5px; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.evid q { display: block; color: var(--sc-ink); }
.evid b { display: block; margin-top: 0.2rem; font-weight: 400; font-size: 11px; color: var(--sc-ink-soft); }

/* map view */
.canvas__field { position: absolute; inset: 0; background-image: linear-gradient(var(--gt-dot) 1px, transparent 1px), linear-gradient(90deg, var(--gt-dot) 1px, transparent 1px); background-size: 12px 12px; }
.canvas__edges { position: absolute; inset: 0; width: 100%; height: 100%; }
.canvas__edges path { fill: none; stroke: var(--gt-hair-strong); stroke-width: 1.2; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 500ms var(--sc-ease-out); }
.canvas__edges path.on { opacity: 1; }
.node {
  position: absolute; transform: translate(-50%, -50%) scale(0.92); opacity: 0;
  transition: opacity 600ms var(--sc-ease-out), transform 600ms var(--sc-ease-out);
  max-width: 9rem; padding: 0.35rem 0.5rem; border-radius: 5px;
  background: var(--sc-surface); border: 1px solid var(--gt-hair-strong);
  box-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10); font-size: 11px; line-height: 1.3;
}
.node.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.node small { display: block; font-family: var(--sc-font-mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sc-ink-soft); }
.node::before { content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 2px; border-radius: 2px; background: var(--gt-hair-strong); }
.node--strength::before { background: var(--gt-strength); }
.node--watch::before { background: var(--gt-watch); }
.node--risk::before { background: var(--gt-risk); }
.node--neutral::before { background: var(--sc-accent); }

/* right side: the reading */
.app__side { border-left: 1px solid var(--gt-hair); padding: 0.65rem 0.7rem; display: flex; flex-direction: column; gap: 0.8rem; overflow: hidden; background: color-mix(in oklab, var(--sc-ink) 1.5%, var(--sc-surface)); }
.app__side h4 { margin: 0 0 0.3rem; font-family: var(--sc-font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; }
.app__cap .sc-label { font-size: 9.5px; letter-spacing: 0.1em; }
.app__cap output { display: block; margin-top: 0.15rem; font-family: var(--sc-font-display); font-size: clamp(1.7rem, 1.4rem + 1vw, 2.4rem); font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.app__cap output small { font-family: var(--sc-font-text); font-size: 11px; color: var(--sc-ink-soft); margin-left: 0.25rem; letter-spacing: 0; }
.capbar { display: block; margin-top: 0.4rem; height: 4px; border-radius: 2px; background: var(--gt-hair); position: relative; overflow: hidden; }
.capbar::after { content: ""; position: absolute; inset: 0; background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(var(--v, 0)); transition: transform 600ms var(--sc-ease-out); }
.app__cap output.is-word { font-family: var(--sc-font-text); font-weight: 400; font-size: 13px; color: var(--sc-ink-soft); letter-spacing: 0; }
.app__cap .note { margin: 0.4rem 0 0; font-size: 11px; line-height: 1.4; color: var(--sc-ink-soft); }
.lens { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.4rem; margin-bottom: 0.45rem; opacity: 0.4; transition: opacity 500ms var(--sc-ease-out); }
.lens.on { opacity: 1; }
.lens__n { color: var(--sc-ink-soft); }
.lens__v { font-family: var(--sc-font-display); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.lens__bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--gt-hair); position: relative; overflow: hidden; }
.lens__bar::after { content: ""; position: absolute; inset: 0; background: var(--gt-watch); transform-origin: 0 50%; transform: scaleX(var(--v, 0)); transition: transform 700ms var(--sc-ease-out); }
.lens--pending .lens__v { font-size: 11px; font-family: var(--sc-font-text); font-weight: 400; color: var(--sc-ink-soft); }
.app__last { margin-top: auto; padding-top: 0.7rem; border-top: 1px solid var(--gt-hair); }
.app__last[hidden] { display: none; }
.app__last-n { margin: 0; font-weight: 500; line-height: 1.3; }
.app__last-m { margin: 0.15rem 0 0; font-size: 11px; color: var(--sc-ink-soft); }
.app__last blockquote { margin: 0.4rem 0 0; padding-left: 0.5rem; border-left: 2px solid var(--gt-hair-strong); font-size: 11px; line-height: 1.45; color: var(--sc-ink-soft); }

.app__status { display: flex; align-items: baseline; gap: 1rem; flex: none; white-space: nowrap; overflow: hidden; padding: 0.42rem 0.75rem; border-top: 1px solid var(--gt-hair); background: color-mix(in oklab, var(--sc-ink) 2.5%, var(--sc-surface)); font-family: var(--sc-font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.app__status b { font-family: var(--sc-font-display); font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.app__grow { margin-left: auto; }


/* ------------------------------------------- talk, map, evaluate strip -- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); padding-block: clamp(2.5rem, 5vh, 4rem); border-top: 1px solid var(--gt-hair); }
.step { display: grid; gap: 0.55rem; align-content: start; }
.step__k { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); letter-spacing: -0.02em; color: var(--sc-ink); }
.step__k::after { content: ""; display: block; width: 1.6rem; height: 2px; margin-top: 0.5rem; background: var(--sc-accent); }
.step p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--sc-ink-soft); }
.step__go { font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink); text-decoration: none; border-bottom: 1px solid var(--gt-hair-strong); width: max-content; padding-bottom: 0.1rem; }
.step__go:hover { border-color: var(--sc-accent); color: var(--sc-accent); }

/* --------------------------------------------- chapter 2: four questions -- */
.rail { display: flex; align-items: center; height: 100%; padding-block: clamp(3rem, 10vh, 6rem); padding-left: calc(var(--sc-gutter) + var(--gt-fold)); gap: clamp(1rem, 2vw, 2rem); }
.rail > * { flex: 0 0 auto; }
.rail__lead { width: min(38rem, 62vw); display: flex; flex-direction: column; justify-content: center; padding-right: clamp(1rem, 4vw, 4rem); }
.rail__lead h2 { max-width: 16ch; }
.rail__lead p { margin-top: var(--sc-5); }
.q { width: min(28rem, 56vw); max-height: calc(100svh - 8rem); overflow: auto; background: var(--sc-surface); border: 1px solid var(--gt-hair); border-radius: var(--sc-r-sm); box-shadow: var(--sc-e1); padding: clamp(1.25rem, 2.2vw, 1.75rem); display: flex; flex-direction: column; gap: 0.9rem; }
.q header { display: flex; align-items: baseline; gap: 0.75rem; }
.q__num { font-family: var(--sc-font-display); font-weight: 600; font-size: 2rem; line-height: 1; letter-spacing: -0.04em; color: var(--sc-accent); }
.q h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); margin: 0; letter-spacing: -0.02em; }
.q__ask { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.05rem, 1rem + 0.5vw, 1.4rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--sc-ink); }
.q__read { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.75rem; padding-top: 0.9rem; border-top: 1px solid var(--gt-hair); }
.light { font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.5rem; border-radius: 4px; border: 1px solid var(--gt-hair-strong); }
.light--amber { background: color-mix(in oklab, var(--gt-watch) 20%, transparent); border-color: var(--gt-watch); }
.light--green { background: var(--gt-strength); border-color: var(--gt-strength); color: #F7F8F5; }
.light--pending { color: var(--sc-ink-soft); }
.q__score { font-size: 0.8rem; color: var(--sc-ink-soft); }
.q__score b { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.2rem; color: var(--sc-ink); }
.q__bar { display: block; height: 3px; background: var(--gt-hair); position: relative; overflow: hidden; border-radius: 2px; }
.q__bar::after { content: ""; position: absolute; inset: 0; background: var(--gt-watch); transform-origin: 0 50%; transform: scaleX(var(--v, 0)); }
.q__sum { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--sc-ink-soft); }
.q__ev { margin: auto 0 0; padding: 0.75rem 0 0; border-top: 1px solid var(--gt-hair); font-family: var(--sc-font-display); font-size: 0.98rem; line-height: 1.4; color: var(--sc-ink); }
.rail__note { width: min(24rem, 60vw); display: flex; align-items: center; padding-right: var(--sc-gutter); color: var(--sc-ink-soft); font-size: var(--sc-t-lg); font-family: var(--sc-font-display); font-weight: 400; }
@media (prefers-reduced-motion: no-preference) {
  .q { opacity: calc(0.55 + var(--sc-p, 0) * 0.9); }
}

/* ------------------------------------------------------- chapter 3: quiet -- */
.quiet { min-height: 0; display: grid; align-content: center; padding-block: var(--sc-section); }
.quiet p { font-family: var(--sc-font-display); font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.8rem); line-height: 1.15; letter-spacing: -0.02em; max-width: 22ch; margin: 0; }

/* -------------------------------------------------- chapter 4: the scale -- */
.scale { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-block: var(--sc-section); }
.scale__copy { position: sticky; top: clamp(3rem, 8vh, 5rem); }
.scale__copy h2 { max-width: 14ch; }
.scale__copy .ledger-speaks { margin-top: var(--sc-6); font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem); line-height: 1.55; max-width: 40ch; color: var(--sc-ink); }
.scale__copy .ledger-speaks b { font-weight: 600; color: var(--sc-accent); }
.scale__copy .hand { margin-top: var(--sc-5); color: var(--sc-ink-soft); max-width: 40ch; }
.instrument { position: relative; border: 1px solid var(--gt-hair); border-radius: var(--sc-r-sm); background: var(--sc-surface); box-shadow: var(--sc-e1); padding: clamp(1.25rem, 3vw, 2.25rem); }
.instrument__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.instrument__bar b { color: var(--sc-ink); font-weight: 500; }
.instrument__value { margin-top: var(--sc-6); display: flex; align-items: baseline; gap: 0.6rem; }
.instrument__value output { font-family: var(--sc-font-display); font-size: clamp(4rem, 3rem + 6vw, 8.5rem); line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.instrument__value span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.instrument__value .band { margin-left: auto; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-lg); color: var(--sc-ink-soft); text-align: right; max-width: 14ch; }
.track { position: relative; margin-top: var(--sc-6); height: 3.2rem; }
.track__line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--gt-hair-strong); }
.track__fill { position: absolute; left: 0; top: 50%; height: 2px; width: 100%; background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(var(--gt-cap, 0)); }
.track__ticks { position: absolute; inset: 0; pointer-events: none; }
.track__ticks i { position: absolute; top: calc(50% - 0.35rem); width: 1px; height: 0.7rem; background: var(--gt-hair-strong); }
.track__ticks i::after { content: attr(data-n); position: absolute; top: 0.9rem; left: 50%; transform: translateX(-50%); font-family: var(--sc-font-mono); font-size: 0.6rem; color: var(--sc-ink-soft); }
.track input[type="range"] {
  -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  background: transparent; cursor: ew-resize;
}
.track input[type="range"]:disabled { cursor: default; }
.track input[type="range"]::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.track input[type="range"]::-moz-range-track { height: 100%; background: transparent; }
.track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.6rem; height: 1.6rem; margin-top: calc(1.6rem - 0.8rem); border-radius: 50%; background: var(--sc-accent); border: 3px solid var(--sc-surface); box-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / 0.35), 0 0 0 1px var(--gt-hair-strong); transform: translateY(-50%); }
.track input[type="range"]::-moz-range-thumb { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--sc-accent); border: 3px solid var(--sc-surface); box-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / 0.35), 0 0 0 1px var(--gt-hair-strong); }
.track input[type="range"]:focus-visible { outline: none; }
.track input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.loads { list-style: none; margin: var(--sc-7) 0 0; padding: 0; border-top: 1px solid var(--gt-hair); }
.loads li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding: 0.8rem 0; border-bottom: 1px solid var(--gt-hair); font-size: 0.92rem; }
.loads .load { font-family: var(--sc-font-display); font-size: 1.4rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.loads .who b { font-weight: 500; }
.loads .who span { display: block; color: var(--sc-ink-soft); font-size: 0.82rem; }
.loads .verdict { font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.55rem; border-radius: 4px; border: 1px solid var(--gt-hair-strong); white-space: nowrap; transition: background-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out), border-color 240ms var(--sc-ease-out); }
.loads .verdict[data-v="fits"] { background: var(--gt-strength); border-color: var(--gt-strength); color: #F7F8F5; }
.loads .verdict[data-v="cond"] { background: color-mix(in oklab, var(--gt-watch) 22%, transparent); border-color: var(--gt-watch); color: var(--sc-ink); }
.loads .verdict[data-v="over"] { background: color-mix(in oklab, var(--gt-risk) 18%, transparent); border-color: var(--gt-risk); color: var(--sc-ink); }
.instrument__foot { margin-top: var(--sc-5); font-size: 0.78rem; color: var(--sc-ink-soft); max-width: 60ch; }
.instrument__foot b { font-weight: 500; color: var(--sc-ink); }
.instrument.is-live .track input[type="range"] { cursor: ew-resize; }
.instrument__hand { display: block; margin-top: 0.9rem; font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent); opacity: 0; transition: opacity 400ms var(--sc-ease-out); }
.instrument.is-live .instrument__hand { opacity: 1; }

/* ----------------------------------------------- chapter 5: vendor drop -- */
.drop { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); padding-block: var(--sc-section); align-items: start; }
.drop__copy h2 { max-width: 14ch; }
.drop__copy .sc-body { margin-top: var(--sc-5); }
.drop__steps { margin: var(--sc-5) 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 0.6rem; }
.drop__steps li { counter-increment: s; display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.5rem; font-size: 0.92rem; line-height: 1.5; color: var(--sc-ink-soft); }
.drop__steps li::before { content: counter(s); font-family: var(--sc-font-display); font-weight: 600; color: var(--sc-accent); }
.drop__steps b { font-weight: 500; color: var(--sc-ink); }
.quote { margin: 0; border: 1px solid var(--gt-hair); border-radius: var(--sc-r-sm); background: var(--sc-surface); box-shadow: var(--sc-e1); overflow: clip; }
.quote__pick { margin: 0; padding: 0.75rem 1.25rem 0; color: var(--sc-ink-soft); font-size: 0.82rem; line-height: 1.4; }
.quote__pick .sc-label { margin-right: 0.45rem; color: var(--sc-ink); }
/* Segmented buttons: the selected quote fills cobalt so it reads as a choice. */
.quote__tabs { display: flex; gap: 0.4rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--gt-hair); background: color-mix(in oklab, var(--sc-ink) 3%, var(--sc-surface)); }
.quote__tabs button { all: unset; cursor: pointer; flex: 1; padding: 0.55rem 0.75rem; font-family: var(--sc-font-mono); font-size: 0.74rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--sc-ink-soft); text-align: center; border: 1px solid var(--gt-hair); border-radius: var(--sc-r-sm); background: var(--sc-surface); transition: color 140ms var(--sc-ease-out), background 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out); }
.quote__tabs button:hover { color: var(--sc-ink); border-color: var(--gt-hair-strong); }
.quote__tabs button[aria-selected="true"] { color: var(--sc-accent-ink); background: var(--sc-accent); border-color: var(--sc-accent); font-weight: 500; }
.quote__tabs button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.quote__head { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 1.25rem; font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.quote__head b { color: var(--sc-ink); font-weight: 500; }
.quote__text { padding: 0 1.25rem 1.25rem; font-size: 0.92rem; line-height: 1.6; color: var(--sc-ink); }
.quote__text .price { margin: 0.6rem 0 0; font-family: var(--sc-font-mono); font-size: 0.78rem; color: var(--sc-ink-soft); }
.reading { border-top: 1px solid var(--gt-hair); padding: 1.25rem; display: grid; gap: 1.1rem; }
.reading > * { opacity: 0; transform: translateY(8px); transition: opacity 520ms var(--sc-ease-out), transform 520ms var(--sc-ease-out); }
.reading.on > * { opacity: 1; transform: none; }
.reading.on > :nth-child(2) { transition-delay: 120ms; } .reading.on > :nth-child(3) { transition-delay: 240ms; } .reading.on > :nth-child(4) { transition-delay: 360ms; } .reading.on > :nth-child(5) { transition-delay: 480ms; } .reading.on > :nth-child(6) { transition-delay: 600ms; }
.reading h4 { margin: 0 0 0.45rem; font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; }
.verdict-head { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.stamp { display: inline-grid; place-items: center; width: 5.4rem; height: 5.4rem; border: 2px solid var(--gt-strength); color: var(--gt-strength); border-radius: 50%; font-family: var(--sc-font-display); font-weight: 600; font-size: 0.8rem; line-height: 1.1; text-align: center; padding: 0.3rem; transform: rotate(-8deg); }
.stamp--cond { border-color: var(--gt-watch); color: var(--gt-watch); }
.stamp--over { border-color: var(--gt-risk); color: var(--gt-risk); }
.verdict-head h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg); letter-spacing: -0.015em; line-height: 1.25; }
.verdict-head p { margin: 0.4rem 0 0; font-size: 0.86rem; color: var(--sc-ink-soft); line-height: 1.5; }
.touches { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.touches span { font-size: 0.78rem; padding: 0.3rem 0.6rem; border-radius: 4px; border: 1px solid var(--gt-hair-strong); background: var(--sc-canvas); border-left-width: 3px; }
.touches span[data-s="risk"] { border-left-color: var(--gt-risk); } .touches span[data-s="watch"] { border-left-color: var(--gt-watch); } .touches span[data-s="strength"] { border-left-color: var(--gt-strength); } .touches span[data-s="neutral"] { border-left-color: var(--gt-hair-strong); }
.loadbar { display: grid; gap: 0.4rem; font-size: 0.82rem; }
.loadbar__track { position: relative; margin-top: 1.1rem; height: 10px; background: var(--gt-hair); border-radius: 2px; overflow: visible; }
.loadbar__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gt-strength); border-radius: 2px; transform-origin: 0 50%; }
.loadbar__fill[data-s="cond"] { background: var(--gt-watch); } .loadbar__fill[data-s="over"] { background: var(--gt-risk); }
.loadbar__cap { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--sc-ink); }
.loadbar__cap::after { content: "capacity " attr(data-cap); position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--sc-font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.loadbar__legend { display: flex; justify-content: space-between; color: var(--sc-ink-soft); }
.loadbar__legend b { color: var(--sc-ink); font-weight: 500; }
.cost { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.cost td { padding: 0.45rem 0; border-top: 1px solid var(--gt-hair); vertical-align: top; }
.cost td:first-child { color: var(--sc-ink); width: 42%; }
.cost td:nth-child(2) { font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 0.75rem; }
.cost td:last-child { color: var(--sc-ink-soft); font-size: 0.76rem; }
.cost tr.total td { border-top: 1px solid var(--gt-hair-strong); font-weight: 500; color: var(--sc-ink); }
.asks { margin: 0; padding: 0 0 0 1.1rem; font-size: 0.84rem; line-height: 1.5; color: var(--sc-ink); display: grid; gap: 0.35rem; }
.smallest { font-size: 0.9rem; line-height: 1.5; margin: 0; padding: 0.9rem 1rem; background: var(--sc-canvas); border-radius: var(--sc-r-sm); border: 1px solid var(--gt-hair); }
.smallest b { font-weight: 500; }

/* ------------------------------------------------- chapter 7: the close -- */
.close__inner { padding-block: var(--sc-section) clamp(2rem, 6vh, 4rem); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.close h2 { max-width: 14ch; }
.close .sc-body { margin-top: var(--sc-5); }
/* Signature. Quiet attribution above the form, a touch larger than form__micro. */
.signature { margin-top: var(--sc-6); padding-top: var(--sc-5); border-top: 1px solid var(--gt-hair); max-width: 56ch; }
.signature .sc-label { margin: 0; color: var(--sc-ink); }
.signature p:not(.sc-label) { margin: 0.4rem 0 0; font-size: 0.85rem; line-height: 1.55; color: var(--sc-ink-soft); }
.form { border: 1px solid var(--gt-hair); border-radius: var(--sc-r-sm); background: var(--sc-surface); box-shadow: var(--sc-e1); padding: clamp(1.25rem, 3vw, 2rem); }
.form h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); margin: 0; letter-spacing: -0.02em; }
.form > p { margin: 0.5rem 0 0; color: var(--sc-ink-soft); font-size: 0.92rem; }
.field { display: grid; gap: 0.35rem; margin-top: 1.1rem; }
.field label { font-size: 0.8rem; font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; padding: 0.7rem 0.8rem; border: 1px solid var(--gt-hair-strong); border-radius: var(--sc-r-sm); background: var(--sc-canvas); color: var(--sc-ink); font-size: 0.95rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; }
.field textarea { min-height: 5.5rem; resize: vertical; }
.form__actions { margin-top: 1.25rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form__micro { margin: 0.9rem 0 0; font-size: 0.78rem; color: var(--sc-ink-soft); }
.form__status { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--sc-accent); min-height: 1.2em; }
.colophon { border-top: 1px solid var(--gt-hair-strong); padding-block: 1.5rem clamp(1.5rem, 4vh, 2.5rem); display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: baseline; justify-content: space-between; font-size: 0.85rem; color: var(--sc-ink-soft); }
.colophon .wordmark { font-size: 1.05rem; }
.colophon a { color: var(--sc-ink-soft); }


/* ------------------------------------------------- below wide desktop --
   The product surface is the widest thing on the page, so anything under a
   wide desktop stacks: heading, then the surface stuck to the top of the
   viewport, then the conversation running underneath it. */
@media (max-width: 1399px) {
  .chapter--wide .chapter__inner { padding-right: var(--sc-gutter); }
  .chapter--wide .app { max-width: none; border-radius: 8px; border-right: 1px solid var(--gt-hair-strong); }
  .talk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "app" "copy"; row-gap: var(--sc-5); }
  .app { position: sticky; top: 1.25rem; height: min(60svh, 34rem); }
  .talk__h { max-width: 22ch; }
    }

/* ------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .chapter__inner { padding-inline: var(--sc-gutter); }

  .talk { padding-block: 3rem; }
    
  /* On a phone the conversation IS the surface. The records panel would be
     two rows tall and useless, so the chips inside the conversation carry
     what was written down, and the reading sits in a strip underneath. */
  .app { height: min(72svh, 34rem); top: 0.75rem; font-size: 12px; }
  .app__ws i, .app__key, .app__session { display: none; }
  .app__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .app__rail, .app__main { display: none; }
  .conv { border-right: 0; }
  .conv__list { gap: 0.85rem; }
  .conv__b p { font-size: 13.5px; }
  .app__side {
    display: grid; grid-template-columns: auto 1fr; align-items: center;
    gap: 0.25rem 0.9rem; border-left: 0; border-top: 1px solid var(--gt-hair);
    padding: 0.6rem 0.75rem;
  }
  .app__cap { display: flex; align-items: baseline; gap: 0.4rem; }
  .app__cap .sc-label, .app__cap .note, .app__cap .capbar { display: none; }
  .app__cap output { margin: 0; font-size: 1.9rem; }
  .app__lenses { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; }
  .app__lenses h4 { display: none; }
  .lens { display: flex; align-items: baseline; gap: 0.3rem; margin: 0; }
  .lens__bar { display: none; }
  .lens__n { font-size: 11px; }
  .lens__v { font-size: 12px; }
  .app__last { display: none; }
  .app__status span:nth-child(3), .app__grow { display: none; }

  .prose, .drop, .close__inner { grid-template-columns: 1fr; }
  .plate--sticky { position: relative; top: auto; max-height: 60vh; }
  .steps { grid-template-columns: 1fr; gap: 1.5rem; }
  /* The four questions ride a sideways, pinned rail on desktop. On a phone that
     became a 260vh scroll with height-capped cards you had to scroll inside each
     one. Flatten it like the reduced-motion path does: normal flow, one card per
     row, every card sized to its own content so nothing is clipped. */
  [data-sc-act="pan"] { height: auto !important; }
  [data-sc-act="pan"] .sc-stage,
  [data-sc-act="pan"] [data-sc-stage] { position: static !important; height: auto !important; overflow: visible !important; }
  .rail { display: grid; grid-template-columns: 1fr; align-items: start; height: auto; gap: 1rem; padding: var(--sc-section) var(--sc-gutter); transform: none !important; }
  .rail__lead, .rail__note { width: auto; padding-right: 0; }
  .q { width: auto; max-height: none; overflow: visible; opacity: 1 !important; }
  .scale { grid-template-columns: 1fr; gap: 1.25rem; padding-block: 3rem; }
  .scale__copy { position: static; }
  .instrument { padding: 1rem; }
  .instrument__value output { font-size: 3.6rem; }
  .loads li { grid-template-columns: 2.4rem minmax(0, 1fr) auto; font-size: 0.82rem; padding: 0.55rem 0; }
  .loads .who span { display: none; }
  .instrument__foot { display: none; }
  .cost td:last-child { display: none; }
  .cost td:first-child { width: auto; }
  .title__top { margin-bottom: 3rem; }
  .sc-display--xl { font-size: clamp(2.2rem, 1.4rem + 5vw, 3.2rem); }
}
@media (max-width: 560px) {
  .title__live { flex-wrap: wrap; gap: 0.5rem; }
}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  /* The rail's travel is its navigation. Without motion, lay the four
     readings out as a grid in normal flow instead of a dead scroll region. */
  [data-sc-act="pan"] { height: auto !important; }
  [data-sc-act="pan"] .sc-stage, [data-sc-act="pan"] [data-sc-stage] { position: static !important; height: auto !important; overflow: visible !important; }
  .rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; padding: var(--sc-section) var(--sc-gutter) var(--sc-section) calc(var(--sc-gutter) + var(--gt-fold)); }
  .rail__lead, .rail__note { width: auto; grid-column: 1 / -1; padding-right: 0; }
  .q { width: auto; }
  .node, .canvas__edges path, .lens, .lens__bar::after,   .q { opacity: 1; }
}

/* Reduce Motion must not bring the two-column rail back on a phone: keep the
   single-column flatten so each question card gets the full width, like the
   regular mobile layout. (This block follows the reduced-motion one so it wins
   when both match.) */
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .rail { grid-template-columns: 1fr; }
}

/* ---- method 1.0 additions: the composition tables ---- */
.factors { width: 100%; border-collapse: collapse; margin: 18px 0 14px; font-size: 14px; }
.factors th { text-align: left; font: 400 12px/1.4 var(--sc-font-mono); color: var(--sc-ink-soft); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--gt-hair); }
.factors td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--gt-hair); vertical-align: top; }
.factors td small { font: 400 12px/1 var(--sc-font-mono); color: var(--sc-ink-soft); margin-left: 6px; }
.factors td.n { font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.factors td.ev { font-style: italic; color: var(--sc-ink-soft); }
.factors tr.sum td { font-weight: 600; border-bottom: 2px solid var(--sc-ink); }
.loadtab { width: 100%; border-collapse: collapse; margin: 10px 0 6px; font-size: 13px; }
.loadtab td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--gt-hair); vertical-align: top; }
.loadtab td.n { font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; }
.loadtab td.ev { font-style: italic; color: var(--sc-ink-soft); }
.loadtab tr.sum td { font-weight: 600; border-bottom: 2px solid currentColor; }
.rule { font-size: 13px; color: var(--sc-ink-soft); margin: 8px 0; }

/* ---- the story page: a date column, prose, a pulled quote ---- */
.story { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(1.5rem, 4vw, 4rem); padding-block: var(--sc-section); align-items: start; }
.story__when { position: sticky; top: clamp(5rem, 12vh, 8rem); display: flex; flex-direction: column; gap: 0.5rem; }
.story__when .sc-label { color: var(--sc-accent); }
.story__where { font-family: var(--sc-font-mono); font-size: 0.8rem; color: var(--sc-ink-soft); max-width: 18ch; line-height: 1.5; }
.story__body > * + * { margin-top: var(--sc-4); }
.story__body h2 { margin-bottom: var(--sc-5); }
.story__body .sc-body { max-width: 62ch; }
.story__quote { margin: var(--sc-7) 0 0; padding: 0 0 0 1.25rem; border-left: 2px solid var(--sc-accent); font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem); line-height: 1.2; letter-spacing: -0.015em; max-width: 26ch; }
.story__quote cite { display: block; margin-top: 0.9rem; font-family: var(--sc-font-mono); font-style: normal; font-size: 0.78rem; line-height: 1.5; color: var(--sc-ink-soft); max-width: 48ch; letter-spacing: 0; }
.story__go { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: var(--sc-7); }
@media (max-width: 820px) {
  .story { grid-template-columns: 1fr; gap: 1rem; }
  .story__when { position: static; flex-direction: row; align-items: baseline; gap: 1rem; }
  .story__where { max-width: none; }
}

/* the four corners: a typographic ledger, hairlines and numerals, no cards */
.corners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 5rem); border-top: 1px solid var(--gt-hair); padding-block: clamp(1.5rem, 4vh, 3rem); }
.corner { display: grid; grid-template-columns: 3.5rem 1fr; gap: 0 1rem; padding: clamp(1.25rem, 3vh, 2rem) 0; border-bottom: 1px solid var(--gt-hair); }
.corner__n { font-family: var(--sc-font-display); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); line-height: 1; color: var(--sc-accent); font-weight: 500; }
.corner h3 { grid-column: 2; margin: 0.2rem 0 0.4rem; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.corner p { grid-column: 2; margin: 0; color: var(--sc-ink-soft); max-width: 40ch; }
@media (max-width: 820px) { .corners { grid-template-columns: 1fr; } }