/* AI Drop Thursdays · palette A "Night Drop". Sizes measured from the reference (SPEC.md).
   Desktop value = the reference's value; mobile value (≤700px) = its mobile override; clamp() bridges 700→1200. */
:root {
  --ink: #0B1226; --deep: #121C3D; --accent: #2F6BFF; --accent-ink: #1F4FD1; --hi: #3DE1FF;
  /* text on light surfaces: --accent-ink (6.8:1 on white). --cta amber is for button fills and dark surfaces only (1.8:1 on white). */
  --cta: #FFB23F; --cta-hi: #FFD08A; --cta-ink: #0B1226; --cta-wash: #FFF6EA;
  --paper: #F7F8FC; --card: #fff; --text: #151826; --soft: #5B6274;
  --shout: "Archivo", "Arial Black", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --marker: "Caveat", "Comic Sans MS", cursive;
  --glass-border: 2px solid rgba(255, 255, 255, .3);
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--card); color: var(--text); font-family: var(--body); line-height: 1.45; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2 { margin: 0; }
.row { max-width: 1170px; margin: 0 auto; padding: 0 20px; }
.center { text-align: center; }
.mt { margin-top: 15px; }
u { text-decoration-color: var(--cta); text-decoration-thickness: 3px; text-underline-offset: 3px; }

/* ---------- button (reference: 100% wide, 25px pad, gradient, 28px/600, sub 14px +9px, radius 8px) ---------- */
.btn { display: block; width: 100%; padding: 25px 16px; border: 0; border-radius: 8px; cursor: pointer;
  background: linear-gradient(var(--cta-hi) 0%, var(--cta) 100%); color: var(--cta-ink);
  font: 600 clamp(17px, 2.4vw, 28px)/1.2 var(--shout); text-align: center; text-decoration: none;
  box-shadow: 0 6px 18px rgba(255, 178, 63, .28); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255, 178, 63, .38); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn small { display: block; margin-top: 9px; font: 500 clamp(12px, 1.2vw, 14px)/1.3 var(--body); opacity: .85; }
.btn-step { display: inline-block; width: auto; padding: 20px 34px; font-size: 18px; font-weight: 700; margin-top: 20px; }
.btn-md { display: inline-block; width: auto; padding: 15px 30px; font-size: clamp(14px, 1.6vw, 20px); font-weight: 700; }
.btn-sm { display: inline-block; width: auto; padding: 15px 26px; font-size: 18px; margin-top: 10px; }
.btn-secondary { background: var(--card); border: 2px solid var(--cta); box-shadow: none; }

/* ---------- glass card (reference: radius 1rem, 2px white 30% border, 0 4px 30px 5% shadow) ---------- */
.glass { background: rgba(255, 255, 255, .92); border: var(--glass-border); border-radius: 1rem; box-shadow: 0 4px 30px rgba(11, 18, 38, .08); }

/* ---------- textured band (replaces the reference's background photo) ---------- */
.band-textured { background:
  linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.28)),
  repeating-linear-gradient(0deg, rgba(18,28,61,.04) 0 1px, transparent 1px 48px),
  repeating-linear-gradient(90deg, rgba(18,28,61,.04) 0 1px, transparent 1px 48px),
  linear-gradient(180deg, #EEF1F8 0%, var(--paper) 100%); }

/* ---------- registration: date bar (row 1450, right col tinted 17%, 26px/800 + 1.28rem/400) ---------- */
.datebar { background: var(--ink); color: #fff; }
.datebar-row { max-width: 1450px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0; }
.datebar-logo { padding: 10px 25px; }
.datebar-logo .logo { width: 162.72px; height: auto; display: block; border-radius: 4px; }
.datebar-when { padding: 15px 25px; background: rgba(255, 255, 255, .17); text-align: right; }
.db-1 { font: 800 26px/1.2 var(--shout); letter-spacing: -.02rem; }
.db-ico { color: var(--cta); margin-right: 17px; font-size: 24px; }
.db-2 { font-size: 1.28rem; font-weight: 400; }

/* ---------- registration: hero (row 1300, col-5 photo / col-7 card, padding-bottom 70px) ---------- */
.hero { padding: 40px 0 70px; }
.hero-row { max-width: 1300px; display: grid; grid-template-columns: 5fr 7fr; gap: 30px; align-items: start; }
.hero-media { position: sticky; top: 20px; }
.hero-card { padding: 25px 25px 20px; text-align: center; }
.live-label { font: 800 1.6rem/1.25 var(--shout); letter-spacing: .22rem; color: var(--ink); }
.live-pill { display: inline-block; background: var(--accent-ink); color: #fff; padding: .2em .6em; border-radius: 999px; font-weight: 800; font-size: .9em; letter-spacing: .08em; }
.live-pill::before { content: "● "; }
.h-quote { margin-top: 10px; font: 800 clamp(19px, 2.6vw, 2.2rem)/1.15 var(--shout); letter-spacing: -.06rem; color: var(--ink); }
.h-shout { font: italic 900 clamp(32px, 4.6vw, 3.79rem)/1.02 var(--shout); letter-spacing: -.06rem; color: var(--accent); text-transform: uppercase; margin-top: 4px; }
.arrow-divider { display: flex; align-items: center; gap: 12px; width: min(400.665px, 100%); margin: 10px auto 0; color: rgba(18, 28, 61, .35); }
.arrow-divider span { flex: 1; height: 2px; background: currentColor; }
.arrow-divider i { font-style: normal; width: 34px; height: 34px; border: 2px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.hero-para { padding: 10px 0; font-size: clamp(16px, 2vw, 24px); color: var(--text); }
.hero-card .btn { margin-top: 5px; }
.countdown-row { display: flex; justify-content: center; align-items: center; gap: 22px; padding-top: 10px; flex-wrap: wrap; }
.cd-label { font-size: clamp(16px, 2vw, 24px); font-weight: 600; }
.countdown { display: flex; align-items: flex-start; gap: 8px; }
.countdown span { display: flex; flex-direction: column; align-items: center; min-width: 2.4em; }
.countdown b { font: 800 2.24rem/1 var(--shout); color: var(--ink); font-variant-numeric: tabular-nums; }
.countdown i { font-style: normal; font-size: .8rem; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin-top: 4px; }
.countdown em { font: 800 2.24rem/1 var(--shout); font-style: normal; color: var(--ink); }
.why-box { margin-top: 5px; padding: 18px 20px; border: 2px dashed var(--accent); background: rgba(47, 107, 255, .06); border-radius: 4px; font-size: 18px; text-align: center; }
.why-box p + p { margin-top: 14px; }

/* ---------- apps marquee (lifted from get.monetizemarketing.com .v2-marquee, re-tokened) ---------- */
.apps-band { padding: 10px 0 56px; }
.apps-row { max-width: 1300px; }
.apps-label { text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); margin-bottom: 14px; }
.marquee { background: rgba(11, 18, 38, .92); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: 20px; box-shadow: 0 34px 70px -26px rgba(47, 107, 255, .55); padding: 20px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent); }
.marquee .track { display: flex; align-items: center; gap: 64px; width: max-content; animation: adtmarq 52s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee img { height: 34px; width: auto; flex: none; display: block; }
@keyframes adtmarq { to { transform: translateX(calc(-50% - 32px)); } }

/* ---------- registration: build band (row 950; 2.41rem/600 · 5.83rem/900 · 2.51rem/600) ---------- */
.build-band { text-align: center; padding: 0 0 20px; }
.build-row { max-width: 950px; }
.band-1 { font: 600 clamp(18px, 3vw, 2.41rem)/1.2 var(--shout); letter-spacing: -.06rem; color: var(--text); }
.band-2 { font: italic 900 clamp(32px, 7vw, 5.83rem)/1 var(--shout); letter-spacing: -.06rem; color: var(--accent); text-transform: uppercase; }
.band-3 { font: 600 clamp(18px, 3vw, 2.51rem)/1.2 var(--shout); letter-spacing: -.06rem; color: var(--text); margin-top: 5px; }
.shot-row { max-width: 1000px; margin-top: 20px; }
.build-cta { max-width: 760px; margin-top: 10px; position: relative; }
/* bundle slot on white: image + typeset floor line + 3 marker callouts (copy.json) */
.bundle { position: relative; margin: 0; padding: 64px 0 0; background: #fff; }
.bundle img { width: 100%; height: auto; display: block; border-radius: 8px; }
.floor-line { margin-top: 12px; text-align: center; font: 600 13px/1 var(--body); letter-spacing: .32em; text-transform: uppercase;
  color: var(--soft); text-shadow: 0 1px 0 #fff, 0 -1px 0 rgba(11, 18, 38, .12); border-top: 1px solid rgba(11, 18, 38, .1); padding: 12px 0 34px; }
/* callouts sit in the white margin (above / below the image) so they read on any bundle art */
.callout { position: absolute; display: flex; align-items: flex-start; gap: 2px; font: 700 clamp(18px, 2.4vw, 28px)/1 var(--marker); color: var(--accent-ink); pointer-events: none; }
.callout svg { width: clamp(54px, 7vw, 90px); height: auto; fill: none; stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.callout b { font-weight: 700; white-space: nowrap; }
.callout-1 { left: 6%; top: 4px; flex-direction: row-reverse; }
.callout-1 b { transform: rotate(-5deg); }
.callout-2 { right: 6%; top: 4px; }
.callout-2 b { transform: rotate(4deg); }
.callout-3 { left: 3%; bottom: 0; align-items: flex-end; flex-direction: row-reverse; }
.callout-3 b { transform: rotate(-3deg); }

/* ---------- registration: WHEN / WHERE / WHY (row 1300, 3 × col-4, 35px 25px, 3px CTA-31% border) ---------- */
.www { padding: 40px 0 60px; }
.www-row { max-width: 1300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; }
.www-card { padding: 35px 25px; border: 3px solid rgba(255, 178, 63, .31); border-radius: 1rem; background: rgba(255, 255, 255, .2); box-shadow: 0 4px 30px rgba(11, 18, 38, .05); }
.www-card h2 { font: 800 clamp(1.75rem, 3.4vw, 3.01rem)/1.1 var(--shout); letter-spacing: -.06rem; color: var(--ink); padding-bottom: 5px; }
.www-card hr { width: 23%; margin: 9px auto 14px 0; border: 0; border-top: 3px solid rgba(255, 178, 63, .55); }
.www-card p { font-size: 20px; }
.www-cta { max-width: 760px; margin-top: 20px; }

/* ---------- footer (bg ink, 45px 0 60px, logo 200px, Inter 14px white) ---------- */
.footer { background: var(--ink); color: #fff; text-align: center; padding: 45px 0 60px; font-size: 14px; }
.footer-logo .logo { width: 200px; height: auto; display: block; margin: 0 auto 20px; }
.footer a { color: #fff; }
.footer .legal-links { margin-top: 8px; }
.footer .social-links { margin-top: 8px; font-size: 13px; opacity: .85; }
.footer .fine { max-width: 720px; margin: 14px auto 0; font-size: 12px; opacity: .7; }

/* ---------- modal (overlay 80%, inner 895.2px, radius 17px, glow 85px CTA 20%, panel ink, row 767) ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 16px; }
.modal:target, .modal.is-open { display: flex; }
.modal-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .8); }
.modal-panel { position: relative; width: min(895.2px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--ink); color: #fff;
  border-radius: 17px; padding: 20px 64px 45px; box-shadow: 0 0 85px rgba(255, 178, 63, .2); text-align: center; }
.modal-close { position: absolute; top: 10px; right: 16px; color: #fff; font-size: 30px; text-decoration: none; line-height: 1; }
.m-1 { margin-top: 5px; padding: 0 40px; font: 600 clamp(1.28rem, 2.2vw, 1.74rem)/1.2 var(--shout); letter-spacing: -.06rem; }
.m-2 { margin: 6px 0 14px; font: 700 clamp(2.09rem, 3.6vw, 2.87rem)/1.1 var(--shout); letter-spacing: -.06rem; }
.reg-form { max-width: 767px; margin: 0 auto; }
.field { display: block; text-align: left; margin-top: 12px; }
.field span { display: block; font-size: 14px; margin-bottom: 6px; opacity: .85; }
.field input { width: 100%; padding: 23px; border: 2px solid rgba(255, 178, 63, .47); border-radius: 8px; background: #fff; color: var(--text); font: 400 20px var(--body); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field input:focus { outline: 3px solid var(--hi); outline-offset: 1px; }
.reg-form .btn { margin-top: 15px; }
.form-error { margin-top: 10px; color: var(--cta); font-weight: 600; }
.privacy-note { margin-top: 14px; font-size: 13px; opacity: .75; }
.privacy-note a { color: #fff; }

/* ---------- logo bar (bg ink, row padding 20px 10px, logo 163px) ---------- */
.datebar { border-bottom: 7px solid var(--accent); }
/* Vimeo-ready player: poster frame (our art + play button + chip + control bar) until the drop has an id */
.player { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border-radius: 12px; overflow: hidden; box-shadow: 0 0 58px rgba(0, 2, 4, .31); container-type: inline-size; }
.player-poster { position: absolute; inset: 0; }
.player-poster[hidden] { display: none; }
.player-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.player-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 18, 38, .15) 0%, rgba(11, 18, 38, .05) 45%, rgba(11, 18, 38, .75) 100%); }
.player-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: clamp(56px, 16cqi, 96px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(11, 18, 38, .72); border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
.player-play::before { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #fff; }
.player-chip { position: absolute; left: 12px; top: 12px; z-index: 2; background: var(--cta); color: var(--cta-ink); font: 800 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; }
.player-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.player-bar i { display: block; font-style: normal; color: #fff; font: 600 12px/1 var(--body); }
.player-bar .pb-play { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.player-bar .pb-track { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.player-bar .pb-track b { display: block; width: 0; height: 100%; background: var(--hi); }
.player-bar .pb-vol, .player-bar .pb-full { width: 14px; height: 12px; border: 2px solid #fff; border-radius: 2px; }
.player-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- upsell ---------- */
.congrats { padding: 30px 0 210px; text-align: center; }
.narrow-1170 { max-width: 1170px; }
.h-congrats { font: 800 clamp(28px, 5vw, 62px)/1.3 var(--shout); color: var(--ink); }
.h-seat { padding: 10px 0; font: 700 clamp(18px, 2.6vw, 2rem)/1.2 var(--shout); color: var(--text); }
.dotted { border: 0; border-top: 4px dotted var(--deep); margin: 15px 0 0; }
.next-steps { max-width: 1200px; margin: 20px auto 0; display: grid; grid-template-columns: 7fr 5fr; gap: 20px; align-items: center; text-align: left; }
.ns-text { font: 600 clamp(18px, 2vw, 1.6rem)/1.2 var(--body); color: var(--text); }
.timer-card { background: #fff; border-radius: 12px; padding: 14px 15px; box-shadow: 0 0 57px rgba(11, 18, 38, .12); display: flex; justify-content: center; }
.video-sec { padding: 0 0 50px; }
.video-caption { margin-top: -180px; position: relative; background: var(--deep); color: #f3f3f3; padding: 10px 15px; font-size: clamp(14px, 1.6vw, 18px); line-height: 1.3; text-align: center; border-radius: 8px 8px 0 0; }
.offer-sec { padding: 0 0 60px; }
.offer-card { display: grid; grid-template-columns: 7fr 5fr; gap: 20px; align-items: center; padding: 30px 35px; }
.offer-h { font: 700 clamp(1.48rem, 4.6vw, 62px)/1.1 var(--shout); color: var(--ink); padding: 10px 0; margin-top: 10px; text-align: center; }
.offer-h u { color: var(--accent-ink); text-decoration-color: var(--cta); }
.offer-p { font-size: 17px; margin: 5px 0 14px; text-align: center; }
.no-thanks { display: block; padding: 10px 0; margin-top: 5px; font-size: clamp(12px, 1.4vw, 17px); color: var(--accent-ink); text-align: center; }
.offer-art { text-align: center; }
.offer-art .mascot { width: 72%; max-width: 280px; height: auto; }

/* ---------- thank-you + replay ---------- */
.ty-hero { padding: 30px 0 140px; text-align: center; }
.h-big { font: italic 900 clamp(28px, 6vw, 4.84rem)/1.05 var(--shout); letter-spacing: -.06rem; color: var(--accent); text-transform: uppercase; }
.h-sub { font: 600 clamp(18px, 3vw, 2.45rem)/1.2 var(--shout); letter-spacing: -.06rem; color: var(--text); margin: 5px 0 20px; }
.h-sub-lg { font-size: clamp(18px, 3.4vw, 2.88rem); }
.important-strip { margin-top: 20px; background: var(--cta-wash); border: 2px dashed rgba(255, 178, 63, .47); }
.important-strip p { padding: 10px 16px; font-size: clamp(16px, 2vw, 25px); }
.steps { padding-bottom: 49px; }
.step-card { max-width: 1180px; display: grid; grid-template-columns: 4fr 8fr; gap: 30px; align-items: start; background: #fff; border-radius: 16px;
  padding: 30px 25px; margin-top: 25px; box-shadow: 0 0 59px rgba(11, 18, 38, .12); }
.steps .step-card:first-child { margin-top: -120px; position: relative; } /* ≥ 20px clear of the IMPORTANT strip (hero padding-bottom 140px) */
.steps-replay .step-card:first-child { margin-top: -100px; }
.step-tile { background: var(--deep); border-radius: 8px; display: grid; place-items: center; padding: 35px 10px; }
.step-tile svg { width: 6.43rem; height: 6.43rem; }
.step-tile-art { padding: 16px 10px; }
.step-tile-art .mascot { width: 62%; max-width: 200px; height: auto; }
.step-label { font: 800 1.6rem/1.25 var(--shout); letter-spacing: .22rem; color: var(--accent-ink); padding-bottom: 5px; }
.step-h { font: 600 clamp(1.21rem, 2.8vw, 2.48rem)/1.2 var(--shout); letter-spacing: -.06rem; color: var(--text); padding-bottom: 5px; }
.step-body > p { font-size: 20px; margin-top: 5px; }
.pill-box { margin-top: 20px !important; padding: 10px 25px; background: rgba(255, 178, 63, .12); font-size: clamp(16px, 2vw, 25px) !important; font-weight: 500; border-radius: 4px; }
.cal-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.cal { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; border: 2px solid var(--deep); background: #fff; color: var(--deep); font: 600 15px/1 var(--body); text-decoration: none; }
.cal:hover { background: var(--paper); }
.cal-ico { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 6px; color: #fff; font: 800 11px/1 var(--body); }
.cal-ico svg { width: 16px; height: 16px; }
.cal-google .cal-ico { background: #1A73E8; }
.cal-apple .cal-ico { background: #1D1D1F; }
.cal-outlook .cal-ico { background: #0A5BC4; }
.cal-office .cal-ico { background: #C43E1C; }
.cal-yahoo .cal-ico { background: #5F01D1; }
.replay-media { margin-top: 10px; }
.replay-media .player { width: 82%; margin: 20px auto 0; }
.replay-note { font-size: clamp(16px, 2vw, 22px); margin-bottom: 14px; }
.replay-timer { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; margin: 14px 0 6px; }
.replay-state[hidden], [data-pending][hidden], [data-f-href][hidden], [data-next-line][hidden] { display: none; }
.next-line { margin-top: 18px; font-weight: 600; color: var(--soft); }
/* "Drop #NNN" typeset from drop.json onto the crate's blank plate (plate centre ≈ 47.6% / 80% of the image) */
.drop-badge { position: absolute; z-index: 2; left: 47.6%; top: 80%; transform: translate(-50%, -50%); color: #fff; font: italic 900 2.1cqi/1 var(--shout);
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 0 6px rgba(61, 225, 255, .55); }
.replay-tool { margin-top: 20px; }
.pending { font-size: 18px; color: var(--soft); }
.bonus-strip { width: 54%; margin: 20px auto 0; background: var(--cta-wash); border: 2px dashed rgba(255, 178, 63, .47); padding: 10px 16px 16px; }
.bonus-strip > p:first-child { font-size: clamp(16px, 2vw, 25px); padding: 10px 0; }

/* ---------- mobile (reference breakpoint: max-width 700px) ---------- */
@media (max-width: 700px) {
  .row { padding: 0 16px; }
  .datebar-row { grid-template-columns: 1fr; }
  .datebar-logo { padding: 12px 16px; text-align: center; }
  .datebar-logo .logo { margin: 0 auto; width: 163px; }
  .datebar-when { text-align: center; }
  .db-1 { font-size: 20px; letter-spacing: .08rem; }
  .db-ico { font-size: 18px; margin-right: 10px; }
  .db-2 { font-size: 1.05rem; }
  .hero { padding: 0 0 40px; }
  .hero-row { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .hero-media { position: static; padding: 16px 16px 0; }
  .hero-card { margin: 16px 16px 0; position: relative; padding: 20px 16px; }
  .live-label { font-size: .99rem; letter-spacing: .19rem; }
  .h-quote { letter-spacing: 0; }
  .countdown-row { flex-direction: column; gap: 8px; }
  .countdown b, .countdown em { font-size: 1.9rem; }
  .countdown i { font-size: .76rem; }
  .why-box { font-size: 16px; padding: 14px; }
  .apps-band { padding-bottom: 40px; }
  .build-cta { margin-top: 10px; }
  .bundle { padding-top: 52px; }
  .callout { font-size: 17px; }
  .callout svg { width: 36px; }
  .callout-1 { left: 0; }
  .callout-2 { right: 0; }
  .callout-3 { position: static; justify-content: center; margin-top: 6px; }
  .floor-line { font-size: 10px; letter-spacing: .22em; padding-bottom: 8px; }
  .www-row { grid-template-columns: 1fr; gap: 20px; }
  .www-card p { font-size: 18px; }
  .modal-panel { padding: 20px 16px 30px; }
  .field input { padding: 16px; font-size: 16px; }
  .congrats { padding-bottom: 160px; }
  .next-steps { grid-template-columns: 1fr; text-align: center; }
  .video-caption { margin-top: -130px; }
  .offer-card { grid-template-columns: 1fr; padding: 20px 16px; }
  .offer-p { font-size: 15px; }
  .offer-art .mascot { width: 140px; }
  .ty-hero { padding-bottom: 120px; }
  .steps .step-card:first-child { margin-top: -100px; }
  .step-card { grid-template-columns: 1fr; gap: 16px; padding: 20px 16px; }
  .step-tile { padding: 18px; }
  .step-tile svg { width: 3.44rem; height: 3.44rem; }
  .step-tile-art .mascot { width: 110px; }
  .step-label { font-size: .99rem; letter-spacing: .19rem; }
  .step-body > p { font-size: 16px; }
  .btn-step { display: block; width: 100%; padding: 18px 12px; font-size: 17px; }
  .replay-media .player { width: 100%; }
  .bonus-strip { width: 100%; }
}
/* marquee small-screen step: same breakpoint and values as the source marquee (max-width 960px) */
@media (max-width: 960px) {
  .marquee .track { gap: 36px; animation-duration: 38s; }
  .marquee img { height: 26px; }
  @keyframes adtmarq { to { transform: translateX(calc(-50% - 18px)); } }
}

@media (prefers-reduced-motion: reduce) {
  .marquee .track { animation: none; }
  .btn { transition: none; }
}