/* ══════════════════════════════════════════════════════════════════════
   PrepGenix — Slipstream blog stylesheet.
   Tokens mirror the marketing homepage and the portal so every surface
   reads as one product. Light + dark, monochrome + one lime spark.
══════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  --accent:#C4F042; --accent-ink:#12140B; --accent-deep:#6F8B0E; --accent-soft:rgba(196,240,66,.18); --accent-line:rgba(196,240,66,.55);
  --ink:#101216; --ink-mid:#3A3E46; --muted:#565B64; --muted-2:#868B95;
  --bg:#EFF1F4; --bg-2:#E6E8EE; --white:#FFFFFF; --rule:#E1E3EA; --rule-soft:#EBEDF1;
  --ink-surface:#0B0C10; --ink-surface-2:#14161C;
  --on-dark:#F3F4F7; --on-dark-mute:#A2A7B2;
  --green:#12915A; --red:#D63A3F;
  --glass:rgba(255,255,255,.72); --glass-rule:rgba(16,18,22,.08);
  --slip:repeating-linear-gradient(-45deg,rgba(16,18,22,.045) 0 1px,transparent 1px 24px);
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px; --r-full:999px;
  --shadow-sm:0 1px 2px rgba(10,10,15,.04),0 1px 3px rgba(10,10,15,.06);
  --shadow:0 4px 6px -1px rgba(10,10,15,.05),0 12px 24px -8px rgba(10,10,15,.07);
  --shadow-lg:0 10px 15px -3px rgba(10,10,15,.06),0 24px 48px -12px rgba(10,10,15,.13);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --maxw:1180px; --readw:720px;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --accent:#CDF551; --accent-ink:#0A0B05; --accent-deep:#A6D42E; --accent-soft:rgba(205,245,81,.16); --accent-line:rgba(205,245,81,.5);
  --ink:#F3F4F7; --ink-mid:#C4C8D0; --muted:#9096A1; --muted-2:#5C616B;
  --bg:#0A0B0E; --bg-2:#101216; --white:#14161C; --rule:#24272E; --rule-soft:#1A1C22;
  --glass:rgba(16,18,22,.66); --glass-rule:rgba(255,255,255,.08);
  --slip:repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 24px);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.4);
  --shadow:0 4px 6px -1px rgba(0,0,0,.4),0 12px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.5),0 24px 48px -12px rgba(0,0,0,.7);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--bg);color:var(--ink);
  font-size:16px;line-height:1.6;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;min-height:100vh;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--accent-soft);color:var(--ink)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.03em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.read{max-width:var(--readw);margin:0 auto;padding:0 28px}

/* ── Nav ─────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:var(--glass);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--glass-rule)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.lockup{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;
  letter-spacing:-.02em;font-size:1.05rem}
.pg-word .pg-a{color:var(--ink)}.pg-word .pg-b{color:var(--accent-deep)}
html[data-theme="dark"] .pg-word .pg-b{color:var(--accent)}
.nav-links{display:flex;gap:26px;align-items:center;font-size:.92rem;font-weight:500;color:var(--muted)}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;gap:12px;align-items:center}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-sm);
  border:1px solid var(--rule);color:var(--muted)}
.icon-btn:hover{color:var(--ink);border-color:var(--muted-2)}
.icon-btn svg{width:18px;height:18px}
#sun{display:none}html[data-theme="dark"] #sun{display:block}html[data-theme="dark"] #moon{display:none}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;
  padding:10px 18px;border-radius:var(--r-full);transition:.2s var(--ease-out)}
.btn-primary{background:var(--ink);color:var(--bg)}
html[data-theme="dark"] .btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-lime{background:var(--accent);color:var(--accent-ink)}
.btn-lime:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-ghost{border:1px solid var(--rule);color:var(--ink)}
.btn-ghost:hover{border-color:var(--muted-2)}
.btn .arrow{width:17px;height:17px;transition:transform .2s var(--ease-out)}
.btn:hover .arrow{transform:translateX(3px)}
@media(max-width:640px){.nav-links{display:none}}

/* ── Blog hub ────────────────────────────────────────── */
.hub-head{padding:64px 0 34px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent-line)}
.hub-head h1{font-size:clamp(2.1rem,5vw,3.1rem);letter-spacing:-.04em}
.hub-head p{color:var(--muted);max-width:560px;margin:16px auto 0;font-size:1.05rem}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:20px 0 40px}
@media(max-width:920px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:26px;transition:.2s var(--ease-out);height:100%}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--muted-2)}
.card .tag{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-deep)}
html[data-theme="dark"] .card .tag{color:var(--accent)}
.card h2{font-size:1.32rem;margin:12px 0 10px;letter-spacing:-.02em}
.card p{color:var(--muted);font-size:.96rem;flex:1}
.card .more{margin-top:16px;font-weight:600;font-size:.9rem;color:var(--ink);
  display:inline-flex;align-items:center;gap:7px}
.card .more svg{width:16px;height:16px;transition:transform .2s var(--ease-out)}
.card:hover .more svg{transform:translateX(3px)}

/* ── Article ─────────────────────────────────────────── */
.crumbs{padding:26px 0 0;font-size:.85rem;color:var(--muted-2)}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 7px;opacity:.6}
.art-head{padding:22px 0 12px}
.art-head .tag{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-deep)}
html[data-theme="dark"] .art-head .tag{color:var(--accent)}
.art-head h1{font-size:clamp(2rem,4.6vw,2.9rem);letter-spacing:-.035em;margin:14px 0 16px;line-height:1.06}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:.9rem;align-items:center}
.art-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
article{padding:14px 0 20px;font-size:1.075rem;line-height:1.75;color:var(--ink-mid)}
html[data-theme="dark"] article{color:var(--ink-mid)}
article h2{font-size:1.6rem;margin:2.1em 0 .6em;color:var(--ink);letter-spacing:-.025em}
article h3{font-size:1.22rem;margin:1.7em 0 .5em;color:var(--ink)}
article p{margin:0 0 1.15em}
article strong{color:var(--ink);font-weight:600}
article a{color:var(--accent-deep);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:2px}
html[data-theme="dark"] article a{color:var(--accent)}
article ul,article ol{margin:0 0 1.15em 1.2em;padding-left:.6em}
article li{margin:.4em 0}
article li::marker{color:var(--accent-deep)}
html[data-theme="dark"] article li::marker{color:var(--accent)}
.lead{font-size:1.22rem;line-height:1.6;color:var(--ink);font-weight:400;margin-bottom:1.4em}
.callout{background:var(--white);border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:18px 22px;margin:1.6em 0;font-size:1rem}
.callout p:last-child{margin-bottom:0}
.callout .k{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-deep);display:block;margin-bottom:6px}
html[data-theme="dark"] .callout .k{color:var(--accent)}
.tbl{width:100%;overflow-x:auto;margin:1.5em 0}
.tbl table{border-collapse:collapse;width:100%;font-size:.96rem;min-width:440px}
.tbl th,.tbl td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule)}
.tbl th{font-family:var(--display);font-weight:700;color:var(--ink);font-size:.9rem}
.tbl td{color:var(--muted)}
.faq-q{font-family:var(--display);font-weight:700;color:var(--ink);font-size:1.1rem;margin:1.5em 0 .3em}

/* ── Article CTA + related ───────────────────────────── */
.cta-card{background:var(--ink-surface);color:var(--on-dark);border-radius:var(--r-xl);
  padding:40px 34px;margin:44px auto;text-align:center;background-image:var(--slip)}
.cta-card h2{color:var(--on-dark);font-size:1.7rem;margin:0 0 10px}
.cta-card p{color:var(--on-dark-mute);max-width:460px;margin:0 auto 22px;font-size:1rem}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-card .btn-ghost{border-color:rgba(255,255,255,.22);color:var(--on-dark)}
.related{border-top:1px solid var(--rule);padding:34px 0;margin-top:20px}
.related h3{font-size:1rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  font-family:var(--sans);font-weight:600;margin-bottom:16px}
.related a{display:block;padding:14px 0;border-bottom:1px solid var(--rule-soft);
  font-family:var(--display);font-weight:600;color:var(--ink);font-size:1.05rem}
.related a:hover{color:var(--accent-deep)}
html[data-theme="dark"] .related a:hover{color:var(--accent)}

/* ── Footer ──────────────────────────────────────────── */
.foot{background:var(--ink-surface);color:var(--on-dark);margin-top:40px;padding:44px 0 30px;
  background-image:var(--slip)}
.foot-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
.foot p{color:var(--on-dark-mute);font-size:.9rem}
.foot .lockup .pg-a{color:var(--on-dark)}.foot .lockup .pg-b{color:var(--accent)}
.foot-links{display:flex;gap:22px;font-size:.9rem;color:var(--on-dark-mute);flex-wrap:wrap}
.foot-links a:hover{color:var(--on-dark)}
.foot-bottom{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
  color:var(--on-dark-mute);font-size:.82rem}