/* Tokens ------------------------------------------------------------ */
:root {
  /* Light: near-white surfaces, graphite ink, one restrained blue. */
  --paper: #fbfbfd;
  --paper-2: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --rule: #d2d2d7;
  --sky: #0066cc;
  --sky-ink: #ffffff;
  --night: #1d1d1f;
  --night-ink: #f5f5f7;

  /* Surface treatment (dark restores its original values below). */
  --radius-btn: 980px;
  --radius-card: 18px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 6px 16px -6px rgba(0,0,0,.06), 0 24px 48px -24px rgba(0,0,0,.10);
  --rule-bold: 1px;
  --head-alpha: 78%;
  --head-filter: saturate(180%) blur(20px);
  --shadow-doc: 0 18px 40px -28px rgba(0,0,0,.18);
  --foot-link: var(--night-ink);
  --product-top-w: 1px;
  --product-bar-h: 4px;
  --product-acc-mix: 0%;
  --shadow-pop: 0 30px 80px -20px rgba(0,0,0,.28);
  --scrim: rgba(29,29,31,.32);

  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Literata", Georgia, "Times New Roman", serif;

  --s-1: 0.875rem;
  --s0: 1.0625rem;
  --s1: 1.25rem;
  --s2: 1.5rem;
  --s3: 2rem;
  --s4: 2.75rem;
  --s5: clamp(3rem, 8vw, 6.25rem);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111a21;
    --paper-2: #17232c;
    --ink: #e6ecf0;
    --ink-2: #a3b3bf;
    --rule: #2c3b47;
    --sky: #7fb0ff;
    --sky-ink: #0d1a2a;
    --night: #0a1117;
    --night-ink: #e6ecf0;
    --radius-btn: 6px;
    --radius-card: 14px;
    --shadow-card: none;
    --rule-bold: 2px;
    --head-alpha: 88%;
    --head-filter: saturate(140%) blur(10px);
    --shadow-doc: 0 18px 40px -28px rgba(20,33,43,.45);
    --foot-link: var(--sky);
    --product-top-w: 4px;
    --product-bar-h: 0px;
    --product-acc-mix: 100%;
    --shadow-pop: 0 30px 80px -20px rgba(10,17,23,.55);
    --scrim: rgba(10,17,23,.45);
  }
}
:root[data-theme="dark"] {
  --paper: #111a21;
  --paper-2: #17232c;
  --ink: #e6ecf0;
  --ink-2: #a3b3bf;
  --rule: #2c3b47;
  --sky: #7fb0ff;
  --sky-ink: #0d1a2a;
  --night: #0a1117;
  --night-ink: #e6ecf0;
  --radius-btn: 6px;
  --radius-card: 14px;
  --shadow-card: none;
  --rule-bold: 2px;
  --head-alpha: 88%;
  --head-filter: saturate(140%) blur(10px);
  --shadow-doc: 0 18px 40px -28px rgba(20,33,43,.45);
  --foot-link: var(--sky);
  --product-top-w: 4px;
  --product-bar-h: 0px;
  --product-acc-mix: 100%;
  --shadow-pop: 0 30px 80px -20px rgba(10,17,23,.55);
  --scrim: rgba(10,17,23,.45);
}

/* Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--s0);
  line-height: 1.68;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: var(--sky); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 820px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }

/* Header ------------------------------------------------------------ */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) var(--head-alpha), transparent);
  backdrop-filter: var(--head-filter);
  -webkit-backdrop-filter: var(--head-filter);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.site-head.scrolled { border-bottom-color: var(--rule); }
.head-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
.mark { font-family: var(--f-display); font-weight: 700; font-size: 1.125rem; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.site-head ul { display: flex; gap: clamp(12px, 2.4vw, 28px); list-style: none; margin: 0; padding: 0; }
.site-head nav a { font-family: var(--f-display); font-size: 0.95rem; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.site-head nav a:hover { color: var(--ink); }
.site-head nav .nav-resume { color: var(--sky); }
.theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; background: none; border: 1px solid var(--rule); border-radius: 50%; color: var(--ink-2); cursor: pointer; }
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-2); }
.theme-toggle:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (max-width: 720px) {
  .site-head .nav-wide { display: none; }
}

/* Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 600; font-size: 1rem;
  padding: 0.8em 1.3em; border-radius: var(--radius-btn); text-decoration: none;
  border: 2px solid var(--sky); transition: background .15s, color .15s;
}
.btn-solid { background: var(--sky); color: var(--sky-ink); }
.btn-solid:hover { background: color-mix(in srgb, var(--sky) 86%, var(--ink)); }
.btn-line { color: var(--sky); background: transparent; }
.btn-line:hover { background: color-mix(in srgb, var(--sky) 10%, transparent); }

/* Hero -------------------------------------------------------------- */
.hero { padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 7vw, 88px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.hero-role { font-family: var(--f-display); font-size: var(--s1); color: var(--ink-2); margin-bottom: 0.4em; font-weight: 500; }
.hero h1 {
  font-size: var(--s5);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.92;
  font-variation-settings: "opsz" 96;
  margin-bottom: 0.35em;
}
.hero-lead { font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.6; max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.8em 0 1.4em; }
.hero-meta { font-size: var(--s-1); color: var(--ink-2); margin: 0; }

/* Strata: the memorable element ------------------------------------ */
.strata { margin: 0; }
.strata-layers {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border-radius: 10px 10px 4px 4px; overflow: hidden;
  box-shadow: 0 1px 0 var(--rule);
}
.layer { display: block; }
.layer a {
  --h: 40px;
  display: grid; grid-template-columns: 5.6em 1fr; align-items: center; gap: 14px;
  min-height: var(--h);
  padding: 6px 16px;
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  font-family: var(--f-display);
  position: relative;
  transition: filter .15s, transform .15s;
}
/* uneven top edge on each band, like a real deposit */
.layer a::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px;
  background: linear-gradient(90deg, transparent 0 8%, color-mix(in srgb, var(--bg) 70%, #fff) 8% 31%, transparent 31% 52%, color-mix(in srgb, var(--bg) 70%, #fff) 52% 67%, transparent 67%);
  opacity: .35;
}
.layer a:hover, .layer a:focus-visible { filter: brightness(1.08) saturate(1.1); }
.layer a:focus-visible { outline-offset: -3px; outline-color: var(--fg); }
.layer-years { font-size: 0.8rem; font-variant-numeric: tabular-nums; opacity: .82; font-weight: 500; }
.layer-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; line-height: 1.25; }
.layer-org { font-weight: 700; font-size: 0.98rem; }
.layer-role { font-size: 0.85rem; opacity: .85; }
.layer-tech { flex-basis: 100%; font-size: 0.78rem; opacity: .72; font-family: var(--f-body); font-style: italic; }
.strata figcaption { margin-top: 12px; font-size: var(--s-1); color: var(--ink-2); }

.strata.animate .layer { opacity: 0; transform: translateY(-14px); }
.strata.animate.go .layer { opacity: 1; transform: none; transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 70ms); }

/* Ledger ------------------------------------------------------------ */
.ledger { border-block: 1px solid var(--rule); padding: clamp(28px, 4vw, 44px) 0; }
.ledger-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin: 0; }
.ledger-list dt { font-family: var(--f-display); font-weight: 700; font-size: var(--s4); letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.25em; }
.ledger-list dd { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }

/* Sections ---------------------------------------------------------- */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-alt { background: var(--paper-2); }
.section-h { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.6em; }
.section-intro { color: var(--ink-2); max-width: 38em; margin-bottom: 2.4em; font-size: 1.1rem; }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.trio h3 { font-size: var(--s2); font-weight: 650; margin-bottom: 0.6em; letter-spacing: -0.02em; }
.trio p { color: var(--ink-2); }

/* Case studies ------------------------------------------------------ */
.case { padding: clamp(32px, 4vw, 48px) 0; border-top: var(--rule-bold) solid var(--ink); }
.case + .case { margin-top: 8px; }
.case-head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: baseline; margin-bottom: 1.6em; }
.case-where { font-family: var(--f-display); color: var(--ink-2); font-size: 0.95rem; margin: 0; font-weight: 500; }
.case h3 { font-size: clamp(1.5rem, 2.8vw, 2.125rem); font-weight: 700; letter-spacing: -0.025em; max-width: 22em; }
.case-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-left: calc(220px + 24px); }
.case h4 { font-size: 1rem; font-weight: 650; margin-bottom: 0.45em; color: var(--ink); }
.case-body p { font-size: 0.98rem; color: var(--ink-2); margin: 0; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 1.6em 0 0 calc(220px + 24px); }
.tags li { font-family: var(--f-display); font-size: 0.82rem; padding: 3px 10px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-2); }

.scale { margin: 1.8em 0 0 calc(220px + 24px); display: grid; gap: 8px; max-width: 640px; }
.scale-row { display: grid; grid-template-columns: 4.5em 1fr 6.5em; gap: 12px; align-items: center; font-family: var(--f-display); font-size: 0.88rem; }
.scale-label { color: var(--ink-2); }
.scale-bar { height: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--ink-2) var(--w), transparent var(--w)); min-width: 4px; }
.scale-bar-after { background: linear-gradient(90deg, var(--sky) var(--w), transparent var(--w)); }
.scale-val { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Prose ------------------------------------------------------------- */
.prose p { font-size: 1.1rem; line-height: 1.75; margin-bottom: 1.2em; }
.prose strong { font-family: var(--f-display); font-weight: 650; font-size: 1.12em; letter-spacing: -0.01em; display: block; margin-bottom: 0.15em; }
#studio .prose strong { display: inline; font-size: 1em; }

/* Experience timeline (a real sequence) ----------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.job { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--rule); }
.job:first-child { border-top: var(--rule-bold) solid var(--ink); }
.job-when { font-family: var(--f-display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); padding-top: 4px; }
.job-main { max-width: 760px; }
.job h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.3em; }
.job-place { font-weight: 400; font-size: 0.95rem; color: var(--ink-2); letter-spacing: 0; margin-left: 8px; }
.job-title { font-family: var(--f-display); font-weight: 500; margin-bottom: 0.5em; }
.job p { color: var(--ink-2); }
.job:target { background: color-mix(in srgb, var(--sky) 7%, transparent); }

.ladder { list-style: none; margin: 0.6em 0 1.2em; padding: 0 0 0 16px; border-left: 3px solid var(--sky); }
.ladder li { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--f-display); padding: 3px 0; }
.ladder li span:first-child { font-weight: 600; }
.ladder li span:last-child { color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: 0.92rem; }

details { margin-top: 0.4em; }
summary { cursor: pointer; font-family: var(--f-display); font-weight: 600; color: var(--sky); width: fit-content; }
summary::marker { color: var(--sky); }
.bullets { margin: 1em 0 0; padding-left: 1.2em; }
.bullets li { margin-bottom: 0.6em; color: var(--ink-2); font-size: 0.98rem; }

/* Toolkit ----------------------------------------------------------- */
.kit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 5vw, 72px); }
.kit-group { padding: 20px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 16px; }
.kit-group h3 { font-size: 1.05rem; font-weight: 650; }
.kit-group p { margin: 0; color: var(--ink-2); font-size: 0.98rem; }

/* Contact ----------------------------------------------------------- */
.contact { background: var(--night); color: var(--night-ink); padding: clamp(72px, 10vw, 128px) 0; }
.contact h2 { font-size: clamp(2.25rem, 6vw, 4.5rem); font-weight: 800; letter-spacing: -0.04em; max-width: 14em; margin-bottom: 0.4em; }
.contact-lead { font-size: 1.2rem; max-width: 34em; opacity: .88; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 2em 0 1.6em; }
.btn-on-dark { --sky: #8db8ff; --sky-ink: #0d1a2a; }
.contact-meta { font-size: var(--s-1); opacity: .7; margin: 0; }

.site-foot { background: var(--night); color: var(--night-ink); border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; font-size: var(--s-1); }
.site-foot p { margin: 0; opacity: .6; }
/* --sky is too dim on --night in light; keep footer links in the band's own ink */
.site-foot a { color: var(--foot-link); }

/* Responsive -------------------------------------------------------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .ledger-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio { grid-template-columns: 1fr; }
  .case-head, .job { grid-template-columns: 1fr; gap: 6px; }
  .case-body { grid-template-columns: 1fr; margin-left: 0; }
  .tags, .scale { margin-left: 0; }
  .kit { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ledger-list { grid-template-columns: 1fr; }
  .kit-group { grid-template-columns: 1fr; gap: 4px; }
  .layer a { grid-template-columns: 4.4em 1fr; padding: 6px 12px; gap: 10px; }
  .layer-tech { display: none; }
  .hero-actions .btn { flex: 1 1 100%; }
}

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Ask (the assistant) ----------------------------------------------- */
.ask {
  --ask-bg: #1c2b3a;
  --ask-ink: #e9eef2;
  --ask-dim: #a9b9c6;
  --ask-line: #34495b;
  --ask-glow: #8db8ff;
  background: var(--ask-bg); color: var(--ask-ink);
  padding: clamp(64px, 9vw, 112px) 0;
  position: relative; overflow: hidden;
}
/* faint strata echo along the bottom edge, tying the assistant to the hero */
.ask::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background: linear-gradient(180deg, #2c4256 0 33%, #3d5f73 33% 66%, #5f8582 66%);
  opacity: .6;
}
.ask-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.ask .section-h { color: var(--ask-ink); }
.ask-intro p { color: var(--ask-dim); font-size: 1.08rem; }
.ask-intro a { color: var(--ask-glow); }
.ask-fine { font-size: var(--s-1) !important; }

.ask-panel {
  position: relative;
  background: #15222e;
  border: 1px solid var(--ask-line);
  border-radius: 12px;
  display: flex; flex-direction: column;
  min-height: 420px;
}
/* while generating, a soft light travels around the panel edge */
.ask-panel::before {
  content: ""; position: absolute; inset: -1px; border-radius: 12px; padding: 1px;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, var(--ask-glow) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.ask-panel.busy::before { opacity: 1; animation: orbit 2.4s linear infinite; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes orbit { to { --ang: 360deg; } }

.ask-log { flex: 1; padding: 22px 22px 8px; overflow-y: auto; max-height: 480px; scroll-behavior: smooth; }
.ask-suggest p { font-family: var(--f-display); color: var(--ask-dim); font-size: 0.92rem; margin-bottom: 10px; }
.ask-suggest ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ask-suggest button {
  width: 100%; text-align: left; cursor: pointer;
  font: 500 0.98rem/1.35 var(--f-display); color: var(--ask-ink);
  background: transparent; border: 1px solid var(--ask-line); border-radius: 8px;
  padding: 11px 14px; transition: border-color .15s, background .15s, transform .15s;
}
.ask-suggest button:hover { border-color: var(--ask-glow); background: rgba(141,184,255,.06); transform: translateX(3px); }

.msg { margin-bottom: 18px; animation: msg-in .35s cubic-bezier(.2,.7,.2,1); }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } }
.msg-q { font-family: var(--f-display); font-weight: 600; color: var(--ask-ink); padding-left: 12px; border-left: 3px solid var(--ask-glow); }
.msg-a { color: #d5dee5; line-height: 1.65; }
.msg-a p { margin: 0 0 .7em; }
.msg-a ul { margin: 0 0 .7em; padding-left: 1.2em; }
.msg-a strong { color: #fff; font-weight: 600; }
.msg-a a { color: var(--ask-glow); }
.msg-a.streaming > :last-child::after {
  content: ""; display: inline-block; width: .55em; height: 1.05em; margin-left: 2px;
  background: var(--ask-glow); vertical-align: -.15em; border-radius: 1px;
  animation: caret 1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.msg-thinking {
  font-family: var(--f-display); font-size: .95rem;
  background: linear-gradient(90deg, var(--ask-dim) 0 35%, #fff 50%, var(--ask-dim) 65% 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.msg-error { color: #ffc9a8; }

.ask-form { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--ask-line); }
.ask-form input {
  flex: 1; min-width: 0;
  font: 1rem var(--f-body); color: var(--ask-ink);
  background: #0f1922; border: 1px solid var(--ask-line); border-radius: 8px; padding: 12px 14px;
}
.ask-form input::placeholder { color: #7f92a1; }
.ask-form input:focus-visible { outline: 2px solid var(--ask-glow); outline-offset: 1px; }
.ask .btn { --sky: #8db8ff; --sky-ink: #0d1a2a; }
.ask-form .btn:disabled { opacity: .55; cursor: progress; }

/* AI practice ------------------------------------------------------- */
.ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 64px); }
.ai-item { padding: 24px 0; border-top: 1px solid var(--rule); }
.ai-item h3 { font-size: 1.3rem; font-weight: 650; margin-bottom: .45em; letter-spacing: -0.015em; }
.ai-item p { color: var(--ink-2); margin: 0; }
.ai-proof { margin: 2em 0 0; padding: 16px 20px; border-left: 3px solid var(--sky); background: color-mix(in srgb, var(--sky) 6%, transparent); max-width: 46em; }

/* Writing ----------------------------------------------------------- */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-item { border-top: 1px solid var(--rule); }
.post-item:last-child { border-bottom: 1px solid var(--rule); }
.post-item a { display: grid; gap: 4px; padding: 22px 0; text-decoration: none; color: inherit; }
.post-item-title { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1.2; transition: color .15s; }
.post-item a:hover .post-item-title { color: var(--sky); }
.post-item-summary { color: var(--ink-2); }
.post-item-meta { font-family: var(--f-display); font-size: .88rem; color: var(--ink-2); }
.draft-pill { font-size: .7rem; font-weight: 600; vertical-align: .3em; padding: 2px 8px; border-radius: 999px; background: #f3d9a4; color: #4a3500; letter-spacing: 0; }
.writing-more { margin: 1.4em 0 0; font-family: var(--f-display); font-weight: 600; }

.page-h { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.04em; margin-bottom: .3em; }
.article { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 9vw, 112px); }
.article-back { font-family: var(--f-display); font-size: .95rem; margin-bottom: 2em; }
.draft-note { display: inline-block; font-family: var(--f-display); font-size: .9rem; padding: 6px 12px; border-radius: 6px; background: #f3d9a4; color: #4a3500; }
.article h1 { font-size: clamp(2.25rem, 5.5vw, 3.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; margin-bottom: .4em; max-width: 18em; }
.article-dek { font-size: 1.25rem; color: var(--ink-2); line-height: 1.55; max-width: 36em; }
.article-meta { font-family: var(--f-display); font-size: .92rem; color: var(--ink-2); padding-bottom: 2em; border-bottom: 2px solid var(--ink); margin-bottom: 2.4em; }
.article-body { font-size: 1.12rem; line-height: 1.8; max-width: 38em; }
.article-body h2 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin: 1.8em 0 .5em; }
.article-body p, .article-body ul, .article-body ol { margin: 0 0 1.2em; }
.article-body li { margin-bottom: .5em; }
.article-body strong { font-weight: 600; }
.article-body em { color: var(--ink-2); }
.article-end { margin: 3em 0; padding: 20px 22px; background: var(--paper-2); border-radius: 8px; max-width: 38em; }
.article-end p { margin: 0; }
.more-h { font-size: 1.4rem; margin: 0 0 .8em; }

@media (max-width: 980px) {
  .ask-grid, .ai-grid { grid-template-columns: 1fr; }
  .ask-panel { min-height: 380px; }
}

/* Shared bits ------------------------------------------------------- */
.btn-text {
  background: none; border: 0; padding: 0.8em 0.2em; cursor: pointer;
  font: 600 1rem var(--f-display); color: var(--sky);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.btn-text:hover { text-decoration-thickness: 2px; }
.btn-small { padding: 0.45em 0.9em; font-size: 0.92rem; }
.btn:disabled { opacity: .55; cursor: progress; }
.headshot { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 18px; box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--rule); }
.cmd { margin: 0.4em 0 0; padding: 12px 14px; background: var(--night); color: var(--night-ink); border-radius: 6px; overflow-x: auto; font-size: 0.86rem; }
.ai-proof p:last-of-type { margin-bottom: 0.6em; }

/* Role fit ---------------------------------------------------------- */
.fit-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.fit-intro .section-intro { margin-bottom: 1.2em; }
.fit-fine { font-size: var(--s-1); color: var(--ink-2); max-width: 34em; }
.fit-label { display: block; font-family: var(--f-display); font-weight: 600; margin-bottom: 8px; }
.fit-form textarea {
  width: 100%; resize: vertical; min-height: 220px;
  font: 0.98rem/1.55 var(--f-body); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 14px 16px;
}
.fit-form textarea:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; border-color: transparent; }
.fit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
.fit-error { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid #c2410c; background: color-mix(in srgb, #c2410c 8%, transparent); }

.fit-progress { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: fp; }
.fit-progress li {
  counter-increment: fp; position: relative;
  font-family: var(--f-display); font-size: .95rem; color: var(--ink-2);
  padding: 14px 0 0; border-top: 3px solid var(--rule); transition: color .3s, border-color .3s;
}
.fit-progress li::before { content: counter(fp) ". "; font-variant-numeric: tabular-nums; }
.fit-progress li.active { color: var(--ink); border-top-color: var(--sky); }
.fit-progress li.active::after {
  content: ""; position: absolute; top: -3px; left: 0; height: 3px; width: 40%;
  background: color-mix(in srgb, var(--sky) 40%, var(--paper-2)); animation: sweep 1.2s ease-in-out infinite;
}
@keyframes sweep { from { left: 0; } to { left: 60%; } }
.fit-progress li.done { color: var(--ink); border-top-color: var(--sky); }

/* The brief: a document, printable on its own */
.brief-doc {
  margin-top: 40px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  padding: clamp(24px, 4vw, 48px); box-shadow: var(--shadow-doc);
  animation: brief-in .5s cubic-bezier(.2,.7,.2,1);
}
@keyframes brief-in { from { opacity: 0; transform: translateY(12px); } }
.brief-page .brief-doc { margin-top: 0; }
.brief-kind { font-family: var(--f-display); font-weight: 600; color: var(--sky); margin-bottom: .3em; }
.brief-head h3 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 750; letter-spacing: -0.03em; max-width: 24em; }
.brief-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 0; font-family: var(--f-display); font-size: .92rem; color: var(--ink-2); }
.fit-pill { font-weight: 650; padding: 3px 12px; border-radius: 999px; color: #fff; background: #3d5f73; }
.fit-strong { background: #1f6f4a; }
.fit-good { background: #2c6a8f; }
.fit-partial { background: #8a6418; }
.fit-limited { background: #6b4e5c; }
.brief-summary { font-size: 1.15rem; line-height: 1.65; max-width: 44em; margin: 1.4em 0 1.8em; padding-bottom: 1.6em; border-bottom: 2px solid var(--ink); }
.brief-doc h4 { font-size: 1.15rem; font-weight: 700; margin-bottom: .8em; }
.brief-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
.brief-list { list-style: none; margin: 0; padding: 0; }
.brief-list li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--rule); }
.brief-list strong { font-family: var(--f-display); font-weight: 650; }
.brief-list span { color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
.brief-list cite { font-style: normal; font-family: var(--f-display); font-size: .82rem; color: var(--sky); font-weight: 600; }
.brief-gaps li { border-top-style: dashed; }
.brief-plan { margin-top: 2em; }
.brief-plan ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.brief-plan li { display: grid; align-content: start; gap: 4px; padding: 14px 16px; background: var(--paper-2); border-radius: 8px; border-top: 3px solid var(--sky); }
.plan-when { font-family: var(--f-display); font-size: .85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.brief-plan strong { font-family: var(--f-display); font-weight: 650; line-height: 1.3; }
.brief-plan li > span:last-child { font-size: .95rem; color: var(--ink-2); line-height: 1.55; }
.brief-qs { margin-top: 2em; }
.brief-qs ul { margin: 0; padding-left: 1.2em; }
.brief-qs li { margin-bottom: .4em; }
.brief-foot { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--rule); font-size: var(--s-1); color: var(--ink-2); }
.brief-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.brief-status { font-family: var(--f-display); font-size: .92rem; color: var(--ink-2); word-break: break-all; }
.brief-loading { color: var(--ink-2); }
.brief-cta { margin-top: 2.4em; color: var(--ink-2); }

/* Offload simulation ------------------------------------------------ */
.sim-block { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(32px, 4vw, 48px); border-top: 2px solid var(--ink); }
.sim-h { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 750; letter-spacing: -0.03em; margin-bottom: .5em; }
.sim-block .section-intro { margin-bottom: 1.8em; }
.sim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.sim-stage {
  --sim-line: #c3ccd3; --sim-line-on: #7d8f9c; --sim-legacy: #a07a2c; --sim-cloud: #1f5fbf; --sim-bad: #d23c2c;
  position: relative; display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "src src" "router router" "legacy cloud" "out compare";
  row-gap: clamp(36px, 5vw, 56px); column-gap: 18%;
  padding: 24px clamp(12px, 3vw, 28px);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 12px;
}
.sim-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sim-node {
  position: relative; z-index: 1; justify-self: center;
  min-width: 9.5em; text-align: center;
  font: 650 .95rem/1.25 var(--f-display);
  padding: 10px 14px; border-radius: 8px;
  background: var(--paper); border: 1.5px solid var(--ink-2);
  transition: opacity .3s, border-color .3s, box-shadow .3s;
}
.sim-node small { display: block; font-weight: 450; font-size: .78rem; color: var(--ink-2); margin-top: 2px; }
.node-legacy { border-color: var(--sim-legacy); box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--sim-legacy) 35%, transparent); }
.node-cloud { border-color: var(--sim-cloud); box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--sim-cloud) 30%, transparent); }
.node-legacy.retired { opacity: .4; border-style: dashed; box-shadow: none; }
.node-compare { border-style: dashed; }
.node-compare.idle { opacity: .45; }
.flash-ok { animation: flash-ok .45s ease; }
.flash-bad { animation: flash-bad .7s ease; }
@keyframes flash-ok { 30% { box-shadow: 0 0 0 4px color-mix(in srgb, #1f6f4a 35%, transparent); border-color: #1f6f4a; } }
@keyframes flash-bad { 25% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sim-bad) 35%, transparent); border-color: var(--sim-bad); } }

.sim-steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sim-steps button {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: 600 .88rem var(--f-display); color: var(--ink-2);
  background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px 5px 6px;
}
.sim-steps button span {
  display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--paper-2); font-variant-numeric: tabular-nums; font-size: .8rem;
}
.sim-steps .past button { color: var(--ink); }
.sim-steps .past button span { background: color-mix(in srgb, var(--sky) 22%, var(--paper)); }
.sim-steps .now button { color: var(--sky-ink); background: var(--sky); border-color: var(--sky); }
.sim-steps .now button span { background: color-mix(in srgb, var(--sky-ink) 25%, transparent); }
.sim-copy h4 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: .4em; }
.sim-copy p { color: var(--ink-2); }
.sim-copy .sim-warn { color: var(--ink); padding: 10px 14px; border-left: 3px solid var(--sim-bad, #d23c2c); background: color-mix(in srgb, #d23c2c 9%, transparent); }
.sim-copy .sim-ok { color: var(--ink); padding: 10px 14px; border-left: 3px solid #1f6f4a; background: color-mix(in srgb, #1f6f4a 9%, transparent); }
.sim-copy .sim-hint { font-size: var(--s-1); }
.sim-dial { margin: 4px 0 18px; }
.sim-dial label { display: flex; justify-content: space-between; font-family: var(--f-display); font-weight: 600; margin-bottom: 6px; }
.sim-dial output { color: var(--sky); font-variant-numeric: tabular-nums; }
.sim-dial-row { display: flex; align-items: center; gap: 14px; }
.sim-dial input { flex: 1; accent-color: var(--sky); min-width: 0; }
.sim-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 0 0 14px; }
.sim-stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rule); }
.sim-stats dt { font-size: .9rem; color: var(--ink-2); }
.sim-stats dd { margin: 0; font: 700 1.05rem var(--f-display); font-variant-numeric: tabular-nums; }
.sim-stats .st-err { grid-column: 1 / -1; }
.sim-stats .st-err dd { color: #1f6f4a; }
.sim-stats .st-err.has-err dd { color: #d23c2c; }
.sim-diffs { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.sim-diffs li {
  font-size: .9rem; padding: 6px 10px 6px 28px; position: relative; border-radius: 6px;
  background: color-mix(in srgb, #d23c2c 8%, transparent); animation: msg-in .3s ease;
}
.sim-diffs li::before { content: "≠"; position: absolute; left: 10px; color: #d23c2c; font-weight: 700; }
.sim-diffs li.fixed { background: color-mix(in srgb, #1f6f4a 9%, transparent); color: var(--ink-2); }
.sim-diffs li.fixed::before { content: "✓"; color: #1f6f4a; }
.sim-nav { display: flex; gap: 10px; }
.sim-note { margin: 1.4em 0 0; font-size: var(--s-1); color: var(--ink-2); max-width: 46em; }

/* Testimonials (in the contact band) */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(20px, 3vw, 40px); margin-bottom: clamp(48px, 7vw, 88px); }
.quote { margin: 0; padding-top: 18px; border-top: 2px solid rgba(255,255,255,.25); }
.quote blockquote { margin: 0 0 14px; font-size: 1.15rem; line-height: 1.6; }
.quote blockquote p::before { content: "“"; }
.quote blockquote p::after { content: "”"; }
.quote figcaption { font-family: var(--f-display); font-size: .92rem; display: grid; opacity: .85; }
.quote figcaption span { opacity: .75; }

@media (max-width: 980px) {
  .fit-grid, .sim, .brief-cols { grid-template-columns: 1fr; }
  .brief-plan ol, .fit-progress { grid-template-columns: 1fr; }
  .fit-progress li { padding-top: 8px; }
}
@media (max-width: 520px) {
  .sim-node { min-width: 0; width: 100%; font-size: .85rem; padding: 8px; }
  .sim-stage { column-gap: 10%; }
  .sim-stats { grid-template-columns: 1fr; }
}

/* Motion ------------------------------------------------------------ */
/* Page load: hero copy rises in step with the strata depositing. */
.motion .hero-copy > * { opacity: 0; transform: translateY(12px); }
.motion.ready .hero-copy > * {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.motion.ready .hero-copy > :nth-child(1) { transition-delay: .05s; }
.motion.ready .hero-copy > :nth-child(2) { transition-delay: .15s; }
.motion.ready .hero-copy > :nth-child(3) { transition-delay: .3s; }
.motion.ready .hero-copy > :nth-child(4) { transition-delay: .45s; }
.motion.ready .hero-copy > :nth-child(5) { transition-delay: .55s; }

/* Name settles from a wide, light cut to its heavy final weight. */
.motion .hero h1 { font-weight: 400; letter-spacing: -0.01em; }
.motion.ready .hero h1 {
  font-weight: 800; letter-spacing: -0.045em;
  transition: opacity .6s ease .15s, transform .7s cubic-bezier(.2,.7,.2,1) .15s,
              font-weight 1.1s cubic-bezier(.2,.7,.2,1) .2s, letter-spacing 1.1s cubic-bezier(.2,.7,.2,1) .2s;
}

/* Strata hover: the layer slides out like a drawer and its edge lights up. */
.layer a { transition: filter .2s, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.layer a::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--fg); transform: scaleY(0); transition: transform .25s cubic-bezier(.2,.7,.2,1);
  opacity: .8;
}
.layer a:hover, .layer a:focus-visible { transform: translateX(8px); }
.layer a:hover::before, .layer a:focus-visible::before { transform: scaleY(1); }
.layer-years { transition: opacity .2s; }
.layer a:hover .layer-years { opacity: 1; }

/* Throughput bar grows when it scrolls into view. */
.motion .reveal-scale .scale-bar { transform: scaleX(0); transform-origin: left; }
.motion .reveal-scale.seen .scale-bar { transform: scaleX(1); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.motion .reveal-scale.seen .scale-bar-after { transition-delay: .35s; transition-duration: 1.8s; }

/* Buttons respond to press. */
.btn { transition: background .15s, color .15s, transform .12s; }
.btn:active { transform: translateY(1px) scale(.98); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strata.animate .layer { opacity: 1; transform: none; transition: none; }
  .layer a, .layer a:hover { transform: none; box-shadow: none; }
  .ask-panel.busy::before, .msg-thinking, .msg-a.streaming > :last-child::after, .msg,
  .fit-progress li.active::after, .brief-doc, .sim-diffs li { animation: none; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sim-stage { --sim-line: #2c3b47; --sim-line-on: #6f8494; --sim-legacy: #d7b46a; --sim-cloud: #7fb0ff; --sim-bad: #ff7b6b; }
}
:root[data-theme="dark"] .sim-stage { --sim-line: #2c3b47; --sim-line-on: #6f8494; --sim-legacy: #d7b46a; --sim-cloud: #7fb0ff; --sim-bad: #ff7b6b; }

@media print {
  .brief-actions, .brief-cta, .site-foot, .fit-form, .fit-intro { display: none !important; }
  .brief-doc { box-shadow: none; border: 0; padding: 0; margin: 0; animation: none; background: #fff; }
  .brief-plan li { background: #f2f4f6; }
  html.print-brief main > :not(#fit), html.print-brief .site-foot { display: none !important; }
  html.print-brief #fit { padding: 0; background: #fff; }
  .brief-plan li { break-inside: avoid; }
  .site-head, .hero-actions, .contact-actions, .skip { display: none; }
  body { background: #fff; color: #000; }
  .section-alt, .contact, .site-foot { background: #fff; color: #000; }
  details > *:not(summary) { display: block; }
}

/* Header search trigger ------------------------------------------------ */
.pal-trigger {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 500 .9rem var(--f-display); color: var(--ink-2);
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 8px 6px 10px;
}
.pal-trigger:hover { color: var(--ink); border-color: var(--ink-2); }
.pal-trigger svg { width: 15px; height: 15px; }
.pal-trigger kbd, .palette kbd {
  font: 600 .72rem var(--f-display); color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px;
}
.head-right { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); }
@media (max-width: 720px) { .pal-trigger .pal-text, .pal-trigger kbd { display: none; } .pal-trigger { padding: 7px; } }

/* Command palette ------------------------------------------------------ */
.palette {
  width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 96px));
  margin: 12vh auto auto; padding: 0; border: 1px solid var(--rule); border-radius: 14px;
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.palette::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }
.palette[open] { animation: pal-in .18s cubic-bezier(.2,.7,.2,1); }
@keyframes pal-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.pal-box { display: flex; flex-direction: column; max-height: inherit; }
.pal-field { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.pal-field svg { width: 18px; height: 18px; color: var(--ink-2); flex: none; }
.pal-field input { flex: 1; min-width: 0; border: 0; background: none; font: 1.08rem var(--f-display); color: var(--ink); outline: none; }
.pal-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.pal-group { font: 600 .78rem var(--f-display); color: var(--ink-2); padding: 10px 10px 4px; }
.pal-item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.pal-item.on { background: color-mix(in srgb, var(--sky) 13%, transparent); }
.pal-label { font: 600 .98rem var(--f-display); }
.pal-hint { font-size: .85rem; color: var(--ink-2); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 10px 16px; border-top: 1px solid var(--rule); font: .8rem var(--f-display); color: var(--ink-2); }
.pal-foot kbd { margin-right: 3px; }
@media (max-width: 520px) { .pal-hint { display: none; } .pal-foot span:last-child { display: none; } }

/* Hero: what I'm doing now --------------------------------------------- */
.hero-now { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 1em; font: 500 .95rem var(--f-display); color: var(--ink-2); }
.hero-now a { color: var(--ink); font-weight: 600; }
.now-dot { width: 8px; height: 8px; border-radius: 50%; background: #1f8f5f; box-shadow: 0 0 0 0 rgba(31,143,95,.5); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(31,143,95,0); } 100% { box-shadow: 0 0 0 0 rgba(31,143,95,0); } }
.layer.layer-now a { background: repeating-linear-gradient(135deg, var(--bg) 0 10px, color-mix(in srgb, var(--bg) 88%, #fff) 10px 20px); }

/* Products (studio) ---------------------------------------------------- */
.studio { --acc: #14b8a6; }
.studio-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; margin-bottom: 2em; }
.studio-head .section-intro { margin-bottom: 0; }
.studio-facts { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 28px; margin: 0; }
.studio-facts dt { font: 700 1.9rem/1 var(--f-display); letter-spacing: -0.03em; }
.studio-facts dd { margin: 4px 0 0; font: .85rem var(--f-display); color: var(--ink-2); }
.studio-facts div { padding-top: 10px; border-top: 2px solid var(--ink); }

.shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.shelf [role="tab"] {
  --a: #888; text-align: left; cursor: pointer; position: relative; overflow: hidden;
  display: grid; gap: 2px; padding: 14px 14px 16px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 10px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.shelf [role="tab"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--a); transform: scaleX(.18); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.shelf [role="tab"]:hover { border-color: var(--ink-2); }
.shelf [role="tab"][aria-selected="true"] { border-color: var(--a); box-shadow: 0 10px 24px -18px var(--a); transform: translateY(-2px); }
.shelf [role="tab"][aria-selected="true"]::before { transform: scaleX(1); }
.shelf-name { font: 700 1.05rem var(--f-display); letter-spacing: -0.01em; }
.shelf-domain { font: .82rem var(--f-display); color: var(--ink-2); }
.shelf-what { font-size: .85rem; color: var(--ink-2); line-height: 1.4; margin-top: 4px; }

.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); padding: clamp(22px, 3.5vw, 40px); background: var(--paper); border: 1px solid var(--rule); border-top: var(--product-top-w) solid color-mix(in srgb, var(--acc) var(--product-acc-mix), var(--rule)); border-radius: var(--radius-card); position: relative; overflow: hidden; box-shadow: var(--shadow-card); }
/* light: thin top rule + accent bar clipped by the rounded corners (a thick border-top tapers into a crescent).
   dark: tokens resolve to the original 4px accent border-top and no bar. */
.product::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--product-bar-h); background: var(--acc); }
.product[hidden] { display: none; }
.product-name { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.035em; margin-bottom: .2em; }
.product-tag { font: 600 1.1rem/1.4 var(--f-display); margin-bottom: .9em; }
.product-about { color: var(--ink-2); }
.product-proof { margin: 0 0 1.4em; padding: 0; list-style: none; }
.product-proof li { position: relative; padding: 5px 0 5px 22px; font-size: .97rem; }
.product-proof li::before { content: ""; position: absolute; left: 2px; top: .85em; width: 10px; height: 10px; border-radius: 3px; background: var(--acc); }
.product-build { margin: 0 0 1.4em; padding: 14px 16px; background: var(--paper-2); border-radius: 10px; }
.product-build h4 { font-size: .95rem; margin-bottom: .5em; }
.product-build ul { list-style: none; margin: 0 0 .6em; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.product-build li { font: .8rem var(--f-display); padding: 2px 9px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); }
.product-build p { font-size: .92rem; color: var(--ink-2); margin: .4em 0 0; }
.product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.product-shot { display: block; margin-top: 1.6em; border-radius: 10px; overflow: hidden; border: 1px solid var(--rule); box-shadow: 0 16px 36px -26px rgba(20,33,43,.6); }
.product-shot::before { content: ""; display: block; height: 22px; background: var(--paper-2) radial-gradient(circle at 12px 11px, #e06c5f 3.5px, transparent 4px) , radial-gradient(circle at 26px 11px, #e5b94e 3.5px, transparent 4px), radial-gradient(circle at 40px 11px, #5fb06a 3.5px, transparent 4px); background-color: var(--paper-2); border-bottom: 1px solid var(--rule); }
.product-shot img { display: block; width: 100%; height: auto; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.product-shot:hover img { transform: scale(1.02); }
.product-shot figcaption { font-size: .8rem; color: var(--ink-2); padding: 6px 10px; background: var(--paper-2); }

/* Demo frame shared by all products */
.demo { position: relative; align-self: start; background: var(--paper-2); border-radius: 12px; padding: 18px; border: 1px solid var(--rule); }
.demo-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; font: 600 .9rem var(--f-display); }
.demo-label span:last-child { font-weight: 400; font-size: .8rem; color: var(--ink-2); }
.demo-btn { cursor: pointer; font: 600 .92rem var(--f-display); color: var(--paper); background: var(--ink); border: 0; border-radius: 8px; padding: 9px 14px; }
.demo-btn:disabled { opacity: .5; cursor: progress; }
.demo-small { font-size: .8rem; color: var(--ink-2); margin: 10px 0 0; }

/* SavedJob phone */
.phone { max-width: 330px; margin: 0 auto; background: #14212b; border-radius: 30px; padding: 12px; box-shadow: 0 20px 40px -24px rgba(0,0,0,.6); }
.phone-screen { background: #f6f5f1; border-radius: 20px; overflow: hidden; color: #1d232a; }
.phone-top { display: flex; justify-content: space-between; padding: 10px 16px; font: 600 .78rem var(--f-display); background: #fff; border-bottom: 1px solid #e3e0d8; }
.sj-thread { height: 400px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth; }
.sj-msg { margin: 0; max-width: 84%; padding: 7px 11px; border-radius: 16px; font: .86rem/1.35 system-ui, sans-serif; animation: msg-in .25s ease; }
.sj-out { align-self: flex-end; background: #f59e0b; color: #1d1305; border-bottom-right-radius: 4px; }
.sj-in { align-self: flex-start; background: #fff; border: 1px solid #e3e0d8; border-bottom-left-radius: 4px; }
.sj-sys { align-self: center; max-width: none; font-size: .74rem; color: #7a7466; background: none; padding: 2px; }
.sj-typing { align-self: flex-start; margin: 0; font: .78rem system-ui; color: #9a9384; }
.sj-card { margin-top: 8px; background: #fff; border: 2px solid #1d232a; border-radius: 10px; overflow: hidden; position: relative; animation: msg-in .3s ease; font-family: system-ui, sans-serif; }
.sj-card-head { display: flex; justify-content: space-between; margin: 0; padding: 7px 10px; background: #1d232a; color: #fff; font: 700 .78rem var(--f-display); }
.sj-card-head span:first-child { color: #f59e0b; }
.sj-card dl { margin: 0; padding: 8px 10px; display: grid; gap: 3px; }
.sj-card dl div { display: grid; grid-template-columns: 5.5em 1fr; font-size: .8rem; }
.sj-card dt { color: #7a7466; }
.sj-card dd { margin: 0; font-weight: 600; }
.sj-card-foot { margin: 0; padding: 5px 10px; border-top: 1px dashed #c9c3b5; font-size: .72rem; color: #7a7466; }
.sj-reply { display: flex; gap: 6px; padding: 8px 10px 10px; }
.sj-reply button { flex: 1; cursor: pointer; border-radius: 8px; padding: 8px; font: 700 .8rem var(--f-display); border: 2px solid #1d232a; background: #fff; color: #1d232a; }
.sj-reply .sj-y { background: #f59e0b; }
.sj-stamp { position: absolute; right: 12px; bottom: 26px; margin: 0; padding: 2px 10px; border: 3px solid #1a7f52; color: #1a7f52; border-radius: 6px; font: 800 1.05rem var(--f-display); text-transform: uppercase; letter-spacing: .06em; transform: rotate(-9deg); animation: stamp .35s cubic-bezier(.3,1.6,.5,1); background: rgba(255,255,255,.8); }
@keyframes stamp { from { transform: rotate(-9deg) scale(1.8); opacity: 0; } }
.sj-note { margin: 0; padding: 8px 10px; font-size: .78rem; color: #7a7466; }

/* LineItemly estimate */
.li-sheet { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: 8px; overflow: hidden; font-size: .84rem; }
.li-sheet th { text-align: left; font: 600 .76rem var(--f-display); color: var(--ink-2); padding: 7px 10px; border-bottom: 1px solid var(--rule); }
.li-sheet td { padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; transition: background .25s; }
.li-sheet td:first-child { font-family: var(--f-display); font-size: .74rem; color: var(--ink-2); white-space: nowrap; }
.li-sheet .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.li-sheet tr.checking td { background: color-mix(in srgb, var(--sky) 10%, transparent); }
.li-sheet tr.ok td:last-child::after { content: " ✓"; color: #1f8f5f; font-weight: 700; }
.li-sheet tr.flag td { background: color-mix(in srgb, #f87171 12%, transparent); }
.li-sheet tr.flag td:last-child::after { content: " ⚑"; color: #d23c2c; }
.li-sheet tr.absent td:nth-child(2) { color: var(--ink-2); font-style: italic; }
.li-note { margin-top: 4px; font-size: .78rem; color: var(--ink); padding-left: 8px; border-left: 2px solid #d23c2c; animation: msg-in .25s ease; }
.li-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.li-result p { margin: 10px 0 0; font-size: .9rem; }
.li-letter { font-style: italic; color: var(--ink-2); padding: 8px 10px; background: var(--paper); border-radius: 6px; border-left: 3px solid var(--acc); }

/* Peak COI */
.pc-subs { list-style: none; margin: 0 0 14px; padding: 0; background: var(--paper); border-radius: 8px; overflow: hidden; }
.pc-subs li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--rule); font-size: .88rem; }
.pc-subs li:last-child { border-bottom: 0; }
.pc-subs small { display: block; color: var(--ink-2); font-size: .76rem; }
.pc-st { font: 700 .74rem var(--f-display); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pc-ok { background: #d9f2e4; color: #145c3b; }
.pc-exp { background: #fdebc8; color: #6b4708; }
.pc-def { background: #fde0dd; color: #8a1f15; }
.pc-mis { background: #e5e7ea; color: #3a4450; }
.pc-form { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.pc-form label { display: grid; gap: 3px; font: 600 .78rem var(--f-display); color: var(--ink-2); }
.pc-form select, .pc-form input { font: .9rem var(--f-body); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 7px 8px; min-width: 0; }
.pc-result { margin-top: 12px; padding: 10px 12px; border-radius: 8px; display: grid; gap: 2px; font-size: .88rem; }
.pc-result:empty { display: none; }
.pc-result.clear { background: color-mix(in srgb, #1f8f5f 12%, transparent); border-left: 3px solid #1f8f5f; }
.pc-result.blocked { background: color-mix(in srgb, #d23c2c 10%, transparent); border-left: 3px solid #d23c2c; }
.pc-result small { color: var(--ink-2); }

/* Landlord Tally */
.lt-table { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: 8px; overflow: hidden; font-size: .88rem; }
.lt-table td { padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.lt-table small { display: block; color: var(--ink-2); font-size: .76rem; }
.lt-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.lt-unit { font-weight: 600; }
.lt-st { font: 700 .74rem var(--f-display); padding: 2px 9px; border-radius: 999px; }
.lt-st:empty { display: none; }
.lt-due { background: #e5e7ea; color: #3a4450; }
.lt-paid { background: #d9f2e4; color: #145c3b; }
.lt-partial { background: #fdebc8; color: #6b4708; }
.lt-late { background: #fde0dd; color: #8a1f15; }
.lt-flash td { animation: lt-flash 1s ease; }
@keyframes lt-flash { from { background: color-mix(in srgb, #14b8a6 25%, transparent); } }
.lt-bar { height: 8px; background: var(--paper); border-radius: 4px; overflow: hidden; margin: 12px 0 4px; }
.lt-bar span { display: block; height: 100%; width: 0; background: #14b8a6; transition: width .8s cubic-bezier(.2,.7,.2,1); }
.lt-sum { font: .85rem var(--f-display); color: var(--ink-2); margin: 0 0 12px; }
.lt-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lt-note { font-size: .85rem; color: var(--ink-2); margin: 0; }

/* Calcimator */
.cm { background: #0f1216; color: #eef0f2; border-radius: 10px; padding: 16px; font-family: var(--f-display); }
.cm-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cm label { display: grid; gap: 4px; font-size: .78rem; color: #a7adb5; }
.cm input[type=number] { font: 600 1.05rem var(--f-display); color: #fff; background: #1a1f26; border: 1px solid #2c333d; border-radius: 6px; padding: 8px; width: 100%; min-width: 0; }
.cm input[type=number]:focus-visible { outline: 2px solid #f97316; outline-offset: 0; }
.cm-waste { display: flex !important; grid-template-columns: none; align-items: center; gap: 8px !important; margin-top: 10px; }
.cm-waste input { accent-color: #f97316; }
.cm-out { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; margin-top: 14px; }
.cm-out div { background: #1a1f26; border-radius: 8px; padding: 10px; }
.cm-out div:first-child { background: #f97316; color: #1a0c02; }
.cm-out b { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; }
.cm-out span { font-size: .75rem; opacity: .8; }
.cm-share { margin: 12px 0 0; font-size: .75rem; color: #a7adb5; overflow-wrap: anywhere; }
.cm-share code { color: #f9a66c; }

@media (max-width: 980px) {
  .studio-head { grid-template-columns: 1fr; }
  .shelf { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .shelf [role="tab"] { scroll-snap-align: start; }
  .product { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .studio-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; }
  .studio-facts dt { font-size: 1.4rem; }
  .pc-form { grid-template-columns: 1fr 1fr; }
  .pc-form button { grid-column: 1 / -1; }
  .cm-fields { grid-template-columns: 1fr 1fr; }
  .cm-out { grid-template-columns: 1fr 1fr; }
  .cm-out div:first-child { grid-column: 1 / -1; }
  .li-sheet td:first-child, .li-sheet th:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .now-dot, .palette[open], .sj-msg, .sj-card, .sj-stamp, .li-note, .lt-flash td { animation: none; }
  .shelf [role="tab"], .lt-bar span, .product-shot img { transition: none; }
}
.platform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); margin-top: 18px; padding: clamp(22px, 3.5vw, 36px); background: var(--night); color: var(--night-ink); border-radius: 14px; }
.platform h3 { font-size: 1.5rem; font-weight: 750; letter-spacing: -0.02em; margin-bottom: .5em; }
.platform p { opacity: .85; margin: 0; }
.platform-map { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.platform-map li { display: grid; gap: 1px; padding: 10px 14px; border-radius: 8px; background: rgba(255,255,255,.06); border-left: 3px solid var(--acc); transition: border-color .3s; }
.platform-map strong { font: 650 .95rem var(--f-display); }
.platform-map span { font-size: .86rem; opacity: .75; }
@media (max-width: 980px) { .platform { grid-template-columns: 1fr; } }
.sj-stage { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: center; }
.sj-stage .phone { flex: 0 1 300px; margin: 0; }
.sj-owner { flex: 1 1 220px; max-width: 300px; align-self: center; }
.sj-owner .sj-card { margin-top: 0; }
.sj-wait { font-size: .85rem; color: var(--ink-2); padding: 14px; border: 1px dashed var(--rule); border-radius: 10px; margin: 0; }
.sj-thread { height: 380px; }
@media (max-width: 980px) {
  .product-info { display: contents; }
  .product-name { order: 1; } .product-tag { order: 2; } .product .demo { order: 3; margin-bottom: 8px; }
  .product-about, .product-proof, .product-build, .product-actions, .product-shot { order: 4; }
  .product { gap: 0; }
  .product > * + * { margin-top: 0; }
  .product .demo { margin-bottom: 20px; }
}

/* Product showcase: a lit, spinning prism ------------------------------ */
.showcase { --acc: #f59e0b; margin: 0 0 22px; border-radius: 22px; overflow: hidden; background: #0b141b; color: #e9eef2; box-shadow: 0 30px 60px -30px rgba(10, 20, 30, .55); }
.pz-stage {
  --pulse: 0; position: relative; height: clamp(360px, 46vw, 560px); perspective: var(--persp, 2000px); perspective-origin: 50% 42%;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; overflow: hidden;
  background:
    radial-gradient(60% 55% at 50% 38%, color-mix(in srgb, var(--acc) calc(14% + var(--pulse) * 12%), transparent), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, #1a2a37 0%, #0b141b 62%);
  transition: background-color .6s;
}
.pz-stage.grabbing { cursor: grabbing; }
.pz-stage:focus-visible { box-shadow: inset 0 0 0 3px var(--acc); }
/* A cone of light from above, tinted by the product in front. */
.pz-beam {
  position: absolute; left: 50%; top: -10%; width: 70%; height: 95%; translate: -50% 0; pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%, transparent 152deg, color-mix(in srgb, var(--acc) 30%, #fff 20%) 180deg, transparent 208deg);
  opacity: calc(.16 + var(--pulse) * .14); filter: blur(18px); mix-blend-mode: screen;
}
.pz-floor {
  position: absolute; left: 50%; bottom: 4%; width: 70%; height: 22%; translate: -50% 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) calc(42% + var(--pulse) * 30%), transparent), transparent);
  filter: blur(14px); opacity: .8;
}
.pz-scene { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; padding-bottom: 4%; }
.pz-prism { position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; will-change: transform; }
.pz-face {
  --shade: .5; --spec: 0; --sx: 50%;
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 6px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--a) 60%, transparent), 0 0 calc(18px + var(--pulse) * 22px) color-mix(in srgb, var(--a) 35%, transparent);
}
.pz-chrome { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: #e9edf0; color: #3c4b57; }
.pz-chrome i { width: 8px; height: 8px; border-radius: 50%; background: #c3ccd3; }
.pz-chrome i:first-child { background: var(--a); }
.pz-chrome span { flex: 1; margin: 0 36px 0 10px; padding: 2px 0; border-radius: 5px; background: #fff; text-align: center; font: 600 11px/1.3 var(--f-display); letter-spacing: .01em; }
.pz-face video { display: block; width: 100%; height: calc(100% - 26px); object-fit: cover; background: #fff; }
.pz-shade, .pz-spec { position: absolute; inset: 0; pointer-events: none; }
.pz-shade { background: linear-gradient(90deg, rgba(5,10,15,.9), rgba(5,10,15,.65)); opacity: var(--shade); }
.pz-spec {
  background: linear-gradient(105deg, transparent calc(var(--sx) - 22%), rgba(255,255,255,.55) var(--sx), transparent calc(var(--sx) + 22%));
  opacity: var(--spec); mix-blend-mode: soft-light;
}
.pz-cap {
  position: absolute; left: 50%; top: 50%; width: var(--cap); height: var(--cap); margin: calc(var(--cap) / -2) 0 0 calc(var(--cap) / -2);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center;
}
.pz-top {
  transform: translateY(calc(var(--h) / -2)) rotateX(90deg);
  background: radial-gradient(120% 90% at 35% 30%, #5d7080, #2b3a46 55%, #1b2731);
  box-shadow: inset 0 0 40px color-mix(in srgb, var(--acc) 45%, transparent);
}
.pz-top span { font: 700 clamp(13px, 1.4vw, 18px) var(--f-display); color: rgba(255,255,255,.85); letter-spacing: .02em; transform: rotate(180deg); }
.pz-bottom { transform: translateY(calc(var(--h) / 2)) rotateX(-90deg); background: radial-gradient(closest-side, #2a3a47, #18242e); }
/* WebGL prism (showcase.js sets data-renderer="gl" once prism-gl.js is drawing); the CSS prism stays as the fallback. */
.pz-gl { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.pz-stage[data-renderer="gl"] .pz-gl { display: block; }
.pz-stage[data-renderer="gl"] .pz-scene { display: none; }
/* The domed prism is taller than the CSS one and the camera keeps the front face at a fixed share of
   the width (42% on a landscape stage, 80% on a portrait one), so the stage takes a shape that fits it:
   landscape on wide screens, portrait on phones (where 80% of the width beats 42%). */
/* "gl-pending" (set while parsing, kept while prism-gl.js loads) reserves the same box so nothing shifts. */
.pz-stage[data-renderer="gl"], .pz-stage[data-renderer="gl-pending"] { height: auto; aspect-ratio: 10 / 7; }
@media (max-width: 600px) { .pz-stage[data-renderer="gl"], .pz-stage[data-renderer="gl-pending"] { aspect-ratio: 3 / 4; } }
.pz-help { position: absolute; left: 0; right: 0; bottom: 12px; margin: 0; text-align: center; font: .78rem var(--f-display); color: #8ea2b1; pointer-events: none; }

.pz-caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; padding: 16px 22px 6px; border-top: 1px solid #1d2b36; }
.pz-now { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.pz-name { font: 700 1.5rem/1.1 var(--f-display); letter-spacing: -.02em; color: #fff; }
.pz-what { font: 1rem var(--f-body); color: #b4c3cf; }
.pz-dots { display: flex; gap: 8px; }
.pz-dot { width: 26px; height: 8px; border-radius: 4px; border: 0; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--a) 30%, #2a3a47); transition: background .3s, width .3s; }
.pz-dot[aria-current="true"] { width: 42px; background: var(--a); }
.pz-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.pz-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 22px 20px; }
.pz-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 18px; cursor: pointer;
  border: 1px solid #2c3d4a; background: #13202a; color: #e9eef2; font: 600 .85rem var(--f-display);
}
.pz-btn:hover { border-color: #4a6172; }
.pz-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.pz-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pz-btn[data-act="prev"], .pz-btn[data-act="next"] { width: 36px; padding: 0; justify-content: center; }
.pz-btn .i-play { display: none; fill: currentColor; stroke: none; }
.pz-btn[aria-pressed="true"] .i-play { display: block; }
.pz-btn[aria-pressed="true"] .i-pause { display: none; }
.pz-btn[data-act="dir"] svg { transition: transform .4s; }
.pz-btn[data-act="dir"].flip svg { transform: scaleX(-1); }
.pz-range { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 18px; background: #13202a; border: 1px solid #2c3d4a; font: 600 .85rem var(--f-display); }
.pz-range input { width: clamp(80px, 12vw, 140px); accent-color: var(--acc); }
.pz-music { margin-left: auto; }
.pz-music.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 20%, #13202a); }
.pz-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.pz-eq i { width: 3px; height: 4px; border-radius: 1px; background: currentColor; }
.pz-music.on .pz-eq i { animation: eq .9s ease-in-out infinite alternate; background: var(--acc); }
.pz-music.on .pz-eq i:nth-child(2) { animation-delay: -.3s; } .pz-music.on .pz-eq i:nth-child(3) { animation-delay: -.6s; } .pz-music.on .pz-eq i:nth-child(4) { animation-delay: -.45s; }
@keyframes eq { from { height: 3px; } to { height: 14px; } }
@media (max-width: 720px) {
  .showcase { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-radius: 0; }
  .pz-stage { height: 340px; }
  .pz-caption, .pz-controls { padding-left: 16px; padding-right: 16px; }
  .pz-music { margin-left: 0; }
  .pz-range { flex: 1 1 140px; }
  .pz-range input { flex: 1; width: auto; }
  .pz-help { display: none; }
}

/* Ribbon: a lit band twisting across the page (WebGL) ----------------- */
.ribbon {
  --rb-front: #ffffff; --rb-front-ink: #14212b; --rb-back: #1f5fbf; --rb-back-ink: #ffffff; --rb-rim: #7fb0ff;
  position: relative; height: clamp(220px, 30vw, 380px); margin: 8px 0 28px; display: none;
}
.ribbon.ready { display: block; }
.ribbon canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ribbon { --rb-front: #e6ecf0; --rb-front-ink: #111a21; --rb-back: #2f6fd0; --rb-back-ink: #ffffff; --rb-rim: #7fb0ff; }
}
:root[data-theme="dark"] .ribbon { --rb-front: #e6ecf0; --rb-front-ink: #111a21; --rb-back: #2f6fd0; --rb-back-ink: #ffffff; --rb-rim: #7fb0ff; }