/* Layout: a machine-shop drawing sheet. Crosshair grid field, title-block HUD,
   one exploded wireframe assembly as the hero object; services are its parts. */
:root {
  color-scheme: light;
  --bg: #e3dccf;          /* warm stone */
  --page: #e3dccf;        /* the page's stone, kept when a dark section redefines --bg */
  --panel: #d9d1c3;
  --rule: #cbc2b2;
  --rule-hi: #aea493;
  --fg: #1b1916;          /* graphite ink */
  --muted: #5e584f;       /* warm grey: 5.2:1 on stone, 4.6:1 on panel */
  --signal: #e8572a;      /* orange: primary action + one highlight per screen only */
  --signal-ink: #1a0b05;
  --steel: #1f44c5;       /* cobalt drafting ink: dimension lines, drawings, AI and Research marks (6.4:1 on stone) */
  --signal-text: #a83c18; /* orange as TEXT on light backgrounds (4.6:1); fills keep --signal */
  --live: #4f8a45;        /* status green */
  --grid: rgba(40,28,14,.05);
  --matrix: #14a04c; --matrix-glow: rgba(20,160,76,.45); --matrix-lead: #0b6b31;
  --grid-mark: rgba(27,25,22,.16);
  /* 3D type side faces: near → far */
  --x-ink0: #857d6f; --x-ink1: #c2b9a9;
  --x-hl0: #b8431c;  --x-hl1: #dca58c;
  --x-ol0: #cfc6b6;  --x-ol1: #ddd6c9;
  --x-shadow: rgba(40,28,14,.18);

  /* Signature colour field: header, hero, security, contact. Deep cobalt (was moss), so the homepage and the
     sub pages share one blue; the line drawings are a pale blue-white so they read on it. */
  --field-bg: #33509c; --field-panel: #3c5cae; --field-rule: #4d69b3; --field-rule-hi: #7d93d2;
  --field-fg: #ffffff; --field-muted: #e1e8fb; --field-steel: #cfdcff; --field-live: #b9dc8c;
  --field-ink0: #9aaedf; --field-ink1: #26407f; --field-hl0: #b8431c; --field-hl1: #3a2f4a;
  --field-ol0: #4763ad; --field-ol1: #2d4889;
  --field-glow: 227,220,207;

  --f-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-body: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: 0.72rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  --step-3: clamp(2.6rem, 1.4rem + 5vw, 5.2rem);
  --step-4: clamp(3.4rem, 1rem + 6.6vw, 7.4rem);

  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --header-h: 60px;
}
/* Anything inside a field re-reads the same tokens, so components need no field variants. */
.field {
  --bg: var(--field-bg); --panel: var(--field-panel); --rule: var(--field-rule); --rule-hi: var(--field-rule-hi);
  --fg: var(--field-fg); --muted: var(--field-muted); --steel: var(--field-steel); --live: var(--field-live);
  --x-ink0: var(--field-ink0); --x-ink1: var(--field-ink1); --x-hl0: var(--field-hl0); --x-hl1: var(--field-hl1);
  --signal-text: var(--signal);   /* on the dark fields plain orange reads fine */
  --x-ol0: var(--field-ol0); --x-ol1: var(--field-ol1); --x-shadow: rgba(0,0,0,.34);
  --grid: rgba(227,220,207,.06); --grid-mark: rgba(227,220,207,.2);
  --matrix: #4dff88; --matrix-glow: rgba(77,255,136,.55); --matrix-lead: #e6ffee;
  color-scheme: dark; color: var(--fg);
  background-color: var(--bg);
  background-image:
    linear-gradient(118deg, transparent 22%, rgba(255,255,255,.035) 38%, transparent 52%, rgba(255,255,255,.025) 70%, transparent 84%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='192' height='192'><path d='M90 96h12M96 90v12' stroke='%23e3dccf' stroke-opacity='.16' stroke-width='1'/></svg>"),
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 100% 100%, 192px 192px, 96px 96px, 96px 96px;
  transition: background-color .5s;
}

* { box-sizing: border-box; }
/* Elements toggled with the hidden attribute stay hidden even when a class gives them display: flex/grid. */
[hidden] { display: none !important; }
/* Moss behind the page: the rubber-band overscroll and the area under iPhone's status bar read as part of the header. */
html { scroll-behavior: smooth; background: #33509c; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* Cobalt on the body itself: iPhone Safari tints its top bar from this colour, so it matches the header. The stone sheet lives on <main>. */
  background-color: #33509c;  /* the header's cobalt */
  color: var(--fg);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.55;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--field-bg);
}
main {
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='192' height='192'><path d='M90 96h12M96 90v12' stroke='%231b1916' stroke-opacity='.14' stroke-width='1'/></svg>"),
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 192px 192px, 96px 96px, 96px 96px;
}
/* film grain */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 80;
  opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.wrap {
  width: 100%; max-width: 1440px; margin-inline: auto;
  padding-left: var(--gutter); padding-right: var(--gutter-r);
}
.mono {
  font-family: var(--f-mono); font-size: var(--step--1);
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.5;
}
.muted { color: var(--muted); }

/* ---------- Header / HUD ---------- */
.hud {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  /* Solid, so Safari can sample it to tint its own top bar. */
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.hud .wrap {
  height: var(--header-h); display: flex; align-items: center; gap: 24px;
}
/* Wordmark: Overpass Black, drawn from the lettering on US interstate signs. Solid and plain. */
.brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: "Overpass", "Arial Black", "Helvetica Neue", Arial, sans-serif; font-weight: 900; font-size: 1.4rem;
  letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; min-width: 0; line-height: 1;
}
.brand span { padding-top: .12em; }  /* Overpass sits high; this centres the caps on the cog */
.brand { min-height: 44px; }
.cog { flex: none; width: 26px; height: 26px; }
/* Logo: a solid orange cog, always turning; script speeds it up on hover. */
.cog path { fill: var(--signal); transform-origin: 0 0; animation: cog-spin 9s linear infinite; }
@keyframes cog-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cog path { animation: none; } }
/* decode: unresolved letters show as glowing green binary */
.bits { color: var(--matrix); -webkit-text-stroke: 0; text-shadow: 0 0 6px var(--matrix-glow), 0 0 18px var(--matrix-glow) !important; }
.bits b { font-weight: inherit; color: var(--matrix-lead); text-shadow: 0 0 10px var(--matrix), 0 0 24px var(--matrix) !important; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 9px; text-decoration: none; color: var(--muted); white-space: nowrap; }
.nav a:hover { color: var(--fg); }
.clock { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.clock b { color: var(--fg); font-weight: 500; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 18px;
  font-family: var(--f-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; white-space: nowrap;
  border: 1px solid var(--fg); color: var(--fg); text-decoration: none; background: transparent; cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.btn:hover { background: var(--fg); color: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn.hot { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); box-shadow: 0 6px 18px -10px rgba(232,87,42,.55); }
.btn.hot:hover { background: #ee6236; border-color: #ee6236; box-shadow: 0 8px 22px -10px rgba(232,87,42,.65); }
.btn.sm { min-height: 44px; padding: 0 14px; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.btn .arr { transition: transform .18s; }
.btn:hover .arr { transform: translateX(3px); }
/* Chips (examples, questions, backlog) share one shape: a 44px tile that fills when picked. */
.starter, .chip, .ask-chip, .needs span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3;
  border: 1px solid var(--rule-hi); background: transparent; color: var(--fg); cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}
.starter:hover, .chip:hover, .needs label:hover span { border-color: var(--fg); }
.starter[aria-pressed="true"], .chip[aria-pressed="true"], .needs input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.starter:active, .chip:active { transform: translateY(1px); }
/* One focus style everywhere: a 2px ring in the text colour, offset so it never touches the shape. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [role=tab]:focus-visible, .needs input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 3px; }
a, button, summary { transition: color .18s, background-color .18s, border-color .18s, box-shadow .18s, opacity .18s; }

@media (max-width: 980px) { .clock { display: none; } }
/* Below 1100px the seven links no longer fit on one line beside the brand; the header button carries the call to action. */
@media (max-width: 1100px) { .nav { display: none; } .hud .btn { margin-left: auto; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; border-bottom: 1px solid var(--rule); overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; width: 70vmax; height: 70vmax; left: 45%; top: -20%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--field-glow),.14), rgba(var(--field-glow),.04) 55%, transparent);
  filter: blur(10px); animation: glow-drift 16s ease-in-out infinite alternate;
}
@keyframes glow-drift { to { transform: translate(-12vmax, 14vmax) scale(.85); } }
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
.hero > .wrap { position: relative; z-index: 1; }
.cta { position: relative; }
h1, .cta h2 { transform-style: preserve-3d; will-change: transform; }
.cta::before {
  content: ""; position: absolute; width: 60vmax; height: 40vmax; left: 30%; top: 10%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--field-glow),.11), transparent); filter: blur(10px);
}
.cta > .wrap { position: relative; }
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 32px; padding-block: 56px 28px; align-items: center;
}
.sheet-tag {
  display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); margin-bottom: 26px;
}
.sheet-tag .live { color: var(--fg); }
.sheet-tag .live::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
  background: var(--live); vertical-align: 1px; box-shadow: 0 0 0 0 var(--live); animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) { .sheet-tag .live::before { animation: none; } }

h1 {
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  font-size: var(--step-4); line-height: .86; letter-spacing: -.005em; margin: 0;
  text-wrap: balance;
}
h1 .line { display: block; }
h1 .hl { color: var(--signal); }
h1 .outline { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }

.hero-copy { max-width: 34rem; margin: 28px 0 0; font-size: var(--step-1); line-height: 1.45; color: var(--fg); }
.hero-copy em { font-style: normal; color: var(--muted); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.stage { position: relative; aspect-ratio: 1 / 1; max-width: 100%; min-height: 0; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage .corner { position: absolute; color: var(--muted); pointer-events: none; }
.stage .tl { top: 0; left: 0; }
.stage .br { bottom: 0; right: 0; display: flex; align-items: center; gap: 10px; }
.stage .bl { bottom: 0; left: 0; font-variant-numeric: tabular-nums; }
#cvHero { touch-action: pan-y; cursor: grab; }
#cvHero.dragging { cursor: grabbing; }
.scalebar { display: flex; height: 8px; width: 120px; border: 1px solid var(--rule-hi); }
.scalebar i { flex: 1; }
.scalebar i:nth-child(odd) { background: var(--fg); }

.hero-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  border-top: 1px solid var(--rule); padding-block: 14px; color: var(--muted);
}
.hero-foot .wrap { padding-block: 0; }

.hero .wrap > * { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); padding-block: 36px 20px; }
  .stage { aspect-ratio: 5 / 4; }
}

/* ---------- Section scaffolding ---------- */
section.block { padding-block: 100px; border-bottom: 1px solid var(--rule); }
.sec-head {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px 48px;
  margin-bottom: 64px; align-items: start;
}
.sec-head .mono { color: var(--muted); padding-top: 14px; border-top: 1px solid var(--rule-hi); }
.sec-head .mono b { color: var(--fg); font-weight: 500; }
h2 {
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  font-size: var(--step-3); line-height: .9; margin: 0; text-wrap: balance;
}
.sec-head p.honest { font-size: var(--step--1); color: var(--muted); margin-top: 16px; max-width: 34rem; }
.sec-head p.honest::before { content: "◇ "; color: var(--steel); }
.sec-head p { margin: 20px 0 0; max-width: 40rem; color: var(--muted); font-size: 1.08rem; }
@media (max-width: 760px) {
  section.block { padding-block: 72px; }
  .sec-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 40px; }
}

/* ---------- Exploded view ---------- */
.explode-body {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px;
}
.explode-stage {
  position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 24px);
  height: calc(100vh - var(--header-h) - 72px); min-height: 420px;
  border: 1px solid var(--rule); background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.explode-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.explode-stage .meta {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  display: flex; justify-content: space-between; gap: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.explode-stage .meta b { color: var(--fg); font-weight: 500; }
.explode-stage .meta-top { position: absolute; left: 16px; top: 14px; color: var(--muted); }

.parts { list-style: none; margin: 0; padding: 0; }
.part {
  min-height: 44vh; display: flex; flex-direction: column; justify-content: center;
  padding-block: 24px; border-top: 1px solid var(--rule); cursor: default;
}
.part:last-child { min-height: 52vh; }
.part .code { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.part .code::before { content: ""; width: 10px; height: 10px; border: 1px solid var(--muted); transition: all .25s; }
.part h3 {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: var(--step-2); line-height: 1; margin: 14px 0 12px; transition: color .25s;
}
.part p { margin: 0; max-width: 30rem; color: var(--muted); }
.part .spec {
  margin-top: 18px; padding: 10px 12px; border: 1px dashed var(--rule-hi); color: var(--fg);
  align-self: flex-start; max-width: 100%;
}
.part.on .code { color: var(--signal-text); }
.part.on .code::before { background: var(--signal); border-color: var(--signal); }
.part.on h3 { color: var(--fg); }
.part:not(.on) h3 { color: color-mix(in srgb, var(--fg) 55%, var(--bg)); }

@media (max-width: 900px) {
  .explode-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .explode-stage { position: relative; top: auto; height: 380px; min-height: 0; }
  .part, .part:last-child { min-height: 0; padding-block: 28px; }
}

/* ---------- Routing sheet (process) ---------- */
.routing { border: 1px solid var(--rule-hi); overflow-x: auto; }
.routing-grid { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); min-width: 820px; }
.op { padding: 22px 20px 26px; border-right: 1px solid var(--rule); position: relative; }
.op:last-child { border-right: 0; }
.op .num { color: var(--muted); }
.op h3 {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: 2rem; line-height: 1; margin: 14px 0 10px;
}
.op p { margin: 0; color: var(--muted); font-size: .94rem; }
.op .hold {
  margin-top: 18px; display: inline-flex; gap: 8px; align-items: center; color: var(--fg);
  border: 1px solid var(--rule-hi); padding: 5px 8px;
}
.op .hold::before { content: ""; width: 7px; height: 7px; background: var(--steel); transform: rotate(45deg); }
.routing-head {
  display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); min-width: 820px;
  border-bottom: 1px solid var(--rule-hi); color: var(--muted);
}
.routing-head div { padding: 9px 20px; border-right: 1px solid var(--rule); }
.routing-head div:last-child { border-right: 0; }
.routing-note { margin-top: 14px; color: var(--muted); }
.routing-note b { color: var(--fg); font-weight: 500; }

/* ---------- Builds ---------- */
.builds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.build { display: flex; flex-direction: column; gap: 14px; text-decoration: none; }
.frame {
  padding: 26px; aspect-ratio: 4 / 3.4; max-width: 100%; display: flex;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.build:hover .frame { transform: translateY(-4px); }
.f-orange { background: #c99b74; }
.f-steel { background: var(--steel); }
.f-cream { background: #1b1916; }
.screen {
  flex: 1; min-width: 0; background: #111; border-radius: 6px; padding: 12px 14px;
  display: flex; flex-direction: column; overflow: hidden; color: #f2ede4;
}
.screen .bar { display: flex; align-items: center; gap: 6px; }
.screen .bar i { width: 6px; height: 6px; border-radius: 50%; background: #3a3a3a; }
.screen .bar .pill { margin-left: auto; height: 10px; width: 34px; border-radius: 6px; background: #c6f36b; }
.screen .big {
  margin: auto 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: .88;
}
.screen .lines { display: grid; gap: 5px; }
.screen .lines i { height: 4px; background: #2c2c2c; border-radius: 2px; }
.screen .lines i:nth-child(2) { width: 70%; }
.f-orange .screen .big span { color: #e7a36f; }
.f-steel .screen .big span { color: #8ea4c2; }
.f-cream .screen { background: #f2eee6; color: #1b1916; }
.f-cream .screen .lines i { background: #d6cfc2; }
.f-cream .screen .big span { color: #b0662f; }
.build-meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.build-meta h3 { margin: 0; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.6rem; line-height: 1; }
.build-meta .mono { color: var(--muted); text-align: right; }
.builds { align-items: start; }
.build.wide { grid-column: span 2; }
.build.wide .frame { aspect-ratio: 8.4 / 3.4; }
.build-desc { margin: 0; color: var(--muted); font-size: .95rem; max-width: 40rem; }
.build-desc .claim { display: inline-block; margin-top: 6px; color: var(--signal-text); font-weight: 700; }
.build:hover .claim .arr { transform: translateX(3px); }
.claim .arr { display: inline-block; transition: transform .2s; }
.f-ks { background: #2c392b; }
.f-ks .screen { background: #141a14; }
.f-ks .screen .big span { color: #c5d39d; }
.f-ks .screen .bar .pill { background: #e8572a; }
.screen .checks { display: flex; flex-wrap: wrap; gap: 6px; }
.screen .checks span { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; padding: 5px 7px; border: 1px solid #34402f; color: #c5d39d; }
.screen .checks span::before { content: "\2713  "; color: #e8572a; }
.f-open { background: transparent; outline: 1.5px dashed var(--rule-hi); outline-offset: -1.5px; }
.f-open .screen { background: transparent; color: var(--fg); }
.f-open .screen .big span { color: var(--signal-text); }
.f-open .screen .lines i { background: var(--rule); }
.f-open .screen .bar .pill { background: var(--signal); }
.f-open .slot { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .builds { grid-template-columns: minmax(0, 1fr); } .build.wide { grid-column: auto; } }

/* ---------- Title block (terms) ---------- */
.titleblock {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--rule-hi);
}
.tb { padding: 18px 18px 22px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); min-width: 0; }
.tb:nth-child(4n) { border-right: 0; }
.tb.wide { grid-column: span 2; }
.tb .mono { color: var(--muted); display: block; margin-bottom: 10px; }
.tb strong { display: block; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.7rem; line-height: 1; }
.tb p { margin: 8px 0 0; color: var(--muted); font-size: .94rem; }
.tb.accent { background: var(--panel); }

/* ---------- Security ---------- */
.sec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule-hi); }
.sec-card {
  position: relative; padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 8px;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); min-width: 0;
  transition: background .3s, box-shadow .3s;
}
.sec-card:nth-child(3n) { border-right: 0; }
.sec-card:nth-last-child(-n+3) { border-bottom: 0; }
.sec-card .ico { width: 30px; height: 30px; fill: none; stroke: var(--fg); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; transition: stroke .3s, filter .3s; }
.sec-card h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.7rem; line-height: 1; margin: 4px 0 2px; }
.sec-card p { margin: 0; color: var(--muted); font-size: .96rem; }
.sec-card .tag { margin-top: auto; padding-top: 14px; color: var(--steel); }
.sec-card:hover { background: color-mix(in srgb, var(--panel) 70%, transparent); box-shadow: inset 0 0 0 1px var(--signal); z-index: 1; }
.sec-card:hover .ico { stroke: var(--signal); }
@media (max-width: 900px) {
  .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-card:nth-child(3n) { border-right: 1px solid var(--rule); }
  .sec-card:nth-child(2n) { border-right: 0; }
  .sec-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--rule); }
  .sec-card:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 760px) {
  .sec-grid { grid-template-columns: minmax(0, 1fr); }
  .sec-card, .sec-card:nth-child(3n) { border-right: 0; padding: 22px 18px; }
  .sec-card:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .sec-card:last-child { border-bottom: 0; }
  .sec-card .ico { width: 26px; height: 26px; margin-bottom: 4px; }
  .sec-card h3 { font-size: 1.45rem; }
}
.tb.accent strong::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 12px; border-radius: 50%; background: var(--live); vertical-align: .18em; }
@media (max-width: 900px) {
  .titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb:nth-child(4n) { border-right: 1px solid var(--rule); }
  .tb:nth-child(2n) { border-right: 0; }
  .tb.wide { grid-column: span 2; border-right: 0; }
}

/* ---------- CTA + footer ---------- */
.cta { padding-block: 120px 60px; }
.cta h2 { font-size: var(--step-4); line-height: .86; }
.cta h2 .hl { color: var(--signal); }
.cta-row { display: flex; flex-wrap: wrap; gap: 32px 64px; margin-top: 40px; align-items: flex-end; justify-content: space-between; }
.cta-row p { max-width: 32rem; margin: 0; color: var(--muted); font-size: 1.1rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.email { font-family: var(--f-mono); font-size: .86rem; color: var(--fg); user-select: all; border-bottom: 1px dashed var(--rule-hi); padding-bottom: 2px; overflow-wrap: anywhere; }

footer { border-top: 1px solid var(--rule); overflow: hidden; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-block: 22px 120px; color: var(--muted); }
.foot-row a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot-row a:hover { color: var(--fg); }

/* ---------- Motion: section transitions ---------- */
.hud-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--fg); opacity: .5; transform-origin: 0 50%; transform: scaleX(0);
}

.routing-progress { min-width: 820px; height: 3px; background: var(--rule); }
.routing-progress i { display: block; height: 100%; background: var(--steel); transform-origin: 0 50%; }

.cta { overflow-x: clip; }
.cta h2 .ln { display: block; }


/* ---------- Floating call button: shows after the hero, steps aside at the contact section ---------- */
.float-cta {
  position: fixed; z-index: 72;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  padding: 15px 20px;
  box-shadow: 0 10px 28px -12px rgba(232,87,42,.6), 0 2px 6px rgba(20,14,8,.22);
  opacity: 0; transform: translateY(18px) scale(.96); pointer-events: none;
  transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1), background .2s, box-shadow .2s;
}
.float-cta.show { opacity: 1; transform: none; pointer-events: auto; }
.float-cta .pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--signal-ink);
  box-shadow: 0 0 0 0 rgba(26,11,5,.5); animation: pulse-ink 2.4s ease-out infinite;
}
@keyframes pulse-ink { 0% { box-shadow: 0 0 0 0 rgba(26,11,5,.45); } 100% { box-shadow: 0 0 0 8px rgba(26,11,5,0); } }
@media (prefers-reduced-motion: reduce) { .float-cta { transition: opacity .2s; transform: none; } .float-cta .pulse-dot { animation: none; } }


/* ---------- Booking form ---------- */
.book { margin-top: 48px; max-width: 980px; }
.book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fld.wide { grid-column: 1 / -1; }
.fld > span, .fld legend { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: 0; }
.fld input, .fld textarea {
  width: 100%; background: var(--panel); color: var(--fg); border: 1px solid var(--rule-hi); border-radius: 0;
  padding: 13px 14px; font: inherit; font-size: 1rem; transition: border-color .2s, box-shadow .2s;
}
.fld textarea { resize: vertical; min-height: 120px; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--muted); opacity: .7; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px rgba(var(--field-glow), .18); }
.fld input.bad, .fld textarea.bad { border-color: var(--signal); }
.needs { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.needs legend { margin-bottom: 8px; width: 100%; }
.needs label { position: relative; display: inline-flex; cursor: pointer; }
.needs input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.book-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px; }
.book-foot .btn[disabled] { opacity: .6; cursor: progress; }
.book-status { margin: 0; color: var(--muted); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
.book-status.err { color: #ffb08f; }
.book-privacy { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; margin-left: auto; }
.book-privacy:hover { color: var(--fg); }
.book.sent .book-privacy { display: none; }
.book.sent .book-grid, .book.sent .book-foot .btn { display: none; }
.book.sent .book-status { color: var(--fg); font-size: .9rem; border: 1px solid var(--rule-hi); padding: 18px 20px; line-height: 1.6; }
@media (max-width: 760px) {
  .book { margin-top: 32px; }
  .book-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .book-foot .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- The path: three stages ---------- */
.stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule-hi); }
.stage-card { padding: 26px 24px 28px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stage-card:last-child { border-right: 0; }
.stage-card:nth-child(2) { background: color-mix(in srgb, var(--panel) 45%, transparent); }
.stage-card:nth-child(3) { background: var(--panel); }
.stage-n { color: var(--muted); }
.stage-card h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: var(--step-2); line-height: 1; margin: 0; }
.stage-card p { margin: 0; color: var(--muted); }
.stage-card .stage-lede { color: var(--fg); font-weight: 500; font-size: 1.08rem; }
.stage-who { margin-top: auto; padding-top: 14px; color: var(--steel); }
/* one rising rule under the stages: authority grows left to right */
.authority { display: flex; align-items: center; gap: 14px; margin-top: 16px; color: var(--muted); }
.authority i { flex: 1; height: 10px; background: linear-gradient(to right, var(--rule) 0 33.3%, var(--rule-hi) 33.3% 66.6%, var(--fg) 66.6%); clip-path: polygon(0 80%, 100% 0, 100% 100%, 0 100%); }
@media (max-width: 900px) {
  .stages { grid-template-columns: minmax(0, 1fr); }
  .stage-card { border-right: 0; border-bottom: 1px solid var(--rule); }
  .stage-card:last-child { border-bottom: 0; }
  .authority { display: none; }
}

/* ---------- Where it fits: a five-column sheet that becomes cards on phones ---------- */
.fits { border: 1px solid var(--rule-hi); }
.fit-row { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr .9fr 1fr; border-bottom: 1px solid var(--rule); }
.fit-row:last-child { border-bottom: 0; }
.fit-row > * { margin: 0; padding: 18px 18px 20px; border-right: 1px solid var(--rule); min-width: 0; font-size: .96rem; color: var(--muted); }
.fit-row > *:last-child { border-right: 0; }
.fit-row h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.45rem; line-height: 1; color: var(--fg); }
.fit-head > * { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; padding-block: 10px; color: var(--muted); }
.fit-row:not(.fit-head):hover { background: color-mix(in srgb, var(--panel) 60%, transparent); }
@media (max-width: 900px) {
  .fit-head { display: none; }
  .fit-row { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 8px; }
  .fit-row > * { padding: 0; border-right: 0; }
  .fit-row h3 { margin-bottom: 4px; }
  .fit-row p::before { content: attr(data-k) " · "; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); }
}

/* ---------- Engagement terms sit under the phases ---------- */
#process .titleblock { margin-top: 40px; }

/* ---------- Booking: starter prompts and the ticket outline ---------- */
.starters { display: flex; flex-wrap: wrap; gap: 8px; }
.starter { border-style: dashed; }
.starter:hover, .starter[aria-pressed="true"] { border-style: solid; }
.ticket { grid-column: 1 / -1; margin: -6px 0 0; max-width: 54rem; color: var(--muted); font-size: .72rem; letter-spacing: .05em; line-height: 1.7; }

/* ---------- Part details panel ---------- */
.part-more {
  align-self: flex-start; margin-top: 14px; min-height: 44px; padding: 0; background: none; border: 0;
  color: var(--fg); cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--rule-hi);
}
.part-more:hover { color: var(--signal-text); border-color: var(--signal-text); }
.part-more:hover .arr { transform: translateX(3px); }
.part-more .arr { transition: transform .2s; }
.part-dialog {
  width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 26px 28px 22px;
  border: 1px solid var(--fg); background: var(--bg); color: var(--fg); box-shadow: 0 30px 80px -20px rgba(20,14,8,.5);
}
.part-dialog::backdrop { background: rgba(27,25,22,.55); backdrop-filter: blur(3px); }
.pi-head { display: flex; justify-content: space-between; align-items: center; color: var(--signal-text); }
.pi-close { width: 44px; height: 44px; margin: -10px -12px 0 0; background: none; border: 0; font-size: 1.1rem; color: var(--fg); cursor: pointer; }
.part-dialog h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: var(--step-2); line-height: 1; margin: 6px 0 18px; }
.pi-list { margin: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0; border-top: 1px solid var(--rule-hi); }
.pi-list dt, .pi-list dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.pi-list dt { color: var(--muted); padding-right: 16px; padding-top: 15px; }
.pi-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; color: var(--muted); }
@media (max-width: 560px) {
  .part-dialog { padding: 20px 18px 18px; }
  .pi-list { grid-template-columns: minmax(0, 1fr); }
  .pi-list dt { border-bottom: 0; padding: 12px 0 2px; }
  .pi-list dd { padding-top: 0; }
}

/* ---------- Ask us ---------- */
.ask { border: 1px solid var(--rule-hi); background: color-mix(in srgb, var(--panel) 50%, transparent); padding: 22px; max-width: 900px; margin-inline: auto; }
.ask-log { display: flex; flex-direction: column; gap: 12px; max-height: 460px; overflow-y: auto; }
.ask-log:empty { display: none; }
.ask-log:not(:empty) { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.msg { max-width: 46rem; padding: 12px 14px; white-space: pre-line; line-height: 1.5; }
.msg.q { align-self: flex-end; background: var(--fg); color: var(--bg); }
.msg.a { align-self: flex-start; border: 1px solid var(--rule-hi); background: var(--bg); }
.msg.a.err { border-color: var(--signal); }
.msg.a .who { display: block; margin-bottom: 4px; color: var(--muted); font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.msg.a.wait .who::after { content: " · thinking"; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .3; } }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ask-form { display: flex; gap: 10px; }
.ask-form input {
  flex: 1; min-width: 0; background: var(--bg); color: var(--fg); border: 1px solid var(--rule-hi);
  padding: 13px 14px; font: inherit; font-size: 1rem;
}
.ask-form input:focus { outline: none; border-color: var(--fg); }
.ask-form .btn[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 760px) { .ask { padding: 16px; } .ask-form { flex-direction: column; } .ask-form .btn { justify-content: center; } }

/* ---------- Try it: workflow mapper, its sheet, and the fallback question box ---------- */
.wf-form { display: flex; flex-direction: column; gap: 12px; }
.wf-label { color: var(--muted); text-align: center; font-size: .8rem; }
.wf-form .ask-chips { justify-content: center; }
.wf-foot { justify-content: center; }
.wf-form textarea {
  width: 100%; background: var(--bg); color: var(--fg); border: 1px solid var(--rule-hi); padding: 13px 14px;
  font: inherit; font-size: 1rem; resize: vertical; min-height: 110px;
}
.wf-form textarea:focus { outline: none; border-color: var(--fg); }
.wf-form .ask-chips { margin: 0; }
.wf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.wf-foot .btn[disabled], .sheet-foot .btn[disabled] { opacity: .6; cursor: progress; }
.wf-clarify { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.wf-q { margin: 0 0 12px; font-weight: 500; }
.wf-q::before { content: "One question · "; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--signal-text); font-weight: 400; }
.sheet { margin-top: 22px; border: 1px solid var(--fg); background: var(--bg); }
.sheet-head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--fg); color: var(--bg); }
.sheet-head b { font-weight: 500; text-align: right; }
.sheet-head em { font-style: normal; opacity: .65; }
.sheet-rows { list-style: none; margin: 0; padding: 0; }
.sheet-rows li {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); border-bottom: 1px solid var(--rule);
  animation: sheet-in .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 140ms);
}
.sheet-rows li > span { padding: 13px 14px; border-right: 1px solid var(--rule); color: var(--muted); }
.sheet-rows li > p { margin: 0; padding: 12px 14px; }
.sheet-rows li.gate > span { color: var(--signal-text); }
.sheet-rows li.gate { background: rgba(232,87,42,.07); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet-rows li { animation: none; } }
.sheet-pilot { display: grid; grid-template-columns: 150px minmax(0, 1fr); background: var(--panel); border-bottom: 1px solid var(--rule); }
.sheet-pilot > span { padding: 13px 14px; color: var(--fg); border-right: 1px solid var(--rule); }
.sheet-pilot > p { margin: 0; padding: 12px 14px; font-weight: 500; }
.sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px; }
.ask-more { margin-top: 22px; border-top: 1px solid var(--rule); padding-top: 14px; }
.ask-more summary { cursor: pointer; color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.ask-more summary:hover { color: var(--fg); }
.ask-more[open] summary { margin-bottom: 12px; }
.pi-ask { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.pi-ask > label { color: var(--muted); }
.pi-close:hover { color: var(--signal-text); }
.pi-answer { margin: 4px 0 0; padding: 12px 14px; border-left: 2px solid var(--signal); background: var(--panel); white-space: pre-line; }
.pi-answer.err { border-left-color: var(--rule-hi); color: var(--muted); }
@media (max-width: 560px) {
  .sheet-rows li, .sheet-pilot { grid-template-columns: minmax(0, 1fr); }
  .sheet-rows li > span, .sheet-pilot > span { border-right: 0; padding-bottom: 0; }
}

/* ---------- Try it tabs and the Be the approver demo ---------- */
.try-tabs { display: flex; gap: 0; margin: -22px -22px 22px; border-bottom: 1px solid var(--rule-hi); }
.try-tabs [role=tab] {
  flex: 1; min-height: 48px; padding: 12px 14px; background: transparent; border: 0; border-right: 1px solid var(--rule-hi);
  font-family: var(--f-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer;
}
.try-tabs [role=tab]:last-child { border-right: 0; }
.try-tabs [role=tab][aria-selected=true] { background: var(--fg); color: var(--bg); }
.try-tabs [role=tab]:not([aria-selected=true]):hover { color: var(--fg); }
.demo-intro { margin: 0 0 12px; text-align: center; }
.demo-pick { justify-content: center; }
.demo-note { text-align: center; color: var(--muted); margin: 0 0 16px; }
.demo-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.demo-steps li {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; text-align: center;
  padding: 9px 4px; border: 1px solid var(--rule-hi); color: var(--muted); transition: background .3s, color .3s, border-color .3s;
}
.demo-steps li.done { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.demo-steps li.now { border-color: var(--signal); color: var(--signal-text); }
.demo-steps li.gate.now { background: var(--signal); color: var(--signal-ink); }
.demo-body { display: flex; flex-direction: column; gap: 12px; }
.demo-card { border: 1px solid var(--rule-hi); background: var(--bg); padding: 14px 16px; animation: sheet-in .45s cubic-bezier(.2,.8,.2,1) both; }
.demo-card.gate { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(232,87,42,.12); }
.demo-card .k { display: block; color: var(--muted); margin-bottom: 8px; }
.demo-card.gate .k { color: var(--signal-text); }
.d-meta { margin: 0 0 8px; }
.d-body { margin: 0; white-space: pre-line; padding: 10px 12px; background: var(--panel); }
.d-att { margin: 8px 0 0; color: var(--muted); }
.d-found { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.d-found div.calc { border-color: var(--steel); background: color-mix(in srgb, var(--steel) 7%, transparent); }
.d-check { margin: 10px 0 0; padding: 8px 12px; font-size: .9rem; border-left: 2px solid var(--live); background: var(--panel); }
.d-check.bad { border-left-color: var(--signal); color: var(--fg); font-weight: 500; }
.d-found div { border: 1px solid var(--rule); padding: 10px 12px; font-size: .9rem; }
.d-found b { display: block; margin-bottom: 4px; }
.d-found ul { margin: 0; padding-left: 16px; color: var(--muted); }
.d-wait::after { content: " ▍"; animation: blink 1s steps(2) infinite; }
.d-summary { margin: 0 0 10px; font-weight: 500; }
.d-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.d-table th { text-align: left; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.d-table th, .d-table td { padding: 7px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.d-table td:last-child, .d-reasons .src { font-family: var(--f-mono); font-size: .68rem; color: var(--steel); }
.d-reasons { margin: 10px 0 0; padding-left: 18px; }
.d-reasons li { margin: 4px 0; }
.d-reasons .src { margin-left: 6px; }
.d-hint { margin: 0 0 10px; color: var(--muted); font-size: .92rem; }
#dApprove .fld { margin-bottom: 10px; }
#dApprove .fld input, #dApprove .fld textarea { background: var(--panel); }
.d-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.d-writes { margin: 0; padding-left: 18px; }
.d-writes li { margin: 4px 0; }
.d-writes.none { list-style: none; padding: 0; color: var(--muted); }
.d-log { margin: 0; padding: 0; list-style: none; font-size: .7rem; letter-spacing: .03em; }
.d-log li { display: grid; grid-template-columns: 70px 90px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule); text-transform: none; }
.d-log li span:nth-child(2) { color: var(--muted); text-transform: uppercase; }
.demo-end { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding-top: 6px; }
@media (max-width: 760px) {
  .try-tabs { margin: -16px -16px 16px; }
  .demo-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .d-found { grid-template-columns: minmax(0, 1fr); }
  .d-table th:nth-child(3), .d-table td:nth-child(3) { display: none; }
  .d-log li { grid-template-columns: 62px minmax(0, 1fr); }
  .d-log li span:nth-child(3) { grid-column: 1 / -1; }
}

/* ---------- Running example picker in How it works ---------- */
.run-ex { margin-top: 22px; display: grid; gap: 10px; }
.run-ex .ask-chips { margin: 0; }
.run-label { color: var(--muted); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.run-note { margin: -4px 0 2px; color: var(--muted); font-size: 15px; line-height: 1.45; max-width: 60ch; }
.run-form { max-width: 560px; }
.run-status:empty { display: none; }
#parts .ex { transition: opacity .16s ease; }
#parts.ex-swap .ex { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #parts .ex { transition: none; } }

/* ---------- Alignment pass (kept from the review: A1–A4, A6; contact layout unchanged) ---------- */
/* How it works: heading, intro, running example, then the drawing note. The text runs as wide as the
   heading's longest line (--head-w is measured by script); 40rem until it is. */
@media (min-width: 761px) { #assembly .sec-head p, #assembly .run-note { max-width: var(--head-w, none); } }
#assembly .sec-head p.honest { margin-top: 28px; }
/* Running example: all picks on one line on wider screens instead of the last one wrapping alone. */
@media (min-width: 1100px) {
  .run-ex .ask-chips { gap: 6px; }
  .run-ex .ex-pick { padding: 0 10px; letter-spacing: .05em; white-space: nowrap; }
}
/* Try it: "Or just ask a question" centered to match the centered mapper above it. */
.ask-more summary { justify-content: center; }
/* Phone: example workflows in the mapper as full-width rows instead of a ragged centered stack. */
@media (max-width: 560px) {
  .wf-form .ask-chips { flex-direction: column; align-items: stretch; }
  .wf-form .ask-chips .starter { justify-content: center; }
}

/* ---------- Tablet and narrow laptops: the same page with less across ---------- */
@media (max-width: 980px) {
  .routing-head, .routing-progress, .routing-note { display: none; }
  /* process: a vertical timeline */
  .routing { border: 0; overflow: visible; }
  .routing-grid { grid-template-columns: minmax(0, 1fr); min-width: 0; border-left: 1px solid var(--rule-hi); margin-left: 4px; }
  .op { border-right: 0; padding: 0 0 30px 22px; }
  .op:last-child { padding-bottom: 0; }
  .op::before { content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--fg); }
  .op h3 { font-size: 1.6rem; margin: 8px 0 6px; }
  .op .hold { margin-top: 12px; }
  .op p { max-width: 36rem; }
}
@media (max-width: 900px) {
  section.block { padding-block: 84px; }
  .sec-head { margin-bottom: 48px; }
  /* stacked cards read better with a measure, not a full-width line */
  .stage-card p, .fit-row p, .sec-card p { max-width: 40rem; }
  .stage-card { padding: 22px 20px 24px; }
  /* work: shorter frames once they stack, so the open slot isn't a tall empty box */
  .frame { aspect-ratio: 16 / 8; padding: 22px; }
  .build.wide .frame { aspect-ratio: 16 / 8; }
}
@media (max-width: 760px) {
  /* the header button is always in view on phones; the floating one only covered content */
  .float-cta { display: none; }
}
@media (max-width: 560px) {
  .try-tabs [role=tab] { padding: 10px 8px; font-size: .7rem; letter-spacing: .05em; }
  .ask-chips { gap: 6px; }
  .starter, .chip, .ask-chip, .needs span { padding: 0 11px; }
}

/* ---------- Phone: a simpler edit of the desktop page ---------- */
@media (max-width: 760px) {
  :root { --header-h: 56px; }
  .d-only, .hero-foot, .explode-stage, .part .spec { display: none; }
  .brand { font-size: 1.2rem; }

  .hero .wrap { padding-block: 32px 8px; gap: 8px; }
  .sheet-tag { margin-bottom: 18px; }
  h1 { font-size: clamp(2.9rem, 14.5vw, 4rem); line-height: .88; }
  .hero-copy { font-size: 1.08rem; margin-top: 20px; }
  .hero-cta { margin-top: 24px; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .stage { aspect-ratio: 1 / 1; margin-inline: -8px; }
  .stage .corner { display: none; }

  section.block { padding-block: 64px; }
  .sec-head { gap: 14px; margin-bottom: 28px; }
  .sec-head .mono { padding-top: 10px; }
  h2 { font-size: clamp(2.3rem, 11vw, 3rem); }
  .sec-head p { font-size: 1rem; margin-top: 14px; }

  /* services: a plain list */
  .part, .part:last-child { min-height: 0; padding-block: 22px; }
  .part h3 { font-size: 1.7rem; margin: 10px 0 8px; }
  .part:not(.on) h3, .part.on h3 { color: var(--fg); }
  .part.on .code, .part .code { color: var(--muted); }
  .part.on .code::before, .part .code::before { background: none; border-color: var(--rule-hi); }

  /* sample builds: swipe row */
  .builds {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1) calc(var(--gutter-r) * -1);
    padding-inline: var(--gutter) var(--gutter-r); scrollbar-width: none;
  }
  .builds::-webkit-scrollbar { display: none; }
  .build { flex: 0 0 82%; scroll-snap-align: center; }
  .frame, .build.wide .frame { aspect-ratio: 4 / 3.4; padding: 18px; }
  .build-meta h3 { font-size: 1.35rem; }

  .tb { padding: 14px 14px 18px; }
  .tb strong { font-size: 1.4rem; }

  .cta { padding-block: 72px 40px; }
  .cta h2 { font-size: clamp(3rem, 15vw, 4.2rem); }
  .cta-actions { width: 100%; }
  .cta-actions .btn { flex: 1 1 100%; justify-content: center; }
  .foot-row { padding-block: 18px 90px; }

  .float-cta { padding: 13px 16px; gap: 8px; }
}

/* ---------- Try it teaser on the homepage: two tiles into /try, aligned to the heading column ---------- */
.try-teaser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (min-width: 761px) { .try-teaser, .try-more { margin-left: calc(220px + 48px); } }
.try-tile {
  display: flex; flex-direction: column; gap: 14px; padding: 28px; color: inherit; text-decoration: none;
  border: 1px solid var(--rule-hi); background: color-mix(in srgb, var(--panel) 55%, transparent);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.try-tile:hover { border-color: var(--fg); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(27, 25, 22, .08); }
.try-tile:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.try-k { color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.try-tile h3 { margin: 0; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: .95; }
.try-tile p { margin: 0; color: var(--muted); max-width: 34rem; flex: 1; }
.try-tile .btn { align-self: flex-start; }
.try-tile:hover .btn .arr { transform: translateX(3px); }
.try-more { margin-top: 22px; }
.try-more a { color: var(--muted); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.try-more a:hover { color: var(--fg); }
@media (max-width: 760px) { .try-teaser { grid-template-columns: minmax(0, 1fr); } .try-tile { padding: 22px; } }
@media (prefers-reduced-motion: reduce) { .try-tile, .try-tile:hover { transition: none; transform: none; } }

/* ---------- /try page ---------- */
.page-head { padding-block: 150px 72px; }
.page-head h1 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: var(--step-4); line-height: .88; margin: 0; text-wrap: balance; }
.page-head .sec-head { margin-bottom: 0; }
@media (min-width: 761px) { .try-page #tools .ask { max-width: none; margin-left: calc(220px + 48px); margin-right: 0; } }
.try-page #tools { padding-top: 64px; }
.try-page .nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--signal); }
.try-next-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.try-next .sec-head { margin-bottom: 0; }
@media (max-width: 760px) { .page-head { padding-block: 120px 48px; } .try-page #tools { padding-top: 40px; } }

/* ---------- /research: list, posts, review and write pages (rendered by api/research.js etc.) ---------- */
.inner-page .nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--signal); }
/* Inner pages carry only three links, so they stay visible where the homepage's seven are hidden.
   On phones they drop to their own row under the brand and Book a call. */
@media (max-width: 1100px) { .inner-page .nav { display: flex; } .inner-page .hud .btn { margin-left: 16px; } }
@media (max-width: 640px) {
  .inner-page .hud .wrap { flex-wrap: wrap; row-gap: 0; height: auto; padding-top: 8px; padding-bottom: 2px; }
  .inner-page .hud .btn { margin-left: auto; }
  .inner-page .nav { order: 3; flex-basis: 100%; margin: 0 0 0 -9px; }
}
.r-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 761px) { .r-list, .r-review .r-actions { margin-left: calc(220px + 48px); } }
.r-card { display: grid; gap: 10px; padding: 26px 28px; color: inherit; text-decoration: none; border: 1px solid var(--rule-hi);
  background: color-mix(in srgb, var(--panel) 55%, transparent); transition: border-color .2s, transform .2s; }
.r-card:hover { border-color: var(--fg); transform: translateY(-2px); }
.r-card h2 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: .95; }
.r-card p { margin: 0; color: var(--muted); max-width: 46rem; }
.r-meta { color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.r-kind { color: var(--fg); }
.rk-digest { color: var(--signal-text); }
.r-more { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.r-empty p { color: var(--muted); }
.r-post h1 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: var(--step-3); line-height: .9; margin: 14px 0 0; text-wrap: balance; }
.r-post { padding-top: 150px; }
.r-post .sec-head { margin-bottom: 40px; }
.r-post .sec-head > div:not(.mono) { max-width: 46rem; }
.r-body { max-width: 46rem; }
@media (min-width: 761px) { .r-body { margin-left: calc(220px + 48px); } }
@media (max-width: 760px) { .r-post { padding-top: 112px; } }
.r-post .sec-head .mono a { color: inherit; text-decoration: none; }
.r-post .sec-head p.r-intro { font-size: 1.15rem; color: var(--fg); }
.r-items { margin: 0; padding: 0; list-style: none; counter-reset: it; display: grid; gap: 28px; }
.r-items li { counter-increment: it; border-top: 1px solid var(--rule-hi); padding-top: 18px; }
.r-items li::before { content: counter(it, decimal-leading-zero); font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.r-items h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1; margin: 6px 0 0; }
.r-items p { color: var(--muted); }
.r-why { color: var(--fg) !important; }
.r-why .mono { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-bottom: 4px; }
.r-src { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 12px; letter-spacing: .08em; color: var(--fg); }
.r-note { margin-top: 36px; font-size: 12px; color: var(--muted); }
.r-article { font-size: 1.08rem; line-height: 1.6; }
.r-article h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin: 36px 0 0; }
.r-article h3 { font-family: var(--f-display); text-transform: uppercase; font-size: 1.3rem; margin: 28px 0 0; }
.r-article blockquote { margin: 24px 0; padding-left: 18px; border-left: 2px solid var(--signal); }
.r-article a { color: var(--fg); }
.r-article code { font-family: var(--f-mono); font-size: .9em; }
.r-review { padding-block: 120px 0; border-bottom: 0; }
.r-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 18px; border: 1px solid var(--rule-hi); background: color-mix(in srgb, var(--panel) 60%, transparent); }
.r-actions p { margin: 0 auto 0 0; color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.r-write { max-width: 900px; }
@media (min-width: 761px) { .r-write { margin-left: calc(220px + 48px); } }
@media (prefers-reduced-motion: reduce) { .r-card, .r-card:hover { transition: none; transform: none; } }
.r-post .sec-head .r-meta { border-top: 0; padding-top: 0; }

/* ---------- AI-updates signup (homepage band, /try, /research) ---------- */
.sub-form { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 28px; max-width: 900px; }
.sub-form .fld input { width: 100%; }
.sub-form .btn { min-height: 48px; }
.sub-note { margin-top: 12px; font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.sub-note a { color: inherit; }
.sub-head { margin: 44px 0 0; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1; }
.sub-band { border-bottom: 0; }
@media (max-width: 900px) { .sub-form { grid-template-columns: minmax(0, 1fr); } .sub-form .btn { justify-content: center; } }
/* The form sits inside .sec-head, whose label rules (a rule above .mono, larger p text) must not apply to it. */
.sec-head .sub-form .mono { border-top: 0; padding-top: 0; }
.sec-head .sub-note { font-size: 12px; margin-top: 12px; border-top: 0; padding-top: 0; color: var(--muted); max-width: 40rem; }

/* Be the approver: "your last case" line with a start-over link */
.demo-restored { text-align: center; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 4px 0 14px; }
.link-btn { background: none; border: 0; padding: 0 4px; min-height: 44px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--signal-text); }

/* /try: the industry picker sits above the tools, lined up with them */
.try-industry { margin-bottom: 28px; }
.try-industry .run-ex { margin-top: 0; }
.try-industry .run-label { display: block; padding-top: 14px; border-top: 1px solid var(--rule-hi); }
@media (min-width: 761px) { .try-industry { margin-left: calc(220px + 48px); } }
.wf-last { text-align: center; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px; }

/* Try it on the homepage: panel lined up with the heading column, contents centered */
@media (min-width: 761px) { #ask .ask { max-width: none; margin-left: calc(220px + 48px); margin-right: 0; } }

/* ---------- Header: links centered in the bar at the top of the page. Scrolling down, they jump off the
   header with a puff of dust and land just below it as a framed bar that stays fixed at the top; back at the
   top they jump home into the header. Phones (links hidden) hop the Book a call button instead. ---------- */
:root { --nav-drop: 6px; }   /* where the floating bar lands, relative to its spot in the header */
@media (min-width: 1101px) {
  .hud .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .hud .nav { margin-left: 0; justify-self: center; }
  .hud .wrap > .btn { justify-self: end; }
  .hud.docked .nav { transform: translateY(var(--nav-drop)); }
  /* Once the links have jumped off, the green header itself slides away; only the floating bar stays. */
  .hud .brand, .hud .wrap > .btn, .hud .hud-progress { transition: opacity .3s ease, transform .35s ease; }
  .hud.docked { background: transparent; border-bottom-color: transparent; box-shadow: none; pointer-events: none; }
  .hud.docked .nav { pointer-events: auto; }
  .hud.docked .brand, .hud.docked .wrap > .btn, .hud.docked .hud-progress { opacity: 0; transform: translateY(-24px); }
  .hud { transition: background-color .3s ease, border-color .3s ease, box-shadow .35s ease; }
}
/* The page progress line rides along the bottom of the floating bar. */
.nav-progress { position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px; background: var(--page);
  transform-origin: 0 50%; transform: scaleX(0); opacity: 0; transition: opacity .25s ease .3s; pointer-events: none; }
.hud.docked .nav-progress { opacity: 1; }
/* The section you're reading lights up in the page's stone colour. */
.hud .nav a.active { color: var(--page); }
.hud.docked .nav a.active { box-shadow: inset 0 -2px 0 var(--page); }
/* End of the page: a stone ring draws itself around Research, like a pen mark; it undraws on the way back up. */
.nav a.ring-host { position: relative; }
.nav-ring { position: absolute; left: -12px; right: -12px; top: -9px; bottom: -9px; width: calc(100% + 24px); height: calc(100% + 18px);
  overflow: visible; pointer-events: none; }
.nav-ring path { fill: none; stroke: var(--page); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .55s cubic-bezier(.4, 0, .6, 1); }
.hud.at-end .nav-ring path { stroke-dashoffset: 0; transition-duration: .9s; }
.hud.at-end .nav a.ring-host { color: var(--page); }
@media (prefers-reduced-motion: reduce) { .nav-ring path { transition: none; } }
.hud .nav { position: relative; padding: 3px 6px; border: 1px solid transparent; transform-origin: 50% 100%;
  transition: border-color .2s ease .26s, background-color .2s ease .26s, box-shadow .2s ease .26s; }
/* The floating bar: solid header colour so the links stay readable over light and dark sections. */
.hud.docked .nav { border-color: var(--rule-hi); background: var(--bg); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .55); }
.hud .wrap > .btn { transform-origin: 50% 100%; }
/* Cobalt header: when the links dock, the whole blue bar stays and carries them, with no box around them.
   They land back in their own spot, and the progress tape still runs under them. */
.hud.field { --nav-drop: 0px; }
@media (min-width: 1101px) {
  .hud.field.docked { background-color: var(--bg); border-bottom-color: #4d69b3; }
  .hud.field.docked .nav { border-color: transparent; background: transparent; box-shadow: none; }
}
/* Off the header: crouch, leap, drop to the floating spot, squash on landing, settle. */
@keyframes nav-jump-off {
  0% { transform: none; }
  14% { transform: translateY(2px) scale(1.05, .88); }
  38% { transform: translateY(-14px) scale(.96, 1.07); }
  74% { transform: translateY(var(--nav-drop)) scale(1.06, .88); }
  88% { transform: translateY(calc(var(--nav-drop) - 2px)) scale(.99, 1.02); }
  100% { transform: translateY(var(--nav-drop)); }
}
/* Home again: from the floating spot, leap up and land back in the header. */
@keyframes nav-jump-home {
  0% { transform: translateY(var(--nav-drop)); }
  14% { transform: translateY(calc(var(--nav-drop) + 3px)) scale(1.05, .88); }
  46% { transform: translateY(-14px) scale(.96, 1.07); }
  72% { transform: translateY(0) scale(1.06, .88); }
  87% { transform: translateY(-2px) scale(.99, 1.02); }
  100% { transform: none; }
}
/* Phones: the button hops in place. */
@keyframes hud-hop {
  0% { transform: none; }
  16% { transform: translateY(2px) scale(1.04, .9); }
  42% { transform: translateY(-12px) scale(.97, 1.06); }
  70% { transform: translateY(0) scale(1.06, .88); }
  86% { transform: translateY(-2px) scale(.99, 1.02); }
  100% { transform: none; }
}
.hud .nav.jump-off { animation: nav-jump-off .72s cubic-bezier(.3, .7, .4, 1); }
.hud .nav.jump-home { animation: nav-jump-home .72s cubic-bezier(.3, .7, .4, 1); }
.hud .wrap > .btn.hop { animation: hud-hop .64s cubic-bezier(.3, .7, .4, 1); }
.dust { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--fg); pointer-events: none; opacity: 0;
  animation: hud-dust .7s ease-out forwards; }
@keyframes hud-dust {
  0% { opacity: .45; transform: translate(-50%, -50%) scale(.35); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.7); }
}
@media (prefers-reduced-motion: reduce) { .hud .nav.jump-off, .hud .nav.jump-home, .hud .wrap > .btn.hop { animation: none; } .dust { display: none; } .hud .nav { transition: none; } }

/* ==========================================================================
   Research lab theme (body.lab: /research, posts, write/review, AI-updates pages).
   Cobalt and cool white, modular and open: graph-paper ground, walls framing the
   column, a timeline wall between time (dates) and space (the modules), soft blur
   at the screen edges. Orange is rare on purpose: the cog, the newest node, the
   one primary button.
   ========================================================================== */
body.lab {
  /* Sub pages are mainly cobalt: a calm cobalt ground (#3c5cae, not the electric #2c5dd4), a deeper band for
     the header, title and footer, and warm cream "paper" panels for anything people read (see below). */
  --bg: #3c5cae; --panel: #f4efe4; --fg: #ffffff; --muted: #e1e8fb; --rule: #5674c2; --rule-hi: #7d93d2;
  --steel: #ffffff; --live: #ffffff; --page: #3c5cae; --grid: rgba(227, 220, 207, .06);
  --signal-text: #ffc7b3; --btn-ink: #24396f;
  --cobalt: #e1e8fb; --cobalt-deep: #33509c;
  background: var(--cobalt-deep);
}
body.lab .field, body.lab.field {
  --bg: #33509c; --panel: #3c5cae; --fg: #ffffff; --muted: #e1e8fb; --rule: #4d69b3; --rule-hi: #7d93d2;
  --steel: #ffffff; --live: #ffffff; --grid: rgba(227, 220, 207, .06); --grid-mark: rgba(227, 220, 207, .2);
}
/* Same grid as the homepage's blue sections: faint stone lines every 96px, a stone crosshair every 192px. */
body.lab main {
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='192' height='192'><path d='M90 96h12M96 90v12' stroke='%23e3dccf' stroke-opacity='.16' stroke-width='1'/></svg>"),
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 192px 192px, 96px 96px, 96px 96px;
  position: relative;
}
/* Walls: quiet vertical lines framing the content column, so the page reads as modular bays with open space between. */
body.lab main::before, body.lab main::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none; z-index: 0;
  background: linear-gradient(to bottom, transparent, rgba(44, 93, 212, .25) 12%, rgba(44, 93, 212, .25) 88%, transparent);
}
body.lab main::before { left: max(16px, calc((100vw - 1248px) / 2)); }
body.lab main::after { right: max(16px, calc((100vw - 1248px) / 2)); }
body.lab main > * { position: relative; z-index: 1; }
/* Lab glass: content softens as it reaches the top and bottom of the screen. */
.lab-edge { position: fixed; left: 0; right: 0; height: 44px; z-index: 30; pointer-events: none;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.lab-edge-top { top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
.lab-edge-bottom { bottom: 0; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
body:not(.lab) .lab-edge { display: none; }
/* Header and title band: deep cobalt, faint blue graph lines. */
/* Header: deep cobalt on every page, the homepage included, so the brand bar reads the same everywhere. */
.hud.field { --bg: #33509c; --panel: #3c5cae; --fg: #ffffff; --muted: #e1e8fb; --rule: #4d69b3; --rule-hi: #7d93d2;
  --steel: #ffffff; --live: #ffffff; --grid: rgba(227, 220, 207, .06); --grid-mark: rgba(227, 220, 207, .2);
  background-color: var(--bg); border-bottom-color: #4d69b3; }
body.lab .hud { background: var(--cobalt-deep); border-bottom-color: #4d69b3; }
body.lab .page-head { background-color: var(--cobalt-deep); }  /* keeps the shared .field grid */
body.lab .page-head h1 { color: #ffffff; }
body.lab .nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--steel); }
body.lab footer.field { background: var(--cobalt-deep); }
/* Timeline: date | wall + node | module. */
body.lab .r-list { gap: 0; position: relative; }
body.lab .r-entry { display: grid; grid-template-columns: 150px 28px minmax(0, 1fr); align-items: start; padding-bottom: 22px; position: relative; }
body.lab .r-entry::before { content: ""; position: absolute; left: 163px; top: 0; bottom: 0; width: 1px; background: var(--rule-hi); }
body.lab .r-entry:first-child::before { top: 30px; }
body.lab .r-entry:last-child::before { bottom: calc(100% - 30px); }
body.lab .r-when { padding-top: 22px; color: var(--cobalt); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
body.lab .r-node { width: 11px; height: 11px; margin: 25px 0 0 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--cobalt); position: relative; z-index: 1; }
body.lab .r-latest .r-node { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 5px rgba(232, 87, 42, .14); }
body.lab .r-card { background: var(--panel); border: 1px solid var(--rule-hi); box-shadow: 0 1px 0 rgba(31, 68, 197, .05), 0 14px 30px -24px rgba(31, 68, 197, .4); }
body.lab .r-card:hover { border-color: var(--cobalt); transform: translateY(-2px); }
body.lab .r-card h2 { color: var(--fg); }
body.lab .r-kind, body.lab .rk-digest, body.lab .rk-article { color: var(--cobalt); }
body.lab .r-more { color: var(--cobalt); }
body.lab .r-empty p { padding-top: 18px; }
@media (max-width: 760px) {
  body.lab .r-entry { grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "node when" "node card"; }
  body.lab .r-entry::before { left: 5px; }
  body.lab .r-when { grid-area: when; padding-top: 0; margin-bottom: 8px; }
  body.lab .r-node { grid-area: node; margin: 2px 0 0 0; }
  body.lab .r-card { grid-area: card; }
  body.lab .r-entry:first-child::before { top: 8px; }
  body.lab .r-entry:last-child::before { bottom: calc(100% - 8px); }
  body.lab main::before, body.lab main::after { display: none; }
}
/* Posts: modules on the ground, cobalt labels; the source links stay ink, not orange. */
body.lab .r-items li { background: var(--panel); border: 1px solid var(--rule-hi); border-top: 1px solid var(--rule-hi); padding: 20px 22px; }
body.lab .r-items li::before { color: var(--cobalt); }
body.lab .r-why .mono { color: var(--cobalt); }
body.lab .r-src { color: var(--cobalt); }
body.lab .r-article blockquote { border-left-color: var(--cobalt); }
body.lab .r-article a { color: var(--cobalt); }
body.lab .r-post .sec-head .mono a { color: var(--cobalt); }
/* Signup and review panels: one cobalt module; the button is the orange pop. */
body.lab .research-cta { background: transparent; }
body.lab .research-cta .sec-head > div:not(.mono) { background: var(--panel); border: 1px solid var(--rule-hi); padding: 28px 30px; box-shadow: 0 14px 30px -24px rgba(15, 34, 87, .35); }
body.lab .sub-form .fld input { background: var(--bg); border-color: var(--rule-hi); color: var(--fg); }
body.lab .sub-form .fld input:focus { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(31, 79, 209, .14); }
body.lab .r-actions { background: var(--panel); border-color: var(--rule-hi); }
body.lab .btn:not(.hot) { border-color: var(--cobalt); color: var(--cobalt); }
body.lab .btn:not(.hot):hover { background: var(--cobalt); color: var(--btn-ink); }
body.lab .field .btn:not(.hot) { border-color: #ffffff; color: #ffffff; }
body.lab .field .btn:not(.hot):hover { background: #ffffff; color: var(--cobalt); }
@media (prefers-reduced-transparency: reduce) { .lab-edge { display: none; } }
/* Sub pages: warm, clean, easy to read. Most of our clients aren't from tech, so these pages read like a good
   letter: cream paper on the cobalt, larger text, short lines, one orange button, and none of the extra effects. */
body.lab :is(.r-card, .r-body, .research-cta .sec-head > div:not(.mono), .r-actions, #tools .ask, .r-write) {
  --bg: #f4efe4; --panel: #fbf8f2; --fg: #1d1b18; --muted: #55504a; --rule: #ddd4c4; --rule-hi: #c4b8a4;
  --steel: #1f44c5; --live: #1f44c5; --cobalt: #1f44c5; --signal-text: #a83c18; --btn-ink: #ffffff; --grid: transparent;
  background: var(--bg); color: var(--fg); border: 1px solid #f4efe4;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 22px 44px -30px rgba(10, 22, 58, .65);
}
body.lab .r-card:hover { border-color: #ffffff; }
body.lab .r-body { padding: clamp(22px, 4vw, 40px); }
body.lab .r-body .r-items li { background: transparent; border: 0; border-top: 1px solid var(--rule); padding: 22px 0 0; }
body.lab .r-body .r-items li:first-child { border-top: 0; padding-top: 0; }
/* Bigger, calmer type. */
body.lab main { font-size: 1.125rem; line-height: 1.65; }
body.lab main p, body.lab main li { max-width: 65ch; }
body.lab .page-head p, body.lab .sec-head p { font-size: 1.2rem; }
body.lab :is(.r-meta, .r-more, .r-when, .r-src, .r-note, .sub-note, .r-actions p, .r-why .mono, .sec-head > .mono, .try-k, .demo-note, .wf-label) {
  font-size: 13px; letter-spacing: .06em; }
body.lab .btn { min-height: 48px; }
body.lab :is(a, button, input, textarea, summary):focus-visible { outline: 3px solid #ffb59c; outline-offset: 3px; }
/* Less noise: no blurred edges or wall lines, a fainter grid on the ground. */
body.lab .lab-edge, body.lab main::before, body.lab main::after { display: none; }

/* Homepage doorways: the sections that lead into the sub pages wear the sub-page cobalt, so the two feel
   like one site. Try it (-> /try) and AI updates (-> /research, /blog) are cobalt bands with cream paper
   panels inside, like the pages they open; the footer matches the sub-page footer. */
.cobalt {
  --bg: #3c5cae; --panel: #f4efe4; --fg: #ffffff; --muted: #e1e8fb; --rule: #5674c2; --rule-hi: #7d93d2;
  --steel: #ffffff; --live: #ffffff; --signal-text: #ffc7b3; --grid: rgba(227, 220, 207, .06);
  color: var(--fg); background-color: var(--bg); border-bottom: 0;
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 96px 96px;
}
.cobalt :is(.try-tile, .sec-head > div:not(.mono)) {
  --bg: #f4efe4; --panel: #fbf8f2; --fg: #1d1b18; --muted: #55504a; --rule: #ddd4c4; --rule-hi: #c4b8a4;
  --steel: #1f44c5; --live: #1f44c5; --signal-text: #a83c18;
  color: var(--fg); background: var(--bg); border: 1px solid #f4efe4;
  box-shadow: 0 22px 44px -30px rgba(10, 22, 58, .65);
}
.cobalt .try-tile:hover { border-color: #ffffff; }
.cobalt .sec-head > div:not(.mono) { padding: clamp(22px, 4vw, 36px); }
#ask.cobalt .sec-head > div:not(.mono) { background: transparent; border: 0; box-shadow: none; padding: 0;
  --fg: #ffffff; --muted: #e1e8fb; color: var(--fg); }  /* Try it: heading sits on the cobalt, the two tiles are the paper */
.cobalt .sub-form .fld input { background: var(--panel); }
footer.field { --bg: #33509c; --fg: #ffffff; --muted: #e1e8fb; --rule: #4d69b3; --grid: rgba(227, 220, 207, .06); background-color: var(--bg); }
/* Section numbers in cobalt ink on the stone (light cobalt on the moss). */
.sec-head .mono b { color: var(--steel); }
/* Desktop: time (dates) sits in the page's left label column, space (the modules) in its main column; the wall runs between them. */
@media (min-width: 761px) {
  body.lab .r-list { margin-left: 0; }
  body.lab .r-entry { grid-template-columns: 220px 48px minmax(0, 1fr); }
  body.lab .r-entry::before { left: 243px; }
  body.lab .r-node { margin-left: 18px; }
  body.lab .r-when { text-align: right; padding-right: 8px; }
}

/* ---------- Research opening ("Chaos → Order"), drawn by assets/research-intro.js ---------- */
html.lab-intro-on, html.lab-intro-on body { overflow: hidden; }
.lab-intro { position: fixed; inset: 0; z-index: 1000; background: #3c5cae; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; cursor: pointer; animation: lab-intro-in .35s ease-out both; }
.lab-intro:focus { outline: none; }
.lab-intro canvas { display: block; max-width: 100%; }
.lab-intro-skip { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #e4ecff; opacity: .75; }
@keyframes lab-intro-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Phone menu (homepage): below 1100px the seven links move into a panel under the header. ---------- */
.nav-toggle { display: none; }
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; margin-left: auto;
    border: 1px solid var(--rule-hi); background: transparent; color: var(--fg); cursor: pointer; flex: none; }
  .nav-toggle span { display: block; width: 18px; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .hud.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hud.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .hud.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hud .nav-toggle + .nav + .btn { margin-left: 0; }
  .hud.menu-open .nav { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    padding: 8px 16px 16px; background: var(--bg); border-bottom: 1px solid var(--rule); box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .55);
    animation: menu-in .18s ease-out both; }
  .hud.menu-open .nav a { padding: 0 4px; min-height: 48px; border-bottom: 1px solid var(--rule); font-size: .8rem; }
  .hud.menu-open .nav a:last-of-type { border-bottom: 0; }
  .hud.menu-open .nav .nav-ring { display: none; }   /* the end-of-page ring is a desktop header flourish */
}
@media (max-width: 420px) { .hud .wrap { gap: 10px; } .hud .wrap > .btn { padding: 0 10px; letter-spacing: .05em; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hud.menu-open .nav { animation: none; } .nav-toggle span { transition: none; } }
/* Signup list choice: two toggle chips across the top of the form. */
.sub-form .sub-lists { grid-column: 1 / -1; }
.sub-lists .mono { margin-bottom: 4px; }
/* The list chips are checkboxes: show a box that is empty when off and ticked when on, so they read as choices. */
.sub-lists span { gap: 10px; }
.sub-lists span::before { content: ''; flex: none; width: 16px; height: 16px; box-sizing: border-box; border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 Arial, Helvetica, sans-serif; letter-spacing: 0; }
.sub-lists input:checked + span::before { content: '✓'; background: var(--bg); color: var(--fg); border-color: var(--bg); }

/* ---------- Blog article: one paper reading room instead of a floating sheet ----------
   The title sits on the cobalt; the article itself is a wide sheet of paper whose edges are feathered
   into the blue on every side, with one centred column of larger type. Scoped to articles (.r-read);
   digests and the other sub pages keep their panels. */
.r-read .sec-head { display: block; max-width: 38rem; margin: 0 auto 0; }
.r-read .sec-head > .mono { border-top: 0; padding-top: 0; margin-bottom: 22px; }
.r-read .sec-head > div:not(.mono) { max-width: none; }
.r-read .sec-head h1 { font-size: clamp(2.6rem, 2rem + 3vw, 4.6rem); }
.r-read .sec-head p.r-intro { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); line-height: 1.5; margin-top: 18px; color: #e1e8fb; }
/* The shared paper-panel rule above lists #tools .ask inside :is(), which gives it ID weight; !important on these three
   is the only way to stop it painting a hard-edged sheet behind the feathered one without editing that shared rule. */
body.lab .r-read .wrap > .r-body.r-body {
  max-width: 38rem; margin: 0 auto; position: relative; z-index: 0;
  padding: clamp(110px, 12vw, 150px) 0 clamp(110px, 12vw, 150px);
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
/* The paper: wider than the text, feathered on all four sides (two masks, intersected). */
.r-read .r-body::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: min(100vw, 66rem); transform: translateX(-50%);
  --fx: clamp(18px, 9vw, 150px); --fy: 96px;
  background: #f4efe4;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent),
                      linear-gradient(to bottom, transparent, #000 var(--fy), #000 calc(100% - var(--fy)), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent),
              linear-gradient(to bottom, transparent, #000 var(--fy), #000 calc(100% - var(--fy)), transparent);
  mask-composite: intersect;
}
/* Reading type: a serif made for long reading (Newsreader, loaded only on article pages), near-black ink on
   brighter paper, ~65-character lines, a larger first paragraph and a cobalt marker above each section. */
.r-read .r-body::before { background: #fcf9f3; }
.r-read .r-article { font-family: "Newsreader", Georgia, "Times New Roman", serif; font-optical-sizing: auto;
  font-size: clamp(1.22rem, 1.1rem + .45vw, 1.4rem); line-height: 1.65; color: #15120e; letter-spacing: .002em; }
.r-read .r-article p, .r-read .r-article li { max-width: none; }
.r-read .r-article p { margin: 0 0 1.15em; }
.r-read .r-article > p:first-of-type { font-size: 1.2em; line-height: 1.5; color: #0f0d0a; }
.r-read .r-article h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); line-height: 1.05; margin: 2.3em 0 .6em; color: #1d1b18; }
.r-read .r-article h2:first-child { margin-top: 0; }
.r-read .r-article::before, .r-read .r-article h2::before { content: ""; display: block; width: 44px; height: 3px; background: #1f44c5; }
.r-read .r-article::before { margin-bottom: 22px; }
.r-read .r-article h2::before { margin-bottom: 16px; }
.r-read .r-article :is(ul, ol) { margin: 0 0 1.3em; padding-left: 1.3em; }
.r-read .r-article li { margin-bottom: .55em; }
.r-read .r-article li::marker { color: #1f44c5; }
.r-read .r-article strong { font-weight: 600; color: #0f0d0a; }
.r-read .r-article a { color: #1f44c5; text-underline-offset: 3px; }
.r-read .r-article blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid #1f44c5; }
.r-read .r-article blockquote p { font-size: 1.45em; line-height: 1.3; font-style: italic; color: #1f44c5; margin: 0; }
.r-read .r-article > p:last-child em { color: #55504a; }
/* Faint orange lines down the left and right where the solid paper meets the blur: no top or bottom line,
   fading in and out along their length and softened slightly so they blend rather than read as a rule. */
.r-read .r-body::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; transform: translateX(-50%);
  width: calc(min(100vw, 66rem) - 2 * clamp(18px, 9vw, 150px)); top: 40px; bottom: 40px;
  border-style: solid; border-width: 0 2px;
  border-image: linear-gradient(to bottom, rgba(232, 87, 42, 0), rgba(232, 87, 42, .3) 12%, rgba(232, 87, 42, .3) 88%, rgba(232, 87, 42, 0)) 1;
  filter: blur(.6px);
}
@media (max-width: 760px) {
  body.lab .r-read .wrap > .r-body.r-body { padding: 84px 8px 96px; }
  .r-read .r-body::before { --fy: 64px; --fx: 10px; }
  .r-read .r-body::after { width: calc(100vw - 20px); top: 24px; bottom: 24px; }
}
/* Reading progress under the header (assets/read-progress.js). */
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; z-index: 40; pointer-events: none;
  background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- Soft corners ----------
   Standalone boxes get a light rounding (6px; 4px for small chips) to soften the page. Grids whose cells share
   edges (Where it helps, Safety, the stages, the project steps, the title block) round only their outer
   frame; the lines inside stay straight. Kept square on purpose: the blueprint drawing frames, full-width
   section bands and rules. */
:root { --r: 6px; --r-sm: 4px; }
.btn, .float-cta, .nav-toggle, .fld input, .fld textarea, .ask-form input, .wf-form textarea, .sub-form .fld input { border-radius: var(--r); }
.starter, .chip, .ask-chip, .needs span, .try-tabs [role=tab] { border-radius: var(--r-sm); }
.ask, .demo-card, .sheet, .try-tile, .r-card, .r-actions, .r-body, .frame, .part-dialog,
.research-cta .sec-head > div:not(.mono), .cobalt .sec-head > div:not(.mono), body.lab .r-items li { border-radius: var(--r); }
.screen { border-radius: var(--r-sm); }
.sec-grid, .stages, .routing, .fits, .titleblock { border-radius: var(--r); overflow: hidden; }
.try-tabs { border-radius: var(--r) var(--r) 0 0; overflow: hidden; }
.routing { overflow-x: auto; }
.frame { overflow: hidden; }

/* ---------- Glass: one recipe everywhere ----------
   The header bar (phones), the menu panel and its tabs, and the desktop header are all the same glass: one tint
   strength, one blur, one set of edges. Only the colour changes (--glass-rgb). It looks the same from the first
   frame; nothing swaps in after load. On phones assets/glass.js sets --glass-rgb to the colour scrolling underneath
   (and --glow-rgb, a lighter version) and turns the ink dark over light sections; the fill never changes. */
:root {
  --glass-fill: .62;
  --glass-blur: blur(16px) saturate(170%) brightness(1.05);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .10) 36%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .12) 100%);
  --glass-edge: inset 0 0 0 1px rgba(255, 255, 255, .38), inset 0 1.5px 1px rgba(255, 255, 255, .85),
    inset 0 8px 12px -6px rgba(255, 255, 255, .28), inset 0 -1.5px 1px rgba(255, 255, 255, .4),
    inset 8px 0 12px -10px rgba(255, 255, 255, .28), inset -8px 0 12px -10px rgba(255, 255, 255, .28);
}

@media (max-width: 1100px) {
  .hud.field, body.lab .hud, body.lab .hud.field {
    --glass-rgb: 51, 80, 156; --glow-rgb: 133, 150, 196;  /* the glow glass.js computes for cobalt, so nothing shifts at load */
    --fg: #ffffff; --rule: rgba(255, 255, 255, .26); --rule-hi: rgba(255, 255, 255, .5);
    --bg: rgb(var(--glass-rgb)); --grid: transparent; --grid-mark: transparent;
    top: 0; padding: calc(env(safe-area-inset-top, 0px) + 10px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
    background: transparent; border: 0; box-shadow: none; pointer-events: none;
  }
  .hud.glass-light { --fg: #1b1916; --muted: #3d3a35; --rule: rgba(27, 25, 22, .16); --rule-hi: rgba(27, 25, 22, .3); color: var(--fg); }
  /* The desktop links, menu button and progress line stay off; the menu lives in the glass panel. */
  .hud .nav, .hud .nav-toggle, .hud .hud-progress, .hud .dust { display: none !important; }

  /* The glass pieces: bar, menu panel, menu tabs. */
  .hud .wrap, .glass-menu, .gm-tab {
    position: relative; isolation: isolate;
    background-color: rgba(var(--glass-rgb), var(--glass-fill)); background-image: var(--glass-sheen);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 0;
    transition: background-color .45s ease, box-shadow .45s ease, color .3s ease;
  }
  .hud .wrap, .glass-menu { box-shadow: var(--glass-edge), 0 10px 28px -14px rgba(0, 0, 0, .4), 0 0 22px -6px rgba(var(--glow-rgb), .45); }
  .gm-tab { box-shadow: var(--glass-edge), 0 4px 12px -8px rgba(0, 0, 0, .35); }
  /* A faint rainbow rim on every rounded piece, light splitting at the edge. */
  .hud .wrap::before, .glass-menu::before, .gm-tab::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: -1;
    background: conic-gradient(from 210deg at 50% 50%, rgba(255, 255, 255, .95), rgba(255, 140, 200, .85), rgba(255, 215, 130, .8),
      rgba(140, 255, 210, .8), rgba(130, 175, 255, .95), rgba(210, 150, 255, .85), rgba(255, 255, 255, .95), rgba(255, 255, 255, .35), rgba(255, 255, 255, .95));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    opacity: .2; mix-blend-mode: screen;
  }

  /* The bar. */
  .hud .wrap { pointer-events: auto; height: 64px; min-height: 64px; border-radius: 24px; max-width: none; gap: 10px; padding: 0 9px 0 16px; }
  /* The whole bar is the menu button (a transparent button under the logo and label); the call icon sits above it. */
  .bar-toggle { position: absolute; inset: 0; z-index: 2; border-radius: inherit; border: 0; background: transparent; cursor: pointer;
    -webkit-tap-highlight-color: transparent; }
  .bar-toggle:focus-visible { outline: 3px solid #ffb59c; outline-offset: 3px; }
  .hud .brand { position: relative; z-index: 3; pointer-events: none; font-size: 1.15rem; flex: none; }
  .hud .brand span { text-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
  .hud.glass-light .brand span { text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
  /* The section you're in: flips over to the next name as each section comes up. */
  .bar-sec { position: relative; z-index: 3; pointer-events: none; flex: 1; min-width: 0; text-align: right;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg); opacity: .85;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: 50% 50% -8px; }
  .bar-sec.turn { animation: bar-turn .5s cubic-bezier(.2, .8, .2, 1); }
  @keyframes bar-turn { from { opacity: 0; transform: perspective(240px) rotateX(-95deg); } to { opacity: .85; transform: none; } }
  /* Menu cue: three short lines that turn into an X while the menu is open. */
  .bar-menu { position: relative; z-index: 3; pointer-events: none; flex: none; width: 22px; height: 16px; display: grid; align-content: space-between; margin-left: 2px; }
  .bar-menu i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
  .bar-menu i:nth-child(2) { width: 70%; justify-self: end; }
  .hud.gm-open .bar-menu i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hud.gm-open .bar-menu i:nth-child(2) { opacity: 0; }
  .hud.gm-open .bar-menu i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Book a call: a calendar icon (book a time) in the bar's ink, 46px tap area. The words stay for screen readers. */
  .hud .wrap > .btn, .hud .wrap > .btn.hot {
    position: relative; z-index: 3; flex: none; margin: 0; width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 50%;
    display: inline-grid; place-items: center; font-size: 0; letter-spacing: 0; color: var(--fg);
    background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .hud .wrap > .btn .arr { display: none; }
  .hud .wrap > .btn::before { content: ""; width: 23px; height: 23px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Ccircle cx='12' cy='15' r='1.4' fill='black' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Ccircle cx='12' cy='15' r='1.4' fill='black' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat; }
  .hud .wrap > .btn:active { transform: scale(.96); }

  /* The menu panel: drops from the bar, same glass and corners. */
  .glass-menu { position: absolute; z-index: 4; pointer-events: auto;
    top: calc(100% + 10px); left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; border-radius: 24px;
    transform-origin: 50% 0; animation: gm-in .25s cubic-bezier(.2, .8, .2, 1); }
  .glass-menu[hidden] { display: none; }
  @keyframes gm-in { from { transform: translateY(-6px) scale(.97); } to { transform: none; } }
  /* The tabs: the same glass in stone (orange for Book a call). */
  .gm-tab { --glass-rgb: 227, 220, 207;
    display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 0 12px; border-radius: 16px; text-decoration: none; white-space: nowrap;
    font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: #1b1916; }
  .gm-tab:active { transform: scale(.98); }
  .gm-tab:focus-visible { outline: 3px solid #ffb59c; outline-offset: 2px; }
  /* "You are here": a cobalt dot painted as an extra background layer (::before is the rim). */
  .gm-tab.on, .gm-tab[aria-current="page"] { padding-left: 26px;
    background-image: radial-gradient(circle at 14px 50%, #1f44c5 3.5px, rgba(31, 68, 197, 0) 4.2px), var(--glass-sheen); }
  .gm-call { --glass-rgb: 232, 87, 42; grid-column: 1 / -1; justify-content: center; color: #ffffff; text-shadow: 0 1px 1px rgba(120, 30, 0, .45); }
}

/* Wide screens: the same glass as a full-width cobalt bar. */
@media (min-width: 1101px) {
  .hud.field, body.lab .hud.field, body.lab .hud {
    --glass-rgb: 51, 80, 156; --bg: rgba(var(--glass-rgb), var(--glass-fill));
    background-color: rgba(var(--glass-rgb), var(--glass-fill)); background-image: var(--glass-sheen);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border-bottom: 0;
    box-shadow: var(--glass-edge), 0 10px 30px -18px rgba(10, 22, 58, .6); }
  .hud.field.docked, body.lab .hud.field.docked { background-color: rgba(var(--glass-rgb), var(--glass-fill)); }
  .bar-toggle, .bar-sec, .bar-menu, .glass-menu { display: none !important; }
}

/* Visitors who ask for less transparency get the same pieces as solid colour. */
@media (prefers-reduced-transparency: reduce) {
  .hud .wrap, .glass-menu, .gm-tab, .hud.field { background-color: rgb(var(--glass-rgb)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
/* Reading progress inside the phone/tablet glass pill (read-progress.js moves it there at <=1100px). */
.hud .wrap > .read-progress { left: 22px; right: 22px; bottom: 5px; height: 2px; border-radius: 2px; z-index: 3; }

/* ---------- Article ending: "Your first sidecar" worksheet + "Or hand it to your AI" (assets/blog-work.js) ---------- */
.r-read .r-work { margin-top: 3.2em; padding-top: 2.4em; border-top: 1px solid #e3dccf; font-family: "Newsreader", Georgia, serif; color: #15120e; }
.r-read .r-work::before { content: ""; display: block; width: 44px; height: 3px; background: #1f44c5; margin-bottom: 16px; }
.r-read .r-work h2 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); line-height: 1.05; margin: 0 0 .4em; color: #1d1b18; }
.r-read .r-work-lede { font-size: 1.15rem; margin: 0 0 1.2em; color: #3b3630; }
.r-read .sc-form { display: grid; gap: 14px; }
.r-read .sc-form .fld { display: grid; gap: 6px; }
.r-read .sc-form .fld > .mono { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #55504a; }
.r-read .sc-form .fld i { font-style: normal; text-transform: none; letter-spacing: 0; color: #8a8278; }
.r-read .sc-form :is(textarea, input) { width: 100%; box-sizing: border-box; font: inherit; font-family: var(--f-body, system-ui), sans-serif; font-size: 1rem; line-height: 1.5;
  padding: 12px 14px; background: #fffdf8; color: #15120e; border: 1px solid #d6ccba; border-radius: var(--r, 6px); }
.r-read .sc-form :is(textarea, input):focus { outline: none; border-color: #1f44c5; box-shadow: 0 0 0 3px rgba(31, 68, 197, .14); }
.r-read .sc-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.r-read .sc-form .btn { justify-self: start; }
.r-read .sc-status { min-height: 1.2em; margin: 0; font-size: 13px; color: #55504a; }
.r-read .sc-status.err { color: #a83c18; }
.r-read .sc-card { border-left: 3px solid #1f44c5; padding: 4px 0 4px 22px; }
.r-read .sc-kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #1f44c5; margin: 0 0 6px; }
.r-read .sc-card h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 1.7rem; line-height: 1.05; margin: 0 0 .4em; }
.r-read .sc-sum { font-size: 1.15rem; margin: 0 0 1em; }
.r-read .sc-sec { margin: 0 0 1em; }
.r-read .sc-sec h4 { font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #55504a; margin: 0 0 4px; display: flex; gap: 10px; align-items: baseline; }
.r-read .sc-sug { font-size: 11px; color: #a83c18; text-transform: none; letter-spacing: .02em; }
.r-read .sc-sec p, .r-read .sc-sec ul { margin: 0; font-size: 1.1rem; line-height: 1.55; }
.r-read .sc-sec ul { padding-left: 1.2em; }
.r-read .sc-sec li::marker { color: #1f44c5; }
.r-read .sc-actions, .r-read .r-ai-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.r-read .r-work .btn:not(.hot) { border-color: #1f44c5; color: #1f44c5; background: transparent; }
.r-read .r-work .btn:not(.hot):hover { background: #1f44c5; color: #fff; }
.r-read .r-ai { margin-top: 2.6em; padding-top: 1.8em; border-top: 1px dashed #d6ccba; }
.r-read .r-ai h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 1.35rem; margin: 0 0 .3em; }
.r-read .r-ai p { margin: 0; font-size: 1.1rem; color: #3b3630; }
.r-read .r-ai-note { min-height: 1.2em; margin-top: 10px !important; font-size: 13px !important; color: #1f44c5 !important; }
.r-read .r-meta a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .r-read .sc-row { grid-template-columns: 1fr; }
  .r-read .sc-actions .btn, .r-read .r-ai-btns .btn, .r-read .sc-form .btn { width: 100%; justify-content: center; }
}
/* Plan: the stage path (Stage 1 highlighted as where they start) and the "with OTC AI" bridge. */
.r-read .sc-path ol { margin: 0; padding: 0; list-style: none; counter-reset: stage; display: grid; gap: 10px; }
.r-read .sc-path li { counter-increment: stage; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; font-size: 1.05rem; line-height: 1.5; color: #55504a; }
.r-read .sc-path li::before { content: counter(stage); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #c4b8a4; display: grid; place-items: center; font: 600 13px/1 var(--f-mono); color: #8a8278; }
.r-read .sc-path li b { font-weight: 600; color: #15120e; }
.r-read .sc-path li.now { color: #15120e; }
.r-read .sc-path li.now::before { border-color: #1f44c5; background: #1f44c5; color: #fff; }
.r-read .sc-path li.now b { color: #1f44c5; }
.r-read .sc-us { margin: 1.4em 0 0; padding: 18px 20px; background: rgba(31, 68, 197, .06); border-radius: var(--r, 6px); }
.r-read .sc-us h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #1f44c5; margin: 0 0 6px; font-weight: 500; }
.r-read .sc-us p { margin: 0; font-size: 1.1rem; line-height: 1.55; }
.r-read .sc-us .sc-from { margin-top: 10px; font-style: italic; color: #55504a; }
/* Links that jump into the article ending (#work-h from the blog email, #with-ai from the meta line) land below the header. */
.r-read #work-h, .r-read #with-ai { scroll-margin-top: 110px; }

/* Research | OTC Blog switch under the page heading (api/research.js tabs()). */
.r-tabs { display: inline-flex; gap: 4px; margin-top: 28px; padding: 4px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(255, 255, 255, .06); }
.r-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; color: rgba(255, 255, 255, .78); text-decoration: none; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.r-tabs a:hover { color: #ffffff; background: rgba(255, 255, 255, .1); }
.r-tabs a[aria-current="page"] { color: var(--cobalt-deep, #23408a); background: #ffffff; }
.r-tabs a:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
@media (max-width: 420px) { .r-tabs { display: flex; } .r-tabs a { flex: 1; justify-content: center; padding: 0 12px; } }