/* ============ TOKENS (dark-first, shared with the Eva landing) ============ */
:root{
  --bg:#06080F;
  --bg-2:#0A0E1B;
  --bg-3:#101629;
  --card:rgba(148,168,255,.055);
  --card-strong:rgba(148,168,255,.09);
  --border:rgba(170,186,255,.13);
  --border-strong:rgba(170,186,255,.24);
  --text:#EEF1FB;
  --muted:#9AA4C0;
  --faint:#6C7694;
  --amber:#FFC14D;
  --accent:#7C8CFF;
  --good:#3DD6A3;
  --grad:linear-gradient(100deg,#4E7CFF,#7C5CFC 55%,#B44CF0);
  --glow:0 0 90px rgba(94,108,255,.20);
  --shadow:0 24px 60px -24px rgba(2,6,20,.65);
  --sheen:rgba(255,255,255,.09);
  --orb1:rgba(78,124,255,.34);
  --orb2:rgba(180,76,240,.24);
  --orb3:rgba(61,214,163,.14);
  --grid-line:rgba(124,140,255,.14);
  --radius:20px;
  --nav-h:64px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,-apple-system,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{line-height:1.14;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.serif-accent{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--grad);border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============ AMBIENT MESH ============ */
.mesh{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(52vw 52vw at 12% -6%,var(--orb1),transparent 62%),
    radial-gradient(44vw 44vw at 96% 22%,var(--orb2),transparent 62%),
    radial-gradient(50vw 40vw at 50% 118%,var(--orb3),transparent 62%),
    var(--bg);
  animation:meshDrift 26s ease-in-out infinite alternate;
}
@keyframes meshDrift{
  0%{background-position:0 0,0 0,0 0;filter:hue-rotate(0deg)}
  100%{background-position:4vw 3vh,-5vw 4vh,0 -4vh;filter:hue-rotate(-14deg)}
}
.mesh::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--grid-line) 1px,transparent 1.4px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 0%,#000 0%,transparent 100%);
  mask-image:radial-gradient(80% 60% at 50% 0%,#000 0%,transparent 100%);
  opacity:.5;
}

/* ============ PROGRESS BAR ============ */
.progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:70;
  transform-origin:0 50%;transform:scaleX(0);background:var(--grad);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.progress.on{opacity:1}

/* ============ BUTTONS ============ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:999px;border:1px solid transparent;
  font-weight:700;font-size:.95rem;text-decoration:none;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.4),box-shadow .25s ease,background .18s ease;
  white-space:nowrap;overflow:hidden;will-change:transform;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 28px -8px rgba(100,100,250,.6)}
.btn-primary::before{
  content:"";position:absolute;top:0;bottom:0;left:-80%;width:55%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:left .55s ease;
}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 38px -8px rgba(100,100,250,.75)}
.btn-primary:hover::before{left:130%}
.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text)}
.btn-ghost:hover{background:var(--card-strong);transform:translateY(-2px)}

/* ============ LANG SWITCH ============ */
[hidden]{display:none !important}
.nav-right{display:flex;align-items:center;gap:12px}
.lang-switch{display:flex;gap:3px;border:1px solid var(--border-strong);border-radius:999px;padding:3px;background:var(--card)}
.lang-switch button{border:0;background:transparent;color:var(--muted);font-size:.74rem;font-weight:800;letter-spacing:.08em;padding:5px 11px;border-radius:999px;cursor:pointer;transition:color .15s,background .15s}
.lang-switch button:hover{color:var(--text)}
.lang-switch button[aria-pressed="true"]{background:var(--grad);color:#fff}
@media (max-width:560px){.nav-right .btn{display:none}}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  border-bottom:1px solid var(--border);
}
.nav-inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:1.18rem;letter-spacing:-.03em}
.logo svg{flex:none}
.logo .blog-flag{
  font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.02rem;
  color:var(--muted);margin-left:2px;
}
.nav-links{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;font-size:.9rem;font-weight:600;color:var(--muted);transition:color .15s}
.nav-links a:hover{color:var(--text)}
.nav .btn{padding:10px 18px;font-size:.86rem}
@media (max-width:700px){.nav-links{display:none}}

/* ============ BLOG HERO ============ */
.bhero{position:relative;padding:76px 0 30px;overflow:hidden}
.bhero-orbs{position:absolute;inset:0;pointer-events:none;z-index:0}
.bhero-orbs span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:drift 16s ease-in-out infinite alternate}
.bhero-orbs .o1{width:480px;height:480px;background:radial-gradient(circle,var(--orb1),transparent 65%);top:-220px;right:-60px}
.bhero-orbs .o2{width:380px;height:380px;background:radial-gradient(circle,var(--orb2),transparent 65%);bottom:-200px;left:-120px;animation-delay:-6s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-36px,30px,0) scale(1.08)}}
.bhero-inner{position:relative;z-index:1;max-width:760px}
.bhero h1{font-size:clamp(2.3rem,5.2vw,3.7rem);font-weight:800;letter-spacing:-.035em}
.bhero h1 .line{display:block;opacity:0;transform:translateY(28px);animation:lineUp .8s cubic-bezier(.2,.8,.2,1) forwards}
.bhero h1 .line:nth-child(2){animation-delay:.1s}
@keyframes lineUp{to{opacity:1;transform:none}}
.bhero-sub{color:var(--muted);font-size:1.1rem;margin-top:20px;max-width:56ch;opacity:0;animation:fadeUp .8s ease .3s forwards}
.bhero-sub strong{color:var(--text);font-weight:650}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ============ CATEGORY CHIPS ============ */
.chips{
  display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 8px;position:relative;z-index:1;
  opacity:0;animation:fadeUp .8s ease .45s forwards;
}
.chip{
  padding:9px 17px;border-radius:999px;border:1px solid var(--border-strong);
  background:var(--card);color:var(--muted);font-weight:650;font-size:.85rem;cursor:pointer;
  transition:color .18s,border-color .18s,transform .2s,background .18s;
}
.chip:hover{color:var(--text);transform:translateY(-1px);border-color:var(--accent)}
.chip[aria-pressed="true"]{
  background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 8px 22px -8px rgba(100,100,250,.55);
}
.chip-count{font-size:.72rem;opacity:.7;margin-left:5px;font-variant-numeric:tabular-nums}

/* ============ COVERS (generative SVG art) ============ */
.cover{
  display:block;border-radius:16px;overflow:hidden;position:relative;
  border:1px solid var(--border);background:#0B1022;aspect-ratio:16/9;
}
.cover svg{width:100%;height:100%;display:block}
.cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.10),transparent 34%);
}

/* ============ FEATURED BANNER ============ */
.featured{padding:36px 0 10px}
.feat-card{
  position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:0;
  border-radius:24px;overflow:hidden;text-decoration:none;
  background:var(--card-strong);border:1px solid var(--border-strong);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow);transform-style:preserve-3d;will-change:transform;
  transition:border-color .25s,box-shadow .35s;
}
.feat-card:hover{border-color:var(--accent);box-shadow:var(--shadow),var(--glow)}
.feat-card .cover{border:none;border-radius:0;aspect-ratio:auto;min-height:280px;height:100%}
.feat-body{padding:34px 36px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.feat-flag{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:var(--grad);color:#fff;border-radius:999px;padding:5px 13px;
}
.feat-body h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800}
.feat-body .excerpt{color:var(--muted);font-size:.96rem;max-width:52ch}
@media (max-width:860px){
  .feat-card{grid-template-columns:1fr}
  .feat-card .cover{min-height:0;aspect-ratio:16/9}
  .feat-body{padding:26px 24px}
}

/* ============ POST GRID ============ */
.grid-section{padding:38px 0 20px}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;perspective:1400px}
@media (max-width:980px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.post-grid{grid-template-columns:1fr}}
.post-card{
  position:relative;display:flex;flex-direction:column;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--border);overflow:hidden;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .25s,box-shadow .35s;transform-style:preserve-3d;will-change:transform;
}
.post-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}
.post-card .cover{border-radius:0;border:none}
[data-post-card].filter-out{display:none}
.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:11px;flex:1}
.cat-tag{
  display:inline-flex;align-self:flex-start;font-size:.68rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cat,var(--accent));
}
.card-body h3{font-size:1.13rem;font-weight:750;letter-spacing:-.02em}
.card-body h3 a{text-decoration:none}
.card-body h3 a::after{content:"";position:absolute;inset:0}
.card-body .excerpt{color:var(--muted);font-size:.89rem}
.card-meta{
  display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;
  font-size:.78rem;color:var(--faint);flex-wrap:wrap;
}
.card-meta .dot{opacity:.6}
.byline{display:inline-flex;align-items:center;gap:7px;font-weight:650;color:var(--muted)}
.byline .mini-av{width:22px;height:22px;border-radius:50%;overflow:visible;flex:none;display:grid;place-items:center}
.byline .mini-av svg{width:100%;height:100%;display:block}
.read-btn{
  position:relative;z-index:2;align-self:flex-start;margin-top:4px;
  display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;
  border:1px solid var(--border-strong);font-size:.82rem;font-weight:700;text-decoration:none;
  transition:background .18s,border-color .18s,transform .2s;
}
.post-card:hover .read-btn{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.soon-badge{
  position:absolute;top:12px;right:12px;z-index:2;
  font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--amber);background:color-mix(in srgb,var(--bg) 72%,transparent);
  border:1px dashed color-mix(in srgb,var(--amber) 55%,transparent);
  border-radius:999px;padding:5px 12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.post-card.is-soon .card-body h3{color:var(--muted)}
.post-card.is-soon .cover svg{opacity:.85}
.empty-note{color:var(--faint);font-size:.92rem;padding:26px 4px;display:none}
.empty-note.show{display:block}

/* ============ PRODUCT CTA BAND + NEWSLETTER ============ */
.cta-band{padding:56px 0}
.cta-card{
  position:relative;border-radius:26px;padding:44px 40px;overflow:hidden;
  background:var(--card-strong);border:1px solid var(--border-strong);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow),var(--glow);
  display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center;
}
.cta-card::before{
  content:"";position:absolute;inset:-1px;border-radius:27px;padding:1.2px;pointer-events:none;
  background:conic-gradient(from var(--sweep,0deg),#4E7CFF,#B44CF0,#3DD6A3,#4E7CFF);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;
  animation:sweep 7s linear infinite;
}
@property --sweep{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes sweep{to{--sweep:360deg}}
@media (max-width:860px){.cta-card{grid-template-columns:1fr;padding:32px 26px}}
.cta-card h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800}
.cta-card .cta-sub{color:var(--muted);margin-top:12px;max-width:48ch;font-size:.96rem}
.crew{display:flex;margin-bottom:18px}
.crew .mini-av{
  width:46px;height:46px;border-radius:50%;border:none;
  display:grid;place-items:center;
}
.crew .mini-av + .mini-av{margin-left:-8px}
.crew .mini-av + .mini-av{margin-left:-10px}
.crew .mini-av svg{width:100%;height:100%;display:block}
.capture{display:flex;gap:10px;flex-wrap:wrap}
.capture input{
  flex:1;min-width:190px;padding:13px 18px;border-radius:999px;
  border:1px solid var(--border-strong);background:var(--card);color:var(--text);
  transition:border-color .2s,box-shadow .2s;
}
.capture input:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);outline:none}
.capture input::placeholder{color:var(--faint)}
.capture .btn{flex:none}
.form-note{font-size:.8rem;color:var(--faint);margin-top:12px}
.form-ok{display:none;margin-top:12px;font-size:.9rem;font-weight:600;color:var(--good)}

.newsletter{padding:20px 0 88px}
.news-card{
  border-radius:24px;padding:42px 38px;text-align:center;
  background:var(--card);border:1px solid var(--border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  max-width:680px;margin:0 auto;
}
.news-card h2{font-size:clamp(1.4rem,2.8vw,1.9rem);font-weight:800}
.news-card p{color:var(--muted);margin:12px auto 22px;max-width:44ch;font-size:.95rem}
.news-card .capture{justify-content:center;max-width:440px;margin:0 auto}
.news-icon{
  width:52px;height:52px;border-radius:17px;margin:0 auto 18px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
}

/* ============ ARTICLE VIEW ============ */
.article-page{padding:52px 0 60px}
.back-link{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:.86rem;font-weight:700;color:var(--muted);margin-bottom:30px;
  transition:color .15s,transform .2s;
}
.back-link:hover{color:var(--text);transform:translateX(-3px)}
.post-head{max-width:800px;margin:0 auto;text-align:left}
.post-head .cat-tag{margin-bottom:16px}
.post-head h1{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:800;letter-spacing:-.03em}
.post-head h1 .serif-accent{font-weight:500}
.meta-row{
  display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:20px;
  font-size:.86rem;color:var(--faint);
}
.meta-row .byline{font-size:.86rem}
.meta-row .byline .mini-av{width:28px;height:28px;border-radius:50%}
.post-cover{max-width:800px;margin:34px auto 0}
.post-cover .cover{box-shadow:var(--shadow)}

.post-layout{
  display:grid;grid-template-columns:216px minmax(0,720px);gap:56px;
  justify-content:center;margin-top:44px;
}
@media (max-width:1080px){.post-layout{display:block;max-width:720px;margin-left:auto;margin-right:auto}}
.toc-rail{position:relative}
.toc-box{position:sticky;top:calc(var(--nav-h) + 28px)}
.toc-box .toc-label{
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-bottom:14px;display:block;
}
.toc-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1px solid var(--border)}
.toc-list a{
  display:block;padding:7px 0 7px 16px;margin-left:-1px;font-size:.84rem;color:var(--muted);
  text-decoration:none;border-left:2px solid transparent;transition:color .15s,border-color .15s;
}
.toc-list a:hover{color:var(--text)}
.toc-list a.active{color:var(--accent);border-left-color:var(--accent);font-weight:650}
@media (max-width:1080px){.toc-rail{display:none}}
.toc-inline{display:none;margin:0 0 34px;border:1px solid var(--border);border-radius:16px;background:var(--card)}
.toc-inline summary{
  cursor:pointer;list-style:none;padding:15px 20px;font-weight:700;font-size:.92rem;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.toc-inline summary::-webkit-details-marker{display:none}
.toc-inline .toc-list{border-left:none;padding:0 20px 16px}
.toc-inline .toc-list a{border-left:none;padding-left:0}
@media (max-width:1080px){.toc-inline{display:block}}
.toc-chevron{transition:transform .25s;color:var(--faint);flex:none}
.toc-inline[open] .toc-chevron{transform:rotate(180deg)}

/* ---- prose ---- */
.prose{font-size:1.05rem;line-height:1.78;color:var(--text)}
.prose > p{margin:0 0 1.35em}
.prose > p:first-of-type::first-letter{
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:3.3em;line-height:.82;float:left;padding:6px 10px 0 0;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.prose h2{
  font-size:1.62rem;font-weight:800;margin:2.1em 0 .75em;scroll-margin-top:calc(var(--nav-h) + 22px);
}
.prose h2 .serif-accent{font-weight:500}
.prose h3{font-size:1.18rem;font-weight:750;margin:1.7em 0 .6em}
.prose ul,.prose ol{margin:0 0 1.35em;padding-left:1.35em;color:var(--text)}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--accent);font-weight:700}
.prose strong{font-weight:700}
.prose em{font-family:var(--serif);font-style:italic}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset:3px}

.takeaways{
  border-radius:18px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border));
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  padding:24px 26px;margin:0 0 38px;
}
.takeaways .box-label{
  display:flex;align-items:center;gap:9px;font-size:.72rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;
}
.takeaways ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.takeaways li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;line-height:1.55}
.takeaways li svg{color:var(--good);flex:none;margin-top:4px}

.callout{
  border-radius:16px;padding:19px 22px;margin:0 0 1.6em;
  border:1px solid color-mix(in srgb,var(--good) 32%,var(--border));
  background:color-mix(in srgb,var(--good) 7%,transparent);
  font-size:.95rem;line-height:1.65;
}
.callout .co-label{
  display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--good);margin-bottom:8px;
}
.callout.warn{border-color:color-mix(in srgb,var(--amber) 36%,var(--border));background:color-mix(in srgb,var(--amber) 7%,transparent)}
.callout.warn .co-label{color:var(--amber)}

.pullquote{
  margin:2em 0;padding:6px 0 6px 26px;border-left:3px solid transparent;
  border-image:var(--grad) 1;
  font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1.5;
  color:var(--text);text-wrap:balance;
}
.pullquote .pq-who{display:block;margin-top:10px;font-family:var(--sans);font-style:normal;font-size:.8rem;font-weight:700;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}

.table-wrap{overflow-x:auto;margin:0 0 1.6em;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.prose table{width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.5;min-width:560px}
.prose caption{caption-side:top;text-align:left;padding:14px 18px 0;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.prose th{
  text-align:left;padding:13px 18px;font-size:.72rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--border-strong);white-space:nowrap;
}
.prose td{padding:12px 18px;border-bottom:1px solid var(--border);vertical-align:top}
.prose tbody tr:last-child td{border-bottom:none}
.prose td b{font-weight:700}
.prose .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.yes{color:var(--good);font-weight:700}
.no{color:var(--amber);font-weight:700}

.check-list{list-style:none;padding-left:0 !important}
.check-list li{position:relative;padding-left:30px}
.check-list li::before{
  content:"";position:absolute;left:0;top:.34em;width:17px;height:17px;border-radius:6px;
  border:1.6px solid var(--good);
  background:
    linear-gradient(transparent,transparent) padding-box;
}
.check-list li::after{
  content:"";position:absolute;left:4px;top:calc(.34em + 4px);width:9px;height:5px;
  border-left:2px solid var(--good);border-bottom:2px solid var(--good);transform:rotate(-45deg);
}

/* ---- article CTAs ---- */
.cta-inline{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border-radius:18px;border:1px solid var(--border-strong);
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 10%,transparent),color-mix(in srgb,#B44CF0 8%,transparent));
  padding:20px 24px;margin:2.2em 0;
}
.cta-inline .mini-av{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center}
.cta-inline .mini-av svg{width:100%;height:100%;display:block}
.cta-inline p{flex:1;min-width:220px;font-size:.92rem;color:var(--muted);margin:0}
.cta-inline p b{color:var(--text)}
.cta-inline .btn{padding:10px 20px;font-size:.86rem}
.cta-end{
  border-radius:22px;padding:34px 32px;margin:2.6em 0 0;
  background:var(--card-strong);border:1px solid var(--border-strong);
  box-shadow:var(--glow);text-align:center;
}
.cta-end .crew{justify-content:center;margin-bottom:14px}
.cta-end h3{font-size:1.4rem;font-weight:800;margin:0 0 10px}
.cta-end p{color:var(--muted);font-size:.94rem;max-width:46ch;margin:0 auto 20px}
.cta-end .capture{justify-content:center;max-width:430px;margin:0 auto}

/* ---- related ---- */
.related{max-width:1120px;margin:70px auto 0;padding:0 24px}
.related h2{font-size:1.35rem;font-weight:800;margin-bottom:24px}
.related .post-grid{gap:20px}
.article-page .newsletter{padding-bottom:20px}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--border);background:color-mix(in srgb,var(--bg-2) 85%,transparent);padding:46px 0 38px;margin-top:40px}
.foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
.foot-brand p{color:var(--faint);font-size:.86rem;margin-top:10px;max-width:36ch}
.foot-links{display:flex;gap:40px;flex-wrap:wrap}
.foot-links div{display:grid;gap:9px}
.foot-links b{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--faint)}
.foot-links a{font-size:.88rem;color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--text)}
.foot-bottom{
  margin-top:40px;padding-top:20px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:.8rem;color:var(--faint);
}

/* ============ REVEAL / SHEEN / MOTION ============ */
.tilt-sheen{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),var(--sheen),transparent 62%);
  z-index:1;
}
.post-card:hover .tilt-sheen,.feat-card:hover .tilt-sheen{opacity:1}
.reveal{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal,.bhero h1 .line,.bhero-sub,.chips{opacity:1;transform:none}
}
/* ============ MULTI PAGE ADDITIONS (breadcrumbs, FAQ, author, lang links) ============ */
.breadcrumbs{margin:26px 0 0;font-size:.85rem;color:var(--faint)}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.breadcrumbs li{display:flex;align-items:center;gap:6px}
.breadcrumbs li+li::before{content:"/";color:var(--faint);opacity:.6}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--text)}
.breadcrumbs [aria-current]{color:var(--text)}

.faq{display:grid;gap:12px;margin:18px 0 8px}
.faq-item{
  border:1px solid var(--border);border-radius:14px;background:var(--card);
  overflow:hidden;transition:border-color .2s ease,background .2s ease;
}
.faq-item[open]{border-color:var(--border-strong);background:var(--card-strong)}
.faq-item summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:16px 18px;font-weight:700;font-size:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-size:1.25rem;font-weight:600;color:var(--accent);
  transition:transform .25s ease;line-height:1;flex:none;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 18px 16px;color:var(--muted)}
.faq-a p{margin:0 0 8px}

.author-box{
  display:flex;gap:16px;align-items:flex-start;margin:42px 0 0;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--card);padding:20px 22px;
}
.author-box .mini-av{width:46px;height:46px;flex:none}
.author-box .mini-av svg{width:100%;height:100%}
.author-box b{display:block;margin-bottom:4px}
.author-box p{color:var(--muted);font-size:.93rem}
.author-box a{color:var(--accent)}

.lang-switch a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 12px;border-radius:999px;font-size:.8rem;font-weight:700;
  text-decoration:none;color:var(--muted);
}
.lang-switch a[aria-current="true"]{background:var(--card-strong);color:var(--text);border:1px solid var(--border-strong)}
.lang-switch a:hover{color:var(--text)}

.updated-note{font-size:.82rem;color:var(--faint);margin-top:10px}


/* ==========================================================
   IDENTITÉ « NUIT MAGNÉTIQUE » (2026-07-07)
   Palette et règles : voir 07_IDENTITE_VISUELLE.md
   Or de l'aube réservé aux livraisons et validations.
   ========================================================== */
:root{
  --bg:#070A14;
  --bg-2:#0C1122;
  --bg-3:#121834;
  --card:#121834;
  --card-strong:#161E42;
  --border:#232B4D;
  --border-strong:#39437A;
  --text:#EEF0FB;
  --muted:#9AA3C7;
  --faint:#6F79A3;
  --amber:#FFB84D;
  --accent:#5B7FFF;
  --good:#FFB84D;
  --grad:linear-gradient(115deg,#5B7FFF 0%,#8A66FF 55%,#A566FF 100%);
  --glow:0 0 90px rgba(91,127,255,.20);
  --shadow:0 24px 60px -24px rgba(3,5,16,.65);
  --sheen:rgba(255,255,255,.09);
  --orb1:rgba(91,127,255,.30);
  --orb2:rgba(165,102,255,.20);
  --orb3:rgba(127,163,255,.10);
  --grid-line:rgba(91,127,255,.13);
  --radius:16px;
  --titres:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',Menlo,Consolas,monospace;
  color-scheme:dark;
}
h1,h2,h3,h4{font-family:var(--titres);font-weight:700;letter-spacing:-.025em}
.serif-accent{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
.logo{font-family:var(--titres);font-weight:700;letter-spacing:-.03em;font-size:1.3rem}
.eyebrow,.feat-flag,.toc-label,.kicker{font-family:var(--mono);letter-spacing:.18em}
.card-meta time,.card-meta > span:not(.byline):not(.dot),.meta-row time,.meta-row > span:not(.byline):not(.dot){
  font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;
}
.btn{border-radius:10px;font-family:var(--titres);font-weight:700}
.btn-primary{box-shadow:0 8px 28px -8px rgba(122,102,255,.55)}
.btn-primary:hover{box-shadow:0 12px 34px -8px rgba(122,102,255,.7)}
.cat-tag{font-family:var(--mono);letter-spacing:.06em}
.chip{font-family:var(--sans)}
.pullquote{font-family:var(--serif);font-style:italic;font-weight:400}
.prose table caption{font-family:var(--mono);letter-spacing:.04em}
.prose td.num{font-family:var(--mono);font-size:.86rem}
.faq-item summary{font-family:var(--titres);font-weight:600}
.progress{background:var(--grad)}
::selection{background:#5B7FFF;color:#fff}


/* ==========================================================
   CIEL DE NUIT (porté depuis la landing finale du 2026-07-07)
   Une aurore par écran, étoiles semées en JS, étoile filante,
   horloge de nuit sur les articles, lanterne sous la souris.
   ========================================================== */
.bhero,.cta-card,.cta-end{position:relative;overflow:hidden}
.bhero-inner,.chips,.cta-card > *,.cta-end > *{position:relative;z-index:1}
.aurora{
  position:absolute;left:50%;bottom:-300px;transform:translateX(-50%) translateY(90px);
  width:1150px;height:560px;border-radius:50%;pointer-events:none;filter:blur(10px);opacity:0;
  background:radial-gradient(ellipse at 50% 100%,rgba(91,127,255,.30) 0%,rgba(138,102,255,.20) 40%,rgba(165,102,255,.09) 60%,transparent 76%);
  animation:aurora-in 1.6s ease-out .15s forwards,aurora-breathe 9s ease-in-out 2.4s infinite;
  z-index:0;
}
.cta-end .aurora{width:900px;height:430px;bottom:-250px}
@keyframes aurora-in{to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes aurora-breathe{
  0%,100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  50%{opacity:.82;transform:translateX(-50%) translateY(0) scale(1.05)}
}
.star{
  position:absolute;border-radius:50%;background:#C9D4FF;pointer-events:none;z-index:0;
  animation:twinkle var(--tw,3.4s) ease-in-out var(--td,0s) infinite alternate;
}
@keyframes twinkle{from{opacity:.1}to{opacity:.75}}
.filante{
  position:absolute;width:130px;height:2px;pointer-events:none;opacity:0;border-radius:2px;
  background:linear-gradient(90deg,rgba(201,212,255,0),#EAF0FF 60%,#fff);
  filter:drop-shadow(0 0 6px rgba(160,180,255,.85));
  transform:rotate(var(--ang,-16deg));z-index:1;
}
.filante.go{animation:filer var(--dur,1.1s) ease-in forwards}
@keyframes filer{
  0%{opacity:0;translate:0 0}
  10%{opacity:1}
  100%{opacity:0;translate:var(--dx,-430px) var(--dy,150px)}
}
.horloge{
  position:fixed;top:10px;right:14px;z-index:41;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  color:var(--muted);background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:20px;padding:4px 12px;
  opacity:0;transition:opacity .4s ease,color .4s ease,border-color .4s ease;pointer-events:none;
}
.horloge.visible{opacity:1}
.horloge.aube{color:var(--amber);border-color:rgba(255,184,77,.55)}
.lanterne{
  position:fixed;left:0;top:0;width:380px;height:380px;border-radius:50%;
  pointer-events:none;z-index:2;mix-blend-mode:screen;opacity:0;
  transform:translate(-50%,-50%);transition:opacity .6s ease;
  background:radial-gradient(circle,rgba(110,132,255,.13),rgba(150,102,255,.06) 45%,transparent 70%);
}
.lanterne.visible{opacity:1}
.nav.scrolled{box-shadow:0 12px 34px rgba(0,0,0,.45)}
@media (prefers-reduced-motion: reduce){
  .aurora{animation:none;opacity:1}
  .star{animation:none;opacity:.4}
  .filante,.horloge,.lanterne{display:none}
}