/* PAYINGFORADSSUCKS — v3
   ==================================================================
   Rebuilt 2026-08-07 against the frontend-design skill, after the operator called the previous
   version "AI slop." He was right twice over: the first page was a 5,378-word transcription of a
   stage deck, and my first rebuild — deep navy ground, one bright green accent, 01/02/03 markers
   on three things that were not a sequence, a single system font stack doing every job — landed
   squarely on the skill's own list of AI defaults. Naming that is the point of this header.

   THE PLAN THIS SHEET IMPLEMENTS

   Subject. Geographic distribution for physical-product brands. The most characteristic object
   in that world is a MAP of America with cities lit up — which is not an illustration of the
   product, it IS the product. So the map is the hero, and the headline is set into it.

   Colour. MFP navy and green are the client's existing identity; the skill is explicit that a
   pinned brand direction wins over a designer's preference, so they stay. What stops that being
   the generic dark-ground-plus-one-acid-accent default is WHERE the accents come from: green and
   white here are the map's own legend colours — green marks cities listed in, white marks cities
   that bought. The palette is the legend. Colour encodes something true rather than decorating.

   Type. Instrument Serif against Inter. A high-contrast serif carrying the headlines on a
   technical subject reads as record, ledger, receipt — which is the register a guru-burned
   operator will accept — while Inter does the operator's work underneath. Both are SIL Open
   Font Licence and self-hosted; no third-party request, no licence exposure.

   Structure. Numbering appears exactly once, on the four-step process, because that is the only
   content on the page that is genuinely a sequence.

   Restraint. The boldness is spent in one place — the hero map and the serif over it. Everything
   below is quiet: hairlines, one accent, generous space, no strips or badges. */

@font-face{
  font-family:"Instrument Serif";
  src:url("assets/fonts/instrument-serif-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("assets/fonts/inter-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --ink:#07121F;        /* ground — the map's own night */
  --field:#0D1B2C;      /* raised surfaces */
  --rule:#17293F;
  --rule-soft:#122132;
  --paper:#E9F1FA;      /* primary text */
  --mute:#8AA1BA;
  --faint:#7189A1;   /* was #5E7590 — 3.97:1, below WCAG AA. This carries the riders,
                        captions, button sub-lines and footer, all normal-size text, so
                        4.5:1 is the floor. Now 5.20:1 on the page ground and 4.79:1 on
                        the raised surface, which is the harder of the two. */
  --live:#2ECB92;       /* map legend: cities listed in */
  --sold:#FFFFFF;       /* map legend: cities that bought */

  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --wrap:1140px;
  --measure:58ch;
  --gut:clamp(20px,5vw,44px);
  --sec:clamp(72px,10vw,148px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font:400 17px/1.68 var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
section{padding:var(--sec) 0}
.tight{padding:calc(var(--sec)*.46) 0}

/* ---------- type: serif carries every headline, Inter carries everything else ---------- */
h1,h2{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-.012em;line-height:1.02}
h1{font-size:clamp(44px,7.4vw,92px)}
h2{font-size:clamp(34px,5.4vw,64px)}
h3{margin:0;font:600 18px/1.35 var(--body);letter-spacing:-.01em}
p{margin:0 0 18px;max-width:var(--measure)}
.lede{font-size:clamp(17.5px,1.9vw,21px);line-height:1.6;color:var(--mute);max-width:54ch}
.kicker{
  margin:0 0 20px;font:600 12px/1 var(--body);letter-spacing:.18em;
  text-transform:uppercase;color:var(--live);
}
.fine{font-size:14px;line-height:1.6;color:var(--faint);max-width:56ch}
.rider{font-size:13px;line-height:1.55;color:var(--faint);max-width:60ch}
.g{color:var(--live)}
em{font-style:italic}
strong,b{font-weight:600;color:#fff}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:60;background:rgba(7,18,31,.82);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--rule-soft)}
.navin{max-width:var(--wrap);margin:0 auto;padding:13px var(--gut);
  display:flex;align-items:center;gap:22px}
.brandlink{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brandlink img{width:28px;height:28px}
.brandtag{font:600 11.5px/1 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.navlinks{display:flex;align-items:center;gap:26px}
/* 44px minimum on anything that is a real control. The desktop nav links get the height
   through padding rather than a taller font, so the visual rhythm is unchanged; the footer's
   inline links are exempt (WCAG 2.5.8 excludes targets inline in a sentence). */
.navlinks a{font:400 14.5px/1 var(--body);color:var(--mute);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;transition:color .18s}
.navlinks a:hover{color:var(--paper)}
.navcta{padding:0 18px;min-height:44px;border-radius:6px;background:var(--live);
  color:#04131C!important;font-weight:600!important;font-size:14px!important}
.navcta:hover{background:#43DCA5}
@media(max-width:880px){.navlinks{display:none}}
#mnav{display:none;align-items:center}
@media(max-width:880px){#mnav{display:inline-flex}}

/* ---------- buttons: square-ish, signage not app ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:16px 32px;border:0;border-radius:6px;
  background:var(--live);color:#04131C;
  font:600 16.5px/1 var(--body);letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;transition:background .18s,transform .18s}
.btn:hover{background:#43DCA5;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--paper);border:1px solid var(--rule)}
.btn.ghost:hover{background:var(--field);transform:none}
.btn-sub{margin:15px 0 0;font-size:14px;color:var(--faint);max-width:50ch}

/* ---------- HERO: the map is the page's thesis, headline set into it ---------- */
.hero{position:relative;min-height:clamp(560px,88vh,880px);display:flex;align-items:center;
  border-bottom:1px solid var(--rule-soft);overflow:hidden}
.hero-map{position:absolute;inset:0;z-index:0}
.hero-map img{width:100%;height:100%;object-fit:cover;object-position:52% 42%;opacity:.5}
.hero-map::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--ink) 6%,rgba(7,18,31,.86) 46%,rgba(7,18,31,.28) 100%),
    linear-gradient(180deg,rgba(7,18,31,.9) 0%,rgba(7,18,31,0) 24%,rgba(7,18,31,.92) 100%);}
.hero .wrap{position:relative;z-index:1;padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px)}
.hero h1{max-width:13ch;margin-bottom:24px}
.hero .lede{margin-bottom:32px}
.hero-legend{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;
  font:400 12.5px/1 var(--body);color:var(--faint);letter-spacing:.04em}
.hero-legend span{display:flex;align-items:center;gap:8px}
.hero-legend i{width:8px;height:8px;border-radius:50%;display:block}
.hero-legend .l{background:var(--live)}
.hero-legend .s{background:var(--sold)}


/* ---------- the receipt: two real Meta notifications, phone-shaped, side by side.
   Capped narrow on purpose — they are portrait screenshots, and letting them run to the
   container width would make two enormous phones and bury the line above them. ---------- */
.receipts{display:flex;gap:22px;margin-top:44px;max-width:520px}
.receipts img{flex:1;min-width:0;border:1px solid var(--rule-soft);border-radius:10px}
@media(max-width:520px){.receipts{gap:14px}}

/* ---------- proof row ---------- */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.proof div{padding:30px 26px 30px 0}
.proof div+div{padding-left:26px;border-left:1px solid var(--rule-soft)}
.proof b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(32px,4.4vw,50px);line-height:1;color:var(--paper);margin-bottom:10px}
.proof .on b{color:var(--live)}
.proof span{display:block;font-size:13.5px;line-height:1.45;color:var(--mute)}
@media(max-width:820px){
  .proof{grid-template-columns:1fr 1fr}
  .proof div:nth-child(odd){padding-left:0;border-left:0}
  .proof div:nth-child(n+3){border-top:1px solid var(--rule-soft)}
}

/* ---------- cards: no numbering. these are three facts, not three steps ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:52px;
  border-top:1px solid var(--rule)}
.card{padding:34px 30px 34px 0}
.card+.card{padding-left:30px;border-left:1px solid var(--rule-soft)}
.card h3{margin-bottom:11px;color:#fff}
.card p{font-size:15.5px;color:var(--mute);margin:0;max-width:none}
@media(max-width:880px){
  .cards{grid-template-columns:1fr}
  .card+.card{padding-left:0;border-left:0;border-top:1px solid var(--rule-soft)}
}

/* ---------- the gate ---------- */
.gate{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:48px;border-top:1px solid var(--rule)}
.gate>div{padding:34px 34px 34px 0}
.gate>div+div{padding-left:34px;border-left:1px solid var(--rule-soft)}
.gate h3{margin-bottom:20px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.yes h3{color:var(--live)}
.no h3{color:var(--faint)}
.gate ul{margin:0;padding:0;list-style:none}
.gate li{position:relative;padding-left:24px;margin-bottom:13px;font-size:15.5px;
  color:var(--mute);line-height:1.5}
.gate li::before{position:absolute;left:0;top:1px;font-size:13px}
.yes li::before{content:"●";color:var(--live);font-size:8px;top:7px}
.no li::before{content:"○";color:var(--faint);font-size:8px;top:7px}
@media(max-width:880px){
  .gate{grid-template-columns:1fr}
  .gate>div+div{padding-left:0;border-left:0;border-top:1px solid var(--rule-soft)}
}

/* ---------- steps: the ONLY numbered thing, because it is the only real sequence ---------- */
.steps{counter-reset:s;margin:48px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.steps li{counter-increment:s;padding-top:22px;border-top:1px solid var(--rule)}
.steps li::before{content:counter(s,decimal-leading-zero);
  display:block;font-family:var(--display);font-size:26px;color:var(--live);
  line-height:1;margin-bottom:14px}
.steps b{display:block;font:600 16.5px/1.3 var(--body);color:#fff;margin-bottom:7px}
.steps span{font-size:14.5px;color:var(--mute);line-height:1.5}
@media(max-width:880px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.steps{grid-template-columns:1fr;gap:18px}}

/* ---------- figures ---------- */
figure{margin:52px 0 0}
figure img{border:1px solid var(--rule-soft);border-radius:4px}
figcaption{margin-top:15px;font-size:13.5px;color:var(--faint)}

/* ---------- FAQ ---------- */
.faq{margin-top:44px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq summary{cursor:pointer;list-style:none;padding:26px 46px 26px 0;position:relative;
  font-family:var(--display);font-size:clamp(20px,2.4vw,26px);line-height:1.25;color:var(--paper)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font:400 24px/1 var(--body);color:var(--live)}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 28px}
.faq .ans p{font-size:15.5px;color:var(--mute)}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- form (markup preserved — app.js binds to it) ---------- */
.formwrap{border-top:1px solid var(--rule);padding-top:40px;margin-top:44px}
fieldset{border:0;margin:0;padding:0}
label{display:block;font:600 13.5px/1.4 var(--body);color:var(--paper);margin:22px 0 8px}
input,select,textarea{width:100%;padding:13px 15px;border-radius:6px;
  background:var(--field);border:1px solid var(--rule);color:var(--paper);
  font:400 16px/1.4 var(--body)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--live);outline-offset:1px;border-color:transparent}
textarea{min-height:104px;resize:vertical}
.checkrow{display:flex;gap:12px;align-items:flex-start;margin-top:22px}
.checkrow input{width:20px;height:20px;flex:0 0 auto;margin-top:2px}
.checkrow label{margin:0;font-weight:400;color:var(--mute);font-size:15px}
.formnav{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.prog{display:flex;gap:6px;margin-bottom:30px}
.prog i{flex:1;height:2px;background:var(--rule);transition:background .3s}
.prog i.on{background:var(--live)}
.formerr{color:#F0866D;font-size:14px;margin-top:14px;display:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule-soft);padding:56px 0 76px;color:var(--faint);font-size:14px}
footer a{color:var(--mute);text-decoration:none}
footer a:hover{color:var(--paper)}

/* ---------- entrance: none ----------
   THERE IS NO SCROLL OR LOAD ANIMATION ON THIS PAGE, AND THAT IS THE DECISION.

   Three separate versions of a reveal effect shipped a page that was blank below the hero:
     1. app.js added `.is-in`, the stylesheet listened for `.in`  -> nothing ever revealed.
     2. class corrected, but the rule still lost                  -> nothing ever revealed.
     3. a pure-CSS `animation: rise ... both` — and `both` holds the animation's opening
        frame, so any browser that does not advance the animation (backgrounded tab, throttled
        or non-compositing renderer) pins every section at opacity 0 permanently.

   Each fix was more clever than the last and each one could still fail closed. On a page whose
   only job is to sell a six-figure engagement, a fade-in is worth nothing and a blank page costs
   everything. Content is now visible because it is visible. app.js may still add `.is-in`;
   no style depends on it. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}