/* Layout: left-aligned report index on deep teal ink with the Xarlo cyan signal.
   Dark "instrument" panels (console, pipeline, diff, proof) carry the motion; type and rules stay quiet. */
:root{
  color-scheme: dark;
  --bg:#0A1A1F; --bg-alt:#07161A; --surface:#102A30; --surface-2:#0C2127;
  --rule:#17343A; --rule-strong:#24505A;
  --text:#EAF3F1; --text-2:#AFC3C3; --text-3:#8BA2A5;
  --accent:#2FE3C6; --accent-hover:#5CEBD4; --accent-text:#4FEBD2; --on-accent:#04231F;
  --accent-wash:rgba(47,227,198,.11); --glow:rgba(47,227,198,.22); --beam:rgba(47,227,198,.07);
  --crit:#FF6B6B; --high:#FF9F5A; --med:#FFD166; --low:#6CB8FF; --ok:#2FE3A0;
  --grid-line:rgba(47,227,198,.055);
  --shadow:0 40px 90px -40px rgba(0,0,0,.8);
  --mk-fg:#EAF3F1; --mk-cy:#2FE3C6;
  /* instrument panels are screens: they stay dark in both themes */
  --panel:#051216; --panel-2:#0A1D22; --panel-rule:#15393D; --panel-text:#EAF3F1; --panel-dim:#7D9699;
  --panel-accent:#2FE3C6; --panel-ok:#2FE3A0; --panel-high:#FF9F5A; --panel-crit:#FF6B6B; --panel-med:#FFD166;
  --panel-high-wash:rgba(255,159,90,.08);
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --bg:#F1F7F6; --bg-alt:#E5EFEE; --surface:#FFFFFF; --surface-2:#F5FAF9;
    --rule:#D0E0DD; --rule-strong:#AAC4C0;
    --text:#0A1A1F; --text-2:#36535A; --text-3:#54707A;
    --accent:#2FE3C6; --accent-hover:#19D2B4; --accent-text:#0A7A6A; --on-accent:#04231F;
    --accent-wash:rgba(20,184,160,.12); --glow:rgba(20,184,160,.18); --beam:rgba(10,122,106,.06);
    --crit:#C62F3A; --high:#B4530F; --med:#7A5D00; --low:#1D66B0; --ok:#0E7A52;
    --grid-line:rgba(10,122,106,.07);
    --shadow:0 40px 70px -40px rgba(10,26,31,.45);
    --mk-fg:#0A1A1F; --mk-cy:#14B8A0;
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#F1F7F6; --bg-alt:#E5EFEE; --surface:#FFFFFF; --surface-2:#F5FAF9;
  --rule:#D0E0DD; --rule-strong:#AAC4C0;
  --text:#0A1A1F; --text-2:#36535A; --text-3:#54707A;
  --accent:#2FE3C6; --accent-hover:#19D2B4; --accent-text:#0A7A6A; --on-accent:#04231F;
  --accent-wash:rgba(20,184,160,.12); --glow:rgba(20,184,160,.18); --beam:rgba(10,122,106,.06);
  --crit:#C62F3A; --high:#B4530F; --med:#7A5D00; --low:#1D66B0; --ok:#0E7A52;
  --grid-line:rgba(10,122,106,.07);
  --shadow:0 40px 70px -40px rgba(10,26,31,.45);
  --mk-fg:#0A1A1F; --mk-cy:#14B8A0;
}

/* ================= base ================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--f-display);text-wrap:balance}
ul,ol,dl,dd,figure{margin:0;padding:0}
code,pre{font-family:var(--f-mono)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--on-accent)}
.sr-defs{position:absolute;width:0;height:0;overflow:hidden}

.wrap{
  max-width:1200px; margin-inline:auto;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px){
  .wrap{
    padding-left:max(32px, env(safe-area-inset-left, 0px));
    padding-right:max(32px, env(safe-area-inset-right, 0px));
  }
}
.band{padding-block:clamp(72px, 10vw, 128px); scroll-margin-top:64px; position:relative; --sec-bg:var(--bg)}
.band-alt{background:var(--bg-alt); border-block:1px solid var(--rule); --sec-bg:var(--bg-alt)}

.title{
  font-size:clamp(32px, 4.4vw, 54px); font-weight:780; font-stretch:112%;
  line-height:1.02; letter-spacing:-.022em;
}
.section-head{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:20px 56px; align-items:end; margin-bottom:clamp(36px, 5vw, 60px);
}
.section-head p{color:var(--text-2); font-size:17px; max-width:56ch}
@media (max-width: 820px){ .section-head{grid-template-columns:minmax(0,1fr)} }

/* scroll reveal: only armed when JS + motion are available; otherwise everything is simply visible */
:root.js .reveal{opacity:0; transform:translate3d(0, 26px, 0); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--i, 0) * 80ms)}
:root.js .reveal.in{opacity:1; transform:none}

/* ================= buttons ================= */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font:600 15px/1 var(--f-body); text-decoration:none; cursor:pointer;
  padding:15px 22px; border-radius:8px; border:1px solid transparent;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{transform:translateY(-1px); background:var(--accent-hover); box-shadow:0 12px 32px -12px var(--glow)}
.btn-ghost{border-color:var(--rule-strong); color:var(--text); background:transparent}
.btn-ghost:hover{border-color:var(--text-3); background:var(--surface)}
.btn-sm{padding:10px 14px; font-size:14px}

/* ================= logo ================= */
.brand{display:inline-flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0}
.mark{display:block; width:36px; height:36px; flex:none; overflow:visible}
.mark .arm{fill:var(--mk-fg)}
.mark .cy, .mark .node{fill:var(--mk-cy)}
.mark .ping{fill:none; stroke:var(--mk-cy); stroke-width:.9; opacity:0; transform-box:view-box; transform-origin:24px 24px}
.brand-name{display:inline-flex; flex-direction:column; line-height:.95}
.brand-word{font-family:var(--f-display); font-weight:760; font-stretch:125%; font-size:21px; letter-spacing:.16em}
.brand-sub{font:500 9px/1 var(--f-mono); color:var(--accent-text); letter-spacing:.46em; text-transform:uppercase; margin-top:6px}
@media (prefers-reduced-motion: no-preference){
  .mark-anim .arm{transform-box:view-box; transform-origin:24px 24px; animation:arm-in .9s var(--ease) both, arm-loop 5s var(--ease) infinite}
  .mark-anim .a-tl{--dx:-6px; --dy:-6px; animation-delay:.05s, 3s}
  .mark-anim .a-tr{--dx:6px; --dy:-6px; animation-delay:.12s, 3.06s}
  .mark-anim .a-bl{--dx:-6px; --dy:6px; animation-delay:.19s, 3.12s}
  .mark-anim .a-br{--dx:6px; --dy:6px; animation-delay:.26s, 3.18s}
  .mark-anim .node{transform-box:view-box; transform-origin:24px 24px; animation:node-in .5s cubic-bezier(.3,1.6,.5,1) .75s both, node-loop 5s ease-in-out 3s infinite}
  .mark-anim .ping{animation:ping 5s ease-out 3.85s infinite}
  @keyframes arm-in{from{opacity:0; transform:translate(var(--dx), var(--dy))} to{opacity:1; transform:none}}
  @keyframes arm-loop{0%{transform:none; opacity:1} 9%{transform:translate(var(--dx), var(--dy)); opacity:.45} 17%{transform:translate(calc(var(--dx) * -0.15), calc(var(--dy) * -0.15)); opacity:1} 23%,100%{transform:none; opacity:1}}
  @keyframes node-in{from{opacity:0; transform:scale(0)} to{opacity:1; transform:scale(1)}}
  @keyframes node-loop{0%,15%,100%{transform:scale(1)} 19%{transform:scale(1.9)} 24%{transform:scale(.85)} 28%{transform:scale(1)}}
  @keyframes ping{0%{opacity:.9; transform:scale(1)} 22%{opacity:0; transform:scale(5)} 100%{opacity:0; transform:scale(5)}}
}

/* ================= header ================= */
.site-header{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter:saturate(150%) blur(14px); backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s ease;
}
.site-header.is-scrolled{border-bottom-color:var(--rule)}
.scroll-bar{position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); transform-origin:left center; transform:scaleX(var(--sp, 0)); pointer-events:none}
.nav{display:flex; align-items:center; gap:28px; height:72px}
.nav-links{display:flex; gap:2px; margin-left:auto; list-style:none}
.nav-links a{
  display:block; padding:8px 11px; border-radius:6px; text-decoration:none;
  font-size:15px; color:var(--text-2); transition:color .15s ease, background-color .15s ease;
}
.nav-links a:hover{color:var(--text); background:var(--surface)}
.nav-links a[aria-current="true"]{color:var(--text)}
.nav-links a[aria-current="true"]::after{content:"";display:block;height:2px;margin-top:4px;background:var(--accent);border-radius:2px}
.nav-actions{display:flex; align-items:center; gap:10px}
.icon-btn{
  width:40px; height:40px; display:grid; place-items:center; border-radius:8px;
  border:1px solid var(--rule); background:transparent; color:var(--text-2); cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.icon-btn:hover{color:var(--text); border-color:var(--rule-strong)}
.icon-btn svg{width:18px; height:18px}
.theme-sun{display:none}
#theme-toggle[data-mode="dark"] .theme-sun{display:block}
#theme-toggle[data-mode="dark"] .theme-moon{display:none}
.menu-btn{display:none}
@media (max-width: 1000px){
  .menu-btn{display:grid}
  .nav-actions .btn{display:none}
  .nav-links{
    position:absolute; left:0; right:0; top:72px; margin:0;
    flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--rule);
    padding:8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px));
    display:none;
  }
  .nav-links a{padding:14px 4px; border-radius:0; border-bottom:1px solid var(--rule); font-size:17px}
  .nav-links a[aria-current="true"]::after{display:none}
  .site-header.menu-open .nav-links{display:flex}
  .nav-actions{margin-left:auto}
}
@media (min-width: 1001px){ .nav-mobile-cta{display:none} }
.nav-mobile-cta a{color:var(--accent-text)!important; font-weight:600}

/* ================= hero ================= */
.hero{position:relative; overflow:hidden; padding-block:clamp(40px, 6vw, 80px) clamp(56px, 7vw, 88px)}
.hero::before, .hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 65% 80% at 72% 40%, #000 20%, transparent 74%);
          mask-image:radial-gradient(ellipse 65% 80% at 72% 40%, #000 20%, transparent 74%)}
.hero::before{
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:44px 44px;
}
.hero::after{background:linear-gradient(to bottom, transparent 0, var(--beam) 50%, transparent 100%) no-repeat; background-size:100% 180px; background-position:0 -180px}
@media (prefers-reduced-motion: no-preference){ .hero::after{animation:beam 9s linear infinite} }
@keyframes beam{to{background-position:0 calc(100% + 180px)}}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(36px, 5vw, 64px); align-items:center}
@media (max-width: 1020px){ .hero-grid{grid-template-columns:minmax(0,1fr)} }
.badge{
  display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 10px; border-radius:999px;
  border:1px solid var(--rule-strong); background:var(--surface-2); font-size:13.5px; color:var(--text-2); margin-bottom:26px;
}
.badge i{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(47,227,160,.5)}
@media (prefers-reduced-motion: no-preference){ .badge i{animation:livepulse 2s infinite} }
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(47,227,160,.55)} 70%{box-shadow:0 0 0 8px rgba(47,227,160,0)} 100%{box-shadow:0 0 0 0 rgba(47,227,160,0)}}
.hero .hero-h{margin:0; font-family:var(--f-display); text-wrap:balance; font-size:clamp(40px, 5.3vw, 70px); font-weight:850; font-stretch:114%; line-height:.97; letter-spacing:-.03em}
.hero-lede{margin-top:26px; font-size:clamp(17px, 1.5vw, 19px); color:var(--text-2); max-width:52ch}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.hero-note{margin-top:20px; font-size:14px; color:var(--text-3); display:flex; align-items:center; gap:8px}
.hero-note svg{width:16px; height:16px; color:var(--ok); flex-shrink:0}
@media (prefers-reduced-motion: no-preference){
  .rise{animation:rise .85s var(--ease) both}
  .rise-2{animation-delay:.08s} .rise-3{animation-delay:.16s} .rise-4{animation-delay:.24s} .rise-5{animation-delay:.32s}
  @keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
}

/* ---- instrument panel shell (console, pipe, proof, diff) ---- */
.panel{
  position:relative; min-width:0; overflow:hidden;
  background:var(--panel); color:var(--panel-text);
  border:1px solid var(--panel-rule); border-radius:16px; box-shadow:var(--shadow);
  font-family:var(--f-mono); font-size:12.5px; line-height:1.6;
}
.panel::before{content:""; position:absolute; left:12%; right:12%; top:0; height:1px; background:linear-gradient(90deg, transparent, var(--panel-accent), transparent); opacity:.75}
.panel-bar{
  display:flex; align-items:center; gap:12px; padding:12px 14px 12px 16px;
  border-bottom:1px solid var(--panel-rule); background:var(--panel-2);
  font-family:var(--f-body); font-size:13px; color:var(--panel-dim);
}
.dots{display:flex; gap:6px; flex-shrink:0}
.dots i{width:9px; height:9px; border-radius:50%; background:var(--panel-rule)}
.panel-title{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.live{display:inline-flex; align-items:center; gap:7px; color:var(--panel-ok); font-weight:500; flex-shrink:0}
.live i{width:7px; height:7px; border-radius:50%; background:currentColor}
@media (prefers-reduced-motion: no-preference){ .live i{animation:livepulse 1.8s infinite} }
.mini-btn{
  font:500 12px/1 var(--f-body); color:var(--panel-dim); background:transparent; flex-shrink:0;
  border:1px solid var(--panel-rule); border-radius:6px; padding:7px 10px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:color .15s ease, border-color .15s ease;
}
.mini-btn:hover{color:var(--panel-text); border-color:var(--panel-dim)}
.mini-btn svg{width:12px; height:12px}

/* ---- hero console ---- */
.con-metrics{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-bottom:1px solid var(--panel-rule)}
.con-metrics > div{padding:14px 16px; display:grid; gap:2px; min-width:0}
.con-metrics > div + div{border-left:1px solid var(--panel-rule)}
.con-k{font-family:var(--f-body); font-size:12px; color:var(--panel-dim); line-height:1.35}
.con-v{font-family:var(--f-display); font-weight:800; font-stretch:110%; font-size:clamp(20px, 2vw, 26px); color:var(--panel-text); font-variant-numeric:tabular-nums; line-height:1.15}
.con-v.acc{color:var(--panel-accent)}
.con-phase{padding:12px 16px 12px; border-bottom:1px solid var(--panel-rule)}
.phase-track{height:4px; border-radius:4px; background:var(--panel-rule); overflow:hidden}
.phase-fill{height:100%; width:var(--ph, 100%); border-radius:4px; background:linear-gradient(90deg, #138f80, var(--panel-accent)); transition:width .7s var(--ease)}
.phase-labels{display:flex; justify-content:space-between; gap:8px; margin-top:8px; font-family:var(--f-body); font-size:11.5px; color:var(--panel-dim)}
.phase-labels span{transition:color .3s ease}
.phase-labels span.on{color:var(--panel-text)}
.con-log{
  list-style:none; margin:0; padding:12px 16px; height:232px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 26%); mask-image:linear-gradient(to bottom, transparent 0, #000 26%);
}
.ln{display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; padding:2px 0; animation:ln-in .3s var(--ease)}
@keyframes ln-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.ln-who{color:var(--panel-dim); white-space:nowrap; display:flex; align-items:center; gap:7px}
.ln-who::before{content:""; width:6px; height:6px; border-radius:1px; background:var(--panel-dim); flex-shrink:0}
.ln-human .ln-who{color:var(--panel-accent)}
.ln-human .ln-who::before{background:var(--panel-accent); border-radius:50%}
.ln-report .ln-who{color:var(--panel-ok)}
.ln-report .ln-who::before{background:var(--panel-ok)}
.ln-msg{color:var(--panel-text); min-width:0; overflow-wrap:anywhere}
.ln-agent .ln-msg{color:#C4D6D4}
.ln-report .ln-msg{color:var(--panel-ok)}
.ln.typing .ln-msg::after{content:""; display:inline-block; width:.55em; height:1.1em; margin-left:2px; background:var(--panel-accent); vertical-align:-.2em; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.con-foot{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding:12px 16px; background:var(--panel-2); border-top:1px solid var(--panel-rule); font-family:var(--f-body); font-size:12.5px; color:var(--panel-dim)}
.cnt{display:inline-flex; align-items:center; gap:7px}
.cnt i{width:8px; height:8px; border-radius:2px}
.cnt b{font-family:var(--f-mono); font-weight:500; color:var(--panel-text); font-variant-numeric:tabular-nums}
.cnt.bump b{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{0%{transform:scale(1.6); color:var(--panel-accent)} 100%{transform:scale(1)}}
.con-foot .sep{margin-left:auto}
.cnt b, .con-v{display:inline-block}

/* ---- facts ---- */
.facts{position:relative; z-index:1; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:clamp(48px, 6vw, 80px); border-top:1px solid var(--rule)}
.facts > div{display:flex; flex-direction:column-reverse; gap:6px; padding:22px 20px 0 0}
.facts > div + div{padding-left:20px; border-left:1px solid var(--rule)}
.facts dd{font-family:var(--f-display); font-weight:800; font-stretch:112%; font-size:clamp(28px, 3vw, 38px); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.facts dt{font-size:14px; color:var(--text-3); line-height:1.4}
@media (max-width: 720px){
  .facts{grid-template-columns:repeat(2, minmax(0,1fr))}
  .facts > div:nth-child(3){padding-left:0; border-left:0}
  .facts > div:nth-child(n+3){border-top:1px solid var(--rule); margin-top:22px}
}

/* ================= marquee ================= */
.marquee-band{padding-block:40px 44px; border-block:1px solid var(--rule); background:var(--bg-alt); overflow:hidden}
.marquee-head{display:flex; align-items:center; gap:16px; margin-bottom:20px; font-size:14.5px; color:var(--text-3)}
.marquee-head::after{content:""; flex:1; height:1px; background:var(--rule)}
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.marquee + .marquee{margin-top:12px}
.marquee-track{display:flex; width:max-content}
.marquee-group{display:flex; gap:12px; padding-right:12px}
@media (prefers-reduced-motion: no-preference){
  .marquee-track{animation:marq 46s linear infinite}
  .marquee.rev .marquee-track{animation-direction:reverse; animation-duration:58s}
  .marquee:hover .marquee-track{animation-play-state:paused}
}
@keyframes marq{to{transform:translateX(-50%)}}
.chip{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  padding:11px 18px; border-radius:10px; border:1px solid var(--rule-strong); background:var(--surface-2);
  font:600 15px/1 var(--f-display); font-stretch:108%; color:var(--text-2);
}
.chip::before{content:""; width:7px; height:7px; border-radius:2px; background:var(--accent); opacity:.85}
.marquee.rev .chip{font:500 14px/1 var(--f-mono); color:var(--text-3)}
.marquee.rev .chip::before{background:var(--text-3); border-radius:50%}

/* ================= AI app risks ================= */
.risks{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
@media (max-width: 1020px){ .risks{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 640px){ .risks{grid-template-columns:minmax(0,1fr)} }
.risk{min-width:0; display:flex; flex-direction:column; border:1px solid var(--rule); border-radius:14px; background:var(--surface); overflow:hidden; transition:border-color .25s ease, transform .25s ease}
.risk:hover{border-color:var(--rule-strong)}
.risk-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1}
.risk h3{font-weight:740; font-stretch:106%; font-size:20px; line-height:1.2; letter-spacing:-.01em}
.risk p{color:var(--text-2); font-size:15px}
.risk-check{margin-top:auto; padding-top:12px; border-top:1px solid var(--rule); font-size:14px; color:var(--text)}
.risk-check b{color:var(--accent-text); font-weight:600}

.art{position:relative; height:132px; background:var(--panel); border-bottom:1px solid var(--panel-rule); padding:14px 16px; overflow:hidden; font:12px/1.55 var(--f-mono); color:var(--panel-text)}
.art code{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.art .dim{color:var(--panel-dim)}
.art .ok200{color:var(--panel-ok)}
.art .bad{color:var(--panel-crit)}
.tag-bad{display:inline-flex; align-items:center; gap:6px; font:500 11px/1 var(--f-body); color:var(--panel-crit); border:1px solid rgba(255,107,107,.45); background:rgba(255,107,107,.08); padding:5px 8px; border-radius:5px}
/* paused until the card scrolls in */
:root.js .risk:not(.in) .art *, :root.js .risk:not(.in) .art::before, :root.js .risk:not(.in) .art::after{animation-play-state:paused!important}

/* 1. open database */
.db-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:var(--panel-dim)}
.db-row{display:flex; gap:12px; padding:2px 6px; border-radius:4px; white-space:nowrap; animation:leak 4.8s var(--ease) infinite}
.db-row:nth-child(2){animation-delay:.6s} .db-row:nth-child(3){animation-delay:1.2s} .db-row:nth-child(4){animation-delay:1.8s}
.db-row span:first-child{color:var(--panel-dim); width:52px; flex-shrink:0}
@keyframes leak{0%,48%{transform:none; background:transparent; color:var(--panel-text)} 58%{transform:translateX(10px); background:rgba(255,107,107,.12); color:var(--panel-crit)} 74%,100%{transform:none; background:transparent; color:var(--panel-text)}}
/* 2. key in bundle */
.art-key .scan{position:absolute; top:0; bottom:0; width:70px; left:-80px; background:linear-gradient(90deg, transparent, rgba(47,227,198,.16), transparent); animation:sweep 3.4s linear infinite}
@keyframes sweep{to{left:110%}}
.art-key .key{color:var(--panel-med); animation:keyhit 3.4s linear infinite}
@keyframes keyhit{0%,38%{color:var(--panel-med); background:transparent} 46%,80%{color:var(--panel-crit); background:rgba(255,107,107,.12)} 100%{color:var(--panel-med); background:transparent}}
.art-key .tag-bad{position:absolute; right:14px; bottom:14px; animation:tagpop 3.4s linear infinite}
@keyframes tagpop{0%,42%{opacity:0; transform:translateY(6px)} 50%,86%{opacity:1; transform:none} 100%{opacity:0}}
/* 3. id ticker */
.tick{display:inline-block; height:1.55em; overflow:hidden; vertical-align:bottom}
.tick > span{display:block; animation:tick 8s steps(1) infinite}
@keyframes tick{0%{transform:translateY(0)} 25%{transform:translateY(-1.55em)} 50%{transform:translateY(-3.1em)} 75%{transform:translateY(-4.65em)} 100%{transform:translateY(0)}}
.tick-who > span{color:var(--panel-crit)}
.tick-who > span:first-child{color:var(--panel-ok)}
.idor-note{margin-top:10px; display:flex; gap:8px; align-items:center; color:var(--panel-dim); font-family:var(--f-body); font-size:12px}
.idor-bar{flex:1; height:4px; border-radius:4px; background:var(--panel-rule); overflow:hidden}
.idor-bar i{display:block; height:100%; width:30%; background:var(--panel-crit); animation:idorbar 8s steps(4) infinite}
@keyframes idorbar{0%{width:25%} 100%{width:125%}}
/* 4. UI-only auth */
.art-ui{display:flex; flex-direction:column; gap:10px}
.ui-btn{display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:7px 10px; border-radius:6px; border:1px dashed var(--panel-rule); color:var(--panel-dim); font-family:var(--f-body); font-size:12.5px}
.ui-btn svg{width:13px; height:13px}
.wire{position:relative; height:16px; margin-left:14px; border-left:1px dashed var(--panel-dim)}
.wire::after{content:""; position:absolute; left:-4px; top:0; width:7px; height:7px; border-radius:50%; background:var(--panel-accent); animation:wire 2.6s ease-in infinite}
@keyframes wire{0%{top:-4px; opacity:0} 20%{opacity:1} 80%{top:12px; opacity:1} 100%{top:12px; opacity:0}}
.art-ui .resp200{animation:flash200 2.6s ease infinite}
@keyframes flash200{0%,70%{opacity:.35} 82%,100%{opacity:1}}
/* 5. prompt injection */
.bub{padding:7px 10px; border-radius:8px; font-family:var(--f-body); font-size:12.5px; line-height:1.45; max-width:94%}
.bub-user{background:var(--panel-2); border:1px solid var(--panel-rule); color:var(--panel-dim)}
.bub-user mark{background:rgba(255,107,107,.14); color:var(--panel-crit); padding:0 2px; border-radius:3px; animation:markp 4s ease infinite}
@keyframes markp{0%,30%{background:transparent; color:var(--panel-dim)} 40%,100%{background:rgba(255,107,107,.14); color:var(--panel-crit)}}
.bub-bot{margin-top:8px; margin-left:auto; background:rgba(47,227,198,.1); border:1px solid rgba(47,227,198,.3); color:var(--panel-text); animation:botin 4s ease infinite}
@keyframes botin{0%,50%{opacity:0; transform:translateY(6px)} 60%,92%{opacity:1; transform:none} 100%{opacity:0}}
/* 6. hallucinated package */
.art-pkg .typed{display:inline-block; overflow:hidden; vertical-align:bottom; white-space:nowrap; width:0; animation:typed 5s steps(20) infinite}
@keyframes typed{0%{width:0} 40%,100%{width:20ch}}
.art-pkg .warn{color:var(--panel-med); opacity:0; animation:warn 5s ease infinite}
.art-pkg .warn:nth-of-type(3){animation-delay:.25s}
@keyframes warn{0%,46%{opacity:0} 54%,92%{opacity:1} 100%{opacity:0}}

/* ================= risk check ================= */
.check-grid{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:24px; align-items:stretch}
@media (max-width: 960px){ .check-grid{grid-template-columns:minmax(0,1fr)} }
.qs{display:grid; gap:10px; align-content:start}
.q{position:relative}
.q input{position:absolute; opacity:0; width:1px; height:1px}
.q label{
  display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:14px; align-items:center; cursor:pointer;
  padding:16px 18px; border-radius:12px; border:1px solid var(--rule); background:var(--surface);
  transition:border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.q label:hover{border-color:var(--rule-strong)}
.q .box{width:22px; height:22px; border-radius:6px; border:1.5px solid var(--text-3); display:grid; place-items:center; transition:all .2s ease}
.q .box svg{width:14px; height:14px; color:var(--on-accent); opacity:0; transform:scale(.4); transition:all .2s cubic-bezier(.3,1.6,.5,1)}
.q strong{display:block; font-weight:600; font-size:15.5px}
.q small{display:block; color:var(--text-3); font-size:13.5px; margin-top:2px}
.q .w{font:500 12px/1 var(--f-mono); color:var(--text-3)}
.q input:checked + label{border-color:var(--accent); background:var(--accent-wash)}
.q input:checked + label .box{background:var(--accent); border-color:var(--accent)}
.q input:checked + label .box svg{opacity:1; transform:none}
.q input:focus-visible + label{outline:2px solid var(--accent-text); outline-offset:2px}
.meter{display:flex; flex-direction:column; gap:18px; padding:26px; border-radius:16px; border:1px solid var(--rule); background:var(--surface); min-width:0}
.gauge{position:relative; width:100%; max-width:320px; margin-inline:auto; aspect-ratio:2 / 1.15}
.gauge svg{width:100%; height:100%; display:block; overflow:visible}
.gauge .g-track{fill:none; stroke:var(--rule); stroke-width:16; stroke-linecap:round}
.gauge .g-fill{fill:none; stroke:var(--g-color, var(--accent)); stroke-width:16; stroke-linecap:round; transition:stroke-dashoffset 1s var(--ease), stroke .4s ease}
.gauge .g-tick{stroke:var(--rule-strong); stroke-width:2}
.gauge-read{position:absolute; left:0; right:0; bottom:4%; text-align:center}
.gauge-read b{display:block; font:850 44px/1 var(--f-display); font-stretch:112%; font-variant-numeric:tabular-nums}
.gauge-read span{font-size:14px; font-weight:600; color:var(--g-color, var(--accent-text))}
.recs h3{font:600 14px/1.4 var(--f-body); color:var(--text-3); margin-bottom:10px}
.recs ul{list-style:none; display:grid; gap:8px}
.recs li{display:flex; gap:10px; font-size:15px; animation:ln-in .35s var(--ease) both}
.recs li::before{content:""; width:6px; height:6px; margin-top:9px; flex-shrink:0; background:var(--accent); border-radius:1px}
.meter .fine{font-size:13px; color:var(--text-3)}

/* ================= hybrid pipeline ================= */
.pipe-wrap{display:grid; gap:20px}
.pipe-panel .panel-bar{justify-content:space-between}
.pipe{position:relative; display:grid; grid-template-columns:minmax(120px, 190px) minmax(0,1fr) 60px minmax(0,1fr) minmax(110px, 170px); min-height:400px; padding:22px 18px}
.pipe canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.lanes, .bins{position:relative; z-index:1; display:flex; flex-direction:column}
.lanes{justify-content:space-around}
.bins{justify-content:center; gap:14px}
.lane{padding:8px 10px; border-radius:8px; border:1px solid var(--panel-rule); background:var(--panel-2)}
.lane b{display:block; font-family:var(--f-body); font-weight:600; font-size:13px; color:var(--panel-text)}
.lane span{display:block; font-size:11px; color:var(--panel-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gate{position:relative; z-index:1; grid-column:3; display:flex; flex-direction:column; align-items:center}
.gate-bar{flex:1; width:4px; border-radius:4px; background:linear-gradient(to bottom, transparent, var(--panel-accent) 15%, var(--panel-accent) 85%, transparent); box-shadow:0 0 22px 2px rgba(47,227,198,.35)}
.gate-label{position:absolute; top:-6px; left:50%; transform:translate(-50%, -100%); white-space:nowrap; font-family:var(--f-body); font-size:12px; font-weight:600; color:var(--panel-accent); background:var(--panel); padding:2px 8px; border-radius:4px; border:1px solid rgba(47,227,198,.35)}
.bins{grid-column:5}
.bin{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; border:1px solid var(--panel-rule); background:var(--panel-2); font-family:var(--f-body); font-size:12.5px; color:var(--panel-text); transition:border-color .3s ease, box-shadow .3s ease}
.bin i{width:9px; height:9px; border-radius:2px; flex-shrink:0}
.bin.hit{border-color:var(--bin-c); box-shadow:0 0 0 3px color-mix(in srgb, var(--bin-c) 18%, transparent)}
.bin[data-sev="crit"]{--bin-c:var(--panel-crit)} .bin[data-sev="high"]{--bin-c:var(--panel-high)} .bin[data-sev="med"]{--bin-c:var(--panel-med)}
.bin[data-sev="crit"] i{background:var(--panel-crit)} .bin[data-sev="high"] i{background:var(--panel-high)} .bin[data-sev="med"] i{background:var(--panel-med)}
@media (max-width: 720px){
  .pipe{grid-template-columns:104px minmax(0,1fr) 34px minmax(0,1fr) 92px; padding:22px 10px; min-height:350px}
  .lane span{display:none}
  .lane b, .bin{font-size:11.5px}
  .gate-label{font-size:10.5px}
}
.pipe-stats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--panel-rule); font-family:var(--f-body)}
.pipe-stats > div{padding:16px 18px; display:flex; flex-direction:column-reverse; gap:2px}
.pipe-stats > div + div{border-left:1px solid var(--panel-rule)}
.pipe-stats dt{font-size:12.5px; color:var(--panel-dim); line-height:1.35}
.pipe-stats dd{font:800 26px/1.1 var(--f-display); font-stretch:110%; color:var(--panel-text); font-variant-numeric:tabular-nums}
.pipe-stats > div:last-child dd{color:var(--panel-accent)}
@media (max-width: 720px){ .pipe-stats{grid-template-columns:repeat(2, minmax(0,1fr))} .pipe-stats > div:nth-child(3){border-left:0} .pipe-stats > div:nth-child(n+3){border-top:1px solid var(--panel-rule)} }
.duo{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin-top:28px}
@media (max-width: 820px){ .duo{grid-template-columns:minmax(0,1fr)} }
.duo-card{border:1px solid var(--rule); border-radius:14px; padding:24px; background:var(--surface)}
.duo-card h3{display:flex; align-items:center; gap:12px; font-weight:740; font-stretch:108%; font-size:21px; margin-bottom:16px}
.duo-ic{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--rule-strong); color:var(--accent-text)}
.duo-ic svg{width:20px; height:20px}
.duo-card ul{list-style:none; display:grid; gap:10px}
.duo-card li{display:flex; gap:12px; color:var(--text-2); font-size:15.5px}
.duo-card li::before{content:""; width:6px; height:6px; margin-top:10px; flex-shrink:0; background:var(--accent); border-radius:1px}
.duo-card.human{border-color:color-mix(in srgb, var(--accent) 40%, var(--rule)); background:linear-gradient(180deg, var(--accent-wash), transparent 70%), var(--surface)}

/* ================= proof (IDOR) ================= */
.evidence-grid{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:48px 72px; align-items:center}
@media (max-width: 1020px){ .evidence-grid{grid-template-columns:minmax(0,1fr)} }
.evidence-copy > p{margin-top:20px; color:var(--text-2); font-size:17px; max-width:46ch}
.steplist{list-style:none; margin-top:32px; display:grid; border-top:1px solid var(--rule)}
.steplist li{display:grid; grid-template-columns:32px minmax(0,1fr); gap:14px; padding:16px 0; border-bottom:1px solid var(--rule)}
.steplist-n{font:800 15px/1.5 var(--f-display); color:var(--accent-text); font-variant-numeric:tabular-nums}
.steplist strong{display:block; font-weight:600}
.steplist span{color:var(--text-2); font-size:15px}
.proof-step{padding:16px 18px 18px; border-left:3px solid transparent; transition:background-color .4s ease, border-color .4s ease}
.proof-step + .proof-step{border-top:1px solid var(--panel-rule)}
.proof-step[data-state="hit"]{background:var(--panel-high-wash); border-left-color:var(--panel-high)}
.step-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; font-family:var(--f-body)}
.step-n{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; border:1px solid var(--panel-rule); font:600 11px/1 var(--f-body); color:var(--panel-dim)}
.step-label{font-size:13.5px; color:var(--panel-text); flex:1; min-width:0}
.status{font:500 12px/1 var(--f-mono); padding:5px 8px; border-radius:5px; border:1px solid var(--panel-rule); color:var(--panel-dim); white-space:nowrap; display:inline-flex; align-items:center; gap:6px}
.status.ok{color:var(--panel-ok); border-color:rgba(47,227,160,.4)}
.status.bad{color:var(--panel-high); border-color:rgba(255,159,90,.5); background:rgba(255,159,90,.08)}
.status.pending{color:var(--panel-accent)}
.status.pending::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3} 50%{opacity:1}}
.status.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.7)} 100%{transform:scale(1)}}
.expect{font:400 12px/1 var(--f-body); color:var(--panel-dim); transition:opacity .3s ease}
.expect[data-state="off"]{opacity:0}
.http{margin:0; white-space:pre; overflow-x:auto; color:var(--panel-text); padding-bottom:2px; font-size:13px}
.http .m{color:var(--panel-accent)} .http .k{color:var(--panel-dim)}
.http .v{border-bottom:1px dashed transparent}
.http .v.hit{color:var(--panel-accent); border-bottom-color:var(--panel-accent)}
.v.typing::after{content:""; display:inline-block; width:.6em; height:1.15em; margin-left:1px; background:var(--panel-accent); vertical-align:-.22em; animation:blink 1s steps(1) infinite}
.resp{margin-top:10px; font-family:var(--f-body); font-size:13.5px; color:var(--panel-dim); display:flex; gap:8px}
.resp b{color:var(--panel-text); font-weight:500}
.resp-hit b{color:var(--panel-high)}
.resp svg{width:14px; height:14px; flex-shrink:0; margin-top:3px}
.verdict{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 18px; border-top:1px solid var(--panel-rule); background:var(--panel-2)}
.verdict code{font-size:12px; color:var(--panel-dim); word-break:break-all; min-width:0}
[data-anim]{transition:opacity .45s ease, transform .45s var(--ease)}
[data-anim][data-state="off"]{opacity:0; transform:translateY(8px)}
.sev{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font:600 12.5px/1 var(--f-body); padding:6px 10px 6px 8px; border-radius:6px; border:1px solid currentColor}
.sev::before{content:""; width:8px; height:8px; border-radius:2px; background:currentColor}
.sev b{font-family:var(--f-mono); font-weight:500}
.sev-crit{color:var(--crit)} .sev-high{color:var(--high)} .sev-med{color:var(--med)} .sev-low{color:var(--low)} .sev-info{color:var(--text-3)}
.panel .sev-high{color:var(--panel-high)}

/* ================= exploit replay ================= */
.sc-tabs .tab{position:relative; overflow:hidden; padding-bottom:12px}
.tab-prog{position:absolute; left:10px; right:10px; bottom:4px; height:2px; border-radius:2px; background:var(--panel-accent); transform-origin:left center; transform:scaleX(0); opacity:0}
.tab[aria-selected="true"] .tab-prog{opacity:1}
.sc-body{min-height:390px}
.sc-body .http{white-space:pre-wrap; overflow-wrap:anywhere}
.http .hl{color:var(--panel-accent); border-bottom:1px dashed rgba(47,227,198,.6)}
.http .tw.typing::after{content:""; display:inline-block; width:.6em; height:1.15em; margin-left:1px; background:var(--panel-accent); vertical-align:-.22em; animation:blink 1s steps(1) infinite}
.sc-fade{animation:ln-in .4s var(--ease) both}
.cv{opacity:.16; transition:opacity .2s ease, color .2s ease}
.cv.on{opacity:1; color:var(--panel-text)}
.sev.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
.panel .sev-crit{color:var(--panel-crit)} .panel .sev-med{color:var(--panel-med)}
@media (max-width: 640px){ .sc-body{min-height:0} }

/* ================= agent console (tmux) ================= */
.tmux-grid{display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr)}
.pane{min-width:0; display:flex; flex-direction:column}
.pane-recon{grid-row:1 / span 2; border-right:1px solid var(--panel-rule)}
.pane-secrets{border-top:1px solid var(--panel-rule)}
.pane-h{display:flex; justify-content:space-between; gap:10px; padding:8px 14px; font:500 11.5px/1.3 var(--f-mono); color:var(--panel-dim); background:rgba(255,255,255,.018); border-bottom:1px solid var(--panel-rule)}
.pane-h b{color:var(--panel-accent); font-weight:500; font-variant-numeric:tabular-nums}
.pane-log{list-style:none; margin:0; padding:10px 14px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; font-size:12px; line-height:1.7;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 18%); mask-image:linear-gradient(to bottom, transparent 0, #000 18%)}
.pane-recon .pane-log{flex:1; min-height:330px; justify-content:flex-start; -webkit-mask-image:none; mask-image:none}
.pane-secrets .pane-log{height:196px}
.tl{display:grid; grid-template-columns:50px minmax(0,1fr); gap:10px; animation:ln-in .25s var(--ease)}
.tl.cmd{grid-template-columns:minmax(0,1fr)}
.tl.cmd span{color:var(--panel-accent)}
.tl .tk{color:var(--panel-dim)}
.tl .msg{color:#C4D6D4; white-space:pre-wrap; overflow-wrap:anywhere}
.tk-done, .tk-clean{color:var(--panel-ok)!important}
.tk-hit{color:var(--panel-high)!important}
.tk-live{color:var(--panel-crit)!important}
.tk-test{color:var(--panel-med)!important}
.tk-queue, .tk-ai{color:var(--panel-accent)!important}
.mx-wrap{padding:14px 14px 16px}
.mx{display:grid; grid-template-columns:66px repeat(16, minmax(0,1fr)); gap:3px; align-items:center}
.mx-r{font:500 11px/1 var(--f-mono); color:var(--panel-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mx-c{aspect-ratio:1; border-radius:2px; background:var(--panel-rule); transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease}
.mx-c.ok{background:rgba(47,227,198,.38)}
.mx-c.deny{background:rgba(47,227,160,.15)}
.mx-c.bad{background:var(--panel-crit); box-shadow:0 0 10px rgba(255,107,107,.75); transform:scale(1.12)}
.mx-legend{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:14px; font-family:var(--f-body); font-size:11.5px; color:var(--panel-dim)}
.mx-legend i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:-1px}
.tmux-status{display:flex; flex-wrap:wrap; gap:4px 14px; padding:7px 14px; background:#0B2427; color:var(--panel-dim); font-size:11.5px; border-top:1px solid var(--panel-rule)}
.tmux-status .on{color:var(--panel-accent)}
.ts-right{margin-left:auto; font-variant-numeric:tabular-nums}
@media (max-width: 860px){
  .tmux-grid{grid-template-columns:minmax(0,1fr)}
  .pane-recon{grid-row:auto; border-right:0}
  .pane-recon .pane-log{min-height:0; height:230px}
  .pane-matrix{border-top:1px solid var(--panel-rule)}
  .mx{grid-template-columns:54px repeat(16, minmax(0,1fr)); gap:2px}
}

/* ================= mobile lab ================= */
.mob-stage{position:relative; display:grid; grid-template-columns:270px 64px minmax(0,1fr); align-items:center; padding:30px 26px; background:radial-gradient(ellipse 40% 60% at 16% 50%, rgba(47,227,198,.09), transparent 70%)}
@media (max-width: 980px){ .mob-stage{grid-template-columns:minmax(0,1fr); justify-items:center; gap:22px; padding:22px 14px} .mob-link{display:none} .mterm{width:100%} }
.phone{position:relative; width:258px; max-width:100%; aspect-ratio:9 / 19; padding:9px; border-radius:46px; background:linear-gradient(150deg, #24505a, #0a1a1f 55%, #123036); box-shadow:0 0 0 1px #2b5d66, 0 40px 70px -30px rgba(0,0,0,.85), inset 0 0 0 2px rgba(255,255,255,.05); transition:border-radius .4s ease}
.phone[data-os="android"]{border-radius:34px}
.phone::before{content:""; position:absolute; right:-3px; top:22%; width:3px; height:58px; border-radius:2px; background:#2b5d66}
.phone-screen{position:relative; height:100%; border-radius:38px; overflow:hidden; display:flex; flex-direction:column; background:linear-gradient(180deg, #0D2328, #081A1E); color:#EAF3F1; font-family:var(--f-body); transition:border-radius .4s ease}
.phone[data-os="android"] .phone-screen{border-radius:26px}
.ph-cam{position:absolute; z-index:4; top:10px; left:50%; transform:translateX(-50%); background:#000; transition:all .4s ease}
.phone[data-os="ios"] .ph-cam{width:84px; height:24px; border-radius:14px}
.phone[data-os="android"] .ph-cam{width:12px; height:12px; border-radius:50%; top:13px}
.ph-status{display:flex; justify-content:space-between; align-items:center; height:42px; padding:14px 22px 6px; font-size:12px; font-weight:600}
.ph-status svg{width:40px; height:11px}
.ph-app{position:relative; flex:1; min-height:0; padding:6px 14px 12px; display:flex; flex-direction:column; gap:9px; overflow:hidden}
.ph-app.swap{animation:phswap .5s var(--ease)}
@keyframes phswap{0%{opacity:0; transform:scale(.97)} 100%{opacity:1; transform:none}}
.ph-scan{position:absolute; z-index:3; left:0; right:0; top:-30%; height:30%; background:linear-gradient(to bottom, transparent, rgba(47,227,198,.3), transparent); opacity:0; pointer-events:none}
.phone.flip .ph-scan{animation:phscan .9s ease-out}
.phone.flip .phone-screen{animation:glitch .45s steps(2)}
@keyframes phscan{0%{opacity:1; top:-30%} 100%{opacity:0; top:100%}}
@keyframes glitch{0%{transform:translate(0)} 25%{transform:translate(-2px, 1px)} 50%{transform:translate(2px, -1px)} 75%{transform:translate(-1px, 0)} 100%{transform:none}}
.ph-hud{display:flex; flex-wrap:wrap; gap:5px; padding:10px 12px 18px; border-top:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.28)}
.hud{font:500 10px/1 var(--f-mono); padding:5px 7px; border-radius:5px; border:1px solid #1d4248; color:#9fb4b5; transition:all .3s ease}
.hud.hot{color:var(--panel-accent); border-color:rgba(47,227,198,.5); background:rgba(47,227,198,.08)}
.hud.bad{color:var(--panel-crit); border-color:rgba(255,107,107,.55); background:rgba(255,107,107,.1)}
.ph-head{display:flex; align-items:center; justify-content:space-between; font-weight:600; font-size:14.5px}
.ph-av{width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg, #2FE3C6, #17706a)}
.ph-card{border-radius:14px; padding:13px; background:linear-gradient(135deg, #14424a, #0c262b); border:1px solid #1d4248}
.ph-card small{display:block; font-size:11px; color:#8BA2A5}
.ph-card b{display:block; font:800 22px/1.2 var(--f-display); font-stretch:108%; margin-top:3px}
.ph-row{display:flex; justify-content:space-between; gap:8px; font-size:12px; padding:7px 2px; border-bottom:1px solid rgba(255,255,255,.06); color:#C4D6D4}
.ph-chip{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:5px 9px; border-radius:999px; background:rgba(47,227,160,.12); color:var(--panel-ok); border:1px solid rgba(47,227,160,.35)}
.ph-chip.bad{background:rgba(255,107,107,.12); color:var(--panel-crit); border-color:rgba(255,107,107,.45)}
.ph-chip svg{width:11px; height:11px}
.ph-code{font:10.5px/1.6 var(--f-mono); background:#051216; border:1px solid #15393D; border-radius:10px; padding:10px; color:#C4D6D4; white-space:pre-wrap; overflow-wrap:anywhere}
.ph-code .hl{color:var(--panel-crit); background:rgba(255,107,107,.12); border-radius:3px}
.ph-url{display:flex; align-items:center; gap:6px; font:11px/1 var(--f-mono); padding:8px 10px; border-radius:8px; background:#051216; border:1px solid #15393D; color:#9fb4b5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ph-bubble{align-self:flex-start; max-width:92%; padding:10px 12px; border-radius:16px 16px 16px 4px; background:#16343a; font-size:12px; line-height:1.45}
.ph-bubble span{color:var(--panel-accent); text-decoration:underline; overflow-wrap:anywhere}
.ph-sub{font-size:10.5px; color:#8BA2A5}
.ph-face{margin:auto; display:grid; justify-items:center; gap:10px; text-align:center; font-size:12px; color:#9fb4b5}
.ph-face svg{width:66px; height:66px; color:var(--panel-accent); animation:pulse 1.6s ease-in-out infinite}
.ph-face b{color:#EAF3F1; font-size:14px}
.ph-note{display:grid; gap:4px; padding:10px 12px; border-radius:12px; background:rgba(255,107,107,.08); border:1px solid rgba(255,107,107,.3); font-size:11.5px; color:#FFC1C1}
.ph-note b{color:var(--panel-crit); font-size:12.5px}
.mob-link{position:relative; height:2px; align-self:center; background:repeating-linear-gradient(90deg, #1d4248 0 6px, transparent 6px 12px)}
.mob-link i{position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%; background:var(--panel-accent); box-shadow:0 0 10px var(--panel-accent); opacity:0}
.mob-stage[data-flow="on"] .mob-link i{animation:pkt 1.4s linear infinite}
.mob-stage[data-flow="on"] .mob-link i:nth-child(2){animation-delay:.35s}
.mob-stage[data-flow="on"] .mob-link i:nth-child(3){animation-delay:.7s}
.mob-stage[data-flow="on"] .mob-link i:nth-child(4){animation-delay:1.05s}
@keyframes pkt{0%{left:-4px; opacity:0} 15%, 85%{opacity:1} 100%{left:calc(100% - 4px); opacity:0}}
.mterm{min-width:0; align-self:stretch; display:flex; flex-direction:column; border:1px solid var(--panel-rule); border-radius:12px; background:#030D10; overflow:hidden}
.mterm-h{display:flex; justify-content:space-between; gap:10px; padding:9px 12px; font:500 11.5px/1.3 var(--f-mono); color:var(--panel-dim); border-bottom:1px solid var(--panel-rule); background:var(--panel-2)}
.mterm-h b{color:var(--panel-accent); font-weight:500; white-space:nowrap}
.mterm-log{list-style:none; margin:0; padding:12px 14px; flex:1; min-height:290px; display:flex; flex-direction:column; font-size:12px; line-height:1.75; overflow:hidden}
.ml{white-space:pre-wrap; overflow-wrap:anywhere; color:#9FB4B5; animation:ln-in .22s var(--ease)}
.ml .pr{color:var(--panel-accent)}
.ml.c{color:var(--panel-text)}
.ml.h{color:var(--panel-accent)}
.ml.k{color:var(--panel-ok)}
.ml.b{color:var(--panel-high)}
.ml.f{color:var(--panel-crit); font-weight:500}
.ml.typing .msg::after{content:""; display:inline-block; width:.55em; height:1.1em; margin-left:2px; background:var(--panel-accent); vertical-align:-.2em; animation:blink 1s steps(1) infinite}
.mob-result{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:13px 14px; border-top:1px solid var(--panel-rule); background:var(--panel-2)}
.mob-result p{flex:1 1 220px; min-width:0; font-family:var(--f-body); font-size:13px; line-height:1.5; color:var(--panel-text)}
.mob-result code{flex-basis:100%; font-size:11.5px; color:var(--panel-dim); word-break:break-all}

/* ================= v4: rotating headline, directives, harness, manual testing ================= */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0}
.hero .hero-h .rot{display:block; position:relative}
.rot-line{display:block}
.rot.rotating .rot-line{position:absolute; left:0; top:0; width:100%}
.rot .w{display:inline-block; overflow:hidden; vertical-align:top; padding:.04em 0 .16em; margin:-.04em 0 -.16em}
.rot .w > span{display:inline-block}
.rot.rotating .rot-line:not(.is-on):not(.is-out){visibility:hidden}
.rot.rotating .w > span{transform:translateY(112%)}
.rot.rotating .rot-line.is-on .w > span{animation:word-in .8s var(--ease) both; animation-delay:calc(var(--k) * 45ms)}
.rot.rotating .rot-line.is-out .w > span{animation:word-out .5s var(--ease) both; animation-delay:calc(var(--k) * 22ms)}
@keyframes word-in{from{transform:translateY(112%)} to{transform:none}}
@keyframes word-out{from{transform:none} to{transform:translateY(-112%)}}
.rot-bar{display:flex; gap:6px; margin-top:22px; max-width:240px}
.rot-bar i{flex:1; height:3px; border-radius:3px; background:var(--rule-strong); overflow:hidden}
.rot-bar b{display:block; height:100%; background:var(--accent); transform-origin:left center; transform:scaleX(0)}
.con-log{user-select:none; -webkit-user-select:none}
.ln-cmd{background:rgba(47,227,198,.075); border-radius:5px; margin-inline:-6px; padding-inline:6px}
.ln-cmd .ln-who{color:var(--panel-accent)}
.ln-cmd .ln-who::before{background:var(--panel-accent); border-radius:0; clip-path:polygon(0 0, 100% 50%, 0 100%)}
.ln-cmd .ln-msg{color:var(--panel-text)}
.con-v.bump{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
.lane{transition:border-color .3s ease, box-shadow .3s ease}
.lane.hit{border-color:var(--panel-accent); box-shadow:0 0 0 3px rgba(47,227,198,.16)}
.lane.human{border-color:rgba(191,252,242,.45); background:rgba(47,227,198,.07)}
.lane.human b{color:#BFFCF2}
.pipe-legend{display:flex; flex-wrap:wrap; gap:8px 22px; padding:12px 18px; border-top:1px solid var(--panel-rule); font-family:var(--f-body); font-size:12px; color:var(--panel-dim)}
.pipe-legend span{display:inline-flex; align-items:center; gap:8px}
.pipe-legend i{display:inline-block; width:8px; height:8px; border-radius:50%}
.pipe-legend .lg-sig{background:#2FE3C6}
.pipe-legend .lg-man{background:#BFFCF2; box-shadow:0 0 6px rgba(191,252,242,.8)}
.pipe-legend .lg-ins{background:#FFFFFF; border-radius:1px; width:7px; height:7px; transform:rotate(45deg)}
.pipe-legend .lg-ver{background:linear-gradient(90deg, #FF6B6B 0 34%, #FF9F5A 34% 67%, #FFD166 67%)}
.xs{padding:14px 18px 16px; border-left:3px solid transparent; transition:background-color .4s ease, border-color .4s ease, opacity .35s ease}
.xs + .xs{border-top:1px solid var(--panel-rule)}
.xs.later{opacity:.3}
.xs[data-k="atk"][data-state="hit"]{background:var(--panel-high-wash); border-left-color:var(--panel-high)}
.xs[data-k="bot"][data-state="hit"]{background:rgba(47,227,198,.05); border-left-color:var(--panel-accent)}
.who-tag{font:500 11px/1 var(--f-mono); color:var(--panel-dim); padding:5px 7px; border-radius:5px; border:1px solid var(--panel-rule); white-space:nowrap}
.xs[data-k="bot"] .who-tag{color:var(--panel-accent); border-color:rgba(47,227,198,.35)}
.xs .cmd{margin:0; font-size:12.5px; line-height:1.65; color:var(--panel-text); white-space:pre-wrap; overflow-wrap:anywhere}
.cmd .pr{color:var(--panel-accent); user-select:none; -webkit-user-select:none}
.cmd .v{color:#C4D6D4}
.cmd .hl{color:var(--panel-accent); border-bottom:1px dashed rgba(47,227,198,.6)}
.cmd .tw.typing::after{content:""; display:inline-block; width:.6em; height:1.15em; margin-left:1px; background:var(--panel-accent); vertical-align:-.22em; animation:blink 1s steps(1) infinite}
.xs .out{margin-top:9px; font-family:var(--f-body); font-size:13.5px; color:var(--panel-dim); display:flex; gap:8px}
.xs .out b{color:var(--panel-text); font-weight:500}
.xs[data-k="atk"] .out b{color:var(--panel-high)}
.xs[data-k="bot"] .out b{color:var(--panel-accent)}
.xs .out svg{width:14px; height:14px; flex-shrink:0; margin-top:3px}
.status.botc{color:var(--panel-accent); border-color:rgba(47,227,198,.45); background:rgba(47,227,198,.07)}
@media (min-width: 1021px){ .sc-body{min-height:470px} }
.tk-human{color:var(--panel-accent)!important}
.tl .tk-human + .msg{color:var(--panel-text)}
.foot-tag{color:var(--text-2); font-weight:500}

/* ================= attack chain ================= */
.chain{position:relative; --p:1}
.chain-steps{list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; position:relative}
.chain-line{position:absolute; left:22px; right:22px; top:22px; height:2px; background:var(--rule-strong); z-index:0}
.chain-line i{position:absolute; inset:0; background:linear-gradient(90deg, var(--accent), var(--high)); transform-origin:left center; transform:scaleX(var(--p))}
.cstep{position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; min-width:0}
.cdot{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--sec-bg); border:2px solid var(--rule-strong); color:var(--text-3); font:800 15px/1 var(--f-display); transition:all .45s var(--ease)}
.cstep.on .cdot{border-color:var(--accent); background:var(--accent); color:var(--on-accent); box-shadow:0 0 0 6px var(--accent-wash)}
.ccard{border:1px solid var(--rule); border-radius:14px; background:var(--surface); padding:18px; display:flex; flex-direction:column; gap:10px; transition:border-color .45s ease, background-color .45s ease, transform .45s var(--ease)}
:root.js .cstep:not(.on) .ccard{background:transparent; border-style:dashed; transform:translateY(10px)}
.cstep.on .ccard{border-color:var(--rule-strong)}
.ccard h3{font-weight:720; font-stretch:106%; font-size:18px; line-height:1.25}
.ccard p{font-size:14.5px; color:var(--text-2)}
.chain-out{
  margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; justify-content:space-between;
  padding:22px 24px; border-radius:14px; border:1px solid var(--rule); background:var(--surface);
  transition:border-color .5s ease, box-shadow .5s ease, background-color .5s ease, transform .5s var(--ease);
}
:root.js .chain:not(.done) .chain-out{background:transparent; border-style:dashed; box-shadow:none; transform:translateY(10px)}
.chain.done .chain-out{border-color:var(--high); box-shadow:0 0 0 4px color-mix(in srgb, var(--high) 14%, transparent)}
.chain-out strong{font:740 20px/1.25 var(--f-display); font-stretch:106%}
.chain-out p{color:var(--text-2); font-size:15px; margin-top:4px}
.chain-out code{font-size:12.5px; color:var(--text-3); word-break:break-all}
.chain-out .right{display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:0}
@media (max-width: 960px){
  .chain-steps{grid-template-columns:minmax(0,1fr); padding-left:64px; gap:22px}
  .chain-line{left:21px; right:auto; top:22px; bottom:22px; width:2px; height:auto}
  .chain-line i{background:linear-gradient(180deg, var(--accent), var(--high)); transform-origin:center top; transform:scaleY(var(--p))}
  .cdot{position:absolute; left:-64px; top:0}
  .chain-out .right{align-items:flex-start}
}

/* ================= fix diff ================= */
.fix-grid{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:48px 64px; align-items:center}
@media (max-width: 1020px){ .fix-grid{grid-template-columns:minmax(0,1fr)} }
.tabs{display:flex; gap:4px; padding:6px; border-bottom:1px solid var(--panel-rule); background:var(--panel-2); overflow-x:auto}
.tab{font:500 13px/1 var(--f-body); color:var(--panel-dim); background:transparent; border:1px solid transparent; border-radius:7px; padding:9px 12px; cursor:pointer; white-space:nowrap; transition:all .2s ease}
.tab:hover{color:var(--panel-text)}
.tab[aria-selected="true"]{color:var(--panel-text); background:var(--panel); border-color:var(--panel-rule)}
.diff-file{padding:12px 16px 0; color:var(--panel-dim); font-size:12px}
.diff{margin:0; padding:10px 0 14px; min-height:292px; overflow-x:auto; font-size:12.5px; line-height:1.7}
.dl{display:block; white-space:pre; padding:0 16px 0 0; transition:opacity .3s ease, transform .3s var(--ease), background-color .3s ease}
.dl::before{content:attr(data-s); display:inline-block; width:34px; text-align:center; color:var(--panel-dim)}
.dl.add{background:rgba(47,227,160,.09); color:#BDF5DD}
.dl.add::before{color:var(--panel-ok)}
.dl.del{background:rgba(255,107,107,.09); color:#FFC1C1; text-decoration:line-through; text-decoration-color:rgba(255,107,107,.5)}
.dl.del::before{color:var(--panel-crit)}
.dl.ctx{color:#9FB4B5}
.diff.playing .dl:not(.on){opacity:0; transform:translateX(-6px)}
.fix-steps{display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px; border-top:1px solid var(--panel-rule); background:var(--panel-2); font-family:var(--f-body)}
.fs{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--panel-dim); padding:6px 10px; border-radius:999px; border:1px solid var(--panel-rule); transition:all .35s ease}
.fs svg{width:12px; height:12px; opacity:.4}
.fs.on{color:var(--panel-ok); border-color:rgba(47,227,160,.45); background:rgba(47,227,160,.07)}
.fs.on svg{opacity:1}
.fix-points{list-style:none; display:grid; gap:20px; margin-top:28px}
.fix-points li{display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px}
.fix-points .ic{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--rule-strong); color:var(--accent-text)}
.fix-points .ic svg{width:20px; height:20px}
.fix-points strong{display:block; font-weight:600; font-size:16px}
.fix-points span{color:var(--text-2); font-size:15px}

/* ================= services index ================= */
.svc-list{list-style:none; border-top:1px solid var(--rule)}
.svc{border-bottom:1px solid var(--rule)}
.svc-row{width:100%; display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr) 40px; gap:8px 40px; align-items:start; text-align:left; padding:26px 8px 26px 0; background:transparent; border:0; color:inherit; cursor:pointer; font:inherit; transition:background-color .2s ease, padding .25s ease}
.svc-row:hover{background:linear-gradient(90deg, var(--accent-wash), transparent 60%)}
.svc-row:hover, .svc.is-open .svc-row{padding-left:16px}
.svc-name{display:flex; flex-direction:column; gap:8px; font-family:var(--f-display); font-weight:750; font-stretch:110%; font-size:clamp(21px, 2.1vw, 26px); line-height:1.15; letter-spacing:-.015em}
.svc-new{align-self:flex-start; font:600 11.5px/1 var(--f-body); letter-spacing:0; color:var(--on-accent); background:var(--accent); padding:5px 8px; border-radius:5px}
.svc-main{display:flex; flex-direction:column; gap:14px; min-width:0}
.svc-sum{color:var(--text-2); font-size:16.5px; max-width:58ch}
.tags{display:flex; flex-wrap:wrap; gap:8px; list-style:none}
.tag{font-size:13px; line-height:1; padding:7px 11px; border:1px solid var(--rule-strong); border-radius:999px; color:var(--text-2); white-space:nowrap}
.svc-toggle{width:36px; height:36px; border-radius:50%; border:1px solid var(--rule-strong); display:grid; place-items:center; color:var(--text-2); justify-self:end; transition:transform .3s ease, background-color .2s ease, color .2s ease, border-color .2s ease}
.svc-toggle svg{width:14px; height:14px}
.svc.is-open .svc-toggle{transform:rotate(45deg); background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.svc-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease)}
.svc.is-open .svc-body{grid-template-rows:1fr}
.svc-body-inner{overflow:hidden; min-height:0}
.svc-detail{display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr) 40px; gap:24px 40px; padding:0 8px 30px 16px}
.svc-detail h3{font:600 14px/1.4 var(--f-body); color:var(--text-3); margin-bottom:12px}
.svc-detail ul{list-style:none; display:grid; gap:10px}
.svc-detail li{display:flex; gap:12px; color:var(--text); font-size:15.5px}
.svc-detail li::before{content:""; width:6px; height:6px; margin-top:9px; flex-shrink:0; background:var(--accent); border-radius:1px}
.svc-get{display:grid; gap:20px; align-content:start}
.svc-get p{font-size:15.5px; color:var(--text)}
@media (max-width: 820px){
  .svc-row{grid-template-columns:minmax(0,1fr) 40px; gap:14px 16px}
  .svc-main{grid-column:1 / -1; grid-row:2}
  .svc-toggle{grid-column:2; grid-row:1}
  .svc-detail{grid-template-columns:minmax(0,1fr); padding-left:0}
  .svc-row:hover, .svc.is-open .svc-row{padding-left:0}
  .svc-row:hover{background:transparent}
}

/* ================= compare ================= */
.table-scroll{overflow-x:auto; min-width:0; border:1px solid var(--rule); border-radius:14px; background:var(--surface)}
.compare{width:100%; min-width:720px; border-collapse:collapse; font-size:15px}
.compare th, .compare td{padding:16px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule)}
.compare tbody tr:last-child th, .compare tbody tr:last-child td{border-bottom:0}
.compare thead th{font:500 13.5px/1.3 var(--f-body); color:var(--text-3); background:var(--surface-2)}
.compare thead th.us-h{color:var(--accent-text); font-weight:600}
.compare tbody th{font-weight:600; color:var(--text); width:24%}
.compare td{color:var(--text-3)}
.compare td.us{color:var(--text); background:var(--accent-wash)}
.compare thead th.us-h{background:color-mix(in srgb, var(--accent) 14%, var(--surface-2))}
.cell{display:flex; gap:10px}
.cell svg{width:16px; height:16px; flex-shrink:0; margin-top:3px}
.st-no{color:var(--text-3)} .st-part{color:var(--med)} .st-yes{color:var(--ok)}
:root.js .compare tbody tr{opacity:0; transform:translateX(-10px); transition:opacity .5s ease, transform .5s var(--ease); transition-delay:calc(var(--i,0) * 70ms)}
:root.js .table-scroll.in .compare tbody tr{opacity:1; transform:none}

/* ================= process ================= */
.steps{list-style:none; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:28px; position:relative; --progress:1}
.steps::before, .steps::after{content:""; position:absolute; left:20px; right:20px; top:19px; height:2px}
.steps::before{background:var(--rule-strong)}
.steps::after{background:var(--accent); transform-origin:left center; transform:scaleX(var(--progress)); transition:transform 1.8s cubic-bezier(.3,.6,.2,1)}
.step{position:relative; display:flex; flex-direction:column; gap:12px; min-width:0}
.step-num{position:relative; z-index:1; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--sec-bg); border:2px solid var(--accent); font:800 16px/1 var(--f-display); color:var(--text); font-variant-numeric:tabular-nums; transition:background-color .3s ease, color .3s ease}
.steps.is-drawn .step-num{background:var(--accent); color:var(--on-accent)}
.step:nth-child(2) .step-num{transition-delay:.35s} .step:nth-child(3) .step-num{transition-delay:.7s}
.step:nth-child(4) .step-num{transition-delay:1.05s} .step:nth-child(5) .step-num{transition-delay:1.4s}
.step h3{font-weight:740; font-stretch:110%; font-size:22px; letter-spacing:-.01em; margin-top:8px}
.step-when{font-size:13.5px; color:var(--accent-text); font-weight:500}
.step p{color:var(--text-2); font-size:15.5px}
@media (max-width: 960px){
  .steps{grid-template-columns:minmax(0,1fr); gap:32px; padding-left:60px}
  .steps::before, .steps::after{left:19px; right:auto; top:20px; bottom:20px; width:2px; height:auto}
  .steps::after{transform-origin:center top; transform:scaleY(var(--progress))}
  .step-num{position:absolute; left:-60px; top:0}
  .step h3{margin-top:4px}
}

/* ================= company ================= */
.practice{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
@media (max-width: 900px){ .practice{grid-template-columns:minmax(0,1fr)} }
.area{display:grid; grid-template-columns:56px minmax(0,1fr); gap:20px; padding:26px 0 0; border-top:1px solid var(--rule-strong)}
.area-icon{width:56px; height:56px; border-radius:12px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--rule-strong); color:var(--accent-text)}
.area-icon svg{width:26px; height:26px}
.area h3{font-weight:760; font-stretch:110%; font-size:23px; line-height:1.15; letter-spacing:-.015em}
.area p{color:var(--text-2); font-size:15.5px; margin-top:10px}
.area .tags{margin-top:16px}
.standards{margin-top:clamp(40px, 5vw, 56px); padding:22px 24px; border-radius:12px; background:var(--surface); border:1px solid var(--rule); display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px}
.standards h3{font:600 14.5px/1.4 var(--f-body)}
.standards ul{list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px}
.standards li{font-size:14.5px; color:var(--text-2); display:flex; align-items:center; gap:8px}
.standards li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.nda-note{margin-top:18px; font-size:14.5px; color:var(--text-3); max-width:70ch}

/* ================= FAQ ================= */
.faq-grid{display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:40px 72px; align-items:start}
@media (max-width: 960px){ .faq-grid{grid-template-columns:minmax(0,1fr)} }
.faq-side{display:grid; gap:20px; align-content:start}
@media (min-width: 961px){ .faq-side{position:sticky; top:calc(env(safe-area-inset-top, 0px) + 104px)} }
.faq-side > p{color:var(--text-2); font-size:17px; max-width:40ch}
.faq-card{display:grid; gap:14px; justify-items:start; margin-top:8px; padding:22px; border-radius:14px; border:1px solid var(--rule); background:linear-gradient(160deg, var(--accent-wash), transparent 62%), var(--surface)}
.faq-card-ic{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--rule-strong); color:var(--accent-text)}
.faq-card-ic svg{width:20px; height:20px}
.faq-card strong{display:block; font-size:16px}
.faq-card p{color:var(--text-2); font-size:15px; margin-top:4px}
.faq-list{display:grid; gap:10px}
.qa{border:1px solid var(--rule); border-radius:14px; background:var(--surface); transition:border-color .3s ease, box-shadow .3s ease}
.qa:hover{border-color:var(--rule-strong)}
.qa.is-open{border-color:color-mix(in srgb, var(--accent) 45%, var(--rule)); box-shadow:0 0 0 4px var(--accent-wash)}
.qa-q{width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) 32px; gap:14px; align-items:center; padding:17px 18px 17px 20px; background:none; border:0; color:inherit; text-align:left; cursor:pointer; font:600 16.5px/1.35 var(--f-body)}
.qa-tag{font:500 11px/1 var(--f-mono); color:var(--accent-text); padding:6px 8px; border-radius:6px; background:var(--accent-wash); white-space:nowrap}
.qa-ic{width:32px; height:32px; border-radius:8px; border:1px solid var(--rule-strong); display:grid; place-items:center; color:var(--text-2); transition:transform .35s var(--ease), background-color .2s ease, color .2s ease, border-color .2s ease}
.qa-ic svg{width:14px; height:14px}
.qa-q:hover .qa-ic{color:var(--text); border-color:var(--text-3)}
.qa.is-open .qa-ic{transform:rotate(180deg); background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.qa-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease)}
.qa.is-open .qa-a{grid-template-rows:1fr}
.qa-inner{overflow:hidden; min-height:0}
.qa-inner p{padding:0 20px 20px; color:var(--text-2); font-size:15.5px; max-width:68ch}
@media (max-width: 560px){ .qa-q{grid-template-columns:minmax(0,1fr) 32px; gap:10px 12px} .qa-tag{grid-column:1 / -1; justify-self:start} }

/* ================= engage ================= */
.engage-grid{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:48px 72px; align-items:start}
@media (max-width: 960px){ .engage-grid{grid-template-columns:minmax(0,1fr)} }
.engage-copy h2{font-size:clamp(34px, 4.6vw, 56px); font-weight:820; font-stretch:114%; line-height:1; letter-spacing:-.025em}
.engage-copy > p{margin-top:20px; color:var(--text-2); font-size:17px; max-width:44ch}
.email-line{margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:15px; color:var(--text-2)}
.email-line code{font-size:15px; color:var(--text); user-select:all; padding:6px 10px; background:var(--surface); border:1px solid var(--rule); border-radius:6px}
.form-card{background:var(--surface); border:1px solid var(--rule); border-radius:16px; padding:clamp(20px, 3vw, 32px); min-width:0}
.form-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px}
.field{display:grid; gap:7px; min-width:0}
.field-full{grid-column:1 / -1}
@media (max-width: 560px){ .form-grid{grid-template-columns:minmax(0,1fr)} .field-full{grid-column:auto} }
.field label, .field legend{font-size:14px; font-weight:500; color:var(--text)}
.field .opt{color:var(--text-3); font-weight:400}
.field input, .field select, .field textarea{width:100%; font:400 15.5px/1.4 var(--f-body); color:var(--text); background:var(--bg); border:1px solid var(--rule-strong); border-radius:8px; padding:12px 14px; transition:border-color .15s ease, box-shadow .15s ease}
.field textarea{min-height:110px; resize:vertical}
.field input::placeholder, .field textarea::placeholder{color:var(--text-3)}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.field input[aria-invalid="true"]{border-color:var(--crit)}
.field-error{font-size:13px; color:var(--crit)}
fieldset.field{border:0; padding:0; margin:0}
.checks{display:flex; flex-wrap:wrap; gap:8px; margin-top:2px}
.check{position:relative}
.check input{position:absolute; opacity:0; width:1px; height:1px}
.check label{display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; font-size:14px; font-weight:500; color:var(--text-2); padding:9px 13px; border:1px solid var(--rule-strong); border-radius:999px; background:var(--bg); transition:border-color .15s ease, color .15s ease, background-color .15s ease}
.check label::before{content:""; width:12px; height:12px; border-radius:3px; border:1.5px solid var(--text-3); transition:all .15s ease}
.check input:checked + label{color:var(--text); border-color:var(--accent); background:var(--accent-wash)}
.check input:checked + label::before{background:var(--accent); border-color:var(--accent); box-shadow:inset 0 0 0 2px var(--surface)}
.check input:focus-visible + label{outline:2px solid var(--accent-text); outline-offset:2px}
.form-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-top:24px}
.form-foot p{font-size:13.5px; color:var(--text-3); max-width:36ch}
.brief-head{display:flex; align-items:flex-start; gap:12px; margin-bottom:16px}
.brief-head svg{width:22px; height:22px; color:var(--ok); flex-shrink:0; margin-top:2px}
.brief-head h3{font:700 20px/1.25 var(--f-display); font-stretch:108%}
.brief-head p{color:var(--text-2); font-size:15px; margin-top:4px}
.brief pre{margin:0; padding:16px; border-radius:8px; background:var(--bg); border:1px solid var(--rule); font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word; color:var(--text); max-height:320px; overflow:auto}
.brief-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
@media (prefers-reduced-motion: no-preference){ .brief:not([hidden]){animation:rise .5s var(--ease) both} }

/* ================= footer ================= */
.site-footer{border-top:1px solid var(--rule); padding-block:48px 48px; position:relative; overflow:hidden}
.foot{display:flex; flex-wrap:wrap; gap:24px 40px; align-items:center; justify-content:space-between}
.foot-links{display:flex; flex-wrap:wrap; gap:4px 20px; list-style:none}
.foot-links a{font-size:14.5px; color:var(--text-2); text-decoration:none}
.foot-links a:hover{color:var(--text)}
.svc-more{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:var(--accent-text); text-decoration:none; border-bottom:1px solid transparent}
.svc-more:hover{border-bottom-color:currentColor}
.foot-svc{margin-top:26px; display:flex; flex-wrap:wrap; gap:8px 22px; align-items:baseline}
.foot-svc-h{font:600 12.5px/1.6 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); text-decoration:none}
.foot-svc-h:hover{color:var(--accent-text)}
.foot-svc .foot-links a{font-size:13.5px}
.foot-legal{margin-top:28px; padding-top:24px; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:13.5px; color:var(--text-3)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
}

/* Styles only used by the service pages. Loaded after the shared site stylesheet, which is
   extracted from site.html at build time, so every token and component there is available. */

.page-hero{padding-block:clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); position:relative; overflow:hidden}
.page-hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse 70% 80% at 85% 10%, #000 10%, transparent 70%); mask-image:radial-gradient(ellipse 70% 80% at 85% 10%, #000 10%, transparent 70%)}
.page-hero > .wrap{position:relative; z-index:1}

.crumbs{margin-bottom:28px}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px 10px; font:500 13px/1.5 var(--f-mono); color:var(--text-3)}
.crumbs li{display:flex; align-items:center; gap:10px}
.crumbs li + li::before{content:"/"; color:var(--rule-strong)}
.crumbs a{color:var(--text-2); text-decoration:none}
.crumbs a:hover{color:var(--accent-text)}
.crumbs [aria-current]{color:var(--text-3)}

.page-h1{font-size:clamp(38px, 6vw, 72px); font-weight:800; font-stretch:112%; line-height:1; letter-spacing:-.025em; max-width:18ch}
.page-hook{margin-top:22px; font:700 clamp(20px, 2.3vw, 27px)/1.25 var(--f-display); font-stretch:105%; color:var(--accent-text); max-width:32ch}
.page-lede{margin-top:18px; font-size:clamp(17px, 1.5vw, 19px); color:var(--text-2); max-width:60ch}
.page-hero .tags{margin-top:26px}
.page-hero .hero-ctas{margin-top:32px}

.svc-sheet{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:0; border:1px solid var(--rule); border-radius:14px; background:var(--surface); overflow:hidden; box-shadow:var(--shadow)}
.svc-sheet > div{padding:clamp(22px, 3vw, 34px)}
.svc-sheet > div + div{border-left:1px solid var(--rule); background:var(--surface-2); display:grid; gap:22px; align-content:start}
.svc-sheet h3{font:600 13px/1.4 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin-bottom:14px}
.svc-sheet ul{list-style:none; display:grid; gap:12px}
.svc-sheet li{display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; font-size:16.5px}
.svc-sheet li::before{content:""; width:8px; height:8px; margin-top:9px; border-radius:2px; background:var(--accent); transform:rotate(45deg)}
.svc-sheet p{font-size:16.5px}
@media (max-width: 820px){
  .svc-sheet{grid-template-columns:minmax(0,1fr)}
  .svc-sheet > div + div{border-left:0; border-top:1px solid var(--rule)}
}

.prose{display:grid; gap:18px; max-width:68ch}
.prose p{font-size:17.5px; color:var(--text-2)}
.prose p:first-child{color:var(--text)}

.split-2{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:20px 56px; align-items:start}
@media (max-width: 860px){ .split-2{grid-template-columns:minmax(0,1fr)} }
.h2{font-size:clamp(28px, 3.4vw, 42px); font-weight:780; font-stretch:112%; line-height:1.05; letter-spacing:-.02em}
.sub{margin-top:14px; color:var(--text-2); font-size:17px; max-width:52ch}

.pitfalls{list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:clamp(28px, 4vw, 44px)}
.pitfalls li{padding:22px 22px 24px; border:1px solid var(--rule); border-radius:12px; background:var(--surface); display:grid; gap:8px; align-content:start}
.pitfalls h3{font:700 19px/1.25 var(--f-display); font-stretch:105%}
.pitfalls p{color:var(--text-2); font-size:15.5px}
.pitfalls .n{font:600 12.5px/1 var(--f-mono); color:var(--accent-text); letter-spacing:.06em}
@media (max-width: 760px){ .pitfalls{grid-template-columns:minmax(0,1fr)} }
.pitfalls-outro{margin-top:22px; padding:18px 22px; border-left:3px solid var(--accent); background:var(--accent-wash); border-radius:0 10px 10px 0; font-weight:600; max-width:70ch}

.cards{list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
.cards.cards-wide{grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr))}
@media (max-width: 900px){ .cards:not(.cards-wide){grid-template-columns:minmax(0,1fr)} }
.card{height:100%; display:grid; gap:12px; align-content:start; padding:24px 24px 22px; border:1px solid var(--rule); border-radius:14px; background:var(--surface); text-decoration:none; color:inherit; position:relative; transition:border-color .2s ease, transform .2s var(--ease), box-shadow .2s ease}
.card:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 18px 40px -24px var(--glow)}
.card h3{font:750 21px/1.2 var(--f-display); font-stretch:108%; letter-spacing:-.01em; padding-right:28px}
.card p{color:var(--text-2); font-size:15.5px}
.card .card-meta{display:flex; flex-wrap:wrap; gap:6px 14px; font:500 12.5px/1.5 var(--f-mono); color:var(--text-3); margin-top:4px}
.card .card-new{color:var(--accent-text)}
.card .card-go{position:absolute; top:22px; right:22px; color:var(--accent-text); font:700 18px/1 var(--f-mono); transition:transform .2s var(--ease)}
.card:hover .card-go{transform:translateX(3px)}

.cta-band{border-top:1px solid var(--rule)}
.cta-box{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 40px; padding:clamp(26px, 4vw, 44px); border-radius:16px; border:1px solid var(--rule-strong); background:radial-gradient(120% 140% at 100% 0%, var(--accent-wash), transparent 60%), var(--surface)}
.cta-box p{color:var(--text-2); margin-top:10px; max-width:52ch}
.cta-box .hero-ctas{margin:0}

.band-tight{padding-block:clamp(56px, 7vw, 96px)}