/* =========================================================================
tuwaijri.css — Tuwaijri.co shared stylesheet
SINGLE SOURCE OF BRAND TRUTH (V5 — subtle circuit)
Extracted and merged from the canonical V5 reference files:
./brand-design/tuwaijri-components-v5-subtle-circuit.html
./brand-design/tuwaijri-patterns-v5-subtle-circuit.html
Every production page links THIS file and composes the documented
component classes below. Do not restyle inline and do not redeclare
tokens per page. To bump the brand (V5 → V6): edit the :root tokens
and the affected component blocks HERE, once.
FONTS: pages must load these in (self-host later for speed):
---- Merge decisions (where the two reference files differed) ----
1. .display-1/2/3 use the PAGE sizes (64/48/36) from patterns — those
are the real hero/section sizes. (Components used smaller demo sizes.)
2. .stat-card default = light card chrome (components). Dark-surface
stat cards come from `.surface-dark .stat-card` (patterns).
3. Pills: both systems kept — full .pill-a/.pill-b/.pill-c/.pill-d
(components, for choosing) AND the simple .pill / .pill.blue
(patterns, the locked-in choice = Variant A). Prefer .pill in pages.
========================================================================= */
/* ============================ TOKENS ============================ */
:root{
/* brand */
--teal:#00dcc8; --sky:#00b4ff; --white:#ffffff;
--navy-deep:#001428; --blue:#0050ff; --navy:#00143c;
/* derived greys */
--ink-700:#2A3142; --ink-500:#5C6478; --ink-300:#9CA3B5;
--line:#E5E9F2; --surface-soft:#F6F8FC;
/* status */
--danger:#D14343; --success:#0E8A6F;
/* the teal that passes contrast on white (used for text) */
--teal-ink:#007368;
/* layout */
--pad:6px;
--container:1120px; --container-narrow:760px;
/* fonts */
--font-display:'Space Grotesk',sans-serif;
--font-body:'Inter',system-ui,sans-serif;
--font-mono:'JetBrains Mono',monospace;
/* logo wordmark ONLY — Fraunces serif. This is the single sanctioned use
of a serif in V5; it is forbidden for headings/body. See .topnav-brand
/ .foot-brand. Pages must also load Fraunces in . */
--font-logo:'Fraunces','Playfair Display',Georgia,serif;
}
/* ============================ BASE ============================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
font-family:var(--font-body);
color:var(--navy-deep);
background:var(--white);
-webkit-font-smoothing:antialiased;
line-height:1.55;
font-size:17px;
}
img{max-width:100%;display:block}
.wrap{max-width:var(--container);margin:0 auto;padding:0 32px}
.wrap-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 32px}
section.bsection{padding:96px 0}
/* surfaces */
.surface-dark{background:var(--navy-deep);color:var(--white)}
.surface-soft{background:var(--surface-soft)}
/* ============================ TYPE ============================ */
.display-1{font-family:var(--font-display);font-weight:700;font-size:64px;line-height:1.05;letter-spacing:-0.02em;color:var(--navy-deep);margin:0 0 28px;max-width:18ch}
.display-2{font-family:var(--font-display);font-weight:600;font-size:48px;line-height:1.1;letter-spacing:-0.02em;color:var(--navy-deep);margin:0 0 20px;max-width:22ch}
.display-3{font-family:var(--font-display);font-weight:600;font-size:36px;line-height:1.15;letter-spacing:-0.01em;color:var(--navy-deep);margin:0 0 16px;max-width:24ch}
.surface-dark .display-1,.surface-dark .display-2,.surface-dark .display-3{color:var(--white)}
h2,.h2{font-family:var(--font-display);font-weight:600;font-size:28px;line-height:1.25;letter-spacing:-0.01em;color:var(--navy-deep);margin:0 0 16px}
h3,.h3{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.3;color:var(--navy-deep);margin:0 0 12px}
.surface-dark h2,.surface-dark h3{color:var(--white)}
p{margin:0 0 20px;font-size:17px;color:var(--ink-700);line-height:1.65;max-width:62ch}
.lede{font-size:20px;color:var(--ink-500);line-height:1.6;max-width:60ch;margin:0 0 36px}
.surface-dark p{color:rgba(255,255,255,0.72)}
.surface-dark .lede{color:rgba(255,255,255,0.78)}
.eyebrow{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue);margin:0 0 24px;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 2px rgba(0,80,255,0.15)}
.eyebrow::after{content:"";width:32px;height:1px;background:var(--blue);opacity:0.4}
.surface-dark .eyebrow{color:var(--teal)}
.surface-dark .eyebrow::before{background:var(--teal);box-shadow:0 0 0 2px rgba(0,220,200,0.18)}
.surface-dark .eyebrow::after{background:var(--teal)}
.caption{font-size:13px;color:var(--ink-500);line-height:1.5}
a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(0,80,255,0.4)}
.surface-dark a:not(.btn){color:var(--teal)}
/* ============================ BUTTONS ============================ */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:15px;padding:14px 22px;border-radius:6px;text-decoration:none;border:1px solid transparent;cursor:pointer;line-height:1;position:relative;overflow:hidden;transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .2s ease}
.btn-primary{background:var(--blue);color:var(--white);border-color:var(--blue)}
.btn-primary:hover{background:var(--white);color:var(--blue);border-color:var(--blue);transform:translateY(-2px)}
.btn-secondary{background:transparent;color:var(--navy-deep);border-color:#C9D0DD}
.btn-secondary:hover{background:var(--navy-deep);color:var(--white);border-color:var(--navy-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--blue);border-color:transparent;padding:14px 8px}
.btn-ghost .arrow{display:inline-block;transition:transform .25s ease}
.btn-ghost:hover .arrow{transform:translateX(4px)}
.btn .ripple{position:absolute;border-radius:50%;background:rgba(0,80,255,0.25);transform:scale(0);pointer-events:none}
.surface-dark .btn-secondary{color:var(--white);border-color:rgba(255,255,255,0.2)}
.surface-dark .btn-secondary:hover{background:var(--white);color:var(--navy-deep);border-color:var(--white)}
.surface-dark .btn-primary:hover{background:var(--teal);color:var(--navy-deep);border-color:var(--teal)}
.demo-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* ============================ TOP NAV ============================ */
.topnav{padding:18px 0;border-bottom:1px solid var(--line);background:rgba(255,255,255,0.92);backdrop-filter:blur(16px);position:sticky;top:0;z-index:60;transition:padding .25s ease,box-shadow .25s ease}
.topnav.is-scrolled{padding:12px 0;box-shadow:0 1px 12px -4px rgba(0,20,60,0.06)}
.topnav-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.topnav-brand{font-family:var(--font-logo);font-weight:600;font-size:21px;color:var(--navy-deep);text-decoration:none;letter-spacing:-0.01em}
.topnav-brand span{color:var(--blue)}
.topnav-links{display:flex;gap:28px}
.topnav-links a{color:var(--ink-700);text-decoration:none;font-size:14px;font-weight:500;position:relative;transition:color .2s ease}
.topnav-links a:hover{color:var(--blue)}
.topnav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left center;transition:transform .25s ease}
.topnav-links a:hover::after{transform:scaleX(1)}
.topnav .btn{padding:10px 18px;font-size:14px}
/* ============================ HERO ============================ */
.hero{padding:96px 0 88px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(0,80,255,0.04),transparent 70%);pointer-events:none;z-index:0}
.hero > .wrap{position:relative;z-index:1}
.hero-headline-wrap{overflow:hidden}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* ============================ PILLS ============================ */
/* Locked-in choice (Variant A) — use this in pages */
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:99px;border:1px solid rgba(0,220,200,0.25);background:rgba(0,220,200,0.12);color:var(--teal-ink);font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:12px;transition:all .25s ease;cursor:pointer}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.pill:hover{background:var(--teal-ink);color:var(--white);border-color:var(--teal-ink);transform:translateY(-2px)}
.pill.blue{background:rgba(0,80,255,0.08);color:var(--blue);border-color:rgba(0,80,255,0.18)}
.pill.blue:hover{background:var(--blue);color:var(--white);border-color:var(--blue)}
.surface-dark .pill{background:rgba(0,220,200,0.12);color:var(--teal);border-color:rgba(0,220,200,0.25)}
.surface-dark .pill:hover{background:var(--teal);color:var(--navy-deep);border-color:var(--teal)}
/* Variant gallery (A–D) — kept for reference / alternate use */
.pill-a{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:99px;border:1px solid transparent;font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;transition:all .25s ease}
.pill-a .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.pill-a.is-blue{background:rgba(0,80,255,0.08);color:var(--blue);border-color:rgba(0,80,255,0.18)}
.pill-a.is-teal{background:rgba(0,220,200,0.12);color:var(--teal-ink);border-color:rgba(0,220,200,0.25)}
.pill-a.is-outline{background:transparent;color:var(--ink-500);border-color:var(--line)}
.pill-a:hover{transform:translateY(-2px)}
.pill-a.is-blue:hover{background:var(--blue);color:var(--white);border-color:var(--blue)}
.pill-a.is-teal:hover{background:var(--teal-ink);color:var(--white);border-color:var(--teal-ink)}
.pill-a.is-outline:hover{background:var(--navy-deep);color:var(--white);border-color:var(--navy-deep)}
.pill-b{display:inline-flex;align-items:center;padding:7px 22px 7px 14px;font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);transition:transform .2s ease,background .25s ease,color .25s ease;position:relative}
.pill-b.is-blue{background:rgba(0,80,255,0.1);color:var(--blue)}
.pill-b.is-teal{background:rgba(0,220,200,0.14);color:var(--teal-ink)}
.pill-b.is-outline{background:var(--surface-soft);color:var(--ink-500)}
.pill-b:hover{transform:translateX(3px)}
.pill-b.is-blue:hover{background:var(--blue);color:var(--white)}
.pill-b.is-teal:hover{background:var(--teal-ink);color:var(--white)}
.pill-b.is-outline:hover{background:var(--navy-deep);color:var(--white)}
.pill-c{display:inline-flex;align-items:stretch;border-radius:4px;overflow:hidden;cursor:pointer;font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;border:1px solid currentColor;transition:transform .2s ease,box-shadow .2s ease}
.pill-c .tag{font-family:var(--font-mono);font-size:11px;font-weight:600;padding:5px 9px;background:currentColor;display:flex;align-items:center}
.pill-c .tag span{color:var(--white);letter-spacing:0}
.pill-c .text{padding:5px 12px;color:currentColor;display:flex;align-items:center}
.pill-c.is-blue{color:var(--blue)}
.pill-c.is-teal{color:var(--teal-ink)}
.pill-c.is-outline{color:var(--ink-500)}
.pill-c:hover{transform:translateY(-2px);box-shadow:0 8px 16px -8px rgba(0,20,60,0.2)}
.pill-d{display:inline-flex;align-items:center;gap:8px;padding:2px 0 6px;position:relative;font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;color:var(--blue);transition:color .25s ease,padding .25s ease}
.pill-d .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.pill-d::after{content:"";position:absolute;left:14px;right:0;bottom:0;height:1px;background:currentColor;opacity:0.5;transition:opacity .25s ease,right .3s ease}
.pill-d.is-teal{color:var(--teal-ink)}
.pill-d.is-outline{color:var(--ink-500)}
.pill-d:hover{padding-right:8px}
.pill-d:hover::after{opacity:1;right:-4px}
/* ============================ TAGS / CATEGORIES ============================ */
.tag-list{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;font-family:var(--font-display);font-size:12px;font-weight:500;background:var(--surface-soft);color:var(--ink-700);text-decoration:none;border:1px solid var(--line);transition:all .25s ease}
.tag:hover{background:var(--blue);color:var(--white);border-color:var(--blue);transform:translateY(-2px)}
.tag.is-active{background:var(--navy-deep);color:var(--white);border-color:var(--navy-deep)}
.tag .count{font-family:var(--font-mono);font-size:11px}
.cat-list{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.cat-list a{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;color:var(--ink-700);text-decoration:none;font-size:14px;border-left:2px solid transparent;margin-left:-1px;font-family:var(--font-display);font-weight:500;transition:all .2s ease}
.cat-list a:hover{color:var(--navy-deep);background:var(--surface-soft);padding-left:20px}
.cat-list a.is-active{color:var(--blue);border-left-color:var(--blue);font-weight:600}
.cat-list .count{font-family:var(--font-mono);font-size:12px;color:var(--ink-300)}
/* ============================ CALLOUTS ============================ */
.callout{position:relative;margin:36px 0 24px;padding:30px 28px 24px;border:1px solid var(--line);border-radius:8px;background:var(--white);transition:transform .3s ease,box-shadow .3s ease}
.callout > .pad{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--white);border:1.5px solid var(--blue);pointer-events:none;transition:background .3s ease}
.callout > .pad.tl{top:-5px;left:-5px}.callout > .pad.tr{top:-5px;right:-5px}.callout > .pad.bl{bottom:-5px;left:-5px}
.callout > .pad.br{bottom:-5px;right:-5px;background:var(--blue)}
/* warn variant accepts either .callout-warn or .callout.warn */
.callout-warn,.callout.warn{background:#F2FDFC;border-color:rgba(0,220,200,0.3)}
.callout-warn > .pad,.callout.warn > .pad{border-color:var(--teal-ink)}
.callout-warn > .pad.br,.callout.warn > .pad.br{background:var(--teal-ink)}
.callout .callout-label{position:absolute;top:-12px;left:24px;background:var(--white);border:1px solid currentColor;padding:3px 12px;border-radius:99px;font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:8px;z-index:1;margin:0;line-height:1.4}
.callout .callout-label::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.callout-warn .callout-label,.callout.warn .callout-label{color:var(--teal-ink);background:#F2FDFC}
.callout:hover{transform:translateY(-3px);box-shadow:0 16px 32px -16px rgba(0,20,60,0.12)}
.callout:hover > .pad{background:var(--blue)}
.callout-warn:hover > .pad,.callout.warn:hover > .pad{background:var(--teal-ink)}
.callout p{margin:0;font-size:16px;color:var(--ink-700);max-width:none}
/* ============================ FEATURE CARDS ============================ */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{padding:32px;background:var(--white);border:1px solid var(--line);border-radius:10px;cursor:pointer;position:relative;transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease}
.feature-card .br-tl,.feature-card .br-tr,.feature-card .br-bl,.feature-card .br-br{position:absolute;width:14px;height:14px;pointer-events:none;transition:border-color .3s ease}
.feature-card .br-tl{top:6px;left:6px;border-top:1px solid var(--blue);border-left:1px solid var(--blue)}
.feature-card .br-tr{top:6px;right:6px;border-top:1px solid var(--blue);border-right:1px solid var(--blue)}
.feature-card .br-bl{bottom:6px;left:6px;border-bottom:1px solid var(--blue);border-left:1px solid var(--blue)}
.feature-card .br-br{bottom:6px;right:6px;border-bottom:1px solid var(--blue);border-right:1px solid var(--blue)}
.feature-card .br-tl::after,.feature-card .br-tr::after,.feature-card .br-bl::after,.feature-card .br-br::after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:var(--blue);transition:background .3s ease,box-shadow .3s ease}
.feature-card .br-tl::after{top:-2.5px;left:-2.5px}.feature-card .br-tr::after{top:-2.5px;right:-2.5px}
.feature-card .br-bl::after{bottom:-2.5px;left:-2.5px}.feature-card .br-br::after{bottom:-2.5px;right:-2.5px}
.feature-card:hover{background:var(--navy-deep);color:var(--white);border-color:var(--navy-deep);transform:translateY(-4px)}
.feature-card:hover h3,.feature-card:hover .feature-num{color:var(--white)}
.feature-card:hover p{color:rgba(255,255,255,0.7)}
.feature-card:hover .br-tl,.feature-card:hover .br-tr,.feature-card:hover .br-bl,.feature-card:hover .br-br{border-color:var(--teal)}
.feature-card:hover .br-tl::after,.feature-card:hover .br-tr::after,.feature-card:hover .br-bl::after,.feature-card:hover .br-br::after{background:var(--teal);box-shadow:0 0 8px var(--teal)}
.feature-card .feature-num{font-family:var(--font-mono);font-size:12px;color:var(--blue);letter-spacing:0.08em;margin-bottom:20px;transition:color .3s ease}
.feature-card h3{font-size:20px;margin-bottom:10px;transition:color .3s ease}
.feature-card p{font-size:15px;margin:0;color:var(--ink-500);max-width:none;transition:color .3s ease}
/* ============================ DO / DON'T ============================ */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.col-card{padding:32px;border-radius:10px;transition:background .3s ease,color .3s ease,transform .3s ease;position:relative;cursor:pointer}
.col-card::before,.col-card::after{content:"";position:absolute;width:var(--pad);height:var(--pad);border-radius:50%;background:currentColor;opacity:0.5}
.col-card::before{top:-3px;left:-3px}.col-card::after{bottom:-3px;right:-3px}
.col-card.do{background:rgba(0,220,200,0.08);border:1px solid rgba(0,220,200,0.25);color:var(--teal-ink)}
.col-card.do:hover{background:var(--teal-ink);color:var(--white);transform:translateY(-3px)}
.col-card.do:hover h3,.col-card.do:hover .col-label{color:var(--white)}
.col-card.do:hover p{color:rgba(255,255,255,0.85)}
.col-card.dont{background:#F6F8FC;border:1px solid var(--line);color:var(--ink-500)}
.col-card.dont:hover{background:var(--navy-deep);color:var(--white);transform:translateY(-3px)}
.col-card.dont:hover h3,.col-card.dont:hover .col-label{color:var(--white)}
.col-card.dont:hover p{color:rgba(255,255,255,0.7)}
.col-card .col-label{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;transition:color .3s ease}
.col-card.do .col-label{color:var(--teal-ink)}.col-card.dont .col-label{color:var(--ink-500)}
.col-card h3{font-size:19px;color:var(--navy-deep);transition:color .3s ease}
.col-card p{font-size:15px;margin:0;color:var(--ink-700);max-width:none;transition:color .3s ease}
/* ============================ STATS ============================ */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* default = light card chrome */
.stat-card{padding:28px 24px;border:1px solid var(--line);border-radius:8px;background:var(--white);position:relative;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.stat-card::before{content:"";position:absolute;top:-1px;left:24px;width:32px;height:2px;background:var(--blue)}
.stat-card .stat-num{font-family:var(--font-display);font-weight:700;font-size:48px;line-height:1;letter-spacing:-0.02em;font-feature-settings:'tnum';margin-bottom:8px;color:var(--navy-deep)}
.stat-card .stat-num .accent{color:var(--teal-ink)}
.stat-card .stat-num .accent-blue{color:var(--blue)}
.stat-card .stat-label{font-size:14px;line-height:1.55;color:var(--ink-500);margin-bottom:6px}
.stat-card .stat-source{font-family:var(--font-mono);font-size:11px;color:var(--ink-300);letter-spacing:0.04em}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px -16px rgba(0,20,60,0.12);border-color:#C9D0DD}
/* explicit dark accent card on a light surface */
.stat-card.accent-card{background:var(--navy-deep);color:var(--white);border-color:var(--navy-deep)}
.stat-card.accent-card::before{background:var(--teal)}
.stat-card.accent-card .stat-num{color:var(--white)}
.stat-card.accent-card .stat-num .accent{color:var(--teal)}
.stat-card.accent-card .stat-label{color:rgba(255,255,255,0.7)}
.stat-card.accent-card .stat-source{color:rgba(255,255,255,0.45)}
/* stat cards INSIDE a dark surface (e.g. .stat-strip) */
.surface-dark .stat-card{background:rgba(255,255,255,0.02);border-color:rgba(255,255,255,0.1)}
.surface-dark .stat-card::before{background:var(--teal)}
.surface-dark .stat-card .stat-num{color:var(--white)}
.surface-dark .stat-card .stat-num .accent{color:var(--teal)}
.surface-dark .stat-card .stat-num .accent-blue{color:var(--sky)}
.surface-dark .stat-card .stat-label{color:rgba(255,255,255,0.72)}
.surface-dark .stat-card .stat-source{color:rgba(255,255,255,0.4)}
.surface-dark .stat-card:hover{border-color:rgba(0,220,200,0.4);background:rgba(255,255,255,0.04)}
/* stat strip wrapper (dark band) with corner pads */
.stat-strip{padding:88px 0;position:relative}
.stat-strip-inner{position:relative}
.stat-strip-inner::before,.stat-strip-inner::after{content:"";position:absolute;width:var(--pad);height:var(--pad);border-radius:50%;background:var(--teal);z-index:1}
.stat-strip-inner::before{top:-3px;left:-3px}.stat-strip-inner::after{bottom:-3px;right:-3px}
.stat-strip .stats-grid{margin-top:48px}
/* ============================ CHART-STAT ============================ */
.chart-stat{margin:32px 0;padding:28px 28px 24px;border:1px solid var(--line);border-radius:10px;background:var(--white);position:relative}
.chart-stat::before,.chart-stat::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.chart-stat::before{top:-4px;left:-4px;background:var(--white);border:1.5px solid var(--blue)}
.chart-stat::after{bottom:-4px;right:-4px}
.chart-stat .chart-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-500);margin-bottom:8px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.chart-stat .chart-eyebrow .src{color:var(--ink-300);font-size:10px}
.chart-stat .chart-headline{font-family:var(--font-display);font-size:38px;font-weight:700;letter-spacing:-0.02em;color:var(--navy-deep);line-height:1;margin-bottom:6px;font-feature-settings:'tnum'}
.chart-stat .chart-sub{font-size:14px;color:var(--ink-500);font-family:var(--font-body);font-weight:400}
.chart-stat .chart-delta{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--success);margin-top:8px}
/* Variant A: horizontal bars */
.chart-bars-h .rows{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.chart-bars-h .row{display:grid;grid-template-columns:48px 1fr 80px;gap:14px;align-items:center;font-family:var(--font-display);font-size:13px}
.chart-bars-h .row .year{color:var(--ink-500);font-weight:600;font-family:var(--font-mono)}
.chart-bars-h .row .bar{height:18px;background:rgba(0,80,255,0.08);border-radius:3px;position:relative;overflow:hidden}
.chart-bars-h .row .bar-fill{height:100%;background:linear-gradient(to right,var(--blue),var(--sky));border-radius:3px;width:0;transition:width 1.4s cubic-bezier(.22,.61,.36,1)}
.chart-bars-h .row.peak .bar-fill{background:linear-gradient(to right,var(--blue),var(--teal))}
.chart-bars-h .row .value{font-family:var(--font-mono);font-weight:600;color:var(--navy-deep);text-align:right;font-size:13px}
/* Variant B: sparkline */
.chart-sparkline{display:flex;flex-direction:column;gap:8px}
.chart-sparkline .spark-wrap{margin-top:18px;height:80px;position:relative}
.chart-sparkline svg{width:100%;height:100%;overflow:visible}
.chart-sparkline .spark-path{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart-sparkline .spark-area{fill:url(#spark-grad)}
.chart-sparkline .spark-dot{fill:var(--blue);stroke:var(--white);stroke-width:2}
.chart-sparkline .spark-dot-end{fill:var(--teal);stroke:var(--white);stroke-width:2}
.chart-sparkline .spark-labels{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--font-mono);font-size:10px;color:var(--ink-300);letter-spacing:0.04em}
/* Variant C: year cards */
.chart-year-cards .cards{margin-top:18px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.chart-year-cards .yc{padding:14px 12px;border:1px solid var(--line);border-radius:6px;background:var(--white);position:relative;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.chart-year-cards .yc:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 8px 20px -10px rgba(0,80,255,0.2)}
.chart-year-cards .yc .y{font-family:var(--font-mono);font-size:11px;color:var(--ink-500);letter-spacing:0.04em;margin-bottom:6px}
.chart-year-cards .yc .v{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--navy-deep);font-feature-settings:'tnum';margin-bottom:6px;letter-spacing:-0.01em}
.chart-year-cards .yc .delta{font-family:var(--font-display);font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:3px}
.chart-year-cards .yc .delta.up{color:var(--success)}
.chart-year-cards .yc .delta.down{color:var(--danger)}
/* Variant D: vertical bars */
.chart-bars-v .cols{margin-top:24px;display:flex;align-items:flex-end;gap:12px;height:180px;border-bottom:1px solid var(--line);padding-bottom:6px;position:relative}
.chart-bars-v .cols::before{content:"";position:absolute;left:-4px;bottom:-3px;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.chart-bars-v .cols::after{content:"";position:absolute;right:-4px;bottom:-3px;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.chart-bars-v .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.chart-bars-v .col .bar{width:70%;background:linear-gradient(to top,var(--blue),var(--sky));border-radius:4px 4px 0 0;height:0;transition:height 1.4s cubic-bezier(.22,.61,.36,1);position:relative;min-height:2px}
.chart-bars-v .col.peak .bar{background:linear-gradient(to top,var(--blue),var(--teal))}
.chart-bars-v .col .v{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:11px;color:var(--navy-deep);font-weight:600;white-space:nowrap}
.chart-bars-v .labels{margin-top:10px;display:flex;gap:12px}
.chart-bars-v .labels .y{flex:1;text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--ink-500);letter-spacing:0.04em}
/* ============================ STEPS ============================ */
.steps{counter-reset:step;list-style:none;margin:0;padding:0}
.steps li{counter-increment:step;position:relative;padding-left:56px;margin-bottom:24px}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:-2px;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--blue);background:rgba(0,80,255,0.08);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:transform .25s ease,background .25s ease,color .25s ease}
.steps li:hover::before{transform:scale(1.1);background:var(--blue);color:var(--white)}
.steps li h3{font-size:17px;margin:8px 0 4px;font-family:var(--font-body);font-weight:600}
.steps li p{font-size:15px;margin:0;color:var(--ink-500);max-width:none}
/* ============================ TABLE ============================ */
.table-wrap{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--white);position:relative}
.table-wrap::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,var(--blue) 0,var(--blue) 30%,var(--teal) 70%,var(--teal) 100%);z-index:2}
table.t5{width:100%;border-collapse:collapse;font-size:15px}
table.t5 thead th{text-align:left;padding:14px 18px;font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-500);background:var(--surface-soft);border-bottom:1px solid var(--line)}
table.t5 tbody td{padding:14px 18px;border-bottom:1px dashed var(--line);color:var(--ink-700);vertical-align:top;position:relative;transition:background .15s ease}
table.t5 tbody tr:last-child td{border-bottom:none}
table.t5 tbody tr{position:relative}
table.t5 tbody tr td:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--blue);opacity:0;transition:opacity .2s ease}
table.t5 tbody tr:hover td{background:#F8FAFE}
table.t5 tbody tr:hover td:first-child::before{opacity:1}
table.t5 tbody tr td:first-child{font-weight:500;color:var(--navy-deep)}
/* ============================ COMPARISON TABLE ============================ */
.compare-wrap{position:relative;padding-top:8px}
.compare{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--white)}
.compare thead th{padding:18px 20px;text-align:left;vertical-align:bottom;font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-500);background:var(--surface-soft);border-bottom:1px solid var(--line);position:relative}
.compare thead th.featured{color:var(--white);background:var(--navy-deep)}
.compare thead th.featured::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(to right,var(--teal),var(--blue))}
.compare thead th.featured::after{content:"YOU ARE HERE";position:absolute;top:6px;right:14px;font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;color:var(--teal);font-weight:600}
.compare tbody th{padding:16px 20px;text-align:left;vertical-align:top;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--navy-deep);background:var(--surface-soft);width:32%;border-bottom:1px solid var(--line)}
.compare tbody td{padding:16px 20px;vertical-align:top;color:var(--ink-700);border-bottom:1px solid var(--line);transition:background .15s ease}
.compare tbody td.featured{background:rgba(0,80,255,0.04);border-left:1px solid rgba(0,80,255,0.15);border-right:1px solid rgba(0,80,255,0.15);font-weight:600;position:relative}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:none}
.compare tbody tr:last-child td.featured{border-bottom:1px solid rgba(0,80,255,0.15)}
.compare tbody tr:hover td{background:#FAFBFE}
.compare tbody tr:hover td.featured{background:rgba(0,80,255,0.07)}
.compare .mark{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:600;font-size:13px}
.compare .mark-yes{color:var(--success)}.compare .mark-no{color:var(--ink-300)}
.compare td.featured .mark-yes{color:var(--blue);font-weight:700}
.compare td.featured .mark-no{color:var(--ink-500)}
/* ============================ BLOCKQUOTE ============================ */
blockquote{margin:0;padding:28px 36px;border-left:3px solid var(--teal);background:var(--surface-soft);font-family:var(--font-display);font-size:22px;line-height:1.5;color:var(--navy-deep);font-style:italic;position:relative;border-radius:0 10px 10px 0}
blockquote::before,blockquote::after{content:"";position:absolute;width:var(--pad);height:var(--pad);border-radius:50%;background:var(--teal)}
blockquote::before{top:-3px;right:-3px}blockquote::after{bottom:-3px;left:-3px}
blockquote p{font-size:22px;margin:0;color:var(--navy-deep);font-style:italic;max-width:none}
/* ============================ FORM ============================ */
.form{max-width:560px}
.form-row{margin-bottom:24px}.form-row.two-up{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row.two-up .form-field{margin:0}
.form-field{display:block;position:relative}
.form-field label,.form-label{display:block;font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--navy-deep);margin-bottom:8px}
.form-field .req{color:var(--blue);margin-left:2px}
.form-help{display:block;font-size:13px;color:var(--ink-500);margin-top:6px;line-height:1.5}
.form-input,.form-select,.form-textarea{width:100%;font-family:var(--font-body);font-size:15px;color:var(--navy-deep);background:var(--white);border:1px solid #C9D0DD;border-radius:6px;padding:12px 14px;line-height:1.5;transition:border-color .2s ease,box-shadow .2s ease}
.form-input::placeholder,.form-textarea::placeholder{color:var(--ink-300)}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,80,255,0.12)}
.form-textarea{resize:vertical;min-height:120px}
.form-select{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.form-field.is-error .form-input{border-color:var(--danger);animation:fieldShake .35s ease}
.form-error{display:block;font-size:13px;color:var(--danger);margin-top:6px;font-weight:500}
.form-field.is-success .form-input{border-color:var(--success)}
.form-success{display:block;font-size:13px;color:var(--success);margin-top:6px;font-weight:500}
@keyframes fieldShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.form-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-700);cursor:pointer}
.form-check input{margin:2px 0 0 0;accent-color:var(--blue);width:16px;height:16px;flex-shrink:0}
.form-check + .form-check{margin-top:10px}
.form-file{display:flex;align-items:center;gap:12px;padding:18px 20px;border:1px dashed #C9D0DD;border-radius:8px;background:var(--surface-soft);font-size:14px;color:var(--ink-500);cursor:pointer}
.form-file:hover{border-color:var(--blue);background:rgba(0,80,255,0.03)}
.form-file .icon{width:36px;height:36px;border-radius:8px;background:var(--white);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:11px;font-weight:600;color:var(--blue);flex-shrink:0}
.form-file strong{color:var(--navy-deep);font-weight:600;display:block;margin-bottom:2px;font-size:14px}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:32px;padding-top:24px;border-top:1px dashed var(--line);position:relative}
.form-actions::before,.form-actions::after{content:"";position:absolute;top:-3px;width:var(--pad);height:var(--pad);border-radius:50%;background:var(--ink-300)}
.form-actions::before{left:0}.form-actions::after{right:0}
.form-submitted{padding:40px;background:rgba(0,220,200,0.06);border:1px solid rgba(0,220,200,0.3);border-radius:10px;text-align:center}
.form-submitted h3{color:var(--navy-deep);margin-bottom:8px}
.form-submitted p{font-size:15px;color:var(--ink-500);margin:0;max-width:42ch;margin-inline:auto}
/* ============================ FAQ ============================ */
.faq{max-width:760px}
.faq-item{border:1px solid var(--line);border-radius:8px;background:var(--white);margin-bottom:8px;overflow:hidden;transition:border-color .25s ease,background .25s ease}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--navy-deep);line-height:1.4;transition:color .2s ease;position:relative;padding-left:48px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"";position:absolute;left:22px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink-300);background:var(--white);transition:border-color .25s ease,background .25s ease}
.faq-item summary .chev{width:16px;height:16px;flex-shrink:0;border:1.5px solid var(--ink-300);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .25s ease,background .25s ease,transform .25s ease}
.faq-item summary .chev::after{content:"";width:5px;height:5px;border-right:1.5px solid var(--ink-500);border-bottom:1.5px solid var(--ink-500);transform:rotate(45deg) translate(-1px,-1px);transition:transform .25s ease,border-color .25s ease}
.faq-item:hover{border-color:#C9D0DD}
.faq-item:hover summary{color:var(--blue)}
.faq-item:hover summary::before{border-color:var(--blue)}
.faq-item:hover summary .chev{border-color:var(--blue)}
.faq-item:hover summary .chev::after{border-color:var(--blue)}
.faq-item[open]{border-color:var(--blue);background:rgba(0,80,255,0.025)}
.faq-item[open] summary{color:var(--blue)}
.faq-item[open] summary::before{background:var(--blue);border-color:var(--blue)}
.faq-item[open] summary .chev{background:var(--blue);border-color:var(--blue)}
.faq-item[open] summary .chev::after{border-color:var(--white);transform:rotate(225deg) translate(-1px,-1px)}
.faq-body{padding:0 24px 0 48px}
.faq-body-inner{padding:4px 0 22px;font-size:15px;color:var(--ink-700);line-height:1.6}
.faq-body-inner p{font-size:15px;margin:0 0 10px;color:var(--ink-700);max-width:none}
.faq-body-inner p:last-child{margin:0}
/* ============================ BREADCRUMBS / PAGINATION ============================ */
.crumbs{font-family:var(--font-display);font-size:13px;color:var(--ink-500);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumbs a{color:var(--ink-500);text-decoration:none;transition:color .2s ease}
.crumbs a:hover{color:var(--blue)}
.crumbs .sep{color:var(--ink-300);font-size:12px}
.crumbs .current{color:var(--navy-deep);font-weight:600}
.pagination{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:14px;font-weight:500;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:6px;color:var(--ink-700);text-decoration:none;border:1px solid var(--line);transition:all .2s ease}
.pagination a:hover{background:var(--navy-deep);color:var(--white);border-color:var(--navy-deep);transform:translateY(-2px)}
.pagination .current{background:var(--navy-deep);color:var(--white);border-color:var(--navy-deep)}
.pagination .ellipsis{border:none;background:transparent;color:var(--ink-300)}
.pagination .prev,.pagination .next{padding:0 16px}
/* ============================ AUTHOR ============================ */
.author-card{display:flex;gap:24px;padding:32px;background:var(--surface-soft);border-radius:12px;border:1px solid var(--line);align-items:flex-start;max-width:760px;position:relative;transition:transform .3s ease,background .3s ease,color .3s ease}
.author-card::before,.author-card::after{content:"";position:absolute;width:var(--pad);height:var(--pad);border-radius:50%;background:var(--blue)}
.author-card::before{top:-3px;left:-3px}.author-card::after{bottom:-3px;right:-3px}
.author-card:hover{background:var(--navy-deep);color:var(--white);transform:translateY(-3px)}
.author-card:hover .author-name,.author-card:hover .author-role,.author-card:hover .author-bio,.author-card:hover .author-meta{color:var(--white)}
.author-card .avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--navy-deep),var(--blue));color:var(--white);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:28px;flex-shrink:0;position:relative}
.author-card .author-name{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--navy-deep);margin:0 0 4px;transition:color .3s ease}
.author-card .author-role{font-size:14px;color:var(--ink-500);margin:0 0 12px;font-family:var(--font-display);transition:color .3s ease}
.author-card .author-bio{font-size:15px;color:var(--ink-700);margin:0 0 14px;line-height:1.6;transition:color .3s ease}
.author-card .author-meta{font-family:var(--font-mono);font-size:12px;color:var(--ink-500);display:flex;flex-wrap:wrap;gap:8px 16px;transition:color .3s ease}
/* ============================ RELATED ============================ */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.related-card{padding:24px;border:1px solid var(--line);border-radius:10px;background:var(--white);text-decoration:none;display:flex;flex-direction:column;gap:12px;position:relative;transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s ease}
.related-card::before,.related-card::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--blue);opacity:0;transition:opacity .3s ease}
.related-card::before{top:-2.5px;left:-2.5px}.related-card::after{bottom:-2.5px;right:-2.5px}
.related-card:hover{background:var(--navy-deep);color:var(--white);border-color:var(--navy-deep);transform:translateY(-4px)}
.related-card:hover::before,.related-card:hover::after{opacity:1;background:var(--teal);box-shadow:0 0 6px var(--teal)}
.related-card .related-tag{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue)}
.related-card:hover .related-tag{color:var(--teal)}
.related-card h3{font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.3;color:var(--navy-deep);margin:0;transition:color .3s ease}
.related-card:hover h3{color:var(--white)}
.related-card p{font-size:14px;color:var(--ink-500);margin:0;line-height:1.55;max-width:none;transition:color .3s ease}
.related-card:hover p{color:rgba(255,255,255,0.75)}
.related-card .related-meta{font-family:var(--font-mono);font-size:11px;color:var(--ink-300);letter-spacing:0.04em;margin-top:auto;padding-top:8px;transition:color .3s ease}
.related-card:hover .related-meta{color:rgba(255,255,255,0.5)}
/* ============================ SIDEBAR CTA ============================ */
.sidebar-cta{padding:24px;background:var(--navy-deep);color:var(--white);border-radius:10px;max-width:320px;position:relative;border:1px solid var(--navy-deep);transition:background .3s ease,color .3s ease,border-color .3s ease}
.sidebar-cta::before,.sidebar-cta::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 2px rgba(0,220,200,0.18)}
.sidebar-cta::before{top:-4px;left:-4px}.sidebar-cta::after{bottom:-4px;right:-4px}
.sidebar-cta .label{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--teal);margin-bottom:10px;transition:color .3s ease}
.sidebar-cta h3{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--white);margin:0 0 10px;line-height:1.3;transition:color .3s ease}
.sidebar-cta p{font-size:14px;color:rgba(255,255,255,0.7);margin:0 0 18px;line-height:1.55;max-width:none;transition:color .3s ease}
.sidebar-cta .btn{width:100%;justify-content:center;padding:12px 18px;font-size:14px}
.sidebar-cta:hover{background:var(--white);color:var(--navy-deep);border-color:var(--blue)}
.sidebar-cta:hover .label{color:var(--blue)}.sidebar-cta:hover h3{color:var(--navy-deep)}.sidebar-cta:hover p{color:var(--ink-500)}
.sidebar-cta:hover::before,.sidebar-cta:hover::after{background:var(--blue)}
.sidebar-cta:hover .btn-primary{background:var(--blue);color:var(--white);border-color:var(--blue)}
.sidebar-cta.light{background:var(--surface-soft);color:var(--navy-deep);border-color:var(--line)}
.sidebar-cta.light::before,.sidebar-cta.light::after{background:var(--blue)}
.sidebar-cta.light .label{color:var(--blue)}
.sidebar-cta.light h3{color:var(--navy-deep)}
.sidebar-cta.light p{color:var(--ink-500)}
.sidebar-cta.light .btn-secondary{background:transparent;color:var(--navy-deep);border-color:#C9D0DD}
.sidebar-cta.light .btn-secondary:hover{background:var(--navy-deep);color:var(--white);border-color:var(--navy-deep)}
.sidebar-cta.light:hover{background:var(--navy-deep);color:var(--white);border-color:var(--navy-deep)}
.sidebar-cta.light:hover .label{color:var(--teal)}
.sidebar-cta.light:hover h3{color:var(--white)}
.sidebar-cta.light:hover p{color:rgba(255,255,255,0.7)}
.sidebar-cta.light:hover::before,.sidebar-cta.light:hover::after{background:var(--teal)}
.sidebar-cta.light:hover .btn-secondary{background:transparent;color:var(--white);border-color:rgba(255,255,255,0.25)}
.sidebar-cta.light:hover .btn-secondary:hover{background:var(--white);color:var(--navy-deep);border-color:var(--white)}
/* ============================ TABS ============================ */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:24px;position:relative}
.tabs button{background:transparent;border:none;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--ink-500);padding:14px 20px;cursor:pointer;position:relative;transition:color .2s ease}
.tabs button:hover{color:var(--navy-deep)}
.tabs button.is-active{color:var(--blue)}
.tabs-indicator{position:absolute;bottom:-1px;height:2px;background:var(--blue)}
.tab-panel{display:none}.tab-panel.is-active{display:block}
/* ============================ GLOSSARY ============================ */
.glossary{max-width:760px}
.glossary-item{padding:24px 0;border-bottom:1px dashed var(--line);display:grid;grid-template-columns:200px 1fr;gap:32px;position:relative}
.glossary-item:first-child{padding-top:0}
.glossary-term{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--navy-deep)}
.glossary-term .arabic{display:block;font-size:14px;color:var(--ink-500);font-weight:400;margin-top:4px;font-family:'IBM Plex Sans Arabic','Tajawal',sans-serif;direction:rtl}
.glossary-def{font-size:15px;color:var(--ink-700);line-height:1.65}
.glossary-def p{margin:0;font-size:15px;max-width:none}
.term{border-bottom:1px dashed var(--ink-300);cursor:help;color:var(--navy-deep);font-weight:500;transition:color .2s ease,border-color .2s ease}
.term:hover{color:var(--blue);border-bottom-color:var(--blue)}
/* ============================ TIMELINE ============================ */
.timeline{position:relative;list-style:none;margin:0;padding:0;max-width:760px}
.timeline-line{position:absolute;left:24px;top:8px;bottom:8px;width:1px;background:var(--line);overflow:hidden}
.timeline-line-fill{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(to bottom,var(--blue),var(--teal))}
.timeline li{position:relative;padding-left:72px;margin-bottom:36px}
.timeline li:last-child{margin-bottom:0}
.timeline .node{position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;background:var(--white);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink-500);z-index:1}
.timeline li.is-done .node{background:var(--blue);color:var(--white);border-color:var(--blue)}
.timeline li.is-current .node{background:var(--white);color:var(--blue);border-color:var(--blue)}
.timeline li.is-current .node::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--blue);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:0.4}50%{transform:scale(1.15);opacity:0}}
.timeline .step-meta{font-family:var(--font-mono);font-size:11px;color:var(--ink-500);letter-spacing:0.04em;margin-bottom:4px;text-transform:uppercase}
.timeline h3{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--navy-deep);margin:0 0 6px}
.timeline p{font-size:15px;color:var(--ink-500);margin:0;line-height:1.55;max-width:none}
/* ============================ NEWSLETTER ============================ */
.newsletter{padding:48px;background:var(--navy-deep);color:var(--white);border-radius:14px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;position:relative;overflow:hidden}
.newsletter::before{content:"";position:absolute;top:-200px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(0,80,255,0.3),transparent 70%);pointer-events:none}
.newsletter::after{content:"";position:absolute;bottom:-200px;left:-180px;width:380px;height:380px;background:radial-gradient(circle,rgba(0,220,200,0.12),transparent 70%);pointer-events:none}
.newsletter > *{position:relative;z-index:1}
.newsletter .corner{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--teal);z-index:2}
.newsletter .corner.tl{top:-4px;left:-4px}.newsletter .corner.tr{top:-4px;right:-4px}
.newsletter .corner.bl{bottom:-4px;left:-4px}.newsletter .corner.br{bottom:-4px;right:-4px;background:var(--blue)}
.newsletter .label{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--teal);margin-bottom:12px;display:block}
.newsletter h2{color:var(--white);font-size:26px;margin:0 0 8px;max-width:22ch}
.newsletter p{color:rgba(255,255,255,0.78);margin:0;font-size:15px;max-width:46ch}
.newsletter-form{display:flex;gap:8px;min-width:340px}
.newsletter-form input{flex:1;font-family:var(--font-body);font-size:14px;padding:14px 16px;border-radius:6px;border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.05);color:var(--white)}
.newsletter-form input::placeholder{color:rgba(255,255,255,0.45)}
.newsletter-form input:focus{outline:none;border-color:var(--teal);background:rgba(255,255,255,0.08)}
.newsletter-form button{padding:14px 22px;border-radius:6px;border:1px solid var(--blue);background:var(--blue);color:var(--white);font-family:var(--font-body);font-weight:600;font-size:14px;cursor:pointer;transition:background .2s ease,color .2s ease}
.newsletter-form button:hover{background:var(--teal);color:var(--navy-deep);border-color:var(--teal)}
.newsletter .small{font-size:12px;color:rgba(255,255,255,0.7);margin-top:14px;font-family:var(--font-mono);display:inline-flex;align-items:center;gap:8px}
.newsletter .small::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal)}
/* =================== NEWSLETTER (FLOATING) =================== */
/* Dismissible corner card — the floating sibling of the in-page .newsletter
section. Fixed bottom-right, revealed on scroll intent by app.js, and the
dismissal is remembered in localStorage so it never nags. Borrows the
.cookie-banner floating DNA (fixed, corner dots, soft shadow, z-index).
Markup: