/* ═══════════════════════════════════════════════════════════════════════
Compaytence x AdRevival — page layer
This page is NOT the checkout-champ-lander layout. It takes adrevival.io's
composition and expresses it in our palette:
THEIRS OURS
dark the whole way down, no light bands the warm dark ground (hue 65.6)
indigo #4B4BE9 section bloom at 15% the same bloom on OUR blue ladder
centered hero + platform row -
two-tone headline (bright / muted tail) -
4px controls 14px cards
metal-gradient pricing tiers Instrument Serif figures on them
white fill CTA blue fill CTA, #061019 ink
The one deliberate deviation from the v2 system: display headings are set
in Archivo, not Instrument Serif. A serif display face is what made the
first draft read as the Checkout Champ page wearing a new logo. Instrument
Serif still carries every FIGURE on the page, which is where the system says
the signature actually lives.
═══════════════════════════════════════════════════════════════════════ */
/* This page is dark end to end, the way theirs is. It opts out of the
light theme rather than alternating bands. */
:root{
--nav-h:64px;
--ink-on-neon:#061019; /* 7.54:1 on #33A9FF. Never white on that fill. */
--r-ctl:4px; /* theirs */
--bloom:51,169,255; /* our blue, in their bloom role */
--sheen-a:.035;
/* The system's --t-xs is 10.88px. It carries the kicker, the hero note and
the step chips here, and 10.88px is under the readable floor at every
width — not only on a phone. Held at 12px and up. */
--t-xs:.75rem;
}
html{background:#0d0a08;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
background:#0d0a08;
color:var(--ink);
font-family:var(--face-text);
font-size:1rem;
line-height:var(--lh-body);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
.shell{width:min(1180px,calc(100% - var(--s4)*2));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--mark-solid);
color:var(--ink-on-neon);padding:12px 18px;border-radius:var(--r-ctl);z-index:200}
.skip:focus{left:12px;top:12px}
:where(a,button,summary):focus-visible{
outline:2px solid var(--mark-solid);outline-offset:3px;border-radius:2px}
/* ── The bloom system ──────────────────────────────────────────────────
Their whole section rhythm is one device: a colored wash bleeding from
the top or the bottom edge, alternating down the page, over a constant
dark ground. No hard seams, no light/dark flip. */
.sec{position:relative;padding-block:var(--s7)}
.sec--tight{padding-block:var(--s6)}
.sec--open{padding-block:var(--s8)}
.sec::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
.sec--bloom::before{
background:linear-gradient(rgba(var(--bloom),.13),rgba(var(--bloom),0) 52%)}
.sec--bloom-up::before{
background:linear-gradient(rgba(var(--bloom),0) 48%,rgba(var(--bloom),.13))}
.sec > *{position:relative;z-index:1}
/* ── Section heads, with their two-tone device ─────────────────────────
"Our unmatched pricing. Suitable for all budgets."
The tail of the sentence drops to a muted tone. It is the single most
recognizable typographic move on adrevival.io. */
.head{max-width:44rem}
.head--mid{max-width:46rem;margin-inline:auto;text-align:center}
.kicker{display:inline-block;font-size:var(--t-xs);letter-spacing:.14em;
text-transform:uppercase;color:var(--mark-solid);font-weight:600;
margin-bottom:var(--s2)}
h1,h2,h3{font-family:var(--face-text);color:var(--ink);margin:0;
text-wrap:balance;font-weight:600}
h2{font-size:clamp(2rem,4vw,3.1rem);line-height:1.08;letter-spacing:-.005em}
h3{font-size:var(--t-lg);line-height:1.25}
.mute{color:var(--graphite)} /* the tail of a two-tone headline */
.head p{color:var(--ink-soft);font-size:1.0625rem;margin-top:var(--s3);
max-width:40rem}
.head--mid p{margin-inline:auto}
/* ── Buttons ───────────────────────────────────────────────────────────
Theirs are 4px, 12/24, weight 500. The fill is ours. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
min-height:44px;padding:12px 24px;border-radius:var(--r-ctl);
font-family:var(--face-text);font-size:1rem;font-weight:600;
text-decoration:none;border:1px solid transparent;cursor:pointer;
transition:transform .2s var(--ease),background .2s var(--ease),
border-color .2s var(--ease),box-shadow .2s var(--ease)}
.btn--primary{background:var(--mark-solid);color:var(--ink-on-neon)}
.btn--primary:hover{transform:translateY(-1px);
box-shadow:0 8px 24px rgba(var(--bloom),.28)}
.btn--ghost{background:rgba(233,230,225,.06);color:var(--ink);
border-color:rgba(233,230,225,.18)}
.btn--ghost:hover{background:rgba(233,230,225,.11);
border-color:rgba(233,230,225,.3)}
.btn--sm{min-height:44px;padding:8px 16px;font-size:var(--t-sm)}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
/* ── Announcement bar ──────────────────────────────────────────────────
Theirs is a cyan-to-blue gradient strip above the nav. Ours walks the
blue ladder instead of introducing a second hue. */
.announce{background:linear-gradient(90deg,var(--blue-40),var(--blue-60));
color:var(--ink-on-neon);text-align:center;font-size:var(--t-sm);
font-weight:600;padding:0 var(--s4);position:relative;z-index:60}
/* The whole bar is one control, so it owes the full 44px rather than the
28px a thin strip wants to be. Block rather than inline-flex: as a flex
container the trailing arrow is a sibling of the text, so when the line
wraps on a phone the arrow stays pinned to the right of line one instead
of following the sentence. As a block it flows with the words. */
.announce a{color:inherit;text-decoration:none;display:block;text-align:center;
min-height:44px;padding-block:11px;box-sizing:border-box;line-height:1.45}
.announce a:hover{text-decoration:underline}
.announce em{font-style:italic;font-family:var(--face-display);
font-size:1.08em;font-weight:400}
/* ── Nav ───────────────────────────────────────────────────────────────*/
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);
display:flex;align-items:center;gap:var(--s4);padding:0 var(--s4);
background:rgba(13,10,8,.82);backdrop-filter:blur(14px) saturate(1.3);
border-bottom:1px solid rgba(var(--rule-c),.1)}
.nav-brand{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}
.nav-brand .logo{height:19px;width:auto;display:block}
/* .wordmark paints the mark from brand.css; aspect-ratio gives it width. */
.nav-brand .wordmark{height:19px}
.nav-x{font-family:var(--face-display);font-size:1rem;color:var(--graphite);
line-height:1}
.nav-links{display:none;align-items:center;gap:var(--s4);margin-left:auto}
.nav-links a{font-size:var(--t-sm);font-weight:500;color:var(--ink-soft);
text-decoration:none;white-space:nowrap;
/* a nav link is a standalone control and owes the full 44px */
display:inline-flex;align-items:center;min-height:44px;
transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
@media (min-width:1060px){
.nav-links{display:flex}
.nav-right{margin-left:0}
}
/* ── Hero ──────────────────────────────────────────────────────────────
Centered, the way theirs is. The first draft used a split hero with a
routing diagram, which is the Checkout Champ page's shape. */
.hero{position:relative;text-align:center;
padding-top:calc(var(--s8) + 10px);padding-bottom:var(--s7);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(62% 48% at 50% -4%,rgba(var(--bloom),.28),transparent 70%),
radial-gradient(38% 28% at 50% 6%,rgba(var(--bloom),.14),transparent 72%)}
.hero > *{position:relative;z-index:1}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;
padding:6px 14px;border-radius:999px;
border:1px solid rgba(var(--rule-c),.16);background:rgba(var(--rule-c),.05);
font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
color:var(--graphite);margin-bottom:var(--s4)}
.hero h1{font-size:clamp(1.85rem,5.6vw,4rem);line-height:1.06;
letter-spacing:-.012em;font-weight:600;max-width:26ch;margin-inline:auto}
.hero-sub{color:var(--ink-soft);font-size:clamp(1rem,1.5vw,1.1875rem);
max-width:47rem;margin:var(--s3) auto 0}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;
margin-top:var(--s5)}
.hero-note{font-size:var(--t-xs);color:var(--graphite);margin-top:var(--s3);
max-width:44ch;margin-inline:auto}
/* Platform row — their scrolling logo strip, rebuilt. Two identical groups
inside one track; translating the track -50% lands group 2 exactly where
group 1 started, so the loop has no seam. It also solves seven chips
wrapping badly on a phone. */
.plats{margin-top:var(--s6);padding-top:var(--s5);
border-top:1px solid rgba(var(--rule-c),.09);
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* The gap lives INSIDE each group as a trailing pad, and the track has none.
With a gap on the track the width is 2*group + ONE gap, so -50% lands half
a gap short and the loop visibly stutters once per cycle. Trailing pad
makes the track exactly 2*group, and -50% is exactly one group. */
.plats-track{display:flex;gap:0;width:max-content;
animation:marquee 34s linear infinite}
.plats-group{display:flex;gap:var(--s5);padding-right:var(--s5);flex:0 0 auto}
.plat{display:inline-flex;align-items:center;gap:9px;font-size:var(--t-sm);
font-weight:500;color:var(--ink-soft);white-space:nowrap}
/* One square box for all seven. Their viewBoxes range from 22x22 to 224x175,
so the SVG's default preserveAspectRatio does the centering and a wide mark
simply uses less of the box's height. Monochrome via currentColor, the way
AdRevival renders them. */
.plat-logo{width:19px;height:19px;flex:0 0 auto;fill:currentColor;
color:var(--ink);opacity:.92}
/* Optical sizing. At one shared 19px box the painted areas ran 176px^2 (TikTok)
to 354px^2 (Outbrain) — a 2x spread, and visibly uneven in a row. These boxes
are the measured half-correction toward equal painted area: full correction
pushed Meta to a 24px box, which is too wide a footprint for a mark that is
short. Re-measure with getBBox() on