/* Shared foundations are generated in tokens.css from brand/tokens.json. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--type-root);
  line-height: var(--type-line-body);
}
/* graticule: square cells, starting at the gutter */
body {
  background-image:
    linear-gradient(90deg, var(--ink-faint) 1px, transparent 1px),
    linear-gradient(var(--ink-faint) 1px, transparent 1px);
  background-size: var(--col) var(--col);
  background-position: var(--gutter) 0;
}
a { color: inherit; }
h1, h2, p { margin: 0; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: var(--gutter); top: 1rem; z-index: 10; }

/* type roles */
.label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kicker, .plate-label, .course-num, .legend-num, .who-label, .hero-note, .cal-fallback, .footer-bottom, .menu, .footer-nav {
  font-family: var(--mono);
  font-size: var(--type-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
h2 {
  font-weight: var(--type-weight-medium);
  font-size: clamp(1.9rem, 3.3vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 20ch;
}
.lede {
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: var(--type-line-body);
  max-width: 34rem;
  color: var(--text-soft);
}

/* chrome */
.chrome {
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--gutter);
  z-index: 5;
  background: linear-gradient(to bottom, var(--paper) 55%, transparent);
}
.wordmark {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  text-transform: none;
  text-decoration: none;
  color: var(--text);
}
.menu { display: flex; gap: var(--space-group-gap); align-items: center; }
.menu a { text-decoration: none; color: var(--text-soft); }
.menu a:hover { color: var(--text); }
.menu .menu-cta { color: var(--ink); border-bottom: var(--control-border-width) solid var(--ink); padding-bottom: 0.15rem; }

/* plates */
.plate {
  position: relative;
  min-height: 100vh;
  padding: var(--space-30) var(--gutter) var(--space-20);
  border-top: var(--control-border-width) solid var(--rule);
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: var(--space-10);
}
.plate:first-child { border-top: 0; }
.plate-label {
  position: absolute;
  top: 4.4rem;
  left: var(--gutter);
  display: flex;
  gap: var(--space-copy-gap);
  color: var(--text-soft);
  z-index: 2;
}
.plate-label span:first-child { color: var(--ink); }
.plate-head { display: grid; gap: var(--space-copy-gap); position: relative; z-index: 2; }

/* action */
.cta {
  position: relative;
  z-index: 2;
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--type-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  padding: var(--control-button-padding-block) var(--control-button-padding-inline);
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}
.cta::after { content: "  →"; white-space: pre; }
.cta:hover { background: var(--color-ink-hover); transform: translateY(-1px); }
:focus-visible { outline: var(--control-focus-width) solid var(--ink); outline-offset: var(--control-focus-offset); }
.cta:focus-visible { outline-color: var(--text); }

/* charts */
.chart-bleed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}
/* 01 → 02: chart stays, lines draw with scroll, copy swaps */
.plate-dots {
  display: block;
  min-height: 0;
  height: 230vh;
  padding: 0;
  overflow: visible;
}
.plate-dots .anchor { position: absolute; top: 50%; }
.dots-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: var(--space-30) var(--gutter) var(--space-20);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--space-12);
  align-items: center;
  overflow: hidden;
}
.dots-copy { position: relative; min-height: 28rem; }
.dots-step {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: var(--space-copy-gap);
  transition: opacity var(--motion-settle) var(--motion-ease), transform var(--motion-settle) var(--motion-ease), filter var(--motion-settle) var(--motion-ease);
}
.dots-step .plate-label { position: static; }
.js .dots-step-2 { opacity: 0; transform: translateY(14px); filter: blur(6px); pointer-events: none; }
html:not(.js) .dots-step { position: static; }
html:not(.js) .dots-copy { display: grid; gap: var(--space-12); }
html:not(.js) .dots-sticky { height: auto; min-height: 100vh; overflow: visible; }
.is-connected .dots-step-1 { opacity: 0; transform: translateY(-14px); filter: blur(6px); pointer-events: none; }
.is-connected .dots-step-2 { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.dots-step .legend { grid-template-columns: 1fr; gap: 0.9rem; padding-top: var(--space-copy-gap); margin-top: 0.4rem; }
.dots-step .legend li { grid-template-columns: 2.2rem 1fr; column-gap: var(--space-detail-gap); row-gap: 0.1rem; }
.dots-step .legend li strong { grid-column: 2; }
.dots-step .legend li > span:last-child { grid-column: 2; font-size: 0.95rem; }
.dots-step .legend-num { grid-row: 1 / span 2; padding-top: var(--space-1); }
.plate-dots .chart .figure-scroll path {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--p, 0) - var(--a)) / var(--w), 1));
  transition: none;
}
.chart-box {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  z-index: 1;
}
.dots-diagram { --diagram-min-width:36rem; min-width:0; }
.dots-diagram.is-compact .chart-box { display:none; }
.dots-diagram.is-compact .mobile-network { display:block; }
.chart-box .chart { width: 100%; height: 100%; display: block; overflow: visible; }
.sky-dust { transform: translateY(var(--py, 0px)); }
.sky-dust circle { fill: var(--ink); opacity: 0.35; }
.sky-stars circle { fill: var(--ink); }
.chart-ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.22;
  z-index: 0;
}

.star-names .sn {
  position: absolute;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0.9;
  transition: opacity var(--motion-label) var(--motion-ease);
}
.js .star-names .sn { opacity: 0; }
.is-drawn .star-names .sn { opacity: 0.9; }
.is-drawn .star-names .sn:nth-child(1) { transition-delay: 0.2s; }
.is-drawn .star-names .sn:nth-child(2) { transition-delay: 0.35s; }
.is-drawn .star-names .sn:nth-child(3) { transition-delay: 0.5s; }
.is-drawn .star-names .sn:nth-child(4) { transition-delay: 0.65s; }
.is-drawn .star-names .sn:nth-child(5) { transition-delay: 0.8s; }
.is-drawn .star-names .sn:nth-child(6) { transition-delay: 0.95s; }
.is-drawn .star-names .sn:nth-child(7) { transition-delay: 1.1s; }
.is-drawn .star-names .sn:nth-child(8) { transition-delay: 1.25s; }

/* points: (150,390) (330,250) (480,400) (480,120) (800,400) (700,210) (300,480) (640,480) of 1000×600 */
.sn-1 { left: calc(15% + 0.7rem); top: 65%;   transform: translateY(-50%); }
.sn-2 { right: calc(67% + 0.7rem); top: 41.7%; transform: translateY(-50%); }
.sn-3 { left:  calc(48% + 0.7rem); top: calc(66.7% + 0.4rem); }
.sn-4 { left:  calc(48% + 0.7rem); top: 20%;   transform: translateY(-50%); }
.sn-5 { right: calc(20% + 0.7rem); top: calc(66.7% - 0.4rem); transform: translateY(-100%); }
.sn-6 { left:  calc(70% + 0.7rem); top: 35%;   transform: translateY(-50%); }
.sn-7 { left: 30%; top: calc(80% + 0.6rem); transform: translateX(-50%); }
.sn-8 { left: 64%; top: calc(80% + 0.6rem); transform: translateX(-50%); }

.figure-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.1;
  stroke-linejoin: round;
  transition: stroke-dashoffset var(--motion-figure) var(--motion-ease-draw) var(--motion-state);
}
.js .figure-line { stroke-dasharray: 3600; stroke-dashoffset: 3600; }
.is-drawn .figure-line { stroke-dashoffset: 0; }
.figure-line.is-static { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }

/* rise: content settles onto the plate */
.js [data-rise] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--motion-reveal) var(--motion-ease), transform var(--motion-reveal) var(--motion-ease-rise);
}
.is-drawn [data-rise] { opacity: 1; transform: none; }
.is-drawn .plate-head [data-rise]:nth-child(2) { transition-delay: 0.15s; }
.is-drawn .hero-copy [data-rise]:nth-child(2) { transition-delay: 0.1s; }
.is-drawn .hero-copy [data-rise]:nth-child(3) { transition-delay: 0.25s; }
.is-drawn .hero-copy [data-rise]:nth-child(4) { transition-delay: 0.4s; }
.is-drawn .legend li:nth-child(2) { transition-delay: 0.2s; }
.is-drawn .legend li:nth-child(3) { transition-delay: 0.4s; }

/* Hero */
.plate-hero { align-content: center; padding-top: var(--space-24); }
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 0;
  mix-blend-mode: multiply;
}
.plate-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--paper) 22%, var(--color-paper-veil) 40%, transparent 62%);
}
.hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-6);
  max-width: 46rem;
  justify-items: start;
}
.kicker { color: var(--ink); }
.promise {
  font-weight: var(--type-weight-medium);
  font-size: clamp(2.4rem, 4.6vw, 4.8rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.hero-line {
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: var(--type-line-body);
  max-width: 36rem;
  color: var(--text-soft);
}
.hero-actions { display: grid; gap: 0.7rem; justify-items: start; }
.hero-reason { color: var(--text); font-size: var(--type-body); }
.hero-note { color: var(--text-soft); }

/* 02 legend under the chart */
.legend {
  list-style: none;
  margin: 0;
  padding: 1.4rem 0 0;
  border-top: var(--control-border-width) solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  position: relative;
  z-index: 2;
}
.legend li { display: grid; gap: 0.35rem; max-width: 26rem; }
.legend-num { color: var(--ink); }
.legend strong { font-weight: var(--type-weight-medium); font-size: 1.1rem; letter-spacing: -0.01em; }
.legend li > span:last-child { color: var(--text-soft); }

/* shared: sticky scroll sections */
.plate-results, .plate-process {
  display: block;
  min-height: 0;
  padding: 0;
  overflow: visible;
}
.plate-results { height: 240vh; }
.plate-process { height: 300vh; }
.results-sticky, .process-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: var(--space-30) var(--gutter) var(--space-20);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--space-16);
  align-items: center;
  overflow: hidden;
}
.results-sticky .plate-label, .process-sticky .plate-label { position: static; }
.results-copy, .process-copy { display: grid; gap: var(--space-copy-gap); align-content: center; }
.js [data-at] { opacity: 0.55; transition: opacity var(--motion-settle) var(--motion-ease); }
[data-at].is-on { opacity: 1; }

/* 03 what you get */
.outcomes {
  display: grid;
  gap: var(--space-group-gap);
  margin-top: 0.8rem;
  padding-top: var(--space-group-gap);
  border-top: var(--control-border-width) solid var(--rule);
}
.outcome { display: grid; gap: 0.35rem; }
.outcome-word {
  font-weight: var(--type-weight-medium);
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.outcome p { color: var(--text); }
.outcome ul { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: var(--space-1); }
.outcome li { color: var(--text-soft); font-size: 0.95rem; display: grid; grid-template-columns: 0.8rem 1fr; column-gap: var(--space-2); align-items: baseline; }
.tick { width: 0.8rem; height: 0.8rem; align-self: center; overflow: visible; }
.tick path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--motion-settle) var(--motion-ease);
}
.js .tick path { stroke-dashoffset: 1; }
.js .outcome.is-on .tick path { stroke-dashoffset: 0; }
.js .outcome.is-on li:nth-child(2) .tick path { transition-delay: 0.12s; }
.js .outcome.is-on li:nth-child(3) .tick path { transition-delay: 0.24s; }
.scrub-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.scrub {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.scrub-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--paper), transparent 18%, transparent 82%, var(--paper)),
    linear-gradient(180deg, var(--paper), transparent 22%, transparent 78%, var(--paper));
  pointer-events: none;
}

/* 04 how it works */
.rail {
  --p: 0;
  list-style: none;
  margin: 0;
  padding: 0 0 0 2.6rem;
  position: relative;
  display: grid;
  gap: clamp(var(--space-10), 7vh, 4.5rem);
  align-self: center;
}
.rail::before, .rail::after {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: var(--rule);
}
.rail::after {
  background: var(--ink);
  transform-origin: top;
  transform: scaleY(var(--p));
}
.step { position: relative; display: grid; gap: 0.35rem; max-width: 30rem; }
.step::before {
  content: "";
  position: absolute;
  left: -2.6rem;
  top: 0.15rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--paper);
  border: var(--control-border-width) solid var(--ink);
  box-sizing: border-box;
  transition: background var(--motion-state) var(--motion-ease);
}
.step.is-on::before { background: var(--ink); }
.step-time { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.step strong { font-weight: var(--type-weight-medium); font-size:var(--type-step-title); letter-spacing: -0.02em; line-height: 1.1; }
.step > span:last-child { color: var(--text-soft); }
.js .step > * {
  transition: opacity var(--motion-settle) var(--motion-ease), filter var(--motion-settle) var(--motion-ease), transform var(--motion-settle) var(--motion-ease);
}
.js .step:not(.is-on) > * { opacity: 0.65; filter: blur(0.8px); transform: translateY(4px); }
.process-sticky {
  height: auto;
  min-height: 100vh;
  padding-top: clamp(var(--space-24), 10vh, var(--space-30));
  padding-bottom: clamp(var(--space-12), 6vh, var(--space-20));
  overflow: visible;
}
.plate-process .rail { gap: clamp(var(--space-5), 3.5vh, var(--space-8)); }
/* More reading distance where the steps scroll through a short or stacked view. */
@media (max-width:720px), (max-height:650px) {
  .plate-process .rail { gap:clamp(var(--space-12),12svh,var(--space-20)); }
}
.plate-process .rail::before, .plate-process .rail::after {
  bottom: auto;
  height: var(--rail-length, calc(100% - 1.2rem));
}
/* A tall/zoomed panel scrolls normally so no step is trapped off screen. */
.plate-process.is-flowing, html:not(.js) .plate-process { height: auto; }
.is-flowing .process-sticky, html:not(.js) .process-sticky { position: relative; }

/* 05 trust: three panels, each with a small live visual */
.plate-trust { min-height: 0; padding-bottom: var(--space-28); }
.panels {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.panel {
  display: grid;
  align-content: start;
  gap: var(--space-detail-gap);
  border: var(--control-border-width) solid var(--rule);
  background: var(--paper);
  padding: 0 var(--space-6) var(--space-group-gap);
}
.panel h3 { font-weight: var(--type-weight-medium); font-size: 1.2rem; letter-spacing: -0.015em; margin-top: var(--space-detail-gap); }
.panel > p { color: var(--text-soft); font-size: 0.98rem; }
.panel-visual {
  position: relative;
  height: 17rem;
  margin: 0 calc(-1 * var(--space-6)) 0.8rem;
  border-bottom: var(--control-border-width) solid var(--rule);
  overflow: hidden;
}

/* logo sphere */
.sphere { position: absolute; inset: 0; }
.sphere .node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  will-change: transform, opacity;
}
.sphere .node img { width: 1.5rem; height: 1.5rem; display: block; }

/* activity log */
.ledger, .status { position: absolute; inset: 0; padding: 1.1rem var(--space-6); font-family: var(--mono); font-size: 0.7rem; }
.ledger-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: var(--space-detail-gap);
  border-bottom: var(--control-border-width) solid var(--rule);
}
.ledger-live { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ink); animation: pulse var(--motion-pulse) var(--motion-ease-in-out) infinite; }
.ledger-lines { list-style: none; margin: 0; padding: var(--space-detail-gap) 0 0; display: grid; gap: 0.45rem; }
.ledger-lines li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: var(--space-detail-gap);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.js .ledger-lines li {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--motion-follow) var(--motion-ease), transform var(--motion-follow) var(--motion-ease);
}
.ledger-lines li.is-in { opacity: 1; transform: none; }
.ledger-lines li.is-old { opacity: 0.35; }
.ledger-lines li::before { content: attr(data-t); color: var(--text-soft); }

/* status rows */
.status-rows { list-style: none; margin: 0; padding: 0.8rem 0 0; display: grid; gap: var(--space-3); }
.status-rows li { display: grid; grid-template-columns: 0.6rem 1fr; column-gap: 0.7rem; align-items: baseline; }
.status-rows i { width: 0.5rem; height: 0.5rem; border-radius: 50%; border: var(--control-border-width) solid var(--ink); align-self: center; }
.status-rows .is-live i { background: var(--ink); animation: pulse var(--motion-pulse) var(--motion-ease-in-out) infinite; }
.status-rows strong { font-weight: var(--type-weight-medium); letter-spacing: 0.04em; }
.status-rows span { grid-column: 2; color: var(--text-soft); }
.status-pulse {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 0.9rem;
  height: 2.4rem;
  width: calc(100% - 3rem);
}
.status-pulse path { fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.pulse-base { stroke: var(--rule); }
.pulse-run {
  stroke: var(--ink);
  stroke-dasharray: 0.18 0.82;
  animation: heartbeat var(--motion-heartbeat) linear infinite;
}
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--color-ink-pulse); } 50% { box-shadow: 0 0 0 5px var(--color-ink-transparent); } }
@keyframes heartbeat { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* 06 book */
.plate-book {
  gap: var(--space-8) var(--space-12);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
}
.plate-book .cal-inline, .plate-book .cal-fallback { grid-column: 1 / -1; }
.plate-book .who { padding-bottom: 0.3rem; }
.cal-inline {
  width: 100%;
  min-height: 34rem;
  border-top: var(--control-border-width) solid var(--rule);
  padding-top: var(--space-6);
  position: relative;
  z-index: 2;
}
.cal-inline > * { opacity: 0; transition: opacity var(--motion-calendar) var(--motion-ease); }
.cal-inline.is-ready > * { opacity: 1; }
.who {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  position: relative;
  z-index: 2;
}
.who > div { display: grid; gap: 0.15rem; }
.who-mark {
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--rule);
}
.who-label { color: var(--ink); }
.who strong { font-weight: var(--type-weight-medium); font-size: 1.25rem; letter-spacing: -0.01em; }
.who-role, .who-note { color: var(--text-soft); }
.who-note { font-size: 0.95rem; }
.cal-fallback { color: var(--text-soft); }
.cal-fallback a { color: var(--ink); }

/* Compact closing row: contact and navigation lead, the drawing stays small. */
.footer {
  position:relative;
  background:var(--paper);
  color:var(--text);
  padding:var(--space-9) var(--gutter) var(--space-4);
  border-top:var(--control-border-width) solid var(--rule);
  display:grid;
  gap:var(--space-5);
}
.footer-main { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:clamp(var(--space-6),4vw,var(--space-16)); align-items:center; }
.footer-contact { display:grid; justify-items:start; gap:var(--space-detail-gap); min-width:0; }
.footer-lettering { font:var(--type-weight-medium) var(--type-footer-wordmark)/1 var(--brand); letter-spacing:-.04em; text-decoration:none; color:var(--text); }
.footer-mail { display:inline-flex; align-items:center; min-height:var(--control-target-min); font:var(--type-weight-regular) var(--type-body)/1.4 var(--sans); text-decoration:none; color:var(--text-soft); }
.footer-nav { display:grid; grid-template-columns:repeat(2,auto); gap:0 var(--space-8); font-size:var(--type-body-small); }
.footer-nav a { display:flex; align-items:center; min-height:var(--control-target-min); color:var(--text-soft); text-decoration:none; }
.footer-nav a:hover,.footer-mail:hover { color:var(--ink); }
.footer-perch { position:relative; width:6rem; justify-self:end; }
.footer-perch::before { content:''; position:absolute; left:37%; right:calc(-1 * var(--gutter)); top:57.143%; border-top:var(--control-border-width) solid var(--rule); }
.footer-character { position:relative; aspect-ratio:580 / 770; overflow:hidden; }
.footer-character img { position:absolute; top:-24.675%; left:0; display:block; width:100%; height:auto; }
.footer-bottom { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:var(--space-1) var(--space-8); padding-top:.65rem; border-top:var(--control-border-width) solid var(--rule); color:var(--text-soft); font-size:var(--type-caption); }
.footer-bottom a { display:inline-flex; align-items:center; justify-self:end; gap:.35rem; min-height:var(--control-target-min); color:var(--text); text-decoration:none; }
.footer-bottom a:hover { color:var(--ink); }
.footer-legal { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:var(--space-1) var(--space-4); }
.booking-privacy { margin:0 0 var(--space-4); color:var(--color-text-soft); font-size:var(--type-body-small); }
.booking-privacy a { color:var(--color-ink); text-underline-offset:.15em; }
@media(max-width:720px) {
  .footer { padding-top:var(--space-7); gap:var(--space-4); }
  .footer-main { grid-template-columns:minmax(0,1fr) 5.5rem; gap:var(--space-4); }
  .footer-contact { grid-column:1; grid-row:1; }
  .footer-perch { grid-column:2; grid-row:1; width:100%; }
  .footer-nav { grid-column:1 / -1; grid-row:2; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--space-4); }
  .footer-bottom { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-1) var(--space-4); }
  .footer-bottom > span:first-child { grid-column:1 / -1; }
}

@media (max-width: 900px) {
  .menu a:not(.menu-cta) { display: none; }
  .legend { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --cols: var(--layout-columns-mobile); }
  html { font-size: var(--type-root-mobile); }
  .plate { padding-top: var(--space-26); }
  .menu .menu-cta { padding: 0.85rem var(--space-4); border: var(--control-border-width) solid var(--ink); }

  /* hero */
  .plate-hero { align-content: start; padding-top: var(--space-28); row-gap: var(--space-6); }
  .hero-video { object-position: 50% 40%; }
  .plate-hero::before { background: linear-gradient(to bottom, var(--paper) 48%, var(--color-paper-veil-mobile) 64%, transparent 82%); }

  /* 01/02: sticky panes grow with content instead of clipping it */
  .plate-dots { height: 260vh; }
  .dots-sticky { grid-template-columns: 1fr; align-content: start; row-gap: var(--space-4); padding-top: var(--space-26); height: auto; min-height: 100vh; overflow: visible; }
  .dots-copy { min-height: 26rem; }
  .dots-step .legend { padding-top: 0.8rem; gap: var(--space-detail-gap); }
  .dots-step .legend li > span:last-child { font-size: 0.88rem; }
  .chart-box { aspect-ratio: 5 / 3; }
  .chart-box .star-names { position: static; display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; padding-top: 0.4rem; }
  .chart-box .star-names .sn { position: static; transform: none; white-space: normal; }

  /* 03/04 */
  .plate-results { height: 260vh; }
  .plate-process { height: 300vh; }
  .results-sticky, .process-sticky { grid-template-columns: 1fr; align-content: start; row-gap: var(--space-4); padding-top: var(--space-26); height: auto; min-height: 100vh; overflow: visible; }
  .results-copy .lede { display: none; }
  .scrub-frame { order: -1; aspect-ratio: 2 / 1; }
  .outcomes { gap: 0.9rem; margin-top: 0.4rem; padding-top: var(--space-4); }
  .outcome li { font-size: 0.88rem; }

  /* 05/06 */
  .panels { grid-template-columns: 1fr; }
  .plate-book { grid-template-columns: 1fr; align-items: start; }
  .plate-book .who { order: 1; }
  .plate-book .cal-fallback { order: 2; }
  .plate-book .cal-inline { order: 3; min-height: 40rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .figure-line, .star-names .sn, [data-rise], .dots-step, [data-at], .step::before, .tick path { transition: none; }
  [data-at] { opacity: 1; }
  .rail::after { transform: none; }
  .plate-dots .chart .figure-scroll path { stroke-dashoffset: 0; }
  .tick path, .js .tick path { stroke-dashoffset: 0; }
  .ledger-live, .status-rows .is-live i, .status-pulse path { animation: none; }
  .ledger-lines li { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .dots-step, .is-connected .dots-step-1, .js .dots-step-2 { position: static; opacity: 1; transform: none; filter: none; pointer-events: auto; }
  .dots-step { filter: none; }
  .dots-copy { display: grid; gap: var(--space-12); min-height: 0; }
  .dots-sticky { height: auto; min-height: 100vh; overflow: visible; }
  .plate-process { height: auto; }
  .process-sticky { position: relative; }
  .js .step > *, .js .step:not(.is-on) > * { opacity: 1; filter: none; transform: none; transition: none; }
}

/* Commercial clarity: readable stages and explicit examples. */
.plate-results [data-at] { opacity: 1; }
.panel > .demo-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: var(--type-line-body);
  color: var(--text-soft);
}
@media (max-width: 900px), (max-height: 800px) {
  .plate-results { height: auto; min-height: 100vh; }
  .results-sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .results-copy .lede { display: block; }
  .plate-results .tick path { stroke-dashoffset: 0; }
}

/* Language navigation stays independent from the collapsed section menu. */
.chrome { gap: var(--space-4); }
.menu { margin-left: auto; gap: var(--space-4); }
.language-switcher {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
}
.language-switcher a {
  display: inline-flex;
  min-width: var(--control-language-size);
  min-height: var(--control-language-size);
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  text-decoration: none;
}
.language-switcher a[aria-current="true"] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}
html:not(.js) .language-switcher { display: none; }
.locale-fallback { margin: var(--space-24) var(--gutter) var(--space-4); color: var(--text); }
.locale-fallback a { color: var(--ink); }
@media (max-width: 1150px) {
  .menu a:not(.menu-cta) { display: none; }
}
@media (max-width: 480px) {
  .chrome { flex-wrap: wrap; gap: 0.15rem var(--space-3); }
  .language-switcher { width: 100%; justify-content: flex-end; }
}

.plate-hero { padding-bottom:9rem; }
.study-header { position:absolute; top:0; left:0; right:0; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:var(--space-6) var(--gutter); }
.study-header .label { color:var(--text-soft); }
.study-languages { display:flex; gap:.4rem; }
button { font:inherit; cursor:pointer; }
.study-languages button { background:transparent; color:var(--ink); border:0; padding:var(--space-detail-gap); }
.study-languages button[aria-pressed="true"] { text-decoration:underline; text-underline-offset:.3rem; }
.study-toolbar { position:fixed; bottom:0; left:0; right:0; z-index:6; padding:var(--space-4) var(--gutter); border-top:var(--control-border-width) solid var(--rule); background:var(--paper); }
.study-options { display:flex; gap:var(--space-detail-gap); flex-wrap:wrap; }
.study-options button { border:var(--control-border-width) solid var(--rule); background:transparent; color:var(--ink); padding:.55rem .8rem; font-size:var(--type-body-detail); }
.study-options button[aria-pressed="true"] { background:var(--ink); color:var(--paper); }
.study-motion { margin-top:var(--space-detail-gap); color:var(--text-soft); font-size:var(--type-navigation); }
@media(max-width:720px) { .study-header { padding-top:var(--space-4); } .study-header .label { display:none; } .plate-hero { padding-bottom:24rem; } .study-toolbar { padding:var(--space-3) var(--gutter); } }

.plate-hero { background:none; }
.plate-dots { border-top:0; }
.transition-anchor { position:absolute; bottom:0; scroll-margin-top:48svh; }

.plate-hero::before { display:none; }
.plate-hero { min-height:100svh; padding:var(--space-28) var(--gutter) var(--space-28); align-content:center; gap:0; }
.hero-copy { margin-inline:auto; max-width:54rem; justify-items:center; text-align:center; gap:var(--space-5); }
.promise { max-width:22ch; font-size:clamp(2.3rem,4.2vw,4.25rem); }
.hero-line { max-width:38rem; color:var(--color-text-strong); }
.hero-actions { justify-items:center; }
.hero-reason { max-width:40rem; }
.study-toolbar { display:flex; align-items:center; justify-content:space-between; gap:.8rem var(--space-6); flex-wrap:wrap; background:var(--color-paper-overlay); }
.study-toolbar p { margin:0; font-size:var(--type-label); color:var(--text-soft); }
.study-toolbar a { font-size:var(--type-body-detail); }
.study-options button { min-height:var(--control-language-size); }
.show-background .hero-copy { visibility:hidden; }
@media(max-width:720px) { .plate-hero { padding-top:var(--space-26); padding-bottom:10rem; } .hero-copy { gap:var(--space-4); } .hero-line { font-size:var(--type-body); } .hero-reason { font-size:.95rem; } .study-toolbar p { display:none; } }

/* Navigation overlays the artwork without a background band. */
.study-header { background:none; }
.study-header .wordmark, .study-languages button { color:var(--color-white); text-shadow:0 1px 3px var(--color-shadow-strong); }
.study-header :focus-visible { outline-color:var(--color-white); }
.hero-line { color:var(--text); }
.hero-note { color:var(--text); }

.kicker { color:var(--color-white); text-shadow:0 1px 3px var(--color-shadow-soft); }
.promise, .hero-line { color:var(--text); }
.hero-copy::before { content:none; }
@media(max-width:720px) {
 .plate-hero { padding-top:21rem; }

 .hero-copy::before { display:none; }
 .kicker { color:var(--text); text-shadow:none; }
}

/* Scoped proposal. The source styles and scroll behavior of 04 are unchanged. */
.identity-wordmark { display:inline-flex; align-items:center; gap:.65rem; font-size:1.5rem; font-weight:var(--type-weight-medium); letter-spacing:var(--type-tracking-display); line-height:1; }
.identity-wordmark .orinne-mark { width:2.15rem; height:2.15rem; flex:none; }
.study-header { padding-block:var(--space-copy-gap); }
.study-jumps { display:flex; gap:var(--space-8); font: .7rem var(--mono); text-transform:uppercase; letter-spacing:.09em; }
.study-jumps a,.study-languages a { color:var(--color-white); text-decoration:none; text-shadow:0 1px 3px var(--color-shadow); }
.study-jumps a:hover { text-decoration:underline; text-underline-offset:.35em; }
.study-languages { gap:var(--space-4); }
.study-languages a { font-size:var(--type-body-detail); padding:var(--space-2) 0; }
.study-languages a[aria-current] { text-decoration:underline; text-underline-offset:.4em; }
.identity-toolbar { position:fixed; bottom:1rem; right:1rem; display:flex; gap:var(--space-4); align-items:center; z-index:10; padding:var(--space-detail-gap) .9rem; background:var(--paper); border:var(--control-border-width) solid var(--rule); box-shadow:0 3px 18px var(--color-shadow-toolbar); font: .68rem var(--mono); color:var(--text); }
.identity-toolbar a { text-decoration:none; padding:.35rem 0; }
.identity-toolbar button { border:0; border-left:var(--control-border-width) solid var(--rule); padding:.35rem 0 .35rem var(--space-4); background:none; color:var(--ink); font:inherit; cursor:pointer; }
.example-heading,.trust-intro { display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-20); align-items:end; }
.example-heading h2,.trust-intro h2 { max-width:19ch; }
.example-heading .lede,.trust-intro .lede { max-width:33rem; }
.study-examples { gap:3.2rem; padding-bottom:var(--space-22); }
.example-tabs { display:flex; border-bottom:var(--control-border-width) solid var(--rule); gap:var(--space-12); }
.example-tabs button { position:relative; display:flex; align-items:baseline; gap:.7rem; border:0; background:none; padding:.9rem 0 1.05rem; color:var(--text-soft); font:var(--type-weight-medium) 1.25rem var(--sans); cursor:pointer; }
.tab-index { font: .68rem var(--mono); color:var(--ink-soft); }
.example-tabs button::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform var(--motion-tab) var(--motion-ease); }
.example-tabs button[aria-selected="true"] { color:var(--ink); }
.example-tabs button[aria-selected="true"]::after { transform:scaleX(1); }
.example-board { margin-top:calc(-1 * var(--space-4)); }
.example-panel { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.example-panel[hidden] { display:none; }
.example-panel:not([hidden]) { animation:panel-in var(--motion-state) var(--motion-ease); }
@keyframes panel-in { from { opacity:.3; transform:translateY(5px); } to { opacity:1; transform:none; } }
.flow-stage { min-width:0; padding:0 var(--space-8) 1.8rem; border-right:var(--control-border-width) solid var(--rule); }
.flow-stage:first-child { padding-left:0; }
.flow-stage:last-child { padding-right:0; border:0; }
.flow-label { display:flex; align-items:center; gap:.7rem; color:var(--ink); font:.67rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.flow-label i { width:6px; height:6px; display:inline-block; transform:rotate(45deg); background:var(--ink); flex:none; }
.flow-stage:nth-child(2) .flow-label i { width:8px; height:8px; }
.flow-visual { height:14rem; display:flex; align-items:center; justify-content:center; padding:var(--space-6) .4rem; }
.sample-paper { width:70%; max-width:13rem; padding:1.1rem var(--space-copy-gap); display:flex; flex-direction:column; gap:var(--space-2); color:var(--text); background:var(--color-surface); border:var(--control-border-width) solid var(--color-border-paper); box-shadow:5px 7px 0 var(--color-shadow-paper); transform:rotate(-5deg); font-size:.72rem; }
.sample-paper b { font-size:1.1rem; font-weight:var(--type-weight-medium); }
.sample-paper strong { font-size:.86rem; text-align:right; font-weight:var(--type-weight-medium); }
.sample-eyebrow { font:.58rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.paper-lines { height:2.2rem; background:repeating-linear-gradient(to bottom,transparent 0 9px,var(--color-paper-lines) 9px 10px); }
.sample-paper.sample-email { transform:rotate(-3deg); width:80%; }
.sample-email p { color:var(--text-soft); font-size:.83rem; line-height:var(--type-line-body); padding-top:var(--space-2); }
.paper-grid { height:3.8rem; background:repeating-linear-gradient(0deg,transparent 0 15px,var(--color-paper-grid) 15px 16px),repeating-linear-gradient(90deg,transparent 0 40px,var(--color-paper-grid) 40px 41px); }
.sample-fields { width:100%; margin:0; font-size:.79rem; }
.sample-fields > div { display:flex; justify-content:space-between; gap:var(--space-2); padding:.85rem 0; border-bottom:var(--control-border-width) solid var(--color-paper-divider); }
.sample-fields dt { color:var(--text-soft); }
.sample-fields dd { margin:0; font-weight:var(--type-weight-medium); text-align:right; }
.sample-fields .field-check { color:var(--ink); border-bottom:var(--control-border-width) solid var(--ink); }
.result-visual { flex-direction:column; align-items:flex-start; padding-left:var(--space-copy-gap); gap:var(--space-copy-gap); }
.result-rule { width:70%; height:1px; background:var(--rule); }
.flow-stage h3 { font-size:var(--type-card-title); font-weight:var(--type-weight-medium); line-height:1.25; margin:0 0 .7rem; letter-spacing:-.025em; max-width:22ch; }
.flow-stage p { font-size:var(--type-body-small); line-height:1.55; color:var(--text-soft); max-width:34ch; }
.example-disclaimer { border-top:var(--control-border-width) solid var(--rule); padding-top:var(--space-4); font-size:.72rem; color:var(--text-soft); }
.example-measure { margin-top:calc(-1 * var(--space-group-gap)); font-size:var(--type-body-detail); line-height:1.55; color:var(--text-soft); max-width:76ch; }
.result-document { display:grid; gap:var(--space-detail-gap); width:min(100%,13rem); padding:var(--space-4); border:var(--control-border-width) solid var(--rule); background:var(--color-surface); color:var(--ink); }
.result-document b { font-size:var(--type-body-small); font-weight:var(--type-weight-medium); line-height:1.3; }
.result-document > span:last-child { font-size:.72rem; color:var(--text-soft); }
.result-check { font-size:1.6rem; line-height:1; }
.study-trust { gap:var(--space-16); padding-bottom:var(--space-28); }
.trust-layout { display:grid; grid-template-columns:1fr 1.25fr; gap:var(--space-24); align-items:center; }
.handover-sheet { background:var(--color-surface); border:var(--control-border-width) solid var(--color-paper-edge); padding:var(--space-8) var(--space-9) 1.4rem; box-shadow:8px 8px 0 var(--paper),9px 9px 0 var(--color-paper-edge); transform:rotate(-2deg); }
.sheet-top { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-8); }
.sheet-top .orinne-mark { width:4rem; color:var(--ink); }
.sheet-top .label { font-size:.63rem; color:var(--text-soft); }
.handover-sheet h3 { font-size:clamp(1.6rem,2.7vw,2.8rem); line-height:1.07; font-weight:var(--type-weight-medium); letter-spacing:-.035em; margin:0 0 var(--space-10); max-width:16ch; }
.sheet-list { display:grid; }
.sheet-list > span { display:flex; gap:var(--space-4); align-items:baseline; border-top:var(--control-border-width) solid var(--rule); padding:.8rem 0; font-size:var(--type-navigation); }
.sheet-list b { font: .65rem var(--mono); color:var(--ink); }
.sheet-bottom { margin-top:var(--space-8); display:flex; align-items:center; justify-content:space-between; font-size:var(--type-body); font-weight:var(--type-weight-medium); letter-spacing:-.04em; }
.belt-motif { display:inline-flex; gap:.8rem; transform:rotate(-25deg); padding-right:.4rem; }
.belt-motif i { width:4px; height:4px; background:var(--ink); transform:rotate(45deg); }
.belt-motif i:nth-child(2) { width:6px; height:6px; margin-top:-1px; }
.working-principles article { display:grid; grid-template-columns:2rem 1fr; gap:var(--space-4); padding:var(--space-group-gap) 0; border-top:var(--control-border-width) solid var(--rule); }
.working-principles article:first-child { padding-top:var(--space-5); }
.principle-number { color:var(--ink); font:.7rem var(--mono); padding-top:.3rem; }
.working-principles h3 { font-size:1.18rem; font-weight:var(--type-weight-medium); line-height:1.2; letter-spacing:-.025em; margin:0 0 .7rem; max-width:25ch; }
.working-principles p { font-size:.92rem; line-height:1.55; color:var(--text-soft); }
@media(min-width:1500px) { .study-examples,.study-trust { padding-inline:max(var(--gutter),calc((100vw - var(--layout-content-max)) / 2)); } }
@media(max-width:1000px) { .study-jumps { gap:var(--space-4); font-size:.6rem; } .example-heading,.trust-intro { gap:var(--space-10); } .flow-stage { padding-inline:var(--space-4); } .trust-layout { gap:var(--space-12); } .handover-sheet { padding:var(--space-6); } }
@media(max-width:720px) {
 .study-jumps { display:none; }
 .study-header { padding-top:var(--space-4); }
 .identity-wordmark { font-size:1.35rem; }
 .example-heading,.trust-intro,.trust-layout { grid-template-columns:1fr; gap:var(--space-6); }
 .study-examples,.study-trust { padding-top:var(--space-24); padding-bottom:var(--space-16); gap:2.2rem; }
 .study-examples .plate-label,.study-trust .plate-label { top:3rem; }
 .example-tabs { gap:0; justify-content:space-between; }
 .example-tabs button { font-size:var(--type-body); gap:.4rem; }
 .example-tabs .tab-index { display:none; }
 .example-panel { grid-template-columns:1fr; }
 .flow-stage,.flow-stage:first-child,.flow-stage:last-child { padding:var(--space-6) 0 var(--space-7); border-right:0; border-bottom:var(--control-border-width) solid var(--rule); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--space-4); align-items:center; }
 .flow-stage:last-child { border-bottom:0; }
 .flow-label { grid-column:1 / -1; font-size:.65rem; margin-bottom:var(--space-4); }
 .flow-visual { grid-row:2 / 4; height:auto; min-height:10rem; padding:var(--space-2) 0; }
 .flow-stage h3 { align-self:end; font-size:1.1rem; }
 .flow-stage p { align-self:start; font-size:var(--type-body-detail); }
 .sample-paper { width:90%; padding:.7rem; }
 .sample-paper.sample-email { width:95%; }
 .sample-paper b { font-size:.95rem; }
 .sample-fields { font-size:.64rem; }
 .sample-fields > div { padding:.65rem 0; }
 .result-visual { align-items:center; }
 .result-visual .sample-eyebrow { font-size:.53rem; }
 .trust-layout { gap:var(--space-12); }
 .handover-sheet { margin:var(--space-4) var(--space-2); padding:var(--space-6); }
 .handover-sheet h3 { font-size:2.2rem; }
 .working-principles h3 { font-size:1.22rem; }
 .identity-toolbar { bottom:.65rem; right:.65rem; gap:.85rem; padding:.4rem .7rem; }
}
@media(prefers-reduced-motion:reduce) { .example-panel:not([hidden]) { animation:none; } .example-tabs button::after { transition:none; } }

/* Approved identity: Satoshi, Cabinet Grotesk and the swept orbit. */
/* Font choices live in the shared tokens, with no per-page family overrides. */

body,button,input,select { font-family:var(--sans); }
.skip:focus { position:fixed; top:.5rem; left:var(--gutter); z-index:20; max-width:calc(100vw - 2 * var(--gutter)); padding:.85rem 1.1rem; background:var(--paper); color:var(--text); border:var(--control-border-width) solid var(--ink); box-shadow:0 4px 16px var(--color-shadow-focus); }
.mobile-network { display:none; position:relative; height:16rem; margin-left:.3rem; }
.mobile-network svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.network-line { fill:none; stroke:var(--ink); stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:calc(1 - clamp(0,(var(--p,0) - var(--a)) / var(--w),1)); }
.network-nodes { position:absolute; inset:0; display:grid; grid-template-columns:46% 46%; justify-content:space-between; grid-template-rows:repeat(4,1fr); }
.network-nodes > span { position:relative; display:flex; align-items:center; padding-left:var(--space-4); font-size:.83rem; line-height:1.4; color:var(--text); }
.network-nodes > span::before { content:''; position:absolute; width:6px; height:6px; left:-3px; top:calc(50% - 3px); border-radius:50%; background:var(--ink); }
.promise,h2,.step strong,.handover-sheet h3 { text-wrap:balance; font-family:var(--sans); font-weight:var(--type-weight-medium); letter-spacing:var(--type-tracking-display); }
.promise { font-size:clamp(2.3rem,4.3vw,4.6rem); line-height:1.08; max-width:20ch; }
h2 { font-size:var(--type-heading); line-height:1.1; max-width:21ch; }
.hero-line,.lede { font-size:var(--type-lede); line-height:var(--type-line-copy); }
.hero-line { max-width:36rem; }
.hero-reason { font-size:.94rem; }
.hero-note { font-size:var(--type-meta); }
.identity-wordmark { font-family:var(--brand); font-size:var(--type-wordmark); font-weight:var(--type-weight-medium); letter-spacing:var(--type-tracking-display); gap:.55rem; line-height:1; }
.identity-wordmark .orinne-mark { width:2.1rem; height:2.1rem; }
.refined-marks,.refined-marks > span { display:inline-flex; align-items:center; flex:none; }

.sheet-top .refined-marks { color:var(--ink); }
.kicker,.plate-label,.hero-note,.cta,.footer-nav,.footer-mail,.footer-bottom,.step-time,.who-label,.cal-fallback,.label,.flow-label,.sample-eyebrow { font-family:var(--sans); text-transform:none; letter-spacing:var(--type-tracking-label); }
.plate-label { font-size:var(--type-label); gap:.8rem; }
.plate-label span:first-child { font-size:var(--type-section-number); font-variant-numeric:tabular-nums; }
.kicker { font-size:var(--type-body-detail); }
.cta { font-size:var(--type-button); font-weight:var(--type-weight-medium); padding:var(--control-button-padding-block) var(--control-button-padding-inline); }
.step-time { font-size:var(--type-label); font-weight:var(--type-weight-medium); }
.step strong { font-size:var(--type-step-title); }
.flow-label { font-size:var(--type-caption); }
.sample-eyebrow { font-size:var(--type-sample-eyebrow); }
.example-tabs button { font-size:var(--type-tabs); }
.tab-index { font:var(--type-weight-regular) .73rem var(--sans); }
.flow-stage h3,.working-principles h3,.legend strong { font-weight:var(--type-weight-medium); letter-spacing:-.025em; }
.handover-sheet h3 { font-size:var(--type-heading-handover); }
.sheet-bottom > span:first-child { font-family:var(--brand); font-size:1.4rem; }

/* Transparent on arrival; the paper header appears only beyond the hero. */
.refined-header { position:fixed; inset:0 0 auto; z-index:8; min-height:5rem; padding:var(--space-4) var(--gutter); display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:var(--space-6); color:var(--color-white); background:transparent; border-bottom:var(--control-border-width) solid transparent; transition:transform var(--motion-navigation) var(--motion-ease),background-color var(--motion-fast) var(--motion-ease); }
.refined-header .identity-wordmark { justify-self:start; color:inherit; text-shadow:0 1px 3px var(--color-shadow-header); }
.refined-desktop-nav,.refined-header-actions,.refined-languages { display:flex; align-items:center; }
.refined-desktop-nav { gap:1.65rem; }
.refined-header-actions { justify-self:end; gap:1.35rem; }
.refined-languages { gap:.7rem; font-size:.75rem; }
.refined-header a { text-decoration:none; }
.refined-desktop-nav a { font-size:var(--type-navigation); text-shadow:0 1px 3px var(--color-shadow-header); }
.refined-languages a { padding:var(--space-2) 0; text-shadow:0 1px 3px var(--color-shadow-header); }
.refined-languages a[aria-current] { text-decoration:underline; text-underline-offset:.35rem; }
.refined-header a:hover { text-decoration:underline; text-underline-offset:.35rem; }
.nav-book { font-size:var(--type-label); padding:.7rem .95rem; border:var(--control-border-width) solid var(--color-border-inverse); }
.refined-header.is-away { transform:translateY(-110%); }
.refined-header:focus-within { transform:none; }
.refined-header.on-paper,.refined-header.menu-open { color:var(--text); background:var(--paper); border-bottom-color:var(--rule); }
.refined-header.on-paper a,.refined-header.menu-open a { text-shadow:none; }
.refined-header.on-paper .nav-book,.refined-header.menu-open .nav-book { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.refined-desktop-nav a[aria-current="location"] { color:var(--ink); text-decoration:underline; text-underline-offset:.4rem; }
.menu-toggle { display:none; }
.mobile-navigation[hidden] { display:none; }
.mobile-navigation { grid-column:1 / -1; }
#results,#trust,#book,#footer { scroll-margin-top:var(--space-20); }

/* A single quiet pass of the connecting line, triggered by entry or tab change. */
.flow-label { position:relative; padding-bottom:.8rem; }
.flow-label::before,.flow-label::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; transform-origin:left; }
.flow-label::before { background:var(--rule); }
.flow-label::after { background:var(--ink); transform:scaleX(0); }
.example-panel.is-tracing .flow-label::after { animation:trace-connection var(--motion-trace) var(--motion-ease-out) both; }
.example-panel.is-tracing .flow-stage:nth-child(2) .flow-label::after { animation-delay:.2s; }
.example-panel.is-tracing .flow-stage:nth-child(3) .flow-label::after { animation-delay:.4s; }
.example-panel.is-tracing .flow-label i { animation:trace-point var(--motion-state) var(--motion-ease-out) both; }
.example-panel.is-tracing .flow-stage:nth-child(2) .flow-label i { animation-delay:.2s; }
.example-panel.is-tracing .flow-stage:nth-child(3) .flow-label i { animation-delay:.4s; }
.example-panel:not([hidden]) { animation:none; }
@keyframes trace-connection { to { transform:scaleX(1); } }
@keyframes trace-point { from { opacity:.3; } to { opacity:1; } }

/* Booking is one composition: a compact invitation above the available times. */
.refined-booking { min-height:0; padding-bottom:var(--space-24); }
.booking-layout { display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:start; }
.booking-invitation { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-4) var(--space-20); align-items:start; }
.booking-invitation h2 { grid-column:1; grid-row:1 / 3; max-width:20ch; font-size:var(--type-heading-booking); }
.booking-invitation .lede { grid-column:2; font-size:var(--type-body); max-width:45ch; }
.meeting-facts { grid-column:2; display:flex; flex-wrap:wrap; gap:.7rem var(--space-copy-gap); list-style:none; margin:0; padding:.9rem 0; border-block:var(--control-border-width) solid var(--rule); font-size:var(--type-body-detail); }
.meeting-facts li { white-space:nowrap; }
.booking-host { grid-column:1; grid-row:3; display:flex; align-items:center; gap:.9rem; }
.host-point { width:.55rem; height:.55rem; background:var(--ink); transform:rotate(45deg); margin-left:.2rem; }
.booking-host > div { display:grid; gap:.15rem; }
.booking-host strong { font-size:var(--type-body); font-weight:var(--type-weight-medium); }
.booking-host span:last-child { font-size:var(--type-label); color:var(--text-soft); }
.booking-note { grid-column:2; grid-row:3; color:var(--text-soft); font-size:.84rem; max-width:45ch; }
.booking-schedule { border:var(--control-border-width) solid var(--rule); background:var(--paper); padding:var(--space-5); min-width:0; }
.schedule-heading { display:flex; justify-content:space-between; align-items:center; font-size:var(--type-schedule-heading); padding:0 var(--space-2) var(--space-4); border-bottom:var(--control-border-width) solid var(--rule); }
.schedule-arrow { color:var(--ink); font-size:1.5rem; }
.booking-schedule .cal-inline { border:0; padding-top:var(--space-4); min-height:34rem; }
.booking-schedule .cal-fallback { border-top:var(--control-border-width) solid var(--rule); padding:var(--space-4) var(--space-2) 0; font-size:var(--type-meta); letter-spacing:0; text-transform:none; line-height:1.6; }
.booking-schedule .cal-fallback a { white-space:nowrap; }

@media(max-width:1150px) { .booking-invitation { column-gap:var(--space-10); } .booking-schedule { max-width:100%; } }
@media(max-width:1000px) { .refined-header { gap:var(--space-4); } .refined-desktop-nav { gap:var(--space-4); } .refined-header-actions { gap:.9rem; } .refined-desktop-nav a { font-size:var(--type-navigation-small); } }
@media(max-width:860px) {
 .refined-header { display:grid; grid-template-columns:1fr auto; padding-block:var(--space-4); min-height:4.6rem; gap:0; }
 .refined-desktop-nav,.nav-book { display:none; }
 .refined-header-actions { gap:1.3rem; }
 .menu-toggle { display:block; padding:.45rem 0 .45rem .8rem; border:0; border-left:var(--control-border-width) solid currentColor; background:none; color:inherit; font:var(--type-weight-medium) .8rem var(--sans); cursor:pointer; }
 .mobile-navigation { display:grid; gap:var(--space-1); margin-top:var(--space-4); padding:var(--space-detail-gap) 0 .2rem; border-top:var(--control-border-width) solid var(--rule); }
 .mobile-navigation a { padding:.7rem 0; font-size:var(--type-card-title); }
 .mobile-navigation a:last-child { color:var(--ink); }
}
@media(max-width:720px) {
 /* Mobile has one entry space per section, including nested sticky panes. */
 .plate-hero { min-height:0; align-content:start; padding-top:clamp(9rem,22svh,12rem); padding-bottom:var(--space-16); }

 .plate-dots,.plate-process { padding-top:0; }
 .dots-sticky,.process-sticky { padding-top:var(--space-22); }
 /* Both explanations stay in reading order; a taller second state must never
    jump above the viewport when browser chrome leaves less vertical room. */
 .plate-dots { height:auto; }
 .dots-sticky { position:relative; top:auto; min-height:0; padding-bottom:var(--space-12); row-gap:var(--space-8); }
 .dots-copy { display:grid; min-height:0; height:auto; gap:var(--space-12); }
 #problem .dots-step { position:relative; inset:auto; align-content:start; opacity:1; transform:none; filter:none; pointer-events:auto; transition:none; }
 #problem #approach { top:var(--approach-offset,50%); scroll-margin-top:var(--space-20); }
 #problem .chart-box { display:none; }
 .mobile-network { display:block; }
 html:not(.js) .dots-copy { height:auto; }
 html:not(.js) .network-line { stroke-dashoffset:0; }
 .refined-header .identity-wordmark { font-size:var(--type-wordmark-mobile); }
 .refined-header .identity-wordmark .orinne-mark { width:1.85rem; height:1.85rem; }
 .promise { font-size:2.3rem; max-width:19ch; }
 .hero-line { font-size:var(--type-body); }
 .kicker { font-size:.79rem; }
 .hero-reason { font-size:var(--type-body-small); }
 .plate-label { font-size:var(--type-label); }
 .step-time { font-size:.75rem; }
 .flow-label { font-size:var(--type-caption); }
 .flow-label::after { right:0; }
 .booking-invitation { grid-template-columns:1fr; gap:1.4rem; }
 .booking-invitation h2 { font-size:var(--type-heading-booking-mobile); }
 .refined-booking .booking-invitation > * { grid-column:1 / -1; grid-row:auto; }
 .refined-booking { padding-top:var(--space-24); }
 .refined-booking .plate-label { top:3rem; }
 .booking-schedule { padding:var(--space-3); }
 .booking-schedule .cal-inline { min-height:34rem; }
 .meeting-facts { gap:var(--space-4); }

}
@media(prefers-reduced-motion:reduce) { .dots-copy { height:auto; } .network-line { stroke-dashoffset:0; } .refined-header { transition:none; } .example-panel.is-tracing .flow-label::after { animation:none; transform:scaleX(1); } .example-panel.is-tracing .flow-label i { animation:none; } }

.cal-widget[hidden] { display:none; }
.cal-widget { width:100%; }

/* A wide viewport may still be too short for a pinned explanation. */
.dots-copy { height:var(--dots-copy-height,28rem); }
#problem.is-flowing,
html:not(.js) #problem { height:auto; }
#problem.is-flowing .dots-sticky,
html:not(.js) #problem .dots-sticky { position:relative; top:auto; height:auto; min-height:0; overflow:visible; }
#problem.is-flowing .dots-copy,
html:not(.js) #problem .dots-copy { display:grid; height:auto; min-height:0; gap:var(--space-12); }
#problem.is-flowing .dots-step,
html:not(.js) #problem .dots-step { position:relative; inset:auto; align-content:start; opacity:1; transform:none; filter:none; pointer-events:auto; transition:none; }
#problem.is-flowing #approach { top:var(--approach-offset,50%); scroll-margin-top:var(--space-20); }
@media(max-width:720px) { .dots-copy { height:auto; } }

/* Shared control shape; illustration circles keep their own geometry. */
.cta, .nav-book, #journey-pause { border-radius:var(--control-radius); }