/* Launch Media strategy call page, v6.

   v6 changes (Jason, 2026-10-29):
   - Headings are Title Case, not all caps. The uppercase transforms are gone from h1, h2,
     the eyebrow labels, the chips and the buttons, and the caps-era letter-spacing came
     down with them, because tracking that suits all caps makes Title Case look loose.
   - The accent is light blue, not green. Two blues do two jobs: --accent #0b5fa4 is the
     only one allowed under text (6.59:1 on white, 5.78:1 on its own wash, both past the
     4.5:1 Jason asked for), and the light blues --accent-wash, --accent-line and the dot
     ramp are decorative, so nothing readable ever sits on them. sc/80_blue_palette.py
     prints the measurements.
   - The green glow in the background gradient is now light blue as well.
   - Real client logos replace the placeholder marquee tiles, flattened to one ink tone.
   - A results grid of five real ad accounts replaces the placeholder testimonials, each
     stat sitting above the screenshot it was read off, with a zoom lightbox.

   Structure and spacing still follow infobridge.io/VSL minus the video, with the Amino
   Club bridge's light surface treatment: near-white page under soft radial glows, white
   cards, fully rounded trust pills with a coloured dot, dark ink text, ink pill CTAs. */
:root{
  /* surfaces */
  --bg:#f5f6f8;
  --surface:#fff;
  --rule:#dfe3e8;
  --rule-soft:#eceff3;

  /* text */
  --ink:#060612;
  --muted:#56616b;

  /* The one blue allowed under text. Measured, not picked by eye: 6.59:1 on white. */
  --accent:#0b5fa4;
  --accent-dark:#08497f;
  /* Light blues. Decorative only: backgrounds, hairlines and dots. */
  --accent-wash:#e8f1fb;
  --accent-line:#bcdcf8;

  /* soft glows, the Amino spec roles with the mint tint moved to light blue */
  --tint-blue:#e4f0fb;
  --tint-sky:#e3edfa;
  --tint-lav:#ece9fb;
  /* pill dots, one light blue family so the row reads as a set */
  --dot-1:#5aa7e6;
  --dot-2:#7fb8ee;
  --dot-3:#9ccbf5;
  --dot-4:#bcdcf8;

  --gold:#f2c14e;

  --r-xl:24px;
  --r-lg:16px;
  --r-md:12px;
  --display:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1080px;
  --gutter:clamp(18px,5vw,32px);
  --sec:clamp(54px,8vw,104px);
}
*,*::before,*::after{box-sizing:border-box}
/* .next and .back set a display, which would otherwise beat the hidden attribute */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;background:var(--bg)}

/* Three radial glows over the page. Fixed so the colour stays put while the page scrolls
   instead of banding at section seams. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 48% at 12% 6%, var(--tint-blue), transparent 72%),
    radial-gradient(62% 42% at 90% 14%, var(--tint-sky), transparent 72%),
    radial-gradient(72% 50% at 50% 100%, var(--tint-lav), transparent 72%),
    var(--bg)}

img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;z-index:30}
.skip:focus{left:12px;top:12px}

/* ---------- hero ---------- */
.hero{padding:clamp(30px,5vw,56px) var(--gutter) var(--sec);text-align:center}
.hero-inner{max-width:var(--wrap);margin:0 auto}

.logo{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--ink);
  margin:0 0 clamp(28px,5vw,48px)}
.mark{width:clamp(38px,7vw,48px);height:auto;flex:none}
/* The wordmark is the logo lockup, so it keeps the brand's own capitals. */
.logotype{font-family:var(--display);font-weight:800;font-style:italic;letter-spacing:.015em;
  font-size:clamp(1.15rem,3.4vw,1.55rem)}

/* Title Case now, so the size comes down a step: the same box holds more letterforms
   once they are not all cap height. */
h1{margin:0 auto;font-family:var(--display);font-weight:800;font-style:italic;
  line-height:1.06;letter-spacing:-.022em;
  font-size:clamp(1.95rem,5.5vw,3.25rem);text-wrap:balance;color:var(--ink)}
/* Two deliberate lines. Each one still balances internally when it has to wrap,
   which is what keeps a single word off the last line at 390. */
h1 .l1,h1 .l2{display:block;text-wrap:balance}
h1 em{font-style:italic;color:var(--accent)}

.kicker{margin:clamp(18px,3vw,26px) auto 0;max-width:42ch;text-wrap:balance;
  font-size:clamp(1.02rem,2.5vw,1.26rem);line-height:1.45;letter-spacing:0;
  color:var(--muted);font-weight:400;text-transform:none;font-family:var(--body)}
.kicker b{color:var(--ink);font-weight:600}

/* trust pills, the Amino signature: white, hairline border, fully round, coloured dot */
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:clamp(22px,3.4vw,30px) 0 0;padding:0;list-style:none}
.pills li{display:inline-flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--rule);border-radius:999px;padding:7px 15px;font-size:.92rem;
  font-weight:500;color:var(--ink);box-shadow:0 1px 2px rgba(10,20,40,.04)}
@media (max-width:560px){
  .pills{gap:8px}
  .pills li{font-size:.84rem;padding:6px 12px}
}
.pills i{width:8px;height:8px;border-radius:50%;flex:none}
.pills li:nth-child(1) i{background:var(--dot-1)}
.pills li:nth-child(2) i{background:var(--dot-2)}
.pills li:nth-child(3) i{background:var(--dot-3)}
.pills li:nth-child(4) i{background:var(--dot-4)}

/* ---------- form card ---------- */
.cardwrap{max-width:620px;margin:clamp(34px,5vw,54px) auto 0;text-align:left}
.card{background:var(--surface);color:var(--ink);border:1px solid var(--rule);
  border-radius:var(--r-xl);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 30px 60px -32px rgba(12,24,45,.28), 0 2px 6px rgba(12,24,45,.05)}
.card-body{padding:clamp(24px,4.2vw,34px);flex:1;min-height:318px}
.card-kicker{margin:0;text-align:center;color:var(--muted);font-size:.98rem}
.qualifier{margin:14px 0 4px;text-align:center;font-family:var(--display);font-weight:800;
  font-size:1.24rem;letter-spacing:-.01em;color:var(--ink)}
.reassure{margin:0;text-align:center;color:var(--muted);font-size:.94rem;line-height:1.45}
.rule{border:0;border-top:1px solid var(--rule-soft);margin:22px 0}

.step{display:none;border:0;padding:0;margin:0;min-inline-size:0}
.step.is-on{display:block;animation:in .2s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.q{font-family:var(--display);font-weight:700;font-size:clamp(1.12rem,2.8vw,1.3rem);
  line-height:1.26;letter-spacing:-.012em;padding:0;margin:0 0 18px;color:var(--ink)}

.opts{display:grid;gap:6px}
.opt{appearance:none;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r-md);
  padding:13px 14px;font:inherit;font-size:1.02rem;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;gap:13px;transition:background .12s, border-color .12s}
.dot{width:21px;height:21px;border-radius:50%;border:2px solid #c6ccd4;flex:none;
  display:inline-block;transition:border-color .12s, box-shadow .12s, background .12s}
.opt:hover{background:#f8fafb;border-color:#ccd3da}
.opt:hover .dot{border-color:#9aa4ae}
.opt.is-picked{background:var(--accent-wash);border-color:var(--accent)}
.opt.is-picked .dot{border-color:var(--accent);background:var(--accent);
  box-shadow:inset 0 0 0 4px #fff}

.field{display:block;margin:0 0 14px}
.lab{display:block;font-size:.83rem;font-weight:600;color:var(--muted);margin-bottom:7px}
.field input{width:100%;font:inherit;padding:14px 15px;border:1px solid var(--rule);
  border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.field input::placeholder{color:#9aa4ae}
.field input:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px rgba(11,95,164,.18)}
.field input.bad{border-color:#c0392b}
.err{margin:2px 0 10px;color:#c0392b;font-size:.9rem}
.fineprint{margin:14px 0 0;font-size:.8rem;color:var(--muted);line-height:1.5}
.fineprint a{color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.booknote{margin:0 0 14px;color:var(--muted);font-size:.95rem}
.calwrap{border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;background:#fff}
#cal{width:100%;height:560px;border:0;display:block}

/* Progress bar and footer. The footer is the card surface with a hairline rule and an
   ink pill button, which is the button style both reference pages use. */
.bar{height:3px;background:var(--rule-soft)}
.bar span{display:block;height:100%;width:20%;background:var(--accent);transition:width .25s ease}
.card-foot{display:flex;align-items:center;gap:10px;background:#fbfcfd;
  border-top:1px solid var(--rule-soft);padding:12px 14px;min-height:68px}
.count{font-weight:600;font-size:.95rem;margin-right:auto;letter-spacing:.01em;color:var(--muted)}
.back{background:none;border:0;font:inherit;color:var(--muted);cursor:pointer;
  padding:10px 12px;border-radius:10px;font-size:.95rem}
.back:hover{background:#eef1f4;color:var(--ink)}
.next{appearance:none;border:0;background:var(--ink);color:#fff;font:inherit;
  font-family:var(--display);font-weight:800;letter-spacing:.005em;padding:14px 26px;
  border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  font-size:1.02rem;transition:background .14s, opacity .14s, transform .06s}
.next:hover{background:#1d1d2c}
.next:active{transform:translateY(1px)}
.next[disabled]{background:#e8ebef;color:#99a3ad;box-shadow:none;cursor:not-allowed}
.cardfoot-note{margin:12px 2px 0;font-size:.9rem;color:var(--muted);min-height:1.2em;text-align:center}
.cardfoot-note.bad{color:#c0392b}

/* ---------- shared section furniture ---------- */
h2{margin:0;font-family:var(--display);font-weight:800;
  line-height:1.08;letter-spacing:-.02em;font-size:clamp(1.75rem,4.8vw,2.7rem);color:var(--ink);
  text-wrap:balance}
h2 em{font-style:normal;color:var(--accent)}

.cta-wrap{margin:clamp(34px,5vw,52px) 0 0;text-align:center}
.btn-apply{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;
  font-family:var(--display);font-weight:800;letter-spacing:.005em;
  font-size:clamp(1.02rem,2.4vw,1.16rem);padding:19px 44px;border-radius:999px;
  transition:background .14s, transform .06s;
  box-shadow:0 18px 34px -18px rgba(6,6,18,.55)}
.btn-apply:hover{background:#1d1d2c}
.btn-apply:active{transform:translateY(1px)}
@media (max-width:460px){.btn-apply{display:block;padding-left:20px;padding-right:20px}}

/* ---------- client logo marquee ----------
   Seven real brand logos, current and past. They arrive in seven different brand colours
   (navy, red, gold, orange, blue, near black), so every one is flattened with brightness(0) and softened with
   opacity: the shapes stay exactly as the brand drew them, the colour stops competing
   with the page, and the row reads as one set. */
.strip{padding:0 0 var(--sec);overflow:hidden}
.strip-lab{margin:0 var(--gutter);text-align:center;font-family:var(--display);font-weight:800;
  letter-spacing:.01em;font-size:clamp(1rem,2.2vw,1.12rem);color:var(--muted)}
.marquee{margin-top:clamp(18px,2.6vw,26px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-row{display:flex;align-items:center;gap:clamp(30px,5vw,58px);width:max-content;
  animation:slide 46s linear infinite}
.marquee:hover .marquee-row{animation-play-state:paused}
.ml{flex:none;display:flex;align-items:center;justify-content:center;
  height:clamp(28px,4.6vw,44px)}
.ml img{height:100%;width:auto;max-width:none;
  filter:grayscale(1) brightness(0);opacity:.52;transition:opacity .18s}
.marquee:hover .ml img{opacity:.66}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* The duplicate half exists only to make the loop seamless, so if someone has asked
   for less motion there is nothing to animate and the row simply sits still. */
@media (prefers-reduced-motion: reduce){
  .marquee-row{animation:none;flex-wrap:nowrap;overflow-x:auto}
}

/* ---------- results ---------- */
.proof{padding:0 var(--gutter) var(--sec);text-align:center}
.proof-inner{max-width:var(--wrap);margin:0 auto}
.proof-sub{margin:16px auto 0;max-width:56ch;font-size:clamp(.92rem,2vw,1.02rem);
  line-height:1.55;color:var(--muted)}

.rgrid{display:grid;gap:18px;margin:clamp(30px,4.4vw,46px) 0 0;text-align:left}
@media (min-width:880px){
  .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rcard.is-lead{grid-column:1 / -1}
}
.rcard{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(18px,2.8vw,24px);
  box-shadow:0 14px 34px -24px rgba(12,24,45,.4)}
/* The strongest account gets the full width row. The stat sits above its screenshot in
   every card, including this one, and the extra width is spent making the biggest
   receipt the most readable one on the page. */
@media (min-width:880px){
  .rcard.is-lead .rfacts{grid-auto-flow:column;grid-auto-columns:max-content;
    column-gap:clamp(22px,3vw,44px)}
}

.rchan{margin:0;font-family:var(--display);font-weight:800;font-size:.82rem;
  letter-spacing:.02em;color:var(--accent);
  background:var(--accent-wash);border:1px solid var(--accent-line);
  display:inline-block;padding:5px 11px;border-radius:999px}
.rstat{margin:14px 0 0;font-family:var(--display);font-weight:800;color:var(--ink);
  line-height:1;letter-spacing:-.03em;font-size:clamp(2.6rem,8vw,3.9rem)}
.rcard.is-lead .rstat{font-size:clamp(3rem,9vw,4.6rem)}
.rstat .x{color:var(--accent);font-size:.56em;margin-left:.02em}
.rstat-lab{margin:4px 0 0;font-weight:600;color:var(--muted);font-size:.95rem}

.rfacts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:7px}
.rfacts li{color:var(--muted);font-size:.96rem;line-height:1.35;
  display:flex;align-items:baseline;gap:8px}
.rfacts li::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--dot-2);flex:none;transform:translateY(-2px)}
.rfacts b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* The screenshot is the receipt for the stat above it, so it is a real button: click or
   keyboard to zoom. */
.rshot{display:block;width:100%;margin:18px 0 0;padding:0;border:1px solid var(--rule);
  background:#fff;border-radius:var(--r-md);overflow:hidden;cursor:zoom-in;
  box-shadow:0 10px 26px -18px rgba(12,24,45,.5);
  transition:transform .14s, box-shadow .14s}
.rshot:hover{transform:translateY(-2px);box-shadow:0 18px 36px -18px rgba(12,24,45,.55)}
.rshot img{width:100%;height:auto;display:block}
/* The shots are wide dashboard grabs, so on a phone they shrink to an unreadable
   strip. The hint says the zoom is there rather than leaving it to be discovered. */
.rzoom{display:block;padding:8px 10px;border-top:1px solid var(--rule-soft);
  background:#fbfcfd;color:var(--accent);font-size:.78rem;font-weight:600;
  letter-spacing:.01em;text-align:center}
.rzoom::after{content:"Tap to zoom"}
@media (hover:hover) and (pointer:fine){.rzoom::after{content:"Click to zoom"}}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:60;background:rgba(6,6,18,.84);
  display:flex;align-items:center;justify-content:center;padding:clamp(14px,4vw,34px)}
.lb img{max-width:min(1280px,96vw);max-height:86vh;width:auto;height:auto;
  border-radius:12px;background:#fff;box-shadow:0 30px 90px -24px rgba(0,0,0,.75)}
.lb-close{position:absolute;top:14px;right:16px;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--rule);background:#fff;color:var(--ink);font-size:30px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.lb-close:hover{background:#f1f4f7}

/* ---------- please note ---------- */
.note-sec{padding:0 var(--gutter) var(--sec)}
.notebox{max-width:760px;margin:0 auto;background:var(--surface);
  border:1px solid var(--rule);border-left:4px solid var(--gold);
  border-radius:var(--r-lg);padding:clamp(22px,3.6vw,34px);
  box-shadow:0 18px 40px -28px rgba(12,24,45,.35)}
/* Scoped under .notebox on purpose: the plain `.notebox p` rule below is more
   specific than a bare `.note-chip`, and it was overriding the chip's dark text
   with body colour, which left it nearly unreadable in v3. */
.notebox .note-chip{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;
  background:var(--gold);color:#2a1d00;font-family:var(--display);font-weight:800;
  font-size:.82rem;letter-spacing:.01em;padding:7px 14px;
  border-radius:999px}
.notebox .note-chip::before{content:"";width:7px;height:7px;border-radius:50%;
  background:#2a1d00;flex:none}
.note-h{margin:0 0 12px;font-family:var(--display);font-weight:800;color:var(--ink);
  font-size:clamp(1.22rem,3.2vw,1.6rem);line-height:1.22;letter-spacing:-.015em}
.notebox p{margin:0 0 11px;color:var(--muted);font-size:1rem;line-height:1.6}
.notebox p:last-child{margin-bottom:0}
.notebox b{color:var(--ink);font-weight:600}
/* Placeholder text is marked so it cannot be mistaken for a real number. */
.ph{background:rgba(242,193,78,.26);color:#6a4c00;font-weight:700;
  padding:2px 7px;border-radius:6px}
.note-sec .cta-wrap{margin:clamp(26px,3.6vw,34px) 0 0}

/* ---------- footer ---------- */
.foot{background:var(--surface);border-top:1px solid var(--rule);color:var(--muted);
  padding:clamp(42px,6vw,66px) var(--gutter) 32px;text-align:center}
.foot-inner{max-width:760px;margin:0 auto}
.fh{font-family:var(--display);font-size:clamp(1.3rem,3.6vw,1.8rem);
  color:var(--ink);margin:0 0 16px;letter-spacing:-.015em}
.foot p{margin:0 0 9px;font-size:.98rem}
.foot a{color:var(--ink);text-decoration:none;border-bottom:1px solid #c8cfd6}
.foot a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.flinks{margin-top:14px}
.flinks span{color:#b3bcc6;margin:0 8px}
.copy{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule-soft);
  font-size:.84rem;color:#78828c}

/* ---------- legal pages ---------- */
.legal{color:var(--ink);padding:clamp(30px,5vw,54px) var(--gutter) clamp(50px,7vw,86px)}
.legal .legal-inner{max-width:760px;margin:0 auto}
.legal .back-home{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--muted);font-size:.92rem;margin-bottom:28px}
.legal h1{font-family:var(--display);font-style:normal;color:var(--ink);
  font-size:clamp(2rem,4.6vw,2.9rem);letter-spacing:-.02em;line-height:1.08;max-width:none}
.legal h2{color:var(--ink);font-size:clamp(1.2rem,2.2vw,1.5rem);
  margin:38px 0 10px;letter-spacing:-.01em}
.legal p,.legal li{color:#3c4650;max-width:70ch}
.legal ul{padding-left:20px}
.legal a{color:var(--accent)}
.legal .updated{color:var(--muted);font-size:.92rem;margin-top:10px}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}