/* Layout: ink-outlined bento for the things you operate (hero, console, audit,
   inspector); everything you only read sits directly on the paper. Red is the
   one colour the product owns. Green means done, amber means running. */
:root {
  color-scheme: light;
  --paper: #f3efe6;
  --surface: #fffdf8;
  --tint: #e8e2d4;
  --ink: #161513;
  --muted: #5f5a51;
  --red: #e2372a;
  --red-soft: #fbd9d2;
  --green: #84cc5f;
  --amber: #f2b632;
  --shadow-c: #161513;
  --key-edge: #161513;
  --console-bg: #161513;
  --console-fg: #ece7dc;
  --console-dim: #8a857a;
  --console-line: #2f2d29;

  --border: 3px solid var(--ink);
  --shadow: 7px 7px 0 var(--shadow-c);
  --shadow-sm: 4px 4px 0 var(--shadow-c);
  --shadow-xs: 3px 3px 0 var(--shadow-c);

  --display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gap-section: 104px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
button { color: inherit; font: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 6px; }

.shell { width: min(1240px, calc(100% - 32px)); margin: 0 auto; padding-block: 22px 40px; }

.bento { border: var(--border); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }

.eyebrow { margin: 0 0 12px; font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-variation-settings: "opsz" 96; }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-variation-settings: "opsz" 48; letter-spacing: -0.025em; }
p { line-height: 1.6; }
.mono { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.section { margin-top: var(--gap-section); }

/* ── Top bar ───────────────────────────────────────────────── */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px 10px 18px; margin-bottom: 26px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.04em; }
.topnav { display: flex; gap: 26px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; }
.topnav a { text-decoration: none; color: var(--muted); transition: color 150ms ease; }
.topnav a:hover { color: var(--ink); }
.top-right { display: flex; align-items: center; gap: 14px; }
.sound-toggle { display: inline-flex; align-items: center; border: 0; background: none; padding: 4px; cursor: pointer; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--muted); }
.sound-toggle:hover { color: var(--ink); }
.sound-toggle .mi { display: none; font-size: 22px; }

/* ── Hero ──────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr); overflow: hidden; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(32px, 5.5vw, 72px); min-width: 0; }
.hero h1 { font-size: clamp(3.2rem, 8.4vw, 7.4rem); line-height: 0.86; letter-spacing: -0.055em; font-weight: 800; font-variation-settings: "opsz" 96; }
.hero h1 span { display: block; color: var(--red); }
.hero-desc { max-width: 54ch; margin: 28px 0 0; font-size: clamp(1.02rem, 1.4vw, 1.16rem); color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; align-items: center; }
.hero-note { margin: 18px 0 0; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.hero-dial {
  position: relative; display: grid; place-items: center; padding: 34px 24px 60px; min-width: 0; overflow: hidden;
  border-left: var(--border); background-color: var(--tint);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 16%, transparent) 1.2px, transparent 1.6px);
  background-size: 18px 18px;
}
.hero-dial p { position: absolute; right: 18px; bottom: 20px; left: 18px; margin: 0; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; color: var(--muted); }
.hero-dial p b { color: var(--ink); font-weight: 500; }

/* The deck: an isometric control panel built from flat faces.
   Camera = rotateX(54.7deg) rotateZ(45deg), no perspective, so it reads as
   true isometric. Only the two faces the camera can see (south, east) are drawn. */
@property --kh { syntax: "<length>"; inherits: true; initial-value: 16px; }
.deck-wrap { display: grid; place-items: center; width: 100%; }
.deck-wrap.kick { animation: kick 380ms cubic-bezier(.3,.7,.4,1); }
.deck {
  --S: min(290px, 62vw);
  --rx: 54.7deg; --rz: 45deg;
  --slab: 22px;
  position: relative; width: var(--S); height: var(--S); max-width: 100%;
  margin-top: calc(var(--S) * -0.04);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateZ(var(--rz));
  transition: transform 700ms cubic-bezier(.2,.75,.2,1);
}
.deck.intro { --rx: 70deg; --rz: 15deg; transition: none; }
.deck * { transform-style: preserve-3d; }
.slab-top, .slab-s, .slab-e { position: absolute; box-sizing: border-box; }
.slab-top { inset: 0; background: #24221f; border: 2px solid #161513; }
.slab-s { left: 0; top: 100%; width: 100%; height: var(--slab); transform-origin: top; transform: rotateX(-90deg); background: #161513; }
.slab-e { left: 100%; top: 0; width: var(--slab); height: 100%; transform-origin: left; transform: rotateY(90deg); background: #0c0b0a; }
.slab-top::after { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(236, 231, 220, 0.16); }

.plate {
  position: absolute; inset: calc(var(--S) * 0.075);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: calc(var(--S) * 0.05);
  transform: translateZ(1px);
}
.k {
  position: relative; cursor: pointer; border-radius: 4px;
  --kh: 15px;
  --top: var(--surface);
  transition: --kh 110ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.k.big { --kh: 30px; --top: var(--red); }
.k.big.stop { --top: #4a4f57; }
.k.run { --top: var(--amber); }
.k.done { --top: var(--green); }
@media (hover: hover) {
  .k:hover { --kh: 18px; }
  .k.big:hover { --kh: 33px; }
}
.k.down, .k.down:hover { --kh: 5px; }
.k.big.down, .k.big.down:hover { --kh: 12px; }
.k-top, .k-s, .k-e { position: absolute; box-sizing: border-box; border: 2px solid #161513; transition: background-color 220ms ease; }
.k-top {
  inset: 0; display: grid; place-items: center; border-radius: 4px;
  transform: translateZ(var(--kh));
  background-color: var(--top);
  background-image: linear-gradient(135deg, rgba(255,255,255,0.32), rgba(255,255,255,0) 55%);
}
.k-s { left: 0; top: 100%; width: 100%; height: var(--kh); transform-origin: top; transform: rotateX(90deg); background-color: color-mix(in srgb, var(--top) 80%, #000); }
.k-e { left: 100%; top: 0; width: var(--kh); height: 100%; transform-origin: left; transform: rotateY(-90deg); background-color: color-mix(in srgb, var(--top) 64%, #000); }
.mi {
  font-family: "Material Icons"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal;
  text-transform: none; white-space: nowrap; direction: ltr; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
}
.k-top .mi { transform: rotate(-45deg); font-size: calc(var(--S) * 0.095); color: #161513; pointer-events: none; }
.k.big .k-top .mi { font-size: calc(var(--S) * 0.13); color: #fff; }
.k:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
@keyframes kick { 0% { transform: translate(0, 0); } 20% { transform: translate(-4px, 2px) rotate(-1deg); } 45% { transform: translate(4px, -1px) rotate(1deg); } 70% { transform: translate(-2px, 0); } 100% { transform: translate(0, 0); } }

/* ── Console ───────────────────────────────────────────────── */
.console { margin-top: 26px; padding: 22px 24px 20px; background: var(--console-bg); color: var(--console-fg); border-color: var(--console-bg); }
.console-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-bottom: 14px; border-bottom: 1px solid var(--console-line); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--console-dim); }
.console-head .live { display: inline-flex; align-items: center; gap: 8px; color: var(--console-fg); }
.console-head .live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.console-head .live.busy i { background: var(--amber); animation: pulse 1s ease-in-out infinite; }
.console-head .spacer { margin-left: auto; }
@keyframes pulse { 50% { opacity: 0.35; } }

.steps { display: grid; gap: 2px; margin-top: 12px; font-family: var(--mono); font-size: 0.8rem; }
.step { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 10px 6px; border-radius: 10px; color: var(--console-dim); transition: background 200ms ease, color 200ms ease; }
.step .tick { width: 14px; height: 14px; margin-top: 2px; border: 2px solid var(--console-line); border-radius: 50%; }
.step .body { min-width: 0; }
.step .txt { display: block; }
.step .cmd { display: block; margin-top: 3px; font-size: 0.74rem; color: var(--console-dim); opacity: 0.55; overflow-wrap: anywhere; }
.step .cmd::before { content: "$ "; }
.step .meta { text-align: right; font-size: 0.72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.step .meta b { display: block; font-weight: 400; color: var(--console-fg); }
.step.run { background: rgba(242, 182, 50, 0.08); color: var(--console-fg); }
.step.run .tick { border-color: var(--amber); border-right-color: transparent; animation: spin 0.7s linear infinite; }
.step.run .cmd, .step.done .cmd { opacity: 1; }
.step.done { color: var(--console-fg); }
.step.done .tick { border-color: var(--green); background: var(--green); }
@keyframes spin { to { transform: rotate(1turn); } }

.prompt { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 12px 6px 2px; border-top: 1px solid var(--console-line); font-family: var(--mono); font-size: 0.8rem; }
.prompt .ps { color: var(--green); }
.cursor { display: inline-block; width: 8px; height: 1.1em; background: var(--console-fg); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ── Stats (on paper, no frames) ───────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--border); }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px 4px 0; min-width: 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.stat .mono { color: var(--muted); }
.stat strong { margin-top: 18px; font-family: var(--display); font-size: clamp(3.2rem, 5.6vw, 5rem); font-weight: 700; letter-spacing: -0.06em; line-height: 0.9; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 96; }
.stat strong small { font-size: 0.4em; letter-spacing: -0.02em; margin-left: 4px; }
.stat:first-child strong { color: var(--red); }
.stat span { font-weight: 500; line-height: 1.4; color: var(--muted); }
.stats-source { margin: 22px 0 0; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ── Audit ─────────────────────────────────────────────────── */
.audit { padding: clamp(26px, 4.4vw, 52px); }
.audit-head, .audit-result, .section-head { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.grade { display: grid; flex: 0 0 auto; width: 96px; aspect-ratio: 1; place-items: center; border: var(--border); border-radius: 50%; background: var(--tint); box-shadow: var(--shadow-sm); font-family: var(--display); font-size: 2.3rem; font-weight: 800; transition: background 300ms ease; }
.grade.ok { background: var(--green); color: #161513; }
.meter { height: 30px; margin-top: 32px; overflow: hidden; border: var(--border); border-radius: 999px; background: repeating-linear-gradient(-45deg, var(--paper) 0 10px, var(--surface) 10px 20px); }
.meter span { display: block; width: 0; height: 100%; background: var(--ink); transition: width 120ms linear; }
.audit-result { margin-top: 18px; align-items: flex-end; }
.audit-result p { max-width: 70ch; margin: 0; color: var(--muted); }
.audit-result b { flex: 0 0 auto; font-family: var(--mono); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.audit-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

/* ── Registry ──────────────────────────────────────────────── */
.section-head { align-items: flex-end; margin-bottom: 26px; }
.filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.filter { padding: 9px 15px; border: var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-xs); font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease; }
.filter:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow-c); }
.filter:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--shadow-c); }
.filter.active { background: var(--ink); color: var(--paper); }

.workspace { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.8fr); gap: 26px; align-items: start; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; min-width: 0; }
.rb {
  position: relative; display: grid; gap: 10px; justify-items: start; align-content: start; min-height: 220px; padding: 22px; overflow: hidden; cursor: pointer;
  border: var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); text-align: left;
  transition: transform 140ms ease, box-shadow 140ms ease, background 200ms ease;
}
.rb::after { content: ""; position: absolute; right: -28px; bottom: -28px; width: 88px; height: 88px; border: var(--border); border-radius: 50%; background: var(--red); transform: scale(0); transition: transform 260ms cubic-bezier(.3,1.4,.5,1); }
.rb:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow-c); }
.rb:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--shadow-c); }
.rb.selected { background: var(--red-soft); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow-c); }
.rb.selected::after { transform: scale(1); }
.rb-top { display: flex; justify-content: space-between; gap: 16px; width: 100%; color: var(--muted); }
.rb h3 { max-width: 86%; margin-top: 22px; }
.rb p { max-width: 84%; margin: 0; color: var(--muted); }

.inspector { position: sticky; top: calc(18px + env(safe-area-inset-top, 0px)); min-width: 0; padding: 26px; background: var(--console-bg); color: var(--console-fg); --key-edge: var(--console-fg); }
.inspector-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.badge { padding: 7px 11px; border: 1.5px solid var(--console-fg); border-radius: 999px; font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.inspector .mono { color: var(--console-dim); }
.detail-cat { margin: 32px 0 8px; color: var(--red); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.inspector h3 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); letter-spacing: -0.04em; }
.detail { margin-top: 24px; }
.detail span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--console-dim); }
.detail p { margin: 6px 0 0; color: var(--console-fg); opacity: 0.86; }
.recommend { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; padding: 16px; border: 1.5px solid var(--console-line); border-radius: 16px; }
.recommend > div > span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--console-dim); }
.recommend strong { display: block; margin-top: 6px; line-height: 1.3; font-weight: 600; }
.inspector-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; align-items: center; }
.text-button { padding: 2px 4px; border: 0; background: none; color: var(--console-fg); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.inspector :focus-visible { outline-color: var(--console-fg); }

/* ── Proof (on paper) ──────────────────────────────────────── */
.proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; padding-top: 34px; border-top: var(--border); }
.wordmarks { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 18px 0 0; padding: 0; list-style: none; }
.wordmarks li { font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; color: var(--muted); font-variation-settings: "opsz" 36; }
.trust { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.trust li { padding: 7px 12px; border: 1.5px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.quote { margin: 0; min-width: 0; }
.quote blockquote { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.03em; text-wrap: balance; font-variation-settings: "opsz" 72; }
.quote blockquote::before { content: "“"; display: block; height: 0.55em; color: var(--red); font-size: 2.4em; line-height: 0.9; }
.quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 20px; color: var(--muted); }
.quote figcaption b { color: var(--ink); font-weight: 600; }
.tag { padding: 3px 8px; border-radius: 6px; background: var(--tint); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Key system spec ───────────────────────────────────────── */
.spec { padding: clamp(26px, 4.4vw, 52px); }
.spec-lede { max-width: 64ch; margin: 16px 0 0; color: var(--muted); }
.spec-row { margin-top: 28px; }
.spec-title { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 12px; color: var(--muted); }
.spec-keys { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ── Playbook (on paper) ───────────────────────────────────── */
.remedies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.remedy { padding-top: 22px; border-top: var(--border); min-width: 0; }
.remedy-n { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--red); }
.remedy .eyebrow { margin-top: 8px; }
.remedy h3 { margin: 22px 0 14px; }
.remedy p { margin: 0; color: var(--muted); max-width: 42ch; }

/* ── Footer ────────────────────────────────────────────────── */
.footer { margin-top: var(--gap-section); padding: clamp(28px, 4.4vw, 52px); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.6fr)); gap: 32px; }
.footer h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.footer h2 span { color: var(--red); }
.footer nav p { margin: 0 0 12px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.footer nav a { display: block; padding: 4px 0; text-decoration: none; font-weight: 500; }
.footer nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ── Toast ─────────────────────────────────────────────────── */
.toast {
  position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: flex; align-items: center; gap: 10px; padding: 13px 18px; border: var(--border); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow-sm); font-weight: 600;
  opacity: 0; pointer-events: none; transform: translateY(16px); transition: opacity 200ms ease, transform 200ms ease;
}
.toast::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.toast.visible { opacity: 1; transform: translateY(0); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; }
  .hero-dial { min-height: 380px; border-left: 0; border-top: var(--border); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .workspace, .proof { grid-template-columns: 1fr; }
  .proof { gap: 40px; }
  .inspector { position: relative; top: auto; }
  .topnav { display: none; }
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-top > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --gap-section: 72px; }
  .bento { border-radius: 18px; box-shadow: 5px 5px 0 var(--shadow-c); }
  .hero-copy { padding: 32px 22px 38px; }
  .cards, .remedies { grid-template-columns: 1fr; }
  .remedies { gap: 30px; }
  .stats { grid-template-columns: 1fr; }
  .stat, .stat + .stat { padding: 22px 0 18px; border-left: 0; }
  .stat + .stat { border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
  .audit-head, .audit-result, .section-head { flex-direction: column; align-items: flex-start; }
  .filters { justify-content: flex-start; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { grid-template-columns: 18px minmax(0, 1fr); }
  .step .meta { grid-column: 2; text-align: left; }
  .step .meta b { display: inline; margin-right: 8px; }
  .toast { right: 12px; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); justify-content: center; }
}
/* Phones: the bar keeps all three controls on one line. Sound becomes its
   speaker icon and Sign in drops to an icon-only key (script swaps it), and
   the keys that carry a label go full width so none runs past its card. */
@media (max-width: 560px) {
  .topbar { gap: 10px; padding: 8px 10px 8px 12px; }
  .brand { gap: 10px; }
  .top-right { gap: 6px; }
  .sound-toggle .mi { display: inline; }
  .sound-toggle .sound-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-actions, .audit-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-actions > span, .audit-actions > span { display: block; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .cursor { animation: none !important; }
}

/* AI Plug adaptation: original squircle/deck furniture, approved content. */
:root{--paper:#F1F0E8;--surface:#fffdf8;--tint:#e6e7db;--ink:#142923;--muted:#506056;--red:#46744a;--green:#DEF398;--shadow-c:#142923;--key-edge:#142923;--console-bg:#142923;--display:"Bricolage Grotesque",DM,Arial,sans-serif;--body:"Instrument Sans",DM,Arial,sans-serif}
.hero{grid-template-columns:minmax(0,1.35fr) minmax(360px,.85fr);min-height:650px}.hero h1{font-size:clamp(58px,6.7vw,100px);line-height:.93}.hero-copy{padding:58px}.hero h1 span{color:#46744a}.hero-desc{max-width:39ch}.hero-note{line-height:1.7}.hero-dial{min-height:480px}.deck{--S:290px}.k{border:0;background:none;padding:0;font-family:var(--body);color:var(--ink)}.k-top .symbol{transform:rotate(-45deg);font-size:24px;font-weight:800;line-height:1}.k.big{--top:#DEF398}.k.big .symbol{color:#142923;font-size:38px}.k:focus-visible{outline:4px solid #46744a}.k.active{--top:#DEF398}.keycap{position:relative;display:inline-grid;place-items:center;background:transparent;border:0;padding:0 8px 9px;min-height:64px;font:700 14px var(--body);text-transform:uppercase;letter-spacing:.45px;isolation:isolate;color:var(--ink);text-decoration:none;max-width:100%}.keycap svg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}.keycap:active svg{transform:translateY(4px)}.keycap:focus-visible{outline:3px solid #46744a;outline-offset:3px}.keycap.lime{color:var(--ink)}.brand-mark{height:36px;width:36px;display:grid;place-items:center;background:#DEF398;border:2px solid #142923;border-radius:10px;box-shadow:0 4px 0 #142923}.topbar{min-height:74px}.menu-button{display:none}.console{margin-top:26px}.console h2{font-size:30px;color:#F1F0E8;margin:10px 0 15px}.workflow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.workflow article{border:1px solid #f1f0e850;border-radius:12px;padding:20px;opacity:.45}.workflow article.active{opacity:1;border-color:#DEF398}.workflow strong{font-family:var(--display);font-size:22px;display:block;margin-top:12px}.workflow p{font-size:14px;margin:9px 0 0}.console-head .spacer{color:#DEF398}.deck-actions{display:flex;gap:16px;margin-top:18px;flex-wrap:wrap}.deck-actions button{background:transparent;color:#F1F0E8;border:1px solid #f1f0e85a;padding:10px 14px;min-height:44px;border-radius:6px;font:12px var(--mono)}
.systems-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:30px}.systems-head h2{max-width:730px}.systems-head p{max-width:360px;color:var(--muted)}.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.ap-proof{border:var(--border);border-radius:22px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}.ap-proof figcaption{padding:30px}.ap-proof h3{font-family:var(--display);font-size:30px;font-weight:750}.ap-proof>img{border-radius:0;object-fit:contain;background:#142923}.capability-art,.sms-stage{border-radius:0;min-height:410px}.sms-stage{padding:28px}.hvac-handoff{max-width:100%}.sms-phone{box-shadow:7px 7px 0 #07150f;border-radius:26px}.ap-proof .text-link{color:#142923}.secondary{margin-top:48px}.offer-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.offer-list{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.offer-list li{background:#DEF39866;border:2px solid #142923;border-radius:12px;padding:20px;font:600 15px/1.45 var(--body);min-height:110px;display:flex;gap:16px;align-items:center}.offer-list span{font:11px var(--mono);opacity:.65}.secondary-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:25px}.secondary-grid .ap-proof h3{font-size:25px}.secondary-grid .capability-art{padding:20px;min-height:410px}.secondary-grid .ap-proof figcaption{padding:25px}.secondary-grid .dashboard-values{grid-template-columns:1fr}.secondary-grid .dashboard-values div{display:flex;justify-content:space-between;align-items:center}.secondary-grid .brain-visual{height:200px}.secondary-grid .illustrated-steps{grid-template-columns:1fr}.secondary-grid .illustrated-steps li{display:grid;grid-template-columns:50px 1fr;gap:5px 12px}.secondary-grid .step-icon{grid-row:span 2;height:45px}.secondary-grid .illustrated-steps strong{margin:0}.secondary-grid .ap-proof>img{min-height:410px;object-fit:cover}.ap-section{padding:46px;margin-top:104px;border:var(--border);border-radius:22px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink)}.ap-section h2{font:750 clamp(36px,4.3vw,61px)/1 var(--display);letter-spacing:-2.4px}.ap-section .chapter-head p{font-family:var(--body);color:var(--muted)}.ap-section .eyebrow{font-family:var(--mono)}.scope-grid,.guide-grid{gap:40px;grid-template-columns:1fr 1fr}.flowchart{border:2px solid #142923;border-radius:18px;box-shadow:4px 4px 0 #142923}.book{box-shadow:9px 9px 0 #142923;border:3px solid #142923;border-radius:14px;transform:rotate(-4deg);width:280px}.book h3{font-family:var(--display);font-size:42px}.ap-guide{background:#DEF39833}.ap-guide .book-space{background-image:radial-gradient(#14292333 1px,transparent 1px);background-size:15px 15px;border-radius:12px}.ap-websites{background:transparent;border:0;box-shadow:none;padding:0}.portfolio article{border:var(--border);border-radius:22px;background:#fffdf8;box-shadow:var(--shadow)}.portfolio h3{font-family:var(--display)}.portfolio img{height:280px}.ap-websites .chapter-head{margin-bottom:32px}.ap-enquire{background:#DEF398}.ap-enquire .chapter-head{max-width:900px}.ap-footer{margin-top:40px;padding:24px 0;border-top:2px solid #142923;color:#142923}.ap-credits{font:10px/1.6 var(--mono)}.ap-motion-tools{margin-top:12px}dialog{border:3px solid #142923;border-radius:20px;box-shadow:7px 7px 0 #142923}dialog::backdrop{backdrop-filter:none}dialog h2{font-family:var(--display)}.ap-section .button{border:0;background:transparent;border-radius:0;padding:0 18px 9px;font-family:var(--body);color:#142923}.ap-section .keycap{min-height:64px}.twin-route{flex-wrap:wrap}
@media(max-width:1000px){.hero{grid-template-columns:1fr}.hero-copy{padding:44px}.hero-dial{border-left:0;border-top:var(--border);min-height:380px}.topnav{display:none}.menu-button{display:inline-grid}.hero h1{font-size:clamp(60px,10vw,100px)}.systems-head{display:block}.systems-head p{max-width:600px}.secondary-grid{grid-template-columns:1fr 1fr}.secondary-grid .ap-proof:last-child{grid-column:1/-1}.offer-list{grid-template-columns:1fr 1fr}.scope-grid,.guide-grid{grid-template-columns:1fr}.book-space{margin-top:30px}}
@media(max-width:600px){.shell{width:calc(100% - 28px);padding-top:14px}.topbar{margin-bottom:22px;padding:10px;gap:10px}.brand{font-size:19px;gap:8px}.brand-mark{width:28px;height:28px}.top-right>.keycap:not(.menu-button){display:none}.menu-button{width:62px;font-size:11px;min-height:54px}.hero-copy{padding:36px 23px}.hero h1{font-size:clamp(51px,13vw,72px);letter-spacing:-3.5px}.hero-desc{font-size:16px;margin-top:25px}.hero-actions{gap:6px}.hero-actions .keycap{width:100%}.hero-dial{min-height:315px;padding:24px 22px 60px}.deck{--S:min(230px,60vw)}.hero-note{font-size:10px}.workflow{grid-template-columns:1fr;gap:10px}.workflow article{padding:16px}.console{padding:20px}.console-head .spacer{margin-left:0}.console h2{font-size:26px}.workflow strong{font-size:21px}.workflow p{line-height:1.5}.section{margin-top:72px}.systems-head h2{font-size:36px;line-height:1.04;letter-spacing:-1.5px}.proof-grid,.secondary-grid{grid-template-columns:1fr;gap:24px}.secondary-grid .ap-proof:last-child{grid-column:auto}.ap-proof figcaption{padding:25px 22px}.ap-proof h3{font-size:28px}.capability-art,.sms-stage{min-height:0}.sms-stage{padding:25px 12px}.offer-list{grid-template-columns:1fr;gap:9px}.offer-list li{min-height:65px;padding:16px}.offer-head{display:block}.offer-head h3{margin-top:14px}.secondary-grid .ap-proof>img{min-height:0;object-fit:contain}.secondary-grid .capability-art{min-height:0}.ap-section{margin-top:72px;padding:28px 22px}.ap-section h2{font-size:36px;letter-spacing:-1.6px}.ap-section .chapter-head p{font-size:16px}.flowchart{margin-top:28px}.book{width:100%;max-width:240px;min-height:360px;padding:25px}.book h3{font-size:38px;margin-top:30px}.book-space{padding:26px 8px}.ap-websites{padding:0}.portfolio .detail{padding:25px 22px}.portfolio img{height:220px}.ap-enquire .actions{display:grid}.ap-enquire .actions .keycap{width:100%}.ap-footer{font-size:11px}.deck-actions{gap:8px}.deck-actions button{font-size:11px}.ap-motion-tools{flex-wrap:wrap}.twin-labels{gap:6px}.customer-story-input{padding:18px}.ap-proof .review-gates{flex-wrap:wrap}}

.brand{text-decoration:none}.workflow article{opacity:.78}.workflow article.active{opacity:1}.keycap{padding-inline:18px}
/* Fidelity repair against the actual live BIGRED demo, 2026-10-12. */
.keycap{min-height:68px;font-size:15px}.keycap svg,.keycap:active svg{transform:none}.key-label{transform:translateY(var(--label-travel,0px));pointer-events:none;display:inline-flex;gap:10px;align-items:center}.keycap:active{box-shadow:none}.hero-actions{gap:18px;max-width:360px;flex-direction:column;align-items:stretch}.hero-actions .keycap{width:100%}.hero-dial .deck{transition:none}.hero h1{font-size:clamp(58px,7.2vw,105px)}.hero-copy{padding:64px 58px}.top-right{gap:14px}.sound-toggle{font:11px var(--mono);color:var(--muted);min-height:44px;padding:8px 0;cursor:pointer}.stage-tick{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:9px;color:#DEF398;border:1px solid #f1f0e850;border-radius:50%;font:12px var(--mono)}.workflow article.active .stage-tick{border-color:#DEF398}.workflow article.done{opacity:1;border-color:#def39866;background:#def39808}.workflow article.done .stage-tick{background:#DEF398;color:#142923;border-color:#DEF398}.k.run{--top:#d1e7ab}.k.done{--top:#DEF398}.k.big.stop{--top:#486052}.k.big.stop .symbol{color:#F1F0E8}.walkthrough-note{font:11px/1.5 var(--mono);color:#c1cfbb;margin:20px 0 0}.workflow article{transition:background .2s,color .2s}.workflow article.active{background:#def39808}.deck-actions button:hover{background:#f1f0e811}.ap-motion-paused .deck{transition:none!important}
@media(max-width:1000px){.hero-copy{padding:44px}.hero h1{font-size:clamp(60px,10vw,100px)}}
@media(max-width:600px){.hero-copy{padding:36px 23px}.hero h1{font-size:clamp(51px,13vw,72px)}.hero-actions{width:100%;gap:14px;margin-top:30px}.keycap{font-size:14px;min-height:65px}.top-right{gap:8px}.sound-toggle{font-size:9px;max-width:40px;line-height:1.4}.top-right .keycap.menu-button{min-width:66px!important;min-height:54px;width:66px}.workflow article{padding:17px}.deck-actions button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.deck,.deck-wrap,.keycap{transition:none!important}}
.keycap svg{pointer-events:none}.shell{overflow-anchor:none}
.hero-actions{width:min(100%,320px)}
/* Independent review: give the narrow sound toggle a clear fixed slot. */
@media(max-width:600px){.top-right{gap:12px}.sound-toggle{width:46px;max-width:46px;flex:0 0 46px;white-space:normal;text-align:center;font-size:9px;line-height:1.5;padding:5px 2px}.top-right .menu-button{flex:0 0 66px}}

/* Keycap hero arrival. Transform-only layers preserve layout and key press depth. */
.hero h1 .headline-entry{display:block;color:inherit;transform:translateY(var(--title-y,0px)) scale(var(--title-scale,1));transform-origin:left bottom}
.hero h1 .headline-entry:last-child{color:#46744a}
.hero-dial .k{transform:translateZ(var(--arrival-lift,0px)) rotateZ(var(--arrival-turn,0deg))}
@media(prefers-reduced-motion:reduce){.hero h1 .headline-entry{transform:none!important}.hero-dial .k{transform:none!important}}

/* Keep example cards at their content height when adjacent demos differ. */
.proof-grid { align-items: start; }

/* Approved short-copy hero: preserve motion and keep the enquiry action in view. */
.hero h1{font-size:clamp(54px,5.9vw,84px)}
.hero-examples{font:600 14px/1.4 var(--body);color:#142923;padding:4px 0;min-height:44px;display:flex;align-items:center}
.hero-examples:focus-visible{outline:3px solid #46744a;outline-offset:4px}
@media(max-width:600px){.hero h1{font-size:clamp(38px,10.4vw,44px);letter-spacing:-2px}.hero-desc{margin-top:20px}.hero-actions{margin-top:23px;gap:12px}.hero-note{margin-top:10px}}