/* PURCEAS public site v4 — Luminous Intelligence OS (docs/BRAND-BOOK-V2.md).
   The public pages orbit the conversation: the hero IS a conversation stage.
   Foundation tokens/primitives in ui.css. */

/* ================================================================
   HEADER — the Purceas control bar.
   A floating luminous surface rather than a white bar: glass, a thin
   spectral edge that travels while the AI thinks, and a compact scroll
   state. Registration is the dominant action; the contextual link and
   sign-in sit deliberately below it.
   ================================================================ */
.site-header { position: sticky; top: 0; z-index: 60; padding: 10px 14px 0; transition: padding var(--d-enter) var(--ease-out); }
.site-header.compact { padding-top: 6px; }
.nav-shell {
  position: relative; display: flex; align-items: center; gap: 18px;
  max-width: 1320px; margin: 0 auto; padding: 10px 16px;
  border-radius: var(--r-shell); border: 1px solid rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.7));
  backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 34px -18px rgba(36, 80, 240, 0.45), 0 2px 8px -4px rgba(13, 27, 62, 0.12);
  transition: padding var(--d-enter) var(--ease-out), box-shadow var(--d-enter) var(--ease-out);
  overflow: visible;
}
.site-header.compact .nav-shell { padding: 6px 16px; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 12px 30px -20px rgba(36,80,240,.5); }
/* the intelligence signal: a slow spectral edge, faster while thinking */
.nav-signal {
  position: absolute; inset: -1px; border-radius: var(--r-shell); pointer-events: none;
  padding: 1px; opacity: 0.55;
  background: linear-gradient(100deg, transparent 20%, rgba(15,194,180,.75) 38%, rgba(123,91,255,.75) 52%, transparent 72%);
  background-size: 260% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: nav-travel 14s linear infinite;
}
@keyframes nav-travel { from { background-position: 130% 0; } to { background-position: -130% 0; } }
[data-core-state="thinking"] .nav-signal { animation-duration: 3.2s; opacity: 0.9; }
[data-account="authed"] .nav-signal { animation-duration: 26s; opacity: 0.42; }

.brand { display: flex; align-items: center; gap: 10px; font: 600 var(--t-body)/1 var(--font-display); letter-spacing: 0.1em; color: var(--ink); text-decoration: none; flex: none; }
.brand:hover { text-decoration: none; }
.brand-head { transition: transform var(--d-enter) var(--ease-out), filter var(--d-enter) var(--ease-out); }
.brand:hover .brand-head { transform: translateY(-1px) rotate(-4deg); }
/* the mark thinks with the model */
[data-core-state="thinking"] .brand-head { animation: head-think 1.1s ease-in-out infinite; }
[data-core-state="responding"] .brand-head { filter: drop-shadow(0 0 6px rgba(123, 91, 255, 0.55)); }
[data-core-state="human"] .brand-head { filter: drop-shadow(0 0 6px rgba(255, 122, 89, 0.6)); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav-item { position: relative; }
.nav-trigger, .nav-link {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
  padding: 8px 12px; border-radius: var(--r-control);
  font: 500 var(--t-body)/1 var(--font-ui); color: var(--ink-2); text-decoration: none;
  transition: color var(--d-response), background var(--d-response);
}
.nav-trigger::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); opacity: 0.55; transition: transform var(--d-response) var(--ease-out); }
.nav-item.open .nav-trigger::after { transform: rotate(-135deg) translateY(-1px); }
.nav-trigger:hover, .nav-link:hover, .nav-item.open .nav-trigger { color: var(--ink); background: var(--tint-cobalt-06); text-decoration: none; }
.nav-trigger[aria-current], .nav-link[aria-current] { color: var(--ink); }
.nav-trigger[aria-current]::before, .nav-link[aria-current]::before {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--grad-ai);
}
.nav-link { position: relative; }

.nav-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-ask { font: 500 var(--t-small)/1 var(--font-ui); color: var(--cobalt); text-decoration: none; white-space: nowrap; }
.nav-ask:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav-lang { font: 600 var(--t-label)/1 var(--font-label); letter-spacing: 0.08em; color: var(--muted); text-decoration: none; border: 1px solid var(--line); border-radius: var(--r-control); padding: 5px 8px; }
.nav-lang:hover { color: var(--ink-2); text-decoration: none; }
.nav-signin { font: 500 var(--t-small)/1 var(--font-ui); color: var(--muted); text-decoration: none; white-space: nowrap; }
.nav-signin:hover { color: var(--ink-2); }

/* the primary conversion — luminous, dimensional, still legible */
.cta-ws {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; white-space: nowrap;
  font: 600 var(--t-small)/1 var(--font-ui); color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #0FC2B4 0%, #2450F0 62%, #7B5BFF 100%);
  background-size: 180% 100%;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 20px -8px rgba(36,80,240,.75);
  transition: background-position var(--d-narrative) var(--ease-out), box-shadow var(--d-enter) var(--ease-out), transform var(--d-response) var(--ease-out);
}
.cta-ws:hover { background-position: 100% 0; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 26px -8px rgba(36,80,240,.9); text-decoration: none; }
.cta-ws:active { transform: scale(0.985); }
.cta-arrow { transition: transform var(--d-enter) var(--ease-out); }
.cta-ws:hover .cta-arrow { transform: translateX(3px); }
.cta-ws[data-state="anon-chat"] { background: linear-gradient(135deg, #7B5BFF 0%, #2450F0 70%, #0FC2B4 100%); }

/* ---------------- mega menu ---------------- */
.mega {
  position: absolute; top: calc(100% + 14px); left: -12px; z-index: 70;
  width: min(920px, calc(100vw - 48px));
  border: 1px solid var(--line-soft); border-radius: var(--r-shell);
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.94));
  backdrop-filter: blur(18px) saturate(1.06);
  box-shadow: 0 24px 60px -28px rgba(13, 27, 62, 0.4), 0 2px 10px -6px rgba(13,27,62,.16);
  padding: 22px; animation: mega-in 0.28s var(--ease-out) both;
}
.mega-sm { width: min(560px, calc(100vw - 48px)); }
.mega .mm-grid { align-items: start; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.mm-q { margin: 0 0 16px; font: 600 var(--t-label)/1.3 var(--font-label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.mm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 1.25fr; gap: 18px; }
.mm-grid-projects { grid-template-columns: 1fr 1fr; }
.mm-cat { margin: 0 0 8px; font: 600 var(--t-label)/1.3 var(--font-ui); color: var(--violet-text); }
.mm-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mm-col a { display: block; padding: 6px 8px; margin-left: -8px; border-radius: var(--r-control); font-size: var(--t-small); color: var(--ink-2); text-decoration: none; transition: background var(--d-response), color var(--d-response); }
.mm-col a:hover { background: var(--tint-violet-07); color: var(--ink); text-decoration: none; }
.mm-preview { border-left: 1px solid var(--line-soft); padding-left: 18px; display: grid; gap: 8px; align-content: start; transition: opacity var(--d-response) var(--ease-out); }
.mm-preview.swap { opacity: 0; }
.mm-plabel { margin: 0; font-size: var(--t-small); color: var(--muted); }
.mm-pchat { display: grid; gap: 7px; }
.mm-u, .mm-a { font-size: var(--t-small); line-height: 1.45; padding: 8px 11px; border-radius: var(--r-surface); }
.mm-u { background: linear-gradient(135deg, #22439C, #0D1B3E); color: #fff; border-bottom-right-radius: 4px; justify-self: end; max-width: 92%; }
.mm-a { background: var(--bg-2); color: var(--ink-2); border-top-left-radius: 4px; display: flex; gap: 7px; align-items: flex-start; }
.mm-a img { border-radius: var(--r-control); flex: none; }
.mm-pflow { margin: 0; font: 500 var(--t-label)/1.45 var(--font-mono); letter-spacing: 0.02em; color: var(--aqua-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mm-foot { display: flex; gap: 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.mm-more { font: 600 var(--t-small)/1 var(--font-ui); color: var(--cobalt); text-decoration: none; }
.mm-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.mm-builds { display: grid; gap: 8px; }
.mm-builds a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-surface); background: var(--surface); }
.mm-builds a:hover { border-color: rgba(15,169,104,.4); background: var(--tint-emerald-08); }
.mm-bname { font: 600 var(--t-body)/1.2 var(--font-display); color: var(--ink); }
.mm-bsector { font-size: var(--t-label); color: var(--muted); }
.mm-bbadge { font: 600 var(--t-label)/1.4 var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--emerald-text); border: 1px solid rgba(15,169,104,.35); border-radius: 999px; padding: 2px 8px; }

/* ---------------- mobile ---------------- */
.nav-burger { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-surface); background: var(--surface-glass); align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.nav-burger span { display: block; width: 16px; height: 1.7px; border-radius: 2px; background: var(--ink-2); transition: transform var(--d-enter) var(--ease-out); }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.4px) rotate(-45deg); }
.nav-sheet { display: none; }
html.nav-open, html.nav-open body { overflow: hidden; }

@media (max-width: 1080px) {
  .nav, .nav-end .nav-ask, .nav-end .nav-signin, .nav-end .nav-lang { display: none; }
  .nav-burger { display: flex; }
  .nav-end { margin-left: auto; gap: 10px; }
  .cta-ws { padding: 9px 15px; font-size: var(--t-small); }
  .nav-sheet {
    display: block; position: fixed; inset: 62px 10px 10px; z-index: 55;
    border: 1px solid var(--line); border-radius: var(--r-shell);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,247,254,.98));
    backdrop-filter: blur(18px); box-shadow: var(--shadow-2);
    display: flex; flex-direction: column; overflow: hidden;
    animation: mega-in 0.3s var(--ease-out) both;
  }
  .nav-sheet[hidden] { display: none; }
  .ns-inner { flex: 1; overflow-y: auto; padding: 18px 20px 8px; }
  .ns-h { margin: 14px 0 6px; font: 600 var(--t-label)/1.3 var(--font-label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
  .ns-h:first-child { margin-top: 0; }
  .ns-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
  .ns-list a { display: block; padding: 12px 10px; margin-left: -10px; border-radius: var(--r-control); font-size: var(--t-body); color: var(--ink-2); text-decoration: none; }
  .ns-list a:active { background: var(--tint-cobalt-06); }
  .ns-more { display: inline-block; margin-top: 8px; font: 600 var(--t-small)/1 var(--font-ui); color: var(--cobalt); }
  .ns-foot { flex: none; border-top: 1px solid var(--line-soft); background: var(--surface); padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 8px; }
  .ns-wsh { margin: 0; font: 600 var(--t-label)/1.3 var(--font-label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
  .ns-foot .cta-ws { justify-content: center; padding: 14px 18px; font-size: var(--t-body); }
  .ns-signin { margin: 0; font-size: var(--t-small); color: var(--muted); text-align: center; }
}
@media (max-width: 430px) {
  .site-header { padding: 8px 8px 0; }
  .nav-shell { gap: 10px; padding: 8px 10px; border-radius: var(--r-surface); }
  .cta-ws { padding: 9px 13px; font-size: var(--t-small); gap: 6px; }
  .brand { font-size: var(--t-small); letter-spacing: 0.06em; gap: 8px; }
  .nav-burger { width: 36px; height: 36px; }
  .nav-sheet { inset: 56px 8px 8px; }
}
@media (min-width: 1081px) and (max-width: 1240px) {
  .nav-end .nav-ask { display: none; } /* the contextual link folds first, CTA never does */
}
@media (prefers-reduced-motion: reduce) { .nav-signal { animation: none; } }

/* ---------------- sections ---------------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 22px; }
.sec { padding: 64px 0; position: relative; }
.sec-tight { padding: 46px 0; }
.sec h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); max-width: 24ch; }
.lede { font-size: var(--t-lead); color: var(--muted); max-width: 58ch; }
.hide-m { display: inline; }
@media (max-width: 640px) { .hide-m { display: none; } .sec { padding: 52px 0; } }

/* ---------------- HERO: the conversation stage ---------------- */
.hero { padding: 40px 0 64px; }
.hero-top { text-align: center; max-width: 780px; margin: 0 auto 28px; }
.hero-top h1 { font-size: var(--t-hero); margin-bottom: 10px; }
.hero-top h1 em { font-style: normal; background: var(--grad-ai); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-top .lede { margin: 0 auto; }
.status-line { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; font: 600 var(--t-label)/1 var(--font-label); letter-spacing: 0.14em; color: var(--muted); }

/* the stage — a workspace, not a widget (45-70% of the viewport) */
.stage {
  position: relative; max-width: 900px; margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.9); border-radius: var(--r-xl);
  background: var(--surface-glass); backdrop-filter: blur(16px) saturate(1.05);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, var(--shadow-2);
  display: flex; flex-direction: column;
  min-height: min(58vh, 560px);
}
.stage-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--line-soft);
}
.stage-head .core-mark { width: 18px; height: 18px; }
.stage-head .core-mark::after { inset: 4px; }
.stage-title { font: 600 var(--t-label)/1 var(--font-label); letter-spacing: 0.13em; color: var(--aqua-text); }
.stage-save { margin-left: auto; font: 500 var(--t-small)/1.2 var(--font-ui); color: var(--cobalt); background: none; border: 0; padding: 4px 2px; display: none; }
.stage-save.show { display: inline; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 6px; }
/* empty stage: an honest example, replaced by the real conversation */
.stage-demo { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 12px 6px; }
.stage-demo .sd-tag { font: 700 var(--t-label)/1 var(--font-label); letter-spacing: 0.14em; color: var(--muted); margin-bottom: 12px; }
.chat-log.open .stage-demo { display: none; }
.stage-compose { flex: none; padding: 10px 16px 14px; display: grid; gap: 10px; }
.stage-compose .quick { justify-content: center; }
.chat-note { text-align: center; font-size: var(--t-label); color: var(--muted); margin: 0; padding: 0 16px 14px; }

/* ambient nodes around the stage (decorative, never obscuring) */
.hero-ambient { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.hero-ambient .ha-node {
  position: absolute; border: 1px solid rgba(36, 80, 240, 0.18); border-radius: var(--r-control);
  padding: 5px 11px; font: 600 var(--t-label)/1.3 var(--font-label); letter-spacing: 0.1em;
  color: rgba(46, 61, 97, 0.5); background: rgba(255, 255, 255, 0.55);
  animation: float-a 9s var(--ease-soft) infinite alternate;
}
.hero-ambient .ha-b { animation-duration: 11s; animation-delay: -4s; }
.hero-ambient .ha-c { animation-duration: 13s; animation-delay: -7s; }
@media (max-width: 640px) {
  .hero { padding: 18px 0 44px; }
  .hero-top { margin-bottom: 16px; }

  .hero-top .lede { font-size: var(--t-body); }
  .stage { min-height: min(48vh, 420px); }
}
@media (max-width: 480px) {
  /* Small phones: the composer must live in the first viewport (QA gate).
     One compact example exchange stays (Wave 5, rec 10); the rest yields. */
  .stage { min-height: 0; }
  .chat-log { min-height: 90px; }
  .hero-top .lede { display: none; }
}
@keyframes float-a { from { transform: translateY(0); } to { transform: translateY(-14px); } }
@media (max-width: 1100px) { .hero-ambient { display: none; } }

/* ---------------- surface cards ---------------- */
.card {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-1); padding: 24px;
  transition: transform var(--d-response) var(--ease-out), box-shadow var(--d-response) var(--ease-out);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

/* grid-2 */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.panel-lum { border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-2); padding: 26px; }
/* a11y: dim the DECORATIVE dot, never the text — labels stay ≥ AA at all times
   (text-only opacity dimming failed WCAG contrast in the pre-ignition state). */
.fdot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--line); opacity: 0.5; transition: background var(--d-enter), box-shadow var(--d-enter), opacity var(--d-enter); }

/* intelligence scale strip */
.scale-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.scale-chip {
  flex: 1 1 170px; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-1); padding: 15px 16px;
  display: grid; gap: 3px; text-decoration: none; color: var(--ink);
  transition: transform var(--d-response) var(--ease-out), box-shadow var(--d-response), border-color var(--d-response);
}
.scale-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: rgba(15, 194, 180, 0.45); text-decoration: none; }
.scale-chip .sl { font: 700 var(--t-label)/1 var(--font-label); letter-spacing: 0.12em; color: var(--aqua-text); }
.scale-chip .sn { font: 600 var(--t-body)/1.3 var(--font-display); }
.scale-chip .sp { font: 500 var(--t-small)/1.3 var(--font-ui); color: var(--muted); }

/* method steps + trust */
.steps2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 26px 0 34px; }
.step2 { display: flex; gap: 13px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); padding: 16px; box-shadow: var(--shadow-1); }
.step2 .n { font: 600 var(--t-small)/1.6 var(--font-label); color: var(--aqua-text); }
.step2 h3 { font-size: var(--t-body); margin-bottom: 3px; }
.step2 p { font-size: var(--t-small); color: var(--muted); margin: 0; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.trust-card { border: 1px solid rgba(15, 194, 180, 0.25); border-radius: var(--r-md); background: linear-gradient(180deg, rgba(15, 194, 180, 0.05), var(--surface)); padding: 20px; }
.trust-card h3 { font-size: var(--t-body); }
.trust-card p { font-size: var(--t-small); color: var(--muted); margin: 0; }

/* human section — the warm register (Wave 2 salvage F2) */
.sec-warm { background: linear-gradient(180deg, rgba(255, 122, 89, 0.07), rgba(200, 107, 221, 0.05)); border-top: 1px solid rgba(255, 122, 89, 0.15); border-bottom: 1px solid rgba(255, 122, 89, 0.1); }
.founder { display: flex; gap: 22px; align-items: flex-start; }
.founder-avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--grad-human); color: #fff; display: grid; place-items: center; font: 700 var(--t-lead)/1 var(--font-display); box-shadow: var(--shadow-human); }
.founder blockquote { margin: 12px 0; font-size: var(--t-body); color: var(--ink-2); border-left: 3px solid var(--coral); padding-left: 14px; }
.founder-sig { font: 600 var(--t-label)/1.4 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral-text); }
@media (max-width: 640px) { .founder { flex-direction: column; } }

/* CTA band */
.cta-band { text-align: center; }
.cta-band h2 { margin-left: auto; margin-right: auto; }

/* ---------------- footer ---------------- */
.site-footer { border-top: 1px solid var(--line-soft); background: var(--surface-soft); padding: 46px 0 28px; margin-top: 30px; }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 26px; }
@media (max-width: 800px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
.site-footer h4, .site-footer .ft-h { font: 600 var(--t-small)/1.3 var(--font-display); color: var(--ink); margin: 0 0 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.site-footer a { color: var(--muted); font-size: var(--t-small); }
.site-footer a:hover { color: var(--cobalt); }
.site-footer p { font-size: var(--t-small); color: var(--muted); }
.legal-line { margin-top: 30px; font-size: var(--t-label); color: var(--muted); }

/* ---------------- dock ---------------- */
.dock {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%); z-index: 50;
  display: flex; align-items: center; gap: 16px; padding: 10px 18px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-glass); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-2);
  transition: transform var(--d-enter) var(--ease-out);
}
.dock.show { transform: translate(-50%, 0); }
.dock a { font: 600 var(--t-small)/1 var(--font-ui); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.dock a:hover { color: var(--cobalt); }
.dock .d-ask { color: var(--cobalt); }
.ddot { width: 9px; height: 9px; border-radius: 50%; background: var(--grad-ai); flex: none; }
[data-core-state="thinking"] .ddot { animation: core-breathe 1.1s var(--ease-soft) infinite; }
[data-core-state="human"] .ddot { background: var(--grad-human); }
@media (max-width: 640px) {
  .dock { left: 10px; right: 10px; bottom: 10px; transform: translateY(140%); border-radius: var(--r-surface); justify-content: space-around; padding: 12px 10px calc(12px + env(safe-area-inset-bottom)); }
  .dock.show { transform: translateY(0); }
}

/* ---------------- pricing configurator ---------------- */
.pricing-grid { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; margin-top: 30px; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.tier-list { display: grid; gap: 8px; }
.tier-row {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface);
  padding: 13px 15px; box-shadow: var(--shadow-1); position: relative;
  transition: transform var(--d-response) var(--ease-out), border-color var(--d-response), box-shadow var(--d-response);
}
.tier-row:hover { transform: translateY(-1px); }
.tier-row[aria-selected="true"] { border-color: rgba(15, 194, 180, 0.55); box-shadow: 0 0 0 3px rgba(15, 194, 180, 0.12), var(--shadow-2); }
.tier-row .tl { font: 700 var(--t-label)/1 var(--font-label); letter-spacing: 0.1em; color: var(--aqua-text); width: 22px; }
.tier-row .tn { font: 600 var(--t-body)/1.3 var(--font-display); flex: 1; }
.tier-row .tdot { flex: none; width: var(--ns, 12px); height: var(--ns, 12px); border-radius: 50%; background: var(--grad-ai); opacity: 0.85; transition: transform var(--d-response) var(--ease-out), box-shadow var(--d-response); }
.tier-row[aria-selected="true"] .tdot { transform: scale(1.18); box-shadow: 0 0 calc(var(--ns, 12px) * 0.9) rgba(15, 194, 180, 0.5); }
.tier-row .fit { position: absolute; right: 12px; top: -8px; font: 700 0.52rem/1.4 var(--font-label); letter-spacing: 0.08em; background: var(--grad-ai); color: #fff; border-radius: 999px; padding: 2px 9px; }
.tier-panel { border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-2); padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; min-height: 420px; }
@media (max-width: 680px) { .tier-panel { grid-template-columns: 1fr; } }
.tier-price { font: 600 1.7rem/1.2 var(--font-display); margin: 6px 0 4px; }
.tier-price small { display: block; font: 400 var(--t-small)/1.5 var(--font-ui); color: var(--muted); }
.tier-features { list-style: none; margin: 14px 0 20px; padding: 0; display: grid; gap: 7px; }
.tier-features li { font-size: var(--t-small); color: var(--ink-2); display: flex; gap: 9px; align-items: baseline; }
.tier-features li::before { content: "◆"; font-size: var(--t-label); color: var(--aqua-text); }
.meters { display: grid; gap: 6px; margin: 14px 0; }
.meter { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.meter > span:first-child { font: 600 var(--t-label)/1.4 var(--font-label); letter-spacing: 0.1em; color: var(--muted); }
.meter .dots { display: flex; gap: 4px; }
.meter .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.meter .dots i.on { background: var(--grad-ai); box-shadow: 0 0 5px rgba(15, 194, 180, 0.5); animation: dotfill 0.3s var(--ease-out) both; }
.meter .dots i.on:nth-child(2) { animation-delay: 0.05s; } .meter .dots i.on:nth-child(3) { animation-delay: 0.1s; }
.meter .dots i.on:nth-child(4) { animation-delay: 0.15s; } .meter .dots i.on:nth-child(5) { animation-delay: 0.2s; }
@keyframes dotfill { from { transform: scale(0.4); opacity: 0.3; } to { transform: scale(1); opacity: 1; } }
.meter .val { font: 600 var(--t-label)/1.4 var(--font-label); color: var(--aqua-text); }
.tier-arch { border-left: 1px dashed var(--line); padding-left: 26px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 680px) { .tier-arch { border-left: 0; padding-left: 0; border-top: 1px dashed var(--line); padding-top: 20px; } }
.arch-caption { text-align: center; font: 500 var(--t-label)/1.5 var(--font-label); color: var(--muted); margin-top: 12px; }

/* ---------------- structured estimator (pricing) ---------------- */
.est-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; margin-top: 26px; align-items: start; }
@media (max-width: 900px) { .est-grid { grid-template-columns: 1fr; } }
.est-q { display: grid; gap: 18px; }
.est-item .eq-label { font: 600 var(--t-small)/1.4 var(--font-ui); color: var(--ink); margin-bottom: 8px; }
.est-item .eq-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.eq-opt {
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-glass);
  padding: 8px 14px; font: 500 var(--t-small)/1.3 var(--font-ui); color: var(--ink-2);
  transition: transform var(--d-response) var(--ease-out), border-color var(--d-response), box-shadow var(--d-response);
}
.eq-opt:hover { transform: translateY(-1px); border-color: rgba(15, 194, 180, 0.5); }
.eq-opt[aria-pressed="true"] { border-color: transparent; background: var(--grad-ai); color: #fff; box-shadow: var(--shadow-1); }
.est-panel {
  position: sticky; top: 80px; border: 1px solid var(--line-soft); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow-2); padding: 24px; min-height: 300px;
}
.est-panel .ep-empty { color: var(--muted); font-size: var(--t-body); }
.est-panel .ep-progress { font: 600 var(--t-label)/1.4 var(--font-label); letter-spacing: 0.1em; color: var(--aqua-text); margin-bottom: 8px; }
.est-panel .tier-price { margin: 4px 0 2px; }
.est-panel .ep-weeks { font-size: var(--t-small); color: var(--muted); }
.est-panel .ui-meta { margin-top: 12px; }
.est-panel .btn { margin-top: 16px; }
.est-panel .ep-note { font-size: var(--t-label); color: var(--muted); margin: 12px 0 0; }

/* ---------------- prose pages (about/legal/privacy/terms/how-it-works) ---------------- */
.prose { max-width: 720px; }
.prose h1 { font-size: var(--t-h1); }
.prose h2 { font-size: var(--t-h4); margin-top: 2em; }
.prose h3 { font-size: var(--t-lead); margin-top: 1.6em; }
.prose p, .prose li { color: var(--ink-2); font-size: var(--t-body); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--t-body); }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.prose th { background: var(--bg-2); }
.notice { border: 1px solid rgba(36, 80, 240, 0.25); background: rgba(36, 80, 240, 0.05); border-radius: var(--r-md); padding: 14px 18px; font-size: var(--t-small); color: var(--ink-2); }

/* ---------------- v3-page compatibility (secondary pages, luminous remap) ---------------- */
.sec-ink, .sec-paper, .page-paper { background: transparent; color: inherit; }
.kicker { font-family: var(--font-label); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua-text); margin: 0 0 10px; }
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--grad-ai); margin-right: 4px; }
.grid { display: grid; gap: 14px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.steps { display: grid; gap: 12px; margin: 22px 0; }
.step-row { display: flex; gap: 14px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1); padding: 16px 18px; }
.step-num { font: 600 var(--t-small)/1.6 var(--font-label); color: var(--aqua-text); flex: none; }

/* ================================================================
   WAVE 5 — Polish: moments, template gallery, automation explorer,
   workspace frame, projects, lighting script (audit recs 01-50)
   ================================================================ */

/* section lighting temperatures (rec 20) — token-based, subtle */
.sec-violet { background: linear-gradient(180deg, var(--tint-violet-07), transparent 70%); }
.sec-aqua { background: linear-gradient(180deg, var(--tint-aqua-08), transparent 70%); }
.sec-paper { background: linear-gradient(180deg, rgba(13, 27, 62, 0.03), transparent 70%); }

/* ---------------- hero: cycling customer moments (recs 01+42) ---------------- */
.stage-demo .sd-tag { font: 500 var(--t-small)/1.4 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--muted); }
.moment { display: grid; gap: 10px; width: 100%; max-width: 560px; margin: 4px auto 0; text-align: left; transition: opacity var(--d-enter) var(--ease-out), transform var(--d-enter) var(--ease-out); }
.moment.swap { opacity: 0; transform: translateY(6px); }
.m-user {
  justify-self: end; max-width: 88%; padding: 10px 15px; border-radius: var(--r-lg); border-bottom-right-radius: var(--r-control);
  background: linear-gradient(135deg, #22439C, #0D1B3E); color: #fff; font-size: var(--t-body); line-height: 1.5;
}
.m-ai { display: flex; gap: 9px; align-items: flex-start; max-width: 92%; }
.m-ai p {
  margin: 0; padding: 10px 15px; border-radius: var(--r-lg); border-top-left-radius: var(--r-control);
  background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--shadow-1);
  color: var(--ink-2); font-size: var(--t-body); line-height: 1.55;
}
.m-core { flex: none; width: 24px; height: 24px; border-radius: var(--r-control); background: var(--grad-ai); margin-top: 2px; }
.m-trace {
  font: 500 var(--t-label)/1.5 var(--font-mono); letter-spacing: 0.04em; color: var(--aqua-text);
  padding-left: 33px; opacity: 0.9;
}
.m-dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.m-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background var(--d-enter); }
.m-dots i.on { background: var(--aqua); }
/* thinking: the ambient parts brighten — the system consults them (rec 14) */
.hero-ambient .ha-node { transition: opacity var(--d-narrative), border-color var(--d-narrative); }
[data-core-state="thinking"] .hero-ambient .ha-node { opacity: 1; border-color: rgba(15, 194, 180, 0.5); color: var(--aqua-text); }

/* paste-your-website chip (rec 09) */
.quick .q-site { border-style: dashed; color: var(--cobalt); }
.quick .q-site::before { background: var(--cobalt); }

/* ---------------- moments grid (recs 27+33+40) ---------------- */
.mo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); grid-auto-rows: 1fr; gap: 14px; margin-top: 26px; }
.mo-card {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-1); padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.mo-q { font: 500 var(--t-lead)/1.45 var(--font-display); color: var(--ink); border-left: 3px solid var(--aqua); padding-left: 12px; margin: 0; }
.trace { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; flex: 1; }
.trace-step { display: flex; align-items: center; gap: 10px; }
.trace-step .fdot { flex: none; }
.trace-step.lit .fdot { opacity: 1; background: var(--aqua); box-shadow: 0 0 8px rgba(15, 194, 180, 0.6); }
.trace-step.human.lit .fdot { background: var(--coral); box-shadow: 0 0 8px rgba(255, 122, 89, 0.6); }
.t-label { font: 500 var(--t-small)/1.4 var(--font-ui); color: var(--muted); transition: color var(--d-enter) var(--ease-out); }
.trace-step.lit .t-label { color: var(--ink-2); }
.trace-step.human.lit .t-label { color: var(--coral-text); }
.mo-outcome { font: 600 var(--t-small)/1.4 var(--font-ui); color: var(--emerald-text); margin: 0; padding-top: 10px; border-top: 1px solid var(--line-soft); }

/* ---------------- template gallery (recs 21+06+12) ---------------- */
.tg { display: grid; grid-template-columns: 260px 1fr; gap: 20px; margin-top: 26px; align-items: start; }
@media (max-width: 860px) { .tg { grid-template-columns: 1fr; } }
.tg-rail { display: grid; gap: 7px; }
.tg-rail button {
  text-align: left; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface);
  padding: 12px 15px; font: 600 var(--t-body)/1.3 var(--font-display); color: var(--ink-2); box-shadow: var(--shadow-1);
  transition: transform var(--d-response) var(--ease-out), border-color var(--d-response), box-shadow var(--d-response);
}
.tg-rail button:hover { transform: translateY(-1px); border-color: rgba(123, 91, 255, 0.4); }
.tg-rail button[aria-selected="true"] {
  border-color: rgba(123, 91, 255, 0.55); color: var(--ink);
  box-shadow: 0 0 0 3px var(--tint-violet-07), var(--shadow-2);
}
@media (max-width: 860px) {
  .tg-rail { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .tg-rail button { flex: none; scroll-snap-align: start; white-space: nowrap; }
}
.tg-stage {
  border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: var(--surface);
  box-shadow: var(--shadow-2); padding: 24px; display: grid; gap: 14px;
  transition: opacity var(--d-enter) var(--ease-out);
}
.tg-stage.swap { opacity: 0; }
.tg-conv { display: grid; gap: 10px; }
.tg-conv .m-user, .tg-conv .m-ai { max-width: 94%; }
.tg-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 33px; }
.tg-int { font-size: var(--t-small); color: var(--muted); }
.tg-int span { color: var(--ink-2); font-weight: 500; }
.tg-outcome { font: 600 var(--t-small)/1.4 var(--font-ui); color: var(--emerald-text); margin: 0; }
.tg-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.tg-price { font: 600 var(--t-lead)/1 var(--font-display); color: var(--ink); }
.tg-cta { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.tg-note { margin-top: 16px; font-size: var(--t-label); color: var(--muted); }

/* ---------------- automation explorer (recs 31+37) ---------------- */
.ax { margin-top: 26px; display: grid; gap: 16px; }
.ax-rail { display: flex; flex-wrap: wrap; gap: 8px; }
.ax-rail button {
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-glass);
  padding: 9px 16px; font: 600 var(--t-small)/1.3 var(--font-ui); color: var(--ink-2);
  transition: transform var(--d-response) var(--ease-out), border-color var(--d-response), box-shadow var(--d-response);
}
.ax-rail button:hover { transform: translateY(-1px); border-color: rgba(15, 194, 180, 0.5); }
.ax-rail button[aria-selected="true"] { border-color: transparent; background: var(--grad-ai); color: #fff; box-shadow: var(--shadow-1); }
.ax-stage { border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-2); padding: 24px; }
.ax-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ax-node {
  border: 1px solid rgba(36, 80, 240, 0.22); border-radius: var(--r-control); padding: 9px 14px;
  font: 600 var(--t-label)/1.3 var(--font-label); letter-spacing: 0.05em; color: var(--muted);
  background: var(--surface); opacity: 0.55; transition: opacity var(--d-enter) var(--ease-out), border-color var(--d-enter), color var(--d-enter), box-shadow var(--d-enter);
  position: relative;
}
.ax-node:not(:last-child)::after { content: "→"; position: absolute; right: -13px; color: rgba(36, 80, 240, 0.45); font-size: var(--t-label); }
.ax-node.lit { opacity: 1; color: var(--ink-2); border-color: rgba(15, 194, 180, 0.5); box-shadow: 0 2px 8px rgba(15, 194, 180, 0.18); }
.ax-node.human.lit { border-color: rgba(255, 122, 89, 0.55); color: var(--coral-text); box-shadow: 0 2px 8px rgba(255, 122, 89, 0.2); }
.ax-flow { row-gap: 12px; }
.ax-node:not(:last-child) { margin-right: 14px; }
.ax-detail { margin: 16px 0 0; font-size: var(--t-body); color: var(--ink-2); border-left: 3px solid var(--aqua); padding-left: 12px; min-height: 2.6em; }
@media (max-width: 640px) {
  .ax-flow { flex-direction: column; align-items: stretch; }
  .ax-node { margin-right: 0 !important; }
  .ax-node:not(:last-child)::after { content: "↓"; right: auto; left: 50%; bottom: -14px; transform: translateX(-50%); }
  .ax-flow { gap: 14px; }
}

/* ---------------- workspace frame — the real product UI (rec 04) ---------------- */
.ws-frame {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--bg-2);
  box-shadow: var(--shadow-2); overflow: hidden; font-size: var(--t-small);
}
.ws-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.ws-bar .core-mark { width: 14px; height: 14px; } .ws-bar .core-mark::after { inset: 3px; }
.ws-title { font: 600 var(--t-label)/1 var(--font-display); letter-spacing: 0.04em; color: var(--ink); }
.ws-user { margin-left: auto; font: 500 var(--t-label)/1 var(--font-label); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; }
.ws-body { display: grid; grid-template-columns: 120px 1fr 150px; min-height: 250px; }
.ws-side { border-right: 1px solid var(--line-soft); padding: 12px 10px; background: var(--surface-soft); }
.ws-h { font: 600 0.56rem/1 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.ws-proj { border-radius: var(--r-control); padding: 7px 9px; color: var(--ink-2); font-weight: 500; }
.ws-proj.on { background: var(--tint-cobalt-06); color: var(--cobalt); box-shadow: inset 0 0 0 1px rgba(36, 80, 240, 0.18); }
.ws-thread { padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.ws-msg { max-width: 92%; padding: 8px 11px; border-radius: var(--r-surface); line-height: 1.5; }
.ws-msg.u { align-self: flex-end; background: linear-gradient(135deg, #22439C, #0D1B3E); color: #fff; border-bottom-right-radius: 4px; }
.ws-msg.a { align-self: flex-start; background: var(--surface); border: 1px solid var(--line-soft); color: var(--ink-2); border-top-left-radius: 4px; }
.ws-mem { font: 600 var(--t-label)/1 var(--font-label); letter-spacing: 0.08em; color: var(--aqua-text); display: flex; gap: 6px; align-items: center; opacity: 0; transform: translateY(4px); transition: opacity var(--d-narrative) var(--ease-out) var(--d-enter), transform var(--d-narrative) var(--ease-out) var(--d-enter); }
.ws-frame.live .ws-mem { opacity: 1; transform: none; }
.ws-intel { border-left: 1px solid var(--line-soft); padding: 12px 10px; background: var(--surface-soft); }
.ws-fact { display: grid; gap: 1px; padding: 6px 8px; border-radius: var(--r-control); color: var(--ink-2); }
.ws-fact span { font: 600 0.54rem/1.3 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
#ws-newfact { opacity: 0; transform: translateY(4px); transition: opacity var(--d-narrative) var(--ease-out) var(--d-narrative), transform var(--d-narrative) var(--ease-out) var(--d-narrative); }
.ws-frame.live #ws-newfact { opacity: 1; transform: none; background: var(--tint-aqua-08); }
.ws-nba { margin: 8px 0 0; padding: 6px 8px; border-radius: var(--r-control); background: var(--tint-cobalt-06); color: var(--cobalt); font-weight: 600; font-size: var(--t-label); }
@media (max-width: 560px) { .ws-body { grid-template-columns: 1fr 140px; } .ws-side { display: none; } }

/* ---------------- projects (rec 34) ---------------- */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-rows: 1fr; gap: 16px; margin-top: 26px; }
.proj-card {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-1); padding: 24px; display: flex; flex-direction: column; gap: 10px;
}
.proj-top { display: flex; align-items: center; gap: 12px; }
.proj-top h3 { margin: 0; font-size: var(--t-h4); }
.proj-badge {
  margin-left: auto; font: 600 var(--t-label)/1.4 var(--font-label); letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid rgba(15, 169, 104, 0.4); color: var(--emerald-text); background: var(--tint-emerald-08);
  border-radius: 999px; padding: 3px 10px;
}
.proj-sector { font-size: var(--t-small); color: var(--muted); margin: 0; }
.proj-problem { font-size: var(--t-body); color: var(--ink-2); margin: 0; }
.proj-card .mo-q { font-size: var(--t-body); }
.proj-build { font-size: var(--t-body); color: var(--ink-2); margin: 0; flex: 1; }
.proj-arch { font: 500 var(--t-label)/1.5 var(--font-label); letter-spacing: 0.04em; color: var(--cobalt); padding-top: 10px; border-top: 1px solid var(--line-soft); }

/* ---------------- trust strip (rec 44) + founder polish (rec 45) ---------------- */
.trust-strip { margin: 18px 0 0; font-size: var(--t-small); color: var(--muted); }
.founder-alt { font-size: var(--t-small); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.founder-avail { margin: 10px 0 0; font-size: var(--t-small); color: var(--muted); }

/* ---------------- mobile pricing rows (rec 48) ---------------- */
@media (max-width: 640px) {
  .scale-chip { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 4px 10px; padding: 12px 14px; }
  .scale-chip .sn { font-size: var(--t-body); }
  .scale-chip .sp { grid-column: 3; font-variant-numeric: tabular-nums; }
}

/* mobile hero: keep one compact exchange in the void (rec 10) */
@media (max-width: 480px) {
  .stage-demo { display: flex; padding: 8px 6px 2px; }
  .stage-demo .sd-tag { display: none; }
  .m-trace, .m-dots { display: none; }
  .moment { gap: 7px; }
  .m-user, .m-ai p { font-size: var(--t-small); padding: 8px 12px; }
}

/* ================================================================
   WAVE 5 — mascot presence (hero, footer, powered-by)
   Rules: max ONE full-body per viewport; desktop-only full-bodies;
   motion is calm (breathe/parallax), killed by prefers-reduced-motion.
   ================================================================ */
.hero-mascot { display: none; }
@media (min-width: 1150px) {
  .hero-mascot {
    display: block; position: absolute; z-index: 0; pointer-events: none;
    top: 64px; right: clamp(12px, 4vw, 90px); width: clamp(190px, 16vw, 270px);
    animation: mascot-breathe 5.5s var(--ease-soft) infinite;
  }
  .hero-mascot picture, .hero-mascot video { display: block; transition: transform var(--d-enter) var(--ease-soft); }
  .hero-mascot img { width: 100%; height: auto; }
  /* the right-top ambient nodes yield their margin to the mascot (rec 14) */
  .hero-ambient .ha-node:nth-child(3), .hero-ambient .ha-node:nth-child(4) { display: none; }
  [data-core-state="thinking"] .hero-mascot img { filter: drop-shadow(0 0 16px rgba(123, 91, 255, 0.55)); }
  [data-core-state="responding"] .hero-mascot img { filter: drop-shadow(0 0 10px rgba(123, 91, 255, 0.4)); }
}
@keyframes mascot-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.footer-mascot { display: none; }
@media (min-width: 900px) {
  .site-footer { position: relative; }
  .footer-mascot { display: block; position: absolute; top: -128px; right: 5%; width: 132px; pointer-events: none; }
}

/* Powered by Purceas — the exportable signature (docs/BRAND-BOOK-V3.md §22) */
.pb-purceas {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px;
  font: 500 var(--t-label)/1 var(--font-ui); color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px 4px 5px;
  background: var(--surface-glass); vertical-align: middle;
}
.pb-purceas b { font-weight: 700; letter-spacing: 0.06em; color: var(--ink-2); }
.pb-purceas img { border-radius: var(--r-control); transition: transform var(--d-enter) var(--ease-out); }
.pb-purceas:hover { text-decoration: none; border-color: rgba(123, 91, 255, 0.45); }
.pb-purceas:hover img { transform: rotate(-6deg); }

/* mascot overrides for site-only marks (must follow their base rules) */
.m-core { background: var(--surface) url("/brand/purceas/mascot/head/96.webp") center/92% no-repeat; border: 1px solid var(--line-soft); border-radius: var(--r-control); }
.ddot { width: 18px; height: 18px; border-radius: var(--r-control); background: url("/brand/purceas/mascot/head/48.webp") center/cover no-repeat; box-shadow: none; }
[data-core-state="human"] .ddot { background-image: url("/brand/purceas/mascot/head/48.webp"); filter: drop-shadow(0 0 5px rgba(255, 122, 89, 0.9)); }

/* mascot motion layer — the still stays the layout anchor; the looping
   VP9+alpha video stacks over it and only appears once it plays */
.purceas-motion {
  position: absolute; left: 0; bottom: 0; width: 100%; height: auto;
  opacity: 0; transition: opacity var(--d-narrative) var(--ease-out); pointer-events: none;
}
/* the decoding video is never the visible element — see brand.js upgradeToMotion */
.purceas-motion-src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: 0; bottom: 0; }
/* belt and braces: hide any overlay a browser still tries to paint on it */
.purceas-motion::-webkit-media-controls,
.purceas-motion::-webkit-media-controls-enclosure,
.purceas-motion::-webkit-media-controls-panel,
.purceas-motion::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.purceas-motion.on { opacity: 1; }
/* the still is the layout anchor; it steps aside once the loop is live */
.hero-mascot.motion-on picture { opacity: 0; transition: opacity var(--d-narrative) var(--ease-out); }
.hero-mascot picture { display: block; }

/* projects: Purceas points at the work (desktop only, one full body max) */
.proj-mascot { display: none; }
@media (min-width: 1150px) {
  #projects .wrap { position: relative; }
  .proj-mascot {
    display: block; position: absolute; top: 26px; right: -8px; width: 160px;
    pointer-events: none; z-index: 0;
  }
  .proj-mascot img { width: 100%; height: auto; }
}
@media (prefers-reduced-motion: reduce) { .purceas-motion { display: none; } }

/* ================================================================
   TEMPLATE SHOWROOM — ten conversational architectures, one stage.
   Five layers per template: moment · conversation · generative UI ·
   automation map · business action. One design system, industry accent.
   ================================================================ */
.sr { margin-top: 26px; }
.sr-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sr-filters button {
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-glass);
  padding: 8px 15px; font: 600 var(--t-small)/1.3 var(--font-ui); color: var(--ink-2);
  transition: transform var(--d-response) var(--ease-out), border-color var(--d-response), box-shadow var(--d-response);
}
.sr-filters button:hover { transform: translateY(-1px); border-color: rgba(123, 91, 255, 0.45); }
.sr-filters button[aria-selected="true"] { border-color: transparent; background: var(--grad-ai); color: #fff; box-shadow: var(--shadow-1); }

.sr-body { display: grid; grid-template-columns: 248px 1fr; gap: 18px; align-items: start; }
@media (max-width: 980px) { .sr-body { grid-template-columns: 1fr; } }

.sr-rail { display: grid; gap: 6px; max-height: 620px; overflow-y: auto; padding-right: 4px; }
.sr-tab {
  text-align: left; display: grid; gap: 2px; width: 100%;
  border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface);
  padding: 11px 14px; box-shadow: var(--shadow-1);
  transition: transform var(--d-response) var(--ease-out), border-color var(--d-response), box-shadow var(--d-response);
}
.sr-tab:hover { transform: translateY(-1px); border-color: rgba(123, 91, 255, 0.4); }
.sr-tab.on { border-color: rgba(123, 91, 255, 0.55); box-shadow: 0 0 0 3px var(--tint-violet-07), var(--shadow-2); }
.sr-tname { font: 600 var(--t-body)/1.3 var(--font-display); color: var(--ink); }
.sr-tind { font-size: var(--t-label); color: var(--muted); }
@media (max-width: 980px) {
  .sr-rail { grid-auto-flow: column; grid-auto-columns: 208px; overflow-x: auto; max-height: none; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .sr-tab { scroll-snap-align: start; }
}

/* the stage — accent per industry, still inside the brand */
.sr-stage {
  --sr-accent: var(--violet);
  --sr-tint: var(--tint-violet-07);
  border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: var(--surface);
  box-shadow: var(--shadow-2); padding: 24px; display: grid; gap: 16px; position: relative; overflow: hidden;
}
.sr-stage[data-accent="cobalt"] { --sr-accent: var(--cobalt); --sr-tint: var(--tint-cobalt-06); }
.sr-stage[data-accent="aqua"] { --sr-accent: var(--aqua); --sr-tint: var(--tint-aqua-08); }
.sr-stage[data-accent="emerald"] { --sr-accent: var(--emerald); --sr-tint: var(--tint-emerald-08); }
.sr-stage[data-accent="coral"] { --sr-accent: var(--coral); --sr-tint: var(--tint-coral-07); }
.sr-stage::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--sr-accent), transparent 70%);
}
.sr-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sr-badge {
  font: 700 var(--t-label)/1.4 var(--font-label); letter-spacing: 0.12em;
  border: 1px solid var(--sr-accent); color: var(--sr-accent); background: var(--sr-tint);
  border-radius: 999px; padding: 3px 10px;
}
.sr-title { margin: 0; font-size: var(--t-h4); }
.sr-ind { font-size: var(--t-small); color: var(--muted); margin-left: auto; }
.sr-moment { margin: 0; font: 500 var(--t-lead)/1.5 var(--font-display); color: var(--ink); border-left: 3px solid var(--sr-accent); padding-left: 13px; }

/* layers: each arrives when it has something to say */
.sr-l { opacity: 0; transform: translateY(6px); transition: opacity var(--d-enter) var(--ease-out), transform var(--d-enter) var(--ease-out); }
.sr-l.in, .sr-foot.in { opacity: 1; transform: none; }
.sr-lhead { font: 600 var(--t-label)/1.4 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }

/* 2 — conversation */
.sr-chat { display: grid; gap: 9px; }
.sr-msg { display: flex; gap: 9px; align-items: flex-start; opacity: 0; transform: translateY(6px); transition: opacity var(--d-enter) var(--ease-out), transform var(--d-enter) var(--ease-out); }
.sr-msg.in { opacity: 1; transform: none; }
.sr-msg p { margin: 0; padding: 10px 14px; border-radius: var(--r-lg); font-size: var(--t-body); line-height: 1.55; max-width: 76%; }
.sr-u { flex-direction: row-reverse; }
.sr-u p { background: linear-gradient(135deg, #22439C, #0D1B3E); color: #fff; border-bottom-right-radius: var(--r-control); }
.sr-a p { background: var(--bg-2); color: var(--ink-2); border-top-left-radius: var(--r-control); }
.sr-av { width: 26px; height: 26px; flex: none; border-radius: var(--r-control); }

/* 3 — generative UI */
.sr-ui { border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--sr-tint), var(--surface)); padding: 16px; display: grid; gap: 12px; }
.sr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 620px) { .sr-cards { grid-template-columns: 1fr; } }
.sr-card { border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); padding: 12px; display: grid; gap: 4px; box-shadow: var(--shadow-1); }
.sr-card.pick { border-color: var(--sr-accent); box-shadow: 0 0 0 2px var(--sr-tint), var(--shadow-1); }
.sr-art { width: 100%; height: 62px; background: var(--sr-tint); border-radius: var(--r-control); padding: 4px; }
.sr-card h4, .sr-card .sr-ctitle { margin: 6px 0 0; font-size: var(--t-small); }
.sr-meta { margin: 0; font-size: var(--t-label); color: var(--muted); }
.sr-cfoot { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.sr-price { font: 600 var(--t-body)/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.sr-pick { font: 600 var(--t-label)/1 var(--font-label); letter-spacing: 0.08em; color: var(--sr-accent); margin-left: auto; }
.sr-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-uihead { margin: 0; font: 600 var(--t-small)/1.4 var(--font-ui); color: var(--ink); }
.sr-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-slot { border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); padding: 9px 15px; font: 600 var(--t-small)/1 var(--font-ui); color: var(--ink-2); }
.sr-slot.pick { border-color: transparent; background: var(--sr-accent); color: #fff; }
.sr-confirm { margin: 0; font: 600 var(--t-small)/1.4 var(--font-ui); color: var(--emerald-text); }
.sr-check { display: grid; gap: 6px; }
.sr-crow { display: flex; align-items: center; gap: 9px; font-size: var(--t-small); color: var(--ink-2); }
.sr-tick { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-label); font-weight: 700; }
.sr-crow.ok .sr-tick { background: var(--sr-accent); color: #fff; }
.sr-crow.pending .sr-tick { background: var(--line); color: var(--muted); }
.sr-crow.pending { color: var(--muted); }
.sr-meter { display: flex; align-items: center; gap: 10px; }
.sr-mlabel { font: 600 var(--t-label)/1.4 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sr-dots { display: flex; gap: 4px; }
.sr-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.sr-dots i.on { background: var(--sr-accent); }
.sr-note, .sr-fiction { margin: 0; font-size: var(--t-label); color: var(--muted); }
.sr-answer { border-left: 3px solid var(--sr-accent); padding-left: 12px; }
.sr-answer p { margin: 0 0 4px; font-size: var(--t-body); color: var(--ink-2); }
.sr-source { font: 500 var(--t-label)/1.4 var(--font-label); color: var(--sr-accent); }

/* 4 — automation map (shares the explorer's node grammar) */
.sr-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.sr-node {
  position: relative; border: 1px solid rgba(36, 80, 240, 0.2); border-radius: var(--r-control); padding: 7px 12px;
  font: 600 var(--t-label)/1.3 var(--font-label); letter-spacing: 0.04em; color: var(--muted); background: var(--surface);
  opacity: 0.5; transition: opacity var(--d-enter) var(--ease-out), color var(--d-enter), border-color var(--d-enter), box-shadow var(--d-enter);
}
.sr-node::after { content: "→"; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); color: rgba(36, 80, 240, 0.4); font-size: var(--t-label); }
.sr-node:last-child::after { content: none; }
.sr-node.lit { opacity: 1; color: var(--ink-2); border-color: var(--sr-accent); box-shadow: 0 2px 8px var(--sr-tint); }
.sr-node.human.lit { border-color: var(--coral); color: var(--coral-text); }

/* 5 — business action */
.sr-result { display: grid; gap: 6px; }
.sr-rec {
  justify-self: start; font: 600 var(--t-label)/1.4 var(--font-label); letter-spacing: 0.06em;
  border: 1px solid rgba(15, 169, 104, 0.4); background: var(--tint-emerald-08); color: var(--emerald-text);
  border-radius: 999px; padding: 4px 11px;
}
.sr-result p { margin: 0; font-size: var(--t-body); color: var(--ink-2); }

.sr-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line-soft); opacity: 0; transform: translateY(6px); transition: opacity var(--d-enter) var(--ease-out), transform var(--d-enter) var(--ease-out); }
.sr-ints { margin: 0; font-size: var(--t-small); color: var(--ink-2); flex: 1 1 240px; }
.sr-ilabel { color: var(--muted); }
.sr-tier { font-size: var(--t-small); color: var(--muted); }
.sr-tier b { color: var(--ink); }
.sr-cta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.sr-replay { border: 0; background: none; padding: 4px; font: 500 var(--t-small)/1 var(--font-ui); color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }
.sr-all { margin-top: 18px; }

/* ---------------- /templates routes ---------------- */
.tpl-crumb { font-size: var(--t-small); color: var(--muted); margin-bottom: 14px; }
.tpl-hero { margin-bottom: 30px; }
.tpl-hero .sr-title { font-size: var(--t-h1); }
.tpl-answer { margin: 0; font-size: var(--t-body); color: var(--ink-2); max-width: 68ch; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 30px; }
.tpl-block { border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); padding: 20px; }
.tpl-block h2 { font-size: var(--t-body); margin-bottom: 10px; }
.tpl-block ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.tpl-block li { font-size: var(--t-small); color: var(--ink-2); }
.tpl-faq { max-width: 720px; margin-bottom: 30px; }
.tpl-faq h2 { font-size: var(--t-h4); }
.tpl-faq details { border-bottom: 1px solid var(--line-soft); padding: 12px 0; }
.tpl-faq summary { font: 600 var(--t-body)/1.4 var(--font-display); color: var(--ink); cursor: pointer; }
.tpl-faq p { margin: 8px 0 0; font-size: var(--t-body); color: var(--ink-2); }
.tpl-next { border-top: 1px solid var(--line-soft); padding-top: 24px; }
.tpl-next h2 { font-size: var(--t-h4); }
.tpl-cats { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; }
.tpl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 24px 0 34px; }
.tpl-card {
  --sr-accent: var(--violet); --sr-tint: var(--tint-violet-07);
  display: grid; gap: 6px; align-content: start; text-decoration: none; color: inherit;
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-1); padding: 20px; position: relative; overflow: hidden;
  transition: transform var(--d-response) var(--ease-out), box-shadow var(--d-response);
}
.tpl-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--sr-accent), transparent 70%); }
.tpl-card[data-accent="cobalt"] { --sr-accent: var(--cobalt); --sr-tint: var(--tint-cobalt-06); }
.tpl-card[data-accent="aqua"] { --sr-accent: var(--aqua); --sr-tint: var(--tint-aqua-08); }
.tpl-card[data-accent="emerald"] { --sr-accent: var(--emerald); --sr-tint: var(--tint-emerald-08); }
.tpl-card[data-accent="coral"] { --sr-accent: var(--coral); --sr-tint: var(--tint-coral-07); }
.tpl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); text-decoration: none; }
.tpl-card .sr-badge { justify-self: start; }
.tpl-card h2 { font-size: var(--t-lead); margin: 8px 0 0; }
.tpl-cmoment { font-size: var(--t-small); color: var(--ink-2); margin: 4px 0 0; }
.tpl-tier { font: 500 var(--t-label)/1.4 var(--font-label); color: var(--muted); margin-top: 8px; }
.sr-nojs { display: grid; gap: 6px; padding-left: 18px; }

/* save-to-project picker (signed-in visitors only) */
.sr-picker {
  flex-basis: 100%; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-2); padding: 12px 14px; display: grid; gap: 8px;
}
.sr-picker p { margin: 0; font-size: var(--t-small); color: var(--ink-2); }
.sr-prow { display: flex; gap: 8px; flex-wrap: wrap; }
.sr-picker select {
  flex: 1 1 180px; border: 1px solid var(--line); border-radius: var(--r-control); padding: 8px 10px;
  font: 400 var(--t-small)/1.3 var(--font-ui); color: var(--ink); background: var(--surface);
}
.sr-pmsg:empty { display: none; }
.sr-pmsg.ok { color: var(--emerald-text); font-weight: 600; }

/* ---------------- /projects ---------------- */
.pj-hero { padding-bottom: 30px; }
.pj-stack { display: grid; gap: 10px; margin-top: 30px; max-width: 620px; }
@media (min-width: 900px) {
  .pj-stack { grid-template-columns: 1.15fr 1fr; max-width: none; align-items: start; gap: 14px; }
  .pjs-chat { grid-row: span 2; }
}
.pjs {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-1); padding: 16px;
}
.pjs-chat { display: grid; gap: 8px; }
.pjs-flow { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pjs-flow span {
  position: relative; font: 600 var(--t-label)/1.3 var(--font-label); letter-spacing: 0.04em; color: var(--ink-2);
  border: 1px solid rgba(15, 194, 180, 0.45); border-radius: var(--r-control); padding: 6px 10px; background: var(--surface);
}
.pjs-flow span:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); color: rgba(36,80,240,.4); font-size: var(--t-label); }
.pjs-rec { font: 600 var(--t-label)/1.4 var(--font-label); color: var(--emerald-text); background: var(--tint-emerald-08); border-color: rgba(15,169,104,.35); }
.pj-note { display: inline-block; margin: 12px 0 0; font: 600 var(--t-label)/1.4 var(--font-label); letter-spacing: 0.06em; color: var(--violet-text); border: 1px solid rgba(123,91,255,.35); background: var(--tint-violet-07); border-radius: 999px; padding: 4px 12px; }
.pj-note-real { color: var(--emerald-text); border-color: rgba(15,169,104,.35); background: var(--tint-emerald-08); }
.pj-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 22px; }
.pj-card {
  --sr-accent: var(--cobalt);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-1); padding: 22px; display: grid; gap: 9px; align-content: start;
  position: relative; overflow: hidden;
}
.pj-card[data-accent="violet"] { --sr-accent: var(--violet); }
.pj-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--sr-accent), transparent 70%); }
.pj-top { display: flex; align-items: center; gap: 12px; }
.pj-top h3 { margin: 0; font-size: var(--t-h4); }
.pj-badge { margin-left: auto; font: 600 var(--t-label)/1.4 var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; }
.pj-in-development { color: var(--emerald-text); border: 1px solid rgba(15,169,104,.4); background: var(--tint-emerald-08); }
.pj-live { color: #fff; background: var(--emerald); }
.pj-prototype { color: var(--muted); border: 1px solid var(--line); }
.pj-sector { margin: 0; font-size: var(--t-small); color: var(--muted); }
.pj-moment { margin: 0; font: 500 var(--t-body)/1.45 var(--font-display); color: var(--ink); border-left: 3px solid var(--sr-accent); padding-left: 12px; }
.pj-summary { margin: 0; font-size: var(--t-body); color: var(--ink-2); }
.pj-arch { font: 500 var(--t-label)/1.5 var(--font-label); letter-spacing: 0.04em; color: var(--cobalt); padding-top: 10px; border-top: 1px solid var(--line-soft); }
.pj-card .btn { justify-self: start; margin-top: 4px; }
.pj-autos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 22px; }
.pj-auto { border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); padding: 18px; --sr-accent: var(--aqua); --sr-tint: var(--tint-aqua-08); }
.pj-aname { margin: 0 0 10px; font: 600 var(--t-body)/1.3 var(--font-display); color: var(--ink); }
.pj-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.pj-steps li { display: flex; gap: 13px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); padding: 16px; box-shadow: var(--shadow-1); }
.pj-n { font: 600 var(--t-small)/1.6 var(--font-label); color: var(--violet-text); }
.pj-steps h3 { font-size: var(--t-body); margin-bottom: 3px; }
.pj-steps p { font-size: var(--t-small); color: var(--muted); margin: 0; }

/* ================================================================
   WAVE 6 (audit #03) — the composer comes first.
   The hero used to give its largest surface to a fixed sofa demo, with the
   real input underneath it: at 390px the composer started around y≈500 and
   the trust line fell below the fold. The input now leads, the example is a
   line you can open, and the moment a real conversation starts the layout
   returns to the normal order (answers above the box you type in).
   ================================================================ */
.stage { display: flex; flex-direction: column; }
.stage-head { order: 0; }
.stage-compose { order: 1; padding-top: 14px; }
.chat-log { order: 2; }
.chat-note { order: 3; }
.stage.has-convo .stage-compose { order: 3; padding-top: 10px; }
.stage.has-convo .chat-note { order: 4; }

/* Before a conversation exists the log holds only the collapsed example, so it
   must size to its content — `flex:1` on an empty log left a ~250px void in the
   middle of the card the moment the demo stopped filling it. */
/* The 560px reserve existed to hold the demo. With the example collapsed the
   card sized itself to nothing and left the reserve as empty white space, so
   the reserve now belongs to the conversation, not to the empty state. */
.stage:not(.has-convo) { min-height: 0; }
.stage:not(.has-convo) .chat-log { flex: 0 0 auto; min-height: 0; overflow: visible; padding-bottom: 0; }
.stage:not(.has-convo) .stage-demo { padding-bottom: 0; }
.stage.has-convo .chat-log { flex: 1; min-height: 0; overflow-y: auto; }

/* The example: one quiet line until asked for. */
.sd-toggle {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 auto;
  background: none; border: 0; cursor: pointer; padding: 8px 10px; min-height: 44px;
  font: 500 var(--t-small)/1.3 var(--font-ui); color: var(--muted);
}
.sd-toggle:hover { color: var(--cobalt); }
.sd-toggle::after {
  content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--d-response) var(--ease-out);
}
.stage-demo[data-open="1"] .sd-toggle::after { transform: rotate(-135deg) translate(-2px, -2px); }
.sd-body { display: none; }
.stage-demo[data-open="1"] .sd-body { display: block; animation: sd-in 0.32s var(--ease-out); }
@keyframes sd-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .stage-demo[data-open="1"] .sd-body { animation: none; }
  .sd-toggle::after { transition: none; }
}

/* audit #18 — the trace line is the brand's signature and failed AA at 4.01:1.
   Darker teal, one step larger; the token is shared with the moments cards. */
.m-trace { color: var(--aqua-deep, #0a6f68); font-size: var(--t-small); }

/* audit #42 — 44px minimum on the controls people actually miss. */
.nav-burger { min-width: 44px; min-height: 44px; }
.cta-ws { min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 900px) { .cta-ws { min-height: 40px; } }
.quick button { min-height: 40px; }
@media (pointer: coarse) { .quick button, .sr-tab, .ax-tab { min-height: 44px; } }

/* audit #12 / #13 — the type scale used to stop at 1366px and the generated
   pages never scaled at all. Wide screens now get a composition, not a ribbon. */
@media (min-width: 1800px) {
  .wrap { max-width: 1520px; }
  /* the hero clamp already continues past 1800 — see --t-hero */
  .sec h2 { font-size: clamp(2rem, 2.4vw, 3rem); }
  .lede, .sec-lede { font-size: var(--t-h4); max-width: 62ch; }
  .hero-mascot { width: clamp(270px, 15vw, 380px); right: clamp(90px, 8vw, 240px); }
  /* the ambient chips belong to the conversation card, not to the far margins */
  .hero-ambient .ha-node { opacity: 0.5; }
}
@media (min-width: 2400px) {
  .wrap { max-width: 1760px; }
  html { font-size: 18px; }
}

/* audit #17 — the character was hidden below 1150px, so most visitors never
   met it. Mobile and tablet get a right-sized presence, still one per view. */
@media (max-width: 1149px) {
  .hero { position: relative; }
  /* In flow, not floating over the headline — absolute positioning put the
     character straight on top of the H1 at 390px. It now sits with the status
     line and the copy wraps beside it. */
  .hero-mascot-sm {
    display: block; width: clamp(64px, 17vw, 104px); margin: 0 auto 4px;
    pointer-events: none;
  }
  .hero-mascot-sm img { width: 100%; height: auto; display: block; }
}
@media (min-width: 1150px) { .hero-mascot-sm { display: none; } }
@media (min-width: 768px) and (max-width: 1149px) {
  .hero-mascot-sm { width: clamp(120px, 15vw, 168px); }
}

/* audit #20 — the Romanian homepage shifted 70x more than the English one
   (CLS 0.0837 against 0.0012). Measured cause: the hero sub-headline gains a
   third line when the web font swaps in, pushing the whole conversation stage
   down 47px. Romanian copy is longer, so only it crosses the wrap boundary.
   The space that line will need is reserved up front, per language. */
.hero h1 { min-height: 2.25em; }
/* Romanian headline is long enough to take a third line once the display face
   lands — measured as the 47px push that produced the 0.0837 shift. */
html[lang="ro"] .hero h1 { min-height: 3.4em; }
@media (max-width: 640px) {
  .hero h1 { min-height: 3.4em; }
  html[lang="ro"] .hero h1 { min-height: 4.5em; }
}
.hero .lede { min-height: 3.3em; }
html[lang="ro"] .hero .lede { min-height: 4.95em; }
@media (max-width: 900px) {
  .hero .lede, html[lang="ro"] .hero .lede { min-height: 6.6em; }
}
@media (max-width: 640px) {
  .hero .lede, html[lang="ro"] .hero .lede { min-height: 0; }
}
.cta-ws .cta-label { display: inline-block; min-width: 6.5em; text-align: center; }

/* The security page is long-form prose: reserve the heading box so the tables
   below it do not travel 26px when the display face lands. */
.wrap-narrow h1 { min-height: 2.3em; }
/* Four lines at the lede's own measure — it grows by one when the face lands. */
.wrap-narrow .lede { min-height: 6.4em; }
@media (max-width: 900px) { .wrap-narrow .lede { min-height: 0; } }

/* audit #34 — tables and code now reachable from a reply. */
.msg-body .tbl-wrap { overflow-x: auto; margin: 10px 0; border: 1px solid var(--line); border-radius: var(--r-control); }
.msg-body table { border-collapse: collapse; width: 100%; font-size: var(--t-small); }
.msg-body th, .msg-body td { padding: 8px 11px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.msg-body th { font: 600 var(--t-label)/1.3 var(--font-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.msg-body tr:last-child td { border-bottom: 0; }
.msg-body pre { overflow-x: auto; background: var(--bg-2); border-radius: var(--r-control); padding: 12px 14px; margin: 10px 0; }
.msg-body pre code { font: 400 var(--t-small)/1.55 var(--font-mono); color: var(--ink); }
.msg-body :not(pre) > code { background: var(--bg-2); border-radius: var(--r-control); padding: 1px 5px; font: 400 0.85em/1 var(--font-mono); }
.msg-body ol { margin: 8px 0; padding-left: 20px; }
.msg-body ol li { margin: 3px 0; }
.msg-body a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; }

/* audit #02 — the resume card, and #09's limit offer, reuse the ui-card shell. */
.resume-card { border-left: 3px solid var(--aqua); }


/* audit #06 — the phone gets the two strongest examples first. */
.folded { display: none; }
.fold-more {
  display: block; margin: 14px auto 0; min-height: 44px; padding: 10px 20px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font: 600 var(--t-small)/1 var(--font-ui); color: var(--cobalt); cursor: pointer;
}
.fold-more:hover { border-color: var(--cobalt); }

/* audit #15 — three pages opened with copy on the left and nothing on the
   right. Each intro now carries a companion that belongs to that page. */
.intro-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0 6px; }
.intro-aside div {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surface);
  padding: 12px 14px; display: grid; gap: 2px;
}
.intro-aside b { font: 700 var(--t-h4)/1.1 var(--font-display, var(--font-ui)); color: var(--ink); }
.intro-aside span { font: 500 var(--t-label)/1.35 var(--font-ui); color: var(--muted); }
/* A real two-column composition rather than an absolutely positioned box —
   with the Wave 7 headline scale the floated version collided with the H1. */
@media (min-width: 900px) {
  .sec .wrap:has(> .intro-aside) {
    display: grid; grid-template-columns: minmax(0, 1fr) min(340px, 30%);
    grid-template-areas: "kick aside" "head aside" "lede aside" "filter aside" "cards cards";
    column-gap: 48px; align-items: start;
  }
  .wrap:has(> .intro-aside) > .kick { grid-area: kick; }
  .wrap:has(> .intro-aside) > h1 { grid-area: head; }
  .wrap:has(> .intro-aside) > .lede, .wrap:has(> .intro-aside) > .muted { grid-area: lede; }
  .wrap:has(> .intro-aside) > .tpl-filter, .wrap:has(> .intro-aside) > .sr-tabs { grid-area: filter; }
  .wrap:has(> .intro-aside) > .tpl-cards, .wrap:has(> .intro-aside) > .pj-cards { grid-area: cards; }
  .intro-aside { grid-area: aside; margin: 6px 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1800px) { .intro-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Thumbnails fill their frame: the question sits at the top, the generated
   interface at the bottom, so every 16:10 frame reads as a composed scene. */
.tpl-thumb { display: flex; flex-direction: column; }
.tpl-thumb > :last-child { margin-top: auto; }

/* audit #14 — the ambient capability chips floated in the margins at low
   opacity with no relationship to anything, and read as leftover artifacts.
   Decoration that carries no meaning is removed rather than dimmed further. */
.hero-ambient .ha-node { display: none; }

/* audit #50 — tablet fell between two designs: 1024x768 landscape was TALLER
   (9.1 screens) than 768x1024 portrait (7.7), because the layout stayed single
   column while the viewport lost height. */
@media (min-width: 768px) and (max-width: 1149px) {
  .mo-grid, .pj-cards, .tpl-cards, .pj-autos, .trust-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  }
  .sec { padding: 64px 0; }
  .wrap { padding-inline: 32px; }

}
@media (min-width: 900px) and (max-width: 1149px) and (orientation: landscape) {
  .sec { padding: 48px 0; }
  .stage { max-height: none; }
}

/* /security/ — a reading page, so it gets a real measure and stable tables.
   Without these the long tables reflowed after font swap (measured CLS 0.13). */
.wrap-narrow { max-width: 74ch; }
.wrap-narrow h2 { margin: 34px 0 10px; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.wrap-narrow p { margin: 0 0 12px; }
.wrap-narrow .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-surface); margin: 14px 0 18px; }
.wrap-narrow table { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: var(--t-body); }
.wrap-narrow th, .wrap-narrow td { padding: 10px 13px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; word-break: break-word; }
.wrap-narrow th { font: 600 var(--t-label)/1.3 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.wrap-narrow tbody tr:last-child td { border-bottom: 0; }
.wrap-narrow col:first-child, .wrap-narrow th:first-child { width: 34%; }
.ul-clean { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 7px; }
.ul-clean li::marker { color: var(--aqua-deep); }
.wrap-narrow code { background: var(--bg-2); border-radius: var(--r-control); padding: 1px 5px; font: 400 0.86em/1 var(--font-mono); }

/* The mini exchange earns its space when scanning a grid, not on a phone
   where it would add four screens of height to /templates/. */


/* Interface labels inside the simulated chat UI (not document headings). */
.sr-ctitle { margin: 0 0 2px; font: 600 var(--t-body)/1.3 var(--font-ui); color: var(--ink); }

/* audit — inline links inside prose must not rely on colour alone. */
.wrap-narrow p a, .lede a, .muted a, .msg-body p a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }


/* The consent bar is fixed to the bottom; reserve room for it so it never
   lands on the composer's trust line (audit #04 — it was covering the exact
   sentence that makes generated answers trustworthy). */
body.consent-open { padding-bottom: 96px; }
@media (max-width: 640px) { body.consent-open { padding-bottom: 148px; } }

/* ================================================================
   WAVE 7 — every surface resolves to the ladder (audit #04).
   These selectors previously carried 12 different combinations of
   radius, border, shadow and background on one page.
   ================================================================ */
.mo-card, .tpl-card, .pj-card, .pj-block, .trust-card, .sr-card, .ax-card,
.ws-frame, .est-panel, .tier-panel, .intro-aside div, .pjs-card {
  border-radius: var(--r-surface);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform var(--d-state) var(--ease-state),
              box-shadow var(--d-state) var(--ease-state),
              border-color var(--d-state) var(--ease-state);
}
/* L2 — resting surfaces carry no shadow; only interactive ones lift. */
.pj-block, .trust-card, .intro-aside div, .ax-card { box-shadow: none; }
@media (hover: hover) {
  a.tpl-card:hover, a.pj-card:hover, .mo-card:hover, a.pjs-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: rgba(36, 80, 240, 0.28);
  }
  a.tpl-card:active, a.pj-card:active { transform: translateY(0); transition-duration: 60ms; }
}
@media (prefers-reduced-motion: reduce) {
  .mo-card, .tpl-card, .pj-card, .pjs-card { transition: none; }
  a.tpl-card:hover, a.pj-card:hover, .mo-card:hover { transform: none; }
}


/* #11 — the mega menu had no backdrop, so the hero read straight through it
   and neither layer was legible. It is now a plane above a quieted page. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 39; background: rgba(13, 27, 62, 0.42);
  backdrop-filter: blur(6px); opacity: 0; pointer-events: none;
  transition: opacity var(--d-response) var(--ease-state);
}
.nav-scrim.on { opacity: 1; pointer-events: auto; }
.mega {
  box-shadow: 0 24px 70px -24px rgba(13, 27, 62, 0.38), var(--shadow-2);
  border: 1px solid var(--line);
}
@media (prefers-reduced-motion: reduce) { .nav-scrim { transition: none; } }

/* #14 — the conversation stage is lit from below, and the light responds to
   what the AI is doing. The card itself stays white and calm. */
.hero .stage { position: relative; }
.hero .stage::after {
  content: ""; position: absolute; inset: 8% 4% -6% 4%; z-index: -1; border-radius: var(--r-shell);
  background: radial-gradient(60% 100% at 50% 100%, rgba(15,194,180,.30), rgba(36,80,240,.16) 45%, transparent 72%);
  filter: blur(38px); opacity: .55;
  transition: opacity var(--d-enter) var(--ease-state), filter var(--d-enter) var(--ease-state);
}
[data-core-state="thinking"] .hero .stage::after,
[data-core-state="responding"] .hero .stage::after { opacity: .95; filter: blur(58px); }
[data-core-state="human"] .hero .stage::after {
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,122,89,.34), rgba(200,107,221,.18) 45%, transparent 72%);
  opacity: .9;
}
.stage-head { position: relative; }
.stage-head::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 2px;
  border-radius: var(--r-shell) var(--r-shell) 0 0; background: var(--grad-edge); opacity: .8;
}
@media (prefers-reduced-motion: reduce) { .hero .stage::after { transition: none; } }

/* #32 — the composer acknowledges you. It previously gained a 10%-alpha ring. */
.composer-shell {
  transition: box-shadow var(--d-response) var(--ease-state), border-color var(--d-response) var(--ease-state);
}
.composer-shell:focus-within {
  border-color: transparent;
  box-shadow: 0 0 0 1.5px var(--cobalt), 0 0 0 7px rgba(36, 80, 240, 0.14), var(--shadow-2);
}
.chat-send { transition: transform var(--d-state) var(--ease-state), filter var(--d-state); }
.chat-send:hover { transform: translateY(-1px) scale(1.03); }


/* #33 — a three-stage figure instead of a monospace ticker. */
.msg-state { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: var(--t-small); }
.msg-state::before {
  content: ""; width: 42px; height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, var(--aqua), var(--cobalt), var(--violet));
  background-size: 300% 100%; animation: think-sweep 1.4s var(--ease-state) infinite;
}
@keyframes think-sweep { 0% { background-position: 100% 0; opacity: .5 } 50% { opacity: 1 } 100% { background-position: 0 0; opacity: .5 } }
@media (prefers-reduced-motion: reduce) { .msg-state::before { animation: none; opacity: .8; } }

/* #35 — the estimate range is the card's headline, not body copy. */
.ui-estimate .ui-range {
  font: 700 clamp(1.7rem, 3.4vw, 2.2rem)/1.05 var(--font-display);
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  margin: 2px 0 6px;
}

/* #36 — the pricing meters get a track, a count and a legend. */
.meter { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; }
.meter .dots { display: flex; gap: 3px; }
.meter .dots i {
  width: 22px; height: 5px; border-radius: 999px; background: var(--line); display: block;
}
.meter .dots i.on { background: var(--tier-accent, var(--cobalt)); }
.meter .val { font-variant-numeric: tabular-nums; }
.meter-legend { font: 500 var(--t-label)/1.4 var(--font-ui); color: var(--muted); margin-bottom: 8px; }

/* #17 — the trust section stops using a default-avatar disc. */
.founder-avatar {
  display: grid; place-items: center; width: 92px; height: 92px; flex: none;
  border-radius: var(--r-shell); overflow: hidden;
  background: linear-gradient(180deg, rgba(255,122,89,.16), rgba(200,107,221,.12));
  border: 1px solid var(--s6-edge); font: 700 1.5rem/1 var(--font-display); color: var(--coral-text);
}
.founder-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.founder-quote { max-width: 62ch; font: 400 1.12rem/1.6 var(--font-serif); color: var(--ink); }

/* #18 — the dock yields to full-bleed visual sections. */
.dock { transition: opacity var(--d-response) var(--ease-state), transform var(--d-response) var(--ease-state); }
.dock.yield { opacity: 0; transform: translateY(14px); pointer-events: none; }

/* #41 — a real composition above 1800px. The content column previously held
   about 45% of a 3840 viewport and the generated pages never scaled at all. */
@media (min-width: 1800px) {
  .wrap { max-width: 1560px; }
  :root { --t-lead: 1.14rem; --t-body: 1rem; }
  .tpl-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 2400px) {
  .wrap { max-width: 1840px; }
  html { font-size: 17.5px; }
}
/* Reading columns never grow with the viewport (audit #42). */
.lede, .muted, .prose p, .sec > .wrap > p, .pj-lede { max-width: var(--m-read); }

/* #43 — on a phone the stat boxes were a full screen of delay before the
   first product. They become one quiet line. */
@media (max-width: 899px) {
  /* One flowing line, not four boxes — the separator travels with the item
     that follows it, so it can never begin a wrapped line. */
  .intro-aside { display: block; margin: 8px 0 2px; line-height: 1.9; }
  .intro-aside div {
    display: inline; background: none; border: 0; padding: 0; box-shadow: none;
  }
  .intro-aside b { font: 600 var(--t-small)/1.9 var(--font-ui); color: var(--ink); }
  .intro-aside span { font-size: var(--t-small); color: var(--muted); }
  .intro-aside div + div::before { content: " · "; color: var(--line); white-space: nowrap; }
}

/* #45 — the mobile sheet is a layer, and only one gradient is ever on screen. */
.nav-sheet { box-shadow: 0 -18px 60px -20px rgba(13,27,62,.35); }

/* ================================================================
   FLOW GRAMMAR (visual audit #27, #28)

   The same row of monospace pills joined by text arrows rendered in
   three places meaning three different things: the homepage
   automations, the template architecture and the project
   architecture. Nothing distinguished the trigger from the AI, an
   action, a business system or the human. Node kind is now carried
   by shape, colour and lane.
   ================================================================ */
.sr-flow, .pj-arch ol, .proj-arch ol, .ax-flow {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  list-style: none; margin: 0; padding: 0;
}
.sr-node {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; margin: 0 20px 10px 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-control);
  font: 500 var(--t-small)/1.2 var(--font-ui); color: var(--ink-2);
  letter-spacing: 0;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--d-enter) var(--ease-state), transform var(--d-enter) var(--ease-state);
}
.sr-node.lit { opacity: 1; transform: none; }
/* the connector, drawn rather than typed */
.sr-node:not(:last-child)::after {
  content: ""; position: absolute; right: -20px; top: 50%; width: 20px; height: 1.5px;
  background: var(--line); transform: translateY(-50%) scaleX(0); transform-origin: left;
  transition: transform var(--d-response) var(--ease-state);
}
.sr-node.lit:not(:last-child)::after { transform: translateY(-50%) scaleX(1); }
/* a small mark before the label carries the kind */
.sr-node::before {
  content: ""; width: 9px; height: 9px; flex: none; border-radius: 2px; background: var(--muted);
}
/* TRIGGER — where the conversation enters, a rounded entry form */
.sr-node[data-kind="trigger"] { border-radius: var(--r-pill); background: var(--bg-2); }
.sr-node[data-kind="trigger"]::before { border-radius: 50%; background: var(--ink-2); }
/* AI — one node, the violet generated edge, carrying the mascot mark */
.sr-node[data-kind="ai"] {
  border-color: var(--s5-edge); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(13,27,62,.04), 0 10px 26px -18px rgba(123,91,255,.55);
}
.sr-node[data-kind="ai"]::before {
  border-radius: 3px; background: var(--surface) url("/brand/purceas/mascot/head/48.webp") center/contain no-repeat;
  width: 15px; height: 15px;
}
/* ACTION — a square tool node */
.sr-node[data-kind="action"] { border-radius: var(--r-control); }
.sr-node[data-kind="action"]::before { background: var(--cobalt); border-radius: 2px; }
/* SYSTEM — the lower lane: the client's own tools */
.sr-node[data-kind="system"] { background: var(--bg-2); border-style: dashed; }
.sr-node[data-kind="system"]::before { background: var(--aqua); border-radius: 2px; }
/* HUMAN — coral, and always terminal */
.sr-node[data-kind="human"] {
  border-color: var(--s6-edge); background: var(--s6-bg); color: var(--coral-text); font-weight: 600;
}
.sr-node[data-kind="human"]::before { background: var(--coral); border-radius: 50%; }
.sr-node[data-kind="human"]::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sr-node { opacity: 1; transform: none; transition: none; }
  .sr-node:not(:last-child)::after { transform: translateY(-50%) scaleX(1); transition: none; }
}
/* No JavaScript: the flow is simply present. */
.no-js .sr-node { opacity: 1; transform: none; }
.no-js .sr-node:not(:last-child)::after { transform: translateY(-50%) scaleX(1); }

/* a legend, once per flow, so the shapes are learnable */
.flow-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; }
.flow-legend span {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 var(--t-label)/1.3 var(--font-ui); color: var(--muted);
}
.flow-legend i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.fl-ai { background: var(--violet); } .fl-action { background: var(--cobalt); }
.fl-system { background: var(--aqua); } .fl-human { background: var(--coral); border-radius: 50% !important; }

/* ================================================================
   WAVE 7 — consistency, outcome tiles, mobile rail, sectional light
   ================================================================ */

/* #49 — the preview bubbles on template and project pages used a different
   grammar from the live chat. One conversation language everywhere. */
.sr-msg.sr-u p, .m-user, .tb-ask { }
.sr-msg.sr-u p {
  background: rgba(13, 27, 62, 0.055); color: var(--ink);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-surface) var(--r-surface) 4px var(--r-surface);
}
.sr-msg.sr-a p {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-surface) var(--r-surface) var(--r-surface) 4px;
  box-shadow: 0 1px 2px rgba(13,27,62,.04), 0 10px 30px -18px rgba(123, 91, 255, .3);
}

/* #24 — outcome tiles instead of grey pills that read as metadata. */
.sr-tabs, .tpl-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-tab, .tpl-filter button {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 16px;
}
.sr-tab::before, .tpl-filter button::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px; flex: none;
  background: var(--tab-mark, var(--muted)); opacity: .85;
}
.sr-tab[data-cat="sales"]::before,   .tpl-filter button[data-cat="sales"]::before   { background: var(--violet); }
.sr-tab[data-cat="leads"]::before,   .tpl-filter button[data-cat="leads"]::before   { background: var(--cobalt); }
.sr-tab[data-cat="bookings"]::before,.tpl-filter button[data-cat="bookings"]::before{ background: var(--aqua); }
.sr-tab[data-cat="internal"]::before,.tpl-filter button[data-cat="internal"]::before{ background: var(--emerald); }
.tab-count { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 500; }

/* #44 — the mobile template gallery becomes a snap rail per category
   instead of ten near-identical full-width screens. */
@media (max-width: 780px) {
  .tpl-cards {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
    grid-template-columns: none; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 20px 18px; margin-inline: -20px;
    scrollbar-width: none;
  }
  .tpl-cards::-webkit-scrollbar { display: none; }
  .tpl-card { scroll-snap-align: start; }
  .tpl-body { padding: 13px 15px 15px; }
  .tpl-rail-hint {
    display: flex; align-items: center; gap: 7px; margin: -8px 0 4px;
    font: 500 var(--t-label)/1.3 var(--font-ui); color: var(--muted);
  }
}
@media (min-width: 781px) { .tpl-rail-hint { display: none; } }

/* #10 / #15 — sectional light. Each section carries a low-amplitude wash
   whose hue is its meaning, and the seams between them are gone. */
.sec { position: relative; }
.sec::before {
  content: ""; position: absolute; inset: -60px 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 80% at 50% 30%, var(--sec-wash, transparent) 0%, transparent 70%);
}
#moments      { --sec-wash: rgba(15, 194, 180, 0.07); }
#templates    { --sec-wash: rgba(123, 91, 255, 0.09); }
#automations  { --sec-wash: rgba(36, 80, 240, 0.07); }
#projects     { --sec-wash: rgba(15, 169, 104, 0.06); }
#systems      { --sec-wash: rgba(36, 80, 240, 0.06); }
#human        { --sec-wash: rgba(255, 122, 89, 0.10); }
/* the hard-edged section backgrounds yield to the wash */
.sec-violet, .sec-aqua, .sec-paper, .sec-warm { background: none; }

/* #19 — the mascot never renders below 24px. */
.ddot, .brand-head, .sr-av, .m-core { min-width: 24px; min-height: 24px; }

/* The last pill controls that were still sizing themselves (audit #05):
   measured heights of 31, 35, 37 and 41px alongside the 40/44 roles. */
.pill, .mm-link, .nav-link, .sr-badge, .pj-badge, .tpl-tier a, .sr-pick, .tb-src {
  line-height: 1.25;
}
.pill, .sr-pick, .pj-badge, .sr-badge {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px;
  border-radius: var(--r-pill); font: 600 var(--t-label)/1 var(--font-ui); letter-spacing: .04em;
}
.nav-link, .mm-link { display: inline-flex; align-items: center; min-height: 40px; }
@media (pointer: coarse) { .nav-link, .mm-link { min-height: 44px; } }

/* Any prose container still unbounded at 4K (audit #42). Measured 250-267
   characters per line before this; the reading measure is the ceiling. */
.sec p:not(.pill):not(.meta):not(.sr-meta):not(.tpl-cmoment):not(.flow-legend):not(.mo-outcome),
.tpl-hero p, .pj-block p, .trust-card p, .prose p { max-width: var(--m-read); }

/* ================================================================
   REAL BUILDS (visual audit #29, #32) — a different class of object
   from the fictional templates above them.
   ================================================================ */
.pj-cards { display: grid; gap: 22px; }
@media (min-width: 900px) { .pj-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pj-real { display: grid; grid-template-rows: auto 1fr; overflow: hidden; padding: 0; }
.pj-scene {
  display: flex; flex-direction: column; gap: 12px; padding: 20px 22px;
  background:
    radial-gradient(120% 90% at 88% 0%, var(--pj-tint, rgba(36,80,240,.12)) 0%, transparent 64%),
    var(--bg-2);
  border-bottom: 1px solid var(--line-soft);
}
.pj-real[data-accent="violet"] { --pj-tint: rgba(123, 91, 255, .16); }
.pj-real[data-accent="cobalt"] { --pj-tint: rgba(36, 80, 240, .14); }
.pj-real[data-accent="aqua"]   { --pj-tint: rgba(15, 194, 180, .16); }
.pj-real[data-accent="coral"]  { --pj-tint: rgba(255, 122, 89, .14); }
.pj-ask {
  align-self: flex-start; max-width: 82%; padding: 9px 13px;
  background: var(--ink); color: #fff; border-radius: 12px 12px 12px 4px;
  font: 400 var(--t-small)/1.45 var(--font-ui);
}
.pj-flow { margin: 0; }
.pj-flow .sr-node { margin-bottom: 8px; font-size: var(--t-label); padding: 7px 11px; }
.pj-body { display: grid; gap: 8px; align-content: start; padding: 20px 22px 22px; }
.pj-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pj-top h3 { margin: 0; font-size: var(--t-h3); }
.pj-sector { font: 500 var(--t-label)/1.4 var(--font-ui); color: var(--muted); }
.pj-summary { margin: 0; font-size: var(--t-small); color: var(--ink-2); max-width: 52ch; }

/* the status rail — four visible stages, not a text pill */
.pj-rail { display: flex; gap: 0; margin: 6px 0 12px; }
.pj-step { flex: 1; display: grid; gap: 5px; }
.pj-step i {
  display: block; height: 3px; border-radius: 999px; background: var(--line);
  margin-right: 3px;
}
.pj-step.done i { background: var(--cobalt); }
.pj-step.now i { background: var(--grad-ai); }
.pj-step b {
  font: 500 0.62rem/1.3 var(--font-ui); letter-spacing: .04em; color: var(--muted);
}
.pj-step.now b { color: var(--ink); font-weight: 600; }
.pj-step:not(.done) b { opacity: .6; }
/* Even heights in the real-build grid: the summary is the only variable part. */
.pj-real .pj-summary {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(3 * 1.5 * var(--t-small));
}
.pj-scene { min-height: 156px; }
.pj-real { align-content: start; }

/* #38 — pictures of what a price buys, inside the tier panel. */
.tier-examples { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.tx-row { display: grid; gap: 8px; margin-top: 8px; }
@media (min-width: 640px) { .tx-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tx-card {
  display: grid; gap: 2px; padding: 11px 13px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control);
  transition: transform var(--d-state) var(--ease-state), border-color var(--d-state) var(--ease-state);
}
.tx-card:hover { transform: translateY(-2px); border-color: var(--cobalt); text-decoration: none; }
.tx-name { font: 600 var(--t-small)/1.3 var(--font-ui); color: var(--ink); }
.tx-ind { font: 500 var(--t-label)/1.3 var(--font-ui); color: var(--muted); }

/* #37 — the comparison panel: only what changes between two tiers. */
.tier-compare {
  grid-column: 1 / -1; margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line-soft); display: grid; gap: 10px;
}
.tc-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tc-head .kick { margin: 0; }
.tc-delta-price { margin: 0; font: 700 var(--t-h3)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.tc-rows { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-surface); overflow: hidden; }
.tc-row {
  display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft); font-size: var(--t-small); color: var(--ink-2);
}
.tc-row:last-child { border-bottom: 0; }
.tc-d { font-weight: 600; color: var(--cobalt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-new li::before { content: "+"; color: var(--emerald-text); font-weight: 700; }
.tc-nodes { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-nodes span {
  padding: 6px 11px; border-radius: var(--r-control);
  background: var(--tint-cobalt-06); border: 1px solid rgba(36, 80, 240, .22);
  font: 600 var(--t-label)/1 var(--font-ui); color: var(--cobalt);
}
.tc-hint { margin: 16px 0 0; grid-column: 1 / -1; opacity: .8; }
.tier-row.pinned { border-color: var(--s4-edge); box-shadow: var(--s4-glow); }
@media (pointer: coarse) { .tc-hint { display: none; } }

/* ================================================================
   TEMPLATE DETAIL — a descent of rendered proofs (visual audit #26)
   ================================================================ */
.tpl-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.tpl-step {
  position: relative; padding: 22px 0 22px 34px; border-top: 1px solid var(--line-soft);
  counter-increment: step;
}
.tpl-step:first-child { border-top: 0; }
.tpl-step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 24px;
  font: 600 var(--t-label)/1 var(--font-ui); color: var(--muted); letter-spacing: .08em;
}
.tpl-sn { margin: 0 0 12px; font: 600 var(--t-body)/1.3 var(--font-display); color: var(--ink); }
.tpl-scap { margin: 10px 0 0; font-size: var(--t-small); color: var(--muted); max-width: 58ch; }

.tpl-record {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 15px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control);
  box-shadow: var(--shadow-1);
}
.tr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); flex: none; }
.tpl-record code { font: 500 var(--t-small)/1 var(--font-mono); color: var(--ink); }

.tpl-mem { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-fact {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 12px;
  background: var(--s1-bg); border-radius: var(--r-control); font-size: var(--t-small); color: var(--ink-2);
}
.tm-fact b {
  font: 600 var(--t-label)/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

.tpl-human {
  display: flex; align-items: flex-start; gap: 12px; max-width: 62ch;
  padding: 14px 16px; background: var(--s6-bg); border: 1px solid var(--s6-edge);
  border-radius: var(--r-surface);
}
.tpl-human p { margin: 0; font-size: var(--t-small); color: var(--ink-2); }
.th-mark {
  width: 10px; height: 10px; border-radius: 50%; background: var(--coral); flex: none; margin-top: 5px;
}

.tpl-tools { display: flex; flex-wrap: wrap; gap: 7px; }
.tt-chip {
  padding: 7px 12px; border-radius: var(--r-control);
  background: var(--surface); border: 1px dashed var(--line);
  font: 500 var(--t-small)/1 var(--font-ui); color: var(--ink-2);
}

/* ================================================================
   PROJECT DETAIL — a visible transformation (visual audit #30)
   ================================================================ */
.pj-problem { margin: 30px auto 0; max-width: var(--m-read); font-size: var(--t-lead); color: var(--ink-2); }
.pj-ba { display: grid; gap: 14px; margin-top: 26px; align-items: stretch; }
@media (min-width: 860px) { .pj-ba { grid-template-columns: 1fr 44px 1fr; } }
.pj-side { display: grid; gap: 10px; align-content: start; }
.pj-side-h { margin: 0; font: 600 var(--t-label)/1.3 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* the old reality, drawn as the thing it was: a dead form */
.pj-form {
  display: grid; gap: 8px; padding: 16px; border-radius: var(--r-surface);
  background: var(--s1-bg); border: 1px dashed var(--line);
}
.pf-row {
  padding: 10px 12px; border-radius: var(--r-control);
  background: var(--surface); border: 1px solid var(--line-soft);
  font-size: var(--t-small); color: var(--muted);
}
/* the new one, drawn as things that happened */
.pj-after {
  display: grid; gap: 8px; padding: 16px; border-radius: var(--r-surface);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.pa-row {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: var(--t-small); color: var(--ink-2); line-height: 1.5;
}
.pa-row::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px;
  background: var(--emerald);
}
.pj-arrow { display: none; }
@media (min-width: 860px) {
  .pj-arrow { display: grid; place-items: center; }
  .pj-arrow::before {
    content: ""; width: 22px; height: 22px; border-right: 2px solid var(--line);
    border-bottom: 2px solid var(--line); transform: rotate(-45deg);
  }
}

.pj-timeline { margin-top: 34px; }
.pj-tl { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 0; }
.pj-tli {
  position: relative; padding: 12px 0 12px 28px; font-size: var(--t-small); color: var(--ink-2);
  border-left: 2px solid var(--line); margin-left: 5px;
}
.pj-tli span {
  position: absolute; left: -7px; top: 16px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line);
}
.pj-tli.now { color: var(--ink); font-weight: 500; border-left-color: var(--cobalt); }
.pj-tli.now span { border-color: var(--cobalt); background: var(--cobalt); box-shadow: 0 0 0 4px rgba(36,80,240,.14); }

/* #12 — mega menu: outcomes with counts, and a preview that shows the
   interface the template generates instead of a truncated text trace. */
.mm-cat { display: flex; align-items: center; gap: 8px; }
.mm-mark { width: 9px; height: 9px; border-radius: 3px; background: var(--muted); flex: none; }
.mm-col[data-cat="sales"]    .mm-mark { background: var(--violet); }
.mm-col[data-cat="leads"]    .mm-mark { background: var(--cobalt); }
.mm-col[data-cat="bookings"] .mm-mark { background: var(--aqua); }
.mm-col[data-cat="internal"] .mm-mark { background: var(--emerald); }
.mm-n {
  margin-left: auto; padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--s1-bg); color: var(--muted);
  font: 600 0.62rem/1.4 var(--font-ui); font-variant-numeric: tabular-nums;
}
.mm-pui { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 8px; }
.mmu-c {
  display: grid; gap: 1px; padding: 6px 8px; min-width: 74px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-control);
}
.mmu-c.pick, .mmu-s.pick { border-color: var(--s4-edge); box-shadow: var(--s4-glow); }
.mmu-c b { font: 500 0.62rem/1.25 var(--font-ui); color: var(--ink-2); }
.mmu-c i { font: 600 0.68rem/1 var(--font-ui); font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; }
.mmu-s {
  padding: 6px 10px; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-control); font: 600 0.66rem/1 var(--font-ui); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.mmu-k {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 5px 8px; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-control); font: 500 0.64rem/1.3 var(--font-ui); color: var(--ink-2);
}
.mmu-k::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; }
.mmu-k.ok::before { border-color: var(--emerald); background: var(--emerald); box-shadow: inset 0 0 0 2px var(--surface); }
.mmu-a {
  padding: 7px 9px; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-control); font: 400 0.66rem/1.45 var(--font-ui); color: var(--ink-2);
}
.mm-pflow { margin: 0; }
.mm-pflow .sr-node { margin: 0 14px 6px 0; padding: 5px 9px; font-size: 0.64rem; }
.mm-pflow .sr-node:not(:last-child)::after { right: -14px; width: 14px; }

/* The mega preview column is narrow, so its flow reads top-to-bottom by
   design — with a vertical connector — rather than wrapping into a stack. */
.mm-pflow { display: grid; gap: 0; }
.mm-pflow .sr-node { margin: 0 0 14px 0; justify-self: start; }
.mm-pflow .sr-node:not(:last-child)::after {
  right: auto; left: 13px; top: auto; bottom: -14px; width: 1.5px; height: 14px;
  transform: scaleY(1); transform-origin: top;
}
.mm-pflow .sr-node:last-child { margin-bottom: 0; }

/* The mega grid: columns align to the top and the panel stops reserving
   height for the tallest one (visual audit #12). */
.mm-grid { align-items: start; }
.mm-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.mm-preview { align-self: start; }
.mm-plabel:has(+ * [data-mm-chat]) { display: none; }
.mega[data-touched] .mm-plabel { display: none; }

/* ================================================================
   OUTCOME THEATRE (visual audit #20)
   ================================================================ */
.th { display: grid; gap: 22px; margin-top: 24px; }
@media (min-width: 900px) { .th { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; } }
.th-rail { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 900px) { .th-rail { flex-direction: column; position: sticky; top: 92px; } }
.th-rail button {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  font: 500 var(--t-small)/1 var(--font-ui); color: var(--ink-2); text-align: left;
  transition: border-color var(--d-state) var(--ease-state), color var(--d-state) var(--ease-state), transform var(--d-state) var(--ease-state);
}
@media (min-width: 900px) { .th-rail button { justify-content: flex-start; width: 100%; } }
.th-rail button::before { content: ""; width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--muted); }
.th-rail button[data-cat="sales"]::before    { background: var(--violet); }
.th-rail button[data-cat="leads"]::before    { background: var(--cobalt); }
.th-rail button[data-cat="bookings"]::before { background: var(--aqua); }
.th-rail button[data-cat="internal"]::before { background: var(--emerald); }
.th-rail button[aria-selected="true"] {
  border-color: var(--s4-edge); box-shadow: var(--s4-glow); color: var(--ink); font-weight: 600;
}
@media (hover: hover) { .th-rail button:hover { border-color: var(--cobalt); transform: translateY(-1px); } }

.th-stage {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-shell);
  box-shadow: var(--shadow-1); padding: 6px 24px 24px;
}
.th-steps { list-style: none; margin: 0; padding: 0; counter-reset: th; }
.th-step {
  counter-increment: th; position: relative; padding: 20px 0 20px 34px;
  border-top: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(8px);
}
.th-step.in { opacity: 1; transform: none; transition: opacity var(--d-enter) var(--ease-out), transform var(--d-enter) var(--ease-out); }
.th-step:first-child { border-top: 0; }
.th-step::before {
  content: counter(th, decimal-leading-zero); position: absolute; left: 0; top: 22px;
  font: 600 var(--t-label)/1 var(--font-ui); color: var(--muted); letter-spacing: .08em;
}
.th-sn { margin: 0 0 10px; font: 600 var(--t-label)/1.3 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.th-ask {
  display: inline-block; max-width: 46ch; margin: 0; padding: 11px 15px;
  background: var(--ink); color: #fff; border-radius: var(--r-surface) var(--r-surface) var(--r-surface) 4px;
  font-size: var(--t-small);
}
.th-ans { margin: 0 0 12px; max-width: 58ch; font-size: var(--t-small); color: var(--ink-2); }
.th-ui { display: flex; flex-wrap: wrap; gap: 6px; max-width: 520px; }
.th-ui.tb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.th-ui.tb-check { display: grid; }
.th-record {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 15px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control);
  box-shadow: var(--shadow-1);
}
.th-record code { font: 500 var(--t-small)/1 var(--font-mono); color: var(--ink); }
.th-out { margin: 10px 0 0; font-size: var(--t-small); color: var(--muted); max-width: 58ch; }
@media (prefers-reduced-motion: reduce) { .th-step { opacity: 1; transform: none; transition: none; } }
.no-js .th-step { opacity: 1; transform: none; }