/* Saykeep site — shared styles. Editorial redesign 2026-08-01 (serif display, cream/ink,
   steel-blue + warm-red accents) per the Claude Design redesign artifact, CEO-adapted. */

/* Newsreader, self-hosted (OFL) — no third-party font requests on a "watch the wire" site. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.sk-root {
  display:flex; flex-direction:column; position:relative;
  --bg:#EFF3EC; --nav-bg:rgba(239,243,236,0.92); --text:#17211B; --body-c:#33413A;
  --muted:#55635B; --faint:#5E6B63; --faint2:#79867D; --ink2:#242F28;
  --border:#DCE3D7; --border2:#D3DCCD; --border3:#C2CDBB;
  --tint:#E7EDE2; --tint2:#E3EADD; --footer:#142019; --accent-tint:#DFEAE0;
  --accent-bg:#1F6A4C; --accent-bg-hover:#17553C; --accent-text:#1F6A4C; --link-hover:#14523A;
  --on-accent:#FFFFFF; --halo:rgba(31,106,76,0.11); --glow:rgba(31,106,76,0.20);
  --accent2:#B7433B; --accent2-soft:#C96A63; --gold:#7E6A33; --voice2:#3D6E8E;
  --card:#F8FAF5; --rule:#1B241E;
  --warn-bg:#F3EEDD; --warn-border:#DCCF9F; --warn-text:#6E5F35;
  --bar-bg:#142019; --bar-text:#C4D0C7; --verify-bg:#142019;
  --band-bg:#142019; --band-card:#1C2A22; --band-text:#E7EEE8; --band-body:#C4D0C7;
  --band-muted:#9AAB9F; --band-accent:#7FCBA4; --band-hot:#E88A80; --band-line:#26352C;
  --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-flip:cubic-bezier(0.2,0,0,1);
  background:var(--bg); color:var(--text); min-height:100vh;
}
/* grain only inside the dark stages */
.band, .cta-bookend { position:relative; }
.band::after, .cta-bookend::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.band > *, .cta-bookend > * { position:relative; z-index:1; }
.sk-root > footer { margin-top:auto; }

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:#EFF3EC; color:#17211B;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:"Newsreader",Georgia,"Iowan Old Style",serif; }
a { color:var(--accent-text,#1E5B43); text-decoration:none; }
a:hover { color:var(--link-hover,#143D2C); text-decoration:underline; }
h1,h2,h3 { text-wrap:balance; }
p { text-wrap:pretty; }
code { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; }

@keyframes sk-pulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
@keyframes sk-meter { 0%,100% { transform:scaleY(0.3); } 50% { transform:scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; }
}

/* ---- layout ---- */
.container { max-width:1120px; margin:0 auto; padding-left:28px; padding-right:28px; }
.content-680 { max-width:680px; margin:0 auto; padding:72px 28px 100px; box-sizing:content-box; }
.content-720 { max-width:720px; margin:0 auto; padding:72px 28px 100px; box-sizing:content-box; }
.content-760 { max-width:760px; margin:0 auto; padding:72px 28px 100px; box-sizing:content-box; }

.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.grid-split { display:grid; grid-template-columns:1.15fr 1fr; gap:18px; align-items:stretch; }
.grid-verify { display:grid; grid-template-columns:1.2fr 1fr; gap:20px; align-items:start; }
.grid-pricing { display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:stretch; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:32px; }
.cmp-wrap { overflow-x:auto; }
.cmp-table { display:grid; grid-template-columns:1.3fr 1fr 1fr; font-size:14px; min-width:540px; }
.verify-checks { display:grid; grid-template-columns:1fr 1fr; gap:10px 28px; }

/* ---- type ---- */
.h1-hero { font-family:"Newsreader",Georgia,serif; font-size:clamp(40px,5vw,61px); line-height:1.04; letter-spacing:-0.012em; font-weight:520; margin:0; }
.h1-sub { font-family:"Newsreader",Georgia,serif; font-size:clamp(32px,5vw,46px); letter-spacing:-0.01em; font-weight:520; margin:12px 0 0; }
.h2-sec { font-family:"Newsreader",Georgia,serif; font-size:clamp(30px,4vw,42px); letter-spacing:-0.008em; font-weight:520; margin:0; }
.eyebrow { font-size:11.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; }
.kick-num { color:var(--accent-text); }
.closer-quote { font-family:"Newsreader",Georgia,serif; font-style:italic; font-weight:500; }

/* ---- components ---- */
.btn {
  display:inline-block; background:var(--accent-bg); color:var(--on-accent); border:none; cursor:pointer;
  padding:13px 26px; border-radius:7px; font-weight:650; font-size:15.5px; text-decoration:none;
  font-family:inherit; box-shadow:0 0 0 rgba(92,224,166,0);
  transition:background 0.2s var(--ease-flip), box-shadow 0.25s var(--ease-flip);
}
.btn:hover { background:var(--accent-bg-hover); color:var(--on-accent); text-decoration:none; box-shadow:0 0 26px var(--glow); }
.btn-nav { padding:8px 16px; border-radius:8px; font-size:14.5px; box-shadow:none; }
.btn-big { padding:15px 32px; font-size:16.5px; }

.navlink { color:var(--body-c); font-size:14.5px; }
.navlink:hover { color:var(--text); text-decoration:none; }
.link-faint { color:var(--faint); text-decoration:underline; }
.link-faint:hover { color:var(--accent-text); }

.pill {
  background:none; border:1px solid var(--border); border-radius:999px; padding:6px 12px;
  font-family:inherit; font-size:12.5px; color:var(--muted); cursor:pointer; text-decoration:none;
  display:inline-block; line-height:normal;
}
.pill:hover { color:var(--text); text-decoration:none; }

.card { border:1px solid var(--border); border-radius:12px; background:var(--card); }
.card-tint { border:1px solid var(--border2); background:var(--tint); border-radius:12px; }
.chip { border:1px solid var(--border2); background:var(--tint); border-radius:999px; padding:6px 13px; font-size:13px; color:var(--ink2); display:inline-block; }
.warn-banner { border:1px solid var(--warn-border); background:var(--warn-bg); border-radius:8px; padding:10px 16px; font-size:13px; line-height:1.55; color:var(--warn-text); }

.strip-item + .strip-item::before { content:"·"; margin:0 14px; color:var(--faint2); }

/* nav */
.site-nav { position:sticky; top:0; z-index:50; background:var(--nav-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.site-nav-inner { height:60px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.site-nav-links { display:flex; align-items:center; gap:26px; }
.brand { display:flex; align-items:center; gap:9px; color:var(--text); font-weight:700; font-size:17px; text-decoration:none; }
.brand:hover { color:var(--text); text-decoration:none; }
.brand-mark { width:20px; height:20px; border-radius:6px; background:var(--accent-bg); display:inline-flex; align-items:center; justify-content:center; }
.brand-dot { width:7px; height:7px; border-radius:50%; background:var(--bg); display:block; }

/* FAQ accordion */
.faq-item { border-bottom:1px solid var(--border); }
.faq-q {
  width:100%; background:none; border:none; cursor:pointer; display:flex; justify-content:space-between;
  align-items:center; gap:16px; padding:19px 4px; font-family:inherit; font-size:16.5px; font-weight:600;
  color:var(--text); text-align:left;
}
.faq-mark { color:var(--faint2); font-size:20px; font-weight:400; }
.faq-a { padding:0 4px 22px; font-size:15px; line-height:1.65; color:var(--body-c); max-width:640px; display:none; }
.faq-item.open .faq-a { display:block; }

/* ---- responsive ---- */
@media (max-width: 920px) {
  .grid-3, .grid-2, .grid-split, .grid-verify, .grid-pricing { grid-template-columns:1fr; }
  .grid-2 { gap:36px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  section, header { padding-left:20px; padding-right:20px; }
  .verify-checks { grid-template-columns:1fr; }
}
/* Mobile nav: burger + drawer (hidden ≥760px, where the inline links show) */
.nav-burger {
  display:none; background:none; border:1px solid var(--border); border-radius:8px;
  width:34px; height:30px; padding:0; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.nav-burger span { display:block; width:14px; height:1.5px; background:var(--text); border-radius:1px; }
.nav-drawer {
  display:none; flex-direction:column; border-top:1px solid var(--border);
  background:var(--nav-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:4px 24px 12px;
}
.nav-drawer .navlink { padding:12px 0; font-size:15.5px; border-bottom:1px solid var(--border); }
.nav-drawer .navlink:last-child { border-bottom:none; }
.site-nav.nav-open .nav-drawer { display:flex; }

@media (max-width: 760px) {
  .site-nav-links .navlink { display:none; }
  .site-nav-inner { gap:10px; }
  .site-nav-links { gap:8px; }
  .btn-nav { padding:8px 12px; }
  .nav-burger { display:inline-flex; }
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .container, .content-680, .content-720, .content-760 { padding-left:18px; padding-right:18px; }
  .cmp-table { min-width:0; grid-template-columns:1fr 1fr; font-size:13px; }
  .cmp-table > div { padding:9px 10px !important; }
  .cmp-table > div:nth-child(3n+1) { grid-column:1/-1; padding-bottom:2px !important; }
}

/* ================= Editorial redesign components (2026-08-01) ================= */

/* hero */
.hero-grid { display:grid; grid-template-columns:1.12fr 0.88fr; gap:72px; align-items:center; }
.hero-sub { font-size:18px; line-height:1.62; color:var(--body-c); margin:26px 0 0; max-width:490px; }
.hero-ctas { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:34px; }
.buy-link { font-family:"Newsreader",Georgia,serif; font-size:17px; font-weight:560; text-decoration:underline; text-underline-offset:3px; }
.hero-micro { font-size:13px; color:var(--faint); margin-top:9px; }

/* the pipeline panel: audio in → live transcript → markdown note out */
.pipe { min-width:0; max-width:470px; justify-self:end; width:100%; }
.pipe-label { font-size:10.5px; font-weight:650; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.pipe-head { display:flex; align-items:center; gap:10px; }
.pipe-head .pipe-time { margin-left:auto; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12.5px; color:var(--accent2); }
.pipe-dot { width:8px; height:8px; border-radius:50%; background:var(--accent2); animation:sk-pulse 1.3s ease-in-out infinite; }
.pipe-wave { display:flex; align-items:center; justify-content:space-between; gap:3px; height:38px; margin:16px 0 4px; }
.pipe-wave span { flex:0 1 3.5px; min-width:2.5px; border-radius:2px; background:var(--accent-text); transform-origin:center; animation:sk-wave 1.1s ease-in-out infinite; }
.pipe-wave span:nth-child(4n+2) { background:var(--accent2); }
.pipe-wave span:nth-child(6n+4) { background:var(--accent2-soft); }
.pipe-wave span:nth-child(5n+1) { background:var(--faint2); }
@keyframes sk-wave { 0%,100% { transform:scaleY(0.45); } 50% { transform:scaleY(1); } }
.pipe-lines { margin-top:18px; display:flex; flex-direction:column; gap:10px; font-family:"Newsreader",Georgia,serif; font-size:16.5px; line-height:1.5; color:var(--body-c); }
.pl-name { font-weight:600; }
.pl-line em { font-style:normal; }
.pipe-out { display:flex; align-items:center; gap:12px; margin:24px 0 14px; border-top:1px solid var(--border2); padding-top:16px; }
.pipe-arrow { color:var(--accent-text); font-size:15px; letter-spacing:2px; }
.pipe-note-t { font-family:"Newsreader",Georgia,serif; font-size:20px; font-weight:620; }
.pipe-note-m { font-size:12.5px; color:var(--faint); margin-top:4px; font-family:ui-monospace,"SF Mono",Menlo,monospace; }
.pipe-note-b { margin:10px 0 0; padding-left:20px; font-family:"Newsreader",Georgia,serif; font-size:15.5px; line-height:1.65; color:var(--body-c); }
.pipe-note-b li { margin-top:4px; }
/* sequencing: fully visible by default (no-JS / reduced-motion); .pl-anim hides, JS reveals */
.pipe.pl-anim .pl-line { opacity:0; transform:translateY(6px); }
.pipe.pl-anim .pl-line.pl-show { opacity:1; transform:none; transition:opacity 0.5s ease, transform 0.5s ease; }
.pl-caret { display:inline-block; width:2px; height:16px; background:var(--accent2); vertical-align:-2px; margin-left:2px; animation:sk-caret 1.06s step-end infinite; }
@keyframes sk-caret { 0%,55% { opacity:1; } 56%,100% { opacity:0; } }

/* editorial rules + why columns */
.rule-top { border-top:2px solid var(--rule); padding-top:16px; }
.why-col { border-top:2px solid var(--rule); padding-top:18px; }
.why-col h3 { font-size:20px; font-weight:600; margin:0 0 10px; }
.tests-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:16px; }
.tests-grid h3 { font-size:19px; font-weight:600; margin:0 0 8px; }
.tests-grid p { margin:0; font-size:14.5px; line-height:1.65; color:var(--muted); }

/* live audit widget */
.audit-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.audit-btn {
  font-family:"Newsreader",Georgia,serif; font-size:15px; font-weight:600; cursor:pointer;
  background:none; border:1.5px solid var(--accent2); color:var(--accent2);
  border-radius:6px; padding:7px 16px; transition:background 0.2s ease, color 0.2s ease;
}
.audit-btn:hover { background:var(--accent2); color:#fff; }
.audit[data-cut] .audit-btn, .audit.cut .audit-btn { border-color:var(--accent-text); color:var(--accent-text); }
.audit.cut .audit-btn:hover { background:var(--accent-text); color:#fff; }
.audit-row { display:flex; align-items:baseline; gap:10px; padding:13px 0 0; font-size:15.5px; }
.audit-row > span:first-child { font-family:"Newsreader",Georgia,serif; font-weight:560; }
.audit-lead { flex:1; border-bottom:1px dotted var(--border3); transform:translateY(-4px); }
.audit-val { font-family:"Newsreader",Georgia,serif; font-weight:600; color:var(--accent-text); }
.audit-val.neutral { color:var(--muted); font-weight:500; }
.audit.cut .audit-val[data-audit-net] { color:var(--accent2); }
.audit.cut .audit-val.ok { animation:sk-recheck 0.9s ease; }
@keyframes sk-recheck { 0% { opacity:0.15; } 100% { opacity:1; } }
.audit-cap { font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:16px; color:var(--ink2); margin:20px 0 0; }

/* network diagram */
.net-diagram { width:100%; height:auto; display:block; }
.net-diagram .nd-stroke { stroke:var(--ink2); fill:none; stroke-width:1.6; }
.net-diagram .nd-soft { stroke:var(--faint2); fill:none; stroke-width:1.4; }
.net-diagram .nd-wave { stroke:var(--accent-text); fill:none; stroke-width:1.6; }
.net-diagram .nd-dot { fill:var(--accent2); }
.net-diagram .nd-line { stroke:var(--faint2); stroke-width:1.4; stroke-dasharray:2 7; stroke-linecap:round; }
.net-diagram .nd-label { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:10.5px; font-weight:650; letter-spacing:0.16em; text-transform:uppercase; fill:var(--muted); }
.audit-scene.cut .net-diagram .nd-line { stroke-dasharray:none; stroke:var(--accent2); }
.audit-scene.cut .net-diagram .nd-cutmark { opacity:1; }
.net-diagram .nd-cutmark { opacity:0; stroke:var(--accent2); stroke-width:1.8; transition:opacity 0.25s ease; }

/* FAQ questions in serif */
.faq-q { font-family:"Newsreader",Georgia,serif; font-size:18.5px; font-weight:560; }

@media (max-width: 920px) {
  .hero-grid { grid-template-columns:1fr; gap:52px; }
  .hero-sub { max-width:none; }
  .tests-grid { grid-template-columns:1fr; gap:20px; }
}

/* ============== Closed Circuit on Paper — v3 additions (2026-08-02) ============== */

/* the dark stages: remap the generic tokens inside them */
.band, .cta-bookend, .sk-root > footer {
  --text:var(--band-text); --body-c:var(--band-body); --muted:var(--band-muted);
  --ink2:var(--band-body); --faint:var(--band-muted); --faint2:#6E7F74;
  --accent-text:var(--band-accent); --link-hover:#A3DEC1; --accent2:var(--band-hot);
  --accent-bg:var(--band-accent); --accent-bg-hover:#A3DEC1; --on-accent:#0B241A;
  --glow:rgba(127,203,164,0.28); --halo:rgba(127,203,164,0.12); --voice2:#8CB8E6;
  --card:var(--band-card); --border:var(--band-line); --border2:var(--band-line);
  --border3:#33443A; --rule:#3E5245; --tint:var(--band-card); --tint2:#101813;
  color:var(--band-body);
}
.band {
  background:var(--band-bg);
  border-top:1px solid var(--band-line); border-bottom:1px solid var(--band-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}
.band .btn, .cta-bookend .btn { box-shadow:none; }

/* scroll reveals — once-only; default fully visible, JS adds .io-wait then .io-in.
   Safety valve: .io-wait self-reveals after 4s even if the observer never fires —
   a stranded-invisible section is worse than a missed reveal. */
@keyframes io-reveal { to { opacity:1; transform:none; } }
.io-wait { opacity:0; transform:translateY(14px); animation:io-reveal 0.7s var(--ease-out) 4s forwards; }
.io-in { opacity:1; transform:none; transition:opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); animation:none; }
.io-wait.rule-top, .io-wait .rule-top { border-top-color:transparent; }

/* oscilloscope trace (hero) */
.pipe-trace { height:44px; margin:16px 0 4px; overflow:hidden; }
.pipe-trace svg { width:200%; height:100%; display:block; animation:sk-trace 3.2s linear infinite; }
@keyframes sk-trace { to { transform:translateX(-50%); } }
.trace-line { stroke:var(--accent-text); stroke-width:1.6; fill:none; stroke-linejoin:round; }
.trace-glow { stroke:var(--accent-text); stroke-width:6; opacity:0.10; fill:none; stroke-linejoin:round; }
.pipe.pl-done .pipe-trace svg { animation-play-state:paused; }
.pipe.pl-done .pl-caret { display:none; }
.pipe.pl-done .pipe-dot { animation-duration:2.8s; }

/* the dial — what stays, what leaves */
.dial-seg { display:flex; border:1px solid var(--border3); border-radius:9px; overflow:hidden; background:var(--card); }
.dial-seg [data-dial-opt] {
  flex:1; padding:12px 10px; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:13px;
  font-weight:600; color:var(--muted); background:none; border:none; cursor:pointer; text-align:center;
}
.dial-seg [data-dial-opt] + [data-dial-opt] { border-left:1px solid var(--border2); }
.dial-seg [data-dial-opt].on { background:var(--accent-bg); color:#fff; }
.dial-seg [data-dial-opt] .dial-tag { display:block; font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; opacity:0.75; margin-top:2px; }
.dial-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:44px; margin-top:40px; align-items:start; }
.dial-stays { border-top:2px solid var(--rule); padding-top:16px; }
.dial-stays li { font-family:"Newsreader",Georgia,serif; font-size:16.5px; padding:9px 0; border-bottom:1px solid var(--border); list-style:none; }
.dial-stays li::before { content:"✓"; color:var(--accent-text); margin-right:10px; font-family:inherit; }
.dial-stays ul { margin:6px 0 0; padding:0; }
.dial-leaves { border-top:2px solid var(--rule); padding-top:16px; }
.dial-pane { display:none; min-height:150px; }
.dial-pane.on { display:block; animation:dial-fade 0.2s ease; }
@keyframes dial-fade { from { opacity:0.2; } to { opacity:1; } }
.dial-pane-head { font-family:"Newsreader",Georgia,serif; font-size:clamp(30px,3.4vw,40px); font-weight:560; margin:14px 0 6px; }
.dial-pane-sub { font-size:15px; color:var(--muted); }
.dial-cap { display:none; font-size:15px; line-height:1.65; color:var(--body-c); margin:26px 0 0; max-width:760px; }
.dial-cap.on { display:block; }
.dial-invariant { font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:18px; color:var(--ink2); margin:30px 0 0; }
.dial-fine { font-size:13.5px; color:var(--faint); margin:12px 0 0; }

/* audit scanline re-verify sweep */
.audit-row { position:relative; overflow:hidden; }
.audit.cut .audit-row::after {
  content:""; position:absolute; inset:auto 0 0 0; height:1px; background:var(--accent-text);
  animation:sk-scan 0.45s var(--ease-out); opacity:0;
}
.audit.cut .audit-row:nth-child(3)::after { animation-delay:0.05s; }
.audit.cut .audit-row:nth-child(4)::after { animation-delay:0.14s; }
.audit.cut .audit-row:nth-child(5)::after { animation-delay:0.23s; }
.audit.cut .audit-row:nth-child(6)::after { animation-delay:0.32s; }
@keyframes sk-scan { 0% { transform:translateX(-100%); opacity:1; } 100% { transform:translateX(100%); opacity:0; } }

/* FAQ — open list (accordion retired on the landing) */
.faq-open { border-top:1px solid var(--border); padding:24px 0 26px; }
.faq-open h3 { font-size:19px; font-weight:600; margin:0 0 10px; }
.faq-open p { margin:0; font-size:15px; line-height:1.68; color:var(--body-c); max-width:640px; }

/* dictation cards: caption + mobile collapse */
.dict-caption { font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:16px; color:var(--ink2); margin:14px 0 0; text-align:right; }
@media (max-width: 700px) {
  .dict-alt .dict-body { display:none; }
  .dict-caption { text-align:left; }
  .dial-grid { grid-template-columns:1fr; gap:28px; }
  .dial-leaves { order:-1; }
  .dial-seg [data-dial-opt] { font-size:11.5px; padding:10px 6px; }
}

/* ================= CLOSED CIRCUIT v4 — the machine room (2026-08-02) ================= */

/* hero halo — the one area glow on the page */
.hero-grid { position:relative; }
.hero-grid::before {
  content:""; position:absolute; right:-140px; top:-80px; width:1100px; height:760px;
  background:radial-gradient(closest-side, var(--halo), transparent 70%);
  pointer-events:none;
}
.hero-grid > * { position:relative; }

/* the instrument: dark glass panel */
.pipe {
  --text:#E9EDE8; --body-c:#B9C2BA; --muted:#8B968D; --faint:#8B968D; --ink2:#CFD8D0;
  --accent-text:#5CE0A6; --accent2:#E5544B; --gold:#D8B36B; --voice2:#8CB8E6;
  --glow:rgba(92,224,166,0.28); --border2:#243129;
  background:#131B16; border:1px solid #243129; border-radius:14px;
  padding:22px 24px 24px; max-width:500px; color:#CFD8D0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 24px 60px rgba(20,32,25,0.28);
}
.pipe-label { color:var(--muted); }
.trace-line { stroke:var(--accent-text); }
.trace-glow { opacity:0.14; }
.pipe-lines { color:var(--ink2); }
.pl-name { text-shadow:0 0 14px rgba(92,224,166,0.0); }
/* the REC lamp */
.pipe-dot {
  width:10px; height:10px;
  background:radial-gradient(circle at 35% 30%, #fff 0 8%, var(--accent2) 35%, #8A2F28 100%);
  box-shadow:0 0 12px rgba(229,84,75,0.35);
  animation:sk-pulse 2.8s ease-in-out infinite;
}
.pipe-time { color:var(--accent2); }
/* decode effect: resolving characters shimmer */
.pl-msg.decoding { color:var(--muted); }
.pipe.pl-anim .pl-line { opacity:0; transform:translateY(8px); }
.pipe.pl-anim .pl-line.pl-show { opacity:1; transform:none; transition:opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }

/* signal thread — the luminous spine between sections */
.thread-gap { display:flex; justify-content:center; height:150px; overflow:visible; pointer-events:none; margin:-10px 0; }
.thread-gap svg { height:100%; width:220px; overflow:visible; }
.thread-path {
  stroke:var(--accent-text); stroke-width:1.5; fill:none; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:0;
}
.thread-glow { stroke:var(--accent-text); stroke-width:6; opacity:0.10; fill:none; }
.thread-bead { fill:var(--accent-text); }
.thread-bead-halo { fill:var(--accent-text); opacity:0.12; }
.io-wait .thread-path { stroke-dashoffset:100; }
.io-in .thread-path { stroke-dashoffset:0; transition:stroke-dashoffset 0.9s var(--ease-out); }
.io-wait .thread-bead, .io-wait .thread-bead-halo, .io-wait .thread-glow { opacity:0; }
.io-in .thread-bead { opacity:1; transition:opacity 0.4s ease 0.7s; }
.io-in .thread-bead-halo { opacity:0.12; transition:opacity 0.4s ease 0.7s; }
.io-in .thread-glow { opacity:0.10; transition:opacity 0.6s ease 0.3s; }
.thread-gap.io-wait { opacity:1; transform:none; }

/* rules draw in */
.io-wait.rule-top, .io-wait .rule-top, .io-wait.why-col, .io-wait .why-col { border-top-color:transparent; }
.io-in.rule-top, .io-in .rule-top, .io-in.why-col, .io-in .why-col { border-top-color:var(--rule); transition:border-top-color 0.7s var(--ease-out) 0.2s; }

/* dictation keycap + card cycle */
.keycap {
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:60px; border-radius:12px; margin-right:14px;
  background:var(--tint); border:1px solid var(--border3);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:20px; color:var(--ink2);
}
.keycap.pressed { transform:translateY(2px); box-shadow:inset 0 -1px 0 rgba(0,0,0,0.18), 0 0 22px var(--glow); color:var(--accent-text); transition:all 0.15s var(--ease-flip); }
.keycap { transition:all 0.25s var(--ease-flip); }
.dict-card { transition:opacity 0.45s ease, box-shadow 0.45s ease; }
.dict-card.dim { opacity:0.78; }
.dict-card.lit { box-shadow:inset 1px 0 0 var(--halo), 0 0 30px var(--glow); }

/* verify band = the darkest room; breaker v2 */
.band { box-shadow:inset 0 1px 0 rgba(255,255,255,0.03); }
.nd-enclosure { stroke:var(--band-body); fill:rgba(92,224,166,0.03); stroke-width:1.6; }
.nd-packet { fill:var(--accent-text); }
.nd-packet-halo { fill:var(--accent-text); opacity:0.15; }
.nd-breaker line { stroke:var(--band-accent); stroke-width:1.8; stroke-linecap:round; }
.nd-breaker .nd-arm { transform-origin:0px 0px; transition:transform 0.22s var(--ease-flip); }
.audit-scene.cut .nd-breaker .nd-arm { transform:rotate(-28deg); }
.audit-scene.cut .nd-outwire { opacity:0.35; transition:opacity 0.3s ease; }
.nd-cloud { stroke-dasharray:4 6; opacity:0.35; }
@media (prefers-reduced-motion: reduce) { .nd-packet, .nd-packet-halo { display:none; } }

/* the ledger glows quietly */
.audit-val.ok { text-shadow:0 0 16px var(--glow); }

/* pricing: keep-mark + strike draw */
.keep-mark { display:block; }
.keep-mark .km-doc { transition:transform 0.7s var(--ease-out) 0.3s; }
.io-in .keep-mark .km-doc { transform:translateY(9px); }
.strike-draw { position:relative; }
.strike-draw::after {
  content:""; position:absolute; left:-4%; top:52%; height:1.5px; width:0; background:var(--accent2);
}
.io-in .strike-draw::after { width:108%; transition:width 0.35s var(--ease-flip) 0.4s; }
.strike-draw { text-decoration:none !important; }

/* dial on dark glass */
.dial-seg { box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); }
.dial-seg [data-dial-opt].on { background:var(--accent-bg); color:var(--on-accent); }
.dial-pane-head { text-shadow:0 0 30px var(--glow); }

/* founder: giant quote glyph */
.founder-sec { position:relative; }
.founder-sec::before {
  content:"“"; position:absolute; left:50%; top:36px; transform:translateX(-50%);
  font-family:"Newsreader",Georgia,serif; font-size:240px; line-height:1; color:var(--accent-text);
  opacity:0.07; pointer-events:none;
}

/* final CTA bookend */
.cta-bookend { background:var(--footer); border-top:1px solid var(--band-line); }

@media (max-width: 920px) {
  .hero-grid::before { right:-200px; top:auto; bottom:-120px; width:800px; height:600px; }
  .thread-gap { height:100px; }
}

/* ============ v4.1 smoothness pass (2026-08-02): zero-reflow word landing, soft loops ============ */

/* words materialize — layout is locked before animation, so nothing ever reflows */
.pl-msg .w, .dict-body .w {
  display:inline-block; opacity:0; filter:blur(6px); transform:translateY(4px);
}
.pl-msg .w.w-in, .dict-body .w.w-in {
  opacity:1; filter:blur(0); transform:none;
  transition:opacity 0.38s var(--ease-out), filter 0.38s var(--ease-out), transform 0.38s var(--ease-out);
}

/* soft loop reset: the instrument exhales instead of blinking */
.pipe .pipe-lines, .pipe .pipe-note { transition:opacity 0.4s ease; }
.pipe.pl-fade .pipe-lines, .pipe.pl-fade .pipe-note { opacity:0; }

/* hero entrance — once, on load */
@keyframes hero-in { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.hero-grid > div:first-child > h1 { animation:hero-in 0.7s var(--ease-out) 0.05s backwards; }
.hero-grid > div:first-child > .hero-sub { animation:hero-in 0.7s var(--ease-out) 0.16s backwards; }
.hero-grid > div:first-child > .hero-ctas { animation:hero-in 0.7s var(--ease-out) 0.27s backwards; }
.hero-grid > div:first-child > .hero-micro { animation:hero-in 0.7s var(--ease-out) 0.36s backwards; }
.hero-grid .pipe { animation:hero-in 0.85s var(--ease-out) 0.22s backwards; }

/* the halo breathes — barely */
@keyframes halo-breathe { 0%,100% { opacity:0.8; transform:scale(1); } 50% { opacity:1; transform:scale(1.05); } }
.hero-grid::before { animation:halo-breathe 9s ease-in-out infinite; transform-origin:60% 40%; }

/* staggered rule draws in the why row */
.io-in .why-col:nth-child(2) { transition-delay:0.14s; }
.io-in .why-col:nth-child(3) { transition-delay:0.28s; }

/* buttons press */
.btn:active { transform:scale(0.985); }

/* ---- the living meeting: active-speaker sync (v4.2) ---- */
.mtile { transition:outline-color 0.25s ease, box-shadow 0.35s ease; outline:1.5px solid transparent; outline-offset:-1px; }
.mtile.speaking { outline-color:var(--accent-text); box-shadow:0 0 26px rgba(92,224,166,0.14); }
[data-mtg].m-anim .pl-line { opacity:0; transform:translateY(6px); }
[data-mtg].m-anim .pl-line.pl-show { opacity:1; transform:none; transition:opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
[data-mtg] > div { transition:opacity 0.4s ease; }
[data-mtg].m-fade > div { opacity:0; }

/* ---- the factory under glass (v4.3): rails, chips, station pulses ---- */
.nd-rail { stroke:rgba(92,224,166,0.16); stroke-width:1.2; }
.nd-rail-soft { stroke:rgba(92,224,166,0.10); }
.nd-src { fill:var(--accent-text); }
.nd-src2 { fill:var(--voice2); }
.nd-src { animation:sk-pulse 2.4s ease-in-out infinite; }
.nd-src2 { animation:sk-pulse 2.4s ease-in-out 1.2s infinite; }
.nd-tag { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:9.5px; letter-spacing:0.14em; fill:var(--band-muted); }
.nd-chip { stroke:var(--band-body); fill:rgba(92,224,166,0.05); stroke-width:1.3; }
.nd-chipwave { stroke:var(--accent-text); fill:none; stroke-width:1.2; opacity:0.8; }
.nd-station { animation:nd-pulse 9s ease-in-out infinite; }
.nd-st1 { animation-delay:-7.7s; }
.nd-st2 { animation-delay:-6.9s; }
.nd-st3 { animation-delay:-6.1s; }
@keyframes nd-pulse { 0%, 100% { opacity:0.72; } 14% { opacity:0.72; } 17% { opacity:1; } 24% { opacity:0.72; } }
.nd-feedpkt { fill:var(--voice2); }
@media (prefers-reduced-motion: reduce) { .nd-feedpkt { display:none; } }

/* thread beads keep breathing after the draw — the spine stays alive */
@keyframes bead-breathe { 0%,100% { opacity:0.10; } 50% { opacity:0.22; } }
.io-in .thread-bead-halo { animation:bead-breathe 3.4s ease-in-out 1.4s infinite; }

/* ?motion=off — settled-state freeze for screenshot verification */
.sk-still * { animation:none !important; transition:none !important; }
.sk-still .io-wait { opacity:1 !important; transform:none !important; }

/* ---- the living folder (v5.1): what lands on disk while the call runs ---- */
.frow { display:flex; align-items:baseline; gap:10px; padding:7px 2px; border-radius:6px; transition:background 0.3s ease; }
.fname { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:13px; color:#E8EAED; }
.fnote { font-size:11.5px; color:#6E747D; }
.flead { flex:1; border-bottom:1px dotted #2A2E35; transform:translateY(-3px); }
.fsize { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12px; color:#8B919A; transition:color 0.25s ease; }
.frow.hot { background:rgba(92,224,166,0.06); }
.frow.hot .fsize { color:#7BC4A0; }
.frow.hot .fname { color:#7BC4A0; }
[data-mtg].m-anim .frow-late { opacity:0; transform:translateY(5px); transition:opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); }
[data-mtg].m-anim .frow-late.on { opacity:1; transform:none; }
.mtg-caption { font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:16.5px; color:var(--ink2); margin:0; text-align:right; }
@media (max-width:700px) { .mtg-caption { text-align:left; } }

/* inside the call scene, the speaking ring speaks the app's mint */
[data-mtg-scene] { --accent-text:#5CE0A6; --glow:rgba(92,224,166,0.22); }

/* meeting ended: the lamp goes quiet, then the pipeline produces its files */
[data-mtg-scene].m-ended .mrec-dot { animation:none !important; background:#8B919A !important; }
[data-mtg-scene].m-ended [data-mtg-time] { color:#8B919A !important; }

/* ============ v5.5 mobile pass ============ */
/* no horizontal drift, ever — the halo was pushing the page wide on phones */
html, body { overflow-x:hidden; }
@media (max-width: 920px) {
  .hero-grid::before { display:none; }
}
@media (max-width: 700px) {
  /* the factory keeps its detail; the column scrolls instead of shrinking it to fuzz */
  .audit-scene > div:first-child { overflow-x:auto; padding-bottom:6px; }
  .net-diagram { min-width:560px; }
  /* ledger + folder rows: drop the annotations, keep name/leader/value */
  .fnote { display:none; }
  .audit-row { font-size:14.5px; gap:8px; }
  .pipe { padding:18px 16px 20px; }
  .pipe-lines { font-size:15.5px; }
  .keycap { width:54px; height:50px; }
  .tests-grid { gap:16px; }
  .hero-ctas { gap:14px; }
  .h1-hero { font-size:clamp(34px,9.6vw,40px); }
}
@media (max-width: 420px) {
  .dial-seg [data-dial-opt] { font-size:10.5px; padding:9px 4px; letter-spacing:0; }
  .fname { font-size:12px; }
  .fsize { font-size:11px; }
}

@media (max-width: 700px) {
  .dial-pane { min-height:0; }
  .strip { flex-direction:column; gap:6px; }
  .strip-item + .strip-item::before { content:none; }
}

@media (max-width: 920px) {
  /* the instrument fills its column — end-alignment was shoving it off-edge on phones */
  .pipe { justify-self:stretch; max-width:none; }
  .dict-card.dim { opacity:1; }
}