/* ============================================================
   Archemap — pillar & article content styles
   Ported from the data/site design deck (data/site/assets/style.css).
   Everything is SCOPED under .ap so it cannot collide with the app
   layout (which defines its own .nav / footer / Tailwind base).
   Put class="ap theme-gold" (or "ap theme-violet") on the page wrapper.
   ============================================================ */
.ap{
  --cream:#fbf8f1; --paper:#fff;
  --ink:#1c1a17; --ink2:#4a443c; --ink3:#5b564e; --ink4:#8a857c;
  --gold:#cf9526; --gold-bri:#e7b53f; --gold-d:#b07d18; --gold-eye:#b07d18;
  --violet:#7a56e0; --violet-bri:#9b7bf5; --violet-d:#5a3cf0; --violet-deep:#6a4bd0;
  --night:#0c0818; --night2:#150d2e;
  --line:rgba(40,30,70,.09); --line2:rgba(40,30,70,.14);
  --sans:'Figtree',system-ui,-apple-system,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --accent:var(--gold); --accent-d:var(--gold-d); --accent-eye:var(--gold-d);
  --accent-soft:rgba(207,149,38,.14); --accent-ring:rgba(207,149,38,.4);
  --btn-a:#e7b53f; --btn-b:#cf9526; --btn-ink:#1c1208; --btn-shadow:rgba(207,149,38,.4);
  --halo:rgba(207,149,38,.2);
  background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth
}
.ap.theme-violet{
  --accent:var(--violet); --accent-d:var(--violet-d); --accent-eye:var(--violet-deep);
  --accent-soft:rgba(122,86,224,.13); --accent-ring:rgba(122,86,224,.45);
  --btn-a:#9b7bf5; --btn-b:#6a4bd0; --btn-ink:#fff; --btn-shadow:rgba(106,75,208,.45);
  --halo:rgba(122,86,224,.24);
}
.ap *{box-sizing:border-box}
.ap img{max-width:100%;display:block}
.ap a{color:inherit}
.ap ::selection{background:var(--accent);color:#fff}
.ap h1,.ap h2,.ap h3,.ap h4{margin:0;font-family:var(--serif);font-weight:600;color:var(--ink);letter-spacing:-.01em}
.ap p{margin:0}

@keyframes ap-glowpulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.8;transform:scale(1.08)}}

/* ---------- layout helpers ---------- */
.ap .wrap{max-width:1140px;margin:0 auto;padding-left:clamp(20px,4vw,36px);padding-right:clamp(20px,4vw,36px)}
.ap .wrap-narrow{max-width:760px;margin:0 auto;padding-left:clamp(20px,4vw,36px);padding-right:clamp(20px,4vw,36px)}
.ap .wrap-mid{max-width:1000px;margin:0 auto;padding-left:clamp(20px,4vw,36px);padding-right:clamp(20px,4vw,36px)}
.ap .sec{padding-top:clamp(48px,7vw,86px)}
.ap .eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-eye)}
.ap .eyebrow.violet{color:var(--violet-deep)}
.ap .eyebrow.gold{color:var(--gold-d)}
.ap .h2{font-size:clamp(28px,4.6vw,46px);line-height:1.05;text-wrap:balance}
.ap .h3{font-size:clamp(21px,2.6vw,26px);line-height:1.15}
.ap .lead{font-size:clamp(16px,2.1vw,19px);line-height:1.6;color:var(--ink3);text-wrap:pretty}

/* ---------- buttons ---------- */
.ap .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;text-decoration:none;border:none;cursor:pointer;border-radius:13px;transition:transform .2s ease,box-shadow .2s ease}
.ap .btn:hover{transform:translateY(-3px)}
.ap .btn--accent{background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:var(--btn-ink);box-shadow:0 16px 40px var(--btn-shadow)}
.ap .btn--lg{font-size:18px;padding:18px 36px;border-radius:14px}
.ap .btn--md{font-size:16px;padding:15px 28px}
.ap .btn--ghost{background:rgba(255,255,255,.6);border:1px solid var(--line2);color:var(--ink)}
.ap .btn--onnight{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fbf8f1}

/* ---------- hero (night) ---------- */
.ap .hero{position:relative;overflow:hidden;background:radial-gradient(120% 92% at 50% -10%,#241546 0%,#150d2e 46%,#0c0818 100%)}
.ap.theme-violet .hero{background:radial-gradient(120% 92% at 50% -10%,#2a1a52 0%,#170e34 46%,#0b0716 100%)}
.ap .hero__halo1{position:absolute;top:-90px;left:50%;transform:translateX(-50%);width:700px;height:480px;border-radius:999px;background:radial-gradient(circle,var(--halo),transparent 66%);filter:blur(62px);animation:ap-glowpulse 12s ease-in-out infinite;pointer-events:none}
.ap .hero__halo2{position:absolute;bottom:-130px;right:-80px;width:440px;height:440px;border-radius:999px;background:radial-gradient(circle,rgba(122,86,224,.2),transparent 66%);filter:blur(58px);animation:ap-glowpulse 15s ease-in-out infinite 1.4s;pointer-events:none}
.ap.theme-violet .hero__halo2{background:radial-gradient(circle,rgba(207,149,38,.16),transparent 66%)}
.ap .hero__stars{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.4px);background-size:46px 46px;opacity:.05;pointer-events:none}
.ap .hero__in{position:relative;z-index:2;max-width:880px;margin:0 auto;padding:clamp(34px,5vw,58px) clamp(20px,4vw,36px) clamp(36px,4vw,54px);text-align:center}
.ap .hero h1{font-size:clamp(40px,8vw,82px);line-height:1.01;letter-spacing:-.025em;margin-top:18px;color:#fbf8f1;text-wrap:balance}
.ap .hero .lead{color:#ccc3e0;margin:20px auto 0;max-width:560px;font-size:clamp(18px,2.6vw,24px)}
.ap .hero .eyebrow{color:var(--accent)}
.ap.theme-violet .hero .eyebrow{color:#a892ee}
.ap .trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;margin-top:24px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:#9b91b8}
.ap .trust .ok{color:#1f8a5b}
.ap .trust .dot{color:#5f567e}

/* ---------- breadcrumb ---------- */
.ap .crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink4);padding-top:18px}
.ap .crumb a{color:var(--ink4);text-decoration:none}
.ap .crumb a:hover{color:var(--accent-d)}
.ap .crumb span{margin:0 7px;opacity:.5}

/* ---------- cards / grid ---------- */
.ap .grid{display:grid;gap:16px}
.ap .g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ap .g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.ap .g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ap .gtiles{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.ap .card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 12px 30px rgba(40,30,70,.05)}
.ap .card h3{margin-top:14px}
.ap .card p{margin-top:9px;font-size:15px;line-height:1.6;color:var(--ink3)}
.ap .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:var(--accent-soft);color:var(--accent-d)}
.ap .numdot{font-family:var(--mono);font-weight:600;font-size:13px;color:#fff;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:var(--accent)}
.ap .tile{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px 16px;text-decoration:none;box-shadow:0 8px 22px rgba(40,30,70,.04);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.ap .tile:hover{transform:translateY(-4px);border-color:var(--accent-ring);box-shadow:0 18px 40px var(--accent-soft)}
.ap .tile .med{width:60px;height:60px;border-radius:999px;display:grid;place-items:center;background:radial-gradient(circle at 38% 30%,#fffdf7,#f0e6d2);box-shadow:0 0 0 2px var(--accent-ring)}
.ap .tile .med img{width:32px;height:32px}
.ap .tile b{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--ink)}
.ap .tile small{font-size:12.5px;color:var(--ink4);line-height:1.4}

/* ---------- prose (article hubs) ---------- */
.ap .prose{font-size:17.5px;line-height:1.72;color:var(--ink2)}
.ap .prose>*+*{margin-top:18px}
.ap .prose h2{font-size:clamp(26px,3.6vw,36px);line-height:1.1;margin-top:46px;color:var(--ink)}
.ap .prose h2:first-child{margin-top:0}
.ap .prose h3{font-size:clamp(19px,2.4vw,23px);line-height:1.2;margin-top:30px;color:var(--ink)}
.ap .prose p{color:var(--ink2)}
.ap .prose a{color:var(--accent-d);text-decoration:none;border-bottom:1px solid var(--accent-ring);transition:color .2s ease,border-color .2s ease}
.ap .prose a:hover{color:var(--ink);border-color:var(--ink)}
.ap .prose strong{color:var(--ink);font-weight:600}
.ap .prose ul,.ap .prose ol{margin:6px 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.ap .prose ul li{position:relative;padding-left:30px}
.ap .prose ul li::before{content:"";position:absolute;left:6px;top:11px;width:8px;height:8px;border-radius:2px;background:var(--accent);transform:rotate(45deg)}
.ap .prose ol{counter-reset:n}
.ap .prose ol li{position:relative;padding-left:46px;counter-increment:n;min-height:30px}
.ap .prose ol li::before{content:counter(n);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:999px;background:var(--accent-soft);color:var(--accent-d);font-family:var(--mono);font-weight:600;font-size:13px;display:grid;place-items:center}
.ap .lede{font-family:var(--serif);font-size:clamp(20px,2.8vw,26px);line-height:1.45;color:var(--ink);font-weight:500;text-wrap:pretty}

/* snippet definition box */
.ap .defbox{background:linear-gradient(165deg,#fff,#f6f1e6);border:1px solid var(--accent-ring);border-radius:18px;padding:clamp(22px,3vw,30px);box-shadow:0 14px 36px rgba(176,125,24,.06)}
.ap.theme-violet .defbox{background:linear-gradient(165deg,#fff,#f3eefb);box-shadow:0 14px 36px rgba(90,60,240,.06)}
.ap .defbox .eyebrow{margin-bottom:10px}
.ap .defbox p{font-family:var(--serif);font-size:clamp(19px,2.6vw,25px);line-height:1.4;color:var(--ink)}

/* callout */
.ap .callout{background:var(--accent-soft);border:1px solid var(--accent-ring);border-radius:16px;padding:22px 24px}
.ap .callout .eyebrow{margin-bottom:8px}
.ap .callout p{font-size:15.5px;line-height:1.6;color:var(--ink2)}

/* pull quote */
.ap .pull{border-left:3px solid var(--accent);padding:4px 0 4px 22px;font-family:var(--serif);font-style:italic;font-size:clamp(20px,3vw,27px);line-height:1.4;color:var(--ink)}
.ap .pull cite{display:block;margin-top:10px;font-family:var(--mono);font-style:normal;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink4)}

/* two-column compare */
.ap .cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.ap .cmp__neg{background:#f4efe6;border:1px solid var(--line2);border-radius:20px;padding:28px}
.ap .cmp__pos{position:relative;overflow:hidden;border-radius:20px;padding:28px;background:linear-gradient(165deg,#1d1338,#130c28);border:1px solid var(--accent-ring);box-shadow:0 16px 40px rgba(20,10,46,.3)}
.ap .cmp__tag{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ap .cmp__neg .cmp__tag{color:#9a8f7e}
.ap .cmp__pos .cmp__tag{color:#cdbff0}
.ap .cmp__tag i{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-style:normal}
.ap .cmp__neg .cmp__tag i{background:rgba(120,110,95,.16);color:#8a8071}
.ap .cmp__pos .cmp__tag i{background:var(--accent-soft);color:#fff}
.ap .cmp blockquote{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.4;margin:16px 0 0}
.ap .cmp__neg blockquote{color:#4a4439}
.ap .cmp__pos blockquote{color:#fbf8f1}
.ap .cmp__neg p{font-size:14.5px;line-height:1.6;color:#6b6459;margin-top:14px}
.ap .cmp__pos p{font-size:14.5px;line-height:1.6;color:#cabfe6;margin-top:14px}

/* comparison table */
.ap .tbl{width:100%;border-collapse:collapse;font-size:15px;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ap .tbl th,.ap .tbl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
.ap .tbl thead th{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink4);background:#faf6ee}
.ap .tbl tbody tr:last-child td{border-bottom:none}
.ap .tbl td:first-child{font-weight:600;color:var(--ink)}
.ap .tblwrap{overflow-x:auto}

/* ---------- FAQ ---------- */
.ap .faqs{display:flex;flex-direction:column;gap:12px}
.ap .faq-item{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ap .faq-q{cursor:pointer;width:100%;text-align:left;background:transparent;border:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font-family:var(--sans);font-size:clamp(16px,2vw,18px);font-weight:600;color:var(--ink)}
.ap .faq-plus{flex:none;font-size:22px;color:var(--accent);transition:transform .25s ease}
.ap .faq-a{padding:0 22px 22px;font-size:15.5px;line-height:1.65;color:var(--ink3)}
.ap .faq-a a{color:var(--accent-d);text-decoration:none;border-bottom:1px solid var(--accent-ring)}

/* ---------- index / related ---------- */
.ap .idx{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.ap .idx a{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15.5px;transition:transform .2s ease,border-color .2s ease}
.ap .idx a:hover{transform:translateY(-2px);border-color:var(--accent-ring)}
.ap .idx a .arr{margin-left:auto;color:var(--accent-d);transition:transform .2s ease}
.ap .idx a:hover .arr{transform:translateX(3px)}

/* ---------- soft CTA band ---------- */
.ap .softcta{position:relative;overflow:hidden;border-radius:22px;background:linear-gradient(165deg,#1d1338,#120c28);border:1px solid var(--accent-ring);padding:clamp(28px,4vw,44px);text-align:center}
.ap .softcta__glow{position:absolute;top:-70px;left:50%;transform:translateX(-50%);width:420px;height:260px;border-radius:999px;background:radial-gradient(circle,var(--halo),transparent 66%);filter:blur(46px);pointer-events:none}
.ap .softcta>*{position:relative;z-index:1}
.ap .softcta h2{color:#fbf8f1;font-size:clamp(24px,3.6vw,36px);text-wrap:balance}
.ap .softcta p{color:#cabfe6;margin:14px auto 0;max-width:480px;font-size:16px;line-height:1.6}

/* ---------- final CTA (full night) ---------- */
.ap .finalcta{margin-top:clamp(48px,7vw,86px);position:relative;overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,#2a1850,#160d33 50%,#0c0818)}
.ap.theme-violet .finalcta{background:radial-gradient(120% 100% at 50% 0%,#33205e,#190f38 50%,#0b0716)}
.ap .finalcta__glow{position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:640px;height:440px;border-radius:999px;background:radial-gradient(circle,var(--halo),transparent 66%);filter:blur(56px);animation:ap-glowpulse 12s ease-in-out infinite;pointer-events:none}
.ap .finalcta__in{position:relative;z-index:2;max-width:720px;margin:0 auto;padding:clamp(54px,8vw,100px) clamp(20px,4vw,36px);text-align:center}
.ap .finalcta h2{color:#fbf8f1;font-size:clamp(32px,6vw,60px);line-height:1.03;letter-spacing:-.015em;text-wrap:balance}
.ap .finalcta .lead{color:#ccc3e0;margin:18px auto 0;max-width:500px}
.ap .related{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:34px;padding-top:28px;border-top:1px solid rgba(255,255,255,.09)}
.ap .related span.lbl{font-size:13.5px;color:#8d83ab}
.ap .related a{font-size:14px;color:#c2b9de;text-decoration:none;border-bottom:1px solid rgba(194,185,222,.3);padding-bottom:2px;transition:color .2s ease}
.ap .related a:hover{color:#fff}
.ap .related .dot{color:#5f567e}

/* misc */
.ap .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.ap .stat{text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 16px;box-shadow:0 10px 26px rgba(40,30,70,.05)}
.ap .stat b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(28px,4vw,38px);line-height:1;color:var(--accent-d)}
.ap .stat small{font-size:13px;color:var(--ink3);margin-top:6px;display:block}
.ap .center{text-align:center}
.ap .mt8{margin-top:8px}.ap .mt14{margin-top:14px}.ap .mt20{margin-top:20px}.ap .mt26{margin-top:26px}.ap .mt34{margin-top:34px}
.ap .maxw560{max-width:560px}.ap .maxw620{max-width:620px}.ap .mauto{margin-left:auto;margin-right:auto}

/* === article two-column layout === */
.ap .artwrap{padding-top:clamp(26px,4vw,40px)}
.ap .art{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:clamp(34px,5vw,68px);align-items:start}
.ap .art__main{min-width:0}
.ap .art__main>*{max-width:730px}
.ap .art__main>*+*{margin-top:clamp(30px,4vw,48px)}
.ap .art__aside{position:sticky;top:82px;display:flex;flex-direction:column;gap:16px}
@media(max-width:980px){
  .ap .art{grid-template-columns:1fr;gap:30px}
  .ap .art__aside{position:static;flex-direction:column}
  .ap .art__main>*{max-width:none}
}
.ap .toc{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.ap .toc .eyebrow{margin-bottom:10px}
.ap .toc a{display:block;text-decoration:none;color:var(--ink3);font-size:14px;line-height:1.35;padding:8px 0;border-top:1px solid var(--line);transition:color .2s ease}
.ap .toc a:first-of-type{border-top:none}
.ap .toc a:hover{color:var(--accent-d)}
.ap .asidecta{position:relative;overflow:hidden;background:linear-gradient(165deg,#1d1338,#120c28);border:1px solid var(--accent-ring);border-radius:16px;padding:22px;text-align:center}
.ap .asidecta__glow{position:absolute;top:-50px;left:50%;transform:translateX(-50%);width:200px;height:140px;border-radius:999px;background:radial-gradient(circle,var(--halo),transparent 66%);filter:blur(34px);pointer-events:none}
.ap .asidecta>*{position:relative;z-index:1}
.ap .asidecta h3{color:#fbf8f1;font-size:19px;line-height:1.2}
.ap .asidecta p{color:#cabfe6;font-size:13.5px;line-height:1.55;margin-top:9px}
.ap .asidecta .btn{display:flex;justify-content:center;margin-top:16px;font-size:14.5px;padding:12px 18px;width:100%}
.ap .asidecta small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:#9088a8;margin-top:11px}
.ap .art__meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:22px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink4)}
.ap .art__meta .d{width:4px;height:4px;border-radius:999px;background:var(--ink4);opacity:.55}
.ap .headcta{margin-top:24px}
.ap .art__sec h2[id]{scroll-margin-top:84px}