/* Brand tokens and marketing-page styles, extracted from the old
   index.html <style> block — it was duplicated in about.html and
   guides.html too, which is the duplication this migration removes. */
/* ============================================================
   NXCTURNEZ — single-file landing page
   Edit prices in one place: search for  data-price
   Edit checkout links: search for  CHECKOUT LINKS
   Drop proof screenshots into  ./proof/  (see PROOF SLOTS)
   ============================================================ */

:root{
  --bg:#08090B;
  --bg-2:#0D0F13;
  --bg-3:#12151A;
  --line:#1E232B;
  --line-2:#2A313B;
  --ink:#F4F6F8;
  --ink-2:#AEB6C2;
  --ink-3:#78818F;

  /* Brand accent */
  /* Brand purple. --a and --b were two products' accents (gold and blue) and
     are now the same colour: one brand, one accent. The pair is kept so the
     .btn--a/.btn--b and .prod--a/.prod--b markup keeps working; collapsing
     them is a separate change.

     --a is the fill colour: buttons, borders, glows. At 3.89:1 on --bg it is
     fine behind large shapes and fails as text.
     --a-ink is the text colour: 7.28:1 on --bg, same hue. Use it for anything
     read as words, and white on top of an --a fill. */
  --a:#8441F9;
  --a-dim:#521EAC;
  --a-glow:rgba(132,65,249,.22);
  --a-ink:#B186FB;

  /* Same accent (legacy --b tokens) */
  --b:#8441F9;
  --b-dim:#521EAC;
  --b-glow:rgba(132,65,249,.22);
  --b-ink:#B186FB;

  --ok:#4ADE80;
  --warn:#F87171;

  --r:14px;
  --r-lg:22px;
  --maxw:1120px;
  --pad:clamp(20px,5vw,40px);

  --f-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5{line-height:1.12;margin:0;letter-spacing:-.022em;font-weight:700}
p{margin:0}
:focus-visible{outline:2px solid var(--a);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding:clamp(72px,10vw,128px) 0;position:relative}
.sec--tight{padding:clamp(52px,7vw,84px) 0}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}

/* The header is sticky and 66px tall, so an anchor jump used to land with the
   section's own heading hidden behind it. */
[id]{scroll-margin-top:88px}

.eyebrow{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:20px;display:block
}
.eyebrow b{color:var(--a-ink);font-weight:500}
.h1{font-size:clamp(38px,7vw,74px);letter-spacing:-.035em}
.h2{font-size:clamp(30px,4.6vw,50px);letter-spacing:-.03em}
.h3{font-size:clamp(21px,2.4vw,27px)}
.lead{font-size:clamp(17px,1.7vw,19.5px);color:var(--ink-2);max-width:60ch}
.muted{color:var(--ink-3)}
.small{font-size:14.5px;line-height:1.55}
.xs{font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.serif{font-family:var(--f-display);font-style:italic;font-weight:400}
.mono{font-family:var(--f-mono)}
.ink-a{color:var(--a-ink)}
.ink-b{color:var(--b-ink)}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(8,9,11,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:26px;height:66px}
.brand{font-family:var(--f-mono);font-size:13px;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;font-weight:600;white-space:nowrap}
.brand span{color:var(--a-ink)}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-links a{
  text-decoration:none;font-size:14.5px;color:var(--ink-2);
  transition:color .18s ease;white-space:nowrap
}
.nav-links a:hover{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:999px;text-decoration:none;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  border:1px solid var(--line-2);background:transparent;color:var(--ink);
  cursor:pointer;transition:transform .16s ease,background .18s ease,border-color .18s ease;
  min-height:48px;
}
.btn:hover{transform:translateY(-1px);border-color:#3C4552;background:rgba(255,255,255,.035)}
.btn--sm{padding:10px 18px;font-size:14px;min-height:40px}
/* two classes so these beat `.nav-links a` and `.nav-links a:hover` */
.btn.btn--a,.btn.btn--a:hover{background:var(--a);border-color:var(--a);color:#FFFFFF}
.btn.btn--a:hover{background:#7123F8;border-color:#7123F8}
.btn.btn--b,.btn.btn--b:hover{background:var(--b);border-color:var(--b);color:#FFFFFF}
.btn.btn--b:hover{background:#7123F8;border-color:#7123F8}
.btn--block{width:100%}
.btn-note{font-size:12.5px;color:var(--ink-3);text-align:center;margin-top:11px;line-height:1.5}

/* ---------- header nav ----------
   One nav on every page: a menu on small screens, the brand, then the links.
   Page-specific anchors used to live up here too, which meant the header
   changed shape per page and half its links jumped you to a different
   document. Both menus are <details>, so this works with no JavaScript. */

.pnl{
  position:absolute;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);padding:7px;display:grid;gap:1px;z-index:90;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.85);min-width:252px
}
.pnl a{display:block;padding:10px 14px;border-radius:9px;text-decoration:none;font-size:15px;color:var(--ink-2);line-height:1.35}
.pnl a:hover{background:var(--bg-3);color:var(--ink)}
.pnl a small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.pnl .lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding:9px 14px 5px}
.pnl .sep{height:1px;background:var(--line);margin:6px 4px}

.drop{position:relative}
.drop>summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;color:var(--ink-2);transition:color .18s ease;white-space:nowrap
}
.drop>summary::-webkit-details-marker{display:none}
.drop>summary::after{
  content:"";width:5px;height:5px;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .18s ease
}
.drop[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
.drop>summary:hover,.drop[open]>summary{color:var(--ink)}
.drop .pnl{top:calc(100% + 15px);left:-14px}

.menu{display:none;position:relative;flex:none}
.menu>summary{
  list-style:none;cursor:pointer;width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:10px;color:var(--ink-2);transition:color .18s ease,border-color .18s ease
}
.menu>summary::-webkit-details-marker{display:none}
.menu[open]>summary{color:var(--ink);border-color:#3C4552}
.menu .pnl{top:calc(100% + 12px);left:0}

@media (max-width:900px){
  .nav{gap:12px;position:relative}
  .nav-links{display:none}
  .menu{display:block}
  .brand{position:absolute;left:50%;transform:translateX(-50%)}
}
@media (max-width:390px){
  .brand{font-size:11px;letter-spacing:.19em}
}

/* ---------- launch band ---------- */
/* Sits above the hero for as long as the newest product is actually news.
   Deliberately one band and not a .sec: it announces, it does not compete
   with the <h1> underneath it — which is still the LCP element and still has
   to paint first. When the launch stops being a launch, the <section> and
   this block come out together and nothing else moves. */
.launch{
  position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(120% 190% at 10% 0%,rgba(132,65,249,.20),transparent 60%),var(--bg-2)
}
.launch-in{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,3vw,40px);
  align-items:center;padding-block:clamp(24px,3.2vw,38px)
}
@media (max-width:860px){.launch-in{grid-template-columns:minmax(0,1fr);align-items:start}}
.launch-tag{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--a-ink);border:1px solid var(--a-dim);
  border-radius:999px;padding:6px 13px;background:rgba(132,65,249,.10)
}
.launch h2{
  font-size:clamp(22px,3.1vw,33px);line-height:1.16;letter-spacing:-.02em;margin-top:15px;max-width:22ch
}
.launch h2 em{font-family:var(--f-display);font-style:italic;font-weight:400;color:var(--a-ink)}
.launch p{color:var(--ink-2);font-size:15.5px;margin-top:11px;max-width:58ch}
.launch-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media (max-width:860px){.launch-cta{margin-top:22px}}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(64px,10vw,116px) 0 clamp(48px,7vw,80px);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:88%;pointer-events:none;
  background:
    radial-gradient(52% 60% at 22% 0%,var(--a-glow),transparent 68%),
    radial-gradient(52% 60% at 80% 12%,var(--b-glow),transparent 68%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 22%,#000,transparent 76%);
  mask-image:radial-gradient(70% 55% at 50% 22%,#000,transparent 76%);
}
.hero .wrap{position:relative;z-index:1}
.hero-h1{max-width:17ch}
.hero-h1 em{font-family:var(--f-display);font-style:italic;font-weight:400;color:var(--a-ink)}
.hero-lead{margin-top:24px;max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;padding:0;list-style:none}
.pills li{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;color:var(--ink-2)
}

/* ---------- stat strip ---------- */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-2)
}
.stat{padding:24px 20px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
@media (max-width:700px){.stat{border-right:0;border-bottom:1px solid var(--line)}.stat:last-child{border-bottom:0}}
.stat b{display:block;font-family:var(--f-mono);font-size:clamp(24px,3.4vw,31px);letter-spacing:-.02em;font-weight:600}
.stat span{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);margin-top:7px}

/* ---------- generic cards / grids ---------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;
}
.card h3{margin-bottom:10px}
.card p{color:var(--ink-2)}

/* ---------- product columns ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media (max-width:940px){.duo{grid-template-columns:1fr}}

.prod{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg-2);padding:clamp(24px,3.4vw,36px);overflow:hidden;
  display:flex;flex-direction:column;height:100%;
}
.prod::before{content:"";position:absolute;inset:0 0 auto 0;height:2px}
.prod--a::before{background:linear-gradient(90deg,transparent,var(--a),transparent)}
.prod--b::before{background:linear-gradient(90deg,transparent,var(--b),transparent)}
.prod--a{box-shadow:0 0 0 1px rgba(132,65,249,.22),0 34px 80px -50px rgba(132,65,249,.22)}
.prod--b{box-shadow:0 0 0 1px rgba(132,65,249,.22),0 34px 80px -50px rgba(132,65,249,.22)}

.tag{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);
  margin-bottom:18px;
}
.tag--a{border-color:var(--a-dim);color:var(--a-ink);background:rgba(132,65,249,.22)}
.tag--b{border-color:var(--b-dim);color:var(--b-ink);background:rgba(132,65,249,.22)}

.price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:22px 0 6px}
.price{font-family:var(--f-mono);font-size:clamp(34px,4.6vw,44px);font-weight:600;letter-spacing:-.03em}
.price-was{font-family:var(--f-mono);font-size:17px;color:var(--ink-3);text-decoration:line-through}
.price-cond{
  font-size:13px;color:var(--ink-3);margin-bottom:20px;display:flex;align-items:center;gap:8px;
  flex-wrap:wrap
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 3px rgba(74,222,128,.16)}

.feat{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:11px}
.feat li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.feat li::before{content:"";position:absolute;left:0;top:4px;width:17px;height:17px;border-radius:50%;background:var(--bg-3);border:1px solid var(--line-2);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.2 4.8 8.5 9.5 3.8' fill='none' stroke='%23AEB6C2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:11px}
.feat li b{color:var(--ink);font-weight:600}
.prod-cta{margin-top:auto;padding-top:26px}

/* ---------- module list ---------- */
/* Only the top corners round: .mods-total continues the panel underneath and
   rounds the bottom. Rounding all four here left the list's bottom corners
   visible as a pinch across the middle of what reads as one block. */
.mods{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.mod{background:var(--bg-2);padding:20px 22px;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start}
.mod-n{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);padding-top:3px;min-width:22px}
.mod h3{font-size:16.5px;margin-bottom:5px}
.mod p{font-size:14.5px;color:var(--ink-3);line-height:1.5}
.mod-v{font-family:var(--f-mono);font-size:13px;color:var(--ink-3);white-space:nowrap;padding-top:3px}
@media (max-width:620px){
  .mod{grid-template-columns:auto 1fr}
  .mod-v{grid-column:2;padding-top:2px}
}
.mods-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:20px 22px;background:var(--bg-3);border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--r) var(--r);margin-top:-1px
}
.mods-total .l{font-size:14.5px;color:var(--ink-3)}
.mods-total .r{font-family:var(--f-mono);font-size:16px}

/* ---------- comparison table ---------- */
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top}
thead th{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;background:var(--bg-3);white-space:nowrap
}
tbody th{font-weight:500;color:var(--ink-2);width:30%}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td.col-a{color:var(--ink);border-left:1px solid var(--line)}
td.col-b{color:var(--ink);border-left:1px solid var(--line)}
thead th.col-a{color:var(--a-ink)}
thead th.col-b{color:var(--b-ink)}

/* ---------- proof ---------- */
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.shot{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-2);
  display:flex;flex-direction:column
}
.shot-img{aspect-ratio:4/3;background:#000;position:relative;overflow:hidden}
.shot-img img{width:100%;height:100%;object-fit:contain}
.shot-empty{
  position:absolute;inset:12px;border:1px dashed var(--line-2);border-radius:10px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);line-height:1.6
}
.shot-cap{padding:13px 16px;display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line)}
.shot-cap b{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.shot-cap span{font-size:13px;color:var(--ink-2)}

/* ---------- pain / honest blocks ---------- */
.blocks{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.block{background:var(--bg-2);padding:clamp(24px,3vw,32px)}
.block h3{font-size:19px;margin-bottom:10px;color:var(--ink)}
.block p{color:var(--ink-3);font-size:15.5px}

.quote{
  border-left:2px solid var(--a);padding:6px 0 6px 24px;margin:36px 0;
  font-family:var(--f-display);font-style:italic;font-size:clamp(21px,2.8vw,29px);
  line-height:1.35;letter-spacing:-.02em;max-width:32ch
}

/* ---------- faq ---------- */
.faq{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 24px;font-weight:600;font-size:16.5px;
  display:flex;justify-content:space-between;gap:18px;align-items:center;
  transition:background .16s ease;min-height:56px
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:rgba(255,255,255,.02)}
.faq summary::after{content:"+";font-family:var(--f-mono);font-size:21px;color:var(--ink-3);flex:none;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--a-ink)}
.faq .ans{padding:0 24px 22px;color:var(--ink-2);font-size:15.5px;max-width:72ch}
.faq .ans p+p{margin-top:12px}

/* ---------- free ---------- */
.free{
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(28px,4vw,48px);
  background:linear-gradient(160deg,var(--bg-3),var(--bg-2));position:relative;overflow:hidden
}
.free::after{
  content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,var(--a-glow),transparent 70%);pointer-events:none
}
.free>*{position:relative}

/* ---------- guarantee ---------- */
.guarantee{
  border:1px solid var(--line);border-left:2px solid var(--ok);border-radius:var(--r);
  background:var(--bg-2);padding:clamp(24px,3.4vw,34px)
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--bg-2);padding:56px 0 40px;font-size:14.5px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
@media (max-width:760px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot{grid-template-columns:1fr}}
footer h3{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;font-weight:500}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a{color:var(--ink-2);text-decoration:none;transition:color .16s ease}
footer a:hover{color:var(--ink)}
.legal{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);color:var(--ink-3);font-size:12.5px;line-height:1.65;max-width:80ch}

/* ---------- sticky mobile bar ---------- */
.mobar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,9,11,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line)
}
.mobar .btn{flex:1;padding:12px 10px;font-size:14px}
@media (max-width:700px){.mobar{display:flex}body{padding-bottom:78px}}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- section head (title + "all →" link) ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sec-head .eyebrow{margin-bottom:14px}
.more{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;white-space:nowrap}
.more span{display:inline-block;transition:transform .18s ease;color:var(--a-ink)}
.more:hover span{transform:translateX(3px)}

/* ---------- about bento ----------
   One main card (2×2) and four tiles. Ported from a 21st.dev "About Bento"
   into the site's own tokens: no colour blocks, one accent, glare on hover
   from the aura layer via data-aura-glare. */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(148px,auto);gap:14px}
.bt{
  position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;overflow:hidden;
  transition:border-color .18s ease,transform .18s ease
}
.bt:hover{border-color:var(--line-2);transform:translateY(-2px)}
.bt--main{grid-column:span 2;grid-row:span 2;padding:clamp(24px,3.4vw,36px);background:linear-gradient(160deg,var(--bg-3),var(--bg-2))}
.bt--main::after{content:"";position:absolute;right:-100px;bottom:-100px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,var(--a-glow),transparent 70%);pointer-events:none}
.bt--main>*{position:relative}
.bt--main h2{font-size:clamp(24px,3.2vw,36px);letter-spacing:-.03em;max-width:17ch;line-height:1.12}
.bt--main h2 em{font-family:var(--f-display);font-style:italic;font-weight:400;color:var(--a-ink)}
.bt-k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.bt-n{display:block;font-family:var(--f-mono);font-size:clamp(30px,3.6vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1}
.bt h3{font-size:16.5px;margin:0 0 5px}
.bt p{color:var(--ink-3);font-size:14px;line-height:1.5}
.bt-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(132,65,249,.14);border:1px solid var(--a-dim);color:var(--a-ink);flex:none}
@media (max-width:860px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bt--main{grid-column:span 2;grid-row:auto}
}
@media (max-width:440px){
  .bento{grid-template-columns:1fr}
  .bt--main{grid-column:auto}
}

/* ---------- blog cards ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.post{
  display:flex;flex-direction:column;gap:10px;text-decoration:none;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:22px;
  transition:border-color .18s ease,transform .18s ease
}
.post:hover{border-color:var(--line-2);transform:translateY(-2px)}
.post h3{font-size:18px;letter-spacing:-.02em;line-height:1.2}
.post .meta{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.post p{color:var(--ink-2);font-size:14.5px;line-height:1.5;flex:1}
.post .tag-for{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--a-ink)}

/* ---------- three product cards ---------- */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
@media (max-width:1000px){.trio{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.trio{grid-template-columns:1fr}}
.trio .prod{padding:clamp(22px,2.6vw,28px)}
.trio .price{font-size:clamp(30px,3.4vw,38px)}
.trio .feat li{font-size:14.5px}

/* ---------- bundle upsell ---------- */
.bundle{
  border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:clamp(22px,3vw,30px);
  display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;background:transparent
}
@media (max-width:760px){.bundle{grid-template-columns:1fr}}
.bundle h3{font-size:20px;margin-bottom:6px}
.bundle p{color:var(--ink-2);font-size:15px;max-width:60ch}
.bundle .price-row{margin:0 0 10px}
.bundle .price{font-size:clamp(28px,3.4vw,36px)}
.bundle-cta{text-align:right}
@media (max-width:760px){.bundle-cta{text-align:left}}

/* ---------- my saas ---------- */
.saas{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:stretch}
@media (max-width:820px){.saas{grid-template-columns:1fr}}
.app{
  position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3.4vw,34px);display:flex;flex-direction:column;overflow:hidden
}
.app::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,var(--a),transparent)}
.app-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.app-mark{
  font-family:var(--f-mono);font-size:22px;font-weight:600;letter-spacing:-.04em;
  width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;line-height:1;
  background:var(--bg-3);border:1px solid var(--line-2)
}
.app-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.app--soon{background:transparent;border-style:dashed;justify-content:center}
.app--soon::before{display:none}

/* ---------- about page ---------- */
.facets{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.facet{background:var(--bg-2);padding:clamp(22px,3vw,32px);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.facet-n{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;color:var(--ink-3);padding-top:6px;min-width:26px}
.facet h3{font-size:20px;margin-bottom:10px}
.facet p{color:var(--ink-2);font-size:15.5px;max-width:66ch}
.facet p+p{margin-top:10px}
.facet a{color:var(--a-ink);text-decoration:none;border-bottom:1px solid var(--a-dim)}
.facet a:hover{border-bottom-color:var(--a-ink)}
@media (min-width:900px){.facets{grid-template-columns:1fr 1fr}}
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:640px){.doors{grid-template-columns:1fr}}
.door{
  display:flex;flex-direction:column;gap:10px;text-decoration:none;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:26px;
  transition:border-color .18s ease,transform .18s ease
}
.door:hover{border-color:var(--line-2);transform:translateY(-2px)}
.door .tag{margin-bottom:6px;align-self:flex-start}
.door p{color:var(--ink-2);font-size:15px;flex:1}
.mods-total a{color:var(--a-ink);text-decoration:none}

/* ---------- blog ---------- */
/* ============================================================
   nxcturnez — blog stylesheet
   Shared by /blog and every /blog/<slug> page.

   v2: brand colour moved from gold to purple (#8441F9).

   This file is served with Cache-Control: immutable, so the
   FILENAME CARRIES THE VERSION. Changing a rule means renaming
   to blog.v3.css and updating the <link> in every blog page —
   overwriting in place is invisible to anyone who has already
   loaded the site. Same rule as products/, see README.
   ============================================================ */

:root{
  --bg:#08090B;
  --bg-2:#0D0F13;
  --bg-3:#12151A;
  --line:#1E232B;
  --line-2:#2A313B;
  --ink:#F4F6F8;
  --ink-2:#AEB6C2;
  --ink-3:#78818F;

  /* Faceless Income Framework */
  /* Brand purple. --a and --b were two products' accents (gold and blue) and
     are now the same colour: one brand, one accent. The pair is kept so the
     .btn--a/.btn--b and .prod--a/.prod--b markup keeps working; collapsing
     them is a separate change.

     --a is the fill colour: buttons, borders, glows. At 3.89:1 on --bg it is
     fine behind large shapes and fails as text.
     --a-ink is the text colour: 7.28:1 on --bg, same hue. Use it for anything
     read as words, and white on top of an --a fill. */
  --a:#8441F9;
  --a-dim:#521EAC;
  --a-glow:rgba(132,65,249,.22);
  --a-ink:#B186FB;

  /* Solo SaaS Framework */
  --b:#8441F9;
  --b-dim:#521EAC;
  --b-glow:rgba(132,65,249,.22);
  --b-ink:#B186FB;

  --ok:#4ADE80;

  --r:14px;
  --r-lg:22px;
  --maxw:1120px;
  --readw:680px;
  --pad:clamp(20px,5vw,40px);

  --f-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{line-height:1.14;margin:0;letter-spacing:-.022em;font-weight:700}
p{margin:0}
:focus-visible{outline:2px solid var(--a);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.read{max-width:var(--readw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}

.eyebrow{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:20px;display:block
}
.mono{font-family:var(--f-mono)}
.serif{font-family:var(--f-display);font-style:italic;font-weight:400}
.ink-a{color:var(--a-ink)}
.ink-b{color:var(--b-ink)}
.xs{font-size:12.5px;line-height:1.5;color:var(--ink-3)}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(8,9,11,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:26px;height:66px}
.brand{font-family:var(--f-mono);font-size:13px;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;font-weight:600;white-space:nowrap}
.brand span{color:var(--a-ink)}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-links a{text-decoration:none;font-size:14.5px;color:var(--ink-2);transition:color .18s ease;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:999px;text-decoration:none;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  border:1px solid var(--line-2);background:transparent;color:var(--ink);
  cursor:pointer;transition:transform .16s ease,background .18s ease,border-color .18s ease;
  min-height:48px;
}
.btn:hover{transform:translateY(-1px);border-color:#3C4552;background:rgba(255,255,255,.035)}
.btn--sm{padding:10px 18px;font-size:14px;min-height:40px}
.btn.btn--a,.btn.btn--a:hover{background:var(--a);border-color:var(--a);color:#FFFFFF}
.btn.btn--a:hover{background:#7123F8;border-color:#7123F8}
.btn.btn--b,.btn.btn--b:hover{background:var(--b);border-color:var(--b);color:#FFFFFF}
.btn.btn--b:hover{background:#7123F8;border-color:#7123F8}
.btn--block{width:100%}

/* ---------- header nav ----------
   One nav on every page: a menu on small screens, the brand, then the links.
   Page-specific anchors used to live up here too, which meant the header
   changed shape per page and half its links jumped you to a different
   document. Both menus are <details>, so this works with no JavaScript. */

.pnl{
  position:absolute;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);padding:7px;display:grid;gap:1px;z-index:90;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.85);min-width:252px
}
.pnl a{display:block;padding:10px 14px;border-radius:9px;text-decoration:none;font-size:15px;color:var(--ink-2);line-height:1.35}
.pnl a:hover{background:var(--bg-3);color:var(--ink)}
.pnl a small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.pnl .lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding:9px 14px 5px}
.pnl .sep{height:1px;background:var(--line);margin:6px 4px}

.drop{position:relative}
.drop>summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;color:var(--ink-2);transition:color .18s ease;white-space:nowrap
}
.drop>summary::-webkit-details-marker{display:none}
.drop>summary::after{
  content:"";width:5px;height:5px;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .18s ease
}
.drop[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
.drop>summary:hover,.drop[open]>summary{color:var(--ink)}
.drop .pnl{top:calc(100% + 15px);left:-14px}

.menu{display:none;position:relative;flex:none}
.menu>summary{
  list-style:none;cursor:pointer;width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:10px;color:var(--ink-2);transition:color .18s ease,border-color .18s ease
}
.menu>summary::-webkit-details-marker{display:none}
.menu[open]>summary{color:var(--ink);border-color:#3C4552}
.menu .pnl{top:calc(100% + 12px);left:0}

@media (max-width:900px){
  .nav{gap:12px;position:relative}
  .nav-links{display:none}
  .menu{display:block}
  .brand{position:absolute;left:50%;transform:translateX(-50%)}
}
@media (max-width:390px){
  .brand{font-size:11px;letter-spacing:.19em}
}


/* ---------- blog index ---------- */
.bloghero{padding:clamp(56px,8vw,92px) 0 clamp(30px,4vw,44px);position:relative;overflow:hidden}
.bloghero::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:90%;pointer-events:none;
  background:radial-gradient(48% 58% at 26% 0%,var(--a-glow),transparent 68%),
             radial-gradient(48% 58% at 78% 10%,var(--b-glow),transparent 68%);
}
.bloghero .wrap{position:relative;z-index:1}
.bloghero h1{font-size:clamp(34px,6vw,60px);letter-spacing:-.035em;max-width:18ch}
.bloghero h1 em{font-family:var(--f-display);font-style:italic;font-weight:400;color:var(--a-ink)}
.bloghero p{margin-top:20px;font-size:clamp(17px,1.7vw,19.5px);color:var(--ink-2);max-width:62ch}

.postlist{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.postlist li{background:var(--bg)}
.postlist a{
  display:grid;grid-template-columns:1fr auto;gap:12px 28px;align-items:start;
  padding:30px var(--pad);text-decoration:none;transition:background .18s ease;
  max-width:var(--maxw);margin:0 auto;
}
.postlist a:hover{background:var(--bg-2)}
.postlist h2{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.025em;max-width:24ch}
.postlist .dek{grid-column:1;color:var(--ink-2);font-size:15.5px;margin-top:9px;max-width:62ch}
.postlist .meta{
  grid-column:2;grid-row:1;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;padding-top:6px
}
.postlist .tag-for{display:inline-block;margin-top:14px;grid-column:1;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:999px;padding:5px 11px;color:var(--ink-3)}
@media (max-width:640px){
  .postlist a{grid-template-columns:1fr}
  .postlist .meta{grid-column:1;grid-row:auto;padding-top:0;margin-bottom:4px}
}

/* ---------- article ---------- */
.arthead{padding:clamp(40px,6vw,72px) 0 clamp(24px,3vw,34px)}
.crumb{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:22px;display:flex;gap:9px;align-items:center;flex-wrap:wrap
}
.crumb a{color:var(--ink-3);text-decoration:none;transition:color .16s ease}
.crumb a:hover{color:var(--a-ink)}
.artmeta{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-top:22px;display:flex;gap:14px;flex-wrap:wrap;align-items:center
}
h1.arttitle{font-size:clamp(31px,5.2vw,52px);letter-spacing:-.033em}
.artdek{margin-top:20px;font-size:clamp(17px,1.7vw,19.5px);color:var(--ink-2)}

/* the prose column */
.prose{padding-bottom:clamp(40px,6vw,64px)}
.prose h2{font-size:clamp(24px,3.1vw,32px);letter-spacing:-.028em;margin:clamp(44px,5vw,60px) 0 16px}
.prose h3{font-size:clamp(19px,2.2vw,22px);letter-spacing:-.02em;margin:34px 0 12px}
.prose p{margin:0 0 20px;color:var(--ink-2)}
.prose p strong,.prose li strong{color:var(--ink);font-weight:600}
.prose a{color:var(--a-ink);text-underline-offset:3px}
.prose a:hover{color:#7123F8}
.prose ul,.prose ol{margin:0 0 22px;padding-left:22px;color:var(--ink-2)}
.prose li{margin-bottom:10px}
.prose li::marker{color:var(--ink-3)}
.prose hr{border:0;height:1px;background:var(--line);margin:44px 0}

/* the answer block — the first thing under a question heading.
   Kept short and self-contained on purpose: this is the unit an
   answer engine lifts out of the page. */
.answer{
  border-left:2px solid var(--a);background:var(--bg-2);
  padding:18px 22px;border-radius:0 var(--r) var(--r) 0;margin:0 0 24px
}
.answer p{margin:0;color:var(--ink)}
.answer p+p{margin-top:12px}

.takeaways{
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  padding:clamp(20px,3vw,28px);margin:0 0 36px
}
.takeaways h2{font-size:13px!important;font-family:var(--f-mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 14px!important;font-weight:500}
.takeaways ul{margin:0;padding-left:20px}
.takeaways li{color:var(--ink-2);margin-bottom:9px}
.takeaways li:last-child{margin-bottom:0}

.callout{
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-3);
  padding:20px 22px;margin:0 0 26px
}
.callout p{margin:0}
.callout p+p{margin-top:12px}

blockquote{
  border-left:2px solid var(--a);margin:32px 0;padding:4px 0 4px 22px;
  font-family:var(--f-display);font-style:italic;font-size:clamp(20px,2.6vw,26px);
  line-height:1.36;letter-spacing:-.02em;color:var(--ink)
}

/* tables are highly extractable — used deliberately for comparisons */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);margin:0 0 26px}
table{width:100%;border-collapse:collapse;min-width:480px}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top}
thead th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;background:var(--bg-3)}
tbody td{color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}

/* ---------- faq ---------- */
.faq{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-2);margin:0 0 8px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 22px;font-weight:600;font-size:16px;
  display:flex;justify-content:space-between;gap:18px;align-items:center;min-height:54px
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:rgba(255,255,255,.02)}
.faq summary::after{content:"+";font-family:var(--f-mono);font-size:20px;color:var(--ink-3);flex:none;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--a-ink)}
.faq .ans{padding:0 22px 20px;color:var(--ink-2);font-size:15.5px}
.faq .ans p{margin:0;color:var(--ink-2)}
.faq .ans p+p{margin-top:11px}

/* ---------- the pitch at the end of every post ---------- */
.pitch{
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(26px,4vw,40px);margin:clamp(44px,6vw,64px) 0 0;
  background:linear-gradient(160deg,var(--bg-3),var(--bg-2));position:relative;overflow:hidden
}
.pitch::after{
  content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle,var(--a-glow),transparent 70%)
}
.pitch--b::after{background:radial-gradient(circle,var(--b-glow),transparent 70%)}
.pitch>*{position:relative}
.pitch h2{font-size:clamp(23px,3vw,31px);letter-spacing:-.028em;margin:0 0 14px!important}
.pitch p{color:var(--ink-2);margin:0 0 16px}
.pitch .feat{list-style:none;margin:20px 0 26px;padding:0;display:grid;gap:10px}
.pitch .feat li{position:relative;padding-left:26px;color:var(--ink-2);font-size:15.5px;margin:0}
.pitch .feat li::before{
  content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;
  background:var(--bg-3);border:1px solid var(--line-2);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.2 4.8 8.5 9.5 3.8' fill='none' stroke='%23AEB6C2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:10px
}
.pitch .price{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:18px}
.pitch .price b{font-family:var(--f-mono);font-size:clamp(28px,4vw,38px);font-weight:600;letter-spacing:-.03em}
.pitch .price s{font-family:var(--f-mono);font-size:16px;color:var(--ink-3)}
.pitch .note{font-size:12.5px;color:var(--ink-3);margin:11px 0 0;text-align:center}

/* ---------- related ---------- */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:26px}
.related a{
  display:block;text-decoration:none;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);padding:22px;transition:border-color .18s ease
}
.related a:hover{border-color:var(--line-2)}
.related h3{font-size:17px;margin-bottom:8px}
.related p{color:var(--ink-3);font-size:14.5px;margin:0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--bg-2);padding:52px 0 38px;font-size:14.5px;margin-top:clamp(56px,8vw,88px)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
@media (max-width:760px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot{grid-template-columns:1fr}}
footer h3{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:13px;font-weight:500}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a{color:var(--ink-2);text-decoration:none;transition:color .16s ease}
footer a:hover{color:var(--ink)}
footer p{color:var(--ink-2)}
.legal{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);color:var(--ink-3);font-size:12.5px;line-height:1.65;max-width:80ch}

/* ---------- aura ---------- */
/* ============================================================
   nxcturnez — aura.v2
   The visual layer shared by every page: /, /guides, /p/*, /blog, /blog/*.
   v2: the header no longer becomes a floating pill on scroll.

   It is loaded AFTER each page's own stylesheet and only decorates what is
   already in the HTML. Nothing here adds, hides or reorders indexable
   content: no text lives in this file except the footer wordmark, which is
   generated content with empty alt text ("nxcturnez." / "") so crawlers
   and screen readers ignore it.

   Served with Cache-Control: immutable, so the FILENAME CARRIES THE
   VERSION. Changing a rule means renaming to aura.v3.css (and aura.v3.js)
   and updating the <link>/<script> in every page — same rule as blog.v3.css.

   Pairs with aura.v2.js, which adds the classes and elements referenced
   here (.aura-mesh, .aura-w, .aura-glare, .aura-pre/.aura-in, .aura-beam,
   .aura-progress). Everything degrades to the page's own look
   when JavaScript is off or prefers-reduced-motion is on.
   ============================================================ */

@property --aura-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root{
  --aura-a:#8441F9;
  --aura-ink:#B186FB;
  --aura-dim:#521EAC;
  --aura-glow:rgba(132,65,249,.22);
  --aura-ease:cubic-bezier(.2,.7,.2,1);
  --aura-spring:cubic-bezier(.34,1.3,.4,1);
}

/* ---------- 1. header ----------
   Left exactly as each page styles it: a full-width sticky bar. (v1 turned
   it into a floating pill on scroll; dropped in v2.) */

/* ---------- 2. mesh shader behind the hero ----------
   aura.v2.js inserts <canvas class="aura-mesh" aria-hidden="true"> as the
   first child of .hero, .bloghero and .arthead. It sits above the page's
   own radial glow (::before) and below the grid overlay (::after) and the
   content wrapper, which every hero already positions at z-index:1. The
   mask keeps the left and bottom — where the copy sits — dark. */
.aura-mesh{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.4s ease;
  -webkit-mask-image:radial-gradient(95% 105% at 72% 8%,#000 22%,transparent 78%);
  mask-image:radial-gradient(95% 105% at 72% 8%,#000 22%,transparent 78%)
}
.aura-mesh.is-on{opacity:.92}
.arthead{position:relative;overflow:hidden}
.arthead>.read{position:relative;z-index:1}
.arthead .aura-mesh.is-on{opacity:.55}

/* ---------- 3. headline reveal ----------
   Words are wrapped in spans only after the first frame has painted, so the
   H1 is still the LCP element and paints exactly as before. Then each word
   slides up out of a blur, and the italic phrase gets one gradient sweep
   once the words have settled. */
.aura-w{display:inline-block}
.aura-h1 .aura-w{
  animation:aura-word .95s var(--aura-ease) both;
  animation-delay:calc(var(--i,0) * 52ms)
}
@keyframes aura-word{
  from{opacity:0;filter:blur(10px);transform:translateY(.28em)}
  to{opacity:1;filter:blur(0);transform:none}
}
/* The sweep is clipped per word, not on the <em>: each word is its own
   animated box, and background-clip:text on a parent does not paint
   through children that composite separately. Both animations are
   declared here so the word animation keeps its end state. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .aura-h1 em.is-set .aura-w{
    color:transparent;
    background:linear-gradient(100deg,var(--aura-ink) 0%,var(--aura-ink) 38%,#EDE4FF 50%,var(--aura-ink) 62%,var(--aura-ink) 100%);
    background-size:260% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;
    animation:aura-word .95s var(--aura-ease) both,aura-sweep 1.6s ease both;
    animation-delay:calc(var(--i,0) * 52ms),calc(var(--i,0) * 45ms)
  }
}
@keyframes aura-sweep{from{background-position:100% 0}to{background-position:0% 0}}

/* ---------- 4. buttons ----------
   Every .btn gets a light sweep on hover. The filled primary buttons get a
   thin rotating conic ring and a purple glow; the ring is a masked
   pseudo-element, so the button's own text and href are untouched. */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.22) 50%,transparent 68%);
  transform:translateX(-130%);transition:transform .75s var(--aura-ease)
}
.btn:hover::after{transform:translateX(130%)}
.btn.btn--a,.btn.btn--b{
  box-shadow:0 0 0 1px rgba(132,65,249,.35),0 12px 34px -12px rgba(132,65,249,.65);
  transition:transform .16s ease,background .18s ease,border-color .18s ease,box-shadow .3s ease
}
.btn.btn--a:hover,.btn.btn--b:hover{box-shadow:0 0 0 1px rgba(177,134,251,.5),0 18px 44px -12px rgba(132,65,249,.85)}
.btn.btn--a::before,.btn.btn--b::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--aura-angle),transparent 0 62%,rgba(255,255,255,.95) 80%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:aura-spin 3.4s linear infinite
}
.btn.btn--sm::before{padding:1px}
@keyframes aura-spin{to{--aura-angle:360deg}}

/* ---------- 5. proof strip ----------
   Numbers count up in aura.v2.js; tabular figures so the strip never
   jitters while it does. A purple wash sits behind the first cell. */
.stats{position:relative}
.stats::before{
  content:"";position:absolute;inset:-60% auto -60% -10%;width:55%;pointer-events:none;
  background:radial-gradient(50% 50% at 30% 50%,var(--aura-glow),transparent 70%)
}
.stat{position:relative}
.stat b{font-variant-numeric:tabular-nums}

/* ---------- 6. glare ----------
   aura.v2.js drops <i class="aura-glare"> into cards and tracks the pointer
   with --mx/--my. Two layers: a soft wash inside the card and a 1px ring
   that lights up where the cursor is, as on Linear's cards. The parent
   isolates so z-index:-1 stays inside it, under the card's content. */
[data-aura-glare]{position:relative;isolation:isolate}
.aura-glare{
  position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .4s ease
}
.aura-glare::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(177,134,251,.13),transparent 46%)
}
.aura-glare::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(177,134,251,.9),transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude
}
[data-aura-glare]:hover .aura-glare{opacity:1}
[data-aura-tilt]{
  transform:perspective(1100px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transition:transform .5s var(--aura-ease)
}
[data-aura-tilt]:hover{transition:transform .12s linear}

/* ---------- 7. staggered blur-in ----------
   Children of a grid, list or card row arrive one after another, out of a
   blur. Classes are set by JS only, so with JS off nothing is ever hidden. */
.aura-pre{opacity:0;filter:blur(12px);transform:translateY(18px)}
.aura-in{
  opacity:1;filter:blur(0);transform:none;
  transition:opacity .8s var(--aura-ease),filter .8s var(--aura-ease),transform .8s var(--aura-ease);
  transition-delay:calc(var(--i,0) * 70ms)
}

/* ---------- 8. curriculum beam ----------
   A hairline on the left of every module list, with a glowing segment that
   grows as the list scrolls through the viewport; passed modules turn
   their number purple. */
.mods{position:relative}
.aura-beam{position:absolute;left:0;top:0;bottom:0;width:2px;z-index:2;pointer-events:none;background:var(--line-2)}
.aura-beam::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:calc(var(--aura-p,0) * 100%);
  background:linear-gradient(180deg,var(--aura-ink),var(--aura-a));
  box-shadow:0 0 14px 1px rgba(132,65,249,.55);transition:height .15s linear
}
.mod{transition:background .5s ease}
.mod .mod-n{transition:color .4s ease}
.mod.is-on .mod-n{color:var(--aura-ink)}
.mod.is-on{background:#101319}

/* ---------- 9. FAQ ----------
   aura.v2.js animates the answer's height with a spring curve. The
   <details>/<summary> pair is untouched, so every answer stays in the
   HTML and works without JS. */
.faq .ans.aura-anim{overflow:hidden;transition:height .55s var(--aura-spring),padding-bottom .55s var(--aura-spring),opacity .35s ease}
.faq summary{transition:background .16s ease,color .2s ease}
.faq details[open] summary{color:var(--aura-ink)}

/* ---------- 10. reading progress ---------- */
.aura-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:100;pointer-events:none;
  background:linear-gradient(90deg,var(--aura-a),var(--aura-ink));
  transform-origin:0 50%;transform:scaleX(var(--aura-read,0))
}

/* ---------- 11. blog ----------
   /blog: the newest post becomes the cover — bigger, with a purple wash —
   and the rest reads as a journal: dashed rules, titles that step right on
   hover. Order, titles and links are the same list as before. */
.postlist{gap:0;background:transparent}
.postlist li+li{border-top:1px dashed var(--line-2)}
.postlist li:first-child{background:radial-gradient(70% 120% at 0% 50%,rgba(132,65,249,.11),transparent 70%)}
.postlist li:first-child a{padding-top:clamp(40px,5vw,60px);padding-bottom:clamp(40px,5vw,60px)}
.postlist li:first-child h2{font-size:clamp(28px,4.4vw,48px);max-width:22ch;letter-spacing:-.035em}
.postlist li:first-child .dek{font-size:clamp(16px,1.6vw,18.5px);max-width:58ch}
.postlist li:first-child .meta::before{content:"Latest · " / "";color:var(--aura-ink)}
.postlist h2{transition:transform .35s var(--aura-ease),color .3s ease}
.postlist a:hover h2{transform:translateX(6px);color:var(--aura-ink)}
.postlist .tag-for{justify-self:start;transition:border-color .3s ease,color .3s ease}
.postlist a:hover .tag-for{border-color:var(--aura-dim);color:var(--aura-ink)}

/* /blog/<slug>: related posts become glass tiles */
.related a{
  background:rgba(13,15,19,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .25s ease,transform .35s var(--aura-ease)
}
.related a:hover{border-color:var(--aura-dim);transform:translateY(-3px)}

/* ---------- 12. footer ----------
   Film grain over the footer and the brand set as a giant outlined
   wordmark beneath the legal text. The wordmark is generated content with
   empty alternative text, so it is invisible to crawlers and readers. */
footer{position:relative;overflow:hidden}
footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
footer::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:60%;pointer-events:none;
  background:radial-gradient(60% 80% at 50% 110%,rgba(132,65,249,.16),transparent 70%)
}
footer .wrap{position:relative;z-index:1}
footer .wrap::after{
  content:"nxcturnez." / "";display:block;margin-top:clamp(28px,4vw,48px);
  font-family:var(--f-mono);font-weight:700;text-transform:uppercase;
  font-size:clamp(56px,13.6vw,196px);line-height:.82;letter-spacing:-.045em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(177,134,251,.32);
  background:linear-gradient(180deg,rgba(177,134,251,.20),rgba(177,134,251,0) 85%);
  -webkit-background-clip:text;background-clip:text;
  user-select:none;-webkit-user-select:none;max-width:100%;overflow:hidden
}

/* ---------- 13. small things ---------- */
.rule{background:linear-gradient(90deg,transparent,rgba(132,65,249,.28) 50%,transparent)}
.quote,blockquote{position:relative}
.quote::before,.prose blockquote::before{
  content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--aura-ink),var(--aura-a),transparent);
  box-shadow:0 0 12px rgba(132,65,249,.55)
}
.prod::before{box-shadow:0 0 18px 1px rgba(132,65,249,.6)}
.tag--a,.tag--b{box-shadow:0 0 0 1px rgba(132,65,249,.12),0 0 18px -6px rgba(132,65,249,.8)}
.free,.pitch{transition:border-color .3s ease}
.free:hover,.pitch:hover{border-color:var(--aura-dim)}

@media (prefers-reduced-motion:reduce){
  .btn::after,.btn.btn--a::before,.btn.btn--b::before{display:none}
  .aura-h1 .aura-w{animation:none}
  .aura-h1 em.is-set{animation:none;background-position:0 0}
  .aura-pre{opacity:1;filter:none;transform:none}
  [data-aura-tilt]{transform:none}
}