/* ═══════════════════════════════════════════════════════════════════════ AMERICAN ENERGY MONEY — SHARED THEME ─────────────────────────────────────────────────────────────────────── One continuous ground, no section backgrounds. Sections are spacing and content; the page beneath them never breaks, so scrolling reads as one surface rather than a stack of blocks. USAGE 1. Google Fonts in , before this file: 2. This file: 3. Pick a theme on the body: paper | thermal | copper 4. First two elements inside : 5. Behaviour (scroll reveal, nav state, video controls): before LAYOUT CONTRACT .band max-width wrapper, clears the rail gutter .seq standard vertical rhythm between sections .seq--tall for a closing section .bleed drop between two .seq blocks to soften the seam .rise fades and lifts on scroll; add .d1/.d2/.d3 to stagger ADDING A THEME Copy any [data-theme] block, rename it, change the 31 tokens. Nothing else in this file contains a literal colour. ═══════════════════════════════════════════════════════════════════════ */ /* ─── RESET ─────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --sans:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --serif:'Fraunces',Georgia,serif; } /* ══════════════════════════════════════════════════════════════ THEME TOKENS — every colour in this file resolves from one of these. To add a theme, copy a block, rename it, and replace the 31 values. base-1..5 the five stops of the continuous page gradient glow-1..4 the four radial washes, each with a matching -pos fg fg2 fg3 primary / secondary / dim text line grid hairlines and the background grid nav-bg scrolled nav backdrop surface card rest / hover fills grad-b/c gradient text ramp mark active-state accent (rail dot, footnote asterisk) frame-bg letterbox behind media title-grad the full display-title gradient ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ THEME A — THERMAL blackbody radiation: cold core, ember edge ══════════════════════════════════════════════════════════════ */ [data-theme="thermal"]{ --base-1:#0A0507; --base-2:#140A0C; --base-3:#1A0D0E; --base-4:#0D0708; --base-5:#070405; --glow-1:rgba(214,90,42,0.30); --glow-1-pos:78% 6%; --glow-2:rgba(255,176,59,0.16); --glow-2-pos:12% 32%; --glow-3:rgba(168,44,58,0.30); --glow-3-pos:88% 58%; --glow-4:rgba(96,32,72,0.22); --glow-4-pos:20% 84%; --fg:#F5EDE6; --fg2:#A89189; --fg3:#8A6C64; --line:rgba(255,222,200,0.11); --grid:rgba(255,220,190,0.024); --nav-bg:rgba(10,5,7,0.74); --surface:rgba(24,12,13,0.55); --surface-hi:rgba(42,20,20,0.82); --grad-b:#F7EFE8; --grad-c:#E08A4C; --title-grad:linear-gradient(101deg,#7A3A2E 0%,#C24E32 26%,#FFD9A0 52%,#F5EDE6 68%,#E8703C 100%); --mark:#E8703C; --frame-bg:#000; } /* ══════════════════════════════════════════════════════════════ THEME B — PAPER engraved banknote: warm stock, ink, flag inks ══════════════════════════════════════════════════════════════ */ [data-theme="paper"]{ --base-1:#F7F5EF; --base-2:#F2EFE7; --base-3:#EDEAE0; --base-4:#F4F1E9; --base-5:#FAF8F3; --glow-1:rgba(10,49,97,0.10); --glow-1-pos:78% 6%; --glow-2:rgba(179,25,66,0.07); --glow-2-pos:12% 32%; --glow-3:rgba(10,49,97,0.09); --glow-3-pos:88% 58%; --glow-4:rgba(120,105,70,0.10);--glow-4-pos:20% 84%; --fg:#14161A; --fg2:#5B6068; --fg3:#787C83; --line:rgba(20,22,26,0.13); --grid:rgba(20,22,26,0.030); --nav-bg:rgba(247,245,239,0.80); --surface:rgba(255,255,255,0.62); --surface-hi:rgba(255,255,255,0.95); --grad-b:#14161A; --grad-c:#4A6E9E; --mark:#B31942; --frame-bg:#14161A; /* Old Glory, static. Blue -> light -> red across the title. On light stock a true-white stop punches a hole in the glyphs, so the pale band bottoms out at a steel/rose pair that still holds ~2.4:1 against the paper. */ --title-grad:linear-gradient(101deg, #08284F 0%, #0A3161 16%, #1B5395 34%, #4E7BB5 44%, #8098BC 49%, #B98F9E 54%, #C0566F 64%, #B31942 78%, #8A1234 100%); } /* ══════════════════════════════════════════════════════════════ THEME C — COPPER substation: graphite, busbar copper, verdigris ══════════════════════════════════════════════════════════════ */ [data-theme="copper"]{ --base-1:#0B0D0D; --base-2:#101414; --base-3:#12181A; --base-4:#0D1011; --base-5:#080A0A; --glow-1:rgba(184,115,51,0.26); --glow-1-pos:78% 6%; --glow-2:rgba(64,145,132,0.16); --glow-2-pos:12% 32%; --glow-3:rgba(184,115,51,0.20); --glow-3-pos:88% 58%; --glow-4:rgba(46,110,102,0.16); --glow-4-pos:20% 84%; --fg:#EDEAE4; --fg2:#8F9691; --fg3:#79817E; --line:rgba(230,226,216,0.10); --grid:rgba(230,226,216,0.022); --nav-bg:rgba(11,13,13,0.74); --surface:rgba(17,22,23,0.58); --surface-hi:rgba(28,38,38,0.85); --grad-b:#F0EDE7; --grad-c:#C98A46; --title-grad:linear-gradient(101deg,#2E6E66 0%,#49A08F 28%,#F0EDE7 54%,#C98A46 78%,#B87333 100%); --mark:#C98A46; --frame-bg:#000; } html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--sans); color:var(--fg); background:var(--base-1); overflow-x:hidden; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background .5s ease, color .5s ease; } /* ═══ ONE CONTINUOUS GROUND — no section ever paints its own background ═══ */ .ground{position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(1200px 700px at var(--glow-1-pos), var(--glow-1), transparent 62%), radial-gradient(1000px 620px at var(--glow-2-pos), var(--glow-2), transparent 60%), radial-gradient(1100px 800px at var(--glow-3-pos), var(--glow-3), transparent 62%), radial-gradient(900px 620px at var(--glow-4-pos), var(--glow-4), transparent 60%), linear-gradient(180deg,var(--base-1) 0%,var(--base-2) 26%,var(--base-3) 52%,var(--base-4) 74%,var(--base-5) 100%); background-attachment:fixed; transition:background .5s ease; } .grid-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5; background-image: linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:72px 72px; /* #000 here is a mask alpha channel, not a paint colour — theme-independent. */ mask-image:radial-gradient(ellipse 120% 80% at 50% 40%,#000 30%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse 120% 80% at 50% 40%,#000 30%,transparent 78%); } /* ═══ NAV ═══ */ nav{position:fixed;top:0;left:0;right:0;z-index:60;height:64px; display:flex;align-items:center;gap:32px;padding:0 40px; background:transparent;border-bottom:1px solid transparent; transition:background .35s,border-color .35s,backdrop-filter .35s} nav.stuck{background:var(--nav-bg);border-bottom-color:var(--line); -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)} .nav-logo{display:flex;align-items:center;text-decoration:none} .nav-logo img{width:28px;height:28px;border-radius:5px;display:block} .nav-links{display:flex;gap:2px;margin-left:auto} .nav-item{padding:8px 15px;font-size:14px;font-weight:500;letter-spacing:-0.01em; color:var(--fg2);text-decoration:none;border-radius:8px;transition:color .18s,background .18s} .nav-item:hover{color:var(--fg);background:var(--surface-hi)} /* ═══ FLOW — sections are spacing, not containers ═══ */ main{position:relative;z-index:1} .band{padding:0 40px;max-width:1220px;margin:0 auto} .seq{padding:132px 0} .seq--tall{padding:170px 0} /* soft bleed between consecutive bands so nothing reads as an edge */ .bleed{position:relative;height:0} .bleed::after{content:'';position:absolute;left:50%;transform:translateX(-50%); width:min(1100px,92vw);height:340px;top:-170px;pointer-events:none; background:radial-gradient(ellipse at center,var(--surface-hi),transparent 68%);opacity:.55} .eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.19em; text-transform:uppercase;color:var(--fg3);display:flex;align-items:center;gap:12px;margin-bottom:26px} .eyebrow::after{content:'';flex:1;height:1px;max-width:220px; background:linear-gradient(90deg,var(--line),transparent)} /* ═══ HERO ═══ */ .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding-top:64px;position:relative} /* background-clip:text paints only inside the element box, so a line-height below Inter's 1.21em content area clips descenders (g, y, p, Q) — they go unpainted and read as cut off. line-height 1.0 plus padding-bottom pushes the paint box past the deepest descender with room to spare. */ .hero h1{font-size:clamp(32px,7.4vw,104px);font-weight:800;letter-spacing:-0.045em; line-height:1.0;margin:0;padding-bottom:0.18em; color:transparent; background-image:var(--title-grad); -webkit-background-clip:text;background-clip:text} .hero h1 .l2{display:block} .hero-sub{margin-top:16px;font-size:clamp(15px,1.7vw,19px);color:var(--fg2); max-width:52ch;line-height:1.6;font-weight:400} /* Two-column hero (index only). Title left, flag right, filling the band. */ .hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:clamp(30px,4.5vw,68px);align-items:center;width:100%} /* The title now lives in ~55% of the band, so it needs a tighter curve than the full-width heroes on the interior pages. */ .hero-grid h1{font-size:clamp(32px,5.6vw,88px)} .hero-figure{display:flex;flex-direction:column;align-items:flex-start;gap:24px} .flagcard{display:block;text-decoration:none;width:100%; transition:transform .3s cubic-bezier(.22,.61,.36,1)} .flagcard:hover{transform:translateY(-4px)} .flagcard img{width:100%;height:auto;display:block;border-radius:14px; border:1px solid var(--line);box-shadow:0 30px 70px -34px rgba(0,0,0,.55)} .flagcard .btn{margin-top:24px} .hero-meta{display:flex;align-items:center;gap:22px;margin-top:44px;flex-wrap:wrap} .flaglink{display:inline-block;text-decoration:none;transition:transform .25s} .flaglink:hover{transform:translateY(-3px)} .flaglink img{height:clamp(96px,13vw,168px);width:auto;border-radius:8px;display:block} .flaglink b{display:block;margin-top:14px;font-family:var(--mono);font-size:10px; font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3); transition:color .2s} .flaglink:hover b{color:var(--fg)} .scrollcue{position:absolute;bottom:44px;left:40px; font-family:var(--mono);font-size:10px;letter-spacing:.19em;text-transform:uppercase; color:var(--fg3);display:flex;align-items:center;gap:11px} .scrollcue em{font-style:normal;width:22px;height:1px;background:var(--fg3); transform-origin:left;animation:cue 2.1s ease-in-out infinite} @keyframes cue{0%,100%{transform:scaleX(.35);opacity:.4}50%{transform:scaleX(1);opacity:1}} /* ═══ EQUATION ═══ */ .eqrow{display:grid;grid-template-columns:1.15fr 0.85fr;gap:76px;align-items:center} .eq{font-family:var(--serif);font-weight:300; font-size:clamp(28px,4.2vw,54px);line-height:1.24;letter-spacing:-0.02em;color:var(--fg)} .eq .op{color:var(--fg3);font-family:var(--sans);font-weight:400; font-size:.62em;vertical-align:.08em;padding:0 .12em} .eq .sum{display:block;height:1px;width:132px;margin:26px 0; background:linear-gradient(90deg,var(--fg2),transparent)} .eq a{color:transparent;background:linear-gradient(96deg,var(--grad-b),var(--grad-c)); -webkit-background-clip:text;background-clip:text;text-decoration:none; border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .2s} .eq a:hover{border-bottom-color:var(--fg2)} .figure{position:relative} .figure img{width:100%;height:auto;display:block;border-radius:14px; opacity:.92;filter:saturate(.85)} .figure figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.13em; text-transform:uppercase;color:var(--fg3);margin-top:16px} .figure a{display:block;text-decoration:none;transition:transform .35s,opacity .35s} .figure a:hover{transform:translateY(-4px)} /* ═══ STATEMENT ═══ */ .statement h2{font-size:clamp(34px,5.6vw,74px);font-weight:800;letter-spacing:-0.045em; line-height:1.0;margin-bottom:0} .statement h2 .mut{color:var(--fg3)} .stat-body{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px; margin-top:60px;align-items:start} .lede{font-size:clamp(20px,2.5vw,30px);font-weight:500;letter-spacing:-0.025em; line-height:1.35;color:var(--fg)} .lede .hi{color:transparent;background:linear-gradient(96deg,var(--grad-b),var(--grad-c)); -webkit-background-clip:text;background-clip:text} .fnote{font-size:14px;line-height:1.75;color:var(--fg2);margin-top:26px;max-width:520px} .fnote a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line)} .fnote a:hover{border-bottom-color:var(--fg2)} .fnote sup{color:var(--mark);font-weight:600} /* ═══ CENTRED VARIANTS ═══ */ .center{text-align:center} .center.p,.center.lead-p,.center.fnote{margin-left:auto;margin-right:auto} .figure.center a{display:inline-block} .figure.center img{margin:0 auto;max-width:min(520px,100%)} .figure.center figcaption{text-align:center} .statement-lede{font-size:clamp(24px,3.6vw,44px);font-weight:600;letter-spacing:-0.032em; line-height:1.28;color:var(--fg);text-align:center;max-width:22ch;margin:0 auto} .statement-lede .hi{color:transparent; background:linear-gradient(96deg,var(--grad-b),var(--grad-c)); -webkit-background-clip:text;background-clip:text} .brief-head{font-size:clamp(28px,4.2vw,52px);font-weight:800;letter-spacing:-0.04em; line-height:1.06;text-align:center;margin-bottom:18px} .brief-head .mut{color:var(--fg3)} .brief-sub{font-size:clamp(15px,1.8vw,19px);line-height:1.6;color:var(--fg2); text-align:center;max-width:56ch;margin:0 auto 44px} /* ═══ VIDEO ═══ */ .brief-frame{position:relative;border-radius:16px;overflow:hidden;background:var(--frame-bg); border:1px solid var(--line);box-shadow:0 40px 90px -30px rgba(0,0,0,.9)} .brief-video{width:100%;height:auto;aspect-ratio:16/9;display:block;background:var(--frame-bg)} .brief-controls{position:absolute;left:15px;bottom:15px;display:flex;gap:8px; opacity:.5;transition:opacity .22s} .brief-frame:hover .brief-controls,.brief-controls:focus-within{opacity:1} /* Video controls sit ON the video, not on the page ground, so they stay dark and light-on-dark in every theme. The literals below are deliberate. */ .vbtn{width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.22);color:#fff;cursor:pointer;padding:0; display:flex;align-items:center;justify-content:center; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); transition:background .15s,border-color .15s} .vbtn:hover{background:rgba(0,0,0,.82);border-color:rgba(255,255,255,.5)} .vbtn:focus-visible{outline:2px solid #fff;outline-offset:2px} .vbtn svg{width:17px;height:17px;display:block} .vbtn .ico-hide{display:none} .vbtn.is-on .ico-hide{display:block} .vbtn.is-on .ico-show{display:none} .brief-error{border:1px solid var(--line);border-radius:16px;padding:26px 30px; font-size:14px;line-height:1.7;color:var(--fg2)} .brief-error code{font-family:var(--mono);font-size:12.5px;color:var(--fg)} .vcap{font-size:14px;line-height:1.75;color:var(--fg2);margin-top:24px;max-width:660px} .vcap sup{font-size:.7em;vertical-align:super} @media (hover:none){.brief-controls{opacity:1}} /* ═══ PILLARS ═══ */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:56px} .pill{padding:38px 32px 34px;text-decoration:none;display:flex;flex-direction:column; background:var(--surface);transition:background .25s;min-height:238px} .pill:hover{background:var(--surface-hi)} .pill .pn{font-family:var(--mono);font-size:10px;letter-spacing:.15em; text-transform:uppercase;color:var(--fg3);margin-bottom:20px} .pill h3{font-size:24px;font-weight:800;letter-spacing:-0.032em;color:var(--fg);margin-bottom:11px} .pill p{font-size:14.5px;line-height:1.65;color:var(--fg2);margin:0} .pill .go{margin-top:auto;padding-top:22px;font-family:var(--mono);font-size:10.5px; letter-spacing:.13em;text-transform:uppercase;color:var(--fg3); display:flex;align-items:center;gap:8px;transition:color .2s,gap .2s} .pill:hover .go{color:var(--fg);gap:13px} /* ═══ FOOTER ═══ */ footer{position:relative;z-index:1;margin-top:60px;padding:40px 40px; border-top:1px solid var(--line); display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap; max-width:1220px;margin-left:auto;margin-right:auto; font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3)} .partner-logos{display:flex;align-items:center;gap:26px;flex-wrap:wrap} .partner-logos a{display:flex;opacity:.42;transition:opacity .2s} .partner-logos a:hover{opacity:1} .partner-logos img{height:20px;width:auto} /* ═══ SCROLL CHOREOGRAPHY ═══ */ /* Progressive enhancement: .rise is VISIBLE by default. aem-theme.js sets .js-anim on before paint, which is what arms the hidden state. If the script fails to load, every section still renders instead of going blank. */ .rise{transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)} .js-anim .rise{opacity:0;transform:translateY(26px)} .js-anim .rise.in{opacity:1;transform:none} .rise.d1{transition-delay:.1s}.rise.d2{transition-delay:.2s}.rise.d3{transition-delay:.3s} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rise{opacity:1;transform:none;transition:none} .scrollcue em{animation:none} } @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:44px} .hero-grid h1{font-size:clamp(32px,7.4vw,104px)} .hero-figure{align-items:stretch} .flagcard img{max-width:520px} } @media (max-width:980px){ .eqrow,.stat-body{grid-template-columns:1fr;gap:44px} .pillars{grid-template-columns:1fr} .pill{min-height:0} } @media (max-width:768px){ nav{padding:0 20px} .band{padding:0 20px} footer{padding:36px 20px} .seq,.seq--tall{padding:96px 0} .scrollcue{left:20px} .hero{min-height:auto;padding-top:130px;padding-bottom:90px} } /* ═══════════════════════════════════════════════════════════════════════ COMPONENT LIBRARY Every colour below resolves from the theme tokens. Add markup, not CSS. ═══════════════════════════════════════════════════════════════════════ */ /* ─── PROSE ─────────────────────────────────────────────────────────── */ .h2{font-size:clamp(30px,4.6vw,58px);font-weight:800;letter-spacing:-0.042em; line-height:1.04;margin-bottom:22px} .h2 .mut{color:var(--fg3)} .h3{font-size:clamp(22px,2.8vw,32px);font-weight:800;letter-spacing:-0.032em; line-height:1.15;margin-bottom:16px} .p{font-size:16.5px;line-height:1.78;color:var(--fg2);margin-bottom:20px;max-width:68ch} .p:last-child{margin-bottom:0} .p strong{color:var(--fg);font-weight:600} .p a,.li a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line)} .p a:hover,.li a:hover{border-bottom-color:var(--fg2)} .lead-p{font-size:clamp(17px,2vw,21px);line-height:1.68;color:var(--fg2); max-width:62ch;margin-bottom:0} /* ─── NUMBERED STEPS ────────────────────────────────────────────────── */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px} .step .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em; text-transform:uppercase;color:var(--fg3);margin-bottom:16px} .step h4{font-size:19px;font-weight:700;letter-spacing:-0.025em;margin-bottom:10px;color:var(--fg)} .step p{font-size:14.5px;line-height:1.68;color:var(--fg2);margin:0} /* ─── TWO-COLUMN COMPARE ────────────────────────────────────────────── */ .compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:48px} .ccol{padding:34px 32px;background:var(--surface)} .ccol .k{font-family:var(--mono);font-size:10px;letter-spacing:.15em; text-transform:uppercase;color:var(--fg3);margin-bottom:14px} .ccol h4{font-size:19px;font-weight:700;letter-spacing:-0.025em;margin-bottom:16px;color:var(--fg)} .ccol ul{list-style:none} .ccol li{font-size:14.5px;line-height:1.65;color:var(--fg2);padding-left:18px; margin-bottom:12px;position:relative} .ccol li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px; border-radius:50%;background:var(--fg3)} .ccol li strong{color:var(--fg);font-weight:600} /* ─── SPEC TABLE (n columns) ────────────────────────────────────────── */ .ctable{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:48px} .crow{display:grid;border-bottom:1px solid var(--line)} .crow:last-child{border-bottom:none} .crow>div{padding:17px 20px;font-size:14.5px;line-height:1.55;color:var(--fg2)} .crow .dim{font-family:var(--mono);font-size:10px;letter-spacing:.11em; text-transform:uppercase;color:var(--fg3);display:flex;align-items:center; background:var(--surface)} .crow.head>div{background:var(--surface-hi);color:var(--fg);font-weight:700; font-size:13.5px;letter-spacing:-0.01em} .crow.head .dim{color:var(--fg3);font-weight:500} .c2{grid-template-columns:.9fr 1.3fr 1.3fr} .c3{grid-template-columns:.85fr 1.2fr 1.2fr 1.2fr} /* ─── CALLOUT ───────────────────────────────────────────────────────── */ .callout{border:1px solid var(--line);border-left:3px solid var(--mark); border-radius:0 14px 14px 0;padding:30px 34px;margin-top:44px;background:var(--surface)} .callout .k{font-family:var(--mono);font-size:10px;letter-spacing:.15em; text-transform:uppercase;color:var(--fg3);margin-bottom:14px} .callout h4{font-size:20px;font-weight:700;letter-spacing:-0.025em; margin-bottom:14px;color:var(--fg);line-height:1.3} .callout p{font-size:15px;line-height:1.75;color:var(--fg2);margin-bottom:14px} .callout p:last-child{margin-bottom:0} .callout strong{color:var(--fg);font-weight:600} /* ─── CARD GRID ─────────────────────────────────────────────────────── */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:1px;background:var(--line);border:1px solid var(--line); border-radius:18px;overflow:hidden;margin-top:48px} .cards.two{grid-template-columns:1fr 1fr} .card{padding:32px 30px;background:var(--surface);display:flex;flex-direction:column; text-decoration:none;transition:background .25s} a.card:hover{background:var(--surface-hi)} .card .k{font-family:var(--mono);font-size:10px;letter-spacing:.15em; text-transform:uppercase;color:var(--fg3);margin-bottom:16px} .card h4{font-size:20px;font-weight:700;letter-spacing:-0.028em;margin-bottom:11px;color:var(--fg)} .card p{font-size:14.5px;line-height:1.68;color:var(--fg2);margin:0 0 14px} .card p:last-child{margin-bottom:0} .card ul{list-style:none;margin-top:4px} .card li{font-size:13.5px;line-height:1.6;color:var(--fg2);padding-left:16px; margin-bottom:9px;position:relative} .card li::before{content:'';position:absolute;left:0;top:8px;width:4px;height:4px; border-radius:50%;background:var(--mark)} .card .foot{margin-top:auto;padding-top:20px;font-family:var(--mono);font-size:10.5px; letter-spacing:.13em;text-transform:uppercase;color:var(--fg3)} a.card:hover .foot{color:var(--fg)} /* ─── STAT ROW ──────────────────────────────────────────────────────── */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px;background:var(--line);border:1px solid var(--line); border-radius:16px;overflow:hidden;margin-top:44px} .stat{padding:30px 26px;background:var(--surface)} .stat .v{font-size:40px;font-weight:800;letter-spacing:-0.045em;color:var(--fg);line-height:1} .stat p{font-size:13.5px;line-height:1.6;color:var(--fg2);margin:14px 0 12px} .stat a{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--fg3);text-decoration:none} .stat a:hover{color:var(--fg)} /* ─── SPEC LINE (monospace contract) ────────────────────────────────── */ .specline{font-family:var(--mono);font-size:12.5px;line-height:2.1;color:var(--fg2); border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin-top:44px; background:var(--surface);overflow-x:auto} .specline .tk{color:var(--fg);font-weight:600} .specline .sep{color:var(--fg3);padding:0 10px} .specline .lb{color:var(--fg3)} .speccap{font-size:13.5px;color:var(--fg3);margin-top:14px} /* ─── BIBLIOGRAPHY ──────────────────────────────────────────────────── */ .papers{margin-top:48px} .paper{display:grid;grid-template-columns:126px 1fr;gap:28px;padding:32px 0; border-top:1px solid var(--line)} .paper:last-child{border-bottom:1px solid var(--line)} .paper .meta{font-family:var(--mono);font-size:10px;line-height:1.9;color:var(--fg3);letter-spacing:.04em} .paper .meta b{display:block;color:var(--fg);font-weight:600;letter-spacing:.11em; text-transform:uppercase;margin-bottom:4px} .paper h4{font-size:22px;font-weight:800;letter-spacing:-0.03em;line-height:1.2; margin-bottom:7px;color:var(--fg)} .paper .by{font-size:13px;color:var(--fg3);margin-bottom:13px} .paper .abs{font-size:15px;line-height:1.72;color:var(--fg2);margin-bottom:15px} .paper .abs strong{color:var(--fg);font-weight:600} .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px} .chips span{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--fg3); border:1px solid var(--line);border-radius:100px;padding:4px 10px} .golink{font-size:13.5px;font-weight:700;letter-spacing:-0.01em;color:var(--fg); text-decoration:none;border-bottom:1.5px solid var(--fg)} .golink:hover{color:var(--fg2);border-color:var(--fg2)} /* ─── TIER STACK (ontology) ─────────────────────────────────────────── */ .tiers{display:flex;flex-direction:column;gap:8px;margin-top:44px} .tier{display:grid;grid-template-columns:112px 1fr;gap:20px;align-items:center; padding:17px 22px;border:1px solid var(--line);border-radius:12px;background:var(--surface)} .tier .lv{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em; text-transform:uppercase;color:var(--fg3)} .tier .it{display:flex;flex-wrap:wrap;gap:7px} .tier .it span{font-size:13px;font-weight:500;color:var(--fg2); background:var(--surface-hi);border-radius:6px;padding:5px 11px} .tier.apex{background:var(--fg);border-color:var(--fg)} .tier.apex .lv{color:var(--base-3)} .tier.apex .it span{background:transparent;color:var(--base-1);font-size:19px; font-weight:800;letter-spacing:-0.03em;padding:0} /* ─── PRICED REPORTS ────────────────────────────────────────────────── */ .reports{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:20px;margin-top:48px} .report{border:1px solid var(--line);border-radius:16px;overflow:hidden; display:flex;flex-direction:column;background:var(--surface)} .report .cov{height:132px;display:flex;align-items:center;justify-content:center; background:var(--surface-hi);border-bottom:1px solid var(--line); font-family:var(--mono);font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--fg3)} .report .bd{padding:24px 24px 22px;display:flex;flex-direction:column;flex:1} .report .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--fg3);margin-bottom:11px} .report h4{font-size:17px;font-weight:700;letter-spacing:-0.024em; line-height:1.28;margin-bottom:10px;color:var(--fg)} .report p{font-size:13.5px;line-height:1.62;color:var(--fg2);margin-bottom:18px} .report .ft{margin-top:auto;display:flex;align-items:center;justify-content:space-between; padding-top:16px;border-top:1px solid var(--line)} .report .pr{font-size:19px;font-weight:800;letter-spacing:-0.03em;color:var(--fg)} .btn{display:inline-block;padding:9px 20px;border-radius:100px;text-decoration:none; font-size:12.5px;font-weight:700;letter-spacing:-0.01em; background:var(--fg);color:var(--base-1);transition:opacity .18s,transform .18s} .btn:hover{opacity:.85;transform:scale(1.03)} .btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)} .btn.ghost:hover{border-color:var(--fg);opacity:1} /* ─── CONTROLS (simulators) ─────────────────────────────────────────── */ .panel{border:1px solid var(--line);border-radius:16px;padding:28px 30px; background:var(--surface);margin-top:44px} .ctrls{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:22px;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line)} .ctrl label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em; text-transform:uppercase;color:var(--fg3);margin-bottom:10px} .ctrl label b{float:right;font-family:var(--sans);font-size:14px; letter-spacing:-0.01em;color:var(--fg);text-transform:none} input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer} input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line);border-radius:2px} input[type=range]::-moz-range-track{height:3px;background:var(--line);border-radius:2px} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px; border-radius:50%;background:var(--fg);margin-top:-6px} input[type=range]::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:var(--fg)} .readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:26px} .readout .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--fg3);margin-bottom:7px} .readout .v{font-size:25px;font-weight:800;letter-spacing:-0.035em;color:var(--fg)} @media (max-width:980px){ .steps{grid-template-columns:1fr;gap:32px} .compare,.cards.two{grid-template-columns:1fr} .c2,.c3{grid-template-columns:1fr} .crow .dim{background:var(--surface-hi)} .paper{grid-template-columns:1fr;gap:12px} .paper .meta{display:flex;gap:14px} .paper .meta b{margin-bottom:0} .tier{grid-template-columns:1fr;gap:12px} }