@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('assets/fonts/inter-latin.woff2') format('woff2');
}

:root {
    --bg: #08080c;
    --bg-2: #0b0b11;
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.18);
    --text: #ffffff;
    --muted: #a3a3b5;
    --dim: #7c7c92;
    --pink: #ff1493;
    --pink-soft: #ff5db3;
    --purple: #8a2be2;
    --green: #00ff88;
    --red: #ff6b6b;
    --grad: linear-gradient(135deg, #ff1493, #8a2be2);
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --wrap: 1180px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 16px/1.6 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dl, dd, dt, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 8px 14px; background: var(--pink); color: #fff; border-radius: 6px; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em; }
.label { color: var(--pink-soft); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 16px; }
.fine { color: var(--dim); font-size: 0.74rem; line-height: 1.5; }
.fine a { color: var(--muted); text-decoration: underline; }
.up { color: var(--green); }
.pink { color: var(--pink-soft); }
.dim { color: var(--dim); }
.accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.num { text-align: right; }

h1 { font-size: clamp(2.6rem, 5.6vw, 4.2rem); font-weight: 800; line-height: 1.0; letter-spacing: -0.035em; margin: 18px 0 22px; }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.lead { color: var(--muted); font-size: 1.1rem; max-width: 640px; margin-top: 18px; }
.sub { color: var(--muted); font-size: 1.15rem; max-width: 540px; }
.big { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 8px; background: var(--grad); color: #fff; font-weight: 600; font-size: 0.95rem; white-space: nowrap; position: relative; overflow: hidden; transition: opacity 0.15s, transform 0.15s; }
.btn:hover { opacity: 0.94; transform: translateY(-1px); }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); transform: translateX(-110%); transition: transform 0.7s ease; pointer-events: none; }
.btn:hover::after { transform: translateX(110%); }
.btn-lg { padding: 16px 28px; font-size: 1.02rem; }
.btn-sm { padding: 9px 16px; font-size: 0.88rem; }
.link-arrow { color: var(--text); font-weight: 600; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: border-color 0.15s; }
.link-arrow::after { content: ' →'; }
.link-arrow:hover { border-color: var(--pink); }
.pill { font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; padding: 4px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); color: var(--muted); white-space: nowrap; }
.pill.on { background: rgba(0, 255, 136, 0.12); color: var(--green); }
.live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: blink 1.5s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

/* Top bar */
.top { position: sticky; top: 0; z-index: 40; background: rgba(8, 8, 12, 0.92); border-bottom: 1px solid var(--line); transition: box-shadow 0.3s; }
.top.scrolled { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55); }
.top-in { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 24px; }
.logo img { width: 40px; height: auto; }
.top-nav { display: flex; align-items: center; gap: 28px; }
.top-nav a:not(.btn) { color: var(--muted); font-weight: 500; font-size: 0.92rem; transition: color 0.15s; }
.top-nav a:not(.btn):hover { color: var(--text); }
.menu { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.menu span { width: 22px; height: 2px; background: #fff; transition: transform 0.2s; }
.menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Hero */
.hero { position: relative; min-height: 680px; display: flex; align-items: center; padding: 96px 0 88px; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; background: url('assets/operator/neon-cityscape-poster.webp') center / cover no-repeat; }
.hero-vid { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; display: block; opacity: 0; transition: opacity 1.2s ease; }
.hero-vid.ready { opacity: 1; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 8, 12, 0.55) 0%, rgba(8, 8, 12, 0.55) 50%, rgba(8, 8, 12, 0.3) 100%), linear-gradient(180deg, rgba(8, 8, 12, 0.5), transparent 25%, transparent 70%, var(--bg) 100%); }
.hero-head { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; }
.hero-head > * { max-width: 620px; }
.hero-head h1 { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75)) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.55)); }
.hero-head .accent { background: linear-gradient(135deg, #ff2d9c 0%, #ff4fb5 35%, #b466ff 100%); -webkit-background-clip: text; background-clip: text; }
.hero-head .sub { color: #f1f1f7; font-weight: 500; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 4px 20px rgba(0, 0, 0, 0.8); }
.hero-head .link-arrow { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.tag-line { color: var(--pink-soft); text-transform: uppercase; letter-spacing: 0.14em; }
.tag-line .live { margin-right: 6px; }
.cta-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 32px 0 0; }
.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line-strong); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats strong { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.hero-stats span { color: #d6d6e2; font-size: 0.8rem; margin-top: 6px; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
html.js .hero-head > * { animation: rise 0.6s var(--ease) both; }
html.js .hero-head > :nth-child(1) { animation-delay: 0.03s; }
html.js .hero-head > :nth-child(2) { animation-delay: 0.1s; }
html.js .hero-head > :nth-child(3) { animation-delay: 0.18s; }
html.js .hero-head > :nth-child(4) { animation-delay: 0.26s; }
html.js .hero-head > :nth-child(5) { animation-delay: 0.34s; }

/* Retailer strip */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.strip-in { display: flex; align-items: center; gap: 24px; height: 56px; }
.strip-label { flex: none; color: var(--dim); }
.marquee { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 85%, transparent); }
.marquee-track { display: flex; gap: 40px; width: max-content; animation: slide 45s linear infinite; font-family: var(--mono); font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(calc(-50% - 20px)); } }

/* Sections */
.section { padding: 112px 0; border-bottom: 1px solid var(--line); }
.sec-head { max-width: 760px; margin-bottom: 56px; }
.sec-head.centre { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.centre .lead { margin-left: auto; margin-right: auto; }

/* 01 Compare: two columns on hairlines, no boxes */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; position: relative; }
.compare::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); }
.col-title { text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim); padding-bottom: 16px; border-bottom: 1px solid var(--line-strong); }
.with .col-title { color: var(--pink-soft); }
.col li { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 1rem; }
.col .t { color: var(--text); padding-top: 3px; }
.col li.miss span:last-child { color: var(--red); }
.col li.win span:last-child { color: var(--text); }
.outcome { display: flex; justify-content: space-between; align-items: baseline; padding-top: 22px; }
.outcome .mono { color: var(--dim); text-transform: uppercase; letter-spacing: 0.14em; }
.outcome strong { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.without .outcome strong { color: var(--dim); }
@keyframes flashRed { 0% { color: var(--muted); } 40% { color: #ff3b3b; } 100% { color: var(--red); } }
.compare.in .miss span:last-child { animation: flashRed 1s ease 0.9s both; }

/* 02 Parts: alternating editorial rows */
.part { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; padding: 64px 0; border-top: 1px solid var(--line); }
.part:last-child { padding-bottom: 0; }
.part.flip .part-copy { order: 2; }
.part-copy { position: sticky; top: 96px; }
.part-copy h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 14px; }
.part-copy p:not(.label) { color: var(--muted); font-size: 1.02rem; }
.ticks { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.ticks li { position: relative; padding-left: 24px; color: var(--muted); font-size: 0.95rem; }
.ticks li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.part-demo { min-width: 0; }
.demo-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); }
.demo-bar > .mono:first-child { color: var(--text); }
.demo-title { font-weight: 700; font-size: 1.05rem; padding: 18px 0 6px; }
.demo-foot { padding-top: 12px; }

.feed li { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; padding: 14px 12px; margin: 0 -12px; border-bottom: 1px solid var(--line); font-size: 0.92rem; transition: background-color 0.4s, box-shadow 0.4s; }
.feed li.hot { background: rgba(255, 20, 147, 0.07); box-shadow: inset 3px 0 0 var(--pink); }
.feed .t { color: var(--muted); }
.feed b { display: block; font-weight: 600; }
.feed small { color: var(--dim); font-size: 0.76rem; }
.feed .up { font-weight: 600; white-space: nowrap; }
@keyframes feedIn { from { opacity: 0; transform: translateY(-10px); background: rgba(255, 20, 147, 0.28); } to { opacity: 1; transform: none; } }
@keyframes feedOut { to { opacity: 0; transform: translateX(12px); } }
.feed li.new { animation: feedIn 0.55s var(--ease) both; }
.feed li.out { animation: feedOut 0.3s ease both; }

.ledger div { display: flex; justify-content: space-between; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.ledger dt { color: var(--muted); flex: none; }
.ledger dd { text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.ledger .total { border-bottom: 0; padding-top: 16px; }
.ledger .total dt { color: var(--text); font-weight: 700; }
.ledger .total dd { font-weight: 700; font-size: 1.25rem; }
.meter { display: inline-block; width: 90px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--v); background: var(--green); border-radius: 2px; transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease) 0.4s; }
.in .meter i { transform: scaleX(1); }

.cal li { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.cal .t { color: var(--muted); }
.cal b { display: block; font-weight: 600; }
.cal small { color: var(--dim); font-size: 0.76rem; }


/* 03 One flip */
.flip-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: center; }
.timeline { position: relative; padding-left: 32px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line-strong); transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--ease) 0.2s; }
.timeline.in::before { transform: scaleY(1); }
.timeline li { position: relative; padding: 0 0 36px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ''; position: absolute; left: -32px; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 2px solid var(--pink); transform: scale(0.5); opacity: 0; transition: transform 0.4s, opacity 0.4s; transition-delay: calc(0.25s + var(--i, 0) * 0.3s); }
.timeline.in li::before { transform: scale(1); opacity: 1; }
.timeline li:last-child::before { background: var(--green); border-color: var(--green); }
.timeline .t { color: var(--pink-soft); display: block; margin-bottom: 6px; }
.timeline h3 { font-size: 1.3rem; }
.timeline p { color: var(--muted); font-size: 0.95rem; margin-top: 6px; max-width: 480px; }

/* 04 Proof */
.table-wrap { overflow-x: auto; }
.wins th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); padding: 0 12px 14px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.wins th:first-child, .wins td:first-child { padding-left: 0; }
.wins th:last-child, .wins td:last-child { padding-right: 0; }
.wins td { padding: 18px 12px; border-bottom: 1px solid var(--line); font-size: 0.95rem; white-space: nowrap; transition: background-color 0.15s; }
.wins td.mono { color: var(--muted); }
.wins td.up { color: var(--green); font-weight: 700; }
.wins tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
.blur { filter: blur(6px); user-select: none; opacity: 0.8; transition: filter 0.3s; }
tr.locked td { color: var(--muted); }
tr.locked:hover .blur { filter: blur(4px); }
.reviews { margin-top: 64px; }
.rating { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line-strong); }
.rating strong { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.stars { color: #ffb02e; font-size: 1.1rem; letter-spacing: 0.1em; }
.rating .link-arrow { margin-left: auto; font-size: 0.92rem; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 32px; }
.quotes blockquote { margin: 0; }
.quotes p { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.quotes p::before { content: '“'; color: var(--pink); margin-right: 2px; }
.quotes p::after { content: '”'; color: var(--pink); margin-left: 2px; }
.quotes cite { display: block; font-style: normal; color: var(--dim); font-family: var(--mono); font-size: 0.74rem; margin-top: 14px; }

/* 05 Operator: full bleed */
.operator { position: relative; min-height: 720px; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.operator > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.operator-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 8, 12, 0.94) 0%, rgba(8, 8, 12, 0.82) 45%, rgba(8, 8, 12, 0.25) 100%), linear-gradient(180deg, var(--bg), transparent 15%, transparent 85%, var(--bg)); }
.operator-in { position: relative; z-index: 1; padding-top: 112px; padding-bottom: 112px; }
.operator-in > * { max-width: 600px; }
.operator-in .ticks { margin: 26px 0 34px; }
.operator-in .fine { margin-top: 18px; }

/* 06 Pricing */
.pricing { background: var(--bg-2); }
.plan { max-width: 640px; margin: 0 auto; text-align: center; }
.price { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-bottom: 36px; }
.price span:first-child { font-size: clamp(4rem, 9vw, 6.4rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.per { color: var(--dim); }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; text-align: left; border-top: 1px solid var(--line-strong); margin-bottom: 36px; }
.checks li { padding: 14px 0 14px 26px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; position: relative; }
.checks li::before { content: '✓'; position: absolute; left: 2px; color: var(--green); font-weight: 700; }
.plan .fine { margin-top: 18px; }
.maths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 960px; margin: 72px auto 0; padding-top: 32px; border-top: 1px solid var(--line-strong); }
.maths li { display: flex; flex-direction: column; gap: 10px; }
.maths strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }

/* 07 FAQ */
.faq-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--pink-soft); font-size: 1.4rem; font-weight: 300; transition: transform 0.2s; }
.faq details[open] summary::after { content: '−'; }
.faq p { color: var(--muted); padding: 0 0 22px; max-width: 640px; }

/* Dispatch */
.dispatch { border-bottom: 0; }
.dispatch-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.by { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--muted); font-size: 0.9rem; }
.by img { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); }
.email-row { display: flex; gap: 10px; }
.email input { flex: 1; min-width: 0; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg-2); color: #fff; font: inherit; }
.email input::placeholder { color: var(--dim); }
.email .fine { margin-top: 12px; }
.email .fine.ok { color: var(--green); }
.email .fine.err { color: var(--red); }
.hp { position: absolute; left: -5000px; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 56px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.foot-grid img { margin-bottom: 12px; }
.foot nav { display: flex; flex-direction: column; gap: 10px; }
.foot nav a { color: var(--muted); font-size: 0.92rem; }
.foot nav a:hover { color: var(--text); }
.foot-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }

/* Scroll reveal */
.rv, .rvs > * { transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
html.js .rv:not(.in), html.js .rvs:not(.in) > * { opacity: 0; transform: translateY(18px); }
html.js .wins tbody.rvs:not(.in) > tr { transform: none; }
.rvs.in > :nth-child(1) { --i: 0; } .rvs.in > :nth-child(2) { --i: 1; } .rvs.in > :nth-child(3) { --i: 2; } .rvs.in > :nth-child(4) { --i: 3; } .rvs.in > :nth-child(5) { --i: 4; } .rvs.in > :nth-child(6) { --i: 5; } .rvs.in > :nth-child(7) { --i: 6; } .rvs.in > :nth-child(8) { --i: 7; }

/* Responsive */
.flip-grid > *, .compare > *, .dispatch-grid > *, .faq-grid > *, .part > * { min-width: 0; }
@media (max-width: 1000px) {
    .compare { grid-template-columns: 1fr; gap: 48px; }
    .compare::before { display: none; }
    .part { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
    .part.flip .part-copy { order: 0; }
    .part-copy { position: static; }
    .flip-grid { grid-template-columns: 1fr; gap: 48px; }
    .faq-grid, .dispatch-grid { grid-template-columns: 1fr; gap: 28px; }
    .maths { grid-template-columns: 1fr 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .hero { min-height: 0; }
    .hero-vid { object-position: 70% center; }
    .hero-shade { background: linear-gradient(180deg, rgba(8, 8, 12, 0.8) 0%, rgba(8, 8, 12, 0.78) 60%, var(--bg) 100%); }
    .operator { min-height: 0; }
    .operator-shade { background: linear-gradient(180deg, rgba(8, 8, 12, 0.92) 0%, rgba(8, 8, 12, 0.85) 70%, var(--bg) 100%); }
    .operator-in { padding-top: 80px; padding-bottom: 80px; }
}
@media (max-width: 700px) {
    .section { padding: 72px 0; }
    .sec-head { margin-bottom: 40px; }
    .hero { padding: 56px 0 48px; }
    .hero-stats { gap: 20px; }
    .top-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 24px 20px; }
    .top-nav.open { display: flex; }
    .top-nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
    .top-nav .btn { margin-top: 16px; }
    .menu { display: flex; }
    .strip-label { display: none; }
    .col li { grid-template-columns: 72px 1fr; }
    .feed li { grid-template-columns: 72px 1fr; padding: 12px 8px; margin: 0 -8px; }
    .feed .up { grid-column: 2; }
    .cal li { grid-template-columns: 82px 1fr; }
    .cal .pill { grid-column: 2; justify-self: start; }
        .wins th:nth-child(1), .wins td:nth-child(1), .wins th:nth-child(6), .wins td:nth-child(6) { display: none; }
    .wins th:nth-child(2), .wins td:nth-child(2) { padding-left: 0; }
    .wins th:nth-child(5), .wins td:nth-child(5) { padding-right: 0; }
    .wins td:nth-child(2) { white-space: normal; min-width: 150px; }
    tr.locked td:nth-child(2)::after { content: "Members only"; display: block; width: max-content; margin-top: 4px; font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px; background: rgba(255, 20, 147, 0.15); color: var(--pink-soft); }
    .quotes { grid-template-columns: 1fr; gap: 28px; }
    .rating .link-arrow { margin-left: 0; }
    .checks { grid-template-columns: 1fr; }
    .maths { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
    .maths li { flex-direction: row; justify-content: space-between; align-items: baseline; }
    .email-row { flex-direction: column; }
    .foot-grid { grid-template-columns: 1fr; gap: 24px; }
    .outcome strong, .profit strong { font-size: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.js .rv:not(.in), html.js .rvs:not(.in) > * { opacity: 1; transform: none; }
    .rv, .rvs > *, .feed li, .timeline::before, .timeline li::before, .top, .meter i, .spark-line, .spark-fill { transition: none; }
    html.js .hero-head > *, .feed li.new, .feed li.out, .compare.in .miss span:last-child, .live i, .marquee-track { animation: none; }
    .timeline::before { transform: none; }
    .timeline li::before { transform: none; opacity: 1; }
    .meter i { transform: none; }
    .spark-line { stroke-dashoffset: 0; }
    .spark-fill { opacity: 1; }
    .btn::after { display: none; }
    .btn { transition: none; }
    .hero-vid { display: none; }
    .marquee-track { flex-wrap: wrap; width: auto; gap: 12px 24px; }
    .marquee { mask-image: none; -webkit-mask-image: none; }
}

/* ===== Scenes: animated product mockups ===== */
.centre { text-align: center; }
.fit { width: 100%; position: relative; }
.fit > * { width: 620px; transform-origin: top left; }

/* Device frames */
.phone { width: 300px; margin: 0 auto; padding: 10px; border-radius: 44px; background: #1a1a22; border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 2px #000; position: relative; }
.phone::before { content: ''; position: absolute; top: 20px; left: 50%; width: 84px; height: 24px; transform: translateX(-50%); border-radius: 14px; background: #000; z-index: 3; }
.phone-screen { height: 580px; border-radius: 36px; overflow: hidden; background: #0d0d14; position: relative; display: flex; flex-direction: column; }
.phone-badge { position: absolute; top: -6px; right: -6px; z-index: 4; width: 26px; height: 26px; border-radius: 50%; background: #f23f43; color: #fff; font: 700 0.72rem/26px var(--mono); text-align: center; box-shadow: 0 6px 16px rgba(242, 63, 67, 0.5); }
.phone-badge.pop { animation: badgePop 0.5s var(--ease); }
@keyframes badgePop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
.ios-bar { display: flex; justify-content: space-between; align-items: center; height: 42px; padding: 8px 24px 0; font: 600 0.74rem/1 -apple-system, 'Inter', sans-serif; color: #fff; flex: none; }
.ios-bar.light { color: #111; }
.ios-right { display: inline-flex; align-items: center; gap: 5px; }
.ios-bar .sig { width: 14px; height: 9px; background: linear-gradient(90deg, currentColor 0 2.5px, transparent 2.5px 4px, currentColor 4px 6.5px, transparent 6.5px 8px, currentColor 8px 10.5px, transparent 10.5px 12px, currentColor 12px 14px); -webkit-mask: linear-gradient(0deg, #000 0 3px, transparent 3px) 0 0 / 4px 9px no-repeat, linear-gradient(#000, #000) 4px 3px / 2.5px 6px no-repeat, linear-gradient(#000, #000) 8px 1.5px / 2.5px 7.5px no-repeat, linear-gradient(#000, #000) 12px 0 / 2px 9px no-repeat; mask: linear-gradient(0deg, #000 0 3px, transparent 3px) 0 0 / 4px 9px no-repeat, linear-gradient(#000, #000) 4px 3px / 2.5px 6px no-repeat, linear-gradient(#000, #000) 8px 1.5px / 2.5px 7.5px no-repeat, linear-gradient(#000, #000) 12px 0 / 2px 9px no-repeat; }
.ios-bar .wifi { width: 12px; height: 9px; border: 2px solid currentColor; border-bottom: 0; border-radius: 12px 12px 0 0; box-sizing: border-box; }
.ios-bar .bat { width: 22px; height: 10px; border: 1.5px solid currentColor; border-radius: 3px; position: relative; opacity: 0.9; }
.ios-bar .bat::after { content: ''; position: absolute; inset: 1.5px; right: 4px; background: currentColor; border-radius: 1px; }
.app-win { border-radius: 12px; overflow: hidden; background: #0d0d14; border: 1px solid var(--line-strong); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55); position: relative; }
.win-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #15151d; border-bottom: 1px solid var(--line); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.win-bar i:first-child { background: #ff5f57; } .win-bar i:nth-child(2) { background: #febc2e; } .win-bar i:nth-child(3) { background: #28c840; }
.win-bar .mono { margin: 0 auto; padding: 3px 14px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: var(--dim); font-size: 0.66rem; }

/* Product tile: sealed Elite Trainer Box */
.tcg { width: 58px; height: 58px; border-radius: 8px; position: relative; flex: none; background: linear-gradient(135deg, #ffffff 0%, #ffd9ee 30%, #e4d4ff 60%, #ffffff 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.15); overflow: hidden; }
.tcg i { position: absolute; left: 50%; top: 42%; width: 26px; height: 26px; transform: translate(-50%, -50%); border-radius: 50%; background: linear-gradient(180deg, #ff1493 0 48%, #111 48% 52%, #fff 52%); box-shadow: 0 0 0 2px #111; }
.tcg i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #111; }
.tcg b { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0; background: #111; color: #fff; font: 800 0.5rem/1 var(--mono); letter-spacing: 0.16em; text-align: center; }
.tcg.big { width: 120px; height: 120px; border-radius: 12px; }
.tcg.big i { width: 52px; height: 52px; box-shadow: 0 0 0 3px #111; }
.tcg.big i::after { width: 16px; height: 16px; box-shadow: 0 0 0 3px #111; }
.tcg.big b { font-size: 0.66rem; padding: 4px 0; }

/* Discord */
.phone-screen.dc { background: #313338; color: #dbdee1; }
.dc-top { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid #26272b; font-weight: 600; font-size: 0.86rem; color: #f2f3f5; background: #313338; flex: none; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
.dc-hash { color: #80848e; font-weight: 400; font-size: 1rem; }
.dc-members { margin-left: auto; font-size: 0.66rem; color: #949ba4; font-weight: 500; }
.dc-members::before { content: '●'; color: #23a55a; margin-right: 4px; font-size: 0.5rem; vertical-align: 2px; }
.dc-topic { margin-left: 8px; padding-left: 8px; border-left: 1px solid #3f4147; font-size: 0.64rem; font-weight: 400; color: #949ba4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-list { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 12px; overflow: hidden; }
.dc-msg { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; }
.dc-msg.new { animation: dcIn 0.45s var(--ease) both; }
.dc-msg.out { animation: dcOut 0.3s ease both; }
@keyframes dcIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dcOut { to { opacity: 0; } }
.dc-av { width: 32px; height: 32px; border-radius: 50%; background: var(--grad); color: #fff; font: 700 0.72rem/32px var(--mono); text-align: center; flex: none; }
.dc-av.bp { background: linear-gradient(135deg, #8a2be2, #4a1a7a); }
.dc-av.op { background: #1e1f22; border: 1px solid #3f4147; color: var(--pink-soft); line-height: 30px; }
.dc-name { font-size: 0.8rem; font-weight: 500; color: #f2f3f5; display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.dc-name.op { color: var(--pink-soft); }
.dc-bot { font: 600 0.56rem/1 'Inter', sans-serif; padding: 3px 4px; border-radius: 3px; background: #5865f2; color: #fff; letter-spacing: 0.02em; }
.dc-bot::before { content: '✓ '; }
.dc-tag { font: 600 0.54rem/1 'Inter', sans-serif; padding: 3px 4px; border-radius: 3px; background: rgba(255, 20, 147, 0.2); color: var(--pink-soft); }
.dc-time { color: #949ba4; font-size: 0.62rem; font-weight: 400; }
.dc-embed { border-left: 4px solid var(--pink); background: #2b2d31; border-radius: 4px; padding: 8px 12px 10px; max-width: 400px; }
.dc-embed.err { border-left-color: #f0b232; }
.dc-embed.bp { border-left-color: var(--purple); }
.dc-title { font: 600 0.62rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pink-soft); }
.dc-embed.err .dc-title { color: #f0b232; }
.dc-embed.bp .dc-title { color: #c9a2ff; }
.dc-item { font-weight: 700; font-size: 0.84rem; color: #f2f3f5; margin-top: 3px; line-height: 1.3; }
.dc-meta { color: #b5bac1; font-size: 0.72rem; margin-top: 4px; }
.dc-meta b { color: #f2f3f5; font-weight: 600; }
.dc-btns { display: flex; gap: 6px; margin-top: 9px; }
.dc-btn { font: 500 0.68rem/1 'Inter', sans-serif; padding: 7px 12px; border-radius: 4px; background: #5865f2; color: #fff; }
.dc-btn.main { background: #4e5058; }
.dc-react { display: flex; gap: 4px; margin-top: 5px; }
.dc-react span { font-size: 0.62rem; padding: 2px 6px; border-radius: 6px; background: #2b2d31; border: 1px solid #3f4147; color: #dbdee1; }
.dc-typing { display: flex; align-items: center; gap: 6px; padding: 4px 14px; font-size: 0.66rem; color: #dbdee1; opacity: 0; transition: opacity 0.3s; height: 22px; }
.dc-typing b { font-weight: 600; }
.phone.typing .dc-typing { opacity: 1; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: #dbdee1; animation: typingBounce 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; } .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.dc-text { font-size: 0.78rem; color: #dbdee1; line-height: 1.4; }
.dc-link { color: #00a8fc; }
.dc-foot { font-size: 0.6rem; color: #949ba4; margin-top: 8px; }
.dc-input { display: flex; align-items: center; gap: 10px; margin: 6px 12px 12px; padding: 9px 12px; border-radius: 8px; background: #383a40; font-size: 0.72rem; color: #6d6f78; flex: none; }
.dc-input i { width: 18px; height: 18px; border-radius: 50%; background: #b5bac1; color: #383a40; font: 800 0.8rem/18px 'Inter', sans-serif; text-align: center; font-style: normal; }

/* Discord desktop window (Blueprint) */
.dc-app { display: grid; grid-template-columns: 148px 1fr; height: 460px; background: #313338; color: #dbdee1; }
.dc-side { background: #2b2d31; display: flex; flex-direction: column; min-height: 0; }
.dc-server { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; font-weight: 700; font-size: 0.78rem; color: #f2f3f5; border-bottom: 1px solid #1f2023; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
.dc-server span { color: #b5bac1; font-weight: 400; }
.dc-chan { padding: 12px 8px; display: flex; flex-direction: column; gap: 1px; flex: 1; }
.dc-chan li { font-size: 0.74rem; color: #949ba4; padding: 5px 8px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-chan li::before { content: '#'; color: #80848e; margin-right: 6px; font-weight: 500; }
.dc-chan li.cat { font: 700 0.58rem/1 'Inter', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; margin: 12px 0 4px; padding: 0 4px; }
.dc-chan li.cat::before { content: '⌄'; margin-right: 4px; font-weight: 400; }
.dc-chan li.on { background: #404249; color: #f2f3f5; }
.dc-chan li.on::before { color: #f2f3f5; }
.dc-me { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #232428; margin-top: auto; }
.dc-me .dc-av { width: 26px; height: 26px; line-height: 24px; font-size: 0.6rem; }
.dc-me b { display: block; font-size: 0.68rem; color: #f2f3f5; }
.dc-me small { display: block; font-size: 0.58rem; color: #949ba4; }
.dc-main { display: flex; flex-direction: column; min-width: 0; }
.dc-main .dc-msg { padding: 12px 16px 0; }
.dc-main .dc-embed { max-width: 380px; }
.bp-rows { margin-top: 6px; }
.bp-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; border-bottom: 1px solid #3f4147; font-size: 0.72rem; }
.bp-rows div:last-child { border-bottom: 0; }
.bp-rows dt { color: #949ba4; flex: none; }
.bp-rows dd { text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: #f2f3f5; }
.bp-rows .meter { width: 60px; }
.stamp { font: 700 0.56rem/1 var(--mono); letter-spacing: 0.12em; padding: 3px 6px; border-radius: 3px; border: 1px solid var(--green); color: var(--green); }
.bp-profit { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; margin-top: 4px; border-top: 1px solid #3f4147; font-size: 0.7rem; color: #b5bac1; }
.bp-profit strong { font-size: 1.1rem; letter-spacing: -0.02em; }
.bp-row { opacity: 0; transform: translateY(6px); }
.play .bp-row { animation: rowIn 0.4s var(--ease) both; animation-delay: calc(0.3s + var(--i) * 0.55s); }
.play .bp-profit strong { animation: pop 0.6s var(--ease) both; animation-delay: calc(0.35s + 7 * 0.55s); }
.play .bp-rows .meter i { transform: scaleX(1); transition-delay: calc(0.5s + 5 * 0.55s); }
@keyframes rowIn { to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(0.6); } 55% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Smyths checkout phone (Assist) */
.phone-screen.co { background: #f2f2f4; color: #111; }
.co-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: #fff; border-bottom: 1px solid #e3e3e8; flex: none; }
.co-logo { font-weight: 900; font-size: 1.05rem; letter-spacing: -0.03em; color: #e2001a; }
.co-logo small { color: #004b93; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; margin-left: 3px; vertical-align: 2px; text-transform: uppercase; }
.co-secure { display: inline-flex; align-items: center; gap: 5px; font-size: 0.62rem; color: #1a7f37; font-weight: 600; }
.co-secure i { width: 6px; height: 6px; border-radius: 50%; background: #1a7f37; }
.co-steps { display: flex; gap: 0; background: #fff; padding: 0 16px 8px; font-size: 0.6rem; color: #999; flex: none; }
.co-steps span { flex: 1; text-align: center; padding: 4px 0; border-bottom: 2px solid #ddd; }
.co-steps .done { color: #1a7f37; border-color: #1a7f37; }
.co-steps .done::before { content: '✓ '; }
.co-steps .on { color: #111; border-color: #111; font-weight: 700; }
.co-drop { display: flex; justify-content: space-between; padding: 7px 16px; background: #111; color: #fff; font-size: 0.64rem; flex: none; }
.co-drop .mono { font-size: 0.62rem; }
.co-count { position: relative; height: 1em; width: 130px; text-align: right; }
.co-count b { position: absolute; right: 0; top: 0; opacity: 0; font-weight: 700; }
.co-count .c1 { opacity: 1; }
.co-count .c4 { color: var(--green); }
.play .co-count .c1 { animation: hide 0.15s forwards 0.6s; }
.play .co-count .c2 { animation: flash 0.6s linear forwards 0.6s; }
.play .co-count .c3 { animation: flash 0.6s linear forwards 1.2s; }
.play .co-count .c4 { animation: show 0.2s forwards 1.8s; }
@keyframes hide { from { opacity: 1; } to { opacity: 0; } }
@keyframes show { from { opacity: 0; } to { opacity: 1; } }
@keyframes flash { 0% { opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }
.co-product { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: #fff; margin: 10px 12px 0; border-radius: 10px; }
.co-product b { display: block; font-size: 0.76rem; line-height: 1.25; }
.co-product small { display: block; color: #666; font-size: 0.64rem; margin: 3px 0 4px; }
.co-product .mono { font-weight: 700; font-size: 0.8rem; }
.co-form { margin: 10px 12px 0; padding: 12px 14px; background: #fff; border-radius: 10px; }
.co-label { color: #888; margin-bottom: 8px; font: 600 0.6rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; }
.co-in { height: 34px; border: 1px solid #d6d6dc; border-radius: 6px; margin-bottom: 8px; padding: 0 10px; display: flex; align-items: center; font-size: 0.72rem; color: #222; background: #fff; overflow: hidden; position: relative; }
.co-in span { white-space: nowrap; overflow: hidden; width: 0; border-right: 2px solid transparent; }
.co-visa { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 900 0.5rem/1 'Inter', sans-serif; font-style: italic; color: #1a1f71; letter-spacing: 0.02em; }
.play .co-in { animation: inFocus 0.3s both; animation-delay: calc(2.1s + var(--i) * 0.55s); }
.play .co-in span { animation: typeIn 0.45s steps(18) both; animation-delay: calc(2.15s + var(--i) * 0.55s); }
@keyframes inFocus { to { border-color: #111; box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08); } }
@keyframes typeIn { from { width: 0; border-right-color: #111; } 99% { border-right-color: #111; } to { width: 100%; border-right-color: transparent; } }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.co-btn { position: relative; height: 40px; border-radius: 8px; background: #e2001a; color: #fff; font-weight: 700; font-size: 0.78rem; margin-top: 4px; overflow: hidden; }
.co-btn span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; white-space: nowrap; }
.co-btn .b1 { opacity: 1; }
.play .co-btn .b1 { animation: hide 0.15s forwards 4.5s; }
.play .co-btn .b2 { animation: flash 0.9s linear forwards 4.5s; }
.play .co-btn { animation: btnDone 0.3s both 5.4s; }
.play .co-btn .b3 { animation: show 0.2s forwards 5.4s; }
@keyframes btnDone { to { background: #1a7f37; } }
.co-fine { font-size: 0.58rem; color: #888; text-align: center; margin-top: 8px; }
.spin { width: 12px; height: 12px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.co-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.co-confetti i { position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 2px; opacity: 0; }
.co-confetti i:nth-child(1) { left: 10%; background: var(--pink); } .co-confetti i:nth-child(2) { left: 22%; background: var(--purple); }
.co-confetti i:nth-child(3) { left: 35%; background: var(--green); } .co-confetti i:nth-child(4) { left: 48%; background: #ffb02e; }
.co-confetti i:nth-child(5) { left: 60%; background: var(--pink); } .co-confetti i:nth-child(6) { left: 72%; background: var(--purple); }
.co-confetti i:nth-child(7) { left: 84%; background: var(--green); } .co-confetti i:nth-child(8) { left: 93%; background: #ffb02e; }
.play .co-confetti i { animation: confetti 1.4s ease-in forwards; animation-delay: calc(5.5s + var(--n, 0) * 0.06s); }
.co-confetti i:nth-child(2n) { --n: 1; } .co-confetti i:nth-child(3n) { --n: 2; }
@keyframes confetti { 0% { top: -12px; opacity: 1; transform: rotate(0); } 100% { top: 105%; opacity: 0; transform: rotate(720deg) translateX(20px); } }
.co-toast { position: absolute; left: 12px; right: 12px; bottom: 14px; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #1e1f22; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); transform: translateY(120%); opacity: 0; }
.co-toast b { display: block; font-size: 0.72rem; }
.co-toast small { color: #b5bac1; font-size: 0.64rem; line-height: 1.3; }
.play .co-toast { animation: toastIn 0.4s var(--ease) both 6s; }
@keyframes toastIn { to { transform: none; opacity: 1; } }

/* Tracker window (District) */
.tr-app { display: grid; grid-template-columns: 132px 1fr; min-height: 600px; font-size: 0.66rem; color: #dcdce6; background: #08080c; }
.tr-app svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tr-side { background: #0b0b12; border-right: 1px solid #1c1c26; padding: 12px 10px 10px; display: flex; flex-direction: column; gap: 1px; }
.tr-brand { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 0 4px; }
.tr-brand b { display: block; font-size: 0.6rem; letter-spacing: 0.08em; }
.tr-brand small { display: block; font: 600 0.5rem var(--mono); letter-spacing: 0.14em; color: var(--pink-soft); }
.tr-cat { font: 600 0.5rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin: 8px 0 3px; padding-left: 8px; }
.tr-side li { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 7px; color: var(--muted); font-size: 0.66rem; }
.tr-side li svg { color: var(--dim); }
.tr-side li.on { background: rgba(255, 20, 147, 0.12); color: var(--text); }
.tr-side li.on svg { color: var(--pink); }
.tr-user { display: flex; align-items: center; gap: 7px; margin-top: auto; padding: 10px 6px 0; border-top: 1px solid #1c1c26; }
.tr-user-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255, 20, 147, 0.5); flex: none; display: block; }
.tr-user b { display: block; font-size: 0.6rem; }
.tr-user small { display: block; font-size: 0.52rem; color: var(--dim); }
.tr-user svg { margin-left: auto; color: var(--dim); width: 11px; height: 11px; }
.tr-main { position: relative; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow: hidden; }
.tr-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tr-search { flex: 1; max-width: 250px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; border: 1px solid #23232f; background: #0e0e15; color: var(--dim); font-size: 0.62rem; }
.tr-search i { width: 8px; height: 8px; border: 1.5px solid var(--dim); border-radius: 50%; position: relative; }
.tr-search i::after { content: ''; position: absolute; width: 4px; height: 1.5px; background: var(--dim); right: -3px; bottom: -2px; transform: rotate(45deg); }
.tr-add { padding: 6px 11px; border-radius: 9px; background: var(--grad); color: #fff; font-weight: 700; font-size: 0.62rem; }
.tr-card { background: #101018; border: 1px solid #1c1c26; border-radius: 12px; padding: 10px 12px; }
.tr-cap { font: 500 0.52rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.tr-cap.pink { color: var(--pink-soft); }
.tr-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tr-big { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 5px 0 3px; }
.tr-sub { color: var(--muted); font-size: 0.6rem; }
.tr-pills { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: #16161f; font-size: 0.56rem; flex: none; }
.tr-pills span { padding: 4px 8px; border-radius: 7px; color: var(--muted); }
.tr-pills .on { background: #0a0a10; color: var(--text); box-shadow: 0 0 0 1px rgba(120, 140, 255, 0.5); }
.tr-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 10px; padding-top: 10px; border-top: 1px solid #1c1c26; }
.tr-stats > div { padding: 0 10px; border-left: 1px solid #1c1c26; }
.tr-stats > div:first-child { padding-left: 0; border-left: 0; }
.tr-stats .mono:not(.tr-cap) { font-size: 0.92rem; font-weight: 700; margin: 4px 0 1px; }
.tr-stats small { color: var(--dim); font-size: 0.56rem; }
.tr-notice { display: flex; align-items: center; gap: 9px; font-size: 0.6rem; color: var(--muted); padding: 7px 10px; }
.tr-notice b { color: var(--text); font-weight: 600; }
.tr-notice svg.warn { color: #ffb02e; width: 13px; height: 13px; }
.tr-notice svg.pinkish { color: var(--pink); width: 13px; height: 13px; }
.tr-ghost { margin-left: auto; flex: none; padding: 4px 8px; border-radius: 7px; background: #16161f; font-size: 0.56rem; color: var(--muted); }
.tr-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tr-tiles .tr-card { display: flex; gap: 8px; align-items: center; }
.tr-ico { width: 24px; height: 24px; border-radius: 7px; background: #16161f; display: grid; place-items: center; color: var(--muted); flex: none; }
.tr-tiles .mono:not(.tr-cap) { font-size: 0.84rem; font-weight: 700; margin: 3px 0 1px; }
.tr-tiles small { color: var(--dim); font-size: 0.54rem; white-space: nowrap; }
.tr-bottom { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; align-items: start; }
.tr-chart-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.64rem; margin-bottom: 8px; }
.tr-chart-head span { color: var(--dim); font-size: 0.54rem; display: inline-flex; align-items: center; gap: 4px; }
.k { width: 6px; height: 6px; border-radius: 2px; display: inline-block; }
.k.rev { background: var(--purple); } .k.pro { background: var(--pink); margin-left: 6px; }
.tr-plot { display: grid; grid-template-columns: 30px 1fr; gap: 6px; }
.tr-axis { display: flex; flex-direction: column; justify-content: space-between; height: 72px; font-size: 0.46rem; color: var(--dim); text-align: right; }
.tr-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 72px; align-items: end; background: repeating-linear-gradient(180deg, #1c1c26 0 1px, transparent 1px 25%); }
.tr-bars > div { display: flex; gap: 2px; align-items: flex-end; height: 100%; }
.tr-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; transform: scaleY(0); transform-origin: bottom; }
.tr-bars .rev { background: var(--purple); } .tr-bars .pro { background: var(--pink); }
.play .tr-bars i { animation: grow 0.45s var(--ease) both; animation-delay: calc(0.4s + var(--i) * 0.08s); }
@keyframes grow { to { transform: scaleY(1); } }
.tr-months { display: grid; grid-template-columns: repeat(7, 1fr); margin: 4px 0 0 36px; font-size: 0.46rem; color: var(--dim); text-align: center; }
.tr-goal { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #1c1c26; }
.tr-goal:first-of-type { border-top: 0; }
.ring { position: relative; width: 32px; height: 32px; flex: none; }
.ring svg { width: 32px; height: 32px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 3; }
.ring .arc { stroke: var(--pink); stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 0.44rem var(--mono); color: var(--pink-soft); }
.play .ring .arc { animation: arc 0.9s var(--ease) both 0.8s; }
@keyframes arc { to { stroke-dashoffset: calc(97.4 - 97.4 * var(--p) / 100); } }
.tr-goal > div b { display: block; font-size: 0.62rem; }
.tr-goal small { color: var(--dim); font-size: 0.52rem; }
.tr-toast { position: absolute; right: 10px; top: 44px; z-index: 2; display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 10px; background: #15151d; border: 1px solid var(--line-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); transform: translateX(110%); opacity: 0; }
.tr-toast b { display: block; font-size: 0.64rem; }
.tr-toast small { color: var(--muted); font-size: 0.58rem; }
.tr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); flex: none; }
.play .tr-toast { animation: toastX 0.4s var(--ease) both 3.8s, toastOut 0.35s ease both 6.8s; }
@keyframes toastX { to { transform: none; opacity: 1; } }
@keyframes toastOut { to { transform: translateX(110%); opacity: 0; } }

/* eBay phone (One flip) */
.phone-screen.eb { background: #fff; color: #191919; }
.eb-top { display: flex; align-items: center; gap: 10px; padding: 6px 14px 10px; background: #fff; flex: none; }
.eb-back { font-size: 1.4rem; line-height: 1; color: #191919; }
.eb-search { flex: 1; padding: 7px 12px; border-radius: 20px; border: 1px solid #c7c7c7; color: #707070; font-size: 0.68rem; }
.eb-cart { font-size: 0.9rem; }
.eb-gallery { position: relative; height: 170px; background: #f7f7f7; display: grid; place-items: center; flex: none; }
.eb-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; }
.eb-dots i { width: 5px; height: 5px; border-radius: 50%; background: #c7c7c7; }
.eb-dots i.on { background: #191919; }
.eb-banner { position: absolute; left: 12px; top: 12px; padding: 4px 8px; border-radius: 4px; background: #e53238; color: #fff; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0; transform: scale(0.6) rotate(-6deg); }
.play .eb-banner { animation: bannerIn 0.35s var(--ease) both 2s; }
@keyframes bannerIn { to { opacity: 1; transform: rotate(-6deg); } }
.eb-body { padding: 10px 14px 0; }
.eb-title { font-size: 0.8rem; font-weight: 500; line-height: 1.3; }
.eb-cond { font-size: 0.64rem; color: #707070; margin-top: 4px; }
.eb-cond span { color: #1a7f37; font-weight: 600; }
.eb-price { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.eb-price b { font-size: 1.15rem; font-weight: 700; }
.eb-sold { font-size: 0.64rem; color: #e53238; font-weight: 600; opacity: 0; }
.play .eb-sold { animation: show 0.3s forwards 2.1s; }
.eb-cta { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.eb-buy, .eb-basket { text-align: center; padding: 9px; border-radius: 20px; font-size: 0.74rem; font-weight: 700; }
.eb-buy { background: #3665f3; color: #fff; }
.eb-basket { border: 1px solid #3665f3; color: #3665f3; }
.eb-seller { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e5e5e5; }
.eb-seller .dc-av { width: 26px; height: 26px; line-height: 24px; font-size: 0.62rem; }
.eb-seller b { display: block; font-size: 0.72rem; }
.eb-seller small { color: #707070; font-size: 0.62rem; }
.eb-profit { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; border-radius: 12px; background: #0d0d14; color: #fff; opacity: 0; transform: translateY(10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); }
.play .eb-profit { animation: rowIn 0.4s var(--ease) both 3.2s; }
.eb-cap { font: 500 0.56rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.eb-amount { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; margin: 3px 0 5px; }
.eb-rows div { display: flex; justify-content: space-between; font-size: 0.64rem; padding: 2px 0; color: var(--muted); }
.eb-rows dd { color: var(--text); }
.eb-pop { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%) scale(0); width: 210px; padding: 18px 16px; border-radius: 16px; background: #0d0d14; color: #fff; text-align: center; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); opacity: 0; }
.eb-pop-tag { display: inline-block; padding: 4px 10px; border-radius: 20px; background: #e53238; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.eb-pop b { display: block; font-size: 0.9rem; }
.eb-pop small { display: block; color: var(--muted); font-size: 0.66rem; margin: 2px 0 8px; }
.eb-pop strong { font-size: 1.3rem; }
.play .eb-pop { animation: popIn 0.4s var(--ease) both 1.4s, popOut 0.3s ease both 3s; }
@keyframes popIn { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes popOut { to { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } }

.flip-grid .phone { margin: 0 auto; }

@media (max-width: 700px) {
    .phone { width: 280px; }
    .phone-screen { height: 560px; }
}
@media (prefers-reduced-motion: reduce) {
    .bp-row, .co-in span, .eb-profit, .eb-sold, .eb-banner { opacity: 1; transform: none; width: auto; }
    .co-count .c1 { opacity: 0; }
    .co-count .c4 { opacity: 1; }
    .tr-bars i { transform: none; }
    .ring .arc { stroke-dashoffset: calc(97.4 - 97.4 * var(--p) / 100); }
    .co-btn .b1 { opacity: 1; }
    .co-toast, .tr-toast, .eb-pop, .co-confetti { display: none; }
    .play .bp-row, .play .co-in, .play .co-in span, .play .co-btn, .play .co-btn span, .play .co-count b, .play .tr-bars i, .play .ring .arc, .play .eb-banner, .play .eb-sold, .play .eb-profit, .play .bp-profit strong, .dots i, .phone-badge.pop, .dc-msg.new, .dc-msg.out { animation: none; }
}


/* ===== Old-site structure ===== */
.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.problem-grid .sec-head { margin-bottom: 32px; }
.pains li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.pains li:last-child { border-bottom: 1px solid var(--line); }
.pains .x { color: var(--red); font-size: 1.4rem; line-height: 1; font-weight: 700; }
.pains b { display: block; font-size: 1.05rem; }
.pains p { color: var(--muted); font-size: 0.95rem; margin-top: 2px; }
.pain-stack { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin: 0 auto; }
.pain-card { border-radius: 12px; background: #fff; color: #111; padding: 12px 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); position: relative; overflow: hidden; }
.pain-card.port { background: #0d0d14; color: #fff; border: 1px solid var(--line-strong); }
.pain-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.7rem; color: #555; padding-bottom: 8px; border-bottom: 1px solid #ececf0; margin-bottom: 10px; }
.pain-card.port .pain-bar { border-color: var(--line); color: var(--muted); }
.pain-bar .mono { font-size: 0.66rem; }
.pain-bar .eb-logo { font-size: 1rem; }
.pain-title { font-weight: 700; font-size: 0.82rem; margin-bottom: 8px; }
.pain-item { display: flex; align-items: center; gap: 10px; }
.pain-item > div { flex: 1; min-width: 0; }
.pain-item b { display: block; font-size: 0.78rem; line-height: 1.3; }
.pain-item small { display: block; color: #666; font-size: 0.66rem; margin-top: 2px; }
.pain-item > .mono { font-weight: 700; font-size: 0.8rem; }
.pain-price { text-align: right; flex: none; }
.pain-price b { display: block; font-size: 1.05rem; }
.pain-price small { display: block; font-size: 0.62rem; font-weight: 600; color: #1a7f37; }
.pain-btn { margin-top: 10px; padding: 9px; border-radius: 6px; background: #111; color: #fff; text-align: center; font-weight: 700; font-size: 0.78rem; opacity: 0.35; }
.pain-oos { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.94); display: flex; align-items: center; justify-content: center; gap: 12px; opacity: 0; }
.pain-oos span { width: 34px; height: 34px; border-radius: 50%; background: #e53238; color: #fff; font: 700 1.2rem/34px 'Inter', sans-serif; text-align: center; }
.pain-oos b { display: block; font-size: 0.95rem; color: #e53238; }
.pain-oos small { display: block; color: #555; font-size: 0.7rem; }
.play .pain-oos { animation: show 0.35s var(--ease) forwards 1.6s; }
.pain-hist { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.62rem; color: #666; }
.pain-hist i { flex: 1; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #ccc, #1a7f37); transform: scaleX(0); transform-origin: left; }
.play .pain-hist i { animation: growX 0.8s var(--ease) forwards 1.7s; }
@keyframes growX { to { transform: scaleX(1); } }
.pain-zero { font-size: 1.8rem; font-weight: 700; margin: 2px 0; color: var(--dim); }
.pain-missed { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 107, 107, 0.12); color: var(--red); font-size: 0.74rem; opacity: 0; }
.play .pain-missed { animation: show 0.35s forwards 2.5s; }

.system { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line-strong); }
.sys { padding: 32px 28px 32px 0; border-right: 1px solid var(--line); margin-right: 28px; }
.sys:last-child { border-right: 0; margin-right: 0; }
.sys h3 { font-size: 1.3rem; margin-bottom: 10px; }
.sys p:not(.label):not(.sys-stat) { color: var(--muted); font-size: 0.95rem; }
.sys-stat { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.sys-stat strong { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text); }
.sys-stat .mono { color: var(--pink-soft); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem; }

.step-num { font-size: 5rem; font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.18); margin-bottom: 14px; }

.opp .sec-head { margin-bottom: 32px; }
.flips, .says { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.flips .marquee-track { gap: 0; animation-duration: 60s; font-family: inherit; }
.says .marquee-track { gap: 0; animation-duration: 70s; font-family: inherit; }
.marquee-track.reverse { animation-direction: reverse; }
.flipcard { display: flex; flex-direction: column; gap: 4px; padding: 22px 32px; border-right: 1px solid var(--line); min-width: 240px; white-space: nowrap; }
.flipcard strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.flipcard b { font-weight: 600; font-size: 0.92rem; color: var(--text); margin-top: 4px; }
.flipcard small { color: var(--dim); font-size: 0.74rem; }
.says { border-top: 0; }
.says blockquote { margin: 0; padding: 22px 32px; border-right: 1px solid var(--line); white-space: nowrap; }
.says p { font-size: 1rem; font-weight: 500; }
.says p::before, .says p::after { content: none; }
.says cite { display: block; font-style: normal; color: var(--dim); font-family: var(--mono); font-size: 0.72rem; margin-top: 6px; }

.offer { margin-bottom: 16px; }
.offer .pill { font-size: 0.7rem; padding: 6px 12px; }
.plan-name { color: var(--muted); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }
.pricing .checks { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }

.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-strong); }
.story { padding: 32px 28px 32px 0; border-right: 1px solid var(--line); margin-right: 28px; display: flex; flex-direction: column; gap: 16px; }
.story:last-child { border-right: 0; margin-right: 0; }
.story-who { display: flex; align-items: center; gap: 12px; }
.story-who .dc-av { width: 40px; height: 40px; line-height: 38px; font-size: 0.8rem; background: rgba(255, 20, 147, 0.12); }
.story-who b { display: block; font-size: 1rem; }
.story-who small { color: var(--dim); font-size: 0.78rem; }
.story-stats { display: flex; gap: 28px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story-stats strong { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.story-stats small { color: var(--dim); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; }
.story > p:not(.story-who):not(.story-stats) { color: var(--muted); font-size: 0.95rem; }
.story blockquote { margin: 0; padding-left: 14px; border-left: 2px solid var(--pink); font-weight: 600; font-size: 0.98rem; margin-top: auto; }

@media (max-width: 1000px) {
    .problem-grid { grid-template-columns: 1fr; gap: 40px; }
    .system { grid-template-columns: 1fr 1fr; }
    .sys:nth-child(2) { border-right: 0; margin-right: 0; }
    .sys:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .stories { grid-template-columns: 1fr; }
    .story { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--line); }
    .story:last-child { border-bottom: 0; }
}
@media (max-width: 700px) {
    .system { grid-template-columns: 1fr; }
    .sys { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--line); padding: 24px 0; }
    .step-num { font-size: 3.6rem; }
    .flipcard { padding: 18px 22px; min-width: 200px; }
    .says blockquote { padding: 18px 22px; }
    .says p { font-size: 0.9rem; white-space: normal; width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
    .pain-oos, .pain-missed { opacity: 1; animation: none; }
    .pain-hist i { transform: none; }
}
.flips .marquee-track, .says .marquee-track { animation-name: slide0; }
@keyframes slide0 { to { transform: translateX(-50%); } }


/* Real product image */
.prod { width: 58px; height: 58px; object-fit: contain; flex: none; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.18)); }
.prod.sm { width: 44px; height: 44px; }
.prod.big { width: 150px; height: 150px; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.22)); }

/* Pokémon Center checkout */
.co-logo.pc { display: inline-flex; align-items: center; gap: 7px; color: #1d1d1f; font-weight: 800; font-size: 0.86rem; letter-spacing: -0.01em; }
.pc-ball { width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(180deg, #e3350d 0 45%, #1d1d1f 45% 55%, #fff 55%); box-shadow: 0 0 0 1.5px #1d1d1f; position: relative; }
.pc-ball::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #1d1d1f; }
.co-btn.pc { background: #0a58ca; }

/* Your Entry */
.entry-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: center; }
.entry-copy .lead { margin-bottom: 32px; }
.checks.two { grid-template-columns: 1fr 1fr; gap: 0 28px; text-align: left; max-width: none; margin: 0; }
.entry-card { position: relative; border-radius: 20px; padding: 36px; background: linear-gradient(#0e0e15, #0e0e15) padding-box, linear-gradient(135deg, rgba(255, 20, 147, 0.9), rgba(138, 43, 226, 0.9)) border-box; border: 1px solid transparent; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 80px rgba(255, 20, 147, 0.14); text-align: left; }
.entry-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.entry-top .pill { font-size: 0.68rem; padding: 6px 10px; }
.entry-card .plan-name { margin-bottom: 6px; }
.entry-card .price { justify-content: flex-start; margin-bottom: 14px; }
.entry-card .price span:first-child { font-size: 4.2rem; }
.entry-sub { color: var(--muted); font-size: 0.98rem; margin-bottom: 26px; }
.btn-block { width: 100%; display: flex; }
.entry-trust { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 0.74rem; }
.entry-trust li { padding-left: 20px; position: relative; }
.entry-trust li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.entry-card .fine { margin-top: 16px; }
@media (max-width: 1000px) {
    .entry-grid { grid-template-columns: 1fr; gap: 40px; }
    .entry-card { max-width: 520px; }
}
@media (max-width: 700px) {
    .checks.two { grid-template-columns: 1fr; }
    .entry-card { padding: 26px; }
    .entry-card .price span:first-child { font-size: 3.4rem; }
}


/* iPhone lock screen receiving Discord notifications */
.lock-phone.buzz { animation: buzz 0.4s ease; }
@keyframes buzz { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-2px) rotate(-0.4deg); } 40% { transform: translateX(2px) rotate(0.4deg); } 60% { transform: translateX(-1.5px); } 80% { transform: translateX(1.5px); } }
.phone-screen.lock { background: url('assets/operator/operator-city-900.webp') 38% bottom / 210% auto no-repeat, radial-gradient(120% 60% at 50% 100%, #2a1050 0%, #0b0a12 70%); color: #fff; }
.phone-screen.lock::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 18, 0.1) 0%, rgba(11, 10, 18, 0.35) 45%, rgba(11, 10, 18, 0.6) 100%); pointer-events: none; }
.phone-screen.lock > * { position: relative; }
.lock-clock { text-align: center; padding: 12px 0 18px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.lock-date { font-size: 0.86rem; font-weight: 500; opacity: 0.9; }
.lock-time { font-size: 4.4rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1; margin-top: 2px; }
.noti-list { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 0 10px; overflow: hidden; }
.noti { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; padding: 11px 12px; border-radius: 22px; background: rgba(60, 60, 70, 0.55); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12); }
.noti.new { animation: notiIn 0.4s var(--ease) both; }
.noti.out { animation: dcOut 0.3s ease both; }
@keyframes notiIn { from { opacity: 0; transform: translateY(-18px) scale(0.96); } to { opacity: 1; transform: none; } }
.noti-icon { width: 38px; height: 38px; border-radius: 10px; background: #0d0d14; display: grid; place-items: center; position: relative; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.15); }
.noti-icon img { width: 22px; height: auto; display: block; }
.noti-badge { position: absolute; right: -5px; bottom: -5px; width: 17px; height: 17px; border-radius: 50%; background: #5865f2; display: grid; place-items: center; box-shadow: 0 0 0 2px #2a2a33; }
.noti-badge svg { width: 11px; height: 11px; fill: #fff; display: block; }
.noti-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.66rem; }
.noti-head b { font-weight: 600; letter-spacing: 0.01em; }
.noti-head span { color: rgba(255, 255, 255, 0.6); font-size: 0.6rem; }
.noti-title { font-size: 0.76rem; font-weight: 600; margin-top: 1px; }
.noti-text { font-size: 0.72rem; line-height: 1.35; margin-top: 1px; color: rgba(255, 255, 255, 0.92); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lock-bottom { display: flex; justify-content: space-between; padding: 10px 34px 6px; }
.lock-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(60, 60, 70, 0.6); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: grid; place-items: center; font-size: 1.1rem; }
.lock-bar { width: 120px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.9); margin: 4px auto 8px; }
@media (prefers-reduced-motion: reduce) { .lock-phone.buzz, .noti.new, .noti.out { animation: none; } }


/* Whop alignment */
.trial-note { color: #d6d6e2; font-size: 0.74rem; letter-spacing: 0.04em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.system.three { grid-template-columns: repeat(3, 1fr); }
.sys .ticks { margin-top: 18px; }
.sys .ticks li { font-size: 0.9rem; }
.sys-close { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 1.15rem; }
.sys-close strong { color: var(--text); font-weight: 700; }
.whop { margin-top: 48px; }
.whop-quote { margin: 28px 0 0; max-width: 820px; }
.whop-quote p { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.whop-quote cite { display: block; font-style: normal; color: var(--dim); font-family: var(--mono); font-size: 0.74rem; margin-top: 14px; }
@media (max-width: 1000px) { .system.three { grid-template-columns: 1fr; } .system.three .sys { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--line); } .system.three .sys:last-child { border-bottom: 0; } }


/* Problem mock refinements */
.pain-card.basket { padding-top: 10px; }
.pain-bar .co-logo.pc { font-size: 0.78rem; }
.pain-basket { font-size: 0.68rem; color: #333; }
.pain-basket b { display: inline-block; min-width: 16px; padding: 1px 5px; border-radius: 9px; background: #0a58ca; color: #fff; font-size: 0.6rem; text-align: center; margin-left: 4px; }
.pain-oos { position: static; inset: auto; display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 10px; border-radius: 8px; background: #fdecec; border: 1px solid #f5c2c2; opacity: 0; transform: translateY(-6px); }
.pain-oos span { width: 22px; height: 22px; border-radius: 50%; background: #e53238; color: #fff; font: 800 0.8rem/22px 'Inter', sans-serif; text-align: center; flex: none; }
.pain-oos b { font-size: 0.74rem; color: #b3261e; }
.pain-oos small { font-size: 0.64rem; color: #7a1c17; }
.play .pain-oos { animation: rowIn 0.4s var(--ease) forwards 1.6s; }
.play .basket .pain-item { animation: fadeItem 0.35s forwards 1.1s; }
@keyframes fadeItem { to { opacity: 0.45; filter: grayscale(1); } }
.pain-sub { display: flex; justify-content: space-between; padding: 8px 0 0; margin-top: 8px; border-top: 1px solid #ececf0; font-size: 0.72rem; color: #333; }
.pain-btn { opacity: 1; position: relative; height: 34px; margin-top: 10px; padding: 0; background: #0a58ca; }
.pain-btn span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pain-btn .b2 { opacity: 0; }
.play .pain-btn { animation: btnGrey 0.3s forwards 1.3s; }
.play .pain-btn .b1 { animation: hide 0.2s forwards 1.3s; }
.play .pain-btn .b2 { animation: show 0.2s forwards 1.3s; }
@keyframes btnGrey { to { background: #c7c7cc; color: #6d6d72; } }
.pain-card.port { padding: 10px 12px 12px; }
.pain-card.port .pain-bar { padding-bottom: 8px; margin-bottom: 8px; }
.pain-card.port .tr-brand { margin: 0; }
.pain-card.port .tr-brand b { font-size: 0.56rem; }
.pain-card.port .tr-brand small { font-size: 0.46rem; }
.pain-card.port .tr-cap { font-size: 0.54rem; }
.pain-empty { display: flex; gap: 18px; margin-top: 6px; }
.pain-empty span { display: flex; flex-direction: column; }
.pain-empty b { font-size: 0.95rem; font-weight: 700; }
.pain-empty small { color: var(--dim); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--mono); }
.eb-logo { font-weight: 800; font-size: 1.1rem; letter-spacing: -0.03em; display: inline-flex; font-style: normal; }
.eb-logo i { font-style: normal; }
.eb-logo i:nth-child(1) { color: #e53238; } .eb-logo i:nth-child(2) { color: #0064d2; } .eb-logo i:nth-child(3) { color: #f5af02; } .eb-logo i:nth-child(4) { color: #86b817; }
.pain-oos { max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; overflow: hidden; }
.play .pain-oos { animation: oosIn 0.4s var(--ease) forwards 1.1s; }
@keyframes oosIn { from { opacity: 0; transform: translateY(-6px); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; } to { opacity: 1; transform: none; max-height: 60px; margin-bottom: 10px; padding-top: 8px; padding-bottom: 8px; border-width: 1px; } }

.noti-list { justify-content: flex-start; padding-top: 4px; }
.noti.out { animation: notiOut 0.35s ease both; }
@keyframes notiOut { to { opacity: 0; transform: translateY(10px) scale(0.96); } }


/* Problem: one phone, three screens */
.pain-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pain-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.pain-tabs span { padding: 6px 12px; border-radius: 999px; transition: color 0.3s, background-color 0.3s; }
.pain-tabs .t1 { color: var(--text); background: rgba(255, 255, 255, 0.1); }
.phone-screen.pain { background: #0d0d14; }
.pscreen { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; }
.pscreen.s1 { opacity: 1; background: #f2f2f4; color: #111; }
.pscreen.s2 { background: #fff; color: #191919; }
.pscreen.s3 { background: #08080c; color: #fff; }
.pscreen .co-top { flex: none; }
.pp-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.pp-h { font-weight: 700; font-size: 0.9rem; }
.pp-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: #fff; border-radius: 10px; }
.pp-item > div { flex: 1; min-width: 0; }
.pp-item b { display: block; font-size: 0.74rem; line-height: 1.3; }
.pp-item small { display: block; color: #666; font-size: 0.62rem; margin-top: 2px; }
.pp-qty { display: inline-block; margin-top: 6px; padding: 3px 8px; border: 1px solid #d6d6dc; border-radius: 6px; font-size: 0.66rem; color: #333; }
.pp-item > .mono { font-weight: 700; font-size: 0.78rem; }
.pp-row { display: flex; justify-content: space-between; font-size: 0.72rem; color: #555; padding: 2px 2px; }
.pp-row.total { color: #111; font-weight: 700; padding-top: 8px; border-top: 1px solid #e3e3e8; }
.pp-row .mono { font-size: 0.74rem; }
.pscreen .pain-oos { background: #fdecec; }
.pscreen .pain-btn { margin-top: 4px; }
.play .pscreen.s1 .pp-item { animation: fadeItem 0.35s forwards 1.1s; }
.pp-chips { display: flex; gap: 6px; padding: 0 14px 6px; }
.pp-chips span { font-size: 0.62rem; padding: 4px 9px; border-radius: 20px; border: 1px solid #c7c7c7; color: #333; }
.pp-chips .on { background: #191919; color: #fff; border-color: #191919; }
.pp-listing { border-radius: 12px; border: 1px solid #e5e5e5; padding: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.pp-listing .eb-title { font-size: 0.76rem; }
.pp-price { display: flex; align-items: baseline; gap: 8px; }
.pp-price b { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; opacity: 0; transform: scale(0.8); }
@keyframes popPrice { 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
.pp-up { font-size: 0.66rem; font-weight: 700; color: #1a7f37; background: #e8f5ec; padding: 3px 7px; border-radius: 6px; }
.pp-listing .pain-hist { width: 100%; }
.pp-note { font-size: 0.66rem; color: #707070; text-align: center; }
.pp-trk { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 6px; height: 100%; }
.pp-trk .tr-brand { margin-bottom: 8px; }
.pp-trk .pain-zero { font-size: 2.2rem; }
.pp-trk .pain-empty { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.pp-chart { position: relative; margin-top: 10px; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: flex-end; gap: 6px; height: 96px; }
.pp-chart .mono { position: absolute; left: 12px; top: 8px; font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase; }
.pp-chart i { flex: 1; height: 6px; border-radius: 2px 2px 0 0; background: rgba(255, 255, 255, 0.08); }
.pp-chart em { position: absolute; left: 0; right: 0; top: 46%; text-align: center; font-style: normal; font-size: 0.68rem; color: var(--dim); }
.pp-trk .pain-missed { margin-top: auto; }
@media (max-width: 700px) { .pain-tabs { font-size: 0.56rem; } .pain-tabs span { padding: 5px 8px; } }
@media (prefers-reduced-motion: reduce) { .pscreen.s3 { opacity: 1; } .pscreen.s1, .pscreen.s2 { opacity: 0; } .play .pscreen, .play .pain-tabs span, .play .pscreen.s2 .pp-price b { animation: none; } .pp-price b { opacity: 1; transform: none; } .pain-tabs .t1 { color: var(--dim); background: transparent; } .pain-tabs .t3 { color: var(--text); background: rgba(255, 255, 255, 0.1); } }

/* Problem screens: switched by class from script.js */
.pscreen { transition: opacity 0.35s ease; }
.pain-tabs span { transition: color 0.3s, background-color 0.3s; }
.show-2 .pain-tabs .t1, .show-3 .pain-tabs .t1 { color: var(--dim); background: transparent; }
.show-2 .pain-tabs .t2, .show-3 .pain-tabs .t3 { color: var(--text); background: rgba(255, 255, 255, 0.1); }
.show-2 .pscreen.s1, .show-3 .pscreen.s1 { opacity: 0; }
.show-2 .pscreen.s2 { opacity: 1; }
.show-3 .pscreen.s3 { opacity: 1; }
.pp-price b { transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.show-2 .pp-price b { opacity: 1; transform: none; transition-delay: 0.7s; }
.show-2 .pscreen.s2 .pain-hist i { transform: scaleX(1); transition: transform 0.8s var(--ease) 1s; }
.pain-missed { transition: opacity 0.35s ease; }
.show-3 .pscreen.s3 .pain-missed { opacity: 1; transition-delay: 1.2s; }

/* Problem and Solution as one section */
.solution { margin-top: 88px; padding-top: 64px; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.solution .sec-head { margin-bottom: 40px; }
@media (max-width: 700px) { .solution { margin-top: 56px; padding-top: 40px; } }

/* Pain paired with the fix */
.problem-grid { align-items: start; }
.problem-grid .sec-head { margin-bottom: 8px; }
.fixes li { padding: 22px 0; border-top: 1px solid var(--line); }
.fixes li:last-child { border-bottom: 1px solid var(--line); }
.fix-pain { display: grid; grid-template-columns: 24px 1fr; gap: 4px 12px; align-items: baseline; }
.fix-pain .x { color: var(--red); font-size: 1.3rem; line-height: 1; font-weight: 700; grid-row: span 2; }
.fix-pain b { font-size: 1.02rem; }
.fix-pain .dim { font-size: 0.9rem; }
.fix-sol { margin: 12px 0 0 36px; padding: 12px 14px; border-left: 2px solid var(--green); display: flex; flex-direction: column; gap: 3px; }
.fix-sol .label { margin: 0 0 2px; font-size: 0.66rem; }
.fix-sol b { font-size: 0.95rem; color: var(--text); }
.fix-sol span:not(.label) { color: var(--muted); font-size: 0.88rem; }
.problem-grid .sys-close { margin-top: 28px; padding-top: 0; border-top: 0; font-size: 1.05rem; }
@media (max-width: 700px) { .fix-sol { margin-left: 0; } }


/* ===== Problem story + District System pillars ===== */
.story .sec-head { margin-bottom: 40px; }
.story .problem-grid { grid-template-columns: 1fr 1fr; align-items: center; }
.tl { position: relative; padding-left: 0; }
.tl li { display: grid; grid-template-columns: 96px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); transition: opacity 0.35s; opacity: 0.45; }
.tl li:last-child { border-bottom: 1px solid var(--line); }
.tl li.on, .show-2 .tl li:nth-child(2), .show-3 .tl li:nth-child(3) { opacity: 1; }
.show-2 .tl li:nth-child(1), .show-3 .tl li:nth-child(1), .show-3 .tl li:nth-child(2) { opacity: 0.45; }
.tl-time { color: var(--pink-soft); padding-top: 4px; position: relative; }
.tl-time::before { content: ''; position: absolute; left: -18px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.15); }
.tl { padding-left: 18px; }
.tl b { display: block; font-size: 1.08rem; margin-bottom: 4px; }
.tl p { color: var(--muted); font-size: 0.95rem; }
.tl li:last-child .tl-time::before { background: var(--dim); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06); }

.pillars-sec { background: var(--bg-2); }
.pivot { max-width: 820px; margin: 0 auto 64px; text-align: center; }
.pivot .lead { margin-left: auto; margin-right: auto; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; counter-reset: p; }
.pillars::before { content: ''; position: absolute; left: 16%; right: 16%; top: 84px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.pillar { display: flex; flex-direction: column; gap: 10px; }
.pillar h3 { font-size: 1.25rem; }
.pillar > p:not(.label) { color: var(--muted); font-size: 0.95rem; }
.pillar .label { margin: 8px 0 0; }
.pillar-visual { position: relative; z-index: 1; border-radius: 14px; background: #0d0d14; border: 1px solid var(--line-strong); padding: 14px 16px; min-height: 168px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); margin-bottom: 12px; }
.pv-bar { display: flex; justify-content: space-between; align-items: center; color: var(--dim); }
.pv-bar .mono { font-size: 0.64rem; }
.pv-title { font-weight: 700; font-size: 0.9rem; }
.pv-line { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.pv-line.w80 { width: 80%; } .pv-line.w60 { width: 60%; } .pv-line.w70 { width: 70%; }
.pv-foot { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.pv-foot .mono { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pink-soft); padding: 4px 8px; border-radius: 4px; background: rgba(255, 20, 147, 0.1); }
.pv-alert { display: grid; grid-template-columns: 10px 1fr; gap: 2px 10px; padding: 10px 12px; border-radius: 10px; background: #15151d; border-left: 3px solid var(--pink); }
.pv-alert .pv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-top: 5px; grid-row: span 2; box-shadow: 0 0 8px var(--green); animation: blink 1.5s ease-in-out infinite; }
.pv-alert b { font-size: 0.8rem; }
.pv-alert span:last-child { font-size: 0.72rem; color: var(--muted); }
.pv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pv-avs { display: flex; align-items: center; }
.pv-avs .dc-av { width: 32px; height: 32px; line-height: 30px; font-size: 0.62rem; margin-right: -8px; border: 2px solid #0d0d14; }
.pv-more { margin-left: 16px; color: var(--dim); font-size: 0.66rem; }
.pv-msg { font-size: 0.78rem; color: #dbdee1; padding: 10px 12px; border-radius: 10px; background: #15151d; }
.pv-msg b { color: var(--pink-soft); margin-right: 4px; }
.outcome-line { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); text-align: center; font-size: 1.2rem; color: var(--muted); }
.outcome-line strong { color: var(--text); font-weight: 800; }
.outcome-line span { display: block; margin-top: 8px; font-size: 0.95rem; color: var(--dim); }
@media (max-width: 1000px) {
    .story .problem-grid { grid-template-columns: 1fr; gap: 40px; }
    .pillars { grid-template-columns: 1fr; gap: 40px; }
    .pillars::before { display: none; }
}
@media (max-width: 700px) {
    .tl li { grid-template-columns: 1fr; gap: 6px; }
    .tl-time::before { top: 6px; }
}
.dc-av.logo { display: grid; place-items: center; padding: 0; }
.dc-av.logo img { width: 16px; height: auto; display: block; }


/* Recent flips, image led */
.flip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.flip-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.flip-img { aspect-ratio: 1 / 1; border-radius: 16px; background: radial-gradient(80% 80% at 50% 40%, #1a1626 0%, #0d0d14 100%); border: 1px solid var(--line); display: grid; place-items: center; padding: 18px; margin-bottom: 12px; overflow: hidden; position: relative; }
.flip-img::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 100%, rgba(255, 20, 147, 0.16), transparent 70%); pointer-events: none; }
.flip-img img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.55)); transition: transform 0.4s var(--ease); }
.flip-item:hover .flip-img img { transform: translateY(-4px) scale(1.03); }
.flip-img img[src$=".jpg"] { border-radius: 10px; }
.flip-item .label { margin: 0; font-size: 0.66rem; }
.flip-item h3 { font-size: 1rem; line-height: 1.3; min-height: 2.6em; }
.flip-nums { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 0.74rem; margin-top: 2px; }
.flip-nums .arr { color: var(--dim); }
.flip-profit { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.flip-profit strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.flip-profit small { color: var(--dim); font-size: 0.74rem; }
@media (max-width: 1000px) { .flip-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .flip-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .flip-item h3 { font-size: 0.88rem; } .flip-img { padding: 12px; border-radius: 12px; } }
.flip-img { background: #f4f4f6; border-color: rgba(255, 255, 255, 0.08); }
.flip-img::after { background: radial-gradient(70% 55% at 50% 100%, rgba(255, 20, 147, 0.1), transparent 70%); }
.flip-img img { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.22)); }
.flip-img img[src$=".jpg"] { border-radius: 0; filter: none; mix-blend-mode: multiply; }


/* Recent flips carousel: transparent products, looping */
.flips-car { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); padding: 8px 0 12px; }
.flip-track { gap: 0; animation: slide0 55s linear infinite; font-family: inherit; color: inherit; white-space: normal; }
.flips-car:hover .flip-track { animation-play-state: paused; }
.flip-track .flip-item { width: 300px; flex: none; padding: 0 28px; border-right: 1px solid var(--line); }
.flip-track .flip-img { aspect-ratio: auto; height: 210px; background: none; border: 0; padding: 0; margin-bottom: 18px; border-radius: 0; overflow: visible; }
.flip-track .flip-img::after { content: none; }
.flip-track .flip-img img { width: auto; max-width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.6)); border-radius: 0; mix-blend-mode: normal; }
.flip-track .flip-item h3 { min-height: 2.6em; }
@media (max-width: 700px) { .flip-track .flip-item { width: 240px; padding: 0 18px; } .flip-track .flip-img { height: 160px; } }
@media (prefers-reduced-motion: reduce) { .flip-track { animation: none; flex-wrap: wrap; width: auto; } .flips-car { mask-image: none; -webkit-mask-image: none; } }
.flip-track .flip-img { display: flex; align-items: flex-end; justify-content: center; height: 210px; overflow: hidden; }
.flip-track .flip-img img { height: 210px; max-height: 210px; width: auto; max-width: 100%; }
.flip-track .flip-img img { object-fit: contain; object-position: center bottom; width: 100%; max-width: 100%; height: 210px; }
.flip-track .flip-img { align-items: flex-end; }


/* Funnel tightening */
.story .problem-grid { grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.story .sec-head { margin-bottom: 0; }
.tl li { opacity: 1; }
.tl li:nth-child(3) .tl-time::before { background: var(--red); box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.15); }
.tl li:nth-child(3) b { color: var(--red); }
.pillars::before { top: 0; }
.pillar { padding-top: 32px; }
.pillar-link { align-self: flex-start; margin-top: 10px; font-size: 0.88rem; }
.pillars-sec .pivot { margin-bottom: 40px; }
@media (max-width: 1000px) { .story .problem-grid { grid-template-columns: 1fr; gap: 32px; } }


/* ===== Drop clock ===== */
.story .problem-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.dropclock { position: relative; padding: 8px 0 0 28px; border-left: 1px solid var(--line-strong); }
.dc-head { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 0.7rem; }
.dc-head .live { font-size: 0.62rem; }
.clock { font-size: clamp(3.2rem, 7vw, 5.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1; margin: 14px 0 22px; font-variant-numeric: tabular-nums; color: var(--text); }
.dropclock.out .clock { color: var(--red); }
.stock-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.stock-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--green), #7dffc0); transform-origin: left; transform: scaleX(1); border-radius: 3px; }
.dropclock.out .stock-bar i { background: var(--red); }
.stock-row { display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.72rem; color: var(--muted); }
.stock-out { color: var(--red); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0; transform: translateX(6px); transition: opacity 0.3s, transform 0.3s; }
.dropclock.out .stock-out { opacity: 1; transform: none; animation: stamp 0.4s var(--ease); }
@keyframes stamp { 0% { transform: scale(1.4); } 100% { transform: none; } }
.dc-stats { margin-top: 26px; border-top: 1px solid var(--line); }
.dc-stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.dc-stats dt { color: var(--muted); font-size: 0.92rem; }
.dc-stats dd { font-size: 1rem; font-weight: 700; }
.dc-stats .red { color: var(--red); }
.dc-stats .dim { font-weight: 400; font-size: 0.74rem; }
.tl-h { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line-strong); position: relative; }
.tl-h li { position: relative; padding-top: 6px; }
.tl-h li::before { content: ''; position: absolute; left: 0; top: -33px; width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px rgba(255, 20, 147, 0.15); }
.tl-h li.bad::before { background: var(--red); box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.15); }
.tl-h .mono { color: var(--pink-soft); display: block; margin-bottom: 8px; }
.tl-h li.bad .mono { color: var(--red); }
.tl-h b { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.tl-h li.bad b { color: var(--red); }
.tl-h p { color: var(--muted); font-size: 0.92rem; }

/* ===== System flow ===== */
.sysflow { position: relative; padding-top: 34px; }
.flow-line { position: absolute; left: 12%; right: 12%; width: 76%; top: 33px; height: 2px; }
.flow-base { stroke: var(--line-strong); stroke-width: 2; }
.flow-dash { stroke: var(--pink); stroke-width: 2; stroke-dasharray: 8 14; opacity: 0.5; animation: flowdash 1.4s linear infinite; }
@keyframes flowdash { to { stroke-dashoffset: -22; } }
.flow-dot { position: absolute; top: 28px; left: 12%; width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green), 0 0 0 4px rgba(0, 255, 136, 0.15); animation: flowdot 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes flowdot { 0% { left: 12%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(88% - 12px); opacity: 0; } }
.nodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.node { display: flex; flex-direction: column; gap: 10px; text-align: center; align-items: center; }
.node-ico { width: 68px; height: 68px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); display: grid; place-items: center; margin-top: -68px; position: relative; z-index: 1; box-shadow: 0 0 0 10px var(--bg-2), 0 0 40px rgba(255, 20, 147, 0.12); transition: border-color 0.3s, box-shadow 0.3s; }
.node:hover .node-ico { border-color: var(--pink); box-shadow: 0 0 0 10px var(--bg-2), 0 0 50px rgba(255, 20, 147, 0.35); }
.node-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--pink-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.node .label { margin: 16px 0 0; }
.node h3 { font-size: 1.25rem; }
.node > p:not(.label):not(.chips) { color: var(--muted); font-size: 0.95rem; max-width: 300px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.chips span { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); }
.node .pillar-link { align-self: center; }
.outcome-line.build { font-size: 1.35rem; }
.outcome-line .word { display: inline-block; color: var(--text); font-weight: 800; opacity: 0.25; transform: translateY(4px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.outcome-line.in .w1 { opacity: 1; transform: none; transition-delay: 0.3s; }
.outcome-line.in .w2 { opacity: 1; transform: none; transition-delay: 0.7s; }
.outcome-line.in .w3 { opacity: 1; transform: none; transition-delay: 1.1s; }
@media (max-width: 1000px) {
    .story .problem-grid { grid-template-columns: 1fr; gap: 40px; }
    .tl-h { grid-template-columns: 1fr; gap: 24px; }
    .tl-h li::before { top: 8px; left: -18px; }
    .tl-h li { padding-left: 0; }
    .tl-h { padding-left: 18px; }
    .nodes { grid-template-columns: 1fr; gap: 56px; }
    .flow-line, .flow-dot { display: none; }
    .node-ico { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .flow-dash, .flow-dot { animation: none; } .outcome-line .word { opacity: 1; transform: none; } .dropclock.out .stock-out { animation: none; } }
.sysflow { padding-top: 0; margin-top: 8px; }
.node-ico { margin-top: 0; }
.flow-line { left: 16.67%; width: 66.66%; top: 33px; }
.flow-dot { top: 28px; }
@keyframes flowdot { 0% { left: calc(16.67% - 6px); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(83.33% - 6px); opacity: 0; } }
/* Tighter steps */
#how .part { padding: 36px 0; align-items: center; }
#how .part:first-of-type { padding-top: 8px; border-top: 0; }
#how .part-copy { position: static; }
#how .sec-head { margin-bottom: 24px; }
.step-num { font-size: 3.4rem; margin-bottom: 6px; }
@media (max-width: 1000px) { #how .part { padding: 32px 0; } }
/* Pillars: rows aligned across the three columns */
@supports (grid-template-rows: subgrid) {
    .nodes { grid-template-rows: auto auto auto auto auto auto; align-items: start; }
    .node { display: grid; grid-template-rows: subgrid; grid-row: span 6; gap: 10px; justify-items: center; }
    .node .pillar-link { align-self: start; }
}
.node > p:not(.label):not(.chips) { min-height: 4.4em; }
.chips { min-height: 66px; align-content: start; }
@media (max-width: 1000px) { .node > p:not(.label):not(.chips), .chips { min-height: 0; } }


/* ===== How It Works stepper ===== */
.how-sec { padding: 96px 0; }
.how-stage { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.how-copy h2 { margin-bottom: 28px; }
.how-steps { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.how-step { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: opacity 0.3s; opacity: 0.45; }
.how-step:hover, .how-step.on { opacity: 1; }
.how-step:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; border-radius: 6px; }
.how-num { font-size: 1rem; color: var(--dim); padding-top: 2px; transition: color 0.3s; }
.how-step.on .how-num { color: var(--pink-soft); }
.how-body { position: relative; min-width: 0; }
.how-body .label { margin: 0 0 4px; font-size: 0.62rem; }
.how-body h3 { font-size: 1.2rem; }
.how-p { color: var(--muted); font-size: 0.95rem; margin-top: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s var(--ease), opacity 0.4s ease, margin 0.4s; margin-top: 0; }
.how-step.on .how-p { max-height: 8em; opacity: 1; margin-top: 6px; }
.how-bar { display: block; height: 2px; margin-top: 12px; background: rgba(255, 255, 255, 0.08); border-radius: 1px; overflow: hidden; opacity: 0; transition: opacity 0.3s; }
.how-step.on .how-bar { opacity: 1; }
.how-bar i { display: block; height: 100%; width: 0; background: var(--grad); }
.run .how-step.on.run .how-bar i { animation: howfill 7s linear forwards; }
@keyframes howfill { to { width: 100%; } }
.how-screens { position: relative; min-height: 640px; }
.how-screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(14px) scale(0.985); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); pointer-events: none; }
.how-screen.on { opacity: 1; transform: none; pointer-events: auto; }
.how-screen > .fit { width: 100%; }
.how-screen > .phone { width: 300px; }
.how-screen .phone { margin: 0 auto; }
@media (max-width: 1000px) {
    .how-sec { padding: 64px 0; }
    .how-stage { grid-template-columns: 1fr; gap: 28px; }
    .how-steps { flex-direction: row; overflow-x: auto; border-top: 0; gap: 8px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
    .how-step { flex: none; width: 200px; grid-template-columns: 24px 1fr; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
    .how-step.on { border-color: rgba(255, 20, 147, 0.5); }
    .how-body h3 { font-size: 0.95rem; }
    .how-p { display: none; }
    .how-screens { min-height: 620px; }
}
@media (prefers-reduced-motion: reduce) { .how-p { transition: none; } .how-screen { transition: none; } .run .how-step.on.run .how-bar i { animation: none; width: 100%; } }
.how-stage > * { min-width: 0; }
.how-copy { min-width: 0; }
@media (max-width: 1000px) { .how-steps { max-width: 100%; } .how-screens { width: 100%; } }


/* ===== Brief pass ===== */
.hero-head .sub strong { color: var(--text); font-weight: 700; }
.proof-strip { border-top: 1px solid var(--line); background: var(--bg); }
.proof-in { display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: center; justify-content: center; padding: 18px 24px; font-size: 0.9rem; color: var(--muted); }
.proof-in span { display: inline-flex; align-items: center; gap: 8px; }
.proof-in b { color: var(--text); font-weight: 700; }
.proof-in .stars { color: #ffb02e; font-size: 0.9rem; letter-spacing: 0.08em; }

.markets { padding: 96px 0; }
.market-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-strong); }
.market-grid li { padding: 28px 28px 28px 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); margin-right: 28px; display: grid; grid-template-columns: 40px 1fr; gap: 4px 16px; }
.market-grid li:nth-child(3n) { border-right: 0; margin-right: 0; }
.mk-ico { width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 20, 147, 0.1); display: grid; place-items: center; grid-row: span 2; }
.mk-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--pink-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.market-grid h3 { font-size: 1.05rem; }
.market-grid p { color: var(--muted); font-size: 0.9rem; }

.nodes.four { grid-template-columns: repeat(4, 1fr); gap: 28px; }
.nodes.four .node > p:not(.label):not(.chips) { font-size: 0.9rem; min-height: 5.5em; }
.sysflow.four .flow-line { left: 12.5%; width: 75%; }
@keyframes flowdot { 0% { left: calc(12.5% - 6px); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(87.5% - 6px); opacity: 0; } }
@supports (grid-template-rows: subgrid) { .nodes.four { grid-template-rows: auto auto auto auto auto; } .nodes.four .node { grid-row: span 5; } }
.im-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 44px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; }
.im-line .label { margin: 0; }
.im-line b { color: var(--text); font-size: 1.05rem; }
.im-line .link-arrow { margin-left: auto; font-size: 0.9rem; }
.operator-mind { margin-top: 56px; text-align: center; }
.om-head { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.om-sub { color: var(--dim); margin-top: 14px; font-size: 0.95rem; }
.om-chips { justify-content: center; margin-top: 14px; max-width: 760px; margin-left: auto; margin-right: auto; }

.co-logo.jd { display: inline-grid; place-items: center; width: 34px; height: 24px; background: #111; color: #fff; font-weight: 900; font-size: 0.8rem; letter-spacing: -0.02em; border-radius: 3px; }
.co-btn.jd { background: #111; }
.prod.shoe { width: 170px; height: 150px; }

.flip-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.flip-three .flip-img { height: 220px; background: none; border: 0; padding: 0; border-radius: 0; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 18px; }
.flip-three .flip-img::after { content: none; }
.flip-three .flip-img img { height: 220px; width: auto; max-width: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.6)); }
.flip-three h3 { min-height: 2.6em; }
.flip-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; border-top: 1px solid var(--line); }
.flip-facts div { padding: 10px 0; border-right: 1px solid var(--line); padding-right: 10px; }
.flip-facts div + div { padding-left: 10px; }
.flip-facts div:last-child { border-right: 0; }
.flip-facts dt { color: var(--dim); font: 500 0.6rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.flip-facts dd { font-size: 1.05rem; font-weight: 700; margin-top: 2px; }
.flip-note { margin-top: 28px; }

.im-sec { background: var(--bg-2); }
.im-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.im-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 28px; border-top: 1px solid var(--line-strong); }
.im-feats li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.im-feats b { display: block; font-size: 0.95rem; }
.im-feats span { color: var(--dim); font-size: 0.8rem; }
.im-demo .fit { width: 100%; }

.proof-sec .whop { margin-top: 8px; }
.auto-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.auto-grid .sec-head { margin-bottom: 0; }
.levels { border-top: 1px solid var(--line-strong); }
.levels li { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 150px 1fr; gap: 4px 20px; }
.levels .label { margin: 4px 0 0; grid-row: span 2; }
.levels h3 { font-size: 1.05rem; }
.levels p { color: var(--muted); font-size: 0.92rem; }

@media (max-width: 1000px) {
    .market-grid { grid-template-columns: 1fr 1fr; }
    .market-grid li:nth-child(3n) { border-right: 1px solid var(--line); margin-right: 28px; }
    .market-grid li:nth-child(2n) { border-right: 0; margin-right: 0; }
    .nodes.four { grid-template-columns: 1fr 1fr; }
    .sysflow.four .flow-line, .sysflow.four .flow-dot { display: none; }
    .flip-three { grid-template-columns: 1fr; gap: 32px; }
    .im-grid, .auto-grid { grid-template-columns: 1fr; gap: 32px; }
    .im-line .link-arrow { margin-left: 0; }
}
@media (max-width: 700px) {
    .market-grid { grid-template-columns: 1fr; }
    .market-grid li { border-right: 0 !important; margin-right: 0 !important; padding-right: 0; }
    .nodes.four { grid-template-columns: 1fr; }
    .im-feats { grid-template-columns: 1fr; }
    .levels li { grid-template-columns: 1fr; }
    .levels .label { grid-row: auto; }
    .proof-in { gap: 10px 22px; font-size: 0.82rem; }
}

/* Carousel cards in the facts format */
.flip-track .flip-item { width: 320px; }
.flip-track .flip-facts { width: 100%; }
.flip-track .flip-img img { height: 210px; }

/* Flattened carousel images: glow instead of silhouette shadow */
.flip-track .flip-img { position: relative; }
.flip-track .flip-img::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -6px; height: 40px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 20, 147, 0.22), transparent 70%); filter: blur(6px); }
.flip-track .flip-img img { filter: none; position: relative; }


/* ===== Brief 2 ===== */
.cta-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(255, 20, 147, 0.08), rgba(138, 43, 226, 0.06)); }
.cta-in { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-top: 48px; padding-bottom: 48px; }
.cta-in h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.cta-in .lead { margin-top: 8px; }
.cta-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line-strong); }
.stages li { padding: 24px 24px 24px 0; border-right: 1px solid var(--line); margin-right: 24px; }
.stages li:last-child { border-right: 0; margin-right: 0; }
.stages .label { margin: 0 0 8px; }
.stages p:not(.label) { color: var(--muted); font-size: 0.95rem; }
.stages-close { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 1.15rem; font-weight: 600; }
.first7-sec { background: var(--bg-2); }
.first7 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; border-top: 1px solid var(--line-strong); }
.first7 li { padding: 22px 0; border-bottom: 1px solid var(--line); position: relative; }
.first7 .mono { color: var(--pink-soft); display: block; margin-bottom: 6px; }
.first7 h3 { font-size: 1.05rem; margin-bottom: 4px; }
.first7 p { color: var(--muted); font-size: 0.92rem; }
.first7 li.end .mono { color: var(--green); }
.first7-cta { margin-top: 32px; }
.value-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line-strong); }
.value-grid > div { padding: 24px 20px 24px 0; border-right: 1px solid var(--line); margin-right: 20px; }
.value-grid > div:last-child { border-right: 0; margin-right: 0; }
.value-grid .label { margin: 0 0 10px; }
.value-grid li { color: var(--muted); font-size: 0.9rem; padding: 4px 0; }
.value-close { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); text-align: center; font-size: 1.15rem; font-weight: 600; }
.dispatch .lead strong { color: var(--text); font-weight: 600; display: block; margin-bottom: 8px; }
@media (max-width: 1000px) {
    .cta-in { flex-direction: column; align-items: flex-start; }
    .cta-side { align-items: flex-start; }
    .stages { grid-template-columns: 1fr 1fr; }
    .stages li:nth-child(2n) { border-right: 0; margin-right: 0; }
    .first7 { grid-template-columns: 1fr 1fr; }
    .value-grid { grid-template-columns: 1fr 1fr 1fr; }
    .value-grid > div:nth-child(3n) { border-right: 0; margin-right: 0; }
}
@media (max-width: 700px) {
    .stages, .first7, .value-grid { grid-template-columns: 1fr; }
    .stages li, .value-grid > div { border-right: 0 !important; margin-right: 0 !important; border-bottom: 1px solid var(--line); padding-right: 0; }
}


/* ===== Funnel tightening ===== */
.markets-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; padding: 0 24px 16px; font-size: 0.82rem; color: var(--muted); }
.markets-row span { display: inline-flex; align-items: center; gap: 8px; }
.markets-row .mk-ico { width: 26px; height: 26px; border-radius: 7px; }
.markets-row .mk-ico svg { width: 14px; height: 14px; }
.levels-block { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.levels-block .label { margin-bottom: 12px; }
.levels-block .levels { border-top: 0; }
.levels-block .fine { margin-top: 16px; }
.price-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: start; }
.price-layout .value-grid { grid-template-columns: 1fr 1fr 1fr; gap: 0 20px; }
.price-layout .value-grid > div { padding-right: 16px; margin-right: 0; border-right: 0; border-bottom: 1px solid var(--line); }
.price-layout .value-grid > div:nth-child(-n+3) { border-right: 1px solid var(--line); }
.price-layout .value-grid > div:nth-child(3) { border-right: 0; }
.price-layout .value-grid > div:nth-child(n+4) { border-bottom: 0; border-right: 1px solid var(--line); }
.price-layout .value-grid > div:nth-child(5) { border-right: 0; }
.price-layout .entry-card { position: sticky; top: 88px; }
.pricing .sec-head.centre .lead { max-width: 640px; }
@media (max-width: 1000px) {
    .price-layout { grid-template-columns: 1fr; }
    .price-layout .entry-card { position: static; max-width: 520px; }
    .price-layout .value-grid { grid-template-columns: 1fr 1fr; }
    .price-layout .value-grid > div { border-right: 0 !important; }
}
@media (max-width: 700px) { .markets-row { gap: 6px 16px; font-size: 0.74rem; } .price-layout .value-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .price-layout .value-grid { grid-template-columns: 1fr 1fr; gap: 0 16px; } .price-layout .value-grid > div { border-bottom: 1px solid var(--line); } }

.im-feats { grid-template-columns: 1fr 1fr; }
.im-feats li { padding: 10px 0; }
.im-feats b { font-weight: 600; }

.foot-grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .foot-grid { grid-template-columns: 1fr; } }
/* Value grid: 3 across, then 2 across, no empty cell */
.price-layout .value-grid { grid-template-columns: repeat(6, 1fr); gap: 0 20px; }
.price-layout .value-grid > div { grid-column: span 2; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0; padding: 20px 16px 20px 0; }
.price-layout .value-grid > div:nth-child(3) { border-right: 0; }
.price-layout .value-grid > div:nth-child(4), .price-layout .value-grid > div:nth-child(5) { grid-column: span 3; border-bottom: 0; }
.price-layout .value-grid > div:nth-child(5) { border-right: 0; }
.price-layout .value-grid .label { font-size: 0.62rem; }
@media (max-width: 1000px) { .price-layout .value-grid > div { grid-column: span 3 !important; border-right: 0 !important; border-bottom: 1px solid var(--line) !important; } }
@media (max-width: 700px) { .price-layout .value-grid > div { grid-column: span 6 !important; } }
.om-loop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 28px; text-align: left; border-top: 1px solid var(--line); padding-top: 24px; }
.om-loop li { position: relative; }
.om-loop li + li::before { content: '→'; position: absolute; left: -24px; top: 2px; color: var(--pink-soft); font-size: 0.9rem; }
.om-loop .label { display: block; margin-bottom: 8px; }
.om-loop p { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 1000px) { .om-loop { grid-template-columns: 1fr; gap: 18px; } .om-loop li + li::before { content: none; } }

/* ===== Mobile pass ===== */
.im-grid > * { min-width: 0; }
.fit { overflow: hidden; }
@media (max-width: 700px) {
    .im-demo .fit { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 12px; }
    .im-demo .fit > * { transform: none !important; }
    .im-demo .swipe-hint { display: block; }
    .nodes.four { gap: 36px; }
    .node-ico { width: 56px; height: 56px; }
    .node-ico svg { width: 24px; height: 24px; }
    .node h3 { font-size: 1.1rem; }
    .clock { font-size: 3rem; }
    .dropclock { padding-left: 18px; }
    .om-loop { gap: 20px; }
    .sec-head h2 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
    .hero h1 { font-size: clamp(2.3rem, 11vw, 2.9rem); }
    .price-layout .entry-card { position: static; }
    .value-close, .stages-close { font-size: 1rem; }
    .foot-grid { gap: 20px; }
}
.swipe-hint { display: none; margin-top: 10px; }

/* ===== iOS stability ===== */
html { overflow-x: hidden; }
body { overscroll-behavior-x: none; }
@media (max-width: 700px), (pointer: coarse) {
    html.js .rv:not(.in), html.js .rvs:not(.in) > * { transform: none; }
    .rv, .rvs > * { transition: opacity 0.35s ease; transition-delay: calc(var(--i, 0) * 30ms); }
    html.js .hero-head > * { animation-duration: 0.4s; }
    .lock-phone.buzz { animation: none; }
    .how-screen { transform: none; }
}

/* ===== iOS: nothing may widen the document ===== */
.fit { contain: inline-size; max-width: 100%; min-width: 0; }
.im-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.im-grid > * { min-width: 0; max-width: 100%; }
.im-demo .fit > * { max-width: none; }
.how-screens, .how-screen { max-width: 100%; }
section, .proof-strip, .strip, .foot, .top { overflow-x: clip; }
@media (max-width: 1000px) { .im-grid { grid-template-columns: minmax(0, 1fr); } }

/* ===== iOS: block horizontal panning at the touch level ===== */
html, body { width: 100%; max-width: 100%; }
body { touch-action: pan-y pinch-zoom; position: relative; }
.how-steps, .im-demo .fit, .marquee { touch-action: pan-x pan-y pinch-zoom; }

/* ===== Tracker: phone layout for the Inventory Manager section ===== */
@media (max-width: 700px) {
    .im-demo .fit { overflow: visible; contain: none; }
    .im-demo .fit > * { width: 100% !important; transform: none !important; }
    .im-demo .tr-side { display: none; }
    .im-demo .tr-app { grid-template-columns: 1fr; min-height: 0; font-size: 0.72rem; }
    .im-demo .tr-main { padding: 12px; gap: 10px; }
    .im-demo .tr-search { max-width: none; }
    .im-demo .tr-hero-top { flex-direction: column; gap: 12px; }
    .im-demo .tr-big { font-size: 2rem; }
    .im-demo .tr-pills { align-self: flex-start; }
    .im-demo .tr-stats { grid-template-columns: 1fr 1fr; gap: 12px 0; }
    .im-demo .tr-stats > div { padding: 0 10px; }
    .im-demo .tr-stats > div:nth-child(odd) { padding-left: 0; border-left: 0; }
    .im-demo .tr-stats .mono:not(.tr-cap) { font-size: 1rem; }
    .im-demo .tr-notice { flex-wrap: wrap; font-size: 0.66rem; }
    .im-demo .tr-ghost { margin-left: 0; }
    .im-demo .tr-tiles { grid-template-columns: 1fr 1fr; }
    .im-demo .tr-tiles small { white-space: normal; }
    .im-demo .tr-bottom { grid-template-columns: 1fr; }
    .im-demo .tr-bars { height: 90px; }
    .im-demo .tr-toast { display: none; }
    .im-demo .swipe-hint { display: none; }
}