/* Webfont @font-face rules live in assets/fonts.css, which every page links
   alongside this file (index.html and bank-statement-analyzer.html link only
   fonts.css — they carry a forked copy of the base CSS inline). */

:root{
  /* surface */
  --bg:#F5F6F9; --surface:#FFFFFF; --ink:#131722; --ink-dim:#5A6170; --border:#E2E5EC;
  /* brand */
  --brand:#223AC9; --brand-dim:#E9EBFB; --brand-dark:#1626A8;
  --teal:#047A4E; --teal-dim:#E0F7EC; --green:#00BB6E;
  --amber:#916010; --amber-dim:#F6EDD9; --danger:#BE3A34; --danger-dim:#FAE8E6;
  /* gradient + fonts */
  --grad:linear-gradient(120deg,#223AC9 0%,#0E7FA0 55%,#00BB6E 100%);
  --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'IBM Plex Mono',monospace;
  --maxw:1140px;
  /* theme-aware shadows (alpha is encoded in the color itself) */
  --shadow-1:0 26px 52px -22px rgba(19,23,34,.18);
  --shadow-2:0 10px 22px rgba(19,23,34,.07);
  --shadow-3:0 8px 18px rgba(34,58,201,.28);
  --shadow-4:0 12px 26px rgba(34,58,201,.26);
  --shadow-5:0 16px 30px rgba(34,58,201,.32);
  --shadow-6:0 14px 30px rgba(0,0,0,.22);
  /* header backdrop — needs transparency */
  --header-bg:rgba(245,246,249,.92);
  --header-border:#E2E5EC;
  /* inverse (text/icons on a filled colored background) */
  --on-brand:#FFFFFF;
  --on-ink:#FFFFFF;
  /* dark-on-light code/scanline (page-specific) */
  --scanline:rgba(34,58,201,.14);
  --scanline-2:rgba(34,58,201,.3);
  /* misc */
  --ribbon-bg:#131722;
  --ribbon-num:#00BB6E;
  --ribbon-fg:#FFFFFF;
  --stats-bg:#131722;
  --stats-fg:#FFFFFF;
  --stats-dim:#9BA1AD;
  --stats-border:#2A2F3C;
  --legal-ink:#31363F;
  --final-sub:#C6D0EC;
  --icon-on-light:currentColor;
  --badge-on-bg:rgba(255,255,255,.18);
  --input-bg:#FFFFFF;
  --input-border:#E2E5EC;
}

/* ----- DARK THEME ----- */
:root[data-theme="dark"]{
  /* surface — neutral cool dark, not pure black (better contrast + OLED-friendly) */
  --bg:#0B0E14; --surface:#141821; --ink:#E6E9F0; --ink-dim:#9AA1B2; --border:#252B39;
  /* brand — slightly desaturated/lighter for AA contrast on dark surfaces */
  --brand:#7C8DF0; --brand-dim:#1E2647; --brand-dark:#A6B3FA;
  --teal:#3BD094; --teal-dim:#0E2A1F; --green:#2BD886;
  --amber:#F0B86A; --amber-dim:#3A2A12; --danger:#F26E68; --danger-dim:#3A1816;
  /* gradient — keep brand identity, lift mids for legibility on dark */
  --grad:linear-gradient(120deg,#7C8DF0 0%,#3CAFCF 55%,#2BD886 100%);
  /* shadows are softer on dark (large alpha would feel heavy) */
  --shadow-1:0 26px 52px -22px rgba(0,0,0,.55);
  --shadow-2:0 10px 22px rgba(0,0,0,.35);
  --shadow-3:0 8px 18px rgba(124,141,240,.32);
  --shadow-4:0 12px 26px rgba(124,141,240,.30);
  --shadow-5:0 16px 30px rgba(124,141,240,.38);
  --shadow-6:0 14px 30px rgba(0,0,0,.55);
  --header-bg:rgba(11,14,20,.85);
  --header-border:#252B39;
  --on-brand:#0B0E14;
  --on-ink:#0B0E14; /* contrast for elements filled with --ink (which is light in dark mode) */
  --scanline:rgba(124,141,240,.18);
  --scanline-2:rgba(124,141,240,.34);
  --ribbon-bg:#0B0E14; /* truly dark band, distinct from page surface */
  --ribbon-num:#2BD886;
  --ribbon-fg:#E6E9F0;
  --stats-bg:#141821;
  --stats-fg:#E6E9F0;
  --stats-dim:#9AA1B2;
  --stats-border:#252B39;
  --legal-ink:#C4C9D4;
  --final-sub:#C6D0EC;
  --icon-on-light:currentColor;
  --badge-on-bg:rgba(255,255,255,.10);
  --input-bg:#141821;
  --input-border:#252B39;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .2s ease,color .2s ease;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
/* form controls do not inherit the page font by default in any browser */
input,select,textarea{font-family:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
::selection{background:var(--brand);color:#fff;}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}

/* ----- theme toggle button ----- */
.ts-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--ink-dim);transition:color .15s ease,border-color .15s ease,background-color .15s ease,transform .15s ease;flex-shrink:0;}
.ts-theme-toggle:hover{color:var(--ink);border-color:var(--brand);background:var(--brand-dim);}
.ts-theme-toggle:active{transform:scale(.96);}
.ts-theme-toggle svg{width:18px;height:18px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ts-theme-toggle .ts-icon-sun{display:none;}
.ts-theme-toggle .ts-icon-moon{display:block;}
:root[data-theme="dark"] .ts-theme-toggle .ts-icon-sun{display:block;}
:root[data-theme="dark"] .ts-theme-toggle .ts-icon-moon{display:none;}
/* mobile-panel: full-width row, like other links */
.mobile-panel .ts-theme-toggle{width:100%;justify-content:flex-start;height:42px;margin-top:10px;border-width:1px 0 0;border-radius:0;padding:0;background:transparent;}
.mobile-panel .ts-theme-toggle .ts-label{font-size:15px;color:var(--ink-dim);font-weight:500;margin-left:10px;}

header{position:sticky;top:0;z-index:60;background:var(--header-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--header-border);transition:background-color .2s ease,border-color .2s ease;}
nav.wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px;}
.logo{display:flex;align-items:center;}
.logo svg{height:24px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:22px;}
.nav-links a:not(.pill):not(.ts-theme-toggle){font-size:14px;font-weight:500;color:var(--ink-dim);}
.nav-links a:not(.pill):not(.ts-theme-toggle):hover{color:var(--ink);}
.nav-links a.active:not(.pill):not(.ts-theme-toggle){color:var(--brand);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;}
.nav-links a.active:not(.pill):not(.ts-theme-toggle):hover{color:var(--brand-dark);}
.nav-links .quiet{font-size:13.5px;}
.pill{background:var(--brand);color:var(--on-brand);font-weight:600;font-size:14px;padding:10px 18px;border-radius:8px;transition:transform .15s ease,box-shadow .15s ease,background-color .2s ease;}
.pill:hover{background:var(--brand-dark);transform:translateY(-1px);box-shadow:var(--shadow-3);}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px;}
.burger span{width:22px;height:2px;background:var(--ink);}
.mobile-panel{display:none;position:absolute;top:70px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);flex-direction:column;padding:8px 28px 20px;transition:background-color .2s ease,border-color .2s ease;}
.mobile-panel.open{display:flex;}
.mobile-panel a:not(.ts-theme-toggle){padding:12px 0;font-size:15px;color:var(--ink-dim);border-bottom:1px solid var(--border);}
.mobile-panel a.active:not(.ts-theme-toggle){color:var(--brand);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;}
@media (max-width:980px){.nav-links{display:none;}.burger{display:flex;}}

.crumbs{padding:18px 0 0;font-size:12.5px;color:var(--ink-dim);}
nav.crumbs{display:block;height:auto;}
.crumbs a:hover{color:var(--ink);text-decoration:underline;}
.crumbs .sep{margin:0 7px;color:var(--border);}
.crumbs b,.crumbs [aria-current="page"]{color:var(--ink);font-weight:600;}

.hero{position:relative;padding:56px 0 44px;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr;gap:34px;}}
.blob{position:absolute;width:420px;height:420px;border-radius:50%;background:var(--brand-dim);filter:blur(90px);opacity:.65;top:-160px;right:-120px;z-index:-1;}
.eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);font-weight:600;margin-bottom:14px;}
h1{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4.2vw,46px);line-height:1.08;letter-spacing:-.02em;}
h1 .hl{color:var(--brand);background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.sub{margin-top:16px;max-width:52ch;font-size:16px;color:var(--ink-dim);font-weight:500;}
.hero-cta{margin-top:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.big-btn{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--on-brand);background:var(--brand);padding:14px 26px;border-radius:10px;border:none;display:inline-flex;align-items:center;gap:10px;box-shadow:var(--shadow-4);transition:transform .18s ease,box-shadow .18s ease,background-color .2s ease;}
.big-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-5);}
.ghost-btn{font-size:14.5px;font-weight:600;color:var(--brand);}
.micro{font-size:12.5px;color:var(--ink-dim);margin-top:10px;}

.report{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-1);overflow:hidden;transition:background-color .2s ease,border-color .2s ease;}
.report-top{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);}
.report-top .t{font-family:var(--font-display);font-size:13.5px;font-weight:700;}
.report-top .acct{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-dim);}
.rpanel{padding:14px 18px 16px;}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--border);font-size:12.5px;}
.kv:last-child{border-bottom:none;}
.kv .k{color:var(--ink-dim);font-family:var(--font-mono);font-size:11px;}
.kv .v{font-weight:600;font-family:var(--font-mono);text-align:right;}
.kv .v.good{color:var(--teal);}
.kv .v a:hover{text-decoration:underline;}
.report-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:10.5px;color:var(--ink-dim);}
.report-foot .ok{color:var(--teal);font-weight:600;}
.report-foot .warn{color:var(--amber);font-weight:600;}
.report-foot a{color:var(--brand);font-weight:600;}

section{padding:52px 0;}
section.alt{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);transition:background-color .2s ease,border-color .2s ease;}
.section-head{max-width:580px;margin:0 auto 32px;text-align:center;}
.section-head .eyebrow{margin-bottom:10px;}
.section-head h2{font-family:var(--font-display);font-size:clamp(23px,3vw,30px);font-weight:700;letter-spacing:-.015em;}
.section-head p{margin-top:10px;color:var(--ink-dim);font-size:14.5px;}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.feat-grid.feat-4{grid-template-columns:repeat(4,1fr);}
.feat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px 20px;transition:background-color .2s ease,border-color .2s ease;}
section.alt .feat{background:var(--bg);}
.feat b{display:block;font-family:var(--font-display);font-size:15px;font-weight:700;margin-bottom:6px;}
.feat span{font-size:13px;color:var(--ink-dim);line-height:1.55;}
.feat span a,.step p a,.section-head p a{color:var(--brand);font-weight:600;}
.feat>a{display:block;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--brand);}
a.feat{display:block;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
a.feat:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-2);}
@media (max-width:960px){.feat-grid,.feat-grid.feat-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:580px){.feat-grid,.feat-grid.feat-4{grid-template-columns:1fr;}}

.steps{display:grid;gap:14px;counter-reset:step;}
.steps-3{grid-template-columns:repeat(3,1fr);}
.step{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:20px 16px;transition:background-color .2s ease,border-color .2s ease;}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--brand);letter-spacing:.08em;}
.step h3{font-family:var(--font-display);font-size:15px;font-weight:700;margin:8px 0 6px;}
.step p{font-size:12.5px;color:var(--ink-dim);line-height:1.5;}
@media (max-width:760px){.steps-3{grid-template-columns:1fr;}}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:center;}
.stat-row div{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px 12px;transition:background-color .2s ease,border-color .2s ease;}
.stat-row b{display:block;font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.01em;}
.stat-row span{font-size:11.5px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
@media (max-width:700px){.stat-row{grid-template-columns:repeat(2,1fr);}}

.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}
.faq{background:var(--surface);border:1px solid var(--border);border-radius:12px;transition:background-color .2s ease,border-color .2s ease;}
section.alt .faq{background:var(--bg);}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 20px;font-family:var(--font-display);font-size:15px;font-weight:600;cursor:pointer;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';font-size:19px;color:var(--brand);flex-shrink:0;transition:transform .2s ease;}
.faq[open] summary::after{transform:rotate(45deg);}
.faq p{padding:0 20px 17px;font-size:14px;color:var(--ink-dim);}

.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.rel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 18px;transition:transform .15s ease,border-color .15s ease,background-color .2s ease;display:flex;flex-direction:column;}
section.alt .rel{background:var(--bg);}
.rel:hover{transform:translateY(-2px);border-color:var(--brand);}
.rel b{display:block;font-family:var(--font-display);font-size:14.5px;font-weight:700;margin-bottom:5px;}
.rel span{display:block;font-size:12.5px;color:var(--ink-dim);margin-bottom:10px;flex:1;}
.rel a{font-size:12.5px;font-weight:600;color:var(--brand);}
@media (max-width:760px){.rel-grid{grid-template-columns:1fr;}}

.final{background:var(--grad);color:#fff;text-align:center;border-radius:20px;padding:52px 28px;margin:24px 28px;}
.final h2{font-family:var(--font-display);font-size:clamp(24px,3.4vw,34px);font-weight:700;}
.final p{margin:12px auto 24px;max-width:48ch;color:rgba(255,255,255,.85);font-size:15px;}
.final .big-btn{background:#fff;color:var(--brand);box-shadow:var(--shadow-6);}
.final .alt-link{display:block;margin-top:16px;font-size:13.5px;color:rgba(255,255,255,.85);}
.final .alt-link a{text-decoration:underline;font-weight:600;color:#fff;}

/* legal pages */
.legal{max-width:820px;margin:0 auto;padding:20px 28px 60px;}
.legal h1{font-size:clamp(28px,3.6vw,38px);margin:34px 0 8px;}
.legal .legal-note{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-dim);margin-bottom:26px;}
.legal h2{font-family:var(--font-display);font-size:18px;font-weight:700;margin:26px 0 8px;letter-spacing:-.01em;}
.legal p{font-size:14.5px;color:var(--legal-ink);margin:0 0 12px;transition:color .2s ease;}
.legal ul{margin:0 0 12px 22px;}
.legal li{font-size:14.5px;color:var(--legal-ink);margin-bottom:6px;transition:color .2s ease;}
.legal a{color:var(--brand);text-decoration:underline;}

footer{padding:52px 0 34px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:34px;border-bottom:1px solid var(--border);}
.foot-grid>div{min-width:0;}
.foot-grid .foot-h,.foot-grid h2,.foot-grid h3,.foot-grid h5{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 14px;}
.foot-grid a{display:block;font-size:13.5px;color:var(--ink-dim);padding:4px 0;}
.foot-grid a:hover{color:var(--ink);}
.foot-grid a.active,.foot-meta a.active{color:var(--brand);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;}
.foot-grid a.active:hover,.foot-meta a.active:hover{color:var(--brand-dark);}
.foot-brand p{margin-top:12px;font-size:13px;color:var(--ink-dim);max-width:32ch;}
.foot-brand .logo svg{max-width:100%;}
.foot-meta{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding-top:22px;font-size:12.5px;color:var(--ink-dim);}
.foot-meta a:hover{color:var(--ink);text-decoration:underline;}
@media (max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .foot-brand{grid-column:1/-1;}
  .foot-grid a{padding:6px 0;}
}
@media (max-width:640px){
  .foot-meta{flex-direction:column;align-items:flex-start;gap:8px;}
}
@media (max-width:480px){
  footer{padding:44px 0 30px;}
  .foot-grid{grid-template-columns:1fr;gap:26px;padding-bottom:28px;}
}

/* Accessibility: skip navigation link */
.skip-link{position:absolute;left:-9999px;top:0;background:#223AC9;color:#fff;padding:10px 18px;border-radius:0 0 10px 0;z-index:300;font-weight:600;text-decoration:none;}
:root[data-theme="dark"] .skip-link{background:var(--brand);color:var(--on-brand);}
.skip-link:focus{left:0;}

/* HTML sitemap page */
.sitemap-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px 24px;}
.sitemap-list a{color:var(--brand);font-weight:500;}
.sitemap-list a:hover{text-decoration:underline;}

/* ---- copy-deterrence guards (companion to assets/protect.js) ---- */
img,svg{-webkit-user-drag:none;}
.logo,.nav-links,.mobile-panel,.burger,button,.pill,.big-btn,.ghost-btn,.run-btn,.ts-theme-toggle{-webkit-user-select:none;user-select:none;}
.hp-link{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---- blog ---- */
.post-wrap{max-width:820px;margin:0 auto;padding:20px 28px 8px;}
.post-head h1{font-size:clamp(28px,3.6vw,40px);margin:10px 0 14px;}
.byline{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-dim);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.byline .dot{color:var(--border);}
.post-figure{margin:22px 0 0;}
.post-figure img,.post-body img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.post-body{padding:26px 0 8px;}
.post-body h2{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.01em;margin:26px 0 10px;}
.post-body h3{font-family:var(--font-display);font-size:17.5px;font-weight:700;margin:20px 0 8px;}
.post-body p{font-size:15.5px;line-height:1.7;color:var(--legal-ink);margin:0 0 14px;transition:color .2s ease;}
.post-body ul,.post-body ol{margin:0 0 14px 22px;}
.post-body li{font-size:15.5px;line-height:1.7;color:var(--legal-ink);margin-bottom:6px;transition:color .2s ease;}
.post-body a{color:var(--brand);text-decoration:underline;}
.post-body strong{color:var(--ink);}
.post-body figure{margin:18px 0;}
.table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:12px;margin:0 0 16px;}
.table-scroll table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px;}
.table-scroll th{font-family:var(--font-display);background:var(--surface);}
.table-scroll th,.table-scroll td{padding:10px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;}
.table-scroll tr:last-child td{border-bottom:none;}
.post-body .faq-list{max-width:none;margin:6px 0 16px;}
.post-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--border);margin-bottom:12px;}
.post-card>a{display:block;}
.post-card b a{color:var(--ink);text-decoration:none;font-size:inherit;}
.post-card b a:hover{color:var(--brand);}
.card-meta{display:block;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-dim);margin-bottom:8px;}
.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin:38px 0 0;font-family:var(--font-display);font-size:14px;font-weight:600;}
.pager a,.pager .current{min-width:42px;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--ink-dim);text-align:center;transition:transform .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;}
.pager a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px);box-shadow:var(--shadow-2);}
.pager .current{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}

/* ---- blog index (blog.html + blog/page/N) ---- */
.blog-hero{padding:56px 0 10px;}
.blog-hero .wrap{max-width:680px;text-align:center;}
.blog-hero .sub{margin-left:auto;margin-right:auto;}
.blog-list{padding:34px 0 56px;}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.bcard{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-2);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background-color .2s ease;}
.bcard:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:var(--shadow-1);}
.bcard:has(a:focus-visible){outline:2px solid var(--brand);outline-offset:3px;}
.bcard-media{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--brand-dim);}
.bcard-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.2,.6,.2,1);}
.bcard:hover .bcard-media img{transform:scale(1.045);}
.bcard-body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px;}
.bcard-meta{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-dim);margin-bottom:10px;}
.bcard-title{font-family:var(--font-display);font-size:17px;line-height:1.35;font-weight:700;letter-spacing:-.01em;margin:0 0 8px;}
.bcard-title a{color:var(--ink);transition:color .15s ease;}
.bcard-title a::after{content:"";position:absolute;inset:0;}
.bcard-title a:focus-visible{outline:none;}
.bcard:hover .bcard-title a{color:var(--brand);}
.bcard-excerpt{font-size:13.5px;line-height:1.6;color:var(--ink-dim);margin:0;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
@media (max-width:1020px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}}
.rel-posts{padding:20px 0 60px;}
.rel-posts .bcard-body{padding:16px 18px 18px;}
.rel-posts .bcard-title{margin-bottom:0;}
/* nav.crumbs (specificity 0-1-1) sets display:block; this selector must
   match it so the flex context that enables title truncation actually wins */
nav.crumbs.crumbs-post{max-width:820px;margin:0 auto;padding:18px 28px 0;display:flex;align-items:center;}
.crumbs-post a,.crumbs-post .sep{flex-shrink:0;}
.crumbs-post b,.crumbs-post [aria-current="page"]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
@media (max-width:620px){
  .blog-grid{grid-template-columns:1fr;gap:18px;}
  .blog-hero{padding:44px 0 4px;}
  .blog-list{padding:26px 0 48px;}
}
@media (prefers-reduced-motion:reduce){
  .bcard,.bcard-media img,.pager a,a.feat{transition:none;}
  .bcard:hover,a.feat:hover{transform:none;}
  .bcard:hover .bcard-media img{transform:none;}
  .pager a:hover{transform:none;}
}

/* honor OS preference when no choice has been made */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#0B0E14; --surface:#141821; --ink:#E6E9F0; --ink-dim:#9AA1B2; --border:#252B39;
    --brand:#7C8DF0; --brand-dim:#1E2647; --brand-dark:#A6B3FA;
    --teal:#3BD094; --teal-dim:#0E2A1F; --green:#2BD886;
    --amber:#F0B86A; --amber-dim:#3A2A12; --danger:#F26E68; --danger-dim:#3A1816;
    --grad:linear-gradient(120deg,#7C8DF0 0%,#3CAFCF 55%,#2BD886 100%);
    --shadow-1:0 26px 52px -22px rgba(0,0,0,.55);
    --shadow-2:0 10px 22px rgba(0,0,0,.35);
    --shadow-3:0 8px 18px rgba(124,141,240,.32);
    --shadow-4:0 12px 26px rgba(124,141,240,.30);
    --shadow-5:0 16px 30px rgba(124,141,240,.38);
    --shadow-6:0 14px 30px rgba(0,0,0,.55);
    --header-bg:rgba(11,14,20,.85);
    --header-border:#252B39;
    --on-brand:#0B0E14;
    --on-ink:#0B0E14; /* contrast for elements filled with --ink (which is light in dark mode) */
    --scanline:rgba(124,141,240,.18);
    --scanline-2:rgba(124,141,240,.34);
    --ribbon-bg:#0B0E14; /* truly dark band, distinct from page surface */
    --ribbon-num:#2BD886;
    --ribbon-fg:#E6E9F0;
    --stats-bg:#141821;
    --stats-fg:#E6E9F0;
    --stats-dim:#9AA1B2;
    --stats-border:#252B39;
    --legal-ink:#C4C9D4;
    --final-sub:#C6D0EC;
    --badge-on-bg:rgba(255,255,255,.10);
    --input-bg:#141821;
    --input-border:#252B39;
  }
}