/* ============================================================
   Lutendo — site stylesheet
   Tokens ported verbatim from _ds/lutendo-design-system (colors,
   typography, spacing). Component classes reproduce the artboard
   band system: full-bleed bands, centred 1200px shell, pills.
   ============================================================ */

/* ---------- Tokens (from _ds/tokens/colors.css) ---------- */
:root{
--purple-950:#160D26;--purple-900:#1F1233;--purple-800:#2E1A47;--purple-700:#3D2462;--purple-600:#54367F;--purple-500:#6B3FA0;--purple-300:#B49CD6;--purple-150:#E3D9F1;--purple-100:#EDE7F6;--purple-50:#F5F1FA;
--orange-600:#C96A08;--orange-500:#E07C0C;--orange-100:#FBE8CC;--orange-50:#FDF4E4;
--red-600:#C93715;--red-500:#E8501F;--red-150:#FBD9CC;--red-100:#FCE5DC;--red-50:#FDF1EC;
--green-600:#12704A;--green-500:#168A4E;--green-100:#DCF0E5;--green-50:#EDF7F1;
--amber-600:#B87310;--amber-100:#FCEFD4;--amber-50:#FDF6E7;
--ink:#1A1523;--gray-700:#4A4556;--gray-500:#6F6A7B;--gray-400:#9691A1;--gray-300:#C7C3CF;--gray-200:#E5E2EA;--gray-100:#F0EEF3;--gray-50:#F7F6F8;--white:#FFFFFF;
--text-heading:var(--ink);--text-body:var(--gray-700);--text-secondary:var(--gray-500);--text-muted:var(--gray-400);--text-inverse:#FFFFFF;
--text-brand:var(--purple-500);--text-success:var(--green-500);--text-danger:var(--red-500);
--surface-page:#FAFAFA;--surface-card:#FFFFFF;--surface-sunken:var(--gray-50);--surface-brand-tint:var(--purple-50);--surface-dark:var(--purple-900);
--surface-success:var(--green-50);--surface-danger:var(--red-50);
--border-default:var(--gray-200);--border-strong:var(--gray-300);--border-brand:var(--purple-300);--border-success:#BFE3CF;--border-danger:#F5C4B2;
--action-primary:var(--purple-800);--action-primary-hover:var(--purple-700);
--focus-ring:var(--purple-300);
--font-ui:'Nunito',ui-rounded,system-ui,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,monospace;
--label-tracking:0.08em;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;background:var(--surface-page);font-family:var(--font-ui);color:var(--text-body);font-size:15px;line-height:1.6}
img{max-width:100%;height:auto}
a{color:var(--purple-500);text-decoration:none}
a:hover{color:var(--purple-700)}
h1,h2,h3{margin:0;color:var(--text-heading);font-weight:800;line-height:1.15;letter-spacing:-0.01em;text-wrap:pretty}
p{margin:0;text-wrap:pretty}
summary::-webkit-details-marker{display:none}
input[type=range]{accent-color:var(--purple-800)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Shell & bands ---------- */
.shell{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}
.band{padding:64px 0}
.band--hero{padding:64px 0 56px}
.band--card{background:var(--surface-card);border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default)}
.band--tint{background:var(--surface-brand-tint)}
.band--dark{background:var(--surface-dark);color:var(--purple-150)}
.band--dark h2{color:#fff}
.measure{max-width:68ch}

/* ---------- Type helpers ---------- */
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--purple-500)}
.band--dark .eyebrow{color:var(--purple-300)}
.h-display{font-size:clamp(32px,4.5vw,52px);line-height:1.1}
.h-section{font-size:clamp(26px,3.5vw,38px)}
.h-block{font-size:clamp(24px,3vw,32px)}
.sub{font-size:16.5px;line-height:1.6;color:var(--text-secondary);max-width:640px}
.small{font-size:12.5px;color:var(--text-muted)}
.stack-18{display:flex;flex-direction:column;gap:18px}
.stack-12{display:flex;flex-direction:column;gap:12px}

/* ---------- Buttons & pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:999px;font-family:var(--font-ui);font-size:15px;font-weight:700;white-space:nowrap;cursor:pointer;border:1px solid transparent}
.btn--sm{height:40px;padding:0 20px;font-size:14px}
.btn--primary{background:var(--action-primary);color:#fff}
.btn--primary:hover{background:var(--action-primary-hover);color:#fff}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--purple-300);color:var(--ink)}
.btn--light{background:#fff;color:var(--purple-900)}
.btn--light:hover{background:var(--purple-50);color:var(--purple-900)}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:var(--label-tracking);text-transform:uppercase;border:1px solid var(--border-brand);border-radius:999px;padding:5px 14px;color:var(--purple-500);background:#fff;width:max-content}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,250,250,0.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-default)}
.site-header .shell{height:64px;display:flex;align-items:center;gap:26px}
.wordmark{font-family:var(--font-ui);font-weight:800;font-size:23px;letter-spacing:-0.02em;color:var(--ink);line-height:1}
.wordmark .dot{color:var(--red-500)}
.wordmark--light{color:#fff;font-size:21px}
.main-nav{display:flex;gap:22px;flex:1;flex-wrap:wrap;align-items:center}
.main-nav a,.main-nav summary{font-size:14px;font-weight:600;color:var(--gray-700)}
.main-nav a:hover,.main-nav summary:hover{color:var(--purple-700)}
.main-nav a[aria-current=page],.main-nav .is-active>summary{font-weight:700;color:var(--purple-700)}
.nav-dd{position:relative}
.nav-dd summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:5px}
.nav-dd .dd-caret{font-size:10px}
.nav-dd-panel{position:absolute;top:calc(100% + 10px);left:-12px;background:#fff;border:1px solid var(--border-default);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:2px;min-width:230px;box-shadow:0 8px 24px rgba(26,21,35,0.10)}
.nav-dd-panel a{padding:9px 14px;border-radius:10px}
.nav-dd-panel a:hover{background:var(--purple-50);color:var(--purple-700)}
.nav-dd-panel a[aria-current=page]{background:var(--purple-50);color:var(--purple-700);font-weight:700}
@media (max-width:860px){
  .site-header .shell{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:6px;height:auto;padding-top:10px;padding-bottom:10px}
  .site-header .logo{grid-row:1;grid-column:1}
  .site-header > .shell > .btn{grid-row:1;grid-column:2;height:36px;padding:0 16px;font-size:13px}
  .main-nav{grid-row:2;grid-column:1 / -1;gap:6px 16px}
  .wordmark{font-size:20px}
}

/* ---------- Cards & grids ---------- */
.card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:10px}
.card:hover{border-color:var(--border-brand)}
.card h3{font-size:16px;font-weight:700}
.card p{font-size:14px;line-height:1.6;color:var(--text-secondary)}
.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* ---------- Pain/Fix cards ---------- */
.painfix .pain-label{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--red-500)}
.painfix .pain-body{font-size:16px;font-weight:700;color:var(--text-heading);line-height:1.35}
.painfix .rule{height:1px;background:var(--gray-100)}
.painfix .fix{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.6;color:var(--text-secondary)}
.check-chip{flex:none;width:22px;height:22px;border-radius:999px;background:var(--green-100);color:var(--green-600);display:inline-flex;align-items:center;justify-content:center;font-size:12px;margin-top:1px}

/* ---------- Steps rail ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px 0}
.step{display:flex;flex-direction:column;gap:12px;padding-right:20px}
.step .rail{display:flex;align-items:center}
.step .dot{flex:none;width:34px;height:34px;border-radius:999px;background:var(--purple-800);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.step .dot--done{background:var(--green-500)}
.step .line{flex:1;height:2px;background:var(--gray-200)}
.step:last-child .line{background:transparent}
.step h3{font-size:15.5px}
.step p{font-size:13.5px;line-height:1.6;color:var(--text-secondary)}
.step .quiet{font-size:12px;color:var(--text-muted)}

/* ---------- Stat strips ---------- */
.statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.stat{display:flex;flex-direction:column;gap:6px;border-left:2px solid var(--purple-150);padding-left:18px}
.stat .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:32px;font-weight:700;color:var(--text-heading)}
.stat .l{font-size:13px;color:var(--text-secondary)}

/* ---------- Research (dark band) ---------- */
.research-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.research-card{border:1px solid rgba(255,255,255,0.14);border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:8px}
.research-card .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:44px;font-weight:700;color:#fff}
.research-card .l{font-size:14px;line-height:1.6;color:var(--purple-150)}
.research-card .src{font-size:12px;color:var(--purple-300)}
.research-card .src a{color:#fff;font-weight:700}

/* ---------- Pricing ---------- */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;align-items:stretch}
.price-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:12px;position:relative}
.price-card--popular{border:2px solid var(--purple-800)}
.price-card--dashed{border:1px dashed var(--border-strong)}
.price-card .badge{position:absolute;top:-12px;left:24px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--label-tracking);text-transform:uppercase;background:var(--purple-800);color:#fff;border-radius:999px;padding:4px 12px}
.price-card .tier{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--text-muted)}
.price-card .amount{display:flex;align-items:baseline;gap:8px}
.price-card .amount .n{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:36px;font-weight:700;color:var(--text-heading)}
.price-card .amount .for{font-size:13.5px;color:var(--text-secondary)}
.price-card .per{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--green-600);font-weight:700}
.price-card .body{font-size:14px;line-height:1.6;color:var(--text-secondary)}
.price-card .cta-row{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.price-card .feat{font-size:13px;color:var(--text-secondary);display:flex;gap:8px}
.price-card .feat .tick{color:var(--green-500)}

/* ---------- CTA panel (brand tint) ---------- */
.cta-panel{max-width:560px;margin:0 auto;background:var(--surface-brand-tint);border:1px solid var(--border-brand);border-radius:20px;padding:clamp(28px,5vw,48px);display:flex;flex-direction:column;gap:18px;text-align:center;align-items:center}
.cta-panel h2{font-size:clamp(28px,4vw,40px);line-height:1.12}
.cta-panel p{font-size:15px;line-height:1.6;color:var(--text-secondary)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--surface-card);border:1px solid var(--border-default);border-radius:12px;padding:0 20px}
.faq summary{cursor:pointer;padding:18px 0;font-size:15.5px;font-weight:700;color:var(--text-heading)}
.faq p{margin:0;padding:0 0 18px;font-size:14.5px;line-height:1.65;color:var(--text-secondary)}

/* ---------- Widget frames ---------- */
.widget-band .shell{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;align-items:start;padding-top:64px;padding-bottom:64px}
.widget-copy{display:flex;flex-direction:column;gap:14px}
.widget-copy p{font-size:15px;line-height:1.6;color:var(--text-secondary)}
.widget-mock{background:var(--surface-page);border:1px solid var(--border-default);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px}
.widget-mock .mock-cap{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--text-muted)}
.metric-chip{border:1px solid var(--border-default);border-radius:12px;padding:12px 18px;background:var(--surface-page);display:flex;flex-direction:column;gap:2px}
.metric-chip .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--text-muted)}
.metric-chip .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;color:var(--text-heading)}
.metric-chip .v--green{color:var(--green-600)}
.range-label{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--text-muted)}
.range-label .val{font-variant-numeric:tabular-nums;color:var(--text-heading)}
.illu-flag{font-size:12px;color:var(--text-muted)}
.stars{color:var(--orange-500);letter-spacing:1px}

/* local pack rows */
.pack-row{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border-default);border-radius:12px;padding:14px 18px;transition:transform .35s ease,background .35s ease,border-color .35s ease}
.pack-row--you{background:var(--purple-50);border-color:var(--purple-300)}
.pack-row .pos{flex:none;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;color:var(--text-muted);width:18px}
.pack-row .nm{font-size:14.5px;font-weight:700;color:var(--text-heading)}
.pack-row .meta{display:flex;align-items:center;gap:6px;font-size:12.5px}
.you-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;background:var(--purple-800);color:#fff;border-radius:999px;padding:3px 10px;margin-left:auto}

/* review quote cards (ugcProof + mock listings) */
.ugc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.ugc-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px}
.ugc-card .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ugc-card .cat{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;background:var(--purple-50);color:var(--purple-700);border-radius:999px;padding:3px 10px}
.ugc-card .when{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
.ugc-card .ttl{font-size:15px;font-weight:700;color:var(--text-heading)}
.ugc-card .txt{font-size:13.5px;line-height:1.6;color:var(--text-secondary)}
.verified-badge{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;background:var(--green-100);color:var(--green-600);border-radius:999px;padding:2px 8px}
.mini-review{border:1px solid var(--border-default);background:#fff;border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:4px;transition:opacity .3s ease,transform .3s ease}
.mini-review .who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:700;color:var(--text-heading)}
.mini-review .txt{font-size:13px;line-height:1.5;color:var(--text-secondary)}

/* segment tabs */
.seg-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--border-default)}
.seg-tabs button{appearance:none;cursor:pointer;background:transparent;border:none;border-bottom:3px solid transparent;padding:12px 4px;margin-right:20px;font-family:var(--font-ui);font-size:15.5px;font-weight:600;color:var(--text-secondary)}
.seg-tabs button[aria-selected=true]{border-bottom-color:var(--purple-800);font-weight:800;color:var(--text-heading)}

/* before/after */
.ba{position:relative;border:1px solid var(--border-default);border-radius:16px;background:var(--surface-card);overflow:hidden;touch-action:none;cursor:ew-resize}
.ba .pane{padding:clamp(16px,4vw,40px)}
.ba .pane-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px;max-width:900px;margin:0 auto}
.ba .after{position:absolute;inset:0;background:var(--surface-card)}
.ba .divider{position:absolute;top:0;bottom:0;width:2px;background:var(--purple-800);pointer-events:none}
.ba .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:999px;background:var(--purple-800);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 8px rgba(31,18,51,0.3)}
.ba .tag{position:absolute;top:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:var(--label-tracking);text-transform:uppercase;border-radius:999px;padding:4px 10px;pointer-events:none}
.ba .tag--before{left:12px;background:var(--gray-100);color:var(--gray-500)}
.ba .tag--after{right:12px;background:var(--purple-800);color:#fff}

/* toggle switch */
.switch-btn{appearance:none;cursor:pointer;display:flex;align-items:center;gap:12px;background:transparent;border:none;padding:0;font-family:var(--font-ui)}
.switch-track{width:52px;height:30px;border-radius:999px;background:var(--gray-300);position:relative;transition:background .25s ease;flex:none}
.switch-btn[aria-checked=true] .switch-track{background:var(--purple-800)}
.switch-knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:999px;background:#fff;box-shadow:0 1px 4px rgba(26,21,35,0.3);transition:left .25s ease}
.switch-btn[aria-checked=true] .switch-knob{left:25px}
.switch-label{font-size:14.5px;font-weight:700;color:var(--text-heading)}

/* payout feed */
.feed-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px}
.feed-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--gray-100);border-radius:12px;padding:11px 16px;transition:opacity .4s ease}
.feed-row .who{font-size:13.5px;font-weight:700;color:var(--text-heading)}
.feed-row .what{font-size:12px;color:var(--text-muted)}
.feed-row .amt{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:14px;font-weight:700}
.live-dot{width:8px;height:8px;border-radius:999px;background:var(--green-500);display:inline-block}

/* dark teaser panel */
.dark-panel{background:var(--surface-dark);border-radius:20px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;align-items:center;color:var(--purple-150)}
.dark-panel h2{color:#fff}
.dark-panel p{color:var(--purple-150)}
.dark-row{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:12px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px}
.dark-row .amt{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:14px;font-weight:700;color:#fff}
.dark-row .amt--green{color:#7EE2AE}
.dark-row .amt--orange{color:var(--orange-500)}

/* demand form */
.demand-form{background:var(--surface-card);border:1px dashed var(--border-strong);border-radius:20px;padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:18px}
.demand-form .dots{display:flex;gap:8px}
.demand-form .dots span{width:8px;height:8px;border-radius:999px;background:var(--gray-200)}
.demand-form .dots span.on{background:var(--purple-800)}
.chip-grid{display:flex;gap:8px;flex-wrap:wrap}
.chip-grid button{appearance:none;cursor:pointer;font-family:var(--font-mono);font-size:12px;letter-spacing:0.04em;border:1px solid var(--border-default);border-radius:999px;padding:9px 16px;color:var(--text-secondary);background:#fff}
.chip-grid button:hover{border-color:var(--border-brand);color:var(--purple-700)}
.chip-grid button[aria-pressed=true]{background:var(--purple-800);border-color:var(--purple-800);color:#fff}
.input-pill{height:48px;border:1px solid var(--border-strong);border-radius:999px;padding:0 20px;font-family:var(--font-ui);font-size:14.5px;background:#fff;color:var(--ink);width:100%}
.form-note{font-size:12.5px;color:var(--text-muted)}
.consent{display:flex;gap:10px;align-items:flex-start;text-align:left;font-size:13.5px;color:var(--text-secondary)}
.consent input{margin-top:3px}
.success-box{background:var(--surface-success);border:1px solid var(--border-success);border-radius:12px;padding:14px 20px;font-size:14.5px;font-weight:700;color:var(--green-600)}

/* breadcrumb */
.crumbs{font-size:12.5px;color:var(--text-muted);display:flex;gap:8px;flex-wrap:wrap;padding:16px 0 0}
.crumbs a{color:var(--text-secondary)}

/* insight cards (blog hub) */
.insight-card{display:flex;flex-direction:column;gap:12px;background:var(--surface-card);border:1px solid var(--border-default);border-radius:16px;padding:26px;color:inherit}
.insight-card:hover{border-color:var(--border-brand);color:inherit}
.insight-card .stat{border:none;padding:0;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:30px;font-weight:700;color:var(--purple-700)}
.insight-card .ttl{font-size:16px;font-weight:700;color:var(--text-heading);line-height:1.35}
.insight-card .tsr{font-size:13.5px;line-height:1.6;color:var(--text-secondary)}
.insight-card .go{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--purple-500)}

/* article */
.article{max-width:760px}
.article h1{font-size:clamp(28px,4vw,42px);line-height:1.12}
.article h2{font-size:clamp(21px,2.6vw,26px);margin-top:36px}
.article p{margin:16px 0;font-size:15.5px;line-height:1.75;color:var(--text-body);max-width:68ch}
.article .lede{font-size:17px;font-weight:600;color:var(--text-heading)}
.article .statblock{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;background:var(--surface-dark);border-radius:16px;padding:26px;margin:28px 0}
.article .statblock .v{font-family:var(--font-mono);font-size:30px;font-weight:700;color:#fff}
.article .statblock .l{font-size:13px;color:var(--purple-150)}
.article .source{font-size:12.5px;color:var(--text-muted)}
.article .source a{font-weight:600}

/* legal */
.legal-main{max-width:820px;margin:0 auto;padding:72px 24px;display:flex;flex-direction:column;gap:16px}
.legal-placeholder{border:1px dashed var(--border-strong);border-radius:16px;padding:40px;text-align:center;color:var(--text-muted);font-size:14.5px;line-height:1.6}
.legal-body p{margin:12px 0;max-width:68ch;line-height:1.7}
.legal-body h2{font-size:20px;margin-top:28px}

/* footer */
.site-footer{background:var(--purple-950);color:var(--purple-150);margin-top:0}
.site-footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px;padding:56px 0 32px}
.site-footer .col{display:flex;flex-direction:column;gap:10px}
.site-footer .head{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--purple-300)}
.site-footer a{font-size:13.5px;color:var(--purple-150)}
.site-footer a:hover{color:#fff}
.site-footer .tag{margin:0;font-size:13.5px;line-height:1.6;color:var(--purple-300);max-width:280px}
.site-footer .bottom{border-top:1px solid rgba(255,255,255,0.12)}
.site-footer .bottom .shell{padding-top:18px;padding-bottom:18px;font-size:12.5px;color:var(--purple-300);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* two-door hero */
.door{display:flex;flex-direction:column;gap:14px;background:var(--surface-card);border:1px solid var(--border-default);border-radius:16px;padding:28px;color:inherit}
.door:hover{border-color:var(--border-brand);color:inherit}
.door--tint{background:var(--surface-brand-tint);border-color:var(--border-brand)}
.door--tint:hover{border-color:var(--purple-500)}
.door .k{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--text-muted)}
.door--tint .k{color:var(--purple-500)}
.door .t{font-size:24px;font-weight:800;color:var(--text-heading);line-height:1.25}
.door .d{font-size:14.5px;line-height:1.6;color:var(--text-secondary)}
.door .cta{margin-top:auto;align-self:flex-start}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}