/* EthersFlow redesign system — grounded in live tokens + logo spiral */
:root{
  --bg:#FFFFFF; --ink:#1D1D1F; --muted:#787F88;
  --verdict:#4F39F6; --hair:#E5E7EB; --soft:#F9FAFB;
  --nav-bg:rgba(255,255,255,.92); --drawer-bg:rgba(255,255,255,0.98);
  --g1:#31346B; --g2:#7B2FBE; --g3:#C724E8;
  --ease:cubic-bezier(0.22,1,0.36,1);
}

html[data-theme="dark"], html.dark, body.dark-mode {
  --bg:#0B0F17; --ink:#F3F4F6; --muted:#9CA3AF;
  --hair:#222C3A; --soft:#131A27;
  --nav-bg:rgba(11,15,23,.92); --drawer-bg:rgba(11,15,23,0.98);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--verdict); color:#fff}
a{color:inherit}

/* ---------- nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 48px; border-bottom:1px solid var(--hair);
  background:var(--nav-bg); backdrop-filter:blur(12px);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
nav .brand{display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:700; letter-spacing:.08em; font-size:13px}
nav .brand img{height:34px; width:auto; display:block; object-fit:contain}
.brand-text{
  background:linear-gradient(135deg, #31346B 0%, #7B2FBE 55%, #C724E8 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  font-weight:800; letter-spacing:.06em;
}
nav .links{display:flex; align-items:center; gap:20px}
nav .links a.plain{color:var(--ink); text-decoration:none; font-size:13px; opacity:.85; font-weight:500; transition:opacity .3s var(--ease), color .3s}
nav .links a.plain:hover{opacity:1; color:var(--verdict)}
.btn{
  display:inline-block; text-decoration:none; font-size:14px; font-weight:600;
  padding:12px 24px; border-radius:16px; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn.primary{
  background:linear-gradient(135deg, #4F39F6 0%, #7B2FBE 100%);
  color:#fff; box-shadow:0 4px 16px rgba(79,57,246,.25);
}
.btn.primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(123,47,190,.32)}
.btn.ghost{border:1px solid var(--hair); color:var(--ink); background:var(--bg)}
.btn.ghost:hover{border-color:var(--verdict); color:var(--verdict)}
.btn.small{padding:9px 18px; font-size:13px}

/* Theme toggle button */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:12px; border:1px solid var(--hair);
  background:var(--soft); color:var(--ink); cursor:pointer;
  transition:all .22s var(--ease); padding:0; outline:none; flex-shrink:0;
}
.theme-toggle:hover{
  border-color:var(--verdict); color:var(--verdict);
  transform:translateY(-1px); box-shadow:0 4px 12px rgba(79,57,246,.18);
}
.theme-toggle .sun-icon{ display:none; }
.theme-toggle .moon-icon{ display:block; }

html[data-theme="dark"] .theme-toggle .sun-icon,
html.dark .theme-toggle .sun-icon,
body.dark-mode .theme-toggle .sun-icon { display:block; }

html[data-theme="dark"] .theme-toggle .moon-icon,
html.dark .theme-toggle .moon-icon,
body.dark-mode .theme-toggle .moon-icon { display:none; }

.mobile-theme-toggle{
  width:100%; height:46px; padding:0 16px; justify-content:space-between;
  border-radius:14px; margin-top:4px; margin-bottom:4px;
}

/* Mobile menu toggle button */
.mobile-menu-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:40px; height:40px; border-radius:10px; border:1px solid var(--hair);
  background:var(--soft); cursor:pointer; padding:8px; z-index:60;
}
.mobile-menu-toggle .bar-line{
  display:block; width:20px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.mobile-menu-toggle.active .bar-line:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.mobile-menu-toggle.active .bar-line:nth-child(2){ opacity:0; }
.mobile-menu-toggle.active .bar-line:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer dropdown */
.mobile-drawer{
  display:none; position:fixed; top:63px; left:0; right:0;
  background:var(--drawer-bg); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hair); padding:20px 24px 28px; z-index:49;
  box-shadow:0 20px 40px rgba(0,0,0,0.15); flex-direction:column; gap:14px;
  transform:translateY(-10px); opacity:0; pointer-events:none;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.mobile-drawer.open{
  display:flex; transform:translateY(0); opacity:1; pointer-events:auto;
}
.mobile-nav-link{
  font-size:16px; font-weight:600; color:var(--ink); text-decoration:none;
  padding:10px 0; border-bottom:1px solid var(--hair);
}
.mobile-nav-link:hover{ color:var(--verdict); }
.mobile-cta{
  text-align:center; padding:14px; font-size:15px; width:100%; margin-top:8px;
}

@media(max-width:860px){
  nav{padding:12px 20px}
  nav .links.desktop-links{display:none}
  .mobile-menu-toggle{display:flex}
}

.gradient-text{
  background:linear-gradient(135deg, #1D1D1F 20%, #4F39F6 65%, #7B2FBE 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* ---------- spiral signature (logo-derived) ---------- */
.spiral {
  width: var(--s, 150px); height: var(--s, 150px); overflow: visible; display: block;
}
.spiral .arc {
  fill: none; stroke: url(#efg); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.4s var(--ease);
}
.spiral .arc.thin { stroke-width: 1.6; }
.spiral .node {
  fill: url(#efg); opacity: 0; transform: scale(0);
  transform-origin: 100px 100px; transform-box: view-box;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.spiral.drawn .arc {
  animation: arc 1.6s var(--ease) forwards;
  animation-delay: calc(var(--i) * 160ms);
}
.spiral.drawn .node {
  animation: pop .5s var(--ease) forwards;
  animation-delay: calc(1.4s + var(--i) * 120ms);
}

@keyframes arc { to { stroke-dashoffset: 0; } }
@keyframes pop {
  0% { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}

.spin { transform-origin: 100px 100px; transform-box: view-box; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media(prefers-reduced-motion:reduce){
  .spiral, .spin { animation: none!important }
  .spiral .arc { stroke-dashoffset: 0!important }
  .spiral .node { opacity: 1!important; transform: scale(1)!important }
}

/* ---------- hero ---------- */
.hero{min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:140px 48px 80px}
.kicker{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:28px}
.hero h1{font-size:clamp(40px,7.2vw,104px); line-height:1.06; font-weight:600; letter-spacing:-.03em; max-width:18ch}
.hero-caret{
  display:inline-block;
  width:4px;
  height:0.85em;
  background:linear-gradient(135deg, #7B2FBE 0%, #C724E8 100%);
  margin-left:6px;
  vertical-align:baseline;
  border-radius:2px;
  animation:blink 1s infinite;
}
.hero .spiral{--s:130px; margin-top:44px}
.hero .cta-row{display:flex; gap:16px; margin-top:56px; flex-wrap:wrap}
.pills{display:flex; gap:12px; margin-top:40px; flex-wrap:wrap}
.pill{font-size:12.5px; color:var(--muted); border:1px solid var(--hair); border-radius:999px; padding:8px 16px}
@media(max-width:720px){.hero{padding:90px 20px 40px; min-height:auto} .hero-caret{width:3px}}

/* ---------- agent sentence completion (glitch-free locked geometry) ---------- */
.agent-completion-container{
  width:100%; max-width:760px; margin:28px 0 16px;
}
.agent-terminal-card{
  height:94px; min-height:94px; max-height:94px; box-sizing:border-box;
  padding:14px 20px; border-radius:16px;
  background:linear-gradient(135deg, rgba(255,255,255,0.98), rgba(246,244,255,0.9));
  border:1px solid rgba(123,47,190,0.22);
  box-shadow:0 12px 32px -8px rgba(79,57,246,0.12), 0 2px 6px rgba(0,0,0,0.03);
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
.agent-terminal-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px; font-size:11px; letter-spacing:.12em;
}
.agent-badge{
  display:inline-flex; align-items:center; gap:6px; color:#4F39F6; font-weight:700; text-transform:uppercase;
}
.live-pulse{
  width:7px; height:7px; border-radius:50%; background:#10B981;
  box-shadow:0 0 0 0 rgba(16,185,129,0.7);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,0.7)}
  70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}
.agent-status-label{
  color:var(--muted); font-size:11px; font-family:ui-monospace,Menlo,monospace;
}
.agent-sentence-box{
  height:36px; min-height:36px; max-height:36px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  overflow:hidden;
}
.agent-text-wrap{
  display:flex; align-items:center; gap:8px; overflow:hidden; white-space:nowrap; flex:1; min-width:0;
}
.agent-prefix{
  font-family:ui-monospace,Menlo,monospace; font-size:12px; font-weight:700;
  color:#7B2FBE; letter-spacing:.06em; flex-shrink:0;
}
.agent-typed-sentence{
  font-family:ui-monospace,Menlo,monospace; font-size:clamp(12px,1.2vw,14px);
  color:var(--ink); font-weight:500; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
.agent-caret{
  display:inline-block; width:2px; height:15px; background:var(--verdict);
  margin-left:3px; vertical-align:middle; animation:blink 1s infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0} }
.agent-verdict-pill{
  flex-shrink:0; font-size:11px; font-weight:800; letter-spacing:.12em;
  padding:5px 12px; border-radius:8px; text-transform:uppercase;
  transition:all .3s var(--ease);
}
.agent-verdict-pill.flagged{
  background:#FFFBEB; color:#D97706; border:1px solid #FDE68A;
}
.agent-verdict-pill.rejected{
  background:#FEF2F2; color:#DC2626; border:1px solid #FECACA;
}
.agent-verdict-pill.approved{
  background:#ECFDF5; color:#059669; border:1px solid #A7F3D0;
}

@media(max-width:720px){
  .hero{padding:90px 20px 40px; min-height:auto}
  .hero h1{font-size:clamp(32px, 8.5vw, 54px); max-width:100%}
  .hero .spiral{--s:100px; margin:24px auto 0}
  .agent-terminal-card{height:104px; min-height:104px; max-height:104px; padding:10px 14px}
  .agent-sentence-box{height:46px; min-height:46px; max-height:46px; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px}
  .agent-typed-sentence{font-size:12px}
  .hero .cta-row{width:100%; flex-direction:column; gap:12px}
  .hero .cta-row .btn{width:100%; text-align:center}
  
  /* Mobile pinned verdict sequence */
  .seq-wrap{height:280vh}
  .seq-sticky{top:58px; height:calc(100vh - 58px); padding:10px}
  .action-card{width:100%; padding:22px 16px; margin:auto}
  .action-card h3{font-size:19px; line-height:1.3}
  .action-card .meta{margin-bottom:18px; font-size:12.5px}
  .halt{left:-20px; right:-20px}
  .gate-note{font-size:11px; padding:6px 12px; transform:translate(-50%,-50%) translateY(-36px)}
  .phase-dots{bottom:16px}
}

/* ---------- statement beats ---------- */
.beat{min-height:90vh; display:flex; align-items:center; padding:0 48px;
  opacity:0; transform:translateY(40px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.beat.visible{opacity:1; transform:none}
.beat h2{font-size:clamp(34px,5vw,68px); font-weight:600; letter-spacing:-.025em; line-height:1.1; max-width:20ch}
.beat.exam{display:grid; grid-template-columns:1fr auto 1fr; gap:32px; align-items:center}
.qline{font-size:clamp(15px,1.4vw,20px); color:var(--muted); font-weight:500; padding:14px 0; white-space:nowrap;
  opacity:0; transition:opacity .7s var(--ease), transform .7s var(--ease)}
.beat.exam .left .qline{text-align:right}
.beat.exam.visible .qline{opacity:1; transform:none}
.beat.exam.visible .qline:nth-child(1){transition-delay:.15s}
.beat.exam.visible .qline:nth-child(2){transition-delay:.35s}
.beat.exam.visible .qline:nth-child(3){transition-delay:.55s}
.claim{text-align:center; font-size:clamp(20px,2.4vw,32px); font-weight:600; letter-spacing:-.02em;
  padding:24px 32px; border:1px solid var(--hair); border-radius:16px; min-width:220px}
.claim .amt{display:block; font-size:11px; color:var(--muted); font-weight:500; letter-spacing:.12em; margin-bottom:8px; text-transform:uppercase}
.stream{display:flex; flex-direction:column; gap:16px; margin-top:40px; width:min(560px,80vw)}
.sline{display:flex; justify-content:space-between; align-items:center; font-size:15px; color:var(--muted);
  border-bottom:1px solid var(--hair); padding-bottom:13px; opacity:0; transform:translateX(24px);
  transition:opacity .6s var(--ease), transform .6s var(--ease)}
.beat.visible .sline{opacity:1; transform:none}
.beat.visible .sline:nth-child(n){transition-delay:calc(var(--i)*90ms)}
.sline .state{font-size:11px; letter-spacing:.14em}
.sline.no{color:var(--ink); font-weight:600; border-bottom-color:var(--verdict)}
.sline.no .state{color:#fff; background:var(--verdict); padding:4px 10px; border-radius:6px; text-decoration:line-through}
@media(max-width:860px){
  .beat{padding:0 20px; min-height:70vh}
  .beat.exam{grid-template-columns:1fr}
  .beat.exam .left .qline{text-align:left}
  .beat.exam .qline{white-space:normal}
}

/* ---------- pinned verdict sequence ---------- */
.seq-wrap{height:340vh}
.seq-sticky{position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden}
.action-card{width:min(560px,88vw); border:1px solid var(--hair); border-radius:16px; padding:40px; position:relative; background:#fff}
.action-card .label{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:24px}
.action-card h3{font-size:clamp(22px,2.4vw,30px); font-weight:600; letter-spacing:-.02em; margin-bottom:6px}
.action-card .meta{font-size:14px; color:var(--muted); margin-bottom:32px}
.action-card .meta code{font-family:ui-monospace,Menlo,monospace; font-size:12px}
.runbtn{width:100%; padding:16px; border:0; border-radius:16px; cursor:default; background:var(--verdict);
  color:#fff; font-size:15px; font-weight:600; font-family:inherit; position:relative; overflow:hidden}
.runbtn .bar{position:absolute; inset:0; width:0%; background:rgba(255,255,255,.25)}
.halt{position:absolute; left:-48px; right:-48px; top:50%; height:2px; background:var(--verdict);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease)}
.seq-sticky.phase2 .halt{transform:scaleX(1)}
.gate-note{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) translateY(-44px);
  background:#fff; padding:8px 18px; font-size:12px; letter-spacing:.08em; color:var(--verdict);
  white-space:nowrap; opacity:0; transition:opacity .5s var(--ease) .4s}
.seq-sticky.phase2 .gate-note{opacity:1}
.reviewers{display:none; margin-top:28px; flex-direction:column; gap:12px}
.seq-sticky.phase3 .reviewers,.seq-sticky.phase4 .reviewers{display:flex}
.rev{display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--muted);
  opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.seq-sticky.phase3 .rev:nth-child(1){opacity:1; transform:none; transition-delay:.05s}
.seq-sticky.phase3 .rev:nth-child(2){opacity:1; transform:none; transition-delay:.3s}
.seq-sticky.phase3 .rev:nth-child(3){opacity:1; transform:none; transition-delay:.55s}
.seq-sticky.phase3 .rev:nth-child(4){opacity:1; transform:none; transition-delay:.8s}
.rev .mark{font-size:11px; letter-spacing:.12em}
.rev .flag{color:var(--ink); font-weight:600}
.stamp{position:absolute; top:-28px; right:-20px; border:3px solid var(--verdict); color:var(--verdict);
  font-weight:800; letter-spacing:.22em; font-size:clamp(18px,2vw,26px); padding:12px 28px; border-radius:10px;
  transform:rotate(8deg) scale(2.4); opacity:0; background:rgba(255,255,255,.92);
  transition:opacity .45s var(--ease), transform .45s var(--ease)}
.seq-sticky.phase4 .stamp{opacity:1; transform:rotate(8deg) scale(1)}
.sigline{display:none; margin-top:24px; align-items:center; gap:16px}
.seq-sticky.phase4 .sigline{display:flex}
.sigline .spiral{--s:64px}
.sigline .code{font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--verdict)}
.phase-dots{position:absolute; bottom:40px; left:50%; transform:translateX(-50%); display:flex; gap:10px}
.phase-dots span{width:8px; height:8px; border-radius:50%; background:var(--hair);
  transition:background .4s var(--ease), transform .4s var(--ease)}
.phase-dots span.on{background:var(--verdict); transform:scale(1.25)}

/* ---------- fork ---------- */
.fork{padding:200px 48px; text-align:center}
.fork h2{font-size:clamp(30px,4.2vw,56px); font-weight:600; letter-spacing:-.025em; margin-bottom:100px}
.lanes{display:flex; gap:80px; justify-content:center; flex-wrap:wrap}
.lane{max-width:420px; transition:transform 1s var(--ease)}
.lane h3{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:24px}
.lane p{font-size:clamp(21px,2.1vw,28px); font-weight:600; letter-spacing:-.02em; line-height:1.35; margin-bottom:28px}
.lane a{color:var(--ink); font-size:14px; text-decoration:none; border-bottom:1px solid var(--hair); padding-bottom:2px}
.lane a:hover{color:var(--verdict); border-bottom-color:var(--verdict)}
.fork.visible .lane.teams{transform:translateX(-24px)}
.fork.visible .lane.agents{transform:translateX(24px)}
@media(max-width:860px){
  .fork{padding:120px 20px}
  .fork.visible .lane.teams,.fork.visible .lane.agents{transform:none}
  .lanes{gap:64px}
}

/* ---------- numbered editorial sections (live-site convention) ---------- */
.editorial{padding:160px 48px}
.editorial .sec-head{max-width:900px; margin-bottom:90px}
.editorial h2{font-size:clamp(32px,4.4vw,58px); font-weight:600; letter-spacing:-.025em; line-height:1.12; margin-top:24px}
.editorial .lede{font-size:clamp(17px,1.6vw,22px); color:var(--muted); line-height:1.6; margin-top:28px; max-width:62ch}
.rows{border-top:1px solid var(--hair)}
.row{display:grid; grid-template-columns:120px 1fr 1.2fr; gap:40px; padding:44px 0; border-bottom:1px solid var(--hair); align-items:baseline}
.row .num{font-size:13px; letter-spacing:.14em; color:var(--muted); font-family:ui-monospace,Menlo,monospace}
.row h3{font-size:clamp(20px,2vw,28px); font-weight:600; letter-spacing:-.02em}
.row p{font-size:16px; color:var(--muted); line-height:1.6}
.row.hot .num,.row.hot h3{color:var(--verdict)}
.row.hot p{color:var(--ink)}
.row .who{font-size:12px; letter-spacing:.06em; color:var(--muted); margin-top:10px}
@media(max-width:860px){
  .editorial{padding:100px 20px}
  .row{grid-template-columns:1fr; gap:12px}
}

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:80px}
.plan{border:1px solid var(--hair); border-radius:16px; padding:44px 36px; position:relative; transition:transform .4s var(--ease)}
.plan:hover{transform:translateY(-6px)}
.plan.popular{border-color:var(--verdict)}
.plan .ptag{position:absolute; top:-12px; left:32px; background:var(--verdict); color:#fff; font-size:11px;
  letter-spacing:.14em; padding:5px 12px; border-radius:999px}
.plan h3{font-size:22px; font-weight:600; letter-spacing:-.02em; margin-bottom:8px}
.plan .desc{font-size:14px; color:var(--muted); margin-bottom:28px; line-height:1.5; min-height:42px}
.plan .price{font-size:clamp(36px,3.4vw,48px); font-weight:700; letter-spacing:-.03em}
.plan .price small{font-size:14px; color:var(--muted); font-weight:500; letter-spacing:0}
.plan ul{list-style:none; margin:32px 0 36px; display:flex; flex-direction:column; gap:12px}
.plan li{font-size:14.5px; color:var(--ink); padding-left:24px; position:relative}
.plan li::before{content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg,var(--g1),var(--g3))}
.plan .btn{width:100%; text-align:center}
.grid-table{width:100%; border-collapse:collapse; margin-top:80px; font-size:14px}
.grid-table th,.grid-table td{border:1px solid var(--hair); padding:16px 18px; text-align:left; vertical-align:top}
.grid-table th{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--soft)}
.grid-table td:first-child{font-weight:600; width:22%}
@media(max-width:960px){.plans{grid-template-columns:1fr}.grid-table{display:block; overflow-x:auto}}

/* ---------- developers ---------- */
.codecard{border:1px solid var(--hair); border-radius:16px; overflow:hidden; margin-top:64px}
.codecard .tabs{display:flex; gap:4px; border-bottom:1px solid var(--hair); padding:12px 12px 0; flex-wrap:wrap}
.codecard .tabs button{border:0; background:none; font-family:inherit; font-size:13px; font-weight:600; color:var(--muted);
  padding:10px 18px; cursor:pointer; border-radius:12px 12px 0 0; transition:color .3s var(--ease)}
.codecard .tabs button.on{color:var(--verdict); background:var(--soft)}
.codecard pre{background:#0D0D1A; color:#D6D6E8; padding:32px; font-family:ui-monospace,Menlo,monospace;
  font-size:13px; line-height:1.7; overflow-x:auto}
.codecard pre .c{color:#6B6B8F}
.codecard pre .k{color:#C724E8}
.codecard pre .s{color:#8FD3A8}
.dev-feats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:80px}
.dev-feat{border:1px solid var(--hair); border-radius:16px; padding:36px 30px}
.dev-feat h3{font-size:18px; font-weight:600; margin-bottom:12px}
.dev-feat p{font-size:14.5px; color:var(--muted); line-height:1.6}
.dev-feat code{font-family:ui-monospace,Menlo,monospace; font-size:12px; background:var(--soft); padding:2px 6px; border-radius:6px}
.badge{display:inline-block; font-size:11px; letter-spacing:.12em; border:1px solid var(--hair); border-radius:999px;
  padding:6px 14px; color:var(--muted); margin-bottom:28px; font-family:ui-monospace,Menlo,monospace}
@media(max-width:960px){.dev-feats{grid-template-columns:1fr}}

/* ---------- receipt + restored comprehensive footer ---------- */
.receipt-sec{padding:140px 48px 100px; display:flex; flex-direction:column; align-items:center}
.receipt{width:min(560px,88vw); border:1px solid var(--hair); border-radius:16px; padding:40px; background:#fff; box-shadow:0 8px 30px rgba(0,0,0,0.03)}
.receipt .rrow{display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--hair); font-size:14px}
.receipt .rrow:last-of-type{border-bottom:0}
.receipt .k{color:var(--muted); letter-spacing:.08em; font-size:12px; text-transform:uppercase}
.receipt .v{font-family:ui-monospace,Menlo,monospace; font-size:13px}
.receipt .v.vd{color:var(--verdict); font-weight:700; letter-spacing:.12em}
.receipt .rsig{margin-top:20px; display:flex; justify-content:center}
.closing{margin-top:100px; font-size:clamp(28px,4.2vw,54px); font-weight:600; letter-spacing:-.025em; text-align:center; max-width:22ch}

footer{
  padding:80px 48px 40px; border-top:1px solid var(--hair);
  background:linear-gradient(180deg, #FFFFFF 0%, #FAF9FE 100%);
}
.footer-container{max-width:1200px; margin:0 auto}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; margin-bottom:60px;
}
.footer-brand{display:flex; flex-direction:column; gap:16px}
.footer-brand-header{display:flex; align-items:center; gap:12px; text-decoration:none}
.footer-brand-header img{height:32px; width:auto}
.footer-brand-title{
  font-weight:800; font-size:15px; letter-spacing:.06em;
  background:linear-gradient(135deg, #31346B 0%, #7B2FBE 55%, #C724E8 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.footer-tagline{
  color:var(--muted); font-size:13.5px; line-height:1.6; max-width:320px;
}
.footer-badge{
  display:inline-flex; align-items:center; gap:8px; width:fit-content;
  font-size:11.5px; font-weight:600; color:var(--verdict);
  background:rgba(79,57,246,0.06); border:1px solid rgba(79,57,246,0.18);
  padding:4px 12px; border-radius:999px;
}
.footer-col h4{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  margin-bottom:18px; font-weight:700;
}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap:11px; padding:0; margin:0}
.footer-col a{
  color:var(--muted); font-size:13.5px; text-decoration:none; transition:color .2s;
}
.footer-col a:hover{color:var(--verdict)}
.footer-bottom{
  padding-top:32px; border-top:1px solid var(--hair);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  font-size:12px; color:var(--muted);
}
.footer-bottom-links{display:flex; gap:20px}
.footer-bottom-links a{color:var(--muted); text-decoration:none; transition:color .2s}
.footer-bottom-links a:hover{color:var(--verdict)}

@media(max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:36px}
  .footer-brand{grid-column:span 2}
}
@media(max-width:640px){
  footer{padding:50px 20px 30px}
  .footer-grid{grid-template-columns:1fr; gap:28px}
  .footer-brand{grid-column:span 1}
  .footer-bottom{flex-direction:column; align-items:flex-start; gap:12px}
}

/* ---------- reveal + reduced motion ---------- */
.reveal{opacity:0; transform:translateY(32px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.visible{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
  .beat,.qline,.sline,.rev,.reveal{opacity:1!important; transform:none!important}
  .spiral .arc{stroke-dashoffset:0!important}
  .spiral .node{opacity:1!important; transform:none!important}
  .seq-wrap{height:auto}
  .seq-sticky{position:relative; height:auto; padding:120px 0}
  .reviewers,.sigline{display:flex!important}
  .stamp{opacity:1!important; transform:rotate(8deg)!important}
  .halt{transform:scaleX(1)!important}
  .gate-note{opacity:1!important}
}

/* ---------- interactive developer hub & tabs ---------- */
.dev-nav-tabs{display:flex; gap:8px; border-bottom:1px solid var(--hair); margin:40px 0 32px; overflow-x:auto; padding-bottom:2px}
.dev-tab-btn{border:0; background:none; font-family:inherit; font-size:14px; font-weight:600; color:var(--muted);
  padding:12px 20px; cursor:pointer; border-radius:12px 12px 0 0; transition:all .25s var(--ease); white-space:nowrap}
.dev-tab-btn:hover{color:var(--ink); background:var(--soft)}
.dev-tab-btn.active{color:var(--verdict); background:#fff; border-bottom:2px solid var(--verdict)}
.dev-section{display:none}
.dev-section.active{display:block; animation:fadeIn .3s var(--ease)}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* metric chip bar */
.metric-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:32px 0 48px}
.metric-box{border:1px solid var(--hair); border-radius:16px; padding:20px; background:#fff}
.metric-box .label{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.metric-box .val{font-size:20px; font-weight:700; color:var(--ink)}

/* form controls */
.ef-card{border:1px solid var(--hair); border-radius:20px; padding:32px; background:#fff; margin-bottom:28px}
.ef-label{display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:8px}
.ef-input,.ef-select,.ef-textarea{width:100%; padding:14px 18px; border:1px solid var(--hair); border-radius:12px;
  font-family:inherit; font-size:14px; color:var(--ink); background:#fff; transition:border-color .2s}
.ef-input:focus,.ef-select:focus,.ef-textarea:focus{outline:none; border-color:var(--verdict); box-shadow:0 0 0 3px rgba(79,57,246,.12)}
.ef-textarea{min-height:90px; resize:vertical}

/* scenario quick chips */
.scenario-list{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px}
.scenario-chip{border:1px solid var(--hair); background:#fff; font-size:12px; font-weight:500; padding:8px 14px;
  border-radius:999px; cursor:pointer; transition:all .2s; color:var(--muted)}
.scenario-chip:hover{border-color:var(--ink); color:var(--ink)}
.scenario-chip.active{background:var(--soft); border-color:var(--verdict); color:var(--verdict); font-weight:600}

/* sandbox verdict panel */
.verdict-box{border:1px solid var(--hair); border-radius:16px; padding:28px; background:var(--soft); margin-top:24px}
.verdict-header{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:20px}
.verdict-tag{font-size:13px; font-weight:800; letter-spacing:.16em; padding:8px 20px; border-radius:999px; text-transform:uppercase}
.verdict-tag.approved{background:#ECFDF5; color:#059669; border:1px solid #A7F3D0}
.verdict-tag.flagged{background:#FFFBEB; color:#D97706; border:1px solid #FDE68A}
.verdict-tag.rejected{background:#FEF2F2; color:#DC2626; border:1px solid #FECACA}

.stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0}
.stat-card{background:#fff; border:1px solid var(--hair); border-radius:12px; padding:16px; text-align:center}
.stat-card .s-lbl{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--muted)}
.stat-card .s-val{font-size:22px; font-weight:800; margin-top:4px}

.debate-nodes{margin-top:20px; display:flex; flex-direction:column; gap:10px}
.node-card{background:#fff; border:1px solid var(--hair); border-radius:12px; padding:16px}
.node-card .n-head{display:flex; justify-content:space-between; font-size:12px; font-weight:700; margin-bottom:6px}
.node-card .n-body{font-size:13px; color:var(--muted); line-height:1.5}

/* modal */
.ef-modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(6px); z-index:100;
  display:none; align-items:center; justify-content:center; padding:20px}
.ef-modal-backdrop.open{display:flex; animation:fadeIn .2s var(--ease)}
.ef-modal{background:#fff; width:min(500px,95vw); border-radius:24px; padding:36px; position:relative; box-shadow:0 24px 60px rgba(0,0,0,.18)}
.ef-modal-close{position:absolute; top:24px; right:24px; border:0; background:none; font-size:20px; color:var(--muted); cursor:pointer}

/* google button */
.btn-google{width:100%; padding:14px; border:1px solid var(--hair); border-radius:16px; background:#fff; color:var(--ink);
  font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:12px; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.04); transition:background .2s}
.btn-google:hover{background:var(--soft)}
.btn-google img{width:18px; height:18px}

/* user pill */
.user-pill{display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
  background:var(--soft); border:1px solid var(--hair); font-size:12px; font-weight:600}
.user-pill .dot{width:8px; height:8px; border-radius:50%; background:#10B981}

@media(max-width:860px){
  .metric-strip{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr}
}