:root {
  --bg: #090b0c;
  --panel: #111416;
  --panel-2: #15191b;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.17);
  --text: #f3f5f1;
  --muted: #9da6a1;
  --lime: #d8ff66;
  --lime-soft: rgba(216,255,102,.12);
  --blue: #8be0ff;
  --pink: #ffb4eb;
  --danger: #ff8278;
  --success: #a5f3a7;
  --radius: 22px;
  --shadow: 0 28px 90px rgba(0,0,0,.36);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 14% -10%, rgba(216,255,102,.08), transparent 26rem),
    radial-gradient(circle at 90% 5%, rgba(139,224,255,.06), transparent 25rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.page-shell { min-height: 100vh; overflow: hidden; }
.site-header {
  width: min(1220px, calc(100% - 40px));
  margin: 0 auto;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
}
.brand { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:800; letter-spacing:-.04em; }
.brand-accent { color: var(--lime); }
.brand-mark { width:24px; height:24px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:3px; transform:rotate(45deg); }
.brand-mark span { background:var(--text); border-radius:2px; }
.brand-mark span:nth-child(4) { background:var(--lime); }
.brand-mark.mini { width:18px; height:18px; gap:2px; }
.top-nav { display:flex; gap:28px; font-size:14px; color:var(--muted); }
.top-nav a:hover { color:var(--text); }

.button {
  border: 1px solid transparent;
  border-radius: 12px;
  min-height: 48px;
  padding: 0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  letter-spacing:-.01em;
  cursor:pointer;
  transition: .2s ease;
}
.button:hover { transform:translateY(-1px); }
.button-primary { background:var(--lime); color:#11150d; box-shadow:0 10px 30px rgba(216,255,102,.14); }
.button-primary:hover { background:#e2ff83; box-shadow:0 14px 40px rgba(216,255,102,.20); }
.button-secondary { background:#181c1e; border-color:var(--line); color:var(--text); }
.button-secondary:hover, .button-ghost:hover { border-color:var(--line-strong); background:#1c2123; }
.button-ghost { background:transparent; border-color:var(--line); color:var(--text); }
.button-small { min-height:38px; padding:0 13px; border-radius:10px; font-size:13px; }
.button-wide { width:100%; }
.text-button { border:0; background:none; color:var(--muted); cursor:pointer; padding:8px 4px; }
.text-button:hover { color:var(--text); }

.hero {
  width:min(1220px, calc(100% - 40px));
  margin:0 auto;
  padding:48px 0;
  align-items:center;
}
.section-grid { display:grid; grid-template-columns:1.04fr .96fr; gap:72px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; color:#c7d0cb; text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:800; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 18px rgba(216,255,102,.8); }
.hero h1 { font-size:clamp(52px, 7vw, 86px); line-height:.95; letter-spacing:-.04em; margin:19px 0 26px; max-width:740px; }
.hero h1 span { color:var(--lime); }
.hero-lede { color:#bac3be; max-width:660px; font-size:19px; line-height:1.6; letter-spacing:-.02em; }
.hero-actions { display:flex; gap:11px; margin:24px 0 28px; }
.hero-proof { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.hero-proof > div { border-top:1px solid var(--line); padding-top:15px; }
.hero-proof strong { display:block; font-size:13px; margin-bottom:6px; }
.hero-proof span { color:var(--muted); font-size:12px; line-height:1.45; display:block; }

.hero-demo-wrap { position:relative; }
.hero-demo-wrap:before { content:""; position:absolute; inset:-80px; background:radial-gradient(circle, rgba(216,255,102,.09), transparent 58%); pointer-events:none; }
.demo-shell { position:relative; background:rgba(15,18,19,.86); border:1px solid var(--line-strong); border-radius:28px; box-shadow:var(--shadow); padding:18px; backdrop-filter:blur(18px); }
.demo-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; padding:1px 4px; }
.demo-topbar > div { display:flex; flex-direction:column; gap:4px; }
.demo-topbar strong { font-size:14px; }
.mini-label { color:var(--lime); font-size:9px; font-weight:900; letter-spacing:.18em; }
.demo-state { color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:6px 9px; font-size:11px; }
.provider-picker { background:#0c0f10; border:1px solid var(--line); border-radius:14px; padding:12px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px 12px; margin-bottom:12px; }
.provider-picker label { font-size:11px; color:var(--muted); }
.provider-picker select { grid-row:1 / span 2; grid-column:2; min-width:180px; background:#161a1c; color:var(--text); border:1px solid var(--line); border-radius:9px; padding:9px 10px; outline:none; }
.provider-picker small { font-size:9px; color:#69716d; }
.challenge-card { background:#f3f4ef; color:#121512; border-radius:19px; padding:19px; box-shadow:0 18px 50px rgba(0,0,0,.20); }
.challenge-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.challenge-kicker { text-transform:uppercase; font-size:9px; letter-spacing:.13em; font-weight:900; color:#788078; }
.challenge-heading h2 { margin:4px 0 0; font-size:22px; letter-spacing:-.04em; }
.shield-icon { width:35px; height:35px; border-radius:50%; background:#e4e8de; display:grid; place-items:center; font-weight:900; }
.creative-frame { height:220px; margin:16px 0 12px; border-radius:15px; position:relative; overflow:hidden; color:white; background:var(--campaign-bg); border:1px solid rgba(255,255,255,.08); }
.creative-frame:before { content:""; position:absolute; width:250px; height:250px; border-radius:50%; background:var(--campaign-accent); opacity:.11; filter:blur(1px); right:-45px; top:-70px; }
.creative-brand { position:absolute; left:18px; top:16px; font-weight:900; letter-spacing:.2em; font-size:13px; }
.creative-copy { position:absolute; left:18px; bottom:20px; max-width:58%; z-index:3; }
.creative-category { display:inline-block; color:var(--campaign-accent); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; margin-bottom:5px; }
.creative-copy strong { display:block; font-size:29px; letter-spacing:-.05em; line-height:1; }
.creative-copy p { font-size:11px; line-height:1.45; margin:7px 0 0; color:rgba(255,255,255,.65); }
.creative-sponsored { position:absolute; right:10px; bottom:10px; padding:5px 7px; border-radius:6px; font-size:8px; background:rgba(0,0,0,.28); color:rgba(255,255,255,.75); }
.creative-puzzle-target { position:absolute; left:calc(72% - 29px); top:91px; width:58px; height:58px; border:1.5px dashed color-mix(in srgb, var(--campaign-accent) 70%, white); border-radius:12px; background:rgba(0,0,0,.24); box-shadow:inset 0 0 0 5px rgba(255,255,255,.025); z-index:7; }
.creative-puzzle-piece { position:absolute; left:calc(10% - 29px); top:91px; width:58px; height:58px; border:1px solid rgba(255,255,255,.56); border-radius:12px; background:linear-gradient(135deg,#f6f7f1 0 45%,var(--campaign-accent) 46% 66%,#515651 67%); box-shadow:0 12px 24px rgba(0,0,0,.35); z-index:8; display:grid; place-items:center; transition:left .08s linear, box-shadow .2s, transform .2s; }
.creative-puzzle-piece:before { content:""; width:75%; height:17%; border-radius:99px; background:white; position:absolute; bottom:13px; transform:rotate(-7deg); box-shadow:0 -8px 0 -3px rgba(0,0,0,.18); }
.creative-puzzle-piece span { width:7px; height:7px; background:var(--campaign-accent); border-radius:50%; box-shadow:12px -11px 0 rgba(255,255,255,.55), -12px 10px 0 rgba(0,0,0,.14); }
.creative-puzzle-piece.near { box-shadow:0 0 0 3px color-mix(in srgb, var(--campaign-accent) 35%, transparent), 0 12px 24px rgba(0,0,0,.35); transform:scale(1.03); }
.creative-art { position:absolute; right:5%; top:18%; width:44%; height:61%; transform:rotate(-6deg); opacity:.68; }
.ramp-card { position:absolute; width:90%; height:72%; right:0; border-radius:10px; background:var(--campaign-accent); color:#172019; box-shadow:0 14px 22px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.15); }
.ramp-card span { position:absolute; top:10px; left:12px; font-size:20px; font-weight:800; letter-spacing:-.06em; }
.ramp-card small { position:absolute; right:12px; bottom:12px; font-size:7px; letter-spacing:.15em; }
.ramp-card-back { top:0; right:8%; background:#363d35; color:white; transform:rotate(-12deg); }
.ramp-card-front { top:26%; right:-4%; transform:rotate(6deg); }
.card-chip { position:absolute; bottom:13px; left:13px; width:20px; height:16px; border:1px solid #8c9349; border-radius:4px; background:linear-gradient(90deg,transparent 45%,#8c9349 46% 50%,transparent 51%),linear-gradient(0deg,#d4d897 45%,#8c9349 46% 50%,#d4d897 51%); }
.orbit { position:absolute; border:1px solid var(--campaign-accent); border-radius:50%; opacity:.35; }
.orbit-one { width:110px; height:110px; right:-15px; top:3px; }
.orbit-two { width:70px; height:70px; left:3px; bottom:-3px; }
.slider-area { position:relative; height:54px; background:#e3e7df; border-radius:12px; overflow:hidden; display:flex; align-items:center; padding:0 12px; }
.slider-area input[type=range] { position:absolute; inset:0; width:100%; height:100%; opacity:.001; cursor:grab; z-index:5; }
.slider-area input[type=range]:active { cursor:grabbing; }
.slider-piece { position:absolute; width:44px; height:44px; top:5px; left:calc(10% - 22px); border-radius:10px; background:#161a17; color:var(--lime); display:grid; place-items:center; transition:left .08s linear, background .2s; font-weight:900; box-shadow:0 8px 16px rgba(0,0,0,.17); }
.target-zone { position:absolute; left:calc(72% - 25px); top:7px; width:50px; height:40px; border:2px dashed #b3bbb2; border-radius:10px; background:rgba(255,255,255,.24); }
.challenge-actions { display:flex; align-items:center; gap:12px; margin-top:12px; }
.challenge-actions .button { flex:1; min-height:44px; }
.challenge-actions .text-button { flex:0 0 auto; font-size:11px; }
.challenge-result { min-height:0; overflow:hidden; border-radius:10px; font-size:11px; line-height:1.45; transition:.2s ease; }
.challenge-result.show { min-height:46px; margin-top:10px; padding:10px 12px; background:#e5f6df; color:#2b5e29; }
.challenge-result.error { background:#fee5e1; color:#8b3128; }
.challenge-footer { display:flex; justify-content:space-between; gap:12px; font-size:8px; color:#8b928c; margin-top:12px; padding-top:10px; border-top:1px solid #dfe3dc; }
.challenge-footer strong { color:#5e665f; }

.logo-strip { width:100%; border-top:1px solid var(--line); border-bottom:1px solid var(--line); min-height:70px; display:flex; align-items:center; justify-content:center; gap:20px; color:#6f7773; font-size:10px; letter-spacing:.13em; font-weight:800; text-align:center; padding:16px 20px; }
.logo-strip strong { color:#b7c0ba; }

.section { width:min(1220px, calc(100% - 40px)); margin:0 auto; padding:118px 0; }
.section-header { margin-bottom:48px; }
.section-header.narrow { max-width:720px; }
.section-header h2 { font-size:clamp(38px, 5vw, 62px); line-height:1.02; letter-spacing:-.055em; margin:13px 0 17px; }
.section-header p { font-size:17px; line-height:1.65; color:var(--muted); max-width:760px; margin:0; }
.split-header { display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:end; }
.split-header p { justify-self:end; }

.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.value-card { min-height:310px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:25px; position:relative; overflow:hidden; }
.value-card.spotlight { background:linear-gradient(145deg, #171e14, #111416 65%); }
.value-card.spotlight:before { content:""; position:absolute; width:210px; height:210px; border-radius:50%; background:rgba(216,255,102,.08); filter:blur(4px); top:-90px; right:-70px; }
.card-number { color:#5e6862; font-size:11px; font-weight:900; }
.value-card h3 { font-size:28px; letter-spacing:-.04em; margin:92px 0 11px; }
.value-card p { color:var(--muted); font-size:14px; line-height:1.65; max-width:320px; }
.card-footer-pill { position:absolute; bottom:22px; left:24px; border:1px solid var(--line); border-radius:99px; padding:6px 10px; font-size:10px; color:#aeb7b1; }

.architecture-section { border-top:1px solid var(--line); }
.flow-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap:10px; align-items:center; }
.flow-step { min-height:190px; border:1px solid var(--line); border-radius:18px; background:var(--panel); padding:18px; display:flex; flex-direction:column; }
.flow-step > span { width:26px; height:26px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:#87918b; font-size:9px; font-weight:900; }
.flow-step strong { margin-top:auto; font-size:15px; }
.flow-step p { color:var(--muted); font-size:11px; line-height:1.5; margin:6px 0 0; }
.emphasis-step { border-color:rgba(216,255,102,.34); background:linear-gradient(145deg,#172015,#111416); }
.emphasis-step > span { color:var(--lime); border-color:rgba(216,255,102,.25); }
.flow-arrow { color:#4c5550; }
.partner-principles { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; }
.partner-principles > div { padding:18px; border-left:1px solid var(--line); }
.partner-principles span { color:var(--lime); font-size:9px; letter-spacing:.1em; font-weight:900; }
.partner-principles strong { display:block; margin:12px 0 7px; font-size:14px; }
.partner-principles p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }

.economics-section { border-top:1px solid var(--line); }
.calculator-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:16px; }
.calculator-controls, .calculator-result { background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:28px; }
.calculator-controls { display:flex; flex-direction:column; gap:27px; }
.calculator-controls label { display:block; }
.calculator-controls label > span { display:flex; justify-content:space-between; gap:20px; color:#b9c2bd; font-size:12px; margin-bottom:12px; }
.calculator-controls strong { color:var(--text); }
.calculator-controls input[type=range] { width:100%; accent-color:var(--lime); }
.calculator-result { background:linear-gradient(140deg, #172014, #101314 65%); display:flex; flex-direction:column; justify-content:center; min-height:390px; }
.result-label { color:#aab4ae; font-size:12px; }
.result-number { color:var(--lime); font-size:clamp(50px,7vw,82px); font-weight:800; letter-spacing:-.06em; margin:10px 0 2px; }
.result-number span { font-size:17px; letter-spacing:-.02em; color:#87927f; margin-left:6px; }
.result-sub { font-size:14px; color:#c4cec8; }
.result-breakdown { margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; border-top:1px solid var(--line); padding-top:20px; }
.result-breakdown span { display:block; color:#7d8881; font-size:10px; margin-bottom:6px; }
.result-breakdown strong { font-size:14px; }

.dashboard-section { border-top:1px solid var(--line); }
.dashboard-shell { min-height:620px; background:#edf0eb; color:#101310; border-radius:24px; overflow:hidden; display:grid; grid-template-columns:205px 1fr; box-shadow:var(--shadow); }
.dashboard-sidebar { background:#101312; color:white; padding:22px 14px; display:flex; flex-direction:column; }
.dashboard-brand { display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.03em; margin:0 8px 27px; }
.dash-tab { border:0; background:transparent; color:#87918c; text-align:left; padding:11px 12px; border-radius:9px; font-size:12px; cursor:pointer; margin-bottom:3px; }
.dash-tab:hover, .dash-tab.active { background:#1a1f1c; color:white; }
.sidebar-note { margin-top:auto; border-top:1px solid rgba(255,255,255,.08); padding:16px 9px 2px; font-size:10px; color:#6e7772; }
.sidebar-note span { display:inline-block; width:6px; height:6px; background:var(--lime); border-radius:50%; margin-right:6px; }
.dashboard-main { padding:34px; }
.dash-view { display:none; }
.dash-view.active { display:block; }
.dash-topline { display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; }
.dash-topline small { display:block; color:#929a94; font-size:8px; font-weight:900; letter-spacing:.16em; margin-bottom:6px; }
.dash-topline h3 { margin:0; font-size:28px; letter-spacing:-.04em; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.metric-card { background:white; border:1px solid #dfe4dd; border-radius:15px; padding:17px; min-height:126px; display:flex; flex-direction:column; }
.metric-card span { color:#7d857f; font-size:10px; }
.metric-card strong { font-size:27px; letter-spacing:-.04em; margin-top:auto; }
.metric-card small { color:#99a19b; font-size:9px; margin-top:3px; }
.metric-card.lime { background:#ddff78; border-color:#d0f264; }
.metric-card.blue { background:#dff5ff; border-color:#c9ebf7; }
.chart-card { background:white; border:1px solid #dfe4dd; border-radius:15px; margin-top:12px; padding:20px; }
.chart-head { display:flex; justify-content:space-between; gap:20px; }
.chart-head strong { display:block; font-size:13px; }
.chart-head span { display:block; color:#939b95; font-size:9px; margin-top:3px; }
.legend i { width:7px; height:7px; background:#1b201d; border-radius:2px; display:inline-block; margin-right:4px; }
.bar-chart { height:230px; margin-top:28px; display:flex; align-items:flex-end; gap:9px; border-bottom:1px solid #e4e8e2; background:repeating-linear-gradient(to top, transparent 0, transparent 57px, #eef1ed 58px); }
.bar-chart i { flex:1; background:linear-gradient(to top,#252a27,#7a847d); border-radius:5px 5px 0 0; min-height:15px; }
.live-pill { background:#ddf4db; color:#347236; border-radius:99px; font-size:10px; padding:7px 10px; }
.campaign-row { margin-top:12px; background:white; border:1px solid #dfe4dd; border-radius:15px; padding:16px; display:grid; grid-template-columns:88px 1fr auto; gap:16px; align-items:center; }
.campaign-thumbnail { height:66px; border-radius:11px; background:linear-gradient(135deg,#172019,#26382b); color:white; display:grid; place-items:center; font-weight:900; letter-spacing:.16em; }
.campaign-row strong { display:block; font-size:13px; }
.campaign-row span { display:block; color:#929a94; font-size:9px; margin-top:4px; }
.publisher-policy-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.publisher-policy-grid > div { background:white; border:1px solid #dfe4dd; border-radius:15px; padding:20px; min-height:145px; display:flex; flex-direction:column; }
.publisher-policy-grid span { color:#939b95; font-size:10px; }
.publisher-policy-grid strong { margin-top:auto; font-size:19px; }
.publisher-policy-grid small { color:#929a94; font-size:9px; margin-top:4px; }

.security-section { border-top:1px solid var(--line); }
.security-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.security-card { border:1px solid var(--line); border-radius:20px; padding:24px; min-height:220px; background:var(--panel); }
.security-icon { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:10px; color:var(--lime); }
.security-card h3 { font-size:18px; margin:44px 0 8px; }
.security-card p { color:var(--muted); font-size:12px; line-height:1.6; margin:0; }

.integration-section { border-top:1px solid var(--line); display:grid; grid-template-columns:.8fr 1.2fr; gap:55px; align-items:center; }
.integration-copy h2 { font-size:48px; line-height:1.05; letter-spacing:-.055em; margin:15px 0; }
.integration-copy p { color:var(--muted); line-height:1.65; }
.integration-copy ul { list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; color:#c1cac5; font-size:13px; }
.integration-copy li:before { content:"✓"; color:var(--lime); margin-right:9px; }
.code-card { background:#0e1112; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); }
.code-top { min-height:44px; display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--line); padding:0 14px; }
.code-top > span { width:7px; height:7px; border-radius:50%; background:#3b4240; }
.code-top em { margin-left:auto; color:#69716e; font-size:9px; font-style:normal; }
pre { margin:0; padding:24px; overflow:auto; color:#d4dbd7; font:12px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-muted { color:#65706a; }
.code-key { color:var(--pink); }
.code-fn { color:var(--blue); }
.code-string { color:var(--lime); }

.pilot-section { padding-top:40px; }
.pilot-card { background:linear-gradient(140deg,#dfff79,#baff58); color:#10140d; border-radius:28px; padding:52px; display:grid; grid-template-columns:1fr .9fr; gap:70px; align-items:center; }
.pilot-card .eyebrow { color:#4e5a35; }
.pilot-card h2 { font-size:52px; letter-spacing:-.055em; line-height:1.02; margin:14px 0; }
.pilot-card p { color:#4f5b3d; max-width:560px; line-height:1.6; }
.pilot-form { background:#111512; color:white; border-radius:18px; padding:20px; }
.pilot-form label { display:block; font-size:10px; color:#9ca59f; margin-bottom:13px; }
.pilot-form input, .pilot-form select { width:100%; margin-top:6px; background:#1a1f1b; border:1px solid rgba(255,255,255,.1); color:white; border-radius:9px; padding:12px; outline:none; }
.pilot-form input:focus, .pilot-form select:focus { border-color:rgba(216,255,102,.5); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form-message { min-height:16px; font-size:10px; color:#9cc99c; margin-top:10px; line-height:1.4; }

.site-footer { width:min(1220px, calc(100% - 40px)); margin:0 auto; min-height:130px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:24px; color:var(--muted); font-size:11px; }
.site-footer > div:last-child { display:flex; gap:18px; }
.site-footer a:hover { color:var(--text); }

@media (max-width: 1060px) {
  .section-grid, .split-header, .calculator-grid, .integration-section, .pilot-card { grid-template-columns:1fr; }
  .hero { padding-top:36px; }
  .hero-demo-wrap { max-width:620px; }
  .split-header { gap:15px; }
  .split-header p { justify-self:start; }
  .flow-grid { grid-template-columns:1fr 1fr; }
  .flow-arrow { display:none; }
  .partner-principles { grid-template-columns:repeat(2,1fr); }
  .metric-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 760px) {
  .site-header { width:min(100% - 28px, 1220px); }
  .top-nav { display:none; }
  .site-header .button { display:none; }
  .hero, .section, .site-footer { width:min(100% - 28px, 1220px); }
  .hero { padding:28px 0 36px; }
  .section-grid { gap:45px; }
  .hero h1 { font-size:54px; }
  .hero-lede { font-size:16px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-proof { grid-template-columns:1fr; }
  .hero-proof > div { display:grid; grid-template-columns:140px 1fr; gap:12px; }
  .demo-shell { padding:10px; border-radius:22px; }
  .provider-picker { grid-template-columns:1fr; }
  .provider-picker select { grid-row:auto; grid-column:auto; width:100%; }
  .challenge-card { padding:13px; }
  .creative-frame { height:200px; }
  .creative-copy strong { font-size:25px; }
  .challenge-actions { flex-direction:column; align-items:stretch; }
  .challenge-footer { flex-direction:column; }
  .logo-strip { flex-wrap:wrap; gap:10px; }
  .section { padding:82px 0; }
  .value-grid, .security-grid, .partner-principles { grid-template-columns:1fr; }
  .flow-grid { grid-template-columns:1fr; }
  .result-breakdown { grid-template-columns:1fr; }
  .dashboard-shell { grid-template-columns:1fr; }
  .dashboard-sidebar { flex-direction:row; flex-wrap:wrap; gap:5px; padding:14px; }
  .dashboard-brand { width:100%; margin:0 0 7px; }
  .dash-tab { margin:0; }
  .sidebar-note { display:none; }
  .dashboard-main { padding:18px; }
  .metric-grid, .publisher-policy-grid { grid-template-columns:1fr; }
  .campaign-row { grid-template-columns:70px 1fr; }
  .campaign-row .button { grid-column:1 / -1; }
  .integration-copy h2 { font-size:39px; }
  .pilot-card { padding:28px 20px; gap:30px; }
  .pilot-card h2 { font-size:40px; }
  .form-row { grid-template-columns:1fr; }
  .site-footer { flex-direction:column; align-items:flex-start; padding:30px 0; }
}

/* Ramp concept creative: keep the slide path clear of the ad copy. */
.creative-brand { font-size:25px; letter-spacing:-.06em; top:12px; }
.creative-copy { top:52px; bottom:auto; max-width:52%; }
.creative-copy strong { font-size:24px; line-height:1.02; }
.creative-copy p { font-size:10px; max-width:180px; }
.creative-art { top:12%; height:56%; width:39%; opacity:1; }
.creative-puzzle-target, .creative-puzzle-piece { top:auto; bottom:20px; }
.creative-puzzle-piece { background:var(--campaign-accent); color:#172019; }
.creative-puzzle-piece:before { content:"ramp"; width:auto; height:auto; background:none; bottom:auto; transform:none; box-shadow:none; font-weight:800; font-size:18px; letter-spacing:-.06em; }
.creative-puzzle-piece span { display:none; }
@media(max-width:400px) { .creative-copy strong { font-size:20px; } .creative-copy p { font-size:9px; } .creative-art { right:4%; width:36%; } }
.creative-frame { min-height:250px; }

/* Search-friendly explanatory content and accessible navigation. */
.skip-link { position:fixed; left:16px; top:-80px; z-index:100; background:var(--lime); color:#111; padding:14px 20px; border-radius:8px; }
.skip-link:focus { top:16px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:2px solid var(--lime); outline-offset:5px; }
.seo-intro { max-width:880px; }
.seo-intro h2, .faq-section h2, #audiences h2 { font-size:clamp(30px,4vw,48px); letter-spacing:-.035em; line-height:1.1; margin:16px 0 24px; }
.seo-intro p { color:var(--muted); font-size:17px; line-height:1.75; }
.seo-intro a, .audience-grid a { color:var(--lime); text-decoration:underline; text-underline-offset:4px; }
.preview-note { border-left:2px solid var(--lime); padding:12px 20px; font-size:13px!important; background:rgba(216,255,102,.035); }
.audience-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.audience-grid article { padding:28px; border:1px solid var(--line); border-radius:20px; background:var(--panel); }
.audience-grid h3 { font-size:24px; letter-spacing:-.025em; line-height:1.2; }
.audience-grid p { color:var(--muted); font-size:14px; line-height:1.7; }
.audience-grid a { font-size:13px; }
.faq-section { max-width:940px; }
.faq-list details { padding:22px 0; border-bottom:1px solid var(--line); }
.faq-list summary { font-size:18px; font-weight:650; cursor:pointer; line-height:1.5; }
.faq-list p { color:var(--muted); line-height:1.75; max-width:800px; margin-bottom:0; }
@media(max-width:760px) { .audience-grid { grid-template-columns:1fr; } .site-footer { flex-wrap:wrap; padding:24px 0; } .site-footer > div:last-child { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none!important; animation:none!important; } }
.honeypot{position:absolute;left:-10000px}.lead-consent{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px;line-height:1.5;font-size:12px!important;margin:18px 0}.lead-consent input{width:17px!important;height:17px;margin-top:2px;accent-color:var(--lime)}#earlyLeadForm{display:grid;gap:14px}

/* The preview and hands-on demo share the same verification states. */
.shield-icon { flex-shrink:0; transition:background .25s, color .25s; }
.shield-icon svg { width:100%; height:100%; }
.verification-ring { stroke:currentColor; stroke-width:2; opacity:.18; }
.verification-check { stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:26; stroke-dashoffset:0; }
.preview-controls { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px 12px; margin-top:8px; }
.preview-controls > span { font-size:10px; color:#646e64; }
.preview-button { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 4px; border:0; background:none; color:#344334; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.preview-button:hover { color:#151f15; text-decoration:underline; text-underline-offset:3px; }
.preview-button:disabled { opacity:.5; cursor:wait; text-decoration:none; }
.challenge-card :focus-visible { outline:2px solid #2e7b38; outline-offset:3px; }
.slider-area:has(input:focus-visible) { outline:2px solid #2e7b38; outline-offset:3px; }
.verification-badge { position:absolute; top:14px; right:12px; z-index:9; padding:7px 10px; border-radius:99px; background:#d5ff63; color:#172019; font-size:10px; font-weight:800; opacity:0; visibility:hidden; transform:translateY(5px); transition:opacity .25s, transform .25s, visibility .25s; }
.challenge-card[data-phase="previewing"] .slider-piece,
.challenge-card[data-phase="previewing"] .creative-puzzle-piece { transition:background .2s, box-shadow .2s; }
.challenge-card[data-phase="verifying"] .shield-icon { color:#39702d; }
.challenge-card[data-phase="verifying"] .verification-check { opacity:0; }
.challenge-card[data-phase="verifying"] .verification-ring { opacity:1; stroke-dasharray:70 31; transform-origin:center; animation:verification-spin .8s linear infinite; }
.challenge-card[data-phase="verified"] .shield-icon { color:#fff; background:#2e7b38; animation:verification-pop .45s ease-out both; }
.challenge-card[data-phase="verified"] .verification-check { animation:verification-draw .4s ease-out both; }
.challenge-card[data-phase="verified"] .verification-badge { opacity:1; visibility:visible; transform:translateY(0); }
.challenge-card[data-phase="verified"] .creative-puzzle-piece { transform:scale(1); animation:verification-lock .55s ease-out; }
.challenge-card[data-phase="verified"] .creative-puzzle-target { border-style:solid; }
.challenge-card[data-phase="verified"] .slider-area { background:#d9edcf; }
.challenge-card[data-phase="verified"] .target-zone { border-color:transparent; }
.challenge-card[data-phase="verified"] .creative-frame::after { content:""; position:absolute; inset:0; z-index:10; pointer-events:none; background:linear-gradient(110deg,transparent 30%,rgba(228,242,34,.18) 50%,transparent 70%); animation:verification-sweep .9s ease-out both; }
@keyframes verification-spin { to { transform:rotate(360deg); } }
@keyframes verification-pop { 0% { transform:scale(.8); } 60% { transform:scale(1.12); } 100% { transform:scale(1); } }
@keyframes verification-draw { from { stroke-dashoffset:26; } to { stroke-dashoffset:0; } }
@keyframes verification-lock { 0% { box-shadow:0 0 0 0 rgba(213,255,99,.65); } 100% { box-shadow:0 0 0 16px rgba(213,255,99,0); } }
@keyframes verification-sweep { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
@media(prefers-reduced-motion:reduce) {
  .challenge-card[data-phase="verified"] .creative-frame::after { display:none; }
}