/* ──────────────────────────────────────────────────────────────
   Articles / Journal — dark editorial (matches the homepage redesign).
   Loaded on articles.html + the individual article pages.
   ────────────────────────────────────────────────────────────── */
:root{
  --a-bg:#120C24; --a-ink:#F4F5FB; --a-muted:rgba(244,245,251,.74); --a-faint:rgba(244,245,251,.5);
  --a-iris:#6B3BF2; --a-cyan:#3BC4F2; --a-lilac:#CBB9FF; --a-line:rgba(244,245,251,.12); --a-glass:rgba(244,245,251,.05);
  --a-serif:'Instrument Serif',Georgia,serif; --a-sans:'Instrument Sans','Montserrat',system-ui,sans-serif;
  --rd-bg:#120C24; --rd-ink:#F4F5FB; --rd-iris:#6B3BF2; --rd-iris-2:#7E51FF; --rd-cyan:#3BC4F2; --rd-violet:#8B5CFF;
  --rd-serif:'Instrument Serif',Georgia,serif; --rd-sans:'Instrument Sans','Montserrat',system-ui,sans-serif;
}
body{ background:var(--a-bg); color:var(--a-ink); font-family:var(--a-sans); -webkit-font-smoothing:antialiased; }
a:hover{ color:var(--a-cyan); }
::selection{ background:#6B3BF2; color:#F4F5FB; }
.lg-glow{ position:fixed; inset:0; background:radial-gradient(80% 45% at 50% 0%, rgba(107,59,242,.3) 0%, rgba(107,59,242,0) 60%); pointer-events:none; z-index:0; }

/* ── homepage nav (dark) ─────────────────────────────────────── */
.rd-prog{position:fixed;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--rd-violet),var(--rd-cyan));z-index:300;}
.rd-nav{position:fixed;top:3px;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px clamp(20px,4vw,56px);color:var(--rd-ink);white-space:nowrap;border-bottom:1px solid transparent;font-family:var(--rd-sans);transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease,color .4s ease,box-shadow .4s ease;}
.rd-nav.scrolled{background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom-color:rgba(26,19,57,.10);color:#1A1339;box-shadow:0 6px 30px -18px rgba(26,19,57,.45);}
.rd-nav.scrolled .rd-btn-ghost{border-color:rgba(26,19,57,.22);}
.rd-nav.scrolled .rd-menu-btn{border-color:rgba(26,19,57,.25);}
.rd-brand{display:flex;align-items:center;gap:10px;font-family:var(--rd-serif);font-size:24px;letter-spacing:.01em;color:inherit;}
.rd-brand-mark{height:34px;width:auto;object-fit:contain;display:block;}
.rd-dot{color:var(--rd-cyan);font-style:italic;}
.rd-links{display:flex;align-items:center;gap:clamp(15px,2.1vw,28px);font-size:14px;font-weight:500;letter-spacing:.03em;}
.rd-links a{opacity:.85;transition:opacity .2s,color .2s;}
.rd-links a:hover{opacity:1;color:var(--rd-cyan);}
.rd-hash i{font-size:.72rem;margin-right:.28rem;color:var(--rd-cyan);}
.rd-cta{display:flex;align-items:center;gap:10px;}
.rd-btn{font-family:var(--rd-sans);font-weight:600;border-radius:99px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;text-align:center;transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s,color .25s,border-color .25s,box-shadow .25s;}
.rd-btn:active{transform:scale(.97);}
.rd-btn-ghost{font-size:14px;padding:9px 18px;border:1px solid rgba(244,245,251,.28);color:inherit;}
.rd-btn-ghost:hover{border-color:var(--rd-cyan);color:var(--rd-cyan);}
.rd-btn-solid{font-size:14px;padding:10px 20px;background:var(--rd-iris);color:#fff;box-shadow:0 8px 24px rgba(107,59,242,.35);}
.rd-btn-solid:hover{background:var(--rd-iris-2);transform:translateY(-1px);color:#fff;}
.rd-menu-btn{display:none;background:none;border:1px solid rgba(244,245,251,.3);border-radius:99px;color:inherit;font-family:var(--rd-sans);font-size:13px;font-weight:600;letter-spacing:.12em;padding:9px 17px;cursor:pointer;}
.rd-overlay{position:fixed;inset:0;z-index:400;background:rgba(18,12,36,.97);backdrop-filter:blur(14px);flex-direction:column;padding:24px;animation:epFade .3s ease both;color:var(--rd-ink);font-family:var(--rd-sans);display:flex;}
.rd-overlay[hidden]{display:none!important;}
.rd-ov-top{display:flex;justify-content:space-between;align-items:center;}
.rd-ov-word{font-family:var(--rd-serif);font-size:22px;}
.rd-ov-links{display:flex;flex-direction:column;gap:4px;margin:auto 0;font-family:var(--rd-serif);font-size:clamp(30px,8vw,50px);}
.rd-ov-links a:hover{color:var(--rd-cyan);font-style:italic;}
.rd-ov-cta{display:flex;gap:12px;}
.rd-ov-cta a{flex:1;text-align:center;font-size:15px;font-weight:600;padding:16px;border-radius:99px;}
@keyframes epFade{from{opacity:0}to{opacity:1}}
@media (max-width:1180px){.rd-links,.rd-cta .rd-btn{display:none;}.rd-menu-btn{display:inline-block;}}

/* ── Journal hub ─────────────────────────────────────────────── */
.blog-hero{ position:relative; z-index:1; padding:clamp(92px,13vh,140px) 1.5rem 2.25rem; text-align:center; background:none; border:none; }
.blog-hero .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:11.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--a-cyan); background:none; border:none; padding:0; margin-bottom:1.1rem; }
.blog-hero h1{ font-family:var(--a-serif); font-weight:400; font-size:clamp(2.6rem,6vw,4.4rem); margin:0; color:var(--a-ink); line-height:1.02; letter-spacing:-.01em; }
.blog-hero p{ color:var(--a-muted); max-width:560px; margin:1rem auto 0; line-height:1.7; font-size:1.05rem; }
.blog-cats{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin:2rem auto 0; max-width:720px; position:relative; z-index:1; }
.blog-cat{ font-size:.85rem; font-weight:600; color:var(--a-muted); cursor:pointer; background:var(--a-glass); border:1px solid var(--a-line); border-radius:9999px; padding:.5rem 1.1rem; transition:all .18s ease; }
.blog-cat:hover{ border-color:rgba(59,196,242,.5); color:var(--a-cyan); }
.blog-cat.active{ background:rgba(107,59,242,.2); border-color:rgba(107,59,242,.7); color:var(--a-ink); }
.blog-wrap{ position:relative; z-index:1; max-width:1140px; margin:0 auto; padding:3rem 1.5rem 4rem; }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
@media (max-width:900px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .blog-grid{ grid-template-columns:1fr; } }
.blog-card{ display:flex; flex-direction:column; background:var(--a-glass); border:1px solid var(--a-line); border-radius:18px; overflow:hidden; transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s; text-decoration:none; color:inherit; }
.blog-card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px rgba(0,0,0,.35); border-color:rgba(59,196,242,.35); }
.blog-card-img{ aspect-ratio:16/10; overflow:hidden; background:#1A1233; }
.blog-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.blog-card:hover .blog-card-img img{ transform:scale(1.05); }
.blog-card-body{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.blog-tag{ align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--a-cyan); background:rgba(59,196,242,.1); border:1px solid rgba(59,196,242,.3); border-radius:9999px; padding:.3rem .7rem; margin-bottom:.85rem; }
.blog-card h2{ font-family:var(--a-serif); font-weight:400; font-size:1.45rem; line-height:1.2; margin:0 0 .6rem; color:var(--a-ink); }
.blog-card p{ color:var(--a-muted); font-size:.92rem; line-height:1.65; margin:0 0 1.1rem; flex:1; }
.blog-meta{ display:flex; align-items:center; gap:.6rem; font-size:.8rem; color:var(--a-faint); }
.blog-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--a-faint); }
.blog-readmore{ color:var(--a-cyan); font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:.4rem; }
.blog-card:hover .blog-readmore{ gap:.6rem; }
.blog-promo{ margin:3.5rem auto 0; max-width:1140px; border-radius:22px; background:linear-gradient(135deg,rgba(107,59,242,.2),rgba(59,196,242,.08)); border:1px solid rgba(107,59,242,.28); color:var(--a-ink); padding:3rem 2.5rem; text-align:center; position:relative; z-index:1; }
.blog-promo h2{ font-family:var(--a-serif); font-weight:400; color:var(--a-ink); font-size:clamp(1.7rem,3.5vw,2.4rem); margin:0 0 .75rem; }
.blog-promo p{ color:var(--a-muted); max-width:540px; margin:0 auto 1.6rem; line-height:1.7; }
.blog-promo .btn-row{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

/* ── Individual article ──────────────────────────────────────── */
.article-hero{ position:relative; z-index:1; padding:clamp(92px,13vh,132px) 1.5rem 0; max-width:820px; margin:0 auto; text-align:center; }
.article-hero .blog-tag{ margin:0 auto 1.1rem; }
.article-hero h1{ font-family:var(--a-serif); font-weight:400; font-size:clamp(2.2rem,5.2vw,3.6rem); margin:0 0 1rem; line-height:1.08; color:var(--a-ink); letter-spacing:-.01em; }
.article-hero .article-meta{ display:flex; align-items:center; justify-content:center; gap:.6rem; font-size:.88rem; color:var(--a-faint); margin-bottom:2rem; }
.article-cover{ position:relative; z-index:1; max-width:1000px; margin:0 auto 2.5rem; border-radius:22px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.4); aspect-ratio:16/8; background:#1A1233; }
.article-cover img{ width:100%; height:100%; object-fit:cover; }
.article-body{ position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 1.5rem 1rem; }
.article-body .lead{ font-size:1.22rem; line-height:1.7; color:var(--a-ink); margin:0 0 1.8rem; font-weight:400; }
.article-body h2{ font-family:var(--a-serif); font-weight:400; font-size:clamp(1.7rem,3vw,2.1rem); margin:2.6rem 0 .9rem; scroll-margin-top:90px; color:var(--a-ink); line-height:1.12; }
.article-body h3{ font-family:var(--a-serif); font-weight:400; font-size:1.35rem; margin:1.7rem 0 .6rem; color:var(--a-ink); }
.article-body p{ color:var(--a-muted); line-height:1.85; margin:0 0 1.15rem; font-size:1.04rem; }
.article-body ul, .article-body ol{ margin:.5rem 0 1.3rem; padding-left:1.4rem; }
.article-body li{ color:var(--a-muted); line-height:1.8; margin-bottom:.55rem; }
.article-body li::marker{ color:var(--a-cyan); }
.article-body strong{ color:var(--a-ink); font-weight:600; }
.article-body a{ color:var(--a-cyan); }
.article-body blockquote{ margin:1.8rem 0; padding:1.1rem 1.5rem; border-left:3px solid var(--a-iris); background:rgba(107,59,242,.1); border-radius:0 14px 14px 0; font-family:var(--a-serif); font-size:1.35rem; font-style:italic; color:var(--a-lilac); line-height:1.5; }
.article-figure{ margin:2rem 0; }
.article-figure img{ width:100%; border-radius:16px; box-shadow:0 20px 40px rgba(0,0,0,.35); display:block; }
.article-figure figcaption{ text-align:center; font-size:.85rem; color:var(--a-faint); margin-top:.6rem; }
.article-table{ width:100%; border-collapse:collapse; margin:1.5rem 0 2rem; font-size:.95rem; border-radius:14px; overflow:hidden; border:1px solid var(--a-line); }
.article-table th, .article-table td{ text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--a-line); vertical-align:top; }
.article-table thead th{ background:rgba(107,59,242,.2); color:var(--a-ink); font-weight:600; font-size:.85rem; letter-spacing:.02em; }
.article-table thead th:last-child{ background:rgba(59,196,242,.2); }
.article-table td{ color:var(--a-muted); line-height:1.6; }
.article-table tr:last-child td{ border-bottom:none; }
.article-table td:first-child{ font-weight:600; color:var(--a-ink); }
.article-promo{ margin:2.5rem 0; border:1px solid rgba(107,59,242,.28); background:rgba(107,59,242,.1); border-radius:18px; padding:1.75rem 1.9rem; }
.article-promo .kicker{ font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--a-cyan); margin-bottom:.5rem; }
.article-promo h3{ font-family:var(--a-serif); font-weight:400; font-size:1.4rem; margin:0 0 .6rem; color:var(--a-ink); }
.article-promo p{ color:var(--a-muted); margin:0 0 1.2rem; line-height:1.7; }
.article-faq{ margin:1.5rem 0; }
.article-faq details{ border:1px solid var(--a-line); border-radius:14px; padding:.2rem 1.2rem; margin-bottom:.75rem; background:var(--a-glass); transition:border-color .18s ease; }
.article-faq details[open]{ border-color:rgba(59,196,242,.35); }
.article-faq summary{ cursor:pointer; font-weight:600; color:var(--a-ink); padding:1rem 0; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.article-faq summary::-webkit-details-marker{ display:none; }
.article-faq summary::after{ content:'\002B'; color:var(--a-cyan); font-size:1.2rem; transition:transform .2s ease; }
.article-faq details[open] summary::after{ transform:rotate(45deg); }
.article-faq details p{ color:var(--a-muted); line-height:1.8; margin:0 0 1rem; }
.article-end-cta{ position:relative; z-index:1; margin-top:3.5rem; background:linear-gradient(135deg,rgba(107,59,242,.2),rgba(59,196,242,.06)); border-top:1px solid rgba(107,59,242,.28); color:var(--a-ink); text-align:center; padding:3.5rem 1.5rem; }
.article-end-cta h2{ font-family:var(--a-serif); font-weight:400; color:var(--a-ink); font-size:clamp(1.8rem,3.5vw,2.6rem); margin:0 0 .8rem; }
.article-end-cta p{ color:var(--a-muted); max-width:520px; margin:0 auto 1.7rem; line-height:1.7; }
.article-end-cta .btn-row{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.article-related{ position:relative; z-index:1; max-width:1140px; margin:0 auto; padding:3.5rem 1.5rem 1rem; }
.article-related h2{ font-family:var(--a-serif); font-weight:400; text-align:center; font-size:2rem; margin:0 0 2rem; color:var(--a-ink); }
.article-back-link{ display:inline-flex; align-items:center; gap:.45rem; color:var(--a-cyan); font-weight:600; font-size:.9rem; text-decoration:none; margin-bottom:1.5rem; }
.article-back-link:hover{ gap:.65rem; }

/* buttons on dark (promo / CTA bands) */
.blog-promo .btn-glass, .article-end-cta .btn-glass, .article-promo .btn-glass{ background:none; border:1px solid rgba(244,245,251,.35); color:var(--a-ink); }
.blog-promo .btn-glass:hover, .article-end-cta .btn-glass:hover, .article-promo .btn-glass:hover{ border-color:var(--a-cyan); color:var(--a-cyan); }

/* ══ Share this article ═══════════════════════════════════════════════════
   The same row at the top of the piece and at the end of it. Each service
   keeps its own mark and its own colour, because a green WhatsApp glyph is
   recognised before the word next to it is read — but the resting state is
   the site's glass-on-dark, so the row belongs to the page rather than
   looking like a widget pasted onto it. The colour arrives on hover. */
.art-share{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.art-share-l{ font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--a-faint); margin-right:.15rem; }
.art-share-b{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .85rem;
  border-radius:999px; border:1px solid var(--a-line); background:var(--a-glass);
  color:var(--a-muted); font-family:var(--a-sans); font-size:.82rem; font-weight:600;
  text-decoration:none; cursor:pointer; line-height:1;
  transition:color .22s ease, border-color .22s ease, background-color .22s ease, transform .18s ease; }
.art-share-b i{ font-size:1rem; }
.art-share-b:active{ transform:scale(.97); }
.art-share-b.wa:hover{ color:#25D366; border-color:#25D366; background:rgba(37,211,102,.1); }
.art-share-b.fb:hover{ color:#5B8DEF; border-color:#5B8DEF; background:rgba(91,141,239,.1); }
.art-share-b.lnk:hover{ color:var(--a-cyan); border-color:var(--a-cyan); background:rgba(59,196,242,.1); }
.art-share-b.is-done{ color:#7FD39B; border-color:#7FD39B; background:rgba(127,211,155,.12); }

/* At the top it sits beside the way back out, sharing that row's baseline. */
.art-share-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-bottom:1.5rem; }
.art-share-top .article-back-link{ margin-bottom:0; }

/* At the end it is a parting offer, so it is centred and given a rule above. */
.art-share-end{ justify-content:center; margin-top:2.5rem; padding-top:1.75rem;
  border-top:1px solid var(--a-line); }

@media (max-width:560px){
  /* The marks carry the meaning on a narrow screen; the words would wrap the
     row onto three lines to repeat what the glyphs already say. */
  .art-share-b span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
    clip-path:inset(50%); white-space:nowrap; }
  .art-share-b{ padding:.6rem .75rem; }
  .art-share-b i{ font-size:1.05rem; }
  .art-share-b.is-done span, .art-share-b[data-share-copy] span{ position:static; width:auto; height:auto;
    overflow:visible; clip:auto; clip-path:none; }
  .art-share-top{ gap:.75rem; }
}