/* =====================================================================
   ETS "XP" EDITORIAL SYSTEM (v5, 2026-09-26)
   Long-form, dark-cinematic inner-page system. Prefix: xp-
   Loaded by pages that opt in: <link rel="stylesheet" href="/assets/css/xp.css">
   ===================================================================== */
.xp { --xp-bg: #05090f; --xp-ink: #e7edf5; --xp-mute: #8a9bb2; --xp-dim: #56657a; --xp-line: rgba(148,163,184,.14);
  --xp-teal: #2ee6d3; --xp-teal-2: #0fb5a6; --xp-amber: #f5a524; --xp-rose: #fb7185; --xp-paper: #f4f1ea; --xp-ink-dark: #0b1220;
  --xp-serif: "Fraunces", Georgia, serif; --xp-sans: "Inter", system-ui, sans-serif; --xp-mono: "JetBrains Mono", ui-monospace, monospace;
  background: var(--xp-bg); color: var(--xp-ink); font-family: var(--xp-sans); overflow-x: clip; }
.xp *, .xp *::before, .xp *::after { box-sizing: border-box; }
.xp .xw { width: min(1240px, 100% - clamp(2.5rem, 6vw, 5rem)); margin-inline: auto; }
.xp .xw--narrow { width: min(820px, 100% - 2.5rem); }
.xp a { color: inherit; }
.xp p { line-height: 1.75; }

/* ---------- kicker / labels ---------- */
.xp-k { font: 600 .72rem/1 var(--xp-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--xp-teal); display: inline-flex; gap: .7rem; align-items: center; margin: 0 0 1.4rem; }
.xp-k::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.xp-k--amber { color: var(--xp-amber); } .xp-k--rose { color: var(--xp-rose); }

/* ---------- HERO ---------- */
.xp-hero { position: relative; isolation: isolate; padding: clamp(5rem, 11vw, 9rem) 0 clamp(4rem, 8vw, 6.5rem); overflow: hidden; border-bottom: 1px solid var(--xp-line); }
.xp-hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; z-index: -2;
  background: radial-gradient(closest-side, rgba(46,230,211,.22), rgba(46,230,211,0) 70%); filter: blur(10px); }
.xp-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.06) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 70% 20%, #000, transparent 75%); mask-image: radial-gradient(ellipse 80% 80% at 70% 20%, #000, transparent 75%); }
.xp-hero--img { background-size: cover; background-position: center; }
.xp-hero--img .xp-hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #05090f 30%, rgba(5,9,15,.72) 60%, rgba(5,9,15,.35)); }
/* Cinematic video hero: the clip is the showpiece (bright, right-weighted), the
   left-edge cine-scrim carries legibility. Video markup is the standard cine layer:
   <video class="cine-video" muted loop playsinline preload="none" poster=... data-src=...>
   + <div class="cine-scrim">, lazily played by prestige-cine.js while in view. */
.xp-hero--cine { background: #04070c; }
.xp-hero--cine .cine-video { --cine-video-o: .78; opacity: var(--cine-video-o); filter: saturate(.8) contrast(1.04); z-index: -2; }
.xp-hero--cine .cine-scrim { z-index: -1; background: linear-gradient(90deg, #05090f 34%, rgba(5,9,15,.78) 62%, rgba(5,9,15,.42)); }
.xp-hero--cine::after { opacity: .55; } /* keep the grid texture, let video read through */
@media (prefers-reduced-motion: reduce) { .xp-hero--cine .cine-video { display: none; } .xp-hero--cine { background-image: var(--xp-hero-poster, none); background-size: cover; background-position: center; } }
.xp-crumb { font: 500 .72rem/1 var(--xp-mono); letter-spacing: .08em; color: var(--xp-dim); margin: 0 0 2.2rem; }
.xp-crumb a { color: var(--xp-mute); text-decoration: none; } .xp-crumb a:hover { color: var(--xp-teal); }
.xp-crumb span { margin: 0 .5rem; opacity: .5; }
.xp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: end; }
.xp-h1 { font-family: var(--xp-serif); font-weight: 500; font-size: clamp(2.8rem, 6.6vw, 6rem); line-height: .98; letter-spacing: -.035em; color: #fff; margin: 0; text-wrap: balance; }
.xp-h1 em { font-style: italic; font-weight: 400; background: linear-gradient(95deg, #7ff5e8, #2ee6d3 40%, #7cc7ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.xp-lede { font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.65; color: #b9c6d6; max-width: 40rem; margin: 2rem 0 0; }
.xp-lede strong { color: #fff; font-weight: 600; }
.xp-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.5rem; align-items: center; }
.xp-btn { display: inline-flex; align-items: center; gap: .6rem; height: 54px; padding: 0 1.7rem; border-radius: 999px; font: 600 .98rem/1 var(--xp-sans); text-decoration: none !important; transition: transform .25s, box-shadow .25s, background .25s; cursor: pointer; border: 0; }
.xp-btn--p { background: linear-gradient(180deg, #3ff2df, #10b3a4); color: #03211e !important; box-shadow: 0 18px 40px -16px rgba(46,230,211,.7), inset 0 1px 0 rgba(255,255,255,.4); }
.xp-btn--p:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -16px rgba(46,230,211,.85), inset 0 1px 0 rgba(255,255,255,.4); }
.xp-btn--g { color: #e7edf5 !important; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(226,232,240,.25); }
.xp-btn--g:hover { background: rgba(255,255,255,.09); }
.xp-fine { font: 500 .7rem/1.6 var(--xp-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--xp-dim); margin-top: 1.2rem; }

/* spec panel in hero */
.xp-spec { border: 1px solid var(--xp-line); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); backdrop-filter: blur(6px); padding: .4rem 1.4rem; }
.xp-spec-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1.05rem 0; border-bottom: 1px dashed var(--xp-line); align-items: baseline; }
.xp-spec-row:last-child { border-bottom: 0; }
.xp-spec-row span { font: 500 .7rem/1.3 var(--xp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--xp-mute); }
.xp-spec-row b { font: 600 1.35rem/1 var(--xp-mono); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-align: right; }
.xp-spec-row b small { font-size: .7rem; color: var(--xp-teal); margin-left: .3rem; }

/* ---------- STAT RAIL ---------- */
.xp-rail { border-bottom: 1px solid var(--xp-line); background: #070c14; }
.xp-rail .xw { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.xp-rail div { padding: 2.2rem 1.5rem; border-left: 1px solid var(--xp-line); }
.xp-rail div:first-child { border-left: 0; padding-left: 0; }
.xp-rail b { display: block; font: 500 clamp(2rem, 3.6vw, 3rem)/1 var(--xp-serif); color: #fff; letter-spacing: -.03em; }
.xp-rail span { display: block; margin-top: .7rem; font: 500 .7rem/1.4 var(--xp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--xp-mute); }

/* ---------- SECTIONS ---------- */
.xp-sec { padding: clamp(5rem, 10vw, 8.5rem) 0; position: relative; }
.xp-sec + .xp-sec { border-top: 1px solid var(--xp-line); }
.xp-sec--paper { background: var(--xp-paper); color: var(--xp-ink-dark); }
.xp-sec--paper .xp-h2, .xp-sec--paper h3 { color: var(--xp-ink-dark) !important; }
.xp-sec--paper p, .xp-sec--paper li { color: #3b4658; }
.xp-sec--paper .xp-k { color: #0b8f84; }
.xp-sec--deep { background: radial-gradient(900px 500px at 10% 0%, rgba(46,230,211,.08), transparent 60%), #03060b; }
.xp-h2 { font-family: var(--xp-serif); font-weight: 500; font-size: clamp(2.1rem, 4.4vw, 3.9rem); line-height: 1.03; letter-spacing: -.03em; color: #fff; margin: 0 0 1.5rem; max-width: 18ch; text-wrap: balance; }
.xp-h2 em { font-style: italic; color: var(--xp-teal); }
.xp-sec--paper .xp-h2 em { color: #0b8f84; }
.xp-intro { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.xp-intro p { font-size: 1.12rem; color: #a9b7c8; margin: 0 0 1.1rem; }
.xp-sec--paper .xp-intro p { color: #44516a; }
.xp-intro p:first-child::first-letter { font-family: var(--xp-serif); float: left; font-size: 4.1rem; line-height: .82; margin: .35rem .6rem 0 0; color: var(--xp-teal); }
.xp-sec--paper .xp-intro p:first-child::first-letter { color: #0b8f84; }

/* chapter list (numbered long-form) */
.xp-ch { list-style: none; margin: 0; padding: 0; counter-reset: ch; border-top: 1px solid var(--xp-line); }
.xp-ch > li { counter-increment: ch; display: grid; grid-template-columns: 5rem minmax(0, .9fr) minmax(0, 1.3fr); gap: 2rem; padding: 2.6rem 0; border-bottom: 1px solid var(--xp-line); transition: background .3s; }
.xp-ch > li:hover { background: linear-gradient(90deg, rgba(46,230,211,.04), transparent); }
.xp-ch > li::before { content: counter(ch, decimal-leading-zero); font: 500 .85rem/1 var(--xp-mono); color: var(--xp-teal); padding-top: .55rem; }
.xp-ch h3 { font-family: var(--xp-serif); font-weight: 500; font-size: clamp(1.45rem, 2.2vw, 1.95rem); line-height: 1.15; letter-spacing: -.015em; color: #fff; margin: 0; }
.xp-ch p { margin: 0 0 .8rem; color: #a3b1c4; }
.xp-ch .xp-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.xp-sec--paper .xp-ch { border-color: rgba(11,18,32,.12); } .xp-sec--paper .xp-ch > li { border-color: rgba(11,18,32,.12); }
.xp-sec--paper .xp-ch > li::before { color: #0b8f84; } .xp-sec--paper .xp-ch p { color: #44516a; }
.xp-tag { font: 500 .66rem/1 var(--xp-mono); letter-spacing: .08em; text-transform: uppercase; padding: .45rem .65rem; border-radius: 999px; border: 1px solid var(--xp-line); color: var(--xp-mute); }
.xp-sec--paper .xp-tag { border-color: rgba(11,18,32,.15); color: #52607a; }

/* card grid */
.xp-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--xp-line); border: 1px solid var(--xp-line); border-radius: 20px; overflow: hidden; }
.xp-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .xp-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.xp-card { background: var(--xp-bg); padding: clamp(1.8rem, 3vw, 2.6rem); display: flex; flex-direction: column; gap: .9rem; position: relative; text-decoration: none !important; transition: background .35s; min-height: 100%; }
a.xp-card:hover { background: #0a111c; }
a.xp-card:hover .xp-card-go { color: var(--xp-teal); transform: translateX(4px); }
.xp-card .xp-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(46,230,211,.1); color: var(--xp-teal); font: 600 .78rem var(--xp-mono); border: 1px solid rgba(46,230,211,.25); }
.xp-card h3 { font-family: var(--xp-serif); font-weight: 500; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.01em; color: #fff; margin: .3rem 0 0; }
.xp-card p { color: #97a6ba; margin: 0; font-size: .98rem; line-height: 1.65; }
.xp-card ul { list-style: none; padding: 0; margin: .3rem 0 0; display: grid; gap: .55rem; }
.xp-card li { color: #b7c3d2; font-size: .93rem; padding-left: 1.4rem; position: relative; line-height: 1.5; }
.xp-card li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--xp-teal); transform: rotate(45deg); opacity: .8; }
.xp-card-go { margin-top: auto; padding-top: 1rem; font: 600 .78rem/1 var(--xp-mono); letter-spacing: .1em; text-transform: uppercase; color: #cfd8e3; transition: color .25s, transform .25s; display: inline-block; }
.xp-card-meta { font: 500 .68rem/1 var(--xp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--xp-amber); }
.xp-sec--paper .xp-grid { background: rgba(11,18,32,.12); border-color: rgba(11,18,32,.12); }
.xp-sec--paper .xp-card { background: #fbfaf7; } .xp-sec--paper a.xp-card:hover { background: #fff; }
.xp-sec--paper .xp-card h3 { color: #0b1220; } .xp-sec--paper .xp-card p, .xp-sec--paper .xp-card li { color: #4a566b; }
.xp-sec--paper .xp-card-go { color: #0b1220; } .xp-sec--paper .xp-card .xp-ico { color: #0b8f84; background: rgba(11,143,132,.08); border-color: rgba(11,143,132,.25); }

/* pull quote */
.xp-quote { margin: 0; padding: clamp(3rem, 7vw, 5rem) 0; text-align: center; }
.xp-quote blockquote { margin: 0 auto; max-width: 22ch; font: 400 italic clamp(2rem, 4.6vw, 3.6rem)/1.12 var(--xp-serif); letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.xp-quote blockquote::before { content: "\201C"; display: block; font-size: 5rem; line-height: .6; color: var(--xp-teal); margin-bottom: 1rem; }
.xp-quote figcaption { margin-top: 1.8rem; font: 500 .72rem/1.5 var(--xp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--xp-mute); }

/* timeline */
.xp-tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; border-top: 2px solid rgba(46,230,211,.35); }
.xp-tl li { padding: 2rem 1.5rem 0 0; position: relative; }
.xp-tl li::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--xp-bg); border: 2px solid var(--xp-teal); }
.xp-tl li:last-child::before { background: var(--xp-teal); box-shadow: 0 0 0 6px rgba(46,230,211,.18); }
.xp-tl b { display: block; font: 500 2.2rem/1 var(--xp-serif); color: #fff; letter-spacing: -.02em; }
.xp-tl h4 { font: 600 .74rem/1.3 var(--xp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--xp-teal); margin: .9rem 0 .6rem; }
.xp-tl p { color: #93a3b7; font-size: .93rem; line-height: 1.6; margin: 0; }

/* comparison */
.xp-cmp { width: 100%; border-collapse: collapse; font-size: .98rem; }
.xp-cmp th, .xp-cmp td { padding: 1.15rem 1rem; text-align: left; border-bottom: 1px solid var(--xp-line); vertical-align: top; }
.xp-cmp thead th { font: 600 .7rem/1 var(--xp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--xp-mute); }
.xp-cmp thead th:last-child { color: var(--xp-teal); }
.xp-cmp td:first-child { color: #fff; font-weight: 600; width: 26%; }
.xp-cmp td { color: #8e9db2; } .xp-cmp td:last-child { color: #d9fbf6; background: rgba(46,230,211,.05); }
.xp-sec--paper .xp-cmp td:first-child { color: #0b1220; } .xp-sec--paper .xp-cmp td { color: #56627a; border-color: rgba(11,18,32,.1); }
.xp-sec--paper .xp-cmp td:last-child { color: #06423c; background: rgba(11,143,132,.07); } .xp-sec--paper .xp-cmp thead th:last-child { color: #0b8f84; }

/* split media */
.xp-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.xp-frame { border-radius: 22px; overflow: hidden; border: 1px solid var(--xp-line); box-shadow: 0 60px 120px -50px rgba(0,0,0,.9); position: relative; background: #0a111c; }
.xp-frame img { display: block; width: 100%; height: auto; }
.xp-frame figcaption { position: absolute; left: 1rem; bottom: 1rem; font: 500 .66rem/1 var(--xp-mono); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(5,9,15,.7); padding: .5rem .7rem; border-radius: 6px; }
.xp-book { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 2.2rem; align-items: center; }
.xp-book img { width: 180px; border-radius: 4px; box-shadow: 30px 40px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); transform: perspective(900px) rotateY(-14deg); }

/* check list big */
.xp-checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem 2.5rem; }
.xp-checks li { padding: 1.1rem 0 1.1rem 2.4rem; border-bottom: 1px solid var(--xp-line); position: relative; color: #b7c3d2; line-height: 1.55; }
.xp-checks li::before { content: "\2713"; position: absolute; left: 0; top: 1.05rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; background: rgba(46,230,211,.14); color: var(--xp-teal); }
.xp-checks strong { color: #fff; }
.xp-sec--paper .xp-checks li { color: #44516a; border-color: rgba(11,18,32,.1); } .xp-sec--paper .xp-checks strong { color: #0b1220; }

/* CLOSE */
.xp-close { padding: clamp(5.5rem, 11vw, 9rem) 0; text-align: center; position: relative; isolation: isolate; overflow: hidden; background: #03060b; border-top: 1px solid var(--xp-line); }
.xp-close::before { content: ""; position: absolute; left: 50%; top: 100%; width: 1200px; height: 800px; transform: translate(-50%, -55%); z-index: -1; background: radial-gradient(closest-side, rgba(46,230,211,.25), transparent 70%); }
.xp-close .xp-h2 { margin: 0 auto 1.4rem; max-width: 20ch; font-size: clamp(2.4rem, 5.4vw, 4.6rem); }
.xp-close p { color: #a9b7c8; max-width: 40rem; margin: 0 auto; font-size: 1.12rem; }
.xp-close .xp-actions { justify-content: center; }
.xp-rr { list-style: none; padding: 0; margin: 3rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem; font: 500 .7rem/1 var(--xp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--xp-mute); }
.xp-rr li::before { content: "\25C6  "; color: var(--xp-teal); }

/* index strip (jump nav) */
.xp-jump { position: sticky; top: 0; z-index: 20; background: rgba(5,9,15,.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--xp-line); }
.xp-jump .xw { display: flex; gap: 1.8rem; overflow-x: auto; scrollbar-width: none; }
.xp-jump a { flex: none; padding: 1rem 0; font: 600 .7rem/1 var(--xp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--xp-mute); text-decoration: none; border-bottom: 2px solid transparent; }
.xp-jump a:hover { color: #fff; border-color: var(--xp-teal); }

/* reveal */
.xp-js .xp-r { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.xp-js .xp-r.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .xp-js .xp-r { opacity: 1; transform: none; transition: none; } }

/* main-content wrapper neutralise */
main.main-content.xp { padding: 0 !important; margin: 0 !important; max-width: none !important; }
main.main-content.xp > section { padding-left: 0; padding-right: 0; }
main.main-content.xp h2, main.main-content.xp h3 { border: 0; }
.theme-dark .xp-sec--paper { background: #0d141f; color: #e7edf5; }
.theme-dark .xp-sec--paper .xp-h2, .theme-dark .xp-sec--paper h3, .theme-dark .xp-sec--paper .xp-card h3, .theme-dark .xp-sec--paper .xp-cmp td:first-child, .theme-dark .xp-sec--paper .xp-checks strong, .theme-dark .xp-sec--paper .xp-card-go { color: #fff !important; }
.theme-dark .xp-sec--paper p, .theme-dark .xp-sec--paper li, .theme-dark .xp-sec--paper .xp-card p, .theme-dark .xp-sec--paper .xp-card li { color: #a9b7c8; }
.theme-dark .xp-sec--paper .xp-card { background: #0a111c; }

@media (max-width: 1000px) {
  .xp-hero-grid, .xp-intro, .xp-split { grid-template-columns: 1fr; }
  .xp-grid, .xp-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .xp-tl { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid rgba(46,230,211,.35); }
  .xp-tl li { padding: 0 0 2rem 2rem; } .xp-tl li::before { top: 4px; left: -8px; }
  .xp-ch > li { grid-template-columns: 3rem minmax(0,1fr); } .xp-ch > li > div:last-child { grid-column: 2; }
  .xp-rail .xw { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .xp-rail div:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .xp-grid, .xp-grid--2, .xp-grid--4, .xp-checks { grid-template-columns: 1fr; }
  .xp-book { grid-template-columns: 1fr; } .xp-book img { width: 140px; }
  .xp-cmp thead { display: none; } .xp-cmp tr { display: block; border-bottom: 1px solid var(--xp-line); padding: .8rem 0; }
  .xp-cmp td { display: block; border: 0; padding: .35rem 0; width: auto !important; }
  .xp-btn { width: 100%; justify-content: center; }
}

/* specificity guard vs prestige.css main.main-content h2 */
main.main-content.xp .xp-h2 { font-size: clamp(2.1rem, 4.4vw, 3.9rem); line-height: 1.03; font-weight: 500; }
main.main-content.xp .xp-close .xp-h2 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); }
main.main-content.xp .xp-card h3 { font-size: 1.5rem; }
main.main-content.xp .xp-intro p:only-child::first-letter { float: none; font-size: inherit; margin: 0; color: inherit; font-family: inherit; }

.xp-h1 em { padding-right: .12em; margin-right: -.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ===== v5b components: tiers, steps, roi, form, marquee strip, bento ===== */
.xp-tiers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.2rem; align-items: stretch; }
.xp-tier { position: relative; border-radius: 22px; padding: 2.2rem 2rem 2rem; border: 1px solid var(--xp-line); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)); display: flex; flex-direction: column; gap: 1rem; }
.xp-tier--hot { border-color: rgba(46,230,211,.55); background: radial-gradient(600px 300px at 50% -20%, rgba(46,230,211,.18), transparent 70%), #07101b; box-shadow: 0 40px 90px -40px rgba(46,230,211,.45); transform: translateY(-10px); }
.xp-tier-flag { position: absolute; top: -12px; left: 2rem; font: 700 .64rem/1 var(--xp-mono); letter-spacing: .14em; text-transform: uppercase; background: var(--xp-teal); color: #03211e; padding: .45rem .7rem; border-radius: 999px; }
.xp-tier h3 { font: 600 .78rem/1 var(--xp-mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--xp-teal) !important; margin: 0 !important; }
.xp-tier .xp-price { font: 500 clamp(2.2rem, 3.6vw, 3rem)/1 var(--xp-serif); color: #fff; letter-spacing: -.03em; }
.xp-tier .xp-price small { font: 500 .8rem var(--xp-mono); color: var(--xp-mute); letter-spacing: .04em; margin-left: .3rem; }
.xp-tier .xp-for { color: #a9b7c8; font-size: .95rem; line-height: 1.55; margin: 0; }
.xp-tier ul { list-style: none; margin: .4rem 0 0; padding: 1.2rem 0 0; border-top: 1px dashed var(--xp-line); display: grid; gap: .7rem; }
.xp-tier li { color: #c8d3e0; font-size: .94rem; padding-left: 1.6rem; position: relative; line-height: 1.45; }
.xp-tier li::before { content: "\2713"; position: absolute; left: 0; color: var(--xp-teal); font-weight: 700; }
.xp-tier .xp-btn { margin-top: auto; justify-content: center; }
.xp-steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; counter-reset: st; position: relative; }
.xp-steps::before { content: ""; position: absolute; top: 27px; left: 28px; right: 28px; height: 1px; background: linear-gradient(90deg, var(--xp-teal), rgba(46,230,211,.1)); }
.xp-steps li { list-style: none; counter-increment: st; padding-right: 1.5rem; position: relative; }
.xp-steps li::before { content: counter(st); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #05090f; border: 1px solid rgba(46,230,211,.5); color: var(--xp-teal); font: 600 1.1rem var(--xp-mono); margin-bottom: 1.4rem; position: relative; }
.xp-steps b { display: block; color: #fff; font: 500 1.25rem/1.2 var(--xp-serif); margin-bottom: .5rem; }
.xp-steps span { color: #97a6ba; font-size: .95rem; line-height: 1.6; display: block; }
.xp-sec--paper .xp-steps li::before { background: var(--xp-paper); color: #0b8f84; border-color: rgba(11,143,132,.5); }
.xp-sec--paper .xp-steps b { color: #0b1220; } .xp-sec--paper .xp-steps span { color: #4a566b; }
.xp-roi { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0; border: 1px solid var(--xp-line); border-radius: 22px; overflow: hidden; }
.xp-roi-in { padding: 2.2rem; display: grid; gap: 1.4rem; background: #070c14; }
.xp-roi-in label { display: grid; gap: .6rem; font: 500 .72rem/1 var(--xp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--xp-mute); }
.xp-roi-in output { color: #fff; font-size: .95rem; letter-spacing: 0; text-transform: none; float: right; }
.xp-roi input[type=range] { width: 100%; accent-color: #2ee6d3; }
.xp-roi-out { padding: 2.2rem; background: radial-gradient(500px 300px at 100% 0%, rgba(46,230,211,.16), transparent 70%), #04070c; display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; }
.xp-roi-out div span { display: block; font: 500 .7rem/1 var(--xp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--xp-mute); margin-bottom: .5rem; }
.xp-roi-out div b { font: 500 clamp(2rem, 4vw, 3.2rem)/1 var(--xp-serif); color: #fff; letter-spacing: -.03em; }
.xp-roi-out div b.pos { color: var(--xp-teal); }
.xp-roi-fine { font-size: .8rem; color: var(--xp-dim); line-height: 1.5; margin: 0; }
.xp-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; padding: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid var(--xp-line); border-radius: 22px; background: #070c14; }
.xp-form .full { grid-column: 1 / -1; }
.xp-form label { display: grid; gap: .5rem; font: 500 .7rem/1 var(--xp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--xp-mute); }
.xp-form input, .xp-form select, .xp-form textarea { width: 100%; padding: .9rem 1rem; border-radius: 12px; border: 1px solid rgba(148,163,184,.25); background: rgba(255,255,255,.04); color: #fff; font: 400 1rem var(--xp-sans); letter-spacing: 0; text-transform: none; }
.xp-form select option { color: #0b1220; }
.xp-form input:focus, .xp-form select:focus, .xp-form textarea:focus { outline: 2px solid var(--xp-teal); outline-offset: 1px; border-color: transparent; }
.xp-form .xp-btn { justify-self: start; }
.xp-form-note { grid-column: 1/-1; color: var(--xp-dim); font-size: .85rem; margin: 0; }
.xp-bento { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1rem; }
.xp-bento > * { border-radius: 20px; border: 1px solid var(--xp-line); background: #070c14; padding: 2rem; text-decoration: none !important; display: flex; flex-direction: column; gap: .7rem; transition: border-color .3s, transform .3s; position: relative; overflow: hidden; }
.xp-bento > a:hover { border-color: rgba(46,230,211,.5); transform: translateY(-3px); }
.xp-bento .b-lg { grid-column: span 4; grid-row: span 2; background: radial-gradient(600px 400px at 90% 0%, rgba(46,230,211,.16), transparent 65%), #070c14; }
.xp-bento .b-md { grid-column: span 2; } .xp-bento .b-hf { grid-column: span 3; }
.xp-bento h3 { font: 500 1.5rem/1.15 var(--xp-serif); color: #fff; margin: .2rem 0 0; }
.xp-bento .b-lg h3 { font-size: clamp(2rem, 3.4vw, 2.9rem); letter-spacing: -.02em; max-width: 16ch; }
.xp-bento p { color: #97a6ba; margin: 0; line-height: 1.6; }
.xp-bento .b-num { font: 500 3rem/1 var(--xp-serif); color: var(--xp-teal); letter-spacing: -.03em; }
.xp-strip { border-block: 1px solid var(--xp-line); background: #03060b; overflow: hidden; padding: 1.3rem 0; }
.xp-strip div { display: flex; gap: 3rem; width: max-content; animation: xpScroll 40s linear infinite; font: 500 .8rem/1 var(--xp-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--xp-mute); }
.xp-strip b { color: var(--xp-teal); font-weight: 600; }
@keyframes xpScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .xp-strip div { animation: none; } }
@media (max-width: 1000px) { .xp-tiers, .xp-steps { grid-template-columns: 1fr 1fr; } .xp-steps::before { display: none; } .xp-tier--hot { transform: none; } .xp-roi { grid-template-columns: 1fr; } .xp-bento .b-lg, .xp-bento .b-md, .xp-bento .b-hf { grid-column: span 6; } }
@media (max-width: 640px) { .xp-tiers, .xp-steps, .xp-form { grid-template-columns: 1fr; } .xp-steps li { margin-bottom: 2rem; } }

.xp-bento .b-lg { justify-content: flex-end; }
.xp-bento .b-lg .xp-card-go, .xp-bento > a .xp-card-go { margin-top: auto; }
.xp-bento .b-lg p { font-size: 1.05rem; max-width: 42rem; }

/* ===== Market pages reskin (mk-* family, loaded via xp.css) ===== */
main.mk-xp { background: #05090f; color: #e7edf5; }
main.mk-xp .mk-hero { position: relative; isolation: isolate; text-align: left !important; padding: clamp(5rem, 10vw, 8rem) 0 clamp(4rem, 7vw, 6rem) !important; background: #05090f !important; overflow: hidden; border-bottom: 1px solid rgba(148,163,184,.14); }
main.mk-xp .mk-hero::before { content: ""; position: absolute !important; inset: -30% -20% auto auto !important; width: 75vw; height: 75vw; z-index: -1 !important; background: var(--mk-glow, radial-gradient(closest-side, rgba(46,230,211,.22), transparent 70%)) !important; filter: blur(10px); opacity: 1 !important; }
main.mk-xp .mk-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.06) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 70% 20%, #000, transparent 75%); mask-image: radial-gradient(ellipse 80% 80% at 70% 20%, #000, transparent 75%); opacity: 1 !important; mix-blend-mode: normal !important; }
main.mk-xp .mk-hero .container { max-width: 1240px; }
main.mk-xp .mk-hero .badge { display: inline-flex !important; align-items: center; gap: .7rem; background: none !important; border: 0 !important; padding: 0 !important; font: 600 .72rem/1 "JetBrains Mono", monospace !important; letter-spacing: .2em !important; text-transform: uppercase; color: var(--mk-acc, #2ee6d3) !important; margin-bottom: 1.6rem !important; box-shadow: none !important; }
main.mk-xp .mk-hero .badge::before { content: ""; width: 28px; height: 1px; background: currentColor; }
main.mk-xp .mk-hero h1 { font-family: "Fraunces", Georgia, serif !important; font-weight: 500 !important; font-size: clamp(2.8rem, 6.2vw, 5.6rem) !important; line-height: .98 !important; letter-spacing: -.035em; color: #fff !important; max-width: 16ch; margin: 0 0 1.8rem !important; text-wrap: balance; }
main.mk-xp .mk-hero .tagline { font-size: clamp(1.1rem, 1.5vw, 1.3rem) !important; line-height: 1.65 !important; color: #b9c6d6 !important; max-width: 44rem; margin: 0 0 2.4rem !important; opacity: 1 !important; font-weight: 400 !important; }
main.mk-xp .mk-hero .hero-cta { display: inline-flex; align-items: center; height: 56px; padding: 0 1.9rem !important; border-radius: 999px !important; font-weight: 600; background: linear-gradient(180deg, #3ff2df, #10b3a4) !important; color: #03211e !important; box-shadow: 0 18px 40px -16px rgba(46,230,211,.7) !important; text-decoration: none; }
main.mk-xp .mk-hero .hero-sub { font: 500 .72rem/1.6 "JetBrains Mono", monospace !important; letter-spacing: .1em; text-transform: uppercase; color: #56657a !important; margin-top: 1.2rem !important; opacity: 1 !important; }
main.mk-xp .mk-hero .pt-pill, main.mk-xp .mk-hero [class*="pill"] { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(148,163,184,.25) !important; color: #cbd5e1 !important; font: 500 .74rem "JetBrains Mono", monospace !important; border-radius: 999px !important; }
main.mk-xp .mk-hero .powertrains { justify-content: flex-start !important; margin-top: 2rem !important; }
main.mk-xp .mk-sec { padding: clamp(5rem, 9vw, 7.5rem) 0 !important; background: #05090f !important; border-top: 1px solid rgba(148,163,184,.14); }
main.mk-xp .mk-sec.alt { background: #f4f1ea !important; }
main.mk-xp .mk-sec .container { max-width: 1240px; }
main.mk-xp .mk-sec h2 { font-family: "Fraunces", Georgia, serif !important; font-weight: 500 !important; font-size: clamp(2.1rem, 4.4vw, 3.7rem) !important; line-height: 1.03 !important; letter-spacing: -.03em; color: #fff !important; text-align: left !important; max-width: 20ch; margin: 0 0 1.4rem !important; }
main.mk-xp .mk-sec .sec-sub { text-align: left !important; margin: 0 0 3.5rem !important; max-width: 46rem !important; color: #a9b7c8 !important; font-size: 1.12rem !important; line-height: 1.75 !important; }
main.mk-xp .mk-sec.alt h2 { color: #0b1220 !important; } main.mk-xp .mk-sec.alt .sec-sub { color: #44516a !important; }
main.mk-xp .mk-grid { gap: 1px !important; background: rgba(148,163,184,.14); border: 1px solid rgba(148,163,184,.14); border-radius: 22px; overflow: hidden; }
main.mk-xp .mk-card { background: #05090f !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: clamp(1.8rem, 3vw, 2.5rem) !important; transform: none !important; }
main.mk-xp .mk-card:hover { background: #0a111c !important; }
main.mk-xp .mk-card h3 { font-family: "Fraunces", Georgia, serif !important; font-weight: 500 !important; font-size: 1.5rem !important; color: #fff !important; letter-spacing: -.01em; }
main.mk-xp .mk-card p, main.mk-xp .mk-card li { color: #97a6ba !important; line-height: 1.65; }
main.mk-xp .mk-card .icon, main.mk-xp .mk-card .mk-ico { filter: grayscale(.2); }
main.mk-xp .mk-card .tag, main.mk-xp .mk-card [class*="tag"] { background: none !important; border: 1px solid rgba(148,163,184,.22) !important; color: var(--mk-acc, #5eead4) !important; font: 500 .66rem "JetBrains Mono", monospace !important; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px !important; }
main.mk-xp .mk-rows { border-top: 1px solid rgba(148,163,184,.14); }
main.mk-xp .mk-row { background: none !important; border: 0 !important; border-bottom: 1px solid rgba(148,163,184,.14) !important; border-radius: 0 !important; box-shadow: none !important; padding: 2.2rem 0 2.2rem 4.5rem !important; margin: 0 !important; position: relative; counter-increment: mkr; }
main.mk-xp .mk-rows { counter-reset: mkr; }
main.mk-xp .mk-row::before { content: counter(mkr, decimal-leading-zero); position: absolute; left: 0; top: 2.5rem; font: 500 .85rem "JetBrains Mono", monospace; color: var(--mk-acc, #2ee6d3); }
main.mk-xp .mk-row h3, main.mk-xp .mk-row h4 { font-family: "Fraunces", Georgia, serif !important; font-weight: 500 !important; font-size: clamp(1.4rem, 2.2vw, 1.85rem) !important; color: #fff !important; margin: 0 0 .6rem !important; }
main.mk-xp .mk-row p { color: #a3b1c4 !important; line-height: 1.7; max-width: 60rem; margin: 0; }
main.mk-xp .mk-sec.alt .mk-row { border-color: rgba(11,18,32,.12) !important; } main.mk-xp .mk-sec.alt .mk-rows { border-color: rgba(11,18,32,.12); }
main.mk-xp .mk-sec.alt .mk-row h3, main.mk-xp .mk-sec.alt .mk-row h4 { color: #0b1220 !important; } main.mk-xp .mk-sec.alt .mk-row p { color: #4a566b !important; }
main.mk-xp .mk-sec.alt .mk-row::before { color: #0b8f84; }
main.mk-xp .mk-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 0 !important; border-top: 1px solid rgba(148,163,184,.14); border-bottom: 1px solid rgba(148,163,184,.14); }
main.mk-xp .mk-stat { background: none !important; border: 0 !important; border-left: 1px solid rgba(148,163,184,.14) !important; border-radius: 0 !important; box-shadow: none !important; padding: 2rem 1.5rem !important; text-align: left !important; }
main.mk-xp .mk-stat:first-child { border-left: 0 !important; padding-left: 0 !important; }
main.mk-xp .mk-stat .num { font-family: "Fraunces", Georgia, serif !important; font-weight: 500 !important; font-size: clamp(2rem, 3.6vw, 3rem) !important; color: #fff !important; background: none !important; -webkit-text-fill-color: #fff !important; letter-spacing: -.03em; }
main.mk-xp .mk-stat .lbl { font: 500 .7rem/1.4 "JetBrains Mono", monospace !important; letter-spacing: .12em; text-transform: uppercase; color: #8a9bb2 !important; margin-top: .6rem; opacity: 1 !important; }
main.mk-xp .mk-cta { position: relative; isolation: isolate; overflow: hidden; background: #03060b !important; padding: clamp(5.5rem, 11vw, 9rem) 0 !important; text-align: center; border-top: 1px solid rgba(148,163,184,.14); }
main.mk-xp .mk-cta::before { content: ""; position: absolute; left: 50%; top: 100%; width: 1200px; height: 800px; transform: translate(-50%, -55%); z-index: -1; background: radial-gradient(closest-side, rgba(46,230,211,.25), transparent 70%); }
main.mk-xp .mk-cta h2 { font-family: "Fraunces", Georgia, serif !important; font-weight: 500 !important; font-size: clamp(2.4rem, 5.2vw, 4.4rem) !important; line-height: 1.03 !important; letter-spacing: -.03em; color: #fff !important; max-width: 20ch; margin: 0 auto 1.4rem !important; }
main.mk-xp .mk-cta p { color: #a9b7c8 !important; max-width: 42rem; margin: 0 auto 2.4rem !important; font-size: 1.1rem !important; line-height: 1.7; opacity: 1 !important; }
main.mk-xp .mk-cta .btn { display: inline-flex; align-items: center; height: 56px; padding: 0 2rem !important; border-radius: 999px !important; font-weight: 600; background: linear-gradient(180deg, #3ff2df, #10b3a4) !important; color: #03211e !important; box-shadow: 0 18px 40px -16px rgba(46,230,211,.7) !important; font-size: 1rem !important; }
main.mk-xp .mk-cta .btn.ghost, main.mk-xp .mk-cta .btn + .btn { background: rgba(255,255,255,.04) !important; color: #e7edf5 !important; box-shadow: inset 0 0 0 1px rgba(226,232,240,.25) !important; margin-left: .6rem; }
@media (max-width: 800px) { main.mk-xp .mk-stats { grid-template-columns: 1fr 1fr !important; } main.mk-xp .mk-stat:nth-child(3) { border-left: 0 !important; padding-left: 0 !important; } main.mk-xp .mk-row { padding-left: 3rem !important; } }