:root { --bg: #0a0a0c; --surface: #0e0e12; --surface2: #121218; --surface3: #18181f; --border: #1a1a24; --border2: #24243a; --border3: #30304a; --accent: #00d4ff; --accent-dim: rgba(0,212,255,0.07); --accent-glow: rgba(0,212,255,0.18); --green: #00ff7f; --green-dim: rgba(0,255,127,0.07); --red: #ff3040; --red-dim: rgba(255,48,64,0.07); --amber: #ffb020; --purple: #a06eff; --text: #dcdce8; --text-mid: #9494ae; --text-dim: #78788e; --mono: 'IBM Plex Mono', monospace; --sans: 'Outfit', sans-serif; --shadow-sm: 3px 3px 0px #000; --shadow-md: 5px 5px 0px #000; --shadow-lg: 8px 8px 0px #000; --shadow-hover: 7px 7px 0px #000; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body { background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 16px; line-height: 1.7; overflow-x: clip; }
.bg-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image:
  linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px); background-size: 52px 52px; will-change: transform; animation: gridDrift 12s linear infinite; }
@keyframes gridDrift {
  0% { transform: translateY(0); }
  100% { transform: translateY(52px); }
}
@media (max-width: 768px) {
.bg-grid { display: none; }
.noise { display: none; }
body::after { display: none; }
.nav { backdrop-filter: none; background: rgba(10,10,12,0.99); }
.faq-item { padding: 14px 0; }
.ct-outer::after { display: block; }
.bp-spine { display: none; }
.bp-phase { display: flex; flex-direction: row; gap: 18px; padding-bottom: 56px; align-items: start; position: relative; }
.bp-spacer { display: none; }
.bp-node-wrap { order: 1; flex-shrink: 0; width: 56px; position: relative; z-index: 2; margin-left: 16px; }
/* Vertical spine drawn on .bp-phase::before (not .bp-node-wrap::before).
   Why: flex `align-self: stretch` only stretches a child to the parent's CONTENT-box height,
   so a line in a stretched wrap stops short of phase's padding-bottom — leaving a gap between phases.
   Putting the line on .bp-phase::before (position:absolute inside position:relative phase) makes
   `bottom:0` reach the full padding-edge of the phase, so adjacent phases butt together with zero gap.
   left: 16px margin-left + 28px (half of 56px wrap) = 44px center of node column. */
.bp-phase::before { content: ''; position: absolute; left: 26px; transform: translateX(-0.5px); width: 1px; top: 0; bottom: 0; background: var(--border2); z-index: 0; pointer-events: none; }
.bp-ph-01::before { top: 20px; }
.bp-content { order: 2; flex: 1; text-align: left !important; }
.bp-left .bp-list li { padding-left: 18px; padding-right: 0; }
.bp-left .bp-list li::before { display: block; }
.bp-left .bp-list li::after { display: none; }
.bp-left .bp-result { flex-direction: row; }
.bp-node { width: 56px; height: 56px; }
.bp-diamond { width: 20px; height: 20px; }
.bp-node::before { width: 38px; height: 38px; }
.bp-pulse { inset: 8px; }
.bp-cross-h { left: -14px; right: -14px; }
.bp-cross-v { top: -14px; bottom: -14px; }
.bp-title { font-size: 1.4rem; margin-bottom: 12px; }
.bp-list li { font-size: 0.68rem; }
.bp-result-val { font-size: 0.66rem; }
.modal-overlay, .exit-popup-overlay { backdrop-filter: none; background: rgba(0,0,0,.96); }
.faq-q { padding: 8px 0; }
.b-main, .b-ghost, .b-buy { font-size: 0.85rem; }
.mod-item:hover { transform: none; box-shadow: var(--shadow-md); }
.sec { padding: 56px 0; }
.d-strip { flex-wrap: wrap; }
.d-cell { min-width: calc(50% - 8px); }
.hero-right { order: -1; width: 100%; }
.hero-wrap { gap: 24px; }
.hero-glow { width: 400px; height: 400px; left: 0; top: -100px; }
.hero-grid { display: none; }
.sec { overflow-x: clip; }
.sec-dark { overflow-x: clip; }
.blueprint-timeline { overflow-x: clip; }
.c-grid { overflow-x: hidden; }
.ticker-wrap { position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; }
.sec { padding: 64px 0; }
.d-cell::after { display: none; }
.sep::after { display: none; }
.hero-glow-2 { display: none; }
.bp-node-wrap { width: 56px; }
.bp-content { padding: 16px 18px; }
.bp-left .bp-content { border-left: 2px solid rgba(0,212,255,0.28); border-right: 1px solid rgba(255,255,255,0.05); }
.proof-bar { height: 32px; }
.pb-msg { font-size: 0.6rem; letter-spacing: 0.5px; padding: 0 14px; }
.pb-msg[data-msg="1"], .pb-msg[data-msg="2"] { display: none; }
.pb-msg[data-msg="0"] { opacity: 1 !important; transform: none !important; }
.nav { top: 32px; }
.hero { padding-top: 124px; }
.lb-grid { grid-template-columns: 1fr; gap: 10px; }
.limits-box { padding: 40px 24px; }
.lb-item { padding: 14px 14px; font-size: 0.74rem; }
.lb-tab { left: 18px; font-size: 0.56rem; padding: 3px 10px; }
.pricing-cta .b-buy { animation: mobilePulse 3s ease-in-out infinite; }
@keyframes mobilePulse {
  0%, 100% {
  transform: scale(1);
  opacity: 1;
  box-shadow: var(--shadow-md);
  }
  50% {
  transform: scale(1.02);
  opacity: 0.92;
  box-shadow: var(--shadow-md), 0 0 28px rgba(0,212,255,0.3);
  }
  }
.pricing-cta .b-buy:hover, .pricing-cta .b-buy:active { animation: none; }
#scrollProgress { top: 32px; }
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent); color: #000; }
.skip-link { position: absolute; top: -100%; left: 16px; background: var(--accent); color: #000; font-weight: 700; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; padding: 8px 16px; z-index: 999999; border: 2px solid #000; transition: top 0.2s ease; text-decoration: none; }
.skip-link:focus { top: 4px; outline: 3px solid var(--accent); outline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.noise { position: fixed; inset: 0; z-index: 99997; pointer-events: none; opacity: 0.022; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); }
body::after { content: ''; position: fixed; inset: 0; z-index: 99996; pointer-events: none; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.006) 3px, rgba(0,0,0,0.006) 4px); }
@media (hover: hover) and (pointer: fine) {
body { cursor: none; }
.cursor { position: fixed; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%,-50%); transition: width .18s, height .18s, background .18s; mix-blend-mode: exclusion; will-change: transform; }
.cursor-ring { position: fixed; width: 34px; height: 34px; border: 1px solid rgba(0,212,255,0.4); border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%,-50%); transition: width .25s, height .25s, border-color .25s; will-change: transform; }
.cursor.hover { width: 14px; height: 14px; }
.cursor-ring.hover { width: 54px; height: 54px; border-color: rgba(0,212,255,0.18); }
a, button, .faq-q, .nav-cta, .b-main, .b-ghost, .b-buy, .c-card { cursor: none; }
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.blink-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-right: 7px; vertical-align: middle; box-shadow: 0 0 6px var(--red); animation: blinkDot 1.4s ease-in-out infinite; }
@keyframes blinkDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.2;transform:scale(.7)} }
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 58px; display: flex; align-items: center; padding: 0 32px; background: rgba(10,10,12,0.97); backdrop-filter: blur(12px); border-bottom: 2px solid #000; box-shadow: 0 4px 0px rgba(0,0,0,0.5); transition: transform .3s ease; }
.nav-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 980px; margin: 0 auto; }
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo-text { font-family: var(--sans); font-weight: 900; font-size: 1.1rem; letter-spacing: 7px; color: var(--accent); }
.nav-logo-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 2.5px; color: var(--red); border: 1px solid rgba(255,48,64,0.35); padding: 2px 7px; text-transform: uppercase; }
.nav-center { display: flex; align-items: center; gap: 10px; font-size: 0.7rem; letter-spacing: 2px; color: var(--text-dim); text-transform: uppercase; }
.nav-sep { color: var(--text-dim); }
.nav-status { display: flex; align-items: center; color: var(--red); font-size: 0.7rem; letter-spacing: 2px; }
.nav-cta { font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); border: 2px solid rgba(0,212,255,.3); padding: 7px 20px; transition: all .2s ease; box-shadow: var(--shadow-sm); white-space: nowrap; position: relative; overflow: hidden; }
.nav-cta::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0,212,255,0.08), transparent); animation: sweep 4s ease-in-out infinite 2.5s; }
.nav-cta:hover { background: var(--accent); color: #000; border-color: var(--accent); transform: translate(-2px,-2px); box-shadow: var(--shadow-hover), 0 0 20px rgba(0,212,255,0.3); }
.nav-cta:active { transform: translate(3px,3px); box-shadow: 0 0 0 #000; }
.hero { padding: 106px 0 80px; position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(0,212,255,0.06) 1px, transparent 1px); background-size: 30px 30px; mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 0%, transparent 100%); }
.hero-glow { position: absolute; top: -250px; left: 20%; width: 900px; height: 900px; background: radial-gradient(circle, rgba(0,212,255,0.07) 0%, rgba(0,212,255,0.02) 40%, transparent 65%); pointer-events: none; }
.hero-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; width: 100%; }
.hero-left { position: relative; z-index: 2; }
.h-doc-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid var(--border2); position: relative; }
.h-doc-bar::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 80px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
.stamp { font-size: 0.62rem; font-weight: 800; padding: 3px 12px; letter-spacing: 3px; text-transform: uppercase; }
.stamp-red { background: #dc1e32; color: #fff; box-shadow: var(--shadow-sm); }
.h-meta { font-size: 0.65rem; color: var(--text-mid); letter-spacing: 1.5px; text-transform: uppercase; }
.ml-auto { margin-left: auto; }
.accent { color: var(--accent) !important; }
.h-title { font-family: var(--sans); font-weight: 900; line-height: .86; text-transform: uppercase; letter-spacing: -3px; margin-bottom: 30px; text-shadow: 4px 4px 0 rgba(0,0,0,0.8); }
.t-line { display: block; }
.t1 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); color: var(--text-mid); }
.t2 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); color: var(--text); }
.t3 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); color: var(--accent); -webkit-text-stroke: 1px rgba(0,212,255,.4); text-shadow: 0 0 60px rgba(0,212,255,0.15); }
.t-dot { color: var(--accent); }
@media (hover: hover) {
/* Glitch animation disabled — conflicted with v8 titleLineIn animation
   and caused .t3 ("Finished") to disappear on hover. */
.h-title:hover .t3 { animation: none; }
}
@keyframes glitch {
  0% {transform:translate(0)} 20% {transform:translate(-3px,1px) skewX(-2deg)}
  40% {transform:translate(3px,-1px) skewX(2deg)} 60% {transform:translate(-2px,2px)}
  80% {transform:translate(2px,-2px)} 100%{transform:translate(0)}
}
.h-sub { font-size: 1rem; color: var(--text-mid); line-height: 1.9; max-width: 520px; margin-bottom: 34px; }
.h-sub strong { color: var(--text); }
.d-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border: 2px solid #000; box-shadow: var(--shadow-md); margin-bottom: 38px; }
.d-cell { background: var(--surface2); padding: 20px 10px; text-align: center; transition: background .25s, transform .15s; }
.d-cell:hover { background: var(--surface3); }
.d-lbl { font-size: 0.6rem; color: var(--text-dim); letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 8px; }
.d-val { font-family: var(--sans); font-size: 1.6rem; font-weight: 900; color: var(--accent); line-height: 1; letter-spacing: -0.5px; }
.d-val.green { color: var(--green); text-shadow: 0 0 20px rgba(0,255,127,.3); }
.d-val.amber { color: var(--amber); }
.h-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
button.b-main, button.b-ghost, button.b-buy { border-style: solid; cursor: pointer; font-family: inherit; appearance: none; -webkit-appearance: none; }
.b-main { display: inline-block; padding: 16px 36px; background: var(--accent); color: #000; font-family: var(--mono); font-weight: 700; font-size: 0.7rem; letter-spacing: 2.5px; text-transform: uppercase; border: 2px solid #000; box-shadow: var(--shadow-md); position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.b-main::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); animation: sweep 3.5s ease-in-out infinite; }
@keyframes sweep { 0%{left:-100%} 45%,100%{left:120%} }
.b-main:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hover); }
.b-main:active { transform: translate(4px,4px); box-shadow: 0 0 0 #000; }
.b-ghost { display: inline-block; padding: 16px 28px; background: transparent; color: var(--text-mid); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 1.5px; border: 2px solid var(--border2); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s, color .18s; }
.b-ghost:hover { border-color: var(--text-mid); color: var(--text); transform: translate(-2px,-2px); box-shadow: var(--shadow-hover); }
.b-ghost:active { transform: translate(3px,3px); box-shadow: 0 0 0 #000; }
.h-social { display: flex; align-items: center; gap: 14px; }
.avatars { display: flex; }
.av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; border: 2px solid #000; box-shadow: 2px 2px 0px #000; }
.av1 { background: var(--surface2); z-index: 3; }
.av2 { background: var(--surface3); z-index: 2; margin-left: -12px; }
.av3 { background: var(--surface); z-index: 1; margin-left: -12px; }
.avatars { filter: drop-shadow(0 0 4px rgba(0,212,255,0.15)); }
.h-social-txt { font-size: 0.62rem; color: var(--text-mid); }
.h-social-txt strong { color: var(--accent); }
.hero-right { position: relative; z-index: 2; }
.h-visual { position: relative; border: 2px solid #000; box-shadow: var(--shadow-lg); background: var(--surface); overflow: hidden; }
.h-vis-corner { position: absolute; width: 18px; height: 18px; z-index: 5; }
.h-vis-corner.tl { top: 10px; left: 10px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.h-vis-corner.tr { top: 10px; right: 10px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.h-vis-corner.bl { bottom: 10px; left: 10px; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.h-vis-corner.br { bottom: 10px; right: 10px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.h-lbl { position: absolute; font-size: 0.62rem; font-weight: 800; padding: 4px 12px; letter-spacing: 2px; text-transform: uppercase; z-index: 5; border: 1px solid #000; box-shadow: 2px 2px 0px #000; }
.h-lbl.bef { top: 14px; left: 14px; background: rgba(40,40,50,0.95); color: #aaa; }
.h-lbl.aft { top: 14px; right: 14px; background: var(--green); color: #000; }
.h-badges { position: absolute; bottom: 14px; right: 14px; display: flex; flex-direction: column; gap: 4px; z-index: 5; }
.h-badges span { font-size: 0.62rem; font-weight: 800; padding: 4px 10px; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid #000; box-shadow: 2px 2px 0px #000; }
.bdg-y { background: var(--amber); color: #000; }
.bdg-g { background: var(--green); color: #000; }
.h-vis-bottom { display: flex; justify-content: space-between; padding: 7px 14px; background: rgba(0,0,0,.6); border-top: 1px solid var(--border); font-size: 0.6rem; color: var(--text-mid); letter-spacing: 2px; text-transform: uppercase; }
.h-video { width: 100%; height: auto; display: block; background: #000; pointer-events: none; }
.ticker-wrap { overflow: hidden; background: var(--accent); border-top: 3px solid #000; border-bottom: 3px solid #000; box-shadow: 0 4px 0px #000, 0 0 40px rgba(0,212,255,0.15); padding: 13px 0; white-space: nowrap; position: relative; z-index: 2; width: 100%; }
.ticker-wrap.ticker-dark { background: var(--surface2); border-color: #000; box-shadow: 0 4px 0px #000; }
.ticker-track { display: inline-flex; gap: 24px; align-items: center; animation: tickerScroll 24s linear infinite; font-family: var(--sans); font-size: 0.9rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #000; -webkit-text-stroke: 0.5px rgba(0,0,0,0.3); }
.ticker-dark .ticker-track { color: var(--text-mid); -webkit-text-stroke: none; font-size: 0.75rem; font-weight: 700; }
.ticker-reverse { animation-direction: reverse !important; }
@keyframes tickerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.t-bull { font-size: 0.7rem; opacity: 0.4; }
.ticker-dark .t-bull { color: var(--text-dim); }
.sec { padding: 80px 0; overflow-x: clip; }
.sec-dark { background: var(--surface); border-top: 2px solid #000; border-bottom: 2px solid #000; }
.sep { padding: 9px 32px; background: var(--surface2); border-top: 2px solid #000; border-bottom: 2px solid #000; display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--text-mid); letter-spacing: 3px; text-transform: uppercase; }
.s-lbl { font-size: 0.7rem; color: var(--red); letter-spacing: 4px; text-transform: uppercase; margin-bottom: 8px; }
.s-title { font-family: var(--sans); font-size: clamp(1.8rem,3.5vw,2.8rem); font-weight: 900; text-transform: uppercase; margin-bottom: 12px; line-height: 1.0; letter-spacing: -0.5px; text-shadow: 3px 3px 0 rgba(0,0,0,0.9); }
.s-title .ac { color: var(--accent); }
.s-desc { color: var(--text-mid); font-size: 1rem; line-height: 1.85; max-width: 560px; margin-bottom: 48px; }
.fact-box { background: var(--surface2); border: 3px solid #000; box-shadow: var(--shadow-lg); padding: 64px 52px; max-width: 820px; margin: 0 auto; text-align: center; position: relative; }
.fact-box::before, .fact-box::after { content: ''; position: absolute; width: 56px; height: 56px; }
.fact-box::before { top: -2px; left: -2px; border-top: 3px solid var(--accent); border-left: 3px solid var(--accent); }
.fact-box::after { bottom: -2px; right: -2px; border-bottom: 3px solid var(--accent); border-right: 3px solid var(--accent); }
.fact-tab { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #000; font-size: 0.55rem; font-weight: 800; padding: 4px 20px; letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; border: 2px solid #000; box-shadow: var(--shadow-sm), 0 0 18px rgba(0,212,255,0.35); }
.fact-title { font-family: var(--sans); font-size: clamp(1.6rem,3.2vw,2.4rem); font-weight: 900; text-transform: uppercase; margin-bottom: 22px; line-height: 1.08; letter-spacing: -.3px; text-shadow: 3px 3px 0 rgba(0,0,0,0.9); }
.fact-title .ac { color: var(--accent); }
.fact-body { font-size: 0.84rem; color: var(--text-mid); max-width: 620px; margin: 0 auto; line-height: 1.9; }
.c-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.c-card { background: var(--surface2); padding: 2rem; position: relative; border: 3px solid #000; box-shadow: 6px 6px 0px #000; transition: transform .2s, box-shadow .2s; }
.c-card:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0px #000; }
.c-stamp { position: absolute; top: 0; right: 0; font-size: 0.6rem; color: var(--text-dim); letter-spacing: 2px; padding: 5px 12px; background: rgba(10,10,12,0.95); border-left: 2px solid #000; border-bottom: 2px solid #000; text-transform: uppercase; font-family: var(--mono); }
.c-id { font-size: 0.72rem; color: var(--accent); letter-spacing: 2.5px; margin-bottom: 16px; padding-top: 4px; font-weight: 600; }
.c-img { width: 100%; background: var(--bg); border: 1px solid var(--border2); margin-bottom: 16px; overflow: hidden; position: relative; transition: border-color 0.3s; }
.c-card:hover .c-img { border-color: rgba(0,212,255,0.25); }
.c-img::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,229,255,0.04) 0%, transparent 40%, rgba(0,0,0,0.3) 100%); }
.c-img img { width: 100%; height: auto; display: block; transition: transform 0.4s ease; }
.c-card:hover .c-img img { transform: scale(1.02); }
.c-data { margin-bottom: 14px; }
.c-row { display: flex; justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.82rem; font-weight: 600; color: var(--text-mid); }
.c-row:last-child { border-bottom: none; }
.c-row .v { font-weight: 700; color: var(--text); }
.c-row .v.pos { color: var(--green); text-shadow: 0 0 12px rgba(0,255,127,0.3); }
.c-row .v.big { font-family: var(--sans); font-size: 1.2rem; font-weight: 900; color: var(--green); text-shadow: 0 0 20px rgba(0,255,127,0.4); }
.c-quote { font-size: 0.82rem; color: var(--text-dim); font-style: italic; line-height: 1.75; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.05); }
.mod-list { margin-top: 36px; }
.mod-item { background: var(--surface2); border: 2px solid #000; box-shadow: var(--shadow-md); padding: 24px 28px; margin-bottom: 14px; display: grid; grid-template-columns: 60px 1fr; gap: 18px; align-items: start; border-left: 6px solid var(--accent); transition: transform .2s ease, box-shadow .2s ease, background .2s; }
.mod-item:hover { transform: translate(-4px,-4px); box-shadow: var(--shadow-hover); background: var(--surface3); }
.mod-item:active { transform: translate(3px,3px); box-shadow: var(--shadow-sm); }
.mod-num { font-family: var(--sans); font-size: 2rem; font-weight: 900; color: var(--accent); opacity: .15; line-height: 1; padding-top: 2px; }
.mod-body h3 { font-family: var(--sans); font-size: 0.94rem; font-weight: 800; text-transform: uppercase; margin-bottom: 5px; }
.mod-body .purpose { font-size: 0.68rem; color: var(--text-mid); font-style: italic; margin-bottom: 10px; }
.mod-body ul { list-style: none; padding: 0; }
.mod-body li { font-size: 0.72rem; color: var(--text); padding: 2px 0 2px 16px; position: relative; }
.mod-body li::before { content: '►'; position: absolute; left: 0; color: var(--accent); font-size: 0.48rem; top: 4px; }
.mod-note { font-size: 0.65rem; color: var(--green); border-top: 1px dashed rgba(0,255,127,.15); padding-top: 8px; margin-top: 10px; font-weight: 700; letter-spacing: .5px; }
.faq-list { margin-top: 36px; }
.faq-item { border-bottom: 1px solid var(--border2); padding: 22px 0; }
.faq-q { display: flex; justify-content: space-between; align-items: center; font-family: var(--sans); font-size: 1.0rem; font-weight: 700; transition: color .2s; line-height: 1.35; cursor: pointer; min-height: 48px; padding: 12px 0; }
.faq-q:hover { color: var(--accent); }
.faq-q .arr { color: var(--accent); font-size: 1.2rem; transition: transform .35s cubic-bezier(.175,.885,.32,1.275), color .2s; flex-shrink: 0; margin-left: 16px; width: 20px; height: 20px; border: 1px solid rgba(0,212,255,0.25); display: flex; align-items: center; justify-content: center; font-style: normal; }
.faq-q .arr.open { transform: rotate(45deg); border-color: rgba(0,212,255,0.5); background: rgba(0,212,255,0.05); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s ease, padding .45s ease; font-size: 0.84rem; color: var(--text-mid); line-height: 1.9; }
.faq-a.open { max-height: 320px; padding-top: 14px; }
.b-buy { display: block; width: 100%; padding: 17px; background: var(--accent); color: #000; font-family: var(--mono); font-weight: 700; font-size: 0.8rem; letter-spacing: 3px; text-transform: uppercase; border: 2px solid #000; text-align: center; margin-top: 24px; position: relative; overflow: hidden; box-shadow: var(--shadow-md); animation: ctaPulse 2.8s ease-in-out infinite; transition: transform .18s ease, box-shadow .18s ease; }
.b-buy::after { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); animation: sweep 3.5s ease-in-out infinite; }
@keyframes ctaPulse {
  0% { box-shadow: var(--shadow-md); }
  50% { box-shadow: var(--shadow-md), 0 0 32px rgba(0,212,255,.3); }
  100%{ box-shadow: var(--shadow-md); }
}
.b-buy:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hover), 0 0 40px rgba(0,212,255,.25); animation: none; }
.b-buy:active { transform: translate(4px,4px); box-shadow: 0 0 0 #000; animation: none; }
.live-toast { position: fixed; bottom: 96px; left: 20px; z-index: 999; background: var(--surface2); border: 2px solid #000; border-left: 3px solid var(--green); box-shadow: var(--shadow-md); padding: 12px 18px; max-width: 295px; font-size: 0.64rem; color: var(--text-mid); opacity: 0; transform: translateY(12px); transition: all .4s ease; pointer-events: none; will-change: transform; }
.live-toast.show { opacity: 1; transform: translateY(0); }
.live-toast .city { color: var(--accent); font-weight: 600; }
.live-toast .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: middle; box-shadow: 0 0 6px var(--green); animation: blinkDot 1.4s infinite; }
footer { border-top: 2px solid #000; padding: 48px 28px 80px; text-align: center; background: var(--surface); position: relative; }
footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.4; }
.f-disc { max-width: 650px; margin: 0 auto 18px; font-size: 0.65rem; color: var(--text-dim); line-height: 1.8; }
.f-links { margin-bottom: 12px; }
.f-links a { color: var(--text-mid); font-size: 0.68rem; margin: 0 12px; letter-spacing: 1px; transition: color .2s; }
.f-links a:hover { color: var(--text); }
.f-copy { font-size: 0.62rem; color: var(--text-dim); }
.sticky-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: var(--accent); color: #000; text-align: center; padding: 14px; font-weight: 800; font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; border-top: 2px solid #000; box-shadow: 0 -4px 0px #000; }
@media (max-width: 660px) {
.sticky-bar.visible { display: block; }
.h-title { letter-spacing: -1.5px; }
.d-strip { grid-template-columns: 1fr 1fr; }
.c-grid { grid-template-columns: 1fr; gap: 2px; }
.mod-item { grid-template-columns: 1fr; gap: 4px; border-left-width: 4px; }
.mod-num { font-size: 1.5rem; }
.h-btns { flex-direction: column; }
.b-main, .b-ghost { width: 100%; text-align: center; }
footer { padding-bottom: 72px; }
.nav-center { display: none; }
.sep { flex-direction: column; gap: 2px; text-align: center; padding: 8px 18px; }
.s-title { font-size: 1.55rem; }
.fact-box { padding: 52px 30px; }
.live-toast { bottom: 72px; left: 10px; right: 10px; max-width: none; }
.ticker-track { font-size: 0.78rem; }
.h-vis-bottom { font-size: 0.6rem; padding: 6px 10px; }
.h-lbl { font-size: 0.6rem; padding: 3px 8px; }
.h-badges span { font-size: 0.6rem; padding: 3px 8px; }
.comparison-table th, .comparison-table td { padding: 10px 12px; font-size: 0.65rem; }
.guarantee-box { padding: 40px 26px; }
.gb-number { font-size: 3.5rem; }
.pricing-top, .pricing-price-row, .pricing-urgency, .pricing-cta { padding-left: 24px; padding-right: 24px; }
.pricing-now { font-size: 3rem; }
.trv-head { padding-left: 24px; padding-right: 24px; }
.trv-row { padding-left: 24px; padding-right: 24px; grid-template-columns: 18px 1fr auto; gap: 8px; }
.trv-total-row { padding-left: 24px; padding-right: 24px; }
.trv-deal-row { padding-left: 24px; padding-right: 24px; }
.sec { padding: 60px 0; }
.faq-q { min-height: 52px; padding: 14px 18px; }
.faq-a { font-size: 0.8rem; line-height: 1.78; }
.faq-a.open { padding-top: 14px; }
#scrollProgress { height: 2px; }
.s-desc { font-size: 0.88rem; max-width: 100%; margin-bottom: 36px; }
.s-lbl { font-size: 0.58rem; }
.s-title { margin-bottom: 12px; }
.subject-metrics { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; margin-top: 38px; }
.sm-val { font-size: 1.55rem; }
.sm-val .sm-unit { font-size: 1rem; }
.sm-lbl { font-size: 0.55rem; letter-spacing: 1.4px; margin-top: 8px; }
.sm-card { padding: 18px 10px; }
.demo-mirror { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px 18px; }
.dm-rows { gap: 16px; width: 100%; }
.dm-row { gap: 8px; }
.dm-pct { font-size: 1.2rem; }
.dm-desc { font-size: 0.72rem; }
.pricing-compare, .pricing-not, .price-lock, .reality-check, .purchase-feed-wrap { margin-left: 24px; margin-right: 24px; padding-left: 18px; padding-right: 18px; }
.pricing-compare { margin-left: 0; margin-right: 0; padding-left: 24px; padding-right: 24px; }
.pricing-not { margin-left: 0; margin-right: 0; padding-left: 24px; padding-right: 24px; }
.pc-row { font-size: 0.72rem; }
.pc-apex-price { font-size: 1.1rem; }
.pl-head { font-size: 0.66rem; letter-spacing: 0.5px; }
.pl-sub { font-size: 0.62rem; padding-left: 18px; }
.rc-toggle { font-size: 0.68rem; padding: 11px 12px; }
.sticky-bar.visible { display: flex !important; flex-direction: column; align-items: center; gap: 2px; }
}
.rv { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s cubic-bezier(.175,.885,.32,1.275); will-change: opacity, transform; }
.rv.vis { opacity: 1; transform: translateY(0); will-change: auto; }
.rv.d1 { transition-delay: .08s; }
.rv.d2 { transition-delay: .16s; }
.rv.d3 { transition-delay: .24s; }
@media (max-width: 900px) {
.hero-wrap { grid-template-columns: 1fr; gap: 36px; min-height: auto; }
.hero { min-height: auto; }
.hero-right { order: -1; }
.bp-pulse { animation-name: bpPulseMobile; }
.checkout-grid-v3 { grid-template-columns: 1fr; }
}
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; z-index: 100000; background: var(--accent); width: 0%; transition: width .1s linear; box-shadow: 0 0 8px rgba(0,212,255,.5); will-change: transform; }
.ct-outer { position: relative; }
.ct-outer::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 64px; pointer-events: none; z-index: 2; background: linear-gradient(90deg, transparent, var(--bg)); display: none; }
.comparison-wrap { overflow-x: auto; overscroll-behavior-x: contain; max-width: 100%; position: relative; }
.comparison-table { width: 100%; min-width: 580px; border-collapse: collapse; border: 2px solid #000; box-shadow: var(--shadow-lg); font-size: 0.72rem; }
.comparison-table thead tr { background: var(--surface2); }
.comparison-table th { padding: 14px 18px; text-align: left; font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase; border: 2px solid #000; color: var(--text-mid); }
.comparison-table th.ct-apex { color: var(--accent); background: var(--accent-dim); }
.comparison-table td { padding: 12px 18px; border: 1px solid var(--border); vertical-align: middle; background: var(--surface); transition: background .2s; }
.comparison-table tr:hover td { background: var(--surface2); }
.comparison-table td.ct-apex { background: var(--accent-dim); font-weight: 700; }
.ct-feat { color: var(--text-mid); }
.ct-check { color: var(--green); font-size: 0.9rem; margin-right: 6px; }
.ct-x { color: var(--red); font-size: 0.9rem; margin-right: 6px; }
.ct-part { color: var(--amber); font-size: 0.9rem; margin-right: 6px; }
.guarantee-box { max-width: 680px; margin: 0 auto; text-align: center; background: var(--surface2); border: 3px solid #000; box-shadow: var(--shadow-lg); padding: 60px 52px; position: relative; }
.gb-corners { position: absolute; inset: 0; pointer-events: none; }
.gb-c { position: absolute; width: 20px; height: 20px; }
.gb-c.tl { top: -2px; left: -2px; border-top: 3px solid var(--green); border-left: 3px solid var(--green); }
.gb-c.tr { top: -2px; right: -2px; border-top: 3px solid var(--green); border-right: 3px solid var(--green); }
.gb-c.bl { bottom: -2px; left: -2px; border-bottom: 3px solid var(--green); border-left: 3px solid var(--green); }
.gb-c.br { bottom: -2px; right: -2px; border-bottom: 3px solid var(--green); border-right: 3px solid var(--green); }
.gb-number { font-family: var(--sans); font-size: 5rem; font-weight: 900; color: var(--green); line-height: 1; text-shadow: 0 0 40px rgba(0,255,127,.28); margin-bottom: 6px; }
.gb-title { font-family: var(--sans); font-size: 1.55rem; font-weight: 900; text-transform: uppercase; margin-bottom: 18px; letter-spacing: -0.3px; }
.gb-body { font-size: 0.82rem; color: var(--text-mid); max-width: 520px; margin: 0 auto 30px; line-height: 1.95; }
.gb-icons { display: flex; justify-content: center; gap: 36px; }
.gb-icon-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--green); font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; transition: color 0.2s, filter 0.2s; }
.gb-icon-item:hover { filter: drop-shadow(0 0 6px rgba(0,255,127,0.4)); }
.modal-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.92); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; padding: 16px; }
.modal-overlay.open { display: flex; }
.modal-content { background: var(--bg); border: 3px solid #000; box-shadow: 12px 12px 0 #000; max-width: 540px; width: 100%; position: relative; overflow: hidden; animation: modalIn .32s cubic-bezier(.175,.885,.32,1.275) both; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(28px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-terminal-bar { display: flex; align-items: center; gap: 10px; background: #000; padding: 9px 16px; border-bottom: 2px solid var(--accent); }
.mtb-badge { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 2px; color: var(--accent); font-weight: 700; text-transform: uppercase; }
.mtb-id { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 1.5px; color: var(--text-mid); margin-left: auto; }
.mtb-status { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 1.5px; color: var(--green); }
.modal-close { background: none; border: none; color: var(--text-dim); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: color .2s; padding: 0; margin-left: 8px; }
.modal-close:hover { color: var(--text); }
.modal-body { padding: 26px 30px 30px; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 480px) {
.modal-body { padding: 18px 16px 22px; }
.exit-popup-card { padding: 36px 24px; }
.wrap { padding: 0 18px; }
.h-title { letter-spacing: -2px; }
.d-strip { grid-template-columns: 1fr 1fr; }
.c-grid { grid-template-columns: 1fr; }
.nav-cta { font-size: 0.62rem; letter-spacing: 1px; padding: 5px 10px; }
.sep { font-size: 0.52rem; letter-spacing: 1.5px; padding: 10px 14px; flex-direction: column; gap: 2px; text-align: center; }
.h-sub { font-size: 0.88rem; line-height: 1.7; }
.h-btns { gap: 10px; }
.b-main, .b-ghost { font-size: 0.72rem; padding: 12px 20px; letter-spacing: 1.5px; }
.d-strip { gap: 1px; }
.d-cell { padding: 18px 14px; }
.d-val { font-size: 1.3rem; }
.d-lbl { font-size: 0.58rem; }
.guarantee-box { padding: 40px 22px; }
.gb-title { font-size: 1.1rem; }
footer { padding: 40px 0 80px; }
.f-disc { font-size: 0.6rem; }
.scam-inoc { padding: 14px 16px; box-shadow: 3px 3px 0 #000; }
.si-head { font-size: 0.66rem; letter-spacing: 1px; gap: 8px; }
.si-body { font-size: 0.72rem; }
.si-list li { font-size: 0.7rem; }
}
.exit-popup-overlay { position: fixed; inset: 0; z-index: 20000; background: rgba(0,0,0,.9); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 20px; }
.exit-popup-overlay.open { display: flex; }
.exit-popup-card { background: var(--surface2); border: 3px solid #000; box-shadow: var(--shadow-lg); padding: 52px 44px; max-width: 420px; width: 100%; text-align: center; position: relative; animation: modalIn .32s cubic-bezier(.175,.885,.32,1.275) both; }
.exit-stamp { display: inline-block; font-size: 0.62rem; letter-spacing: 3px; font-weight: 900; color: var(--red); border: 2px solid var(--red); padding: 4px 16px; margin-bottom: 16px; text-transform: uppercase; }
.exit-title { font-family: var(--sans); font-size: 1.5rem; font-weight: 900; text-transform: uppercase; margin-bottom: 12px; letter-spacing: -.3px; }
.exit-body { font-size: 0.74rem; color: var(--text-mid); line-height: 1.85; margin-bottom: 24px; }
.exit-cta { display: block; margin-top: 0; }
.exit-dismiss { display: block; width: 100%; background: none; border: none; color: var(--text-dim); font-family: var(--mono); font-size: 0.5rem; letter-spacing: 1px; cursor: pointer; margin-top: 14px; text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.exit-dismiss:hover { color: var(--text-mid); }
.s-lbl { font-size: 0.72rem; }
.sep span { font-size: 0.72rem; }
.nav-logo-badge { font-size: 0.65rem; }
.nav-center, .nav-status { font-size: 0.7rem; }
.s-desc { font-size: 1rem; }
.h-sub { font-size: 1rem; }
.fact-body { font-size: 1rem; }
.mod-body .purpose { font-size: 0.78rem; }
.mod-body li { font-size: 0.8rem; }
.mod-note { font-size: 0.73rem; }
.faq-a { font-size: 0.88rem; }
.f-disc { font-size: 0.72rem; }
.f-links a { font-size: 0.72rem; }
.f-copy { font-size: 0.68rem; }
.exit-stamp { font-size: 0.65rem; }
.exit-body { font-size: 0.88rem; }
.exit-dismiss { font-size: 0.7rem; }
.live-toast { font-size: 0.78rem; }
.gb-body { font-size: 0.92rem; }
.gb-icon-item { font-size: 0.65rem; }
.fact-tab { font-size: 0.65rem; }
.h-vis-bottom { font-size: 0.62rem; }
.h-social-txt { font-size: 0.78rem; }
.d-lbl { font-size: 0.65rem; }
.blueprint-timeline { position: relative; margin-top: 72px; padding-bottom: 8px; }
/* Spine runs through the center of the diamond column on the left */
.bp-spine { position: absolute; top: 0; bottom: 0; left: 40px; width: 1px; background: var(--border2); z-index: 1; overflow: hidden; }
.bp-spine-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: linear-gradient(180deg,
  var(--red) 0%,
  var(--accent) 50%,
  var(--green) 100%
  ); box-shadow: 0 0 14px rgba(0,212,255,.4); transition: height .35s ease; }
.bp-phase { display: flex; flex-direction: row; gap: 24px; padding-bottom: 56px; position: relative; z-index: 2; align-items: start; }
.bp-phase:last-child { padding-bottom: 0; }
.bp-spacer { display: none; }
.bp-node-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 0; position: relative; flex: 0 0 80px; }
.bp-node { position: relative; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }
.bp-diamond { width: 26px; height: 26px; transform: rotate(45deg); border: 2px solid; position: relative; z-index: 3; }
.bp-cross-h { position: absolute; top: 50%; left: -18px; right: -18px; height: 1px; background: currentColor; transform: translateY(-50%); opacity: 0.28; }
.bp-cross-v { position: absolute; left: 50%; top: -18px; bottom: -18px; width: 1px; background: currentColor; transform: translateX(-50%); opacity: 0.28; }
.bp-node::before { content: ''; position: absolute; width: 52px; height: 52px; transform: rotate(45deg); border: 1px solid; opacity: 0.12; z-index: 2; pointer-events: none; }
.bp-pulse { position: absolute; inset: 10px; border: 1px solid; transform: rotate(45deg); z-index: 1; animation: bpPulse 3s ease-out infinite; }
.bp-pulse-2 { animation-delay: 1.5s; }
@keyframes bpPulse {
  0% { opacity: 0.55; transform: rotate(45deg) scale(1); }
  100% { opacity: 0; transform: rotate(45deg) scale(2.8); }
}
@keyframes bpPulseMobile {
  0% { opacity: 0.45; transform: rotate(45deg) scale(1); }
  100% { opacity: 0; transform: rotate(45deg) scale(1.7); }
}
.bp-ph-01 .bp-diamond { border-color: var(--red); color: var(--red); background: rgba(255,71,71,.12); box-shadow: 0 0 16px rgba(255,71,71,.55), inset 0 0 8px rgba(255,71,71,.08); }
.bp-ph-01 .bp-node::before { border-color: var(--red); }
.bp-ph-01 .bp-pulse { border-color: var(--red); }
.bp-ph-02 .bp-diamond { border-color: var(--accent); color: var(--accent); background: rgba(0,212,255,.08); box-shadow: 0 0 16px rgba(0,212,255,.55), inset 0 0 8px rgba(0,212,255,.06); }
.bp-ph-02 .bp-node::before { border-color: var(--accent); }
.bp-ph-02 .bp-pulse { border-color: var(--accent); }
.bp-ph-03 .bp-diamond { border-color: var(--green); color: var(--green); background: rgba(0,255,127,.08); box-shadow: 0 0 16px rgba(0,255,127,.55), inset 0 0 8px rgba(0,255,127,.06); }
.bp-ph-03 .bp-node::before { border-color: var(--green); }
.bp-ph-03 .bp-pulse { border-color: var(--green); }
.bp-num { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 3px; color: var(--text-dim); text-align: center; text-transform: uppercase; }
.bp-content { padding-top: 8px; flex: 1 1 auto; min-width: 0; }
/* Force all phases to render identically — always text on right of the diamond,
   no more left/right zigzag. */
.bp-left .bp-content,
.bp-right .bp-content { text-align: left; }
.bp-left .bp-list li,
.bp-right .bp-list li { padding-left: 18px; padding-right: 0; }
.bp-left .bp-list li::before,
.bp-right .bp-list li::before { display: block; content: '▸'; position: absolute; left: 0; right: auto; color: var(--text-dim); font-size: 0.58rem; top: 3px; }
.bp-left .bp-list li::after,
.bp-right .bp-list li::after { display: none; }
.bp-left .bp-result,
.bp-right .bp-result { flex-direction: row; }
.bp-tag { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 2px; margin-bottom: 6px; text-transform: uppercase; }
.bp-ph-01 .bp-tag { color: var(--red); }
.bp-ph-02 .bp-tag { color: var(--accent); }
.bp-ph-03 .bp-tag { color: var(--green); }
.bp-weeks { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 3px; color: var(--text-dim); margin-bottom: 16px; text-transform: uppercase; }
.bp-title { font-family: var(--sans); font-size: 1.9rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.5px; margin-bottom: 18px; line-height: 1; }
.bp-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 5px; }
.bp-list li { font-family: var(--mono); font-size: 0.74rem; color: var(--text-mid); padding: 2px 0 2px 18px; position: relative; line-height: 1.5; }
.bp-list li::before { content: '▸'; position: absolute; left: 0; top: 3px; font-size: 0.58rem; color: var(--text-dim); }
.bp-result { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,0.07); margin-top: 4px; }
.bp-result-label { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 2px; color: var(--text-dim); text-transform: uppercase; flex-shrink: 0; }
.bp-result-val { font-family: var(--mono); font-size: 0.78rem; font-weight: 700; }
.bp-ph-01 .bp-result-val { color: var(--red); text-shadow: 0 0 16px rgba(255,48,64,0.4); }
.bp-ph-02 .bp-result-val { color: var(--accent); text-shadow: 0 0 16px rgba(0,212,255,0.4); }
.bp-ph-03 .bp-result-val { color: var(--green); text-shadow: 0 0 16px rgba(0,255,127,0.4); }
.pricing-card { background: var(--surface2); border: 3px solid #000; box-shadow: 10px 10px 0px #000; position: relative; overflow: hidden; background-image: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(0,212,255,0.07) 0%, transparent 70%); }
.pricing-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--red), var(--amber), var(--green)); }
.pricing-label { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #000; font-size: 0.65rem; font-weight: 900; padding: 4px 24px; letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; border: 2px solid #000; box-shadow: var(--shadow-sm); top: 4px; }
.pricing-top { padding: 40px 44px 0; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.pricing-live { font-size: 0.68rem; color: var(--red); letter-spacing: 2px; text-transform: uppercase; display: flex; align-items: center; gap: 6px; background: rgba(255,48,64,0.08); padding: 6px 14px; border: 1px solid rgba(255,48,64,0.2); white-space: nowrap; margin-top: 4px; }
.pricing-price-row { padding: 22px 44px 20px; display: flex; flex-direction: column; gap: 4px; border-bottom: 2px solid var(--border2); }
.pricing-price-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.pricing-old { font-size: 0.9rem; color: var(--text-dim); text-decoration: line-through; }
.pricing-save-pill { font-family: var(--mono); font-size: 0.6rem; font-weight: 900; color: var(--green); letter-spacing: 1.5px; text-transform: uppercase; background: rgba(0,255,127,0.08); border: 1px solid rgba(0,255,127,0.25); padding: 3px 10px; }
.pricing-now { font-family: var(--sans); font-size: 4.2rem; font-weight: 900; color: var(--accent); line-height: 1; letter-spacing: -2px; text-shadow: 0 0 50px rgba(0,212,255,.32), 0 0 100px rgba(0,212,255,0.1); }
.pricing-note { font-size: 0.7rem; color: var(--text-dim); margin-top: 6px; letter-spacing: 0.5px; }
.pricing-urgency { padding: 14px 44px; background: rgba(255,48,64,0.04); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pu-text { font-size: 0.72rem; color: var(--red); font-weight: 700; letter-spacing: 1px; }
.pu-bar { flex: 1; height: 4px; background: var(--border); overflow: hidden; max-width: 200px; }
.pu-fill { height: 100%; background: var(--red); width: 20%; }
.pricing-cta { padding: 28px 44px 36px; }
.pricing-cta .b-buy { margin-top: 0; font-size: 1rem; letter-spacing: 3px; padding: 22px; font-weight: 900; }
@media (max-width: 380px) {
.pricing-top, .pricing-price-row, .pricing-urgency, .pricing-cta { padding-left: 16px; padding-right: 16px; }
.pricing-now { font-size: 2.5rem; }
.trv-head { padding-left: 16px; padding-right: 16px; }
.trv-row { padding-left: 16px; padding-right: 16px; }
.trv-total-row, .trv-deal-row { padding-left: 16px; padding-right: 16px; }
.fact-box { padding: 36px 16px; }
.guarantee-box { padding: 36px 16px; }
.wrap { padding: 0 14px; }
.pricing-compare, .pricing-not, .price-lock, .reality-check, .purchase-feed-wrap { margin-left: 16px; margin-right: 16px; padding-left: 14px; padding-right: 14px; }
.pricing-compare { margin-left: 0; margin-right: 0; padding-left: 16px; padding-right: 16px; }
.pricing-not { margin-left: 0; margin-right: 0; padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 600px) {
.d-strip { grid-template-columns: 1fr 1fr; }
.d-val { font-size: 1.2rem; }
}
@media (max-width: 560px) {
.modal-overlay { padding: 12px; align-items: center; }
.modal-content { max-width: 100%; width: 100%; }
.bp-phase { padding-bottom: 44px; gap: 12px; }
.bp-title { font-size: 1.25rem; margin-bottom: 10px; }
.bp-tag { font-size: 0.5rem; }
.bp-weeks { font-size: 0.46rem; margin-bottom: 10px; }
.bp-list { gap: 3px; }
.bp-list li { font-size: 0.65rem; }
.bp-result { padding-top: 10px; }
.bp-result-val { font-size: 0.63rem; }
.bp-content { padding: 14px 15px; }
.c-card { padding: 22px 18px; }
.c-quote { font-size: 0.72rem; line-height: 1.6; padding: 10px 14px; }
.c-data { gap: 6px; }
.b-buy { min-height: 52px; display: flex; align-items: center; justify-content: center; }
.c-verified { right: 10px; font-size: 0.52rem; padding: 4px 8px; }
.c-card .c-stamp { top: 18px; }
}
.checkout-grid-v3 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.result-carousel { border: 2px solid var(--border); background: var(--surface); position: relative; overflow: hidden; }
.rc-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 9px; border-bottom: 2px solid var(--border); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 1.5px; text-transform: uppercase; }
.rc-badge { display: flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; }
.rc-pos { color: var(--text-dim); }
.rc-sep { color: var(--text-dim); }
.rc-track { position: relative; width: 100%; }
.rc-slide { display: none; position: relative; width: 100%; }
.rc-slide.rc-active { display: block; }
.rc-slide img { width: 100%; display: block; object-fit: contain; background: #000; }
.rc-data { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.88) 40%); padding: 36px 14px 14px; font-family: var(--mono); }
.rc-subj { font-size: 0.62rem; color: rgba(255,255,255,0.7); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 2px; }
.rc-gain-num { font-size: 2.6rem; font-weight: 700; color: var(--accent); font-family: var(--sans); line-height: 1; margin-bottom: 4px; text-shadow: 0 0 20px rgba(0,212,255,0.5); }
.rc-meta { font-size: 0.65rem; color: rgba(255,255,255,0.8); }
.rc-nav { display: flex; gap: 6px; justify-content: center; padding: 10px 0; border-top: 2px solid var(--border); }
.rc-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--border); background: transparent; cursor: pointer; padding: 0; transition: background 0.2s, border-color 0.2s; }
.rc-dot.rc-dot-on { background: var(--accent); border-color: var(--accent); }
.rc-dot:hover:not(.rc-dot-on) { border-color: var(--text-mid); }
.trv-box { border: 2px solid var(--border); background: var(--surface); }
.pricing-card .trv-box { border-left: none; border-right: none; background: transparent; }
.trv-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 44px 9px; border-bottom: 2px solid var(--border); border-top: 2px solid var(--border); font-family: var(--mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 1.5px; }
.trv-tag { color: var(--accent); font-weight: 700; }
.trv-label-right { color: var(--text-dim); }
.trv-list { display: flex; flex-direction: column; }
.trv-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 8px 44px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.72rem; transition: background 0.15s; }
.trv-row:hover { background: rgba(0,212,255,0.03); }
.trv-row-last { border-bottom: none; }
.trv-icon { color: var(--accent); display: flex; align-items: center; justify-content: center; opacity: 0.8; flex-shrink: 0; }
.trv-row-name { display: flex; flex-direction: column; gap: 1px; color: var(--text); min-width: 0; }
.trv-row-sub { color: var(--text-mid); font-size: 0.65rem; margin-top: 1px; }
.trv-price { font-family: var(--mono); font-size: 0.75rem; font-weight: 700; color: var(--text-mid); white-space: nowrap; flex-shrink: 0; }
.trv-total-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 44px; border-top: 2px solid var(--border); background: rgba(0,0,0,0.2); font-size: 0.72rem; }
.trv-total-label { text-transform: uppercase; letter-spacing: 1px; font-size: 0.62rem; color: var(--text-dim); font-family: var(--mono); }
.trv-total-strike { font-family: var(--mono); font-weight: 700; font-size: 0.85rem; text-decoration: line-through; color: var(--text-dim); }
.trv-deal-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 44px 16px; background: rgba(0,212,255,0.065); border-top: 1px solid rgba(0,212,255,0.18); box-shadow: inset 0 0 30px rgba(0,212,255,0.03); }
.trv-deal-left { display: flex; flex-direction: column; gap: 5px; }
.trv-deal-label { font-size: 0.65rem; color: var(--text-mid); text-transform: uppercase; letter-spacing: 1px; font-family: var(--mono); }
.trv-save-badge { display: inline-block; background: var(--green); color: #000; font-family: var(--mono); font-size: 0.62rem; font-weight: 900; padding: 3px 10px; letter-spacing: 1.5px; text-transform: uppercase; box-shadow: 0 0 16px rgba(0,255,127,0.4); }
.trv-deal-price { font-family: var(--mono); font-size: 1.6rem; font-weight: 900; color: var(--accent); line-height: 1; text-shadow: 0 0 20px rgba(0,212,255,0.3); }
.pricing-trust-strip { display: flex; gap: 0; border-top: 2px solid var(--border); margin-top: 16px; }
.pts-item { flex: 1; text-align: center; padding: 10px 6px; border-right: 1px solid var(--border); }
.pts-item:last-child { border-right: none; }
.pts-val { font-family: var(--mono); font-size: 0.95rem; font-weight: 700; color: var(--accent); line-height: 1; }
.pts-lbl { font-size: 0.65rem; color: var(--text-mid); text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }
@media print {
.nav, .sticky-bar, .live-toast, .modal-overlay, .exit-popup-overlay, .bg-grid, .noise, .scroll-progress, .cursor, .cursor-ring, .ticker-wrap, .ticker-dark, .blink-dot, .b-buy, .b-main, .b-ghost, .nav-cta, .pricing-cta, .h-btns { display: none !important; }
*, *::before, *::after { animation: none !important; transition: none !important; }
body { background: #fff !important; color: #000 !important; font-size: 11pt; }
.wrap { max-width: 100%; padding: 0; }
.sec, section { padding: 20px 0 !important; }
.hero { min-height: auto; padding: 20px 0; }
.hero-wrap { grid-template-columns: 1fr; }
.hero-right { display: none; }
footer { padding-bottom: 20px !important; }
a[href]::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #666; }
a[href^="#"]::after, a[href^="javascript"]::after { content: ''; }
.proof-bar, .hero-scan, .scam-inoc, .reality-check, .price-lock, .purchase-feed-wrap, .cta-guarantee, .cta-trust-icons, .demo-mirror, .subject-metrics, .limits-box { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
.rv { opacity: 1; transform: none; }
.rv.vis { opacity: 1; transform: none; }
.bg-grid { animation: none; }
.ticker-track { animation: none; }
.b-main::after, .b-buy::after { animation: none; }
.hero-scan.scan-run { animation: none; opacity: 0; }
.pricing-cta .b-buy { animation: none !important; }
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border3); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.scroll-progress { height: 2px; background: linear-gradient(90deg, var(--accent) 0%, var(--green) 100%); box-shadow: 0 0 16px rgba(0,212,255,0.6); }
.hero-glow-2 { position: absolute; bottom: -180px; right: 8%; width: 640px; height: 640px; background: radial-gradient(circle, rgba(0,255,127,0.04) 0%, transparent 60%); pointer-events: none; z-index: 0; }
.t3 { text-shadow:
  0 0 60px rgba(0,212,255,0.28),
  0 0 130px rgba(0,212,255,0.1),
  4px 4px 0 rgba(0,0,0,0.85); }
.d-cell { position: relative; overflow: hidden; }
.d-cell::after { content: ''; position: absolute; top: 0; left: -150%; width: 80%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent); animation: cellGlint 7s ease-in-out infinite; pointer-events: none; }
.d-cell:nth-child(2)::after { animation-delay: 1.75s; }
.d-cell:nth-child(3)::after { animation-delay: 3.5s; }
.d-cell:nth-child(4)::after { animation-delay: 5.25s; }
@keyframes cellGlint { 0%,100%{left:-150%} 40%{left:130%} }
.d-val { text-shadow: 0 0 18px rgba(0,212,255,0.28); }
.d-val.green { text-shadow: 0 0 22px rgba(0,255,127,0.42); }
.d-val.amber { text-shadow: 0 0 16px rgba(255,176,32,0.3); }
.sec { padding: 100px 0; }
.s-lbl { letter-spacing: 5px; font-weight: 700; margin-bottom: 10px; }
@media (min-width: 769px) {
.s-title { letter-spacing: -1px; }
.s-desc { line-height: 2.05; color: #8888a8; }
.h-sub { line-height: 2.0; color: #8888a8; }
.fact-body { line-height: 2.0; }
}
.stamp-red { box-shadow: 3px 3px 0 rgba(0,0,0,0.8), 0 0 18px rgba(255,48,64,0.28); }
.nav-logo-text { text-shadow: 0 0 22px rgba(0,212,255,0.28); }
.rv { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s cubic-bezier(.215,.61,.355,1); will-change: opacity, transform; }
.fact-box { background: linear-gradient(145deg, var(--surface2) 0%, rgba(0,212,255,0.022) 50%, var(--surface2) 100%); }
.fact-box::before, .fact-box::after { width: 62px; height: 62px; }
.c-card { transition: transform .25s ease, box-shadow .25s ease, border-top-color .3s ease; border-top: 3px solid transparent; }
.c-card:hover { border-top-color: var(--accent); transform: translate(-3px,-4px); box-shadow: 9px 10px 0 #000, 0 0 32px rgba(0,212,255,0.05); }
.mod-item { border-left-color: var(--border2); transition: transform .2s ease, box-shadow .2s ease, background .2s, border-left-color .25s; }
.mod-item:hover { border-left-color: var(--accent); transform: translate(-4px,-4px); box-shadow: var(--shadow-hover), 0 0 22px rgba(0,212,255,0.06); background: var(--surface3); }
.faq-item { transition: box-shadow 0.25s, padding-left 0.25s; }
.faq-item:has(.faq-a.open) { box-shadow: inset 3px 0 0 var(--accent); padding-left: 14px; }
.faq-a.open { padding-top: 12px; }
.guarantee-box { background: linear-gradient(145deg, var(--surface2) 0%, rgba(0,255,127,0.022) 50%, var(--surface2) 100%); }
.gb-number { filter: drop-shadow(0 0 22px rgba(0,255,127,0.28)); }
.pricing-card { border: 2px solid rgba(0,212,255,0.14) !important; box-shadow: 12px 12px 0 #000, 0 0 60px rgba(0,212,255,0.055); background-image: radial-gradient(ellipse 90% 45% at 50% 0%, rgba(0,212,255,0.092) 0%, transparent 70%); }
.pricing-label { box-shadow: 3px 3px 0 rgba(0,0,0,0.8), 0 0 22px rgba(0,212,255,0.38); }
.pricing-now { text-shadow: 0 0 50px rgba(0,212,255,0.32), 0 0 100px rgba(0,212,255,0.1); }
@keyframes ctaPulse {
  0%,100% { box-shadow: var(--shadow-md), 0 0 0 transparent; }
  50% { box-shadow: var(--shadow-md), 0 0 52px rgba(0,212,255,0.48), 0 0 100px rgba(0,212,255,0.16); }
}
.b-buy { animation: ctaPulse 2.4s ease-in-out infinite; }
.b-buy:hover { animation: none; transform: translate(-3px,-3px); box-shadow: var(--shadow-hover), 0 0 50px rgba(0,212,255,0.3); }
.pu-fill { box-shadow: 0 0 10px rgba(255,48,64,0.6); animation: puFillIn 1.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s both; }
@keyframes puFillIn { from { width: 0%; } }
.pts-val { font-family: var(--sans); font-size: 1.15rem; font-weight: 900; color: var(--accent); line-height: 1; text-shadow: 0 0 20px rgba(0,212,255,0.32); }
.pts-lbl { font-size: 0.6rem; letter-spacing: 1.5px; margin-top: 4px; }
.pts-item { padding: 14px 8px; }
.bp-spine-fill { box-shadow: 0 0 18px rgba(0,212,255,0.5); }
.bp-ph-01 .bp-diamond { box-shadow: 0 0 26px rgba(255,48,64,0.65), inset 0 0 10px rgba(255,48,64,0.1); }
.bp-ph-02 .bp-diamond { box-shadow: 0 0 26px rgba(0,212,255,0.65), inset 0 0 10px rgba(0,212,255,0.08); }
.bp-ph-03 .bp-diamond { box-shadow: 0 0 26px rgba(0,255,127,0.65), inset 0 0 10px rgba(0,255,127,0.06); }
.h-vis-corner { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.h-visual:hover .h-vis-corner { border-color: rgba(0,212,255,0.75); box-shadow: 0 0 14px rgba(0,212,255,0.45); }
.h-visual { transition: box-shadow 0.35s ease; }
.h-visual:hover { box-shadow: var(--shadow-lg), 0 0 50px rgba(0,212,255,0.07); }
.rc-gain-num { text-shadow: 0 0 30px rgba(0,255,127,0.5), 0 0 65px rgba(0,255,127,0.16); }
.sep { overflow: hidden; position: relative; }
.sep::after { content: ''; position: absolute; inset-block: 0; left: -60%; width: 50%; background: linear-gradient(90deg, transparent, rgba(0,212,255,0.05), transparent); animation: sepScan 8s ease-in-out infinite; pointer-events: none; }
@keyframes sepScan { 0%,100%{left:-60%} 55%{left:130%} }
.comparison-table tr:hover td { background: var(--surface3); }
.comparison-table td.ct-apex { background: rgba(0,212,255,0.055); }
.sec-acquire { position: relative; }
.sec-acquire::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background:
  radial-gradient(ellipse 60% 70% at 80% 50%, rgba(0,212,255,0.03) 0%, transparent 70%),
  radial-gradient(ellipse 40% 50% at 20% 50%, rgba(0,255,127,0.02) 0%, transparent 70%); }
.sec-acquire .wrap { position: relative; z-index: 1; }
.live-toast.show { box-shadow: var(--shadow-md), 0 0 20px rgba(0,255,127,0.1); }
#radarCanvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
@media (max-width: 360px) {
:root { font-size: 15px; }
.h-title { font-size: 2.1rem !important; letter-spacing: -2px !important; }
.s-title { font-size: 1.3rem; }
.ticker-track { font-size: 0.72rem; gap: 14px; }
}
.bp-content { background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.05); padding: 22px 26px; }
.bp-ph-01 .bp-content { border-left: 2px solid rgba(255,48,64,0.28); }
.bp-ph-02 .bp-content { border-left: 2px solid rgba(0,212,255,0.28); }
.bp-ph-03 .bp-content { border-left: 2px solid rgba(0,255,127,0.28); }
.bp-left .bp-content { border-left: 1px solid rgba(255,255,255,0.05); border-right: 2px solid rgba(0,212,255,0.28); }
.bp-result { background: rgba(0,0,0,0.25); border: none; border-top: 1px solid rgba(255,255,255,0.06); padding: 12px 0 4px; margin-top: 16px; }
.blueprint-timeline { margin-top: 52px; }
@media (max-width: 375px) {
.bp-node-wrap { width: 48px; }
.bp-node { width: 48px; height: 48px; }
.bp-diamond { width: 17px; height: 17px; }
.bp-node::before { width: 32px; height: 32px; }
.bp-cross-h { left: -12px; right: -12px; }
.bp-cross-v { top: -12px; bottom: -12px; }
.bp-phase { gap: 10px; }
/* Spine aligned with real diamond center:
   v11-K override sets bp-node-wrap margin-left: 4px, width: 44px → center at 26px */
.bp-phase::before { left: 26px; }
.bp-ph-01::before { top: 20px; }
}
@media (max-width: 480px) and (min-width: 361px) {
.h-title { font-size: 2.4rem !important; letter-spacing: -2.5px; }
}
.proof-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; height: 36px; background: #000; border-bottom: 1px solid rgba(0,212,255,0.18); overflow: hidden; }
.pb-inner { position: relative; width: 100%; height: 100%; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.pb-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.68rem; font-weight: 500; color: var(--text-mid); letter-spacing: 1px; opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; padding: 0 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.pb-msg.pb-active { opacity: 1; transform: translateY(0); }
.pb-ico { margin-right: 8px; font-size: 0.78rem; }
#pbCity, #pbTime { color: var(--accent); font-weight: 600; }
.nav { top: 36px; }
.hero { padding-top: 142px; }
.hero-scan { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(0,212,255,0.15); box-shadow: 0 0 14px rgba(0,212,255,0.5); pointer-events: none; z-index: 3; opacity: 0; }
.hero-scan.scan-run { animation: heroScanSweep 800ms ease-out forwards; }
@keyframes heroScanSweep {
  0% { top: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.c-card { padding-top: 2.8rem; }
/* Don't let the "VERIFIED RESULT" badge stick out above the card — parent
   .c-grid has overflow-x:hidden which clips it. Anchor it inside instead. */
.c-verified { position: absolute; top: 10px; right: 14px; z-index: 7; display: inline-flex; align-items: center; gap: 5px; background: var(--green); color: #000; font-family: var(--mono); font-size: 0.56rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 10px; border: 2px solid #000; box-shadow: 2px 2px 0 #000; white-space: nowrap; }
.c-verified svg { width: 10px; height: 10px; stroke: #000; flex-shrink: 0; }
.c-card .c-stamp { top: 44px; }

/* Mobile: smaller verified badge + shorter "VERIFIED" text, stamp pushed down */
@media (max-width: 660px) {
  .c-verified { font-size: 0.5rem !important; padding: 4px 7px !important; letter-spacing: 1px !important; top: 8px !important; right: 10px !important; }
  .c-verified svg { width: 9px !important; height: 9px !important; }
  .c-card .c-stamp { top: 38px !important; font-size: 0.52rem !important; padding: 4px 9px !important; }
  .c-card { padding-top: 3.2rem !important; }
}
.subject-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 52px; }
.sm-card { background: var(--surface2); border: 2px solid #000; box-shadow: 4px 4px 0 #000; padding: 24px 14px; text-align: center; position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.sm-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.5; }
.sm-card:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #000; }
.sm-val { font-family: var(--mono); font-size: 2rem; font-weight: 700; color: var(--accent); line-height: 1; text-shadow: 0 0 22px rgba(0,212,255,0.35); }
.sm-val .sm-unit { font-size: 1.2rem; color: var(--text); font-weight: 600; margin-left: 1px; text-shadow: none; }
.sm-lbl { font-size: 0.62rem; color: var(--text-mid); text-transform: uppercase; letter-spacing: 2px; margin-top: 10px; }
.demo-mirror { margin-top: 22px; padding: 18px 24px; background: var(--surface); border: 2px solid #000; border-left: 4px solid var(--accent); box-shadow: 4px 4px 0 #000; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.dm-label { font-family: var(--mono); font-size: 0.64rem; color: var(--text-dim); letter-spacing: 2.5px; text-transform: uppercase; flex-shrink: 0; }
.dm-rows { display: flex; gap: 28px; flex-wrap: wrap; flex: 1; }
.dm-row { display: flex; align-items: baseline; gap: 10px; }
.dm-pct { font-family: var(--sans); font-size: 1.5rem; font-weight: 900; color: var(--accent); line-height: 1; text-shadow: 0 0 18px rgba(0,212,255,0.22); }
.dm-desc { font-size: 0.76rem; color: var(--text); }
.limits-box { background: var(--surface); border: 2px solid #000; box-shadow: var(--shadow-lg); padding: 48px 40px; position: relative; max-width: 900px; margin: 0 auto; }
.lb-corners { position: absolute; inset: 0; pointer-events: none; }
.lb-c { position: absolute; width: 16px; height: 16px; border: 2px solid var(--text-dim); }
.lb-c.tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.lb-c.tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.lb-c.bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.lb-c.br { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.lb-tab { position: absolute; top: -1px; left: 32px; background: var(--text-dim); color: #000; font-family: var(--mono); font-size: 0.62rem; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; padding: 4px 14px; border: 2px solid #000; box-shadow: var(--shadow-sm); transform: translateY(-50%); }
.lb-title { font-family: var(--sans); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 900; text-transform: uppercase; margin-bottom: 12px; letter-spacing: -1px; line-height: 1; }
.lb-intro { font-size: 0.88rem; color: var(--text-mid); margin-bottom: 26px; }
.lb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lb-item { display: flex; gap: 12px; padding: 16px 18px; background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid rgba(255,48,64,0.4); font-size: 0.78rem; line-height: 1.65; color: var(--text-mid); }
.lb-item strong { color: var(--text); display: inline; }
.lb-x { color: var(--red); font-family: var(--sans); font-size: 1.2rem; font-weight: 900; line-height: 1.3; flex-shrink: 0; }
.scam-inoc { margin-bottom: 20px; padding: 16px 20px; background: var(--surface); border: 2px solid #000; border-left: 4px solid var(--red); box-shadow: 5px 5px 0 #000; position: relative; }
.si-head { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--red); letter-spacing: 1.5px; margin-bottom: 12px; text-transform: uppercase; }
.si-head svg { color: var(--red); flex-shrink: 0; }
.si-body { font-size: 0.76rem; color: var(--text-mid); line-height: 1.6; }
.si-list { list-style: none; padding: 8px 0 0; margin: 0; }
.si-list li { padding: 4px 0; font-size: 0.74rem; color: var(--text); display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.si-check { color: var(--green); font-weight: 900; flex-shrink: 0; font-family: var(--mono); text-shadow: 0 0 6px rgba(0,255,127,0.35); }
.pricing-compare { padding: 18px 44px 4px; border-bottom: 1px solid var(--border); }
.pc-label-hdr { font-family: var(--mono); font-size: 0.58rem; color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.pc-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 0.78rem; color: var(--text-mid); border-bottom: 1px dashed rgba(255,255,255,0.04); }
.pc-row:last-child { border-bottom: none; }
.pc-label { letter-spacing: 0.3px; }
.pc-price { text-decoration: line-through; color: var(--text-dim); font-family: var(--mono); font-weight: 500; }
.pc-unit { font-size: 0.7em; opacity: 0.75; margin-left: 3px; }
.pc-row-apex { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--border2); border-bottom: none; color: var(--text); font-weight: 700; }
.pc-row-apex .pc-label { color: var(--accent); font-family: var(--mono); letter-spacing: 1.5px; text-transform: uppercase; font-size: 0.76rem; }
.pc-apex-price { text-decoration: none; color: var(--accent); font-family: var(--sans); font-size: 1.25rem; font-weight: 900; letter-spacing: -0.5px; }
.pc-apex-price .pc-unit { color: var(--text-dim); font-family: var(--mono); font-weight: 500; font-size: 0.55em; text-transform: uppercase; letter-spacing: 1px; margin-left: 6px; }
.pricing-not { padding: 16px 44px 18px; border-bottom: 2px solid var(--border2); }
.pn-label { font-family: var(--mono); font-size: 0.62rem; color: var(--text-dim); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.pn-list { display: flex; flex-direction: column; gap: 5px; }
.pn-item { font-size: 0.74rem; color: var(--text-mid); display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.pn-x { color: rgba(255,48,64,0.75); font-weight: 900; flex-shrink: 0; font-family: var(--mono); font-size: 0.85rem; line-height: 1.3; }
.price-lock { margin: 18px 44px 14px; background: rgba(255,176,32,0.07); border: 1px solid rgba(255,176,32,0.35); border-left: 3px solid var(--amber); padding: 12px 16px; }
.pl-head { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--amber); letter-spacing: 1px; line-height: 1.35; }
.pl-icon { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.pl-text { flex: 1; }
#priceLockDate { color: #fff; font-weight: 800; }
.pl-sub { font-size: 0.68rem; color: var(--text-mid); margin-top: 5px; padding-left: 22px; line-height: 1.4; }
.pl-sub strong { color: var(--amber); font-weight: 800; }
.reality-check { margin: 0 44px 14px; background: rgba(0,0,0,0.3); border: 1px solid var(--border2); }
.rc-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; background: transparent; border: none; padding: 12px 14px; font-family: var(--mono); font-size: 0.74rem; color: var(--accent); letter-spacing: 0.3px; cursor: pointer; text-align: left; transition: background .2s; }
.rc-toggle:hover { background: rgba(0,212,255,0.04); }
.rc-q { line-height: 1.3; display: flex; align-items: center; gap: 8px; }
.rc-qmark { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.4); font-weight: 900; font-size: 0.72rem; color: var(--accent); flex-shrink: 0; }
.rc-arr { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0,212,255,0.3); color: var(--accent); font-size: 1rem; line-height: 1; font-weight: 700; transition: transform 0.35s cubic-bezier(.175,.885,.32,1.275); flex-shrink: 0; margin-left: 10px; }
.rc-answer { max-height: 0; overflow: hidden; transition: max-height .45s ease, padding .45s ease; font-size: 0.72rem; color: var(--text-mid); line-height: 1.65; padding: 0 14px; }
.rc-answer.open { max-height: 340px; padding: 10px 14px 16px; border-top: 1px solid var(--border2); }
.rc-intro { color: var(--text); margin-bottom: 6px; font-size: 0.74rem; }
.rc-answer ul { list-style: none; padding: 6px 0 0; margin: 0; }
.rc-answer li { padding: 4px 0; font-size: 0.72rem; color: var(--text); display: flex; align-items: flex-start; gap: 8px; line-height: 1.55; }
.rc-bul { color: var(--accent); flex-shrink: 0; font-weight: 700; }
.rc-answer strong { color: var(--accent); font-weight: 700; }
.rc-toggle[aria-expanded="true"] .rc-arr { transform: rotate(45deg); background: rgba(0,212,255,0.08); border-color: rgba(0,212,255,0.5); }
.purchase-feed-wrap { margin: 0 44px 14px; padding: 10px 14px; background: rgba(0,0,0,0.3); border: 1px solid var(--border2); }
.pf-label { font-family: var(--mono); font-size: 0.58rem; color: var(--text-dim); letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 7px; }
.purchase-feed { display: flex; flex-direction: column; gap: 3px; }
.pf-row { font-family: var(--mono); font-size: 0.64rem; color: var(--text-mid); letter-spacing: 0.3px; text-align: left; line-height: 1.5; }
.pf-dot { color: var(--green); font-size: 0.56rem; margin-right: 6px; text-shadow: 0 0 6px var(--green); display: inline-block; width: 8px; }
.pf-name { color: var(--text); font-weight: 600; }
.pf-city { color: var(--text-mid); }
.pf-time { color: var(--text-dim); }
.cta-guarantee { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-family: var(--mono); font-size: 0.7rem; color: var(--text-mid); letter-spacing: 0.5px; line-height: 1.3; }
.cta-guarantee svg { color: var(--green); flex-shrink: 0; }
.cta-guarantee span { color: var(--text); font-weight: 500; }
.cta-trust-icons { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.cti-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.62rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.2px; }
.cti-item svg { color: var(--accent); flex-shrink: 0; }
.cti-sep { color: var(--border3); font-size: 0.7rem; }
@media (max-width: 420px) {
.cta-trust-icons { gap: 8px; }
.cti-item { gap: 4px; font-size: 0.55rem; letter-spacing: 0.8px; }
.cti-sep { display: none; }
}
.sticky-bar { padding: 9px 14px 7px; line-height: 1.2; }
.sb-main { font-size: 0.78rem; font-weight: 800; letter-spacing: 2.5px; line-height: 1.2; }
.sb-sub { font-size: 0.55rem; font-weight: 600; letter-spacing: 0.3px; text-transform: none; display: flex; align-items: center; gap: 5px; opacity: 0.82; line-height: 1.2; }
.sb-sub svg { stroke: #000; flex-shrink: 0; }
@media (max-width: 400px) {
.sm-val { font-size: 1.4rem; }
.sm-val .sm-unit { font-size: 0.9rem; }
.sm-card { padding: 16px 8px; box-shadow: 3px 3px 0 #000; }
.sm-lbl { font-size: 0.52rem; letter-spacing: 1px; }
}
#scrollProgress { top: 36px; z-index: 1000; }

/* Fix 1: pricing headline */
.pricing-head{flex:1;min-width:0}
.pricing-kicker{font-family:var(--mono);font-size:.62rem;font-weight:700;color:var(--text-dim);letter-spacing:3px;text-transform:uppercase;margin-bottom:12px}
.pricing-headline{font-family:var(--sans);font-size:clamp(1.6rem,3.2vw,2.25rem);font-weight:900;line-height:1;letter-spacing:-1px;color:var(--text);margin-bottom:10px}
.pricing-headline .ph-accent{color:var(--accent);text-shadow:0 0 40px rgba(0,212,255,.25)}
.pricing-subline{font-family:var(--mono);font-size:.68rem;color:var(--text-mid);letter-spacing:1.5px}
@media (max-width:660px){.pricing-headline{font-size:1.5rem;letter-spacing:-.5px}.pricing-kicker{font-size:.56rem;letter-spacing:2px;margin-bottom:8px}.pricing-subline{font-size:.62rem;letter-spacing:1px}}

/* ═════════════════════════════════════════════════════════
   APEX v8 — VISUAL POLISH LAYER
   Micro-interactions · depth · typography · mobile · creative
   ═════════════════════════════════════════════════════════ */

/* ── 1A · MODULE CARDS (method cards) hover state ──
   Each mod-item gets its own accent color via nth-child,
   with spring-eased lift + icon rotation. The 7 modules
   are the "7 proprietary methods" — mapped 1:1 to colors. */
.mod-list { position: relative; }
.mod-item {
  position: relative;
  transition:
    transform .28s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow .28s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    background .2s ease,
    border-left-color .28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Inner top-edge highlight (2D) to lift off the flat shadow */
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.04);
}
.mod-item:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hover), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 22px var(--mod-glow, rgba(0,212,255,0.08));
}
/* Icon/number rotate on hover — the "mc-svg-icon" equivalent is .mod-num */
.mod-num { transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity .25s ease, color .25s ease; transform-origin: center; }
.mod-item:hover .mod-num { transform: rotate(8deg); opacity: 0.35; }

/* Per-card accent colors (mapping 7 methods → palette)
   01=red (Impact)    02=red (AIS)      03=purple (HGH)
   04=accent (VBR+)   05=accent (Routine) 06=amber (Nutrition)  07=green (Visual) */
.mod-item:nth-child(1) { --mod-accent: var(--red);    --mod-glow: rgba(255,48,64,0.12); }
.mod-item:nth-child(2) { --mod-accent: var(--red);    --mod-glow: rgba(255,48,64,0.12); }
.mod-item:nth-child(3) { --mod-accent: var(--purple); --mod-glow: rgba(160,110,255,0.14); }
.mod-item:nth-child(4) { --mod-accent: var(--accent); --mod-glow: rgba(0,212,255,0.12); }
.mod-item:nth-child(5) { --mod-accent: var(--accent); --mod-glow: rgba(0,212,255,0.12); }
.mod-item:nth-child(6) { --mod-accent: var(--amber);  --mod-glow: rgba(255,176,32,0.12); }
.mod-item:nth-child(7) { --mod-accent: var(--green);  --mod-glow: rgba(0,255,127,0.14); }
.mod-item:hover { border-left-color: var(--mod-accent, var(--accent)); }
.mod-item:hover .mod-num { color: var(--mod-accent, var(--accent)); }

/* ── 1B · SHIMMER on CTAs (refined spec) ──
   Diagonal 20deg skewed sweep, 40% width, rgba(255,255,255,0.08),
   3s interval. Subtle, like light catching a surface. */
.b-main::after,
.b-buy::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  animation: shimmerSweep 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmerSweep {
  0%   { left: -60%; }
  55%  { left: 120%; }
  100% { left: 120%; }
}
@media (prefers-reduced-motion: reduce) {
  .b-main::after, .b-buy::after { animation: none; opacity: 0; }
}

/* ── 1D · FAQ arrow hover-preview rotation ──
   On hover, the + previews a ~18deg rotation (hint at coming 45).
   Reverts on mouseleave if not actually opened. */
.faq-q:hover .arr:not(.open) {
  transform: rotate(18deg);
  border-color: rgba(0,212,255,0.4);
  background: rgba(0,212,255,0.03);
}

/* ── 2A · HERO HEADLINE RADIAL GLOW ──
   Subtle glow behind h1 text only, not entire hero. */
.h-title { position: relative; z-index: 1; }
.h-title-glow {
  position: absolute;
  top: 50%;
  left: 10%;
  width: 600px;
  height: 600px;
  max-width: 120%;
  background: radial-gradient(circle, rgba(0,212,255,0.04) 0%, rgba(0,212,255,0.015) 40%, transparent 65%);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  filter: blur(4px);
}
.h-title > .t-line,
.h-title > .t-dot { position: relative; z-index: 1; }

/* ── 2B · SECTION SEPARATORS with decorative lines ──
   Thin gradient lines extending left/right of the text spans. */
.sep { align-items: center; gap: 20px; }
.sep span { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.sep span:first-of-type::before,
.sep span:last-of-type::after {
  content: '';
  display: inline-block;
  height: 1px;
  width: clamp(40px, 12vw, 180px);
  background: linear-gradient(90deg, transparent, var(--border2) 60%, var(--border3));
  opacity: 0.9;
  vertical-align: middle;
}
.sep span:first-of-type::before { margin-right: 14px; }
.sep span:last-of-type::after {
  margin-left: 14px;
  background: linear-gradient(90deg, var(--border3), var(--border2) 40%, transparent);
}
@media (max-width: 660px) {
  .sep span:first-of-type::before,
  .sep span:last-of-type::after { display: none; }
}

/* ── 2C · "MONITOR PANEL" corner brackets ──
   The hero visual (.h-visual) is the closest analog to a monitor
   panel (terminal before/after display). The existing .h-vis-corner
   sits INSIDE the panel; we add outer brackets reinforcing the
   "terminal display" aesthetic. */
.h-visual::before,
.h-visual::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 6;
}
.h-visual::before {
  top: -6px;
  left: -6px;
  border-top: 2px solid rgba(0,212,255,0.3);
  border-left: 2px solid rgba(0,212,255,0.3);
}
.h-visual::after {
  top: -6px;
  right: -6px;
  border-top: 2px solid rgba(0,212,255,0.3);
  border-right: 2px solid rgba(0,212,255,0.3);
}
/* Bottom brackets via wrapping corners */
.h-visual { position: relative; }
.hero-right::before,
.hero-right::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 6;
  bottom: -6px;
}
.hero-right::before {
  left: -6px;
  border-bottom: 2px solid rgba(0,212,255,0.3);
  border-left: 2px solid rgba(0,212,255,0.3);
}
.hero-right::after {
  right: -6px;
  border-bottom: 2px solid rgba(0,212,255,0.3);
  border-right: 2px solid rgba(0,212,255,0.3);
}
.hero-right { position: relative; }
@media (max-width: 900px) {
  .h-visual::before, .h-visual::after,
  .hero-right::before, .hero-right::after { display: none; }
}

/* ── 2D · INNER TOP-EDGE HIGHLIGHT on all brutal-shadow cards ──
   Adds: inset 0 1px 0 rgba(255,255,255,0.04) to lift cards
   off the flat 8x8 shadow. Cards feel slightly embossed. */
.fact-box     { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.04); }
.h-visual     { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.04); }
.guarantee-box { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.05); }
.limits-box   { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.04); }
.exit-popup-card { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.06); }
.comparison-table { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.04); }
.c-card { box-shadow: 6px 6px 0px #000, inset 0 1px 0 rgba(255,255,255,0.04); }
.c-card:hover { box-shadow: 9px 10px 0 #000, inset 0 1px 0 rgba(255,255,255,0.06), 0 0 32px rgba(0,212,255,0.05); }
.sm-card { box-shadow: 4px 4px 0 #000, inset 0 1px 0 rgba(255,255,255,0.04); }
.sm-card:hover { box-shadow: 6px 6px 0 #000, inset 0 1px 0 rgba(255,255,255,0.06); }
.scam-inoc { box-shadow: 5px 5px 0 #000, inset 0 1px 0 rgba(255,255,255,0.04); }
.demo-mirror { box-shadow: 4px 4px 0 #000, inset 0 1px 0 rgba(255,255,255,0.04); }
.pricing-card { box-shadow: 12px 12px 0 #000, 0 0 60px rgba(0,212,255,0.055), inset 0 1px 0 rgba(255,255,255,0.05) !important; }
.modal-content { box-shadow: 12px 12px 0 #000, inset 0 1px 0 rgba(255,255,255,0.05); }
.h-vis-bottom { box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); }
.hover\:fixed { } /* placeholder for preserving spec format */
.hero-right:hover .h-visual { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 50px rgba(0,212,255,0.07); }

/* ── 3A · SEQUENTIAL HERO HEADLINE ENTRY ──
   Each .t-line appears sequentially: t1@0ms, t2@120ms, t3@240ms.
   Override .rv so the h1 itself is always visible; only the child
   t-lines run the fade-in. If CSS fails to load, text stays readable. */
.h-title.rv {
  opacity: 1 !important;
  transform: none !important;
}
@keyframes titleLineIn {
  from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.h-title .t-line {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(4px);
  animation: titleLineIn 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  /* Don't use will-change — it creates a layer that can re-composit on hover
     and trigger visual glitches / re-animation. */
}
.h-title .t1 { animation-delay: 0.05s; }
.h-title .t2 { animation-delay: 0.17s; }
.h-title .t3 { animation-delay: 0.29s; }

/* Once animation is done (JS adds .t-done), lock the final state and strip
   the animation entirely so it can NEVER replay on hover/unhover. */
.h-title .t-line.t-done,
.h-title:hover .t-line.t-done {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .h-title .t-line { opacity: 1; transform: none; filter: none; animation: none; }
}

/* ── 3B · TEXT-WRAP: BALANCE on headings ──
   Modern CSS for more even line breaks. Supported browsers only;
   unsupported browsers use the native fallback silently. */
@supports (text-wrap: balance) {
  .s-title, .fact-title, .bp-title, .lb-title,
  .gb-title, .exit-title, .pricing-headline, .h-title { text-wrap: balance; }
}

/* ── 3C · ACCENT-TEXT GLOW on headings ──
   Very subtle cyan inner glow on .ac / accent spans within headings. */
.s-title .ac,
.fact-title .ac,
.h-title .t3,
.h-title .t-dot,
.pricing-headline .ph-accent {
  text-shadow:
    0 0 20px rgba(0,212,255,0.25),
    3px 3px 0 rgba(0,0,0,0.85);
}
.h-title .t3 {
  /* Compose with existing hero-specific shadow */
  text-shadow:
    0 0 20px rgba(0,212,255,0.25),
    0 0 60px rgba(0,212,255,0.28),
    0 0 130px rgba(0,212,255,0.1),
    4px 4px 0 rgba(0,0,0,0.85);
}

/* ── 4A · MOBILE PROOF BAR TRUNCATION ──
   .pb-short visible only on <480px; full text hidden.
   Also re-enable rotation of all 3 messages on mobile (JS does this). */
.pb-short { display: none; }
.pb-full  { display: inline; }
@media (max-width: 480px) {
  .pb-full  { display: none; }
  .pb-short { display: inline; }
  /* Override earlier rule that hides messages 1 & 2 on mobile */
  .pb-msg[data-msg="1"], .pb-msg[data-msg="2"] { display: flex; }
  .pb-msg[data-msg="0"] { opacity: 0; transition: opacity .45s ease, transform .45s ease; }
  .pb-msg.pb-active { opacity: 1 !important; }
}

/* ── 4B · CONNECTING DASHED LINE between module cards ──
   A vertical dashed line runs through the center-left of the
   .mod-list column, visually threading the 7 methods together. */
.mod-list::before {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 36px;
  width: 1px;
  background-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,212,255,0.18) 8%,
    rgba(0,212,255,0.18) 92%,
    transparent 100%);
  /* Dashed via CSS background-size trick for cross-browser dashed vertical */
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,212,255,0.2) 0 4px,
    transparent 4px 10px
  );
  mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.mod-item { position: relative; z-index: 1; }
@media (max-width: 660px) {
  .mod-list::before { left: 18px; }
}

/* ── 4C · STICKY BAR SPRING ENTRANCE ──
   Slide from translateY(100%) → translateY(0) with spring curve. */
@media (max-width: 660px) {
  .sticky-bar {
    display: flex !important;          /* present in DOM, just translated off */
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transform: translateY(110%);
    opacity: 0;
    transition:
      transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.28s ease;
    will-change: transform;
  }
  .sticky-bar.visible {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ── 5 · CREATIVE CALL: MAGNETIC CTA BUTTONS ──
   Desktop-only. Primary CTAs (.b-buy, .b-main, .nav-cta) gently
   translate toward the cursor when it's within ~90px of the button.
   Uses the `translate` CSS property so it composes with the existing
   hover `transform: translate(-3px,-3px)` — both offsets apply.
   See main.js for implementation. */
@media (hover: hover) and (pointer: fine) {
  .b-buy, .b-main, .nav-cta {
    /* Smooth return-to-rest when the JS stops animating */
    transition:
      transform .2s cubic-bezier(0.2, 0.9, 0.25, 1.1),
      box-shadow .18s ease,
      translate .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .b-buy.magnet-active,
  .b-main.magnet-active,
  .nav-cta.magnet-active {
    /* While actively tracking the cursor, use fast linear interpolation —
       the rAF loop is already doing smoothing, no need for transition easing */
    transition: transform .18s ease, box-shadow .18s ease, translate .08s linear;
  }
}

/* ── MOBILE HARMONIZATION for module cards on small screens ── */
@media (max-width: 660px) {
  .mod-item:hover { transform: none; box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.04); }
  .mod-item:hover .mod-num { transform: none; }
}

/* ── EXTRA POLISH: modal-content top-edge highlight ── */
.modal-content { position: relative; }

/* ── EXTRA POLISH: fact-tab subtle conic glow ── */
.fact-tab { position: absolute; }

/* ═════════════════════════════════════════════════════════
   APEX v9 — IN-APP BROWSER WARNING BANNER
   ═════════════════════════════════════════════════════════ */
#inapp-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 10001;
  background: var(--surface2);
  border: 2px solid var(--accent);
  box-shadow: 4px 4px 0 #000, 0 0 28px rgba(0, 212, 255, 0.25);
  padding: 14px 16px;
  font-family: var(--mono);
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.28s ease;
  max-width: 460px;
  margin: 0 auto;
}
#inapp-banner.iab-visible {
  transform: translateY(0);
  opacity: 1;
}
#inapp-banner.iab-hidden {
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}
#inapp-banner .iab-inner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
#inapp-banner .iab-icon {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
#inapp-banner .iab-body {
  flex: 1;
  min-width: 0;
}
#inapp-banner .iab-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
#inapp-banner .iab-sub {
  font-size: 0.68rem;
  color: var(--text-mid);
  line-height: 1.5;
  margin-bottom: 6px;
}
#inapp-banner .iab-how {
  font-size: 0.66rem;
  color: var(--text);
  line-height: 1.45;
  padding: 6px 8px;
  background: rgba(0, 212, 255, 0.06);
  border-left: 2px solid var(--accent);
}
#inapp-banner .iab-how strong {
  color: var(--accent);
  font-weight: 700;
}
#inapp-banner .iab-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  margin: -4px -4px 0 0;
  flex-shrink: 0;
  transition: color 0.2s;
}
#inapp-banner .iab-close:hover {
  color: var(--text);
}

/* Prevent banner from overlapping the sticky mobile CTA */
@media (max-width: 660px) {
  #inapp-banner {
    bottom: 64px;
  }
  .sticky-bar.visible + #inapp-banner,
  body:has(.sticky-bar.visible) #inapp-banner {
    bottom: 76px;
  }
}

/* ═════════════════════════════════════════════════════════
   APEX v10 — MOBILE LAYOUT FIXES (from automated audit)
   Fixes discovered by iPhone 13 / iPhone SE / Pixel 7 test:
   · Proof bar: messages overlapped instead of rotating
   · Roadmap (bp-content): zero inner width, text broke 1-word-per-line
   · Honest limits: 2-column grid on mobile
   · Pricing card: 44px padding + 3rem sticky-bar height left no room
   · Navbar: "ACCESS PROTOCOL" button clipped on iPhone SE
   · Hero video: empty black block after src removal
   · Tap targets: footer links 40×14 (unreachable)
   · Result carousel dots: 2×8 (invisible)
   · Tiny text (<11px): too many to list, scale base up on small screens
   ═════════════════════════════════════════════════════════ */

/* ── Fix A (REMOVED in v15): Mobile hero video was hidden.
   User requested showing it. See v15 rule at end of file. */

/* ── Fix B: Proof bar — fix overlap during rotation ──
   Desktop JS rotates messages by toggling .pb-active, but on mobile
   our v9 initMobileProofBar forces display:flex on all 3 simultaneously,
   and the fade-out isn't instant, so messages overlap visibly. */
@media (max-width: 480px) {
  .pb-msg {
    display: flex !important;   /* keep all 3 in DOM for rotation */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .pb-msg.pb-active {
    visibility: visible;
    opacity: 1 !important;
  }
  /* Reduce font + icon size so truncated text fits */
  .pb-short { font-size: 0.62rem; letter-spacing: 0.3px; }
  .pb-short .pb-ico { font-size: 0.72rem; margin-right: 5px; }
}

/* ── Fix C: Navbar — make "ACCESS PROTOCOL" fit on small screens ── */
@media (max-width: 420px) {
  .nav { padding: 0 14px; }
  .nav-logo-badge { display: none !important; }   /* drop "CLASSIFIED" stamp on ≤iPhone 14 */
  .nav-cta {
    font-size: 0.64rem !important;
    letter-spacing: 1px !important;
    padding: 8px 12px !important;
  }
  .nav-logo-text { font-size: 1rem !important; letter-spacing: 4px !important; }
}
@media (max-width: 340px) {
  .nav-cta {
    /* Shorten visible text while keeping screen-reader label full */
    font-size: 0 !important;
    letter-spacing: 0 !important;
  }
  .nav-cta::before {
    content: 'GET ACCESS';
    font-size: 0.62rem;
    letter-spacing: 1.2px;
  }
}

/* ── Fix D: Roadmap (bp-content) — give it actual width to work with ──
   Original CSS sets .bp-node-wrap { width: 56px; margin-left: 16px; }
   plus .bp-content { padding: 16px 18px } and flex gap: 18px, leaving
   ~200px for text on a 390px screen. That's why "VBR supine breathing
   protocol" broke to 1 word per line. */
@media (max-width: 768px) {
  .bp-phase {
    gap: 10px !important;
    padding-bottom: 40px !important;
  }
  .bp-node-wrap {
    width: 40px !important;
    margin-left: 8px !important;
    flex-shrink: 0;
  }
  .bp-node {
    width: 40px !important;
    height: 40px !important;
  }
  .bp-diamond {
    width: 14px !important;
    height: 14px !important;
  }
  .bp-node::before {
    width: 26px !important;
    height: 26px !important;
  }
  .bp-content {
    padding: 14px 12px !important;
    min-width: 0;
    flex: 1 1 auto;
  }
  .bp-list li {
    font-size: 0.72rem !important;
    padding: 2px 0 2px 14px !important;
    line-height: 1.45;
  }
  .bp-result {
    gap: 6px;
    padding: 10px 0 4px;
  }
  .bp-result-label {
    font-size: 0.52rem !important;
    letter-spacing: 1.5px;
  }
  .bp-result-val {
    font-size: 0.72rem !important;
    line-height: 1.45;
  }
  .bp-weeks {
    font-size: 0.5rem;
    margin-bottom: 8px;
  }
  .bp-tag {
    font-size: 0.54rem;
    white-space: nowrap;       /* keep "[ PHASE_01.INIT ]" on one line */
  }
  .bp-title {
    font-size: 1.2rem !important;
    letter-spacing: -0.5px;
  }
}

/* ── Fix E: Honest Limits — single column on mobile ── */
@media (max-width: 660px) {
  .lb-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .lb-item {
    padding: 14px 16px !important;
    font-size: 0.78rem !important;
    line-height: 1.55;
  }
  .limits-box {
    padding: 36px 20px !important;
  }
}

/* ── Fix F: Pricing card — reduce padding so content fits ── */
@media (max-width: 480px) {
  .pricing-top,
  .pricing-price-row,
  .pricing-urgency,
  .pricing-cta,
  .pricing-compare,
  .pricing-not,
  .price-lock,
  .reality-check,
  .purchase-feed-wrap {
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .trv-head,
  .trv-row,
  .trv-total-row,
  .trv-deal-row {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .pricing-live {
    font-size: 0.6rem !important;
    padding: 5px 10px !important;
    white-space: nowrap;
  }
  .pricing-headline {
    font-size: 1.4rem !important;
    letter-spacing: -0.3px;
  }
  .pricing-now {
    font-size: 2.8rem !important;
    letter-spacing: -1.2px;
  }
  .pricing-old { font-size: 0.78rem; }
  .pc-row {
    font-size: 0.7rem !important;
    padding: 5px 0;
  }
  .pc-apex-price { font-size: 1.05rem !important; }
  .trv-row {
    font-size: 0.68rem !important;
    gap: 8px !important;
    grid-template-columns: 16px 1fr auto !important;
  }
  .trv-row-sub { font-size: 0.58rem !important; }
  .trv-price { font-size: 0.68rem !important; }
  .trv-deal-price { font-size: 1.35rem !important; }
  .trv-total-strike { font-size: 0.75rem; }
}

/* ── Fix G: Footer links — make them tappable (min 44×44) up to iPad ── */
@media (max-width: 900px) {
  .f-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-bottom: 16px; }
  .f-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 80px;
    padding: 10px 14px;
    margin: 0;
    font-size: 0.75rem;
  }
}

/* ── Fix H: Result carousel dots — make them real tap targets ── */
.rc-nav { padding: 14px 0 !important; gap: 14px !important; }
.rc-dot {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  position: relative;
  background: transparent !important;
  border: none !important;
}
.rc-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  transition: background 0.2s, border-color 0.2s;
}
.rc-dot.rc-dot-on::after {
  background: var(--accent);
  border-color: var(--accent);
}
.rc-dot:hover:not(.rc-dot-on)::after {
  border-color: var(--text-mid);
}

/* ── Fix I: Global small-screen font baseline ──
   iPhone SE is 320px wide. With the current tiny letter-spacing on
   mono fonts, 9-10px sizes become unreadable. Bump everything up. */
@media (max-width: 480px) {
  :root { font-size: 16px; }
  .s-lbl            { font-size: 0.64rem; letter-spacing: 2.5px; }
  .stamp-red        { font-size: 0.56rem; letter-spacing: 2px; padding: 3px 10px; }
  .h-meta           { font-size: 0.58rem; letter-spacing: 1px; }
  .d-lbl            { font-size: 0.6rem !important; }
  .h-lbl            { font-size: 0.56rem; padding: 3px 8px; letter-spacing: 1.5px; }
  .h-badges span    { font-size: 0.56rem; padding: 3px 7px; letter-spacing: 1px; }
  .h-vis-bottom     { font-size: 0.56rem; padding: 6px 10px; letter-spacing: 1.5px; }
  .b-main, .b-buy, .b-ghost { font-size: 0.74rem !important; letter-spacing: 1.8px !important; }
  .nav-logo-text    { font-size: 1rem; letter-spacing: 5px; }
  .t-bull           { font-size: 0.65rem; }
  .ticker-track     { font-size: 0.74rem; letter-spacing: 2px; }
}

/* ── Fix J: Hero headline — bring closer to top on mobile ──
   Currently hero-right { order: -1 } shows video first, then the
   document strip, THEN the headline. User scrolls past the empty
   poster before seeing "YOUR BONES AREN'T FINISHED". Reorder. */
@media (max-width: 900px) {
  .hero-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .hero-left  { order: 1; }
  .hero-right { order: 2; }
  .h-doc-bar  { order: 0; padding-bottom: 14px; margin-bottom: 20px; }
  .h-title    { order: 1; }
  .h-sub      { order: 2; }
  .h-chips    { order: 3; }
  .d-strip    { order: 4; }
  .h-btns     { order: 5; }
  .h-social   { order: 6; }
  .hero-left  { display: flex; flex-direction: column; }
}

/* ── Fix K: Sticky bar — reduce height so it doesn't eat too much ── */
@media (max-width: 660px) {
  .sticky-bar {
    padding: 8px 14px 7px !important;
  }
  .sb-main {
    font-size: 0.74rem !important;
    letter-spacing: 2px !important;
  }
  .sb-sub {
    font-size: 0.52rem !important;
  }
  /* Push footer up so sticky bar doesn't overlap it */
  footer { padding-bottom: 88px !important; }
}

/* ── Fix L: Hero glow decorations — contain on mobile ── */
@media (max-width: 768px) {
  .hero-glow, .hero-glow-2, .h-title-glow {
    display: none;    /* these are 600-900px circles that overflow tiny screens */
  }
}

/* ── Fix M: Calculator modal — safer widths + bigger input fields ── */
@media (max-width: 480px) {
  .modal-content {
    max-width: calc(100vw - 16px);
  }
  .modal-body { padding: 20px 18px 22px; }
  #inapp-banner {
    font-size: inherit;
  }
}

/* ── Fix N: Prevent iOS form-zoom everywhere ── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ── Fix O: Subject cards grid — cleaner single column on mobile ── */
@media (max-width: 660px) {
  .c-grid { gap: 20px !important; }
  .c-card { padding: 20px 18px 22px !important; }
  .c-quote { padding: 14px 14px !important; font-size: 0.74rem; line-height: 1.65; }
}

/* ── Fix P: Comparison table — already has horizontal scroll;
           improve scroll hint shadow visibility on mobile ── */
@media (max-width: 660px) {
  .ct-outer::after {
    display: block !important;
    width: 40px;
  }
  .comparison-table {
    font-size: 0.68rem !important;
  }
  .comparison-table th,
  .comparison-table td {
    padding: 8px 10px !important;
  }
}

/* ── Fix Q: Exit popup — make dismissable button actually tappable ── */
@media (max-width: 660px) {
  .exit-dismiss {
    min-height: 44px;
    padding: 10px;
    font-size: 0.72rem !important;
  }
  .exit-popup-card {
    padding: 40px 22px 28px !important;
    max-width: calc(100vw - 32px);
  }
}

/* ── Fix R: Sep separator lines — hide on tiny, they already stack vertical ── */
@media (max-width: 480px) {
  .sep { padding: 10px 14px; }
  .sep span { font-size: 0.58rem; letter-spacing: 1.2px; }
}

/* ── Fix S: Bundle-breakdown (trv) — slightly shorter sub-text on mobile ── */
@media (max-width: 480px) {
  .trv-row-sub { display: none; }   /* keep main row clean, remove subtitle */
  .trv-head { padding: 9px 18px !important; font-size: 0.54rem !important; }
}

/* ── Fix T: Module cards — reduce left padding on mobile, they had too much ── */
@media (max-width: 480px) {
  .mod-item {
    padding: 18px 18px 18px 22px !important;
    border-left-width: 4px !important;
  }
  .mod-num {
    font-size: 1.4rem !important;
    padding-top: 0;
    opacity: 0.2;
  }
  .mod-body h3 { font-size: 0.9rem; }
  .mod-body .purpose { font-size: 0.7rem; }
  .mod-body li { font-size: 0.74rem; padding: 2px 0 2px 14px; }
  .mod-note { font-size: 0.68rem; }
  /* Hide the dashed connector line we added in v8 on very small screens —
     it was positioned for wider layouts and looks off here */
  .mod-list::before { display: none; }
}

/* ═════════════════════════════════════════════════════════
   APEX v11 — MOBILE FIX ROUND 2 (from second audit pass)
   Remaining issues after v10:
   · v10 Fix I font bumps not winning specificity battle
   · nav-cta height < 44px (tap target)
   · hero-glow still overflowing on some viewports
   · proof-bar messages occasionally overlap during rotation
   ═════════════════════════════════════════════════════════ */

/* ── v11-A: Force-bump tiny text everywhere on mobile (768px breakpoint) ──
   Fonts need to be ≥0.75rem (12px) to be comfortably readable on mobile.
   Previous v10 used 0.56-0.62rem which rendered at 9-10px. Bumped here. */
@media (max-width: 768px) {
  .stamp-red { font-size: 0.72rem !important; letter-spacing: 1.8px !important; padding: 4px 12px !important; }
  .h-meta { font-size: 0.72rem !important; letter-spacing: 0.8px !important; }
  .h-lbl { font-size: 0.72rem !important; padding: 5px 10px !important; letter-spacing: 1.3px !important; }
  .h-lbl.bef, .h-lbl.aft { font-size: 0.72rem !important; }
  .h-badges span { font-size: 0.72rem !important; padding: 5px 10px !important; letter-spacing: 1px !important; }
  .bdg-y, .bdg-g { font-size: 0.72rem !important; letter-spacing: 1px !important; }
  .h-vis-bottom { font-size: 0.72rem !important; padding: 8px 12px !important; letter-spacing: 1.2px !important; }
  .d-lbl { font-size: 0.72rem !important; letter-spacing: 1.8px !important; }
  .nav-logo-badge { font-size: 0.72rem !important; letter-spacing: 1.8px !important; padding: 3px 8px !important; }
  .nav-cta { font-size: 0.76rem !important; letter-spacing: 1.4px !important; }
  .nav-logo-text { font-size: 1.15rem !important; letter-spacing: 4.5px !important; }
  .s-lbl { font-size: 0.76rem !important; letter-spacing: 2.5px !important; }
  .sep span { font-size: 0.72rem !important; letter-spacing: 1.3px !important; }
  .t-bull { font-size: 0.78rem !important; }
  .ticker-track { font-size: 0.9rem !important; letter-spacing: 2.5px !important; }
  .pb-msg { font-size: 0.72rem !important; }
  .pb-short { font-size: 0.72rem !important; }
  .fact-tab { font-size: 0.72rem !important; letter-spacing: 2px !important; padding: 5px 14px !important; }
  /* Menu meta text (DOC-APEX-2026 etc.) */
  .nav-doc { font-size: 0.72rem !important; letter-spacing: 1px !important; }
  /* City names in proof-bar rotation */
  #pbCity, #pbTime, #pbCityShort { font-size: inherit !important; }
}

/* ── v11-A2: On REALLY narrow phones (≤360px) keep some micro text compact
   but never below 11px — accept 0.72rem (≈11.5px) as the absolute floor. */
@media (max-width: 360px) {
  .ticker-track { letter-spacing: 2px !important; }
  .stamp-red { padding: 3px 10px !important; }
  .nav-logo-text { font-size: 1rem !important; letter-spacing: 4px !important; }
}
V11_EOF_REPLACE

/* ── v11-B: nav-cta — guarantee 44px tap height ── */
@media (max-width: 768px) {
  .nav-cta {
    min-height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px 16px !important;
  }
  .nav { height: 56px; }
  /* Adjust hero padding to match new nav height */
  body .hero { padding-top: 120px; }
}

/* ── v11-C: Kill overflowing decorative glows on all mobile ── */
@media (max-width: 900px) {
  .hero-glow,
  .hero-glow-2,
  .h-title-glow {
    display: none !important;
  }
}

/* ── v11-D: Proof bar — absolute positioning with hard opacity toggle ──
   Force messages to stack perfectly and only one visible at a time. */
@media (max-width: 768px) {
  .proof-bar { height: 36px; overflow: hidden; }
  .pb-inner { position: relative; height: 100%; }
  .pb-msg {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
    pointer-events: none !important;
    padding: 0 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .pb-msg.pb-active {
    opacity: 1 !important;
  }
}

/* ── v11-E: Skip-link minimum height (a11y + tap target) ── */
.skip-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ── v11-F: Pricing-card — more aggressive space reclaim on narrow phones ── */
@media (max-width: 380px) {
  .pricing-top,
  .pricing-price-row,
  .pricing-urgency,
  .pricing-cta,
  .pricing-compare,
  .pricing-not,
  .price-lock,
  .reality-check,
  .purchase-feed-wrap,
  .trv-head,
  .trv-row,
  .trv-total-row,
  .trv-deal-row {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .pricing-headline { font-size: 1.25rem !important; }
  .pricing-now { font-size: 2.3rem !important; }
  .pc-apex-price { font-size: 0.95rem !important; }
  .trv-deal-price { font-size: 1.2rem !important; }
  .pricing-live { font-size: 0.56rem !important; padding: 4px 8px !important; }
}

/* ── v15: Hero video SHOWS on mobile (user requested) ──
   Put it right after headline/stats so user sees BEFORE/AFTER transformation. */
@media (max-width: 768px) {
  .hero-right { display: block !important; order: 99; margin-top: 28px; }
  .h-visual { display: block !important; min-height: auto; background: #000 !important; }
  .h-video { display: block !important; max-height: 70vh; object-fit: cover; }
}

/* ── v11-H: Section separator — reduce min-height on narrow screens ── */
@media (max-width: 480px) {
  .sep { padding: 8px 14px !important; font-size: 0.58rem !important; letter-spacing: 1.3px !important; }
}

/* ── v11-I: Tap targets ≥44px minimum (WCAG / Apple HIG) ── */
@media (max-width: 768px) {
  .nav-cta { min-height: 44px !important; padding: 10px 16px !important; }
  .b-main { min-height: 48px !important; }
  .sticky-bar { min-height: 48px !important; padding: 10px 14px 8px !important; }
}

/* ── v11-J: Remaining tiny-text holdouts from final audit pass ── */
@media (max-width: 768px) {
  .bp-num { font-size: 0.72rem !important; letter-spacing: 2px !important; }
  .bp-tag { font-size: 0.76rem !important; letter-spacing: 1.3px !important; }
  .bp-weeks { font-size: 0.72rem !important; letter-spacing: 1.8px !important; }
  .bp-result-label { font-size: 0.76rem !important; letter-spacing: 1.2px !important; }
  .c-stamp { font-size: 0.76rem !important; letter-spacing: 1.2px !important; padding: 6px 12px !important; }
  .sm-lbl { font-size: 0.76rem !important; letter-spacing: 1.2px !important; margin-top: 8px !important; }
  .dm-label { font-size: 0.76rem !important; letter-spacing: 1.6px !important; }
  /* Comparison table */
  .ct-feat, .comparison-table td, .comparison-table th { font-size: 0.72rem !important; }
  /* Catch-all: any inline-computed tiny text that slips through
     (the Bangkok/Tokyo proof-bar city names etc.) */
  .pb-msg span { font-size: inherit !important; }
}

/* ── v11-K: Roadmap bp-content MUST expand to fill available space ── */
@media (max-width: 768px) {
  .blueprint-timeline .bp-phase {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
  }
  .blueprint-timeline .bp-phase > .bp-spacer {
    display: none !important;
    width: 0 !important;
    flex: 0 0 0 !important;
  }
  .blueprint-timeline .bp-phase > .bp-node-wrap {
    flex: 0 0 44px !important;
    width: 44px !important;
    margin-left: 4px !important;
  }
  .blueprint-timeline .bp-phase > .bp-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 14px 14px !important;
  }
  /* All phases render identically: diamond left, content right */
  .blueprint-timeline .bp-phase > .bp-node-wrap { order: 1; }
  .blueprint-timeline .bp-phase > .bp-content { order: 2; }
  .blueprint-timeline .bp-left .bp-content,
  .blueprint-timeline .bp-right .bp-content {
    text-align: left !important;
  }
  .blueprint-timeline .bp-left .bp-list li,
  .blueprint-timeline .bp-right .bp-list li {
    padding-left: 14px !important;
    padding-right: 0 !important;
  }
  .blueprint-timeline .bp-left .bp-list li::before,
  .blueprint-timeline .bp-right .bp-list li::before {
    display: block !important;
    left: 0 !important;
    right: auto !important;
  }
  .blueprint-timeline .bp-left .bp-list li::after,
  .blueprint-timeline .bp-right .bp-list li::after {
    display: none !important;
  }
  /* Vertical bar line between cards */
  .blueprint-timeline .bp-phase { padding-bottom: 36px !important; }
}

/* ── v11-L: Remove blur filter from title animation on mobile ──
   On some devices the blur(4px) → blur(0) transition leaves a ghost/double-image.
   Drop the blur, keep the translateY+opacity fade. */
@media (max-width: 768px) {
  @keyframes titleLineIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .h-title .t-line {
    filter: none !important;
    will-change: opacity, transform;
  }
}

/* ═════════════════════════════════════════════════════════
   APEX v12 — V3 HEADLINE HOOK INTEGRATION
   New aggressive hook replaces "Your Bones Aren't Finished"
   with "They Told You You're [Done]. They Lied." pattern.
   "Done" gets a red strikethrough in the style of V3 design.
   ═════════════════════════════════════════════════════════ */

/* Strikethrough on "Done" — red slash across the word */
.t-strike {
  position: relative;
  display: inline-block;
  color: var(--text-mid);
  opacity: 0.75;
}
.t-strike::after {
  content: '';
  position: absolute;
  left: -4%;
  right: -4%;
  top: 52%;
  height: 6px;
  background: var(--red);
  transform: rotate(-2deg) translateY(-50%);
  transform-origin: center;
  box-shadow: 0 0 12px rgba(255, 48, 64, 0.5);
  border-radius: 2px;
  /* Animate in with the t2 line */
  animation: strikeIn 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.5s both;
  transform-origin: left center;
}
@keyframes strikeIn {
  0%   { transform: rotate(-2deg) translateY(-50%) scaleX(0); }
  100% { transform: rotate(-2deg) translateY(-50%) scaleX(1); }
}

/* Mobile — thinner strike, same effect */
@media (max-width: 768px) {
  .t-strike::after {
    height: 4px;
    left: -2%;
    right: -2%;
  }
}
@media (max-width: 480px) {
  .t-strike::after {
    height: 3px;
  }
}

/* ── v12 Contrast chips (negative/positive comparison from V3) ── */
.h-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 28px;
  font-family: var(--mono);
}
.h-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 1px solid;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.h-chip-icon {
  font-size: 0.95rem;
  line-height: 1;
  display: inline-block;
}
.h-chip-neg {
  color: var(--text-mid);
  border-color: rgba(255, 48, 64, 0.3);
  background: rgba(255, 48, 64, 0.05);
}
.h-chip-neg .h-chip-icon {
  color: var(--red);
  font-weight: 900;
}
.h-chip-pos {
  color: var(--accent);
  border-color: rgba(0, 212, 255, 0.4);
  background: rgba(0, 212, 255, 0.08);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.15);
}
.h-chip-pos .h-chip-icon {
  color: var(--accent);
  font-weight: 900;
}
.h-chip:hover {
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .h-chips {
    margin: 6px 0 22px;
    gap: 6px;
  }
  .h-chip {
    padding: 7px 11px !important;
    font-size: 0.74rem !important;
    letter-spacing: 1px !important;
  }
  .h-chip-icon {
    font-size: 0.9rem !important;
  }
}
@media (max-width: 380px) {
  .h-chip {
    padding: 6px 9px !important;
    font-size: 0.72rem !important;
  }
  .h-chip-icon {
    font-size: 0.85rem !important;
  }
}

/* ═════════════════════════════════════════════════════════
   APEX v13 FINAL — TAP TARGETS ON ALL VIEWPORTS
   Previous fixes used mobile-only media queries. These rules
   ensure 44×44 minimums on tablet and desktop too, per
   WCAG 2.2 Level AA (Target Size Minimum 2.5.8).
   ═════════════════════════════════════════════════════════ */

/* Footer links on every viewport */
.f-links a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 10px 14px;
}

/* Nav CTA min height */
.nav-cta {
  min-height: 44px;
}

/* Result carousel dots — enlarge click area (kept visual dot small) */
.rc-dot {
  width: 44px !important;
  height: 44px !important;
}

/* The "Refund Policy" inline link in refund body (.reality-check/exit-popup) */
a[href*="refunds.html"] {
  display: inline-block;
  padding: 4px 2px;
  min-height: 32px;  /* inline link, not a button — 32px is generous for text link */
}

/* ═════════════════════════════════════════════════════════
   APEX v15 — User-reported fixes
   ═════════════════════════════════════════════════════════ */

/* Fix 1: Hide Results carousel on mobile — looked compressed/broken */
@media (max-width: 900px) {
  .result-carousel { display: none !important; }
  .checkout-grid-v3 { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   APEX Height Assessment Modal — .acx namespace
   All classes and keyframes prefixed to avoid conflicts with the
   rest of the site. Uses existing CSS variables from :root above.
   ═══════════════════════════════════════════════════════════════ */

/* ── Open-button enhancement (pulse + glow halo) ───────────── */
#open-calculator-btn {
  position: relative;
  z-index: 1;
  animation: acx-cta-pulse 2.6s ease-in-out infinite;
}
#open-calculator-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: radial-gradient(ellipse at center, rgba(0,212,255,0.55) 0%, rgba(0,212,255,0) 70%);
  filter: blur(10px);
  z-index: -1;
  opacity: 0.8;
  animation: acx-cta-glow 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes acx-cta-pulse {
  0%, 100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(0,212,255,0.55); }
  50%      { box-shadow: var(--shadow-md), 0 0 0 14px rgba(0,212,255,0); }
}
@keyframes acx-cta-glow {
  0%, 100% { opacity: 0.55; transform: scale(0.98); }
  50%      { opacity: 0.95; transform: scale(1.04); }
}
#open-calculator-btn:hover {
  animation-play-state: paused;
}
#open-calculator-btn:hover::before {
  animation-play-state: paused;
  opacity: 1;
}
/* Give the button a tiny bounce when it first scrolls into view */
#open-calculator-btn.acx-attention {
  animation: acx-cta-pulse 2.6s ease-in-out infinite, acx-cta-pop 0.7s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes acx-cta-pop {
  0%   { transform: scale(0.88); }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #open-calculator-btn,
  #open-calculator-btn::before { animation: none !important; }
  #open-calculator-btn::before { opacity: 0.6; }
}

/* ── Modal height & scroll normalization ──
   .modal-content stays overflow:hidden (chrome), .modal-body is the sole
   scroll container with explicit max-height on every viewport. On iOS
   Safari, `document.body.style.overflow='hidden'` (set by openModal) would
   otherwise defeat nested scroll when multiple containers had overflow:auto
   without a bounded height. Using 100dvh so address-bar collapse doesn't clip. */
.modal-content { max-width: 880px; }
.modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
@media (min-width: 720px) {
  .modal-content { max-height: 92vh; max-height: 92dvh; }
  .modal-body {
    max-height: calc(92vh - 48px);
    max-height: calc(92dvh - 48px);
  }
}
@media (max-width: 719px) {
  .modal-content { max-height: 92vh; max-height: 92dvh; }
  .modal-body {
    max-height: calc(92vh - 48px);
    max-height: calc(92dvh - 48px);
  }
}

/* ── .acx root: background texture scoped to modal body ─────── */
.acx {
  position: relative;
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
}
.acx::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.7;
}
.acx::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 35%, rgba(0,212,255,0.05) 0%, transparent 60%);
}
.acx > * { position: relative; z-index: 1; }

.acx button {
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  color: inherit;
}
.acx input, .acx select {
  font-family: inherit;
  color: inherit;
  outline: none;
}

/* ── Stepper ───────────────────────────────────────────────── */
.acx-stepper {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 0 18px; flex-wrap: wrap;
}
.acx-st-node {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.58rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim);
  transition: color 0.35s;
}
.acx-st-node.acx-on { color: var(--accent); }
.acx-st-node.acx-done { color: var(--green); }
.acx-st-num {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid currentColor; font-family: var(--sans); font-weight: 800; font-size: 0.62rem;
  position: relative;
}
.acx-st-node.acx-on .acx-st-num { background: var(--accent-dim); box-shadow: 0 0 10px rgba(0,212,255,0.4); }
.acx-st-node.acx-done .acx-st-num::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; font-size: 0.7rem;
}
.acx-st-node.acx-done .acx-st-num span { display: none; }
.acx-st-conn { width: 28px; height: 1px; background: var(--border2); }
@media (max-width: 640px) {
  .acx-st-lbl { display: none; }
  .acx-st-conn { width: 14px; }
}

/* ── Steps ─────────────────────────────────────────────────── */
.acx-step { display: none; }
.acx-step.acx-live {
  display: block;
  animation: acx-step-in 0.45s cubic-bezier(.22,.9,.28,1.2) both;
}
@keyframes acx-step-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.acx-kicker {
  font-size: 0.6rem; letter-spacing: 3px; color: var(--accent);
  text-transform: uppercase; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.acx-kicker::before {
  content: ''; width: 24px; height: 1px; background: var(--accent);
}
.acx-head {
  font-family: var(--sans);
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.5px; line-height: 1.02;
  margin-bottom: 12px;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.8);
  border-bottom: none; padding-bottom: 0;
}
.acx-head .acx-ac { color: var(--accent); }
.acx-lede {
  font-size: 0.84rem; color: var(--text-mid); line-height: 1.75;
  max-width: 620px; margin-bottom: 22px;
}

/* ── Step 1: intro grid ────────────────────────────────────── */
.acx-intro-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start;
  margin: 14px 0 22px;
}
@media (max-width: 760px) {
  .acx-intro-grid { grid-template-columns: 1fr; gap: 22px; }
  .acx-intro-fig { display: none; } /* hide tall SVG in narrow modal */
}
.acx-intro-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border: 2px solid #000;
}
.acx-is-cell { background: var(--surface2); padding: 14px 10px; text-align: center; }
.acx-is-val { font-family: var(--sans); font-weight: 900; font-size: 1.4rem; color: var(--accent); letter-spacing: -0.5px; }
.acx-is-val.acx-g { color: var(--green); }
.acx-is-val.acx-a { color: var(--amber); }
.acx-is-lbl { font-size: 0.55rem; letter-spacing: 2px; color: var(--text-dim); text-transform: uppercase; margin-top: 6px; }

.acx-intro-bullets {
  list-style: none; padding: 0; margin: 16px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.acx-intro-bullets li {
  font-size: 0.76rem; color: var(--text); padding-left: 20px; position: relative; line-height: 1.65;
}
.acx-intro-bullets li::before {
  content: '▸'; position: absolute; left: 0; top: 0; color: var(--accent);
}
.acx-intro-bullets li b { color: var(--text); }

.acx-intro-fig {
  position: relative; border: 1px solid var(--border2); background: #000;
  aspect-ratio: 4/5; overflow: hidden; min-height: 280px;
}
.acx-intro-fig-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,212,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}
.acx-intro-fig-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.acx-intro-fig-corner { position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 3; }
.acx-intro-fig-corner.acx-tl { top: 6px; left: 6px; border-top: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); }
.acx-intro-fig-corner.acx-tr { top: 6px; right: 6px; border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); }
.acx-intro-fig-corner.acx-bl { bottom: 6px; left: 6px; border-bottom: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); }
.acx-intro-fig-corner.acx-br { bottom: 6px; right: 6px; border-bottom: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); }
.acx-intro-fig-tag {
  position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,0.8);
  border: 1px solid var(--accent); padding: 4px 9px; font-size: 0.54rem;
  letter-spacing: 2px; color: var(--accent); text-transform: uppercase; z-index: 3;
}

/* ── Form fields ────────────────────────────────────────────── */
.acx-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-bottom: 20px;
}
.acx-fields.acx-one   { grid-template-columns: 1fr; }
.acx-fields.acx-three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
  .acx-fields, .acx-fields.acx-three { grid-template-columns: 1fr; }
}
.acx-field { display: flex; flex-direction: column; gap: 6px; }
.acx-field-lbl {
  font-size: 0.58rem; letter-spacing: 2px; color: var(--text-mid); text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.acx-field-lbl .acx-param { color: var(--accent); font-weight: 700; }
.acx-field-lbl .acx-opt { color: var(--text-dim); text-transform: none; letter-spacing: 0.5px; margin-left: auto; }

.acx-input, .acx-select {
  padding: 12px 14px; background: var(--surface2); border: 2px solid var(--border2);
  border-left: 3px solid var(--accent); font-size: 0.85rem; color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  width: 100%;
}
.acx-input:focus, .acx-select:focus {
  border-color: var(--accent); box-shadow: 0 0 16px rgba(0,212,255,0.15); background: var(--surface3);
}
.acx-input.acx-err, .acx-select.acx-err {
  border-left-color: var(--red) !important; box-shadow: 0 0 14px rgba(255,48,64,0.3) !important;
}
.acx-select {
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(-45deg, transparent 50%, var(--accent) 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.acx-select option { background: var(--bg); color: var(--text); }

/* ── Tile pickers ──────────────────────────────────────────── */
.acx-tiles { display: grid; gap: 10px; margin-bottom: 4px; transition: outline 0.15s; }
.acx-tiles.acx-c2 { grid-template-columns: 1fr 1fr; }
.acx-tiles.acx-c3 { grid-template-columns: repeat(3, 1fr); }
.acx-tiles.acx-c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) {
  .acx-tiles.acx-c3, .acx-tiles.acx-c4 { grid-template-columns: 1fr 1fr; }
}
.acx-tiles.acx-err { outline: 2px solid var(--red); outline-offset: 2px; }
.acx-tile {
  padding: 14px; background: var(--surface2); border: 2px solid var(--border2);
  text-align: left; position: relative; transition: all 0.18s ease;
  display: flex; flex-direction: column; gap: 4px; min-height: 78px;
  color: var(--text);
}
.acx-tile:hover { border-color: var(--text-mid); transform: translateY(-2px); }
.acx-tile.acx-on {
  border-color: var(--accent); background: var(--accent-dim);
  box-shadow: 0 0 0 1px var(--accent), 0 0 24px rgba(0,212,255,0.2) inset;
}
.acx-tile.acx-on::after {
  content: '✓'; position: absolute; top: 8px; right: 10px; color: var(--accent); font-weight: 800;
}
.acx-tile-k {
  font-family: var(--sans); font-size: 0.88rem; font-weight: 800;
  text-transform: uppercase; color: var(--text); letter-spacing: -0.2px;
}
.acx-tile-s { font-size: 0.64rem; color: var(--text-dim); line-height: 1.5; }
.acx-tile-ico { font-family: var(--sans); font-weight: 900; font-size: 1.25rem; color: var(--accent); line-height: 1; }

/* ── Slider ───────────────────────────────────────────────── */
.acx-slider-wrap { padding: 10px 0 0; margin-bottom: 16px; }
.acx-slider-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.acx-slider-name { font-family: var(--sans); font-weight: 800; font-size: 0.92rem; text-transform: uppercase; }
.acx-slider-val {
  font-family: var(--sans); font-weight: 900; font-size: 1.3rem; color: var(--accent);
  text-shadow: 0 0 12px rgba(0,212,255,0.3);
}
.acx-slider-val.acx-g { color: var(--green); text-shadow: 0 0 12px rgba(0,255,127,0.3); }
.acx-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--red) 0%, var(--amber) 50%, var(--green) 100%);
  outline: none; border: none; padding: 0; box-shadow: none; cursor: pointer;
}
.acx-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; background: var(--accent);
  border: 2px solid #000; border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 0 4px rgba(0,212,255,0.2), 0 0 12px rgba(0,212,255,0.4);
}
.acx-slider::-moz-range-thumb {
  width: 22px; height: 22px; background: var(--accent);
  border: 2px solid #000; border-radius: 50%; cursor: pointer;
}
.acx-slider-scale {
  display: flex; justify-content: space-between;
  margin-top: 8px; font-size: 0.56rem; color: var(--text-dim);
  letter-spacing: 1px; text-transform: uppercase;
}
.acx-slider-hint { font-size: 0.66rem; color: var(--text-mid); margin-top: 8px; font-style: italic; }

/* ── Live projection strip ────────────────────────────────── */
.acx-live-proj {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-left: 3px solid var(--green); margin-top: 18px;
  flex-wrap: wrap;
}
.acx-lp-lbl { font-size: 0.54rem; letter-spacing: 2px; color: var(--text-dim); text-transform: uppercase; flex: 1; min-width: 110px; }
.acx-lp-val {
  font-family: var(--sans); font-weight: 900; font-size: 1.2rem; color: var(--green);
  text-shadow: 0 0 12px rgba(0,255,127,0.3);
}
.acx-lp-bar {
  flex: 1.4; min-width: 120px; height: 6px; background: #000;
  border: 1px solid var(--border2); position: relative; overflow: hidden;
}
.acx-lp-bar-fill {
  position: absolute; inset: 0 100% 0 0;
  background: linear-gradient(90deg, var(--accent), var(--green));
  transition: right 0.5s cubic-bezier(.22,.9,.28,1);
  box-shadow: 0 0 8px rgba(0,255,127,0.4);
}

/* ── Nav row (buttons) ────────────────────────────────────── */
.acx-nav-row {
  display: flex; gap: 12px; margin-top: 24px; align-items: center; flex-wrap: wrap;
}
.acx-btn {
  padding: 14px 26px; font-family: var(--mono); font-weight: 700;
  font-size: 0.7rem; letter-spacing: 2.5px; text-transform: uppercase;
  border: 2px solid #000; box-shadow: 4px 4px 0 #000;
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer; color: var(--text);
  background: transparent;
}
.acx-btn:hover  { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
.acx-btn:active { transform: translate(3px, 3px);   box-shadow: 0 0 0 #000; }
.acx-btn.acx-primary {
  background: var(--accent); color: #000;
  position: relative; overflow: hidden;
}
.acx-btn.acx-primary::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: acx-sweep 3s ease-in-out infinite;
}
@keyframes acx-sweep {
  0%       { left: -100%; }
  45%,100% { left: 120%; }
}
.acx-btn.acx-go { background: var(--green); color: #000; }
.acx-btn.acx-ghost {
  background: transparent; color: var(--text-mid); border-color: var(--border2); box-shadow: 3px 3px 0 #000;
}
.acx-btn.acx-ghost:hover { color: var(--text); border-color: var(--text-mid); }
.acx-btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.acx-nav-meta {
  margin-left: auto;
  font-size: 0.56rem; color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase;
}

/* ── Analysis terminal (step 5) ───────────────────────────── */
.acx-term {
  background: #000; border: 1px solid var(--border2); border-left: 3px solid var(--accent);
  padding: 14px 16px; font-size: 0.64rem; line-height: 1.85; height: 220px; overflow: hidden;
  position: relative; font-family: var(--mono); color: var(--text-dim);
  margin-top: 18px;
}
.acx-term::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
  background: linear-gradient(180deg, transparent, #000); pointer-events: none;
}
.acx-tline {
  display: flex; gap: 10px; opacity: 0;
  animation: acx-tline-in 0.25s ease forwards; align-items: baseline;
}
.acx-tline .acx-t { color: var(--text-dim); flex-shrink: 0; }
.acx-tline .acx-a { color: var(--accent); flex-shrink: 0; }
.acx-tline.acx-ok .acx-a { color: var(--green); }
.acx-tline.acx-ok .acx-m { color: var(--green); }
.acx-tline .acx-m { color: var(--text); }
@keyframes acx-tline-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}
.acx-prog-wrap { margin-top: 18px; }
.acx-prog-row {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px;
}
.acx-prog-label { font-size: 0.6rem; color: var(--amber); letter-spacing: 2px; text-transform: uppercase; }
.acx-prog-pct { font-family: var(--sans); font-weight: 900; font-size: 1.3rem; color: var(--accent); }
.acx-prog-bar { height: 6px; background: #000; border: 1px solid var(--border2); overflow: hidden; position: relative; }
.acx-prog-fill {
  position: absolute; inset: 0 100% 0 0;
  background: linear-gradient(90deg, var(--accent), var(--green));
  transition: right 0.3s linear; box-shadow: 0 0 10px rgba(0,212,255,0.4);
}

/* ── Result (step 6) ──────────────────────────────────────── */
.acx-result-head {
  text-align: center; margin-bottom: 22px; padding: 20px 18px;
  border: 1px dashed rgba(0,255,127,0.3); background: rgba(0,255,127,0.03);
}
.acx-result-stamp {
  display: inline-block; font-size: 0.55rem; letter-spacing: 3px; color: var(--green);
  border: 1px solid var(--green); padding: 3px 12px; margin-bottom: 10px;
  text-transform: uppercase; font-weight: 800;
}
.acx-result-title {
  font-family: var(--sans); font-size: clamp(1.2rem, 2.8vw, 1.8rem); font-weight: 900;
  text-transform: uppercase; letter-spacing: -0.4px; margin-bottom: 6px;
}
.acx-result-title .acx-ac { color: var(--accent); }
.acx-result-sub { font-size: 0.68rem; color: var(--text-mid); letter-spacing: 1.5px; }

.acx-result-grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 22px; margin-bottom: 22px;
}
@media (max-width: 760px) { .acx-result-grid { grid-template-columns: 1fr; } }

/* Comparison bars */
.acx-bars { background: var(--surface2); border: 2px solid #000; padding: 22px 20px; position: relative; }
.acx-bars-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.acx-bars-tag { font-size: 0.55rem; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; }
.acx-bars-delta {
  font-family: var(--sans); font-weight: 900; font-size: 1.5rem; color: var(--green);
  text-shadow: 0 0 18px rgba(0,255,127,0.35);
}
.acx-bars-body {
  display: flex; gap: 28px; align-items: flex-end; justify-content: center;
  height: 220px; position: relative;
}
.acx-bar-col {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  flex: 1; max-width: 100px; height: 100%; justify-content: flex-end;
}
.acx-bar-num { font-family: var(--sans); font-weight: 900; font-size: 0.95rem; color: var(--text); }
.acx-bar-num.acx-g { color: var(--green); text-shadow: 0 0 14px rgba(0,255,127,0.3); }
.acx-bar {
  width: 60px; min-height: 24px;
  border: 2px solid #000; box-shadow: 3px 3px 0 #000;
  transition: height 1s cubic-bezier(.22,.9,.28,1.1);
  position: relative; overflow: hidden;
}
.acx-bar.acx-cur {
  background: repeating-linear-gradient(45deg, var(--surface3) 0 6px, var(--border2) 6px 7px);
}
.acx-bar.acx-proj {
  background: linear-gradient(180deg, var(--green) 0%, rgba(0,255,127,0.2) 100%);
}
.acx-bar.acx-proj::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: acx-bar-shine 3s ease-in-out infinite;
}
@keyframes acx-bar-shine {
  0%, 100% { transform: translateY(100%); }
  50%      { transform: translateY(-100%); }
}
.acx-bar-lbl { font-size: 0.54rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); }

/* Chart */
.acx-chart { background: var(--surface2); border: 2px solid #000; padding: 20px; position: relative; }
.acx-chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.acx-chart-title { font-family: var(--sans); font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: -0.2px; }
.acx-chart-legend { display: flex; gap: 12px; font-size: 0.54rem; letter-spacing: 1.5px; color: var(--text-dim); text-transform: uppercase; }
.acx-chart-legend span { display: flex; align-items: center; gap: 5px; }
.acx-chart-legend i { width: 10px; height: 2px; background: var(--accent); display: inline-block; }
.acx-chart-legend .acx-g i { background: var(--green); }
.acx-chart-svg { width: 100%; height: 200px; display: block; }
.acx-chart-phase-lbl {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 0.52rem; letter-spacing: 1.5px; color: var(--text-dim); text-transform: uppercase;
}

/* Readout grid */
.acx-readout {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 2px solid #000; margin-bottom: 22px;
}
@media (max-width: 640px) { .acx-readout { grid-template-columns: repeat(2, 1fr); } }
.acx-ro-cell { background: var(--surface2); padding: 14px 10px; text-align: center; }
.acx-ro-lbl { font-size: 0.54rem; letter-spacing: 2px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px; }
.acx-ro-val { font-family: var(--sans); font-weight: 900; font-size: 1.1rem; color: var(--text); line-height: 1.1; }
.acx-ro-val.acx-ac { color: var(--accent); }
.acx-ro-val.acx-g  { color: var(--green); }
.acx-ro-val.acx-a  { color: var(--amber); }

/* Breakdown */
.acx-breakdown { background: var(--surface2); border: 2px solid #000; padding: 16px 18px; margin-bottom: 22px; }
.acx-bd-title {
  font-family: var(--sans); font-weight: 800; font-size: 0.76rem; text-transform: uppercase;
  margin-bottom: 12px; letter-spacing: -0.2px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.acx-bd-title small {
  color: var(--text-dim); font-family: var(--mono); font-weight: 500;
  font-size: 0.56rem; letter-spacing: 2px;
}
.acx-bd-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,0.06);
  align-items: center; font-size: 0.74rem;
}
.acx-bd-row:last-child { border-bottom: none; }
.acx-bd-name { color: var(--text-mid); }
.acx-bd-meter {
  width: 100px; height: 4px; background: #000; border: 1px solid var(--border2);
  position: relative; overflow: hidden;
}
@media (max-width: 540px) { .acx-bd-meter { width: 70px; } }
.acx-bd-meter-fill {
  position: absolute; inset: 0 100% 0 0;
  background: var(--accent); transition: right 0.8s ease;
}
.acx-bd-meter-fill.acx-g { background: var(--green); }
.acx-bd-meter-fill.acx-a { background: var(--amber); }
.acx-bd-meter-fill.acx-r { background: var(--red); }
.acx-bd-pts {
  font-family: var(--mono); font-weight: 700; color: var(--text);
  text-align: right; min-width: 52px;
}
.acx-bd-pts.acx-pos { color: var(--green); }
.acx-bd-pts.acx-neg { color: var(--red); }

/* CTA box */
.acx-cta-box {
  background: var(--surface2); border: 3px solid var(--accent);
  box-shadow: 6px 6px 0 #000, 0 0 40px rgba(0,212,255,0.15);
  padding: 24px 26px; position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
  margin-top: 6px;
}
@media (max-width: 640px) { .acx-cta-box { grid-template-columns: 1fr; text-align: center; } }
.acx-cta-box::before {
  content: 'SAVE PROJECTION + UNLOCK PROTOCOL';
  position: absolute; top: -10px; left: 22px;
  background: var(--accent); color: #000;
  font-size: 0.54rem; font-weight: 800; letter-spacing: 2.5px;
  padding: 3px 10px; border: 2px solid #000;
}
.acx-cta-title {
  font-family: var(--sans); font-weight: 900; font-size: 1.15rem;
  text-transform: uppercase; line-height: 1.15; margin-bottom: 6px;
}
.acx-cta-sub { font-size: 0.7rem; color: var(--text-mid); line-height: 1.6; }
.acx-cta-sub s { color: var(--text-dim); }
.acx-cta-sub b { color: var(--accent); }
.acx-cta-btn {
  padding: 16px 28px; background: var(--accent); color: #000;
  font-family: var(--mono); font-weight: 700; font-size: 0.76rem; letter-spacing: 3px;
  text-transform: uppercase; border: 2px solid #000; box-shadow: 5px 5px 0 #000;
  display: inline-flex; flex-direction: column; gap: 2px; align-items: center;
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer; position: relative; overflow: hidden;
  text-decoration: none;
}
.acx-cta-btn::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: acx-sweep 2.8s ease-in-out infinite;
}
.acx-cta-btn:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 #000; }
.acx-cta-btn small { font-size: 0.54rem; letter-spacing: 1.5px; color: #002; }

.acx-retake {
  display: block; text-align: center; margin-top: 16px;
  font-size: 0.62rem; letter-spacing: 2px; color: var(--text-dim);
  text-transform: uppercase; cursor: pointer; transition: color 0.2s;
}
.acx-retake:hover { color: var(--text-mid); }

.acx-disclaimer {
  margin-top: 20px; font-size: 0.58rem; color: var(--text-dim);
  line-height: 1.7; text-align: center; letter-spacing: 0.3px;
}

/* Proof chip */
.acx-proof-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: rgba(0,255,127,0.06);
  border: 1px solid rgba(0,255,127,0.2);
  font-size: 0.58rem; letter-spacing: 1.5px; color: var(--green);
  text-transform: uppercase; margin-bottom: 18px;
}
.acx-proof-chip i {
  width: 6px; height: 6px; background: var(--green); border-radius: 50%;
  box-shadow: 0 0 6px var(--green);
  animation: acx-blink 1.4s infinite;
}
@keyframes acx-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* ── Mobile tightening ──────────────────────────────────── */
@media (max-width: 640px) {
  .acx { font-size: 13px; }
  .acx-stepper { padding-bottom: 12px; }
  .acx-head { font-size: 1.3rem; }
  .acx-lede { font-size: 0.78rem; margin-bottom: 18px; }
  .acx-input, .acx-select { padding: 11px 12px; font-size: 16px; } /* 16px prevents iOS Safari focus-zoom */
  .acx-btn { padding: 12px 18px; font-size: 0.66rem; letter-spacing: 2px; }
  .acx-nav-meta { display: none; } /* room for back+next buttons on narrow screens */
  .acx-cta-box { padding: 20px; }
  .acx-cta-btn { padding: 14px 22px; font-size: 0.72rem; letter-spacing: 2px; }
}

/* Cursor override: site uses custom cursor hidden on buttons (main.js).
   Keep mouse visible for calc elements so interactive inputs feel right. */
.acx-btn, .acx-tile, .acx-input, .acx-select, .acx-slider, .acx-retake, .acx-cta-btn {
  cursor: pointer;
}
.acx-input, .acx-select { cursor: text; }
.acx-select { cursor: pointer; }