/* CipherProof company site. One stylesheet, no framework, no third-party requests.
   Look: quiet near-black, warm off-white type, one ember accent, hairlines instead of boxes, left-aligned editorial layout.
   Type: Urbanist for headings and controls, DM Sans for reading, JetBrains Mono for vectors. */
@font-face{font-family:'Urbanist';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/urbanist-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/urbanist-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/dm-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}

:root{
  --bg:#0A0A0B;
  --surface:#101011;
  --text:#EDEBE6;           /* warm off-white */
  --soft:#9D998F;           /* 7:1 on the base */
  --faint:#85827A;          /* 5:1 */
  --line:rgba(237,235,230,.09);
  --line-2:rgba(237,235,230,.17);
  --ember:#E2573B;          /* the one accent */
  --crit:#E2573B;--high:#DE8A3E;--med:#D6B54C;--low:#7BA2D6;--info:#8C8A85;
  --display:'Urbanist','DM Sans',system-ui,sans-serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --wrap:80rem;
  --gap:clamp(1.25rem,4vw,2.5rem);
  --r-lg:22px;--r-md:16px;--r-sm:10px;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{font-size:93.75%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
svg{display:block}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:.6rem 1rem;z-index:90}
.skip:focus{left:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gap)}

/* ---------- atmosphere: one warm breath of light, and film grain ---------- */
.aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(70% 45% at 50% -8%,rgba(226,87,59,.10),transparent 70%),radial-gradient(50% 40% at 100% 100%,rgba(237,235,230,.035),transparent 70%)}
.aurora i{display:none}
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background:var(--noise)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;color:var(--text);text-wrap:balance}
h1{font-size:clamp(2.3rem,5vw,4rem);line-height:1.04;letter-spacing:-.04em}
h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.08;letter-spacing:-.035em}
h3{font-size:1.2rem;line-height:1.25;letter-spacing:-.02em}
p{margin:0 0 1em;text-wrap:pretty}
.lede{font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.6;color:var(--soft)}
.dim{color:var(--faint)}
.muted{color:var(--soft)}

/* ---------- glass: only a hairline and a whisper of light ---------- */
.glass{position:relative;background:linear-gradient(180deg,rgba(237,235,230,.045),rgba(237,235,230,.015));border:1px solid var(--line);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(237,235,230,.06)}
.glass::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(237,235,230,.42),transparent 62%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass:hover::before{opacity:1}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(10,10,11,.72);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:.4rem 2rem;padding-top:.85rem;padding-bottom:.85rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font:700 1.15rem var(--display);letter-spacing:-.03em}
.nav{display:flex;gap:1.8rem;margin-left:auto}
.nav a{text-decoration:none;font:600 .95rem var(--display);color:var(--soft);transition:color .15s;padding:.3rem 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--text)}
.nav a[aria-current=page]{color:var(--text);border-bottom-color:var(--text)}
.top .signin{font:600 .95rem var(--display);text-decoration:none;color:var(--soft)}
.top .signin:hover{color:var(--text)}
@media (max-width:760px){
  .top .wrap{flex-wrap:wrap}
  .brand{margin-right:auto}
  .nav{order:3;width:100%;margin:0;gap:1.5rem;overflow-x:auto}
  .top .signin{display:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.5rem 1.6rem;border-radius:999px;font:600 1rem var(--display);letter-spacing:-.01em;text-decoration:none;color:var(--text);cursor:pointer;background:transparent;border:1px solid var(--line-2);transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:rgba(237,235,230,.07);border-color:rgba(237,235,230,.32)}
.btn-glow{background:var(--text);border-color:var(--text);color:#0A0A0B}
.btn-glow:hover{background:#fff;border-color:#fff}
.btn-sm{min-height:2.45rem;padding:.3rem 1.2rem;font-size:.94rem}

/* the venom button: dark goo that reaches for the pointer and shifts through earth tones */
.venom{position:relative;display:inline-flex;isolation:isolate;--glow:#D4492F;text-decoration:none;color:#fff;-webkit-tap-highlight-color:transparent}
.venom::before{content:"";position:absolute;inset:10px 16px -6px;border-radius:999px;background:var(--glow);filter:blur(28px);opacity:.28;z-index:-2;transition:opacity .3s}
.venom:hover::before{opacity:.5}
.venom .vg{position:absolute;inset:-150px;filter:url(#goo);pointer-events:none;z-index:-1}
.venom .vg i{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.venom .vg i.vbody{border-radius:999px}
.venom .vl{position:relative;display:inline-flex;align-items:center;gap:.7rem;min-height:3.3rem;padding:.5rem 2rem;border-radius:999px;font:700 1.05rem var(--display);letter-spacing:-.02em;text-shadow:0 1px 10px rgba(0,0,0,.35);background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 55%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -12px 20px -10px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.1)}
.venom:not(.on) .vl{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 55%),linear-gradient(95deg,#C4472E,#A8651F)}
.venom .vl svg{width:1.1rem;height:1.1rem;transition:transform .25s}
.venom:hover .vl svg{transform:translateX(3px)}
.venom:active .vl{transform:translateY(1px)}
.venom:not(.on) .vg{display:none}

/* ---------- hero: left-aligned, wide, quiet ---------- */
.hero{padding:clamp(4.5rem,10vw,8rem) 0 clamp(3.5rem,7vw,6rem)}
.hero h1{max-width:15ch}
.hero h1 em{font-style:normal;color:var(--faint)}
.hero .sub{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem clamp(2rem,5vw,5rem);margin-top:clamp(2.6rem,5vw,4rem);align-items:start}
.hero .lede{margin:0;max-width:30rem}
.hero .cta{display:flex;flex-wrap:wrap;gap:1rem 1.2rem;align-items:center;margin-bottom:1rem}
.hero .fine{font-size:.92rem;color:var(--faint);margin:0}
.hero-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem clamp(2rem,5vw,5rem);align-items:center}
/* hero picture: two real report pages behind one finding card */
.hx{position:relative;width:100%;max-width:25rem;aspect-ratio:1/.92;justify-self:end}
.hx::before{content:"";position:absolute;inset:-12% -10% -8% -6%;background:radial-gradient(closest-side,rgba(226,87,59,.26),transparent 72%);pointer-events:none}
.hx-page{position:absolute;width:57%;border-radius:6px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 34px 60px -22px rgba(0,0,0,.95)}
.hx-page img{width:100%;filter:brightness(.92)}
.hx-p1{right:4%;top:0;transform:rotate(6deg)}
.hx-p2{right:27%;top:8%;transform:rotate(-5deg)}
.hx-card{position:absolute;left:0;bottom:3%;width:80%;border-radius:var(--r-md);padding:1.15rem 1.3rem 1.05rem;background:linear-gradient(180deg,rgba(26,26,28,.94),rgba(14,14,16,.94));box-shadow:0 40px 70px -24px rgba(0,0,0,.95),inset 0 1px 0 rgba(237,235,230,.08);animation:hxf 8s ease-in-out infinite}
.hx-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.hx-head code{font:500 .76rem var(--mono);color:var(--soft);border:1px solid var(--line-2);padding:.15rem .45rem;border-radius:6px}
.hx-head b{font:700 .78rem var(--display)}
.hx-card h3{font-size:1.1rem;margin:.75rem 0 .2rem;text-wrap:balance}
.hx-body{display:flex;align-items:center;gap:1rem}
.hx-body .ringwrap{width:5.6rem;flex:none}
.hx-body .ringwrap .num b{font-size:1.6rem}
.hx-body .ringwrap .num span{font-size:.66rem}
.hx-body code{font:400 .68rem/1.5 var(--mono);color:var(--faint);overflow-wrap:anywhere}
.hx-foot{display:flex;align-items:center;gap:.55rem;margin-top:.5rem;padding-top:.75rem;border-top:1px solid var(--line);font:600 .84rem var(--display);color:#8CC9A1}
.hx-foot i{width:.95rem;height:.95rem;border-radius:50%;background:#8CC9A1;position:relative;flex:none}
.hx-foot i::after{content:"";position:absolute;left:.3rem;top:.12rem;width:.24rem;height:.5rem;border:solid #0A0A0B;border-width:0 2px 2px 0;transform:rotate(45deg)}
.hx-chip{position:absolute;right:2%;bottom:0;display:inline-flex;align-items:baseline;gap:.4rem;padding:.55rem 1rem;border-radius:999px;background:var(--text);color:#0A0A0B;font:600 .86rem var(--display);box-shadow:0 18px 40px -14px rgba(0,0,0,.9);animation:hxf 8s ease-in-out -3s infinite}
.hx-chip b{font:700 1.15rem var(--display);color:#C23A21}
@keyframes hxf{50%{transform:translateY(-7px)}}
@media (max-width:820px){.hero .sub{grid-template-columns:1fr}.hero-top{grid-template-columns:1fr}.hx{display:none}}

.stage{margin:clamp(4rem,8vw,7rem) 0 0}
.win{border-radius:var(--r-md);overflow:hidden;background:#09090A;border:1px solid var(--line-2);box-shadow:0 50px 100px -40px rgba(0,0,0,.95)}
.win .bar{display:flex;align-items:center;gap:.4rem;padding:.65rem 1rem;border-bottom:1px solid var(--line)}
.win .bar i{width:.6rem;height:.6rem;border-radius:50%;background:rgba(237,235,230,.14)}
.win .bar span{margin:0 auto;transform:translateX(-1rem);font:500 .75rem var(--mono);color:var(--faint)}
.win img{width:100%}

/* ---------- strip and ticker ---------- */
.strip{padding:0 0 1.2rem}
.strip .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.4rem;padding-top:1.2rem;padding-bottom:1.2rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip p{margin:0;font:600 .9rem var(--display);color:var(--faint)}
.fmt{display:inline-flex;align-items:center;gap:.5rem;font:600 .98rem var(--display);color:var(--text)}
.fmt svg{display:none}
.strip .arrow{color:var(--faint);margin:0 .4rem}
.strip .arrow svg{width:1.1rem;height:1.1rem}
.ticker{overflow:hidden;padding:1.4rem 0 clamp(3rem,7vw,6rem);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker .track{display:flex;width:max-content;animation:tick 80s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker .set{display:flex;gap:2.2rem;padding-right:2.2rem}
.tk{display:flex;align-items:baseline;gap:.7rem;white-space:nowrap}
.tk code{font:400 .76rem var(--mono);color:var(--faint)}
.tk b{font:700 .95rem var(--display);font-variant-numeric:tabular-nums}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{padding:clamp(4.5rem,9vw,8.5rem) 0}
.sechead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1.2rem clamp(2rem,6vw,6rem);align-items:end;margin:0 0 clamp(2.6rem,5vw,4.2rem)}
.sechead h2{max-width:16ch}
.sechead p{margin:0;color:var(--soft);max-width:26rem}
@media (max-width:820px){.sechead{grid-template-columns:1fr}}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.9rem,1.8vw,1.4rem);margin:0;padding:0;list-style:none}
.bt{grid-column:span 6;display:flex;flex-direction:column;gap:.5rem;padding:clamp(1.4rem,2.6vw,2rem);border-radius:var(--r-lg);min-width:0;overflow:hidden}
.bt.w7{grid-column:span 7}.bt.w5{grid-column:span 5}
.bt h3{font-size:1.3rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
.bt p{margin:0;color:var(--soft);max-width:34rem}
.bt .rep{margin-top:auto;padding-top:1rem;font-size:.88rem;color:var(--faint)}
.bt .rep b{color:var(--soft);font-weight:500}
.bv{min-height:11.5rem;border-radius:var(--r-sm);background:rgba(0,0,0,.35);border:1px solid var(--line);padding:1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;position:relative;overflow:hidden}
.protag{font:700 .68rem/1 var(--display);letter-spacing:.05em;padding:.28rem .55rem;border-radius:999px;border:1px solid var(--ember);color:var(--ember)}
@media (max-width:900px){.bt,.bt.w7,.bt.w5{grid-column:span 12}}
.lrow{display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem;border-radius:8px;background:rgba(237,235,230,.04);border:1px solid var(--line);font:600 .92rem var(--display)}
.lrow b{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow span{font:400 .74rem var(--mono);color:var(--faint)}
.dsev{width:.55rem;height:.55rem;border-radius:50%;flex:none}
.dsev.crit{background:var(--crit)}.dsev.high{background:var(--high)}.dsev.med{background:var(--med)}
.v-gauge{align-items:center;gap:.9rem}
.ringwrap{position:relative;width:8.2rem}
.ring{--p:98;position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 225deg,var(--crit) calc(var(--p)*.75%),rgba(237,235,230,.09) 0 75%,transparent 0);-webkit-mask:radial-gradient(circle,transparent 60%,#000 61%);mask:radial-gradient(circle,transparent 60%,#000 61%)}
.ringwrap .num{position:relative;display:grid;place-content:center;text-align:center;aspect-ratio:1}
.ringwrap .num b{font:600 2.3rem/1 var(--display);letter-spacing:-.04em;color:var(--text)}
.ringwrap .num span{font:600 .78rem var(--display);color:var(--crit)}
.v-gauge code{font:400 .72rem/1.4 var(--mono);color:var(--faint);text-align:center;overflow-wrap:anywhere}
.v-evi{gap:.45rem}
.ln{height:.5rem;border-radius:3px;background:rgba(237,235,230,.1)}
.redact{height:.85rem;width:62%;border-radius:3px;background:repeating-linear-gradient(135deg,#000 0 5px,#19191b 5px 10px);border:1px solid var(--line-2)}
.mark{position:relative;height:1.9rem;border:1.5px solid var(--crit);border-radius:6px;display:flex;align-items:center;padding:0 .5rem}
.mark .ln{width:70%;background:rgba(237,235,230,.2)}
.mark em{position:absolute;right:-.2rem;top:-.85rem;font:700 .66rem var(--display);font-style:normal;background:var(--crit);color:#1a0a06;padding:.12rem .45rem;border-radius:999px}
.trow{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.55rem .8rem;border-radius:8px;background:rgba(237,235,230,.04);border:1px solid var(--line);font:600 .88rem var(--display)}
.trow span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch{font:700 .72rem var(--display);font-style:normal;padding:.2rem .6rem;border-radius:999px;white-space:nowrap;border:1px solid var(--line-2);color:var(--soft)}
.ch.real{color:var(--crit);border-color:rgba(226,87,59,.5)}.ch.na{color:var(--low);border-color:rgba(123,162,214,.45)}
.always{display:flex;align-items:center;gap:.5rem;font:600 .8rem var(--display);color:var(--soft);padding-left:.2rem}
.always i{width:1rem;height:1rem;border-radius:4px;background:var(--text);position:relative}
.always i::after{content:"";position:absolute;left:.31rem;top:.12rem;width:.26rem;height:.52rem;border:solid #0A0A0B;border-width:0 2px 2px 0;transform:rotate(45deg)}
.v-ret{flex-direction:row;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap}
.st{font:600 .85rem var(--display);padding:.4rem .9rem;border-radius:999px;border:1px solid var(--line-2);color:var(--soft)}
.st.open{color:var(--high);border-color:rgba(222,138,62,.5)}
.st.fixed{color:var(--low);border-color:rgba(123,162,214,.5)}
.st.ver{color:#8CC9A1;border-color:rgba(140,201,161,.5)}
.v-ret .bar{width:1.6rem;height:1px;background:var(--line-2)}
.v-ret .acc{flex-basis:100%;text-align:center;font:500 .8rem var(--sans);color:var(--faint)}
.v-rep{flex-direction:row;align-items:center;justify-content:center;padding:1.4rem 1rem 0;overflow:hidden}
.v-rep img{width:30%;border-radius:5px;box-shadow:0 20px 40px -12px rgba(0,0,0,.9);margin:0 -2.5%;transition:transform .35s}
.v-rep img:nth-child(1){transform:rotate(-6deg) translateY(14px)}
.v-rep img:nth-child(3){transform:rotate(6deg) translateY(14px)}
.v-rep img:nth-child(2){position:relative;z-index:1;transform:translateY(-4px)}
.bt:hover .v-rep img:nth-child(1){transform:rotate(-10deg) translate(-6px,10px)}
.bt:hover .v-rep img:nth-child(3){transform:rotate(10deg) translate(6px,10px)}

/* panels */
.panel{border-radius:var(--r-lg);padding:clamp(1.8rem,5vw,3.6rem);position:relative;overflow:hidden}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.panel h2{margin-bottom:1.1rem}
.panel p{color:var(--soft);max-width:30rem}
.panel .src{font-size:.9rem;color:var(--faint)}
.dots{display:grid;grid-template-columns:repeat(21,1fr);gap:5px;margin:0;padding:0;list-style:none}
.dots li{aspect-ratio:1;background:rgba(237,235,230,.07);border-radius:2px;transition:background .5s,box-shadow .5s}
.dots.in li{background:rgba(237,235,230,.14)}
.dots.in li.k{background:var(--text);box-shadow:0 0 14px rgba(237,235,230,.45)}
.tally{display:flex;align-items:baseline;gap:.9rem;margin-top:1.4rem;flex-wrap:wrap}
.tally b{font:600 clamp(2.4rem,4vw,3.2rem)/1 var(--display);letter-spacing:-.04em}
.tally b i{font-style:normal;color:var(--ember)}
.tally span{color:var(--soft);font-size:1rem}

/* live card */
.ticks{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.75rem}
.ticks li{display:flex;gap:.8rem;align-items:baseline;font:500 1rem var(--sans);color:var(--text)}
.ticks li::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--ember);transform:translateY(-.1rem)}
.finding{border-radius:var(--r-md);overflow:hidden;background:rgba(8,8,9,.7);border:1px solid var(--line-2)}
.finding header{display:flex;align-items:center;gap:.8rem;padding:1rem 1.4rem;border-bottom:1px solid var(--line)}
.finding header b{font:500 .78rem var(--mono);color:var(--soft);border:1px solid var(--line-2);padding:.2rem .5rem;border-radius:6px}
.finding header h2{font-size:1.1rem;letter-spacing:-.02em;font-weight:600;margin:0}
.metrics{margin:0;padding:.7rem 1.4rem .5rem;display:grid;gap:.1rem}
.metric{display:grid;grid-template-columns:8.5rem minmax(0,1fr);align-items:center;gap:.6rem;padding:.4rem 0;border:0;margin:0;min-width:0}
.metric legend{padding:0;font:600 .88rem var(--display);float:left;width:8.5rem;color:var(--soft)}
.metric .opts{display:flex;flex-wrap:wrap;gap:.3rem}
.metric button{font:600 .85rem var(--display);padding:.32rem .85rem;min-height:2.1rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--soft);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.metric button:hover{border-color:var(--line-2);color:var(--text)}
.metric button[aria-pressed=true]{background:var(--text);border-color:var(--text);color:#0A0A0B}
@media (max-width:520px){.metric{grid-template-columns:1fr;gap:.2rem}.metric legend{float:none;width:auto}}
.verdict{display:flex;align-items:center;gap:.4rem 1.2rem;flex-wrap:wrap;padding:1.1rem 1.4rem 1.3rem;border-top:1px solid var(--line)}
.score{font:600 3.4rem/1 var(--display);letter-spacing:-.05em;min-width:4.4rem;font-variant-numeric:tabular-nums}
.sevname{font:600 1.25rem var(--display);letter-spacing:-.02em}
.sev-Critical{color:var(--crit)}.sev-High{color:var(--high)}.sev-Medium{color:var(--med)}.sev-Low{color:var(--low)}.sev-Info{color:var(--info)}
.vector{flex:1 1 14rem;font:400 .76rem/1.5 var(--mono);color:var(--faint);overflow-wrap:anywhere;margin:0}

/* steps: a real sequence, so numbered */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,2vw,1.6rem)}
.step{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;border-radius:var(--r-lg);padding:clamp(1.4rem,4vw,3rem);overflow:hidden}
.step:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.step:nth-child(even) .copy{order:2}
.step .n{font:500 .85rem var(--mono);color:var(--faint);margin-bottom:1.2rem;display:block}
.step .n::before{content:"0"}
.step h3{font-size:clamp(1.5rem,2.5vw,2rem);letter-spacing:-.035em;margin-bottom:.8rem}
.step p{color:var(--soft);margin:0}
.shot{border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;background:#07070A;box-shadow:0 40px 70px -30px rgba(0,0,0,.95)}
@media (max-width:860px){.step,.step:nth-child(even){grid-template-columns:1fr}.step:nth-child(even) .copy{order:0}}

/* templates */
.tpls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.7rem,2vw,1.3rem);margin:0;padding:clamp(1.2rem,3vw,2rem);list-style:none;border-radius:var(--r-lg)}
.tpls figure{margin:0}
.tpls img{border-radius:6px;box-shadow:0 24px 40px -16px rgba(0,0,0,.95);transition:transform .3s}
.tpls li:hover img{transform:translateY(-5px)}
.tpls figcaption{margin-top:.8rem;font:600 .9rem var(--display);color:var(--soft)}
@media (max-width:860px){.tpls{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.tpls{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* closing call to action: sentence on the left, button on the right */
.close{padding:0 0 clamp(4rem,8vw,7rem)}
.cta-panel{border-radius:var(--r-lg);padding:clamp(2.2rem,6vw,5rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem 3rem;position:relative;overflow:hidden}
.cta-panel h2{max-width:14ch;font-size:clamp(1.8rem,3.6vw,2.9rem)}
.cta-panel .side{display:grid;gap:1.4rem;justify-items:start}
.cta-panel p{color:var(--soft);margin:0;max-width:22rem}

/* ---------- inner pages ---------- */
.pagehead{padding:clamp(3.5rem,8vw,6rem) 0 clamp(2rem,4vw,3.2rem)}
.pagehead h1{font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:17ch;margin-bottom:1.4rem}
.pagehead .lede{max-width:32rem;margin:0}
.group{padding:clamp(2rem,4.2vw,3.2rem) 0}
.group h2{font-size:clamp(1.4rem,2.3vw,1.8rem);margin-bottom:1.6rem;display:flex;align-items:baseline;gap:1rem}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,1.8vw,1.4rem)}
.card{border-radius:var(--r-md);padding:clamp(1.4rem,2.6vw,2rem);min-width:0}
.card h3{font-size:1.15rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.card p{margin:0;color:var(--soft)}
@media (max-width:760px){.cards{grid-template-columns:1fr}}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cards-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.cards-3{grid-template-columns:1fr}}
.facts{margin:0;padding:0;list-style:none;display:grid;gap:1.1rem}
.facts b{display:block;margin-bottom:.15rem;font:600 1rem var(--display)}
.facts span{color:var(--soft)}
.notyet{border-radius:var(--r-md);padding:clamp(1.3rem,3vw,2rem);border:1px dashed var(--line-2)}
.notyet h3{font-size:1.2rem;margin-bottom:.5rem}
.notyet p{margin:0;color:var(--soft);max-width:44rem}

/* pricing */
.planrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.pcard{border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.3rem);display:flex;flex-direction:column;gap:1rem}
.pcard.pro{border-color:rgba(226,87,59,.55)}
.pcard h2{font-size:1.4rem;display:flex;align-items:center;gap:.6rem}
.pcard .for{margin:0;color:var(--soft)}
.pcard .price{margin:.4rem 0 .2rem;font:600 clamp(2.4rem,4.2vw,3.2rem)/1 var(--display);letter-spacing:-.05em}
.pcard .price small{font:400 1rem var(--sans);color:var(--soft);letter-spacing:0}
.pcard ul{list-style:none;margin:.4rem 0 1rem;padding:1.2rem 0 0;border-top:1px solid var(--line);display:grid;gap:.7rem}
.pcard li{display:flex;gap:.8rem;align-items:baseline;color:var(--text)}
.pcard li::before{content:"";flex:none;width:.7rem;height:1px;background:var(--soft);transform:translateY(-.3rem)}
.pcard .btn{margin-top:auto}
@media (max-width:760px){.planrow{grid-template-columns:1fr}}
.tablewrap{border-radius:var(--r-md);overflow:hidden;overflow-x:auto}
.plans{width:100%;border-collapse:collapse;min-width:34rem}
.plans th,.plans td{padding:.85rem 1.3rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.plans thead th{font:600 1.05rem var(--display)}
.plans tbody th{font-weight:400;width:46%;color:var(--soft)}
.plans td.no{color:var(--faint)}
.plans tr.grp th{font:600 .82rem var(--display);color:var(--text);padding-top:1.3rem;padding-bottom:.6rem;letter-spacing:.03em}
.plans tbody tr:last-child th,.plans tbody tr:last-child td{border-bottom:0}
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,1.8vw,1.4rem)}
.faq>div{border-radius:var(--r-md);padding:1.4rem 1.5rem}
.faq h3{font-size:1.08rem;margin-bottom:.4rem}
.faq p{margin:0;color:var(--soft)}
@media (max-width:760px){.faq{grid-template-columns:1fr}}

/* contact */
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.way{border-radius:var(--r-lg);padding:clamp(1.5rem,3.5vw,2.5rem)}
.way h2{font-size:1.3rem;margin-bottom:1.6rem;color:var(--soft)}
.mail{display:block;font:600 clamp(1.15rem,2.2vw,1.55rem) var(--display);letter-spacing:-.03em;color:var(--text);text-decoration:underline;text-decoration-color:var(--ember);text-decoration-thickness:1.5px;text-underline-offset:6px;overflow-wrap:anywhere;margin-bottom:1rem}
.mail:hover{text-decoration-color:var(--text)}
.way p{margin:0;color:var(--soft)}
@media (max-width:760px){.ways{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);color:var(--soft);padding:clamp(2.5rem,5vw,4rem) 0 2rem;font-size:.97rem}
.foot .cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:1.6rem}
@media (max-width:760px){.foot .cols{grid-template-columns:repeat(2,minmax(0,1fr))}.foot .cols>div:first-child{grid-column:1/-1}}
.foot .brand{color:var(--text)}
.foot h4{margin:0 0 .9rem;font:600 .85rem var(--display);color:var(--faint);letter-spacing:.04em}
.foot nav{display:grid;gap:.55rem;justify-items:start;overflow-wrap:anywhere}
.foot a{text-decoration:none}
.foot a:hover{color:var(--text)}
.foot small{display:block;margin-top:.9rem;color:var(--faint);max-width:20rem;font-size:.92rem;line-height:1.5}
.foot .base{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;color:var(--faint);font-size:.9rem}
.card h3+.facts{margin-top:1.1rem}

/* long-form pages: privacy, terms */
.textlink{color:var(--text);text-decoration:underline;text-decoration-color:var(--ember);text-underline-offset:4px}
.textlink:hover{text-decoration-color:var(--text)}
.foot .base a:hover{color:var(--text);text-decoration:underline}

/* small corner icon on feature cards */
.card .ci{position:absolute;top:1.05rem;right:1.05rem;width:2.1rem;height:2.1rem;border-radius:.65rem;border:1px solid var(--line);background:rgba(237,235,230,.03);display:grid;place-items:center;color:var(--faint);transition:color .3s,border-color .3s,background .3s}
.card .ci svg{width:1.05rem;height:1.05rem}
.card:hover .ci{color:var(--ember);border-color:rgba(226,87,59,.35);background:rgba(226,87,59,.07)}
.card:has(.ci) h3{padding-right:2.8rem}

/* hall of fame */
.hof{border-radius:var(--r-md);overflow:hidden;margin-top:1.2rem}
.hof-head{display:grid;grid-template-columns:2fr 2fr 1fr 1fr;gap:1rem;padding:.9rem clamp(1.1rem,2.3vw,1.7rem);border-bottom:1px solid var(--line);font:500 .8rem var(--sans);letter-spacing:.02em;color:var(--faint)}
.hof-empty{display:grid;justify-items:center;text-align:center;gap:.7rem;padding:clamp(2.4rem,6vw,4rem) 1.25rem}
.hof-empty p{margin:0;color:var(--text)}
.hof-empty b{font-weight:500}
.hof-empty span{color:var(--soft);max-width:30rem;font-size:.95rem}
.ci-lg{width:3.2rem;height:3.2rem;border-radius:1rem;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ember);background:rgba(226,87,59,.07);font-style:normal}
.ci-lg svg{width:1.4rem;height:1.4rem}
@media (max-width:620px){.hof-head{grid-template-columns:1fr 1fr}.hof-head span:nth-child(n+3){display:none}}

/* early access */
.row-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 .9rem}
.copy-note{min-height:1.4em;font-size:.95rem}
.way .facts{margin:0}

/* legal documents */
.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards-4{grid-template-columns:1fr}}
.cards-4 .card h3{font-size:1.05rem;padding-right:2.8rem}
.cards-4 .card p{font-size:.95rem;line-height:1.55}
.stamp{margin:1.6rem 0 0;color:var(--faint);font-size:.95rem}
.doc{display:grid;grid-template-columns:14.5rem minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:clamp(1.5rem,3vw,2.5rem)}
.toc{position:sticky;top:6rem;font-size:.95rem}
.toc-h{font:600 .85rem var(--display);color:var(--faint);letter-spacing:.04em;margin:0 0 .8rem}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line);counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{display:block;padding:.38rem 0 .38rem 1rem;margin-left:-1px;border-left:1px solid transparent;color:var(--soft);text-decoration:none;line-height:1.35;transition:color .2s,border-color .2s}
.toc a::before{content:counter(toc) ".\00a0";color:var(--faint)}
.toc a:hover{color:var(--text)}
.toc a[aria-current="true"]{color:var(--text);border-left-color:var(--ember)}
.docbody{counter-reset:cl;max-width:44rem;min-width:0}
.clause{padding:2.4rem 0;border-top:1px solid var(--line);scroll-margin-top:6rem}
.clause:first-child{border-top:0;padding-top:.4rem}
.clause h2{font-size:1.45rem;letter-spacing:-.028em;margin:0 0 1.1rem}
.clause h2::before{counter-increment:cl;content:counter(cl) ".\00a0";color:var(--faint)}
.clause h3{font:600 1.05rem var(--display);margin:1.8rem 0 .6rem;letter-spacing:-.01em}
.clause p,.clause li{color:var(--soft);line-height:1.75}
.clause p{margin:0 0 1.05em}
.clause ul{margin:0 0 1.05em;padding-left:1.15rem;display:grid;gap:.6rem}
.clause li::marker{color:var(--ember)}
.clause b{color:var(--text);font-weight:500}
.clause .tablewrap{margin:1.3rem 0 1.5rem}
.dtable{width:100%;border-collapse:collapse;min-width:40rem;font-size:.95rem}
.dtable th,.dtable td{padding:.95rem 1.1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.55}
.dtable thead th{font:600 .85rem var(--display);letter-spacing:.03em;color:var(--faint)}
.dtable tbody th{font-weight:500;color:var(--text);width:32%}
.dtable td{color:var(--soft)}
.dtable tbody tr:last-child th,.dtable tbody tr:last-child td{border-bottom:0}
@media (max-width:900px){
  .doc{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .toc{position:static}
  .toc ol{display:flex;flex-wrap:wrap;gap:.4rem;border:0}
  .toc a{border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;margin:0;font-size:.9rem}
  .toc a[aria-current="true"]{border-color:rgba(226,87,59,.45)}
}
@media (max-width:700px){
  .dtable{min-width:0;display:block}
  .dtable thead{display:none}
  .dtable tbody,.dtable tr{display:block}
  .dtable tr{padding:1rem 1.1rem;border-bottom:1px solid var(--line)}
  .dtable tbody tr:last-child{border-bottom:0}
  .dtable th,.dtable td{display:block;padding:0;border:0;width:auto!important}
  .dtable tbody th{margin-bottom:.55rem}
  .dtable td{margin-top:.5rem}
  .dtable td::before{display:block;font:600 .78rem var(--display);letter-spacing:.03em;color:var(--faint);margin-bottom:.1rem}
  .dtable td:nth-of-type(1)::before{content:"Why we use it"}
  .dtable td:nth-of-type(2)::before{content:"How long we keep it"}
}

/* ---------- blog ---------- */
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.bgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.bgrid,.bgrid.two{grid-template-columns:1fr}}
.bcard{border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.bart{display:block;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line)}
.bart svg{width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bcard:hover .bart svg{transform:scale(1.035)}
.bbody{padding:clamp(1.1rem,2vw,1.5rem);display:grid;gap:.6rem;align-content:start;flex:1}
.bbody h3{font-size:1.25rem;line-height:1.2}
.bbody h3 a{text-decoration:none}
.bbody h3 a:hover{text-decoration:underline;text-decoration-color:var(--ember);text-underline-offset:4px}
.bbody p{margin:0;color:var(--soft);font-size:.98rem;line-height:1.55}
.tag{justify-self:start;display:inline-block;font:600 .74rem/1 var(--display);letter-spacing:.04em;color:var(--ember);border:1px solid rgba(226,87,59,.5);border-radius:999px;padding:.32rem .65rem}
.meta{display:flex;flex-wrap:wrap;gap:.2rem 1rem;color:var(--faint);font-size:.86rem;margin-top:.3rem}
.meta span+span::before,.meta time+span::before{content:none}

.post-head{padding-top:clamp(2.2rem,5vw,4rem);display:grid;gap:1.1rem;justify-items:start}
.post .back{display:inline-flex;align-items:center;gap:.5rem;color:var(--soft);text-decoration:none;font-size:.95rem}
.post .back svg{width:1rem;height:1rem;transform:rotate(180deg)}
.post .back:hover{color:var(--text)}
.post-head h1{font-size:clamp(1.9rem,3.8vw,2.8rem);max-width:20ch}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1.1rem;margin:0;color:var(--soft);font-size:.95rem}
.byline .by{display:inline-flex;align-items:center;gap:.55rem;color:var(--text)}
.av{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--ember);color:#fff;font:700 .85rem var(--display);font-style:normal}
.hero-art{width:100%;margin-bottom:clamp(1.8rem,3.5vw,2.6rem);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/8}
.hero-art svg{width:100%;height:100%}
.post-col{min-width:0}
.prose{min-width:0;max-width:42rem;padding-bottom:clamp(2.5rem,5vw,4rem)}
.prose p,.prose li{color:#CFCBC2;font-size:1.0625rem;line-height:1.75}
.prose .lead{font-size:1.25rem;line-height:1.65;color:var(--text)}
.prose h2{font-size:clamp(1.4rem,2.3vw,1.75rem);margin:2.8rem 0 1rem;scroll-margin-top:5rem;position:relative}
.prose h2 .hash{margin-left:.5rem;color:var(--faint);text-decoration:none;opacity:0;transition:opacity .2s;font-weight:400}
.prose h2:hover .hash,.prose h2 .hash:focus-visible{opacity:1}
.prose ul,.prose ol{padding-left:1.3rem;margin:0 0 1.2em;display:grid;gap:.7rem}
.prose li::marker{color:var(--ember)}
.prose li b{color:var(--text);font-weight:600}
.prose a{color:var(--text);text-decoration:underline;text-decoration-color:var(--ember);text-underline-offset:4px}
.prose .fine{font-size:.9rem;color:var(--faint)}
.post-end{display:grid;gap:clamp(1.6rem,3vw,2.4rem);padding-bottom:clamp(3rem,6vw,5rem)}
.authorbox{display:flex;gap:1rem;align-items:flex-start;max-width:42rem}
.authorbox .av{width:2.8rem;height:2.8rem;font-size:1.1rem;flex:none}
.authorbox p{margin:.2rem 0 0;color:var(--soft);font-size:.98rem}
.relh{font-size:clamp(1.3rem,2.1vw,1.6rem)}

/* ---------- cookie choice ---------- */
.consent{position:fixed;left:max(1rem,env(safe-area-inset-left,0px));bottom:max(1rem,env(safe-area-inset-bottom,0px));right:max(1rem,env(safe-area-inset-right,0px));max-width:30rem;z-index:95;background:#121214;border:1px solid var(--line-2);border-radius:var(--r-md);padding:1.2rem 1.3rem;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.consent h2{font-size:1.1rem;letter-spacing:-.02em;margin:0 0 .5rem}
.consent p{margin:0 0 1rem;color:var(--soft);font-size:.95rem;line-height:1.55}
.consent a{color:var(--text);text-decoration:underline;text-decoration-color:var(--ember);text-underline-offset:3px}
.consent-row{display:flex;flex-wrap:wrap;gap:.6rem}
.consent-row .btn{flex:1 1 11rem}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;cursor:pointer}
.linklike:hover{text-decoration-color:var(--text)}

[hidden]{display:none!important}

/* ---------- blog: reading progress, contents list, tags ---------- */
.rp{position:fixed;left:0;right:0;top:0;height:3px;z-index:85;pointer-events:none}
.rp i{display:block;height:100%;background:var(--ember);transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 12px rgba(226,87,59,.65)}
.post-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.ptag{font:500 .8rem/1 var(--display);color:var(--soft);border:1px solid var(--line-2);border-radius:999px;padding:.34rem .7rem;text-decoration:none;transition:color .2s,border-color .2s}
.ptag:hover{color:var(--text);border-color:var(--soft)}
.post-main{display:grid;grid-template-columns:15.5rem minmax(0,42rem);gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)}
.ptoc-col{position:sticky;top:5.5rem;align-self:start}
.ptoc>summary,.bfilter>summary{list-style:none;cursor:pointer;font:700 1rem/1.3 var(--display);letter-spacing:-.01em;color:var(--text)}
.ptoc>summary::-webkit-details-marker,.bfilter>summary::-webkit-details-marker{display:none}
.ptoc nav{position:relative;max-height:calc(100vh - 16rem);overflow-y:auto;overscroll-behavior:contain;margin-top:.8rem}
.ptoc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line-2);display:grid}
.ptoc a{display:block;padding:.42rem 0 .42rem 1rem;margin-left:-1px;border-left:2px solid transparent;color:var(--soft);font-size:.93rem;line-height:1.4;text-decoration:none;transition:color .2s,border-color .2s}
.ptoc a:hover{color:var(--text)}
.ptoc a[aria-current]{color:var(--text);border-left-color:var(--ember)}
.ptoc-read{margin:1.1rem 0 0;display:grid;gap:.55rem;font-size:.85rem;line-height:1.3;color:var(--faint)}
.ptoc-read b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.ptoc-bar{display:block;height:3px;background:var(--line-2);border-radius:3px;overflow:hidden}
.ptoc-bar i{display:block;height:100%;background:var(--ember);transform:scaleX(0);transform-origin:0 50%}
@media (max-width:63.99rem){
  .post-main{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .ptoc-col{position:static}
  .ptoc{border:1px solid var(--line);border-radius:var(--r-md);padding:.95rem 1.15rem;background:rgba(237,235,230,.03)}
  .ptoc>summary,.bfilter>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem}
  .ptoc>summary::after,.bfilter>summary::after{content:"";width:.6rem;height:.6rem;border-right:2px solid var(--soft);border-bottom:2px solid var(--soft);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s;flex:none}
  .ptoc[open]>summary::after,.bfilter[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
  .ptoc nav{max-height:none}
  .ptoc-read{display:none}
}

/* ---------- blog index: search and filters ---------- */
.blayout{display:grid;grid-template-columns:15.5rem minmax(0,1fr);gap:clamp(1.6rem,4vw,3.2rem);align-items:start}
.bfilter-col{position:sticky;top:5.5rem;min-width:0;max-height:calc(100vh - 6.5rem);overflow-y:auto;overscroll-behavior:contain;padding:.25rem .5rem .25rem .65rem;margin:-.25rem -.5rem -.25rem -.65rem}
.bf{display:grid;gap:1.5rem;margin-top:1.1rem}
.bf-l,.bf legend{font:600 .9rem/1.3 var(--display);color:var(--text);padding:0;margin:0 0 .55rem;display:block}
.bf fieldset{border:0;margin:0;padding:0;min-width:0}
.bq{position:relative}
.bq svg{position:absolute;left:.95rem;top:50%;width:1.05rem;height:1.05rem;transform:translateY(-50%);fill:none;stroke:var(--faint);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.bq input{width:100%;min-height:2.9rem;padding:.55rem 1rem .55rem 2.6rem;background:rgba(237,235,230,.04);border:1px solid var(--line-2);border-radius:999px;color:var(--text);font:400 1rem var(--sans);transition:border-color .2s,background .2s}
.bq input::placeholder{color:var(--faint)}
.bq input:hover{border-color:rgba(237,235,230,.3)}
.bq input:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.opt,.chip{position:relative;cursor:pointer;color:var(--soft)}
.opt input,.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.opt{display:flex;align-items:center;gap:.7rem;padding:.42rem .65rem;margin:0 -.65rem;border-radius:var(--r-sm);font-size:.97rem;transition:color .2s,background .2s}
.opt::before{content:"";flex:none;width:.95rem;height:.95rem;border-radius:50%;border:1.5px solid var(--faint);box-shadow:inset 0 0 0 3px var(--bg);transition:border-color .2s,background .2s}
.opt:hover{color:var(--text);background:rgba(237,235,230,.04)}
.opt:has(input:checked){color:var(--text)}
.opt:has(input:checked)::before{border-color:var(--ember);background:var(--ember)}
.opt i,.chip i{margin-left:auto;font-style:normal;color:var(--faint);font-size:.82rem;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--line-2);border-radius:999px;padding:.36rem .75rem;font-size:.88rem;line-height:1.2;transition:color .2s,border-color .2s,background .2s}
.chip i{margin-left:.1rem}
.chip:hover{color:var(--text);border-color:var(--soft)}
.chip:has(input:checked){color:var(--text);border-color:var(--ember);background:rgba(226,87,59,.13)}
.opt:has(input:focus-visible),.chip:has(input:focus-visible){outline:2px solid var(--text);outline-offset:2px}
.bf-clear.linklike{justify-self:start;color:var(--soft);font-size:.92rem}
.bres{min-width:0}
.bcount{margin:0 0 1rem;color:var(--faint);font-size:.92rem;min-height:1.5em}
.ctags{list-style:none;margin:.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.1rem .8rem}
.ctags li{font-size:.82rem;color:var(--faint)}
.ctags li::before{content:"#";margin-right:.1em;color:var(--ember);opacity:.8}
.bempty{padding:clamp(2rem,6vw,3.5rem) 1.5rem;text-align:center;border:1px dashed var(--line-2);border-radius:var(--r-md);display:grid;justify-items:center;gap:.6rem}
.bempty h3{font-size:1.3rem}
.bempty p{margin:0 0 .6rem;color:var(--soft)}
.bcard[hidden]{display:none}
.bf-n{font:500 .8rem var(--sans);font-style:normal;color:var(--ember);margin-left:.7rem}
@media (max-width:59.99rem){
  .blayout{grid-template-columns:minmax(0,1fr);gap:1.2rem}
  .bfilter-col{position:static;max-height:none;overflow:visible;padding:0;margin:0}
  .bfilter{border:1px solid var(--line);border-radius:var(--r-md);padding:.95rem 1.15rem;background:rgba(237,235,230,.03)}
  .bfilter>summary>span:first-child{margin-right:auto}
  .bf-n{margin-left:0}
}