/* Aster v3 site — shared design system. Larven-inspired structure, Aster identity.
   Tokens first; every component draws from them. Page-only styles live in css/pages/. */
@font-face{font-family:Jakarta;src:url(../../../assets/fonts/PlusJakartaSans-Variable.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:Serif;src:url(../../../assets/fonts/InstrumentSerif-Italic.woff2) format("woff2");font-style:italic;font-display:swap}
:root{
  --bg:#0a0a0a;--bg-2:#0e0f0e;--panel:#121312;--panel-2:#171917;--line:#ffffff14;--line-2:#ffffff22;
  --text:#f2f3ef;--muted:#8d938a;--soft:#b9beb5;
  --lime:#d7fb8b;--lime-ink:#172113;--lime-glow:#c7f26a;--teal:#5fd3b5;--coral:#ff8e78;--amber:#f5c46b;--violet:#b9a3ec;
  --r-sm:10px;--r:16px;--r-lg:24px;--r-xl:32px;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease:cubic-bezier(.2,.8,.2,1);
  --t-fast:.18s;--t:.32s;--t-slow:.7s;
  --container:1200px;--gutter:clamp(18px,4vw,32px);--section:clamp(84px,11vw,148px)
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:400 16px/1.6 Jakarta,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block}a{color:inherit;text-decoration:none}ul,ol{list-style:none}
button,input{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--lime);color:var(--lime-ink);padding:10px 14px;border-radius:8px}.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
.container{width:min(var(--container),100% - var(--gutter)*2);margin-inline:auto}
.preview-flag{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:90;font:600 11px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.08em;background:#000c;border:1px solid var(--line-2);color:var(--soft);padding:9px 14px;border-radius:999px;backdrop-filter:blur(8px);white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}

/* Type */
h1,h2,h3{font-weight:600;letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(44px,7.4vw,96px);letter-spacing:-.06em}
h2{font-size:clamp(36px,5vw,64px);letter-spacing:-.05em}
h3{font-size:20px;letter-spacing:-.025em;line-height:1.25}
.muted{color:var(--muted)}
.eyebrow{font:600 11.5px/1.4 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--muted)}
.eyebrow.accent{color:var(--lime)}.eyebrow.center{text-align:center}
p{color:var(--soft)}
.link{color:var(--lime);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--t) var(--ease)}
.link:hover{background-size:100% 1px}
.link-quiet{color:var(--soft);font-size:14px;transition:color var(--t-fast)}.link-quiet:hover{color:var(--text)}

/* Buttons: pill, physical press, arrow leans forward */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 20px;border-radius:999px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease),background-color var(--t-fast),box-shadow var(--t) var(--ease),border-color var(--t-fast)}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t) var(--ease)}
.btn:hover svg{transform:translateX(3px)}.btn:active{transform:scale(.97)}
.btn-primary{background:var(--lime);color:var(--lime-ink);box-shadow:0 1px 0 #ffffff80 inset,0 8px 24px -12px #d7fb8bcc}
.btn-primary:hover{box-shadow:0 1px 0 #ffffff80 inset,0 10px 34px -10px #d7fb8bee}
.btn-ghost{background:#ffffff0a;border-color:var(--line-2);color:var(--text)}.btn-ghost:hover{background:#ffffff14;border-color:#ffffff38}
.btn-sm{min-height:38px;padding:0 15px;font-size:14px}.btn-lg{min-height:54px;padding:0 26px;font-size:16px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.actions.center{justify-content:center}

/* Announcement + nav */
.announce a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:40px;padding:6px 16px;font-size:13px;color:var(--soft);border-bottom:1px solid var(--line);background:#0d0e0d;text-align:center}
.announce a:hover{color:var(--text)}
.announce svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.announce-pill{font:700 10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.1em;background:var(--lime);color:var(--lime-ink);padding:5px 8px;border-radius:999px}
.nav{position:sticky;top:0;z-index:50;transition:background var(--t),border-color var(--t),backdrop-filter var(--t);border-bottom:1px solid transparent}
.nav.is-stuck{background:#0a0a0acc;backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:var(--line)}
.nav-row{display:flex;align-items:center;gap:28px;height:68px}
.wordmark{display:inline-flex;align-items:flex-start;font-size:27px;font-weight:700;letter-spacing:-.06em;line-height:1}
.wordmark svg{width:13px;height:13px;margin-left:2px;stroke:var(--lime);stroke-width:7;fill:none;transition:transform .6s var(--ease-out)}
.wordmark:hover svg{transform:rotate(60deg)}
.nav-links{display:flex;gap:4px;margin-left:12px}
.nav-links>a{font-size:14px;color:var(--soft);padding:8px 12px;border-radius:999px;transition:color var(--t-fast),background var(--t-fast)}
.nav-links>a:hover{color:var(--text);background:#ffffff0d}
.nav-cta{display:flex;align-items:center;gap:16px;margin-left:auto}

.nav-menu{display:none;position:relative}
.nav-menu summary{list-style:none;display:grid;place-content:center;gap:5px;width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);cursor:pointer}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary span{display:block;width:16px;height:1.6px;background:var(--text);border-radius:2px;transition:transform var(--t) var(--ease)}
.nav-menu[open] summary span:first-child{transform:translateY(3.3px) rotate(45deg)}.nav-menu[open] summary span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
.nav-sheet{position:absolute;right:0;top:calc(100% + 10px);display:grid;min-width:220px;padding:8px;border-radius:16px;background:#121312f2;border:1px solid var(--line-2);backdrop-filter:blur(14px);box-shadow:0 30px 60px -20px #000;animation:sheet .25s var(--ease-out)}
.nav-sheet a{padding:12px 14px;border-radius:10px;font-size:15px;color:var(--soft)}.nav-sheet a:hover{background:#ffffff0d;color:var(--text)}
@keyframes sheet{from{opacity:0;transform:translateY(-6px) scale(.98)}}

/* Hero */
.hero{position:relative;padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(48px,8vw,96px);overflow:hidden;isolation:isolate}
.hero-glow{position:absolute;inset:auto -20% -10% -20%;height:min(900px,110vw);z-index:-1;
  background:radial-gradient(50% 45% at 50% 70%,#b7f05a40,transparent 70%),radial-gradient(35% 30% at 30% 80%,#3fd3a830,transparent 70%),radial-gradient(35% 30% at 72% 76%,#7c9cff22,transparent 70%);filter:blur(10px)}
.hero-grid{position:absolute;inset:0;z-index:-1;opacity:.5;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(60% 50% at 50% 20%,#000,transparent 75%)}
.hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center}
.chip-live{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--soft);padding:7px 14px 7px 11px;border:1px solid var(--line-2);border-radius:999px;background:#ffffff08;margin-bottom:26px}
.chip-live i,.status-live i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 #d7fb8b88;animation:live 2.2s ease-out infinite}
@keyframes live{70%,100%{box-shadow:0 0 0 7px #d7fb8b00}}
.hero-sub{max-width:620px;margin-top:24px;font-size:clamp(16px,1.6vw,19px);line-height:1.6}
.repo-form{display:flex;align-items:center;gap:8px;width:min(560px,100%);margin-top:34px;padding:7px 7px 7px 16px;border-radius:999px;background:#ffffff0d;border:1px solid var(--line-2);
  box-shadow:0 20px 50px -20px #000,0 0 0 0 #d7fb8b00;transition:border-color var(--t),box-shadow var(--t)}
.repo-form:focus-within{border-color:#d7fb8b80;box-shadow:0 20px 50px -20px #000,0 0 0 4px #d7fb8b1f}
.repo-icon img{filter:invert(1);opacity:.7}
.repo-form input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:16px;color:var(--text)}
.repo-form input::placeholder{color:#6f756c}
.hero-checks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:18px;font-size:13px;color:var(--muted)}
.hero-checks li::before{content:"✓";color:var(--lime);margin-right:7px}

/* Product screen */
.screen{position:relative;margin-top:clamp(52px,7vw,84px);border-radius:var(--r-lg);background:linear-gradient(#ffffff10,#ffffff05);padding:8px;border:1px solid var(--line-2);
  box-shadow:0 40px 120px -40px #000,0 0 80px -30px #c7f26a40}
.screen::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(180deg,#d7fb8b55,transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.screen-bar{display:flex;align-items:center;gap:12px;padding:8px 10px 12px}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#ffffff1f}
.screen-url{font:12px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--muted)}
.tag{font:600 10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em;color:var(--lime);border:1px solid #d7fb8b4d;padding:5px 7px;border-radius:6px}
.screen-bar .tag{margin-left:auto}
.screen-body{display:grid;grid-template-columns:220px 1fr;min-height:430px;border-radius:calc(var(--r-lg) - 8px);overflow:hidden;background:#0c0d0c;border:1px solid var(--line)}
.screen-steps{display:flex;flex-direction:column;gap:18px;padding:20px;border-right:1px solid var(--line);background:#0f100f}
.screen-brand{font-weight:700;letter-spacing:-.05em;font-size:18px}.screen-brand b{color:var(--lime)}
.screen-steps ol{display:grid;gap:4px}
.screen-steps li{display:flex;align-items:center;gap:10px;font-size:13px;color:#6d736a;padding:8px 10px;border-radius:9px;transition:color var(--t),background var(--t)}
.screen-steps li span{width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;transition:background var(--t),border-color var(--t),box-shadow var(--t)}
.screen-steps li.is-done{color:var(--soft)}.screen-steps li.is-done span{background:var(--soft);border-color:var(--soft)}
.screen-steps li.is-on{color:var(--text);background:#ffffff0b}.screen-steps li.is-on span{background:var(--lime);border-color:var(--lime);box-shadow:0 0 0 4px #d7fb8b26}
.screen-repo{margin-top:auto;display:flex;align-items:center;gap:8px;font:12px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--muted)}.screen-repo img{filter:invert(1);opacity:.6}
.screen-main{position:relative;padding:clamp(22px,3vw,36px)}
.scene{position:absolute;inset:clamp(22px,3vw,36px);opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .55s var(--ease-out);pointer-events:none}
.scene.is-on{opacity:1;transform:none}
.scene-kick{font:600 11px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em;color:var(--lime);text-transform:uppercase;margin-bottom:10px}
.scene h3{font-size:clamp(20px,2.2vw,26px);margin-bottom:22px}
.repo-list{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:520px}
.repo-list li{display:flex;align-items:center;gap:12px;padding:13px 16px;font:13px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--soft)}
.repo-list li+li{border-top:1px solid var(--line)}
.repo-list .box{width:16px;height:16px;border-radius:5px;border:1.5px solid #ffffff40}
.repo-list .is-picked .box{background:var(--lime);border-color:var(--lime);box-shadow:inset 0 0 0 3px #0c0d0c}
.repo-list em{margin-left:auto;font-style:normal;font-family:Jakarta;font-size:11px;color:var(--lime);background:#d7fb8b14;border-radius:999px;padding:4px 9px}
.fake-btn{display:inline-flex;margin-top:22px;padding:10px 16px;border-radius:999px;background:var(--lime);color:var(--lime-ink);font-weight:600;font-size:14px}
.scene[data-scene="0"].is-on .fake-btn{animation:press 1.8s var(--ease) .9s both}
@keyframes press{0%,60%{transform:none}70%{transform:scale(.94)}80%,100%{transform:none}}
.meter{height:8px;border-radius:99px;background:#ffffff10;overflow:hidden;max-width:560px}
.meter span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#9fd24f,var(--lime));box-shadow:0 0 18px #d7fb8b88}
.meter-label{margin-top:12px;font-size:13px;color:var(--muted)}.meter-label b{color:var(--text);font-variant-numeric:tabular-nums}
.file-feed{margin-top:18px;display:grid;gap:6px;font:12.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#7d8379;max-width:560px}
.file-feed li{display:flex;justify-content:space-between;animation:feed .35s var(--ease-out) both}.file-feed li::after{content:"read";color:#5c6f45}
@keyframes feed{from{opacity:0;transform:translateY(6px)}}
.check-list{display:grid;gap:10px;max-width:440px}
.check-list li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:14px;color:var(--soft);opacity:.35;transition:opacity .3s,border-color .3s}
.check-list li::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid #ffffff30;border-top-color:var(--lime);flex:none}
.check-list li.is-running{opacity:1;border-color:#d7fb8b40}.check-list li.is-running::before{animation:spin .8s linear infinite}
.check-list li.is-done{opacity:1}.check-list li.is-done::before{border:0;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8 3 3 5-6' fill='none' stroke='%23172113' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat}
@keyframes spin{to{transform:rotate(360deg)}}
.finding-list{display:grid;gap:10px;max-width:600px}
.finding-list li{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#ffffff05;opacity:0;transform:translateX(14px)}
.scene.is-on .finding-list li{animation:slidein .5s var(--ease-out) both}
.scene.is-on .finding-list li:nth-child(2){animation-delay:.18s}.scene.is-on .finding-list li:nth-child(3){animation-delay:.36s}
@keyframes slidein{to{opacity:1;transform:none}}
.finding-list b{display:block;font-size:14px;font-weight:600;color:var(--text)}.finding-list small{font:12px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--muted)}
.sev{font:700 10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.1em;padding:6px 8px;border-radius:6px;min-width:66px;text-align:center}
.sev-high{background:#ff8e7826;color:var(--coral)}.sev-med{background:#f5c46b24;color:var(--amber)}.sev-low{background:#5fd3b522;color:var(--teal)}
.diff{display:grid;gap:4px;font:13px/1.7 ui-monospace,"SF Mono",Menlo,Consolas,monospace;border:1px solid var(--line);border-radius:12px;padding:14px;background:#080908;max-width:640px;overflow:hidden;white-space:pre}
.diff span{padding:2px 8px;border-radius:5px;clip-path:inset(0 100% 0 0)}
.diff .del{background:#ff8e7814;color:#ffb3a3}.diff .add{background:#d7fb8b12;color:#d6f3a2}
.scene.is-on .diff span{animation:wipe .7s var(--ease) both}.scene.is-on .diff .add{animation-delay:.55s}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
.scene-note{margin-top:14px;font-size:13px;color:var(--muted)}
.pr-card{display:flex;align-items:center;gap:14px;max-width:600px;padding:18px;border-radius:14px;border:1px solid #d7fb8b40;background:#d7fb8b0a}
.scene.is-on .pr-card{animation:pop .6s var(--ease-out) both}
@keyframes pop{from{opacity:0;transform:scale(.94)}}
.pr-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#d7fb8b1a}.pr-icon svg{width:18px;height:18px;fill:none;stroke:var(--lime);stroke-width:1.5;stroke-linecap:round}
.pr-card b{display:block;font-size:15px}.pr-card small{font-size:12.5px;color:var(--muted)}
.pr-state{margin-left:auto;font:700 10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.1em;color:var(--soft);border:1px solid var(--line-2);padding:6px 8px;border-radius:6px}
.screen figcaption,.panel figcaption{margin-top:12px;text-align:center;font-size:12.5px;color:#6c7269}

/* Marquees */
.marquees{padding-block:30px 10px;display:grid;gap:18px;border-block:1px solid var(--line);background:var(--bg-2)}
.marquees .eyebrow{margin-bottom:6px}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:48px;width:max-content;animation:marquee 34s linear infinite;padding-right:48px}
.marquee-reverse .marquee-track{animation-direction:reverse;animation-duration:40s}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:500;color:var(--soft);white-space:nowrap}
/* Single-colour marks are drawn black; flip them for the dark ground. Brand-colour marks stay as they are. */
.marquee img:not([src*="-color"]){filter:invert(1) brightness(.92)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Sections */
.section{padding-block:var(--section)}
.section-alt{background:var(--bg-2);border-block:1px solid var(--line)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,88px);align-items:center}
.split-reverse{grid-template-columns:.95fr 1.05fr}
.copy p:not(.eyebrow){margin-top:20px;font-size:17px;line-height:1.7;max-width:48ch}
.copy .eyebrow{margin-bottom:18px}
.head-center{text-align:center;margin-bottom:clamp(40px,6vw,72px);display:flex;flex-direction:column;align-items:center}
.head-center .eyebrow{margin-bottom:18px}
.head-split{display:grid;grid-template-columns:1.1fr 1fr;gap:24px 64px;align-items:end;margin-bottom:48px}
.head-split .eyebrow{margin-bottom:18px}.head-split>p{font-size:17px;line-height:1.7}
.panel{position:relative;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);padding:22px;box-shadow:0 30px 80px -40px #000}

/* Scan simulation */
.sim-head{display:flex;justify-content:space-between;align-items:flex-end}
.sim-count{display:flex;align-items:baseline;gap:10px;margin-top:8px}
.sim-count b{font-size:44px;font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:var(--text)}
.sim-count span{font-size:13px;color:var(--muted)}
.sim-flags .sim-count b{color:var(--coral)}
.sim-meter{height:4px;border-radius:9px;background:#ffffff10;margin:18px 0;overflow:hidden}.sim-meter span{display:block;height:100%;width:0;background:var(--lime);box-shadow:0 0 12px #d7fb8b}
.sim-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.sim-grid i{aspect-ratio:1;border-radius:5px;background:#ffffff0a;border:1px solid #ffffff0d;transition:background .35s,border-color .35s,transform .35s var(--ease-out),box-shadow .35s}
.sim-grid i.is-read{background:#d7fb8b1f;border-color:#d7fb8b2e}
.sim-grid i.is-scan{background:#d7fb8b66;transform:scale(.86)}
.sim-grid i.f-high{background:var(--coral);border-color:var(--coral);box-shadow:0 0 14px #ff8e7888;transform:scale(1.08)}
.sim-grid i.f-med{background:var(--amber);border-color:var(--amber);box-shadow:0 0 12px #f5c46b77}
.sim-grid i.f-low{background:var(--teal);border-color:var(--teal)}
.sim-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;font-size:12px;color:var(--muted)}
.sim-legend span{display:inline-flex;align-items:center;gap:6px}.sim-legend i{width:9px;height:9px;border-radius:3px}
.l-high{background:var(--coral)}.l-med{background:var(--amber)}.l-low{background:var(--teal)}.l-ok{background:#d7fb8b55}

/* Steps with looping mini demos (CSS only, paused offscreen) */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.step{grid-column:span 2;position:relative;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);padding:18px 18px 26px;overflow:hidden;isolation:isolate;transition:border-color var(--t),transform var(--t) var(--ease)}
.steps>.step:nth-child(-n+2){grid-column:span 3}
.step:hover{border-color:var(--line-2);transform:translateY(-3px)}
.step-n{display:block;margin-top:20px;font:600 11px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--lime)}
.step h3{margin-top:8px}.step p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--muted)}
.demo{position:relative;height:170px;border-radius:14px;background:radial-gradient(80% 90% at 50% 100%,#d7fb8b14,transparent 70%),#0c0d0c;border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:18px 22px}
.demo *{animation-play-state:paused!important}
.step.is-playing .demo *,[data-demo].is-playing .demo *{animation-play-state:running!important}
/* 01 connect: the repo name types itself, then chips arrive */
.d-input{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:10px;border:1px solid var(--line-2);background:#ffffff08;font:13px ui-monospace,"SF Mono",Menlo,Consolas,monospace;max-width:300px}
.d-input img{filter:invert(1);opacity:.7}
.d-type{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:type 6s steps(16) infinite}
.d-caret{width:2px;height:16px;background:var(--lime);animation:caret 1s steps(2,start) infinite}
@keyframes type{0%{width:0}35%,85%{width:16ch}95%,100%{width:0}}
@keyframes caret{to{visibility:hidden}}
.d-chips{display:flex;gap:8px;margin-top:14px}
.d-chips span{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid #d7fb8b40;color:var(--lime);background:#d7fb8b0d;opacity:0;animation:chip 6s var(--ease-out) infinite;animation-delay:calc(2.2s + var(--d))}
@keyframes chip{0%{opacity:0;transform:translateY(6px)}8%,55%{opacity:1;transform:none}65%,100%{opacity:0}}
/* 02 scan: folders fill */
.d-row{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:10px;font:12px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--muted);margin:5px 0}
.d-row i{height:8px;border-radius:9px;background:linear-gradient(90deg,#9fd24f,var(--lime));transform-origin:0 50%;transform:scaleX(0);width:var(--w);animation:grow 6s var(--ease-out) infinite;animation-delay:var(--d)}
@keyframes grow{0%{transform:scaleX(0)}30%,80%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}
.d-pct{position:absolute;right:18px;top:14px;font:600 12px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--lime);animation:pct 6s var(--ease-out) infinite}
@keyframes pct{0%,30%{opacity:0;transform:scale(.8)}38%,80%{opacity:1;transform:none}92%,100%{opacity:0}}
/* 03 findings: tiles settle, three light up by severity */
.demo-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-content:center}
.demo-tiles i{aspect-ratio:1;border-radius:7px;background:#ffffff0d;opacity:0;transform:scale(.85);animation:tile 6s var(--ease-out) infinite;animation-delay:var(--d)}
.demo-tiles .t-high{--c:var(--coral)}.demo-tiles .t-med{--c:var(--amber)}.demo-tiles .t-low{--c:var(--teal)}
@keyframes tile{0%{opacity:0;transform:scale(.85)}10%{opacity:1;transform:none}100%{opacity:1}}
.demo-tiles i[class]{animation-name:tile-hot}
@keyframes tile-hot{0%{opacity:0;transform:scale(.85)}10%{opacity:1;transform:none;background:#ffffff0d}30%,85%{background:var(--c);box-shadow:0 0 16px var(--c)}100%{opacity:1;background:#ffffff0d}}
/* 04 models: a selector glides between providers */
.d-logos{display:flex;justify-content:space-between;padding:0 6px}
.d-logos img{width:26px;height:26px;padding:4px;border-radius:8px;background:#ffffff0f}
.d-logos img:nth-child(1),.d-logos img:nth-child(2){filter:invert(1)}
.d-track{position:relative;height:6px;border-radius:9px;background:#ffffff12;margin:16px 6px 0}
.d-knob{position:absolute;top:50%;left:0;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px #d7fb8b26;animation:knob 6s var(--ease) infinite}
@keyframes knob{0%,15%{left:4%}30%,45%{left:36%}60%,75%{left:66%}90%,100%{left:96%}}
.d-cost{margin-top:16px;font-size:12px;color:var(--muted);text-align:center}
/* 05 PR: diff wipes in, the trend line draws, the badge pops */
.d-diff{display:grid;gap:4px;font:12px ui-monospace,"SF Mono",Menlo,Consolas,monospace;max-width:320px}
.d-diff span{padding:3px 8px;border-radius:5px;clip-path:inset(0 100% 0 0);animation:dwipe 6s var(--ease) infinite}
.d-diff .del{background:#ff8e7814;color:#ffb3a3}.d-diff .add{background:#d7fb8b12;color:#d6f3a2;animation-delay:.4s}
@keyframes dwipe{0%{clip-path:inset(0 100% 0 0)}15%,85%{clip-path:inset(0)}95%,100%{clip-path:inset(0 100% 0 0)}}
.d-line{position:absolute;right:16px;bottom:16px;width:46%;height:60px;fill:none;stroke:var(--lime);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:draw 6s var(--ease) infinite;filter:drop-shadow(0 0 6px #d7fb8b88)}
@keyframes draw{0%,20%{stroke-dashoffset:400}60%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:400}}
.d-badge{position:absolute;left:22px;bottom:18px;font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;background:var(--lime);color:var(--lime-ink);animation:badge 6s var(--ease-out) infinite}
@keyframes badge{0%,40%{opacity:0;transform:translateY(8px) scale(.9)}50%,85%{opacity:1;transform:none}95%,100%{opacity:0}}

/* Guides with real images */
.guides{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.guide-feature{grid-column:1/-1}
.guide a{display:flex;flex-direction:column;height:100%;border-radius:var(--r-lg);overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:transform var(--t) var(--ease),border-color var(--t),box-shadow var(--t)}
.guide-feature a{flex-direction:row}
.guide figure{aspect-ratio:16/9;overflow:hidden;background:#151715}
.guide-feature figure{flex:0 0 60%}
.guide img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.guide a>div{display:grid;gap:8px;align-content:start;padding:18px 20px 22px}
.guide-feature a>div{align-content:center;padding:clamp(26px,4vw,56px);gap:14px}
.guide.guide-feature h3{font-size:clamp(26px,3vw,42px);letter-spacing:-.045em;line-height:1.06}
.guide.guide-feature p{font-size:17px}
.guide-key{font:600 10.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.13em;color:var(--lime)}
.guide h3{font-size:17px}.guide p{color:var(--muted)}
.guide a:hover{transform:translateY(-4px);border-color:#d7fb8b44;box-shadow:0 24px 60px -30px #000,0 0 0 1px #d7fb8b22}
.guide a:hover img{transform:scale(1.05)}

/* Benchmark race */
.race-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.race-rows{display:grid;gap:12px}
.race-rows li{display:grid;grid-template-columns:118px 1fr 58px;align-items:center;gap:14px}
.race-name{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--soft)}.race-name b{color:var(--lime);font-size:18px;line-height:1}
.race-bar{height:30px;border-radius:8px;background:#ffffff08;overflow:hidden}
.race-bar i{display:block;height:100%;width:var(--v,0%);border-radius:8px;background:linear-gradient(90deg,#6f6488,#9c8fbf);transition:width 1.4s var(--ease-out)}
.is-aster .race-bar i{background:linear-gradient(90deg,#9fd24f,var(--lime));box-shadow:0 0 20px #d7fb8b55}
.race-val{font-size:14px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.is-aster .race-val{color:var(--lime)}

/* Trust bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{position:relative;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);padding:26px;overflow:hidden;isolation:isolate;transition:border-color var(--t)}
.tile:hover{border-color:var(--line-2)}
.tile h3{margin-top:18px}.tile p{margin-top:8px;font-size:15px;color:var(--muted)}
.tile-icon{width:30px;height:30px;fill:none;stroke:var(--lime);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.lock-stage{width:64px;height:72px;animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(-3deg)}}
.tile-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:40px;align-items:center}
.tile-wide h3{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.045em;margin-top:14px}
.status-live{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--lime)}
.orbit{position:relative;height:260px}
.orbit-ring{position:absolute;inset:16% 18%;border:1px dashed #d7fb8b33;border-radius:50%;animation:turn 60s linear infinite}
.orbit-ring-2{inset:2% 4%;border-color:#ffffff14;animation-duration:90s;animation-direction:reverse}
@keyframes turn{to{transform:rotate(360deg)}}
.orbit-core{position:absolute;left:50%;top:50%;width:70px;height:80px;margin:-40px 0 0 -35px;filter:drop-shadow(0 0 24px #d7fb8b55)}
.o{position:absolute;width:44px;height:44px;padding:9px;border-radius:13px;background:#f4f6ee;box-shadow:0 10px 24px -10px #000;animation:float 7s ease-in-out infinite}
.o1{left:8%;top:14%}.o2{right:8%;top:10%;animation-delay:-1s}.o3{left:2%;bottom:20%;animation-delay:-2s}.o4{right:4%;bottom:18%;animation-delay:-3s}.o5{left:36%;top:-2%;animation-delay:-4s}.o6{left:60%;bottom:0;animation-delay:-5s}
@keyframes float{50%{transform:translateY(-8px)}}

/* Pricing teaser */
.toggle{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;margin-top:28px;padding:5px;border-radius:999px;border:1px solid var(--line-2);background:#ffffff08}
.toggle button{position:relative;padding:9px 20px;border:0;background:none;border-radius:999px;font-size:14px;font-weight:600;color:var(--soft);cursor:pointer;transition:color var(--t)}
.toggle button[aria-pressed="true"]{color:var(--lime-ink)}
.toggle em{font-style:normal;font-size:12px;opacity:.75}
.toggle-thumb{position:absolute;z-index:-1;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--lime);transition:translate .4s var(--ease-out)}
.toggle:has([data-period="yearly"][aria-pressed="true"]) .toggle-thumb{translate:100% 0}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.plan{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);padding:26px}
.plan-featured{background:linear-gradient(180deg,#d7fb8b14,var(--panel) 45%);border-color:#d7fb8b55;box-shadow:0 0 60px -30px #d7fb8b66}
.plan-badge{position:absolute;top:18px;right:18px;font:700 9.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em;color:var(--lime-ink);background:var(--lime);padding:5px 8px;border-radius:999px}
.plan-sub{font-size:14px;color:var(--muted);margin-top:4px}
.price{display:flex;align-items:baseline;gap:6px;margin:22px 0}
.price b{font-size:44px;font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--text)}
.price span{font-size:14px;color:var(--muted)}
.plan ul{display:grid;gap:9px;margin-bottom:26px;font-size:14px;color:var(--soft)}
.plan li::before{content:"✓";color:var(--lime);margin-right:8px}
.plan .btn{margin-top:auto}
.fine{margin-top:26px;text-align:center;font-size:13px;color:var(--muted)}

/* CTA */
.cta{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(96px,13vw,170px);text-align:center;border-top:1px solid var(--line)}
.cta-glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(45% 60% at 50% 100%,#c7f26a33,transparent 70%),radial-gradient(30% 40% at 25% 90%,#3fd3a826,transparent 70%)}
.cta-inner{display:flex;flex-direction:column;align-items:center}
.cta-inner p{margin-top:20px;font-size:18px}
.cta-cast{display:flex;align-items:flex-end;margin-bottom:28px}
.cta-cast span{display:block;width:clamp(64px,7vw,92px);height:clamp(72px,8vw,104px)}
.cta-cast span+span{margin-left:-12px}
.cta-cast span:nth-child(1){transform:rotate(-9deg)}.cta-cast span:nth-child(2){transform:translateY(-14px)}.cta-cast span:nth-child(3){transform:rotate(9deg)}

/* FAQ */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq-head{position:sticky;top:110px}.faq-head .eyebrow{margin-bottom:18px}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;font-size:17px;font-weight:500;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary span{position:relative;width:14px;height:14px;flex:none}
.faq-item summary span::before,.faq-item summary span::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;border-radius:2px;background:var(--lime);transition:transform var(--t) var(--ease)}
.faq-item summary span::after{transform:rotate(90deg)}
.faq-item[open] summary span::after{transform:rotate(0)}
.faq-item p{padding:0 4px 22px;font-size:15.5px;line-height:1.7;max-width:62ch}
@supports (interpolate-size:allow-keywords){
  .faq-item{interpolate-size:allow-keywords}
  .faq-item::details-content{block-size:0;overflow:clip;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
  .faq-item[open]::details-content{block-size:auto}
}

/* Reveal: hidden only when JS is ready to reveal it */
.js [data-reveal]:not(.is-in){opacity:0;transform:translateY(16px)}
.js.reveal-fallback [data-reveal]{opacity:1;transform:none}

/* Responsive */
@media(max-width:1020px){
  .nav-links{display:none}.nav-menu{display:block}
  .split,.split-reverse,.head-split,.faq,.tile-wide{grid-template-columns:1fr}
  .split-reverse .copy{order:-1}
  .steps{grid-template-columns:1fr 1fr}.steps>.step,.steps>.step:nth-child(-n+2){grid-column:span 1}.steps>.step:last-child{grid-column:1/-1}
  .guides{grid-template-columns:repeat(2,1fr)}.guide-feature a{flex-direction:column}
  .plans{grid-template-columns:1fr 1fr}.bento{grid-template-columns:1fr}
  .faq-head{position:static}
}
@media(max-width:680px){
  .screen-body{grid-template-columns:1fr;min-height:380px}.screen-steps{display:none}
  .screen{padding:6px}
  .repo-form{flex-wrap:wrap;border-radius:20px;padding:8px}.repo-form input{padding:8px 4px}.repo-form .btn{width:100%}
  .steps,.plans,.guides{grid-template-columns:1fr}.steps>.step:last-child{grid-column:auto}
  .sim-grid{grid-template-columns:repeat(8,1fr)}
  .race-rows li{grid-template-columns:96px 1fr 50px}
  .nav-cta .link-quiet{display:none}
  .footer p{margin-left:0}
}

/* Reduced motion: every story is shown in its finished state */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .marquee-track{animation:none!important;flex-wrap:wrap;width:auto;justify-content:center}
  .marquee{mask-image:none}
  .d-type{width:16ch}.d-chips span,.d-pct,.d-badge,.demo-tiles i{opacity:1;transform:none}.d-row i{transform:none}.d-diff span{clip-path:none}.d-line{stroke-dashoffset:0}
}

/* ───────── Shared components (site-wide) ───────── */
/* Product dropdown */
.nav-drop{position:relative}
.nav-drop summary{list-style:none;display:inline-flex;align-items:center;gap:5px;font-size:14px;color:var(--soft);padding:8px 12px;border-radius:999px;cursor:pointer;transition:color var(--t-fast),background var(--t-fast)}
.nav-drop summary::-webkit-details-marker{display:none}
.nav-drop summary:hover,.nav-drop[open] summary,.nav-drop summary[aria-current]{color:var(--text);background:#ffffff0d}
.chev{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform var(--t) var(--ease)}
.nav-drop[open] .chev{transform:rotate(180deg)}
/* Mega panel (2026-10-03): spans the header container under the nav row, three grouped columns + a featured card.
   Opens with a short rise, closes with a fade (site.js adds .is-closing); it overlays the page, so nothing shifts. */
.nav-row{position:relative}
.nav-drop{position:static}
.nav-panel{position:absolute;z-index:60;top:calc(100% - 4px);left:0;right:0;margin-inline:auto;width:min(1040px,100%);display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:8px;padding:10px;border-radius:24px;background:#121312f7;border:1px solid var(--line-2);backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 50px 110px -30px #000,0 0 80px -40px #d7fb8b30;transform-origin:50% 0;animation:mega-in .32s var(--ease-out)}
.nav-panel::before{content:"";position:absolute;inset:-26px 0 auto;height:26px}
.nav-drop.is-closing .nav-panel{animation:mega-out .16s var(--ease) forwards;pointer-events:none}
.nav-drop.is-closing .chev{transform:none}
@keyframes mega-in{from{opacity:0;transform:translateY(-8px) scale(.985)}}
@keyframes mega-out{to{opacity:0;transform:translateY(-6px) scale(.99)}}
.nav-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px}
.nav-group{display:grid;align-content:start;gap:2px}
.nav-group-title{font:600 10.5px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 12px 8px}
.nav-item{position:relative;display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;transition:background var(--t-fast)}
.nav-item::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:2px;border-radius:2px;background:var(--lime);transform:scaleY(0);transition:transform var(--t) var(--ease-out)}
.nav-item:hover,.nav-item:focus-visible,.nav-item[aria-current]{background:#d7fb8b0b}
.nav-item:hover::before,.nav-item:focus-visible::before,.nav-item[aria-current]::before{transform:scaleY(1)}
.nav-item b{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0;font-size:14.5px;font-weight:600;color:var(--text);line-height:1.3}
.nav-item small{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.nav-ico{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#d7fb8b12;border:1px solid #d7fb8b26;transition:background var(--t-fast),border-color var(--t-fast)}
.nav-ico svg{width:17px;height:17px;fill:none;stroke:var(--lime);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--t-fast)}
.nav-item:hover .nav-ico,.nav-item:focus-visible .nav-ico{background:var(--lime);border-color:var(--lime)}
.nav-item:hover .nav-ico svg,.nav-item:focus-visible .nav-ico svg{stroke:var(--lime-ink)}
.nav-feature{grid-row:1/3;grid-column:2;display:flex;flex-direction:column;padding:16px;border-radius:18px;border:1px solid var(--line);background:radial-gradient(120% 70% at 50% 0%,#d7fb8b14,transparent 62%),#0c0d0c;transition:border-color var(--t),background-color var(--t)}
.nav-feature:hover,.nav-feature:focus-visible{border-color:#d7fb8b5c}
.nav-feature-kick{font:600 10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--lime)}
.nav-feature-viz{display:grid;align-content:start;gap:6px;height:182px;margin:12px 0 10px;overflow:hidden}
.nf-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;border:1px solid var(--line);background:#ffffff05;min-width:0;opacity:0;transform:translateX(10px);animation:nf-row 5.5s var(--ease-out) infinite;animation-delay:calc(var(--i) * .2s)}
.nf-row:first-child{animation-name:nf-row-hot}
.nf-row>span{min-width:0}
.nf-row .sev{flex:none;min-width:50px;padding:4px 5px;font-size:8.5px;font-style:normal}
.nf-row b{display:block;font-size:11.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-row small{display:block;font:10.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes nf-row{0%{opacity:0;transform:translateX(10px)}10%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes nf-row-hot{0%{opacity:0;transform:translateX(10px)}10%{opacity:1;transform:none;border-color:var(--line)}30%,80%{opacity:1;transform:none;border-color:#ff8e7866;background:#ff8e780d}96%,100%{opacity:0;transform:none}}
.nav-feature-title{font-size:15px;font-weight:600;color:var(--text);letter-spacing:-.01em}
.nav-feature small{margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.nav-feature-go,.nav-panel-foot a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--lime)}
.nav-feature-go{margin-top:auto;padding-top:14px}
.nav-feature-go svg,.nav-panel-foot a svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t) var(--ease)}
.nav-feature:hover .nav-feature-go svg,.nav-panel-foot a:hover svg{transform:translateX(3px)}
.nav-panel-foot{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 4px;padding:12px 12px 6px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.nav-panel-foot span{display:inline-flex;align-items:center;gap:8px}
.nav-panel-foot i{width:6px;height:6px;border-radius:50%;background:var(--lime)}
.nav-soon{display:inline-flex;align-items:center;margin-left:7px;font:700 9px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);border:1px solid #b9a3ec55;background:#b9a3ec14;padding:3px 6px 3px 6.5px;border-radius:999px}
.nav-links>a{display:inline-flex;align-items:center;white-space:nowrap}
.nav-links>a[aria-current],.nav-sheet a[aria-current]{color:var(--text);background:#ffffff0d}
.nav-sheet{min-width:250px;max-height:calc(100dvh - 130px);overflow-y:auto;overscroll-behavior:contain}
.nav-sheet a{display:flex;align-items:center}
.nav-sheet-label{font:600 10.5px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:14px 14px 6px}
.nav-sheet-signin{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 10px 10px!important}
.footer-soon{display:inline-block;margin-left:4px;font:700 9px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);border:1px solid #b9a3ec55;padding:3px 5px;border-radius:999px;vertical-align:2px}
@media(prefers-reduced-motion:reduce){.nf-row{animation:none!important;opacity:1;transform:none}.nav-panel{animation:none!important}}

/* Inner page hero */
.page-hero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(72px,10vw,128px) clamp(40px,6vw,72px);text-align:center}
.page-hero .hero-glow{inset:auto -20% -40% -20%;height:min(700px,90vw);opacity:.75}
.page-hero .hero-copy{max-width:860px;margin-inline:auto}
.page-hero h1{font-size:clamp(40px,6vw,80px)}
.page-hero .hero-sub{margin-inline:auto}
.crumb{display:inline-flex;align-items:center;gap:8px;font:600 11.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--lime);margin-bottom:22px}

/* Section heading helper */
.section-head{max-width:760px;margin-bottom:clamp(36px,5vw,60px)}
.section-head .eyebrow{margin-bottom:16px}.section-head p:not(.eyebrow){margin-top:18px;font-size:17px;line-height:1.7}
.section-head.center{margin-inline:auto;text-align:center}

/* Cards and grids */
.card{position:relative;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);padding:26px;overflow:hidden;isolation:isolate;transition:border-color var(--t),transform var(--t) var(--ease)}
.card:hover{border-color:var(--line-2)}
.card h3{margin-top:16px}.card p{margin-top:8px;font-size:15px;color:var(--muted);line-height:1.6}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ico{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#d7fb8b12;border:1px solid #d7fb8b26}
.ico svg{width:20px;height:20px;fill:none;stroke:var(--lime);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pill{display:inline-flex;align-items:center;gap:6px;font:600 10.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em;padding:6px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--soft)}
.pill.ok{color:var(--lime);border-color:#d7fb8b40;background:#d7fb8b0d}.pill.plan{color:var(--violet);border-color:#b9a3ec40}.pill.warn{color:var(--amber);border-color:#f5c46b40}
.checks{display:grid;gap:10px}.checks li{display:flex;gap:10px;font-size:15px;color:var(--soft)}.checks li::before{content:"✓";color:var(--lime);flex:none}
.notes li{position:relative;padding-left:16px;font-size:14px;color:var(--muted);line-height:1.6}.notes li::before{content:"";position:absolute;left:0;top:.65em;width:5px;height:5px;border-radius:50%;background:#56673c}

/* Cursor light */
.spot{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),#d7fb8b12,transparent 60%)}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),#d7fb8b70,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
[data-spotlight]{position:relative;isolation:isolate}[data-spotlight]:hover>.spot{opacity:1}

/* Tabs */
.tabs-list{position:relative;display:inline-flex;gap:4px;padding:5px;border-radius:999px;border:1px solid var(--line-2);background:#ffffff08;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs-list [role="tab"]{position:relative;z-index:1;border:0;background:none;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--soft);cursor:pointer;white-space:nowrap;transition:color var(--t)}
.tabs-list [role="tab"][aria-selected="true"]{color:var(--lime-ink)}
.tabs-ink{position:absolute;z-index:0;left:0;top:5px;bottom:5px;border-radius:999px;background:var(--lime);transition:transform .45s var(--ease-out),width .45s var(--ease-out)}
[role="tabpanel"]{animation:panel .45s var(--ease-out)}
@keyframes panel{from{opacity:0;transform:translateY(8px)}}

/* Copy control */
button.copy{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 12px;border-radius:9px;border:1px solid var(--line-2);background:#ffffff0a;font-size:13px;font-weight:600;color:var(--soft);cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .12s}
button.copy svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
button.copy:hover{border-color:#d7fb8b80;color:var(--text)}button.copy:active{transform:scale(.95)}
button.copy.is-copied{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
button.copy .draw{stroke-dasharray:24;stroke-dashoffset:24;animation:drawcheck .35s var(--ease) forwards}
@keyframes drawcheck{to{stroke-dashoffset:0}}

/* Code block */
.code{position:relative;border-radius:14px;border:1px solid var(--line);background:#080908;overflow:hidden}
.code-bar{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line);font:12px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--muted)}
.code-bar button.copy{margin-left:auto;min-height:30px}
.code pre{padding:16px;font:13px/1.75 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#d4dbcf;overflow-x:auto}
.code .k{color:var(--violet)}.code .s{color:#c9e98f}.code .c{color:#6c7269}.code .r{color:var(--coral);background:#ff8e7814;border-radius:4px;padding:0 3px}

/* Comparison table */
.table-wrap{border-radius:var(--r-lg);border:1px solid var(--line);overflow:auto;background:var(--panel)}
.table{width:100%;border-collapse:collapse;min-width:760px;font-size:14px}
.table th,.table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.table thead th{position:sticky;top:0;background:#151715;font-size:15px;color:var(--text);z-index:1}
.table tbody th{font-weight:500;color:var(--soft)}
.table td{color:var(--soft)}
.table .group th{background:#ffffff05;font:600 11px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em;color:var(--lime)}
.table .hl{background:#d7fb8b08}
.yes{color:var(--lime)}.no{color:#5d6a5c}

/* Footer with the animated signature */
.footer{border-top:1px solid var(--line);padding-top:clamp(56px,7vw,88px);overflow:hidden;background:radial-gradient(60% 40% at 70% 100%,#d7fb8b10,transparent 70%),var(--bg)}
.footer-top{display:grid;grid-template-columns:1fr 2fr;gap:48px}
.footer-brand p{margin-top:14px;font-size:15px;color:var(--muted)}
.footer-tag{display:inline-block;margin-top:16px;font:600 10.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em;color:var(--lime);border:1px solid #d7fb8b4d;padding:7px 9px;border-radius:6px}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.footer-cols h2{font:600 11px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--muted);margin-bottom:14px}
.footer-cols a{display:block;font-size:14px;color:var(--soft);padding:5px 0;transition:color var(--t-fast)}.footer-cols a:hover{color:var(--lime)}
.signature{position:relative;margin-top:clamp(8px,3vw,40px);container-type:inline-size}
.signature-stage{position:relative;height:clamp(170px,27vw,400px)}
.signature-word{position:absolute;left:-.03em;bottom:-.13em;display:flex;align-items:flex-start;font-size:min(29cqw,370px);font-weight:800;letter-spacing:-.08em;line-height:1;color:#e8eedf;white-space:nowrap;user-select:none}
.signature-star{width:.38em;height:.38em;margin:.1em 0 0 .04em;flex:none;color:var(--lime)}
.signature-star svg{width:100%;height:100%;stroke:currentColor;stroke-width:7;fill:none;transform-origin:50% 50%}
.signature-family{position:absolute;right:2%;bottom:6%;width:min(36%,420px);aspect-ratio:1.35}
.sig-lock{position:absolute;display:block;transform-origin:50% 80%}
.sig-lock svg{overflow:visible}
.sig-main{width:46%;left:25%;top:0;z-index:3;aspect-ratio:220/250}
.sig-coral{width:38%;right:0;bottom:2%;z-index:1;aspect-ratio:220/250}
.sig-purple{width:36%;left:2%;bottom:0;z-index:2;aspect-ratio:220/250}
.footer-bottom{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-block:22px 64px;border-top:1px solid var(--line);font:600 11px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.1em;color:var(--muted)}
.footer-bottom a:hover{color:var(--lime)}

@media(max-width:1020px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}.footer-top{grid-template-columns:1fr}.footer-cols{grid-template-columns:1fr 1fr}.nav-drop{display:none}}
@media(max-width:680px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.signature-family{width:44%;bottom:18%}.footer-motto{display:none}}

/* Stable tab widgets: every panel occupies the same cell; hidden ones keep their space invisibly. */
.tab-stage{display:grid}
.tab-stage>[role="tabpanel"]{grid-area:1/1;min-width:0}
.tab-stage>[role="tabpanel"][hidden]{display:block!important;visibility:hidden;pointer-events:none}

/* Header: larger brand and controls (owner request 2026-10-03). */
.nav-row{height:84px;gap:34px}
.nav .wordmark{font-size:34px}.nav .wordmark svg{width:16px;height:16px}
.nav-links>a,.nav-drop summary{font-size:15.5px;padding:10px 14px}
.nav-cta .link-quiet{font-size:15.5px}
.nav-cta .btn-sm{min-height:46px;padding:0 20px;font-size:15px}
.announce a{min-height:42px;font-size:13.5px}
@media(max-width:680px){.nav-row{height:72px}.nav .wordmark{font-size:30px}.nav-cta .btn-sm{min-height:42px;padding:0 16px}}

/* Less empty space above page headings. */
.hero{padding-top:clamp(36px,5vw,72px)}
.page-hero{padding-top:clamp(32px,4.5vw,64px)}
.chip-live,.crumb{margin-bottom:18px}

/* Header fit (after the 84px header rules so these win): six top-level links + Sign in + CTA. Tighten between the phone-sheet breakpoint and wide screens. */
@media(max-width:1280px){.nav-row{gap:22px}.nav-links{margin-left:0;gap:2px}.nav-links>a,.nav-drop summary{padding:10px 11px;font-size:15px}.nav-cta{gap:14px}}
@media(max-width:1140px){.nav-row{gap:16px}.nav-links>a,.nav-drop summary{padding:9px 9px;font-size:14.5px}.nav .wordmark{font-size:31px}.nav-cta .btn-sm{padding:0 16px}}

/* ── Provider logos (shared; rendered by js/providers.js) ────────────────────────────────────────
   One tile style for every model-author mark. Tiles have a fixed box (--s) so nothing shifts while
   images load. Mono marks show light on dark; .is-light marks get a light backing; monograms cover
   authors without a published mark. */
.prov-logo{--s:40px;flex:none;position:relative;display:inline-grid;place-items:center;width:var(--s);height:var(--s);padding:calc(var(--s)*.2);border-radius:calc(var(--s)*.28);
  background:linear-gradient(160deg,#ffffff16,#ffffff07);box-shadow:inset 0 0 0 1px #ffffff1c;line-height:0}
.prov-logo img{width:100%;height:100%;object-fit:contain;border-radius:calc(var(--s)*.08)}
.prov-logo.is-mono img{filter:invert(1) brightness(.95)}
.prov-logo.is-light{background:#f4f6ee;box-shadow:none}
.prov-logo.is-dark{background:#1b1d1a}
.prov-logo.is-letters{background:linear-gradient(160deg,#b9a3ec30,#b9a3ec0f);box-shadow:inset 0 0 0 1px #b9a3ec44}
.prov-letters{font:700 calc(var(--s)*.34)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:-.02em;color:#d9d0f3}
.prov-logo.is-bare{padding:0;background:none;box-shadow:none;border-radius:0}
.prov-logo.is-bare.is-light{padding:calc(var(--s)*.12);background:#f4f6ee;border-radius:calc(var(--s)*.26)}
.prov-logo.is-bare.is-letters{background:linear-gradient(160deg,#b9a3ec30,#b9a3ec0f);box-shadow:inset 0 0 0 1px #b9a3ec44;border-radius:calc(var(--s)*.28)}
/* Marquee rows: the generic marquee rules invert every non "-color" image; provider marks set their own. */
.marquee .prov-logo{display:inline-grid;gap:0}
.marquee .prov-logo img{filter:none}
.marquee .prov-logo.is-mono img{filter:invert(1) brightness(.92)}
.marquee .prov-letters{font-size:calc(var(--s)*.34);font-weight:700;color:#d9d0f3}
.prov-caption{margin-top:2px;text-align:center;font-size:13.5px;color:var(--muted)}
.prov-caption b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
/* Logo rows / wraps */
[data-prov-logos]{display:flex;flex-wrap:wrap;gap:6px}
.prov-chip{display:inline-flex;align-items:center;gap:8px}
/* Picker: marks glide under a fixed lime frame; the label names the selected provider. */
.prov-picker{--s:36px;--g:13px;display:grid;gap:10px;width:100%;min-width:0}
.pp-window{position:relative;height:calc(var(--s) + 30px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent)}
.pp-track{position:absolute;left:0;top:15px;display:flex;gap:var(--g);will-change:transform}
.pp-track .prov-logo{opacity:.42;transform:scale(.84);transition:opacity .4s var(--ease),transform .5s var(--ease-out)}
.pp-track .prov-logo.is-on{opacity:1;transform:none}
.pp-ring{position:absolute;left:50%;top:50%;width:calc(var(--s) + 10px);height:calc(var(--s) + 10px);translate:-50% -50%;border-radius:calc(var(--s)*.38);border:2px solid var(--lime);box-shadow:0 0 18px #d7fb8b55,inset 0 0 12px #d7fb8b22;pointer-events:none}
.pp-label{display:flex;justify-content:center;align-items:baseline;gap:8px;height:20px;margin:0;font-size:12.5px;line-height:20px;color:var(--muted);white-space:nowrap;overflow:hidden}
.pp-label b{color:var(--text);font-weight:600;font-size:13.5px}
.pp-label span{font-variant-numeric:tabular-nums}
/* Logo wall: every provider in the catalog; hover, focus or tap shows its live details in the readout. */
.prov-wall{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
.pw-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:10px;padding:18px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:radial-gradient(circle 240px at var(--mx,50%) var(--my,40%),#d7fb8b12,transparent 70%),linear-gradient(var(--panel-2),var(--panel))}
.pw-grid li{min-width:0}
.pw-tile{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;padding:0;border-radius:16px;border:1px solid #ffffff0d;background:#ffffff05;cursor:pointer;
  transform:scale(var(--z,1));transition:transform .28s var(--ease-out),border-color .25s,background .25s,box-shadow .25s}
.pw-tile:hover{border-color:#d7fb8b44;background:#d7fb8b0a}
.pw-tile[aria-pressed="true"]{border-color:#d7fb8b88;background:#d7fb8b10;box-shadow:0 0 0 1px #d7fb8b33,0 0 26px -6px #d7fb8b77}
.pw-tile:active{--z:.96}
.pw-tile .prov-logo:not(.is-light):not(.is-letters):not(.is-dark){background:none;box-shadow:none}
.pw-count{position:absolute;top:5px;right:7px;font:600 10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#7c8279;font-variant-numeric:tabular-nums}
.pw-tile[aria-pressed="true"] .pw-count{color:var(--lime)}
.pw-tip{position:absolute;bottom:calc(100% + 8px);left:50%;z-index:3;display:grid;gap:1px;padding:7px 11px;border-radius:10px;background:#1d201c;border:1px solid var(--line-2);box-shadow:0 14px 30px -12px #000;
  white-space:nowrap;font-size:12px;line-height:1.35;color:var(--muted);text-align:left;opacity:0;pointer-events:none;translate:-50% 4px;transition:opacity .2s var(--ease),translate .25s var(--ease-out)}
.pw-tip b{font-size:13px;font-weight:600;color:var(--text)}
.pw-tile:hover .pw-tip,.pw-tile:focus-visible .pw-tip{opacity:1;translate:-50% 0}
@media(hover:none){.pw-tip{display:none}}
.prov-wall.pw-wait:not(.is-in) .pw-tile{opacity:0;transform:scale(.7)}
.prov-wall.pw-wait.is-in .pw-tile{transition:opacity .5s var(--ease-out) calc(var(--i)*22ms),transform .6s var(--ease-out) calc(var(--i)*22ms),border-color .25s,background .25s,box-shadow .25s}
.pw-read{position:sticky;top:108px;display:grid;align-content:start;gap:14px;min-height:318px;padding:22px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:linear-gradient(var(--panel-2),var(--panel));box-shadow:0 30px 70px -40px #000}
.pw-read-k{font:600 11px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--lime)}
.pw-read-head{display:flex;align-items:center;gap:14px;min-width:0}
.pw-read-head>div{min-width:0}
.pw-read h3{font-size:22px;letter-spacing:-.03em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-read code{font:12.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--muted)}
.pw-read-count{font-size:14px;color:var(--soft)}
.pw-read-count b{display:block;font-size:46px;font-weight:600;letter-spacing:-.05em;line-height:1.05;color:var(--text);font-variant-numeric:tabular-nums}
.pw-read-wait{display:flex;align-items:flex-end;min-height:72px;font-size:14px;color:var(--muted)}
.pw-read-bar{display:block;height:6px;border-radius:6px;background:#ffffff10;overflow:hidden}
.pw-read-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9fd24f,var(--lime));transform-origin:0 50%;transform:scaleX(var(--w,0));transition:transform .6s var(--ease-out)}
.pw-read-top{min-height:3.1em;font-size:13.5px;line-height:1.55;color:var(--muted)}
.pw-read.is-flip .pw-read-head,.pw-read.is-flip .pw-read-count{animation:pw-in .45s var(--ease-out)}
@keyframes pw-in{from{opacity:.25;transform:translateY(5px)}}
@media(max-width:900px){
  .prov-wall{grid-template-columns:1fr}
  .pw-read{order:-1;position:sticky;top:80px;z-index:4;min-height:0;grid-template-columns:auto 1fr;align-items:center;gap:6px 14px;padding:14px 16px}
  .pw-read-k,.pw-read-bar{display:none}
  .pw-read-head{grid-column:1/-1}
  .pw-read-count{grid-column:1;font-size:12.5px}.pw-read-count b{font-size:30px}.pw-read-wait{min-height:0;font-size:12.5px}
  .pw-read-top{grid-column:2;min-height:2.9em;font-size:12.5px}
  .pw-read .link{grid-column:1/-1;font-size:13.5px}
}
@media(max-width:560px){
  .pw-grid{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px;padding:12px}
  .pw-tile{border-radius:13px}
  .pw-tile .prov-logo{--s:32px!important}
}
@media(prefers-reduced-motion:reduce){
  .pp-track,.pp-track .prov-logo,.pw-tile,.pw-read-bar i{transition:none!important}
  .pw-read.is-flip .pw-read-head,.pw-read.is-flip .pw-read-count{animation:none}
}

/* ───────── Approval highlight: read-only by default → you approve → draft PR (2026-10-03) ─────────
   Canonical animated version on the homepage (#approval, [data-approval] stepper in site.js); lighter callouts
   (.ap-strip, .ap-ladder, .ap-banner) on how-it-works, trust and integrations. States light in turn; nothing resizes. */
.ap-section{background:radial-gradient(60% 50% at 50% 0%,#d7fb8b0d,transparent 70%),var(--bg);border-block:1px solid var(--line)}
.ap-flow{position:relative;margin:0;padding:clamp(18px,2.4vw,30px);border-radius:var(--r-xl);border:1px solid var(--line-2);background:linear-gradient(180deg,#151715,#0f100f);box-shadow:0 40px 100px -50px #000,0 0 90px -50px #d7fb8b40}
.ap-flow figcaption{margin-top:18px;text-align:center;font-size:12.5px;color:var(--muted)}
.ap-rail{position:absolute;left:calc(16.66% + 8px);right:calc(16.66% + 8px);top:calc(clamp(18px,2.4vw,30px) + 13px);height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,#ffffff26 0 6px,transparent 6px 12px)}
.ap-rail i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#9fd24f,var(--lime));box-shadow:0 0 14px #d7fb8b88;transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .9s var(--ease-out)}
.ap-states{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.ap-state{display:flex;flex-direction:column;align-items:stretch;text-align:left;transition:opacity .5s var(--ease)}
.ap-kick{display:flex;flex-direction:column;align-items:center;gap:10px;font:600 11.5px/1.3 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:16px;transition:color .4s}
.ap-n{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#161816;border:1.5px solid #ffffff30;color:var(--soft);font-size:12px;letter-spacing:0;transition:background .4s,border-color .4s,color .4s,box-shadow .4s}
.ap-state.is-on .ap-kick{color:var(--lime)}
.ap-state.is-on .ap-n{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);box-shadow:0 0 0 5px #d7fb8b22}
.ap-card{position:relative;flex:1;display:grid;align-content:start;gap:12px;min-height:236px;padding:18px;border-radius:18px;border:1px solid var(--line);background:#0c0d0c;transition:border-color .5s,box-shadow .5s,opacity .5s}
.ap-state:not(.is-on) .ap-card{opacity:.5}
.ap-state.is-on .ap-card{border-color:#d7fb8b40;box-shadow:0 0 50px -24px #d7fb8b55}
.ap-note{margin-top:12px;font-size:14px;line-height:1.55;color:var(--muted);text-align:center;text-wrap:balance}
.ap-card b{display:block;font-size:14.5px;color:var(--text)}.ap-card small{display:block;font-size:12px;color:var(--muted)}
/* 1 · lock */
.ap-lockcard{grid-template-columns:auto 1fr;align-items:center}
.ap-lock{width:44px;height:44px;fill:none;stroke:var(--lime);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ap-shackle{transform:translateY(-5px);transition:transform .55s cubic-bezier(.3,1.6,.5,1) .2s}
.ap-state.is-on .ap-shackle{transform:none}
.ap-scopes{grid-column:1/-1;display:grid;gap:6px}
.ap-scopes li{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;border-radius:10px;border:1px solid var(--line);font-size:13px;color:var(--soft)}
.ap-scopes em{font:700 10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-style:normal;letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;border-radius:6px;opacity:0;transform:scale(.8);transition:opacity .3s,transform .4s var(--ease-out)}
.ap-scopes .is-ok{color:var(--lime);background:#d7fb8b14}.ap-scopes .is-no{color:var(--coral);background:#ff8e7814}
.ap-state.is-on .ap-scopes em{opacity:1;transform:none}
.ap-state.is-on .ap-scopes li:nth-child(2) em{transition-delay:.15s}.ap-state.is-on .ap-scopes li:nth-child(3) em{transition-delay:.3s}
/* 2 · approval */
.ap-picks{display:grid;gap:6px}
.ap-pick{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);font-size:13px;color:var(--soft);transition:border-color .3s}
.ap-pick .sev{min-width:44px;padding:4px 5px;font-size:9px}
.ap-box{flex:none;width:15px;height:15px;border-radius:5px;border:1.5px solid #ffffff40;transition:background .25s,border-color .25s,box-shadow .25s}
.ap-state.is-on .ap-pick .ap-box{background:var(--lime);border-color:var(--lime);box-shadow:inset 0 0 0 3px #0c0d0c}
.ap-state.is-on .ap-pick{border-color:#d7fb8b30}
.ap-state.is-on .ap-pick:nth-child(1) .ap-box,.ap-state.is-on .ap-pick:nth-child(1){transition-delay:.25s}
.ap-state.is-on .ap-pick:nth-child(2) .ap-box,.ap-state.is-on .ap-pick:nth-child(2){transition-delay:.6s}
.ap-model{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#ffffff06;border:1px solid var(--line)}
.ap-logos{display:flex;gap:4px;flex:none;min-width:0}.ap-logos:empty{display:none}
.ap-logos .prov-logo{--s:20px}
.ap-model-text b{font-size:13px}.ap-model-text small{font-size:11.5px;color:var(--lime)}
.ap-cost{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.ap-cost i{height:6px;border-radius:9px;background:#ffffff10;position:relative;overflow:hidden}
.ap-cost i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#9fd24f,var(--lime));transform-origin:0 50%;transform:scaleX(0);transition:transform .8s var(--ease-out)}
.ap-state.is-on .ap-cost i::after{transform:none;transition-delay:.9s}
.ap-btn{position:relative;justify-self:start;display:inline-flex;align-items:center;padding:9px 15px;border-radius:999px;background:var(--lime);color:var(--lime-ink);font-size:13px;font-weight:700;overflow:hidden}
.ap-tap{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:#17211366;opacity:0;transform:scale(0)}
.ap-state.is-on .ap-btn{animation:ap-press 1s var(--ease) 1.6s both}
.ap-state.is-on .ap-tap{animation:ap-tap .7s ease-out 1.65s both}
@keyframes ap-press{0%,100%{transform:none}35%{transform:scale(.93)}}
@keyframes ap-tap{0%{opacity:1;transform:scale(0)}100%{opacity:0;transform:scale(9)}}
/* 3 · draft PR receipt */
.ap-pr{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.ap-pr small{font:11px ui-monospace,"SF Mono",Menlo,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-pr>div{min-width:0}
.ap-stamp{font:800 10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em;color:var(--lime);border:1.5px solid var(--lime);padding:6px 8px;border-radius:7px;opacity:0;transform:scale(1.7) rotate(-8deg);transition:opacity .2s,transform .45s cubic-bezier(.3,1.5,.5,1)}
.ap-state.is-on .ap-stamp{opacity:1;transform:rotate(-4deg);transition-delay:.45s}
.ap-receipt-rows{display:grid;gap:6px}
.ap-receipt-rows li{display:flex;justify-content:space-between;gap:12px;padding:9px 11px;border-radius:10px;border:1px dashed #ffffff1f;font-size:12.5px;color:var(--muted)}
.ap-receipt-rows em{font-style:normal;color:var(--soft);text-align:right}
.ap-yours{display:inline-flex;align-items:center;gap:6px;color:var(--lime)!important}
.ap-yours svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5}
.ap-alt{justify-self:start;font:600 11px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.06em;color:var(--soft);border:1px solid var(--line-2);border-radius:999px;padding:7px 10px;opacity:0;transition:opacity .4s}
.ap-alt::before{content:"↓ ";color:var(--lime)}
.ap-state.is-on .ap-alt{opacity:1;transition-delay:1s}
.ap-receipt .ap-pr{transform:translateY(6px);opacity:.6;transition:transform .5s var(--ease-out),opacity .5s}
.ap-state.is-on .ap-receipt .ap-pr{transform:none;opacity:1}
.ap-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.ap-path .link{display:inline-block;margin-top:14px;font-size:14px;font-weight:600}

/* Light callouts on other pages */
.ap-strip{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px;margin-top:28px;padding:14px;border-radius:20px;border:1px solid var(--line-2);background:linear-gradient(90deg,#d7fb8b0a,transparent 40%,transparent 60%,#d7fb8b0a),var(--panel)}
.ap-strip-step{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px}
.ap-strip-step b{display:block;font-size:15px;color:var(--text)}.ap-strip-step small{display:block;font-size:13px;color:var(--muted);line-height:1.45}
.ap-strip-step .ico{flex:none}
.ap-strip-arrow{width:22px;height:22px;fill:none;stroke:#d7fb8b88;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ap-strip-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;padding:12px 12px 2px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.ap-ladder{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel);overflow:hidden}
.ap-rung{position:relative;padding:22px 24px 24px}
.ap-rung+.ap-rung{border-left:1px dashed #ffffff24}
.ap-rung .who{display:inline-flex;align-items:center;gap:6px;font:700 10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;padding:5px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--soft)}
.ap-rung .who.you{color:var(--lime-ink);background:var(--lime);border-color:var(--lime)}
.ap-rung h3{margin-top:14px;font-size:18px}.ap-rung p{margin-top:6px;font-size:14.5px;color:var(--muted);line-height:1.6}
.ap-rung-n{position:absolute;right:20px;top:18px;font:600 11px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;color:#ffffff40}
.ap-ladder-head{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:14px 24px;border-bottom:1px solid var(--line);background:#ffffff04;font-size:14px;color:var(--soft)}
.ap-ladder-head b{color:var(--text)}
.ap-banner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px 22px;margin-top:clamp(36px,5vw,56px);padding:20px 22px;border-radius:var(--r-lg);border:1px solid #d7fb8b33;background:radial-gradient(80% 140% at 0% 50%,#d7fb8b12,transparent 60%),var(--panel)}
.ap-banner h3{font-size:19px}.ap-banner p{margin-top:4px;font-size:14.5px;color:var(--muted)}
.ap-banner-lock{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:#d7fb8b14;border:1px solid #d7fb8b33}
.ap-banner-lock svg{width:24px;height:24px;fill:none;stroke:var(--lime);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ap-outs{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.ap-out{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;border:1px solid var(--line-2);background:#ffffff06;font-size:13.5px;color:var(--soft);white-space:nowrap}
.ap-out svg{width:15px;height:15px;fill:none;stroke:var(--lime);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1020px){
  .ap-states{grid-template-columns:1fr;gap:28px}.ap-rail{display:none}
  .ap-kick{flex-direction:row;justify-content:flex-start;margin-bottom:12px}.ap-note{text-align:left}
  .ap-card{min-height:0}.ap-paths{grid-template-columns:1fr}
  .ap-strip{grid-template-columns:1fr}.ap-strip-arrow{transform:rotate(90deg);justify-self:center}
  .ap-ladder{grid-template-columns:1fr}.ap-rung+.ap-rung{border-left:0;border-top:1px dashed #ffffff24}
  .ap-banner{grid-template-columns:auto 1fr}.ap-outs{grid-column:1/-1;justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){.ap-btn,.ap-tap{animation:none!important}.ap-tap{opacity:0}}
.ap-foot{grid-column:1/-1;align-self:end;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.ap-lockcard{grid-template-rows:auto auto 1fr}
.ap-out-link{color:var(--lime);border-color:#d7fb8b40;transition:background var(--t-fast),border-color var(--t-fast)}.ap-out-link:hover{background:#d7fb8b12;border-color:#d7fb8b80}
.ap-out-link svg{stroke:currentColor;transition:transform var(--t) var(--ease)}.ap-out-link:hover svg{transform:translateX(3px)}