/* ============================================================
   Merlin Clips — pay only for views that survived.

   The previous version of this file argued for severity: "a
   product whose job is to refuse payments should look like it
   means it." That was right for a spend limiter sold to one
   engineer. It is wrong here.

   This page has to land on two audiences at once. A creator
   deciding whether to spend an evening editing needs energy and
   a reason to trust getting paid. A brand deciding where to put
   a budget needs to believe we are a real company. Severity
   alone reads as a side project to the first and as austere to
   the second.

   So: the dark, hairline, monospace-numbers base stays — that is
   what reads as legitimate — and colour is added deliberately.

   One brand colour, and it is violet. Three competing accents read
   as decoration; one reads as identity. Violet is the creator-economy
   register without being the incumbent's orange, and it is the colour
   the name already implies — Merlin is a wizard. Cyan survives only
   as the brand-side marker in the two-sided split, where it has a job.

   Everything else carries meaning rather than mood: green is money
   that moved, amber money held, red money refused. Nothing pulses,
   nothing floats. The numbers are still the argument.
   ============================================================ */

:root{
  /* Content Rewards' warmth, our violet. A warm off-white rather than the
     cream-and-serif default: the ground is barely tinted, so the violet reads
     as the only real colour on the page. */
  --bg:#FAF8F5; --surface:#FFFFFF; --surface-2:#F3F0EB;
  --line:#E8E3DB; --line-hi:#D8D1C6;
  --text:#151310; --text-2:#5C554C; --muted:#8B8378;
  --accent:#0E8FA8;                 /* brand side */
  --pop:#6D28D9;                    /* creator side */
  --ok:#0F7B4F; --warn:#8A5A00; --bad:#B02A20;
  --lime:#4D7C0F;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1080px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
     font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

/* ── nav ── */
nav{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
    background:rgba(250,248,245,.86);backdrop-filter:blur(12px)}
nav .wrap{display:flex;align-items:center;gap:22px;height:72px}
/* Links sit left of centre and the action sits hard right, which is the
   arrangement both Content Rewards and MoonPay use: the thing you came to do
   is never buried among the things you might read. */
nav .links{display:flex;align-items:center;gap:22px;margin-right:auto}
nav .cta{font-size:14.5px;font-weight:650;padding:11px 20px;border-radius:99px;
         background:var(--pop);color:#fff;white-space:nowrap;
         box-shadow:inset 0 -2px 0 rgba(49,16,116,.5)}
/* Hover goes darker, not lighter. Lifting the violet toward #C4B5FD would put
   white text on a pale ground and lose the contrast the label just gained. */
nav .cta:hover{background:#5B21B6;color:#fff;text-decoration:none}
@media(max-width:900px){nav .links{gap:16px}}
@media(max-width:760px){nav .links a.opt{display:none}}
nav .brand{font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--text);
       text-decoration:none;display:flex;align-items:center;gap:9px;margin-right:26px}
nav .brand:hover{text-decoration:none}
nav .brand .dot{width:22px;height:22px;border-radius:6px;
            background:url('/logo.svg') center/cover no-repeat;flex:none}
nav a.l{font-size:15px;color:var(--text-2);text-decoration:none;font-weight:480}
nav a.l:hover,nav a.l[aria-current="page"]{color:var(--text)}
@media(max-width:700px){nav a.l.opt{display:none}}

/* ── type ── */
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.15}
h1{font-size:clamp(46px,8.4vw,104px);line-height:.94;letter-spacing:-.042em;
   font-weight:680;margin-bottom:22px;text-wrap:balance}
h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.032em;font-weight:650;
   line-height:1.06;margin:0 0 16px;text-wrap:balance}
h3{font-size:20px;margin-bottom:9px;letter-spacing:-.018em;font-weight:600}
p{margin:0 0 20px;color:var(--text-2);font-size:17.5px}
.lede{font-size:clamp(19px,2vw,24px);color:var(--text-2);max-width:34ch;line-height:1.4;
       font-weight:420}
.eyebrow{font-family:var(--mono);font-size:11.5px;color:var(--muted);
         letter-spacing:.09em;text-transform:uppercase;margin-bottom:14px;display:block}
strong{color:var(--text);font-weight:550}
/* Body links are violet, not cyan. Cyan is the brand-side marker in the
   two-sided split, where it distinguishes one audience from the other. Spent
   on every inline link it stops meaning that and starts competing with the
   one colour the page is trying to own. */
a{color:var(--pop);text-decoration:none}
a:hover{text-decoration:underline}
section{padding:96px 0}
.hero{padding:96px 0 84px}
hr{height:1px;background:var(--line);border:0;margin:0}
/* The padding is not decoration, it stops the last letter being sliced.
   `background-clip:text` paints the gradient only inside the element's
   background box, and negative letter-spacing is applied after the final
   character as well as between them — so the box ends ~2.6px short of where
   the last glyph's ink actually reaches, and the right edge of the "s" in
   "real views" was simply not painted. The negative margin cancels the
   padding's effect on layout, so nothing moves. */
.grad{background:linear-gradient(96deg,#7C3AED 0%,#6D28D9 45%,#0E8FA8 100%);
      -webkit-background-clip:text;background-clip:text;color:transparent;
      padding-right:.09em;margin-right:-.09em}

/* ── numbers carry the argument ── */
.num{font-family:var(--mono);font-size:clamp(76px,15vw,180px);font-weight:600;
     letter-spacing:-.04em;color:var(--text);line-height:1;display:block;margin-bottom:10px}
.num-cap{font-family:var(--mono);font-size:14px;color:var(--text-2);letter-spacing:.06em}
.num.bad{color:var(--bad)}
.num.ok{color:var(--ok)}

/* ── buttons ── */
.btn{display:inline-block;background:var(--text);color:#fff;text-decoration:none;
     font-size:17px;font-weight:650;padding:17px 32px;border-radius:99px;border:0;cursor:pointer;
     letter-spacing:-.01em;transition:transform .12s ease,filter .12s ease}
.btn:active{transform:translateY(1px)}
.btn:hover{background:#000;text-decoration:none}
.btn.pop{background:linear-gradient(96deg,#7C3AED,#6D28D9);color:#fff;
         box-shadow:inset 0 -3px 0 rgba(49,16,116,.6),0 12px 30px -14px rgba(109,40,217,.75)}
.btn.pop:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn.pop:active{transform:translateY(1px);box-shadow:inset 0 -1px 0 rgba(59,20,140,.55),0 6px 18px -12px rgba(139,92,246,.7)}
.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--line-hi);
           box-shadow:inset 0 -2px 0 rgba(0,0,0,.07)}
.btn.ghost:hover{color:var(--text);border-color:var(--muted);background:transparent}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:34px 0 14px}
.fine{font-family:var(--mono);font-size:13.5px;color:var(--muted);margin:0}

/* ── pills ── */
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;
      letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:100px;
      border:1px solid var(--line-hi);color:var(--text-2);background:var(--surface)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.pill.live::before{background:var(--ok)}
.pill.pop::before{background:var(--pop)}

/* ── terminal ── */
.term{border:1px solid #241F31;border-radius:14px;background:#141019;
      font-family:var(--mono);font-size:12.5px;line-height:2;padding:20px 22px;
      overflow-x:auto;white-space:pre;margin:26px 0;color:#C9C4D4;
      box-shadow:0 18px 44px -24px rgba(21,19,16,.5)}
@media(max-width:780px){.term{font-size:11px;line-height:1.9;padding:14px 14px}}
.c-dim{color:#7A7488}.c-ok{color:#5CD9A0}.c-warn{color:#F0B849}.c-bad{color:#FF8A80}
.c-acc{color:#67E8F9}.c-pop{color:#C4B5FD}

/* ── two-sided split ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
@media(max-width:700px){.split{grid-template-columns:1fr}}
.side{border:1px solid var(--line-hi);border-radius:22px;padding:34px 32px;background:var(--surface);
      position:relative;overflow:hidden}
.side::before{content:"";position:absolute;inset:0 0 auto 0;height:2px}
.side.creator::before{background:linear-gradient(90deg,var(--pop),transparent)}
.side.brand::before{background:linear-gradient(90deg,var(--accent),transparent)}
.side h3{font-size:24px;margin-bottom:12px;letter-spacing:-.022em}
.side .who{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
           margin-bottom:12px;display:block}
.side.creator .who{color:var(--pop)}
.side.brand .who{color:var(--accent)}
.side ul{list-style:none;padding:0;margin:16px 0 0}
.side li{color:var(--text-2);font-size:14.5px;margin-bottom:10px;padding-left:20px;position:relative}
.side li::before{content:"→";position:absolute;left:0;color:var(--muted)}

/* ── step cards ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
@media(max-width:700px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--line);border-radius:20px;padding:30px 28px;background:var(--surface)}
.step .n{font-family:var(--mono);font-size:16px;color:#fff;font-weight:700;
         width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:20px}
.step:nth-child(1) .n{background:var(--pop)}
.step:nth-child(2) .n{background:var(--warn)}
.step:nth-child(3) .n{background:var(--ok)}
.step p{font-size:16.5px;margin:0}

/* ── definition list rows ── */
.list{border-top:1px solid var(--line);margin-top:30px}
.item{border-bottom:1px solid var(--line);padding:32px 0;display:grid;
      grid-template-columns:190px 1fr;gap:30px}
@media(max-width:780px){.item{grid-template-columns:1fr;gap:6px}}
.item .k{font-family:var(--mono);font-size:13px;color:var(--pop);
         letter-spacing:.09em;text-transform:uppercase;padding-top:5px;font-weight:600}
.item p{margin:0;font-size:17px}
.item p+p{margin-top:10px}

/* ── FAQ disclosure ──
   Native <details>, so it works with the keyboard, survives JS failing, and
   lets in-page find expand a closed answer on its own. The row keeps the same
   190px key column as .item, so an opened answer lands on the text column the
   rest of the page already uses. */
.faq{border-top:1px solid var(--line);margin-top:30px}
.qa{border-bottom:1px solid var(--line)}
.qa>summary{list-style:none;cursor:pointer;padding:26px 0;display:grid;
            grid-template-columns:190px 1fr 28px;gap:30px;align-items:baseline}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary:hover .q{color:var(--pop)}
.qa>summary:focus-visible{outline:2px solid var(--pop);outline-offset:4px;border-radius:6px}
.qa .k{font-family:var(--mono);font-size:13px;color:var(--pop);letter-spacing:.09em;
       text-transform:uppercase;font-weight:600}
.qa .q{font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--text);
       transition:color .15s ease}
.qa .chev{justify-self:end;align-self:center;width:11px;height:11px;flex:none;
          border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
          transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease}
.qa[open] .chev{transform:rotate(-135deg) translate(-2px,-2px);border-color:var(--pop)}
.qa .a{padding:0 0 28px;display:grid;grid-template-columns:190px 1fr;gap:30px}
.qa .a>*{grid-column:2}
.qa .a p{margin:0;font-size:17px;color:var(--text-2);max-width:64ch}
.qa .a p+p{margin-top:10px}
@media(max-width:780px){
  .qa>summary{grid-template-columns:1fr 28px;gap:4px 14px}
  .qa .k{grid-column:1/-1}
  .qa .a{grid-template-columns:1fr}
  .qa .a>*{grid-column:1}
}

/* ── tables ── */
table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px}
th{text-align:left;font-weight:500;color:var(--muted);font-family:var(--mono);
   font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
   padding:0 12px 10px 0;border-bottom:1px solid var(--line)}
td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);color:var(--text-2);
   vertical-align:top}
td.mono{font-family:var(--mono);font-size:13px;color:var(--text)}

/* ── evidence block ── */
.buy{border:1px solid var(--line-hi);border-radius:12px;padding:28px;background:var(--surface)}
.buy .amt{font-family:var(--mono);font-size:38px;font-weight:500;letter-spacing:-.04em;line-height:1}
.buy .amt small{font-size:14px;color:var(--muted);font-weight:400;letter-spacing:0}
.buy ul{list-style:none;padding:0;margin:20px 0 22px}
.buy li{color:var(--text-2);font-size:14.5px;margin-bottom:9px;padding-left:18px;position:relative}
.buy li::before{content:"\2014";position:absolute;left:0;color:var(--muted)}
.hash{font-family:var(--mono);font-size:11.5px;color:var(--muted);word-break:break-all}

/* ── callout ── */
.note{border-left:2px solid var(--pop);padding:2px 0 2px 18px;margin:22px 0}
.note p{margin:0;font-size:15px;color:var(--muted)}
.not ul{padding-left:18px;margin:0}
.not li{color:var(--muted);font-size:14.5px;margin-bottom:10px}

/* ── next-page link ── */
.next{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
      border-top:1px solid var(--line);padding-top:26px;margin-top:8px}
.next a{font-size:14.5px}

/* ── reference page header ──
   Subpages take the hero's wash and centred axis but not its full viewport.
   A reference page that makes you scroll before showing its first section is
   a landing page wearing the wrong hat. */
.hero.page{padding:60px 0 76px;text-align:center}
.hero.page h1{margin-inline:auto;max-width:18ch}
.hero.page .lede{margin-inline:auto;max-width:58ch;text-align:center}
.hero.page .row{justify-content:center}
.hero.page .fine{text-align:center}

/* ── footer ──
   Four columns rather than a row of separators: by the time someone reaches
   the bottom they are looking for a specific thing, and a grouped list is
   scannable where a dot-delimited sentence is not. */
footer{border-top:1px solid var(--line);padding:56px 0 64px;color:var(--muted);font-size:14px}
footer a{color:var(--text-2);text-decoration:none}
footer a:hover{color:var(--pop);text-decoration:underline}
.foot{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px}
@media(max-width:820px){.foot{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:480px){.foot{grid-template-columns:1fr}}
.foot .about{max-width:34ch}
.foot .mark{display:flex;align-items:center;gap:10px;font-weight:650;font-size:16px;
            letter-spacing:-.02em;color:var(--text);margin-bottom:12px}
.foot .mark span{width:9px;height:9px;border-radius:50%;background:var(--pop);flex:none}
.foot .about p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.foot h3.fcol,.foot h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
         color:var(--muted);font-weight:600;margin:0 0 14px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:11px;line-height:1.4}
.foot-base{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
           border-top:1px solid var(--line);margin-top:44px;padding-top:22px;font-size:13px}

/* ── creator / brand toggle ────────────────────────────────────────────────
   The hero has two audiences with opposite anxieties: a creator asks "will I
   actually be paid", a brand asks "am I paying for bots". Answering both in
   one headline answered neither well. Both panels ship in the HTML, so the
   page still reads completely with JavaScript off. */
.toggle{position:relative;display:inline-flex;padding:5px;border-radius:100px;
        border:1px solid var(--line-hi);background:var(--surface);margin-bottom:30px}
.toggle button{position:relative;z-index:1;background:none;border:0;cursor:pointer;
               font-family:var(--sans);font-size:15px;font-weight:650;letter-spacing:.01em;
               padding:12px 26px;border-radius:100px;color:var(--muted);transition:color .18s;
               white-space:nowrap}
.toggle button[aria-selected="true"]{color:#fff}
.toggle .knob{position:absolute;top:5px;height:calc(100% - 10px);border-radius:100px;
              /* left and width are set from the active button's own geometry.
                 A fixed 50% assumed both labels were the same length; they are
                 not ("For creators" is 9px wider), so the pill sat beside the
                 word it was meant to sit under. */
              left:4px;width:0;
              transition:left .22s cubic-bezier(.4,0,.2,1),width .22s cubic-bezier(.4,0,.2,1),background .22s;
              background:linear-gradient(100deg,#7C3AED,var(--pop))}
.toggle[data-on="brand"] .knob{background:linear-gradient(100deg,var(--accent),#A5F3FC)}


/* ─────────────────────────────────────────────────────────────────────────
   Hero, rebuilt around the product.

   The page had no picture of the thing it was selling. Every reference the
   client pointed at — Pika, Orshot — leads with a large product view, and
   for good reason: a page made only of claims reads like an essay about a
   product rather than the product. Nobody buys software they have not seen.

   The frame below is not a screenshot. It is the same markup and the same
   tokens the real app uses, so it cannot drift out of date the way a PNG
   does, it stays sharp at any width, and it costs no extra request.
   ───────────────────────────────────────────────────────────────────────── */

.stage{text-align:center;padding:66px 0 0}
.stage .toggle{margin-inline:auto;display:inline-flex}

.badge{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;
       padding:7px 15px 7px 9px;border-radius:99px;border:1px solid var(--line-hi);
       background:var(--surface);color:var(--text-2);margin-bottom:26px}
.badge b{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
         background:var(--pop);color:#fff;padding:3px 8px;border-radius:99px;font-weight:700}

.stage h1{margin-inline:auto;max-width:15ch}
.stage .lede{margin-inline:auto;max-width:52ch;text-align:center}
.stage .row{justify-content:center}
.stage .fine{text-align:center}

/* The product window. Chrome first, so it reads as software rather than a
   diagram — the dots are what make a rectangle look like an application. */
.window{margin-top:64px;border:1px solid var(--line-hi);border-radius:18px 18px 0 0;
        background:var(--surface);overflow:hidden;text-align:left;
        box-shadow:0 30px 90px -30px rgba(109,40,217,.28),0 2px 6px rgba(21,19,16,.05)}
.window .chrome{display:flex;align-items:center;gap:8px;padding:14px 18px;
        border-bottom:1px solid var(--line);background:var(--surface-2)}
.window .chrome i{width:11px;height:11px;border-radius:50%;background:var(--line-hi);flex:none}
.window .chrome .addr{margin-left:10px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.window .body{padding:26px 24px 34px}

.wrow{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.wrow h4{margin:0;font-size:17px;font-weight:600;letter-spacing:-.015em}
.wrow span{font-family:var(--mono);font-size:12px;color:var(--muted)}

.wcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.wcards{grid-template-columns:1fr}.wcards .wc:nth-child(n+3){display:none}}
.wc{background:var(--bg);border:1px solid var(--line);border-radius:13px;padding:16px 17px 14px}
.wc .tags{display:flex;align-items:center;gap:7px;margin-bottom:11px}
.wtag{font-size:10.5px;font-weight:650;padding:3px 8px;border-radius:5px;letter-spacing:.02em}
.wtag.v{background:#EEE7FD;color:#5B21B6}
.wtag.g{background:#E3F3EB;color:#0F7B4F}
.wtag.n{background:var(--surface-2);color:var(--text-2)}
.wc .age{margin-left:auto;font-size:10.5px;color:var(--muted)}
.wc h5{margin:0 0 4px;font-size:13.5px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.wc .by{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-bottom:13px}
.wc .amt{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px}
.wc .amt b{font-family:var(--mono);font-size:14px;font-weight:600}
.wc .amt b em{font-style:normal;color:var(--muted);font-weight:400}
.wc .amt span{font-family:var(--mono);font-size:11.5px;color:var(--text-2)}
/* `display:block` is load-bearing: .bar is a <span>, and height does not apply
   to an inline box. Without it the fill resolved height:100% against nothing,
   rendered as a tall violet column bursting out of the card, and shoved the
   stat row below it out of the frame. */
.wc .bar{display:block;height:4px;border-radius:99px;background:var(--surface-2);
         overflow:hidden}
.wc .bar i{display:block;height:100%;background:var(--pop);border-radius:99px}
.wc .st{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px;
        padding-top:11px;border-top:1px solid var(--line)}
.wc .st span{display:block;font-size:9.5px;color:var(--muted);text-transform:uppercase;
        letter-spacing:.06em;margin-bottom:2px}
.wc .st b{font-family:var(--mono);font-size:12.5px;font-weight:500}


/* ── gradients, used where they mean something ──────────────────────────────
   Three, and each has a job. A wash behind the hero so the fold has depth
   without a border; a tint on the section that carries the incident, because
   that is the one moment the page raises its voice; and the accent sweep on
   the primary action. Everything else stays flat — gradient everywhere is the
   look this page was rejected for twice. */

/* The wash bleeds 20% past each edge so its falloff is never cut mid-gradient.
   That bleed is also 253px of horizontal scroll on a 1265px window — a blank
   strip to the right of every section. `clip` removes it without creating a
   scroll container, so the sticky nav keeps working; `hidden` would not. The
   gradient is fully transparent well before the viewport edge, so nothing
   visible is lost. */
.hero{position:relative;overflow-x:clip}
.hero::before{content:"";position:absolute;inset:-10% -20% 30% -20%;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 45% at 50% 12%,rgba(109,40,217,.13),transparent 70%),
             radial-gradient(40% 35% at 82% 6%,rgba(14,143,168,.10),transparent 70%)}
body{background:
  linear-gradient(180deg,#FDFCFA 0%,var(--bg) 460px),
  var(--bg)}

/* The incident. The only section allowed to feel different. */
.incident{background:
  linear-gradient(180deg,rgba(176,42,32,.05),transparent 60%),
  linear-gradient(120deg,rgba(109,40,217,.05),transparent 55%)}
.incident .num{background:linear-gradient(96deg,#B02A20,#8A1F17);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Section rhythm: alternate surfaces so eight sections do not read as one
   long scroll. Hairlines were doing this job and doing it too quietly. */
.tint{background:linear-gradient(180deg,var(--surface),rgba(255,255,255,0));
      border-block:1px solid var(--line)}

/* Campaign grid on the page itself, not only inside the hero frame. */
.live{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px;margin-top:26px}
.live .wc{background:var(--surface)}
.livefoot{display:flex;align-items:center;gap:14px;margin-top:26px}

/* Footer, in columns like every platform in this market. */
footer{border-top:1px solid var(--line);margin-top:0;padding:56px 0 60px;
       background:linear-gradient(180deg,rgba(255,255,255,0),var(--surface))}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;margin-bottom:40px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}}
.fgrid h5{margin:0 0 14px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
          color:var(--muted);font-family:var(--mono);font-weight:600}
.fgrid a{display:block;font-size:15px;color:var(--text-2);margin-bottom:10px}
.fgrid a:hover{color:var(--text);text-decoration:none}
.fblurb{font-size:15px;color:var(--text-2);max-width:34ch;margin:14px 0 0;line-height:1.5}
.fbot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
      padding-top:26px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}


/* ── one block, one screen ──────────────────────────────────────────────────
   The product frame used to sit at the bottom of the hero, so all a visitor
   saw at the fold was its chrome bar and the top centimetre of a card. A
   sliver of a thing reads as an accident — the page looks mis-scrolled rather
   than designed. Either show it or do not.

   The hero is now exactly one viewport with its content centred, and the
   frame is its own block below. Scrolling reveals it whole, which is the
   moment it earns. */

.hero.stage{position:relative;min-height:100svh;display:flex;flex-direction:column;
            justify-content:flex-start;padding:clamp(34px,7vh,80px) 0 84px}
.hero .window{display:none}          /* the frame lives in its own section now */

.showcase{padding:0 0 96px;margin-top:-8px}
.showcase .window{margin-top:0;border-radius:18px;
  box-shadow:0 40px 100px -40px rgba(109,40,217,.32),0 2px 8px rgba(21,19,16,.06)}
.showcase .lead{text-align:center;margin:0 auto 34px;max-width:46ch}
.showcase .lead h2{margin-bottom:10px}
.showcase .lead p{margin:0;color:var(--text-2)}

/* A quiet cue that there is more, rather than a section half in view. */
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
           display:block;width:26px;height:26px;opacity:.4;color:var(--muted)}
.scrollcue svg{display:block;width:100%;height:100%}
@media(prefers-reduced-motion:no-preference){
  .scrollcue{animation:nudge 2.4s ease-in-out infinite}
  @keyframes nudge{0%,100%{transform:translateX(-50%) translateY(0)}
                   50%{transform:translateX(-50%) translateY(5px)}}
}

/* ── header, immersed ───────────────────────────────────────────────────────
   Theirs sits on the page rather than on a bar across it. Ours had a solid
   band and a hard rule from the first pixel, which cuts the top of the screen
   in two. Transparent over the hero, and it earns its background only once
   there is content behind it to separate from. */
nav{background:transparent;backdrop-filter:none;border-bottom:1px solid transparent;
    transition:background .22s ease,border-color .22s ease,backdrop-filter .22s ease}
nav[data-stuck="true"]{background:rgba(250,248,245,.82);backdrop-filter:blur(14px);
    border-bottom-color:var(--line)}

/* ── architecture diagram ──
   Inline SVG rather than a rendered mermaid block: this page loads nothing
   from anywhere else, and a diagram is not worth making the page depend on
   somebody's CDN. It scrolls inside its own box on narrow screens instead of
   shrinking to unreadable, and carries a <desc> so it is not a blank to a
   screen reader. */
.dia{margin:34px 0 0;padding:0;overflow-x:auto;border:1px solid var(--line);
     border-radius:16px;background:var(--surface)}
.dia svg{display:block;min-width:820px;margin:0 auto;padding:24px 20px}
.dia figcaption{border-top:1px solid var(--line);background:var(--surface-2);
     padding:16px 22px;font-size:14.5px;color:var(--text-2);line-height:1.6;
     position:sticky;left:0;max-width:100%}

.d-box rect{fill:var(--surface);stroke:var(--line-hi);stroke-width:1.25}
.d-settle{fill:#F3EEFE;stroke:var(--pop);stroke-width:1.5}
.d-logbox{fill:var(--surface-2);stroke:var(--line-hi);stroke-width:1.25;stroke-dasharray:4 3}
/* Both forms: `.d-edge path` for a wrapping <g>, `path.d-edge` for a lone path.
   The descendant selector alone silently dropped every standalone connector. */
.d-edge path,path.d-edge,.d-refused-line{fill:none;stroke:var(--line-hi);stroke-width:1.5;
              marker-end:url(#ar)}
.d-edge.d-pop path{stroke:var(--pop);stroke-width:2;marker-end:url(#ar-pop)}
.d-edge.d-dash path{stroke-dasharray:5 4;marker-end:none}
.d-refused-line{stroke-dasharray:5 4}
.d-t text,text.d-t{font-family:var(--sans);font-size:15px;font-weight:600;fill:var(--text);
              text-anchor:middle;letter-spacing:-.01em}
.d-s text,text.d-s{font-family:var(--mono);font-size:11px;fill:var(--muted);text-anchor:middle;
              letter-spacing:.02em}
.d-refused{font-family:var(--sans);font-size:14px;font-weight:600;fill:var(--bad);
           text-anchor:start}
text.d-left{text-anchor:start}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE

   One ladder — 1024 / 820 / 640 / 430 — rather than the seven ad-hoc widths
   this file had grown (700, 760, 780, 820, 900, 480). Scattered breakpoints
   are why a layout can be correct at 1280 and broken at 480: nobody ever
   checks the widths that were never named.

   Backstop first. A single element bleeding past the viewport gives the
   visitor a page they can scroll sideways into blank canvas, and it is not
   obvious from inside the layout which element did it. `clip` contains that
   without creating a scroll container, so `position:sticky` on the nav keeps
   resolving against the viewport. It is a safety net, not a fix — every
   known bleed below is fixed at its cause.
   ══════════════════════════════════════════════════════════════════════════ */

html,body{overflow-x:clip}

/* ── the nav, which was the real bug ──
   `Start earning today` is 176px and must not wrap, and below ~510px the
   brand, the link row and that button no longer fit on one line. The button
   won, overflowing 118px past the right edge and taking the whole page's
   scroll width with it. Links yield before the action does: what someone came
   to do survives longer than what they might read. */
nav .wrap{min-width:0}
nav .links{min-width:0}

@media(max-width:1024px){
  .wrap{padding-inline:22px}
  section{padding:76px 0}
  .hero{padding:76px 0 68px}
  .hero.page{padding:52px 0 60px}
}

@media(max-width:820px){
  .steps,.split{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr;gap:34px}
  .side{padding:28px 24px}
  .step{padding:26px 24px}
}

@media(max-width:640px){
  nav .links{display:none}          /* brand + action only */
  nav .wrap{height:64px;gap:12px}
  nav .brand{margin-right:auto}
  .wrap{padding-inline:18px}
  section{padding:56px 0}
  .hero{padding:56px 0 48px}
  .hero.page{padding:40px 0 44px}
  .hero.stage{padding-top:clamp(24px,5vh,48px);padding-bottom:60px}
  .row{gap:10px;margin:26px 0 12px}
  .btn{font-size:16px;padding:15px 24px}
  .fgrid{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr;gap:28px}
  .foot .about{max-width:none}
  .next{flex-direction:column;align-items:flex-start;gap:10px}
  /* Long mono identifiers are the one thing that will not wrap on its own. */
  td.mono,.mono{overflow-wrap:anywhere}
  table{font-size:13.5px}
  th,td{padding-block:10px}
}

@media(max-width:430px){
  nav .cta{font-size:13.5px;padding:9px 15px}
  /* margin-right stays auto — it is what holds the action against the right
     edge once the link row is gone. Setting it to 0 here parked the button
     against the wordmark with the whole right half of the bar empty. */
  nav .brand{font-size:16px;margin-right:auto}
  .wrap{padding-inline:16px}
  section{padding:44px 0}
  .btn{font-size:15.5px;padding:14px 20px;width:100%;text-align:center}
  .row{width:100%}
  .fgrid{grid-template-columns:1fr}
  .foot-base{font-size:12px}
  .num-cap{font-size:12px}
  .badge{font-size:12.5px;padding:6px 12px 6px 7px}
  .step .n{width:34px;height:34px;margin-bottom:16px}
}

/* Wide content scrolls inside its own box rather than widening the page.
   Both already declare this; stated once more here so the rule is visible
   next to everything else that governs narrow screens. */
.term,.dia,.window{max-width:100%}

/* ══════════════════════════════════════════════════════════════════════════
   CONTENT REWARDS' PAGE FRAME

   Read off their live /brand and creators pages. Four moves carry their
   layout, and we had none of them:

   1. A CTA band between every section, always the same button and the same
      trust line under it. The page never goes more than one screen without
      offering the action again.
   2. An eyebrow label above every h2, not only in the hero — it tells you
      which part of the argument you are in.
   3. A bento grid where some cards carry a number instead of prose.
   4. A footer in named groups under an oversized wordmark.

   Their palette is orange on black. Ours stays violet on warm off-white:
   the frame is what was worth taking.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the repeating CTA band ── */
.band{border-block:1px solid var(--line);
      background:linear-gradient(180deg,rgba(109,40,217,.045),rgba(109,40,217,0));
      padding:38px 0;text-align:center}
.band .btn{margin:0}
.band .trust{display:block;margin-top:13px;font-family:var(--mono);font-size:12.5px;
             color:var(--muted);letter-spacing:.04em}
.band .trust b{color:var(--text-2);font-weight:600}

/* ── section headers, their rhythm: eyebrow, heading, one line under ── */
.shead{text-align:center;max-width:52ch;margin:0 auto 40px}
.shead .eyebrow{color:var(--pop);margin-bottom:12px}
.shead h2{margin-bottom:12px}
.shead p{margin:0;font-size:18px;color:var(--muted)}

/* ── bento: prose cards and stat cards in one grid ── */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:30px}
.bento .b{grid-column:span 2;border:1px solid var(--line);border-radius:20px;
          padding:28px 26px;background:var(--surface);display:flex;flex-direction:column}
.bento .b.wide{grid-column:span 3}
.bento .b.half{grid-column:span 3}
.bento .b h3{margin-bottom:8px}
.bento .b p{margin:0;font-size:16px;color:var(--text-2)}
/* The number is the card, so it sits above the words rather than beside them. */
.bento .b .stat{font-family:var(--mono);font-size:52px;font-weight:600;letter-spacing:-.04em;
                line-height:1;color:var(--pop);margin-bottom:14px}
.bento .b .stat.ok{color:var(--ok)}
.bento .b .stat.small{font-size:34px}
.bento .b .mark{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
                font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
                text-transform:uppercase;font-weight:700;padding:6px 12px;border-radius:99px;
                background:var(--pop);color:#fff;margin-bottom:16px}
.bento .b .mark.ok{background:var(--ok)}
.bento .b .foot{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:12px;
                color:var(--muted)}
@media(max-width:1024px){.bento{grid-template-columns:repeat(4,1fr)}
                         .bento .b,.bento .b.wide,.bento .b.half{grid-column:span 2}}
@media(max-width:640px){.bento{grid-template-columns:1fr;gap:12px}
                        .bento .b,.bento .b.wide,.bento .b.half{grid-column:span 1}
                        .bento .b{padding:24px 22px}
                        .bento .b .stat{font-size:44px}}

/* ── footer wordmark ── */
.fmark{font-size:clamp(46px,11vw,132px);font-weight:700;letter-spacing:-.05em;line-height:.9;
       color:var(--line-hi);margin:52px 0 0;text-align:left;user-select:none;
       text-transform:uppercase}
@media(max-width:640px){.fmark{margin-top:36px}}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE MENU

   The responsive pass hid the link row below 640px because the wordmark, the
   links and the action no longer fit on one line. That fixed the overflow and
   introduced a worse bug: six of six navigation destinations became
   unreachable on a phone, with no control to reach them.

   Hiding something is only a layout decision if it has somewhere else to go.

   No JS is required to reach any of it — the footer carries every destination
   and always has, so a browser with scripting off still has a complete route
   through the site. The button is an enhancement over that, not a
   replacement for it.
   ══════════════════════════════════════════════════════════════════════════ */

.burger{display:none;width:40px;height:40px;padding:10px 9px;border:0;background:none;
        cursor:pointer;flex:none;flex-direction:column;justify-content:space-between;
        margin-left:4px;border-radius:9px}
.burger:hover{background:var(--surface-2)}
.burger:focus-visible{outline:2px solid var(--pop);outline-offset:2px}
.burger span{display:block;height:2px;border-radius:2px;background:var(--text);
             transition:transform .18s ease,opacity .15s ease}
/* The bars become an X, so the control shows its own state rather than
   relying on the panel being visible to tell you it is open. */
nav[data-open="true"] .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
nav[data-open="true"] .burger span:nth-child(2){opacity:0}
nav[data-open="true"] .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media(max-width:640px){
  .burger{display:flex}
  /* Overriding the earlier `display:none`, which is why this block sits after
     the responsive ladder rather than inside it. */
  /* No transition on this panel, deliberately.
     Two attempts to fade it in both shipped it broken: `visibility` is not
     interpolable, so giving it a duration parked it on the from-value and
     every link stayed unclickable; correcting that left opacity stuck at 0
     instead. The animation was decoration on a control whose only job is to
     reach six links. Instant open has no failure mode, and the burger still
     animates into an X so the control shows its own state. */
  nav .links{display:none;position:absolute;left:0;right:0;top:100%;
             background:var(--surface);border-bottom:1px solid var(--line);
             padding:8px 18px 16px;
             box-shadow:0 22px 44px -28px rgba(21,19,16,.4)}
  nav[data-open="true"] .links{display:block}
  nav{position:sticky}
  nav .wrap{position:relative}
  /* 48px rows: a nav link you have to aim at is a nav link you miss. */
  nav a.l,nav a.l.opt{display:flex;align-items:center;min-height:48px;font-size:16.5px;
                      border-bottom:1px solid var(--line)}
  nav a.l:last-child{border-bottom:0}
  nav a.l[aria-current="page"]{color:var(--pop);font-weight:600}
}
@media(prefers-reduced-motion:reduce){
  nav .links,.burger span{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT AT THE FOLD

   The earlier arrangement put the product frame at the bottom of the hero,
   where all that showed above the fold was its chrome bar and the top
   centimetre of a card. A sliver of a rectangle reads as a mis-scrolled page
   rather than a designed one, so the frame was moved to its own section and
   the hero became text with a scroll cue.

   That solved the sliver and lost the point: the fold said what we do without
   ever showing it. Three tilted, overlapping cards crop honestly — a
   composition that continues past the edge looks intentional in a way a
   bisected browser window never does.

   Below 820px it does not render at all. On a phone the hero is already a
   full screen of type, and a shrunken card fan under it would be decoration
   competing with the one button that matters.
   ══════════════════════════════════════════════════════════════════════════ */

.fan{display:none}

@media(min-width:821px){
  .hero.stage{padding-bottom:0}
  .fan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
       max-width:940px;margin:44px auto 0;padding-bottom:10px;
       perspective:1400px;pointer-events:none}
  .fc{border:1px solid var(--line-hi);border-radius:16px;background:var(--surface);
      padding:16px 18px 15px;text-align:left;
      box-shadow:0 30px 70px -34px rgba(21,19,16,.42),0 2px 6px rgba(21,19,16,.05)}
  /* The outer two sit back and lower; the middle one comes forward. Rotation
     on Y rather than Z, so the group reads as depth rather than as cards
     scattered on a table. */
  .fc.l{transform:rotateY(16deg) rotate(-3deg) translateY(24px) translateX(14px) scale(.94);
        transform-origin:right center}
  .fc.r{transform:rotateY(-16deg) rotate(3deg) translateY(24px) translateX(-14px) scale(.94);
        transform-origin:left center}
  .fc.c{transform:translateY(-6px);z-index:2;position:relative;
        box-shadow:0 44px 90px -36px rgba(109,40,217,.42),0 3px 10px rgba(21,19,16,.07)}

  .fc .tags{display:flex;gap:6px;margin-bottom:10px}
  .fc h5{margin:0 0 9px;font-size:14px;font-weight:600;letter-spacing:-.012em;line-height:1.3}
  .fc .amt{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px}
  .fc .amt b{font-family:var(--mono);font-size:14px;font-weight:600}
  .fc .amt b em{font-style:normal;color:var(--muted);font-weight:400}
  .fc .amt span{font-family:var(--mono);font-size:11px;color:var(--text-2)}
  .fc .bar{display:block;height:4px;border-radius:99px;background:var(--surface-2);
           overflow:hidden}
  .fc .bar i{display:block;height:100%;background:var(--pop);border-radius:99px}
  .fc .st{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;
          padding-top:11px;border-top:1px solid var(--line)}
  .fc .st span{display:block;font-size:9.5px;color:var(--muted);text-transform:uppercase;
               letter-spacing:.06em;margin-bottom:2px}
  .fc .st b{font-family:var(--mono);font-size:12px;font-weight:500}

  /* One card carries the outcome, because the whole argument is that money
     actually moves at the end of the hold. */
  .fc .stamp{position:absolute;right:14px;bottom:-11px;font-family:var(--mono);font-size:10.5px;
             font-weight:700;letter-spacing:.07em;text-transform:uppercase;
             padding:5px 11px;border-radius:99px;background:var(--ok);color:#fff;
             box-shadow:0 8px 20px -8px rgba(15,123,79,.7)}
}

/* Short laptop screens: the fan is the first thing to give, because the
   button has to stay above the fold and a picture does not. */
@media(min-width:821px) and (max-height:760px){
  .fan{max-width:780px;margin-top:26px}
  .fc .st{display:none}
}
@media(min-width:821px) and (max-height:620px){
  .fan{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   ONE SURFACE

   The page used to be a stack of panels separated by rules: a hairline under
   the header, another between every block. Each line is a small instruction to
   stop reading, and eight of them turn one argument into eight leaflets.

   The seams are gone. Depth now comes from where things sit and how much air
   is around them, which is the difference between a page you read through and
   a page you page through.
   ══════════════════════════════════════════════════════════════════════════ */

hr{display:none}

/* The header floats on the page rather than sitting on a shelf above it. It
   still gains a background once content scrolls under — without that, text
   passes through the wordmark — but it gains it as a blur, not a border. */
nav{border-bottom:0;background:transparent;backdrop-filter:none;
    transition:background-color .2s ease,backdrop-filter .2s ease}
nav[data-stuck="true"]{background:rgba(250,248,245,.72);backdrop-filter:blur(14px) saturate(1.4)}
@media(max-width:640px){
  /* The panel needs an edge to sit against; a shadow gives it one. */
  nav[data-open="true"]{background:rgba(250,248,245,.96);backdrop-filter:blur(14px)}
}

/* Alternating grounds instead of lines. The shift is barely perceptible on its
   own, which is the point: it separates without announcing that it has. */
.band{border-block:0}
.tint{border-block:0}
footer{border-top:0}
.list,.faq{border-top:0}
.item,.qa{border-bottom:1px solid var(--line)}
.item:last-child,.qa:last-child{border-bottom:0}

/* ── type scale ──
   The display sizes were set for a headline of three or four words. At the
   length these actually run — "Only pay for views that stayed" — they filled
   the screen and left the sentence under them looking like a footnote. */
h1{font-size:clamp(38px,6.4vw,74px);line-height:1.0;letter-spacing:-.035em}
h2{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.028em}
.lede{font-size:clamp(17.5px,1.5vw,21px)}

/* ══════════════════════════════════════════════════════════════════════════
   ONE BLOCK, ONE SCREEN

   Every major block is sized against the viewport rather than against a fixed
   pixel padding, so a block ends near where the screen does instead of the
   next one peeking in by a random amount. `svh` rather than `vh`: on a phone
   `vh` measures the viewport with the browser chrome retracted, so a block
   sized in `vh` is always taller than what you can actually see.
   ══════════════════════════════════════════════════════════════════════════ */

section{padding:clamp(56px,9vh,104px) 0}
.band{padding:clamp(30px,5vh,46px) 0}
.showcase{padding:0 0 clamp(56px,9vh,104px)}

@media(max-width:1024px){section{padding:clamp(48px,7vh,76px) 0}}
@media(max-width:640px){section{padding:clamp(40px,6vh,60px) 0}}

/* ══════════════════════════════════════════════════════════════════════════
   THE WASH IS THE PAGE, NOT THE HERO

   The violet wash was a pseudo-element on `.hero`, so it began where the hero
   began — under the header, not at the top of the document. Above it sat the
   plain body gradient, and the boundary between the two showed as a pale strip
   across the top of every page. Scrolling up past the top made it obvious,
   because `html` had no background of its own and the overscroll area painted
   whatever the canvas fell back to.

   Two fixes, and both are needed. `html` gets an explicit ground so nothing
   above or below the document is ever a different colour. The wash moves onto
   the document itself so it starts at pixel zero and runs under the header
   without a seam.
   ══════════════════════════════════════════════════════════════════════════ */

html{background:var(--bg)}

body::before{
  content:"";position:absolute;top:0;left:0;right:0;z-index:-1;pointer-events:none;
  height:min(820px,95svh);
  background:
    radial-gradient(58% 46% at 50% 0%,rgba(109,40,217,.15),transparent 72%),
    radial-gradient(42% 36% at 84% 0%,rgba(14,143,168,.11),transparent 70%),
    linear-gradient(180deg,#FDFCFA 0%,var(--bg) 90%);
}

/* Superseded — it is the seam. */
.hero::before{display:none}


/* ── audience switch ──
   Two links, not two tabs. The header's "For brands" navigates; this said the
   same words and swapped a panel instead. One label should mean one thing. */
.toggle{position:relative;display:inline-flex;padding:5px;border-radius:100px;
        border:1px solid var(--line-hi);background:var(--surface);margin-bottom:26px;gap:2px}
.toggle .seg{display:inline-flex;align-items:center;justify-content:center;
             min-height:40px;padding:0 22px;border-radius:99px;font-size:15px;font-weight:600;
             color:var(--text-2);text-decoration:none;white-space:nowrap;
             transition:color .15s ease,background-color .15s ease}
.toggle .seg:hover{color:var(--text);text-decoration:none}
.toggle .seg.on{background:var(--pop);color:#fff}
.toggle .seg.on:hover{color:#fff}
.toggle .seg:focus-visible{outline:2px solid var(--pop);outline-offset:3px}
@media(max-width:430px){.toggle .seg{padding:0 16px;font-size:14px;min-height:38px}}

/* ── the reference-page header owns its screen ──
   The header was short enough that the next section's eyebrow and heading
   cleared the fold with it, so the first thing you saw was two blocks
   competing. Same rule the landing hero already follows: one block, one
   screen, and the next one starts when you scroll.

   Applied to all three reference pages rather than architecture alone — the
   structure is identical on security and testing, so the defect was too. */
.hero.page{min-height:calc(100svh - 72px);display:flex;flex-direction:column;
           justify-content:center;padding-block:clamp(40px,7vh,72px)}
@media(max-width:640px){
  .hero.page{min-height:auto;justify-content:flex-start}
}

/* ── brand enquiry form ──
   Two columns on desktop because the short fields pair naturally; one column
   below 720px because a half-width input on a phone is a scroll-to-read box.
   Errors live under their own field rather than in a summary at the top: a
   list saying "three problems" makes you hunt for them. */
.enq{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;margin-top:34px;
     max-width:760px}
.enq .wide{grid-column:1/-1}
@media(max-width:720px){.enq{grid-template-columns:1fr;gap:18px}}

.ff{display:flex;flex-direction:column;gap:7px;min-width:0}
.ff label{font-size:14.5px;font-weight:600;color:var(--text);letter-spacing:-.005em}
.ff .req{color:var(--pop)}
.ff input,.ff select,.ff textarea{
  font:inherit;font-size:16px;color:var(--text);background:var(--surface);
  border:1px solid var(--line-hi);border-radius:12px;padding:13px 15px;width:100%;
  transition:border-color .14s ease,box-shadow .14s ease}
.ff textarea{resize:vertical;min-height:112px;line-height:1.5}
.ff input:focus,.ff select:focus,.ff textarea:focus{
  outline:none;border-color:var(--pop);box-shadow:0 0 0 3px rgba(109,40,217,.14)}
.ff input[aria-invalid="true"],.ff select[aria-invalid="true"],.ff textarea[aria-invalid="true"]{
  border-color:var(--bad);box-shadow:0 0 0 3px rgba(176,42,32,.12)}
.ff .hint{margin:0;font-size:13.5px;color:var(--muted)}
.ff .err{margin:0;font-size:13.5px;color:var(--bad);font-weight:500}

.ff.check label{flex-direction:row;display:flex;align-items:flex-start;gap:11px;
                font-weight:450;color:var(--text-2);font-size:15.5px;line-height:1.45;
                cursor:pointer}
.ff.check input{width:19px;height:19px;flex:none;margin-top:1px;accent-color:var(--pop)}

.enq .btn{justify-self:start}
.enq .fine{margin-top:12px}
.said{margin:14px 0 0;padding:13px 16px;border-radius:12px;font-size:15px;
      background:#EAF6F0;color:var(--ok);border:1px solid rgba(15,123,79,.25)}
.said[data-bad="true"]{background:#FBECEA;color:var(--bad);border-color:rgba(176,42,32,.25)}

/* ── sign-up card ──
   Centred, one action, nothing else on the screen. A page whose only job is
   "press this button" should not also be selling. */
body.plain{min-height:100svh;display:flex;flex-direction:column}
main.centre{flex:1;display:flex;flex-direction:column;align-items:center;
            justify-content:center;padding:clamp(28px,6vh,64px) 22px}
.card{width:100%;max-width:470px;background:var(--surface);
      border:1px solid var(--line);border-radius:22px;padding:clamp(28px,4vw,42px);
      text-align:center;box-shadow:0 36px 90px -50px rgba(21,19,16,.4)}
.card .over{margin:0 0 8px;font-size:14.5px;color:var(--muted)}
.card h1{font-size:clamp(26px,3.6vw,33px);line-height:1.15;margin-bottom:26px;letter-spacing:-.028em}
.card .gbtn{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
            min-height:52px;border-radius:99px;border:1px solid var(--line-hi);
            background:var(--surface);color:var(--text);font-size:16px;font-weight:650;
            text-decoration:none;transition:border-color .14s ease,box-shadow .14s ease}
.card .gbtn:hover{border-color:var(--muted);text-decoration:none;
                  box-shadow:0 6px 18px -10px rgba(21,19,16,.3)}
.card .gbtn.off{color:var(--muted);cursor:default;font-weight:500;font-size:14.5px;
                border-style:dashed}
.card .agree{margin:16px 0 0;font-size:13.5px;color:var(--muted);line-height:1.55}
.card .agree a{color:var(--text-2);text-decoration:underline}
.card .agree a:hover{color:var(--pop)}
.rule{display:flex;align-items:center;gap:14px;margin:28px 0 20px;
      font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
      color:var(--muted)}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--line)}
.plainlist{list-style:none;padding:0;margin:0 0 22px;text-align:left}
.plainlist li{font-size:15px;color:var(--text-2);line-height:1.55;margin-bottom:13px;
              padding-left:18px;position:relative}
.plainlist li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
                      border-radius:50%;background:var(--pop)}
.plainlist b{color:var(--text);font-weight:600}
.card .fine{text-align:center}
main.centre .alt{margin:22px 0 0;font-size:14.5px;color:var(--muted)}

/* ── the form has a page to itself now ──
   Centred, because there is nothing else on the screen to align against. On
   the section it used to share, left alignment matched the prose above it;
   alone on a page, that reads as the layout having lost its right half. */
.enq{margin-inline:auto}
#talk .shead{margin-bottom:8px}
#talk .enq .btn{justify-self:center}
#talk .enq .fine,#talk .enq .said{text-align:center}
#talk .ff.check label{justify-content:center}
@media(min-width:721px){
  #talk .enq .wide:last-of-type{display:flex;flex-direction:column;align-items:center}
}

/* The mark sits with the words rather than replacing them. A logo alone
   assumes the reader knows what it is, and the FAQ exists because many do not. */
.fc .stamp{display:inline-flex;align-items:center;gap:6px}
.fc .stamp svg{flex:none}

/* ── Funding Modal & Suite ── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(12, 11, 10, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-card {
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-hi);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.6);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.14s ease, background 0.14s ease;
}
.modal-close:hover {
  color: var(--text);
  background: var(--line);
}
.modal-header h3 {
  font-size: 22px;
  margin: 4px 0 6px;
  letter-spacing: -0.02em;
}
.fund-status-banner {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.fund-badge-group, .fund-amount-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.fund-label {
  color: var(--muted);
}
.fund-option-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fund-option-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fund-option-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.option-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pop);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.address-copy-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line-hi);
  border-radius: 10px;
  padding: 8px 12px;
  overflow-x: auto;
}
.address-copy-box code {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
  flex: 1;
}
.qr-container {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
}
.qr-container img {
  width: 140px;
  height: 140px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 6px;
}
.web3-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.web3-status-text {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  margin: 0;
}
.external-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.btn.sm {
  min-height: 34px;
  padding: 4px 12px;
  font-size: 13px;
}
.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* ── Creator & Brand Refined Dashboard Utilities ── */
.search-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 240px;
}
.search-input-wrap input {
  padding-left: 36px;
  border-radius: 99px;
  background: var(--surface);
}
.search-input-wrap ::before {
  content: "🔍";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: 0.6;
}
.filter-chips {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-chip {
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.14s ease;
}
.filter-chip:hover {
  border-color: var(--line-hi);
  color: var(--text);
}
.filter-chip.active {
  background: var(--pop);
  border-color: var(--pop);
  color: #fff;
  font-weight: 600;
}
.progress-bar-glow {
  height: 6px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
  position: relative;
}
.progress-fill-glow {
  height: 100%;
  background: linear-gradient(90deg, #7C3AED, #10B981);
  border-radius: 99px;
  transition: width 0.3s ease;
}
.creator-standing-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
}
.creator-standing-badge.exceptional {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.creator-standing-badge.reliable {
  background: rgba(124, 58, 237, 0.15);
  color: #9333EA;
  border: 1px solid rgba(124, 58, 237, 0.3);
}
.creator-standing-badge.unproven {
  background: var(--line);
  color: var(--muted);
}
.verdict-reason-box {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.45;
}

/* ── Onboarding & Campaign Estimator Component Styles ── */
.onboarding-banner {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(16, 185, 129, 0.08));
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.onboarding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.onboarding-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  color: var(--text);
}
.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.onboarding-step-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: start;
}
.onboarding-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pop);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex: none;
}
.onboarding-step-text h4 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 600;
}
.onboarding-step-text p {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

.verification-code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface-hi);
  border: 1px dashed var(--pop);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 10px;
}
.verification-code-box code {
  font-family: var(--num);
  font-size: 14px;
  font-weight: 600;
  color: #10B981;
}

.estimator-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 30px;
}
.estimator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 18px;
}
@media(max-width:768px){ .estimator-grid { grid-template-columns: 1fr; } }
.estimator-output {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.estimator-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.estimator-result-row span {
  font-size: 13px;
  color: var(--muted);
}
.estimator-result-row strong {
  font-family: var(--num);
  font-size: 18px;
  color: var(--text);
}

.checklist-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 22px;
}
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 500;
}
.checklist-item.done {
  border-color: rgba(16, 185, 129, 0.3);
  color: #10B981;
}
.checklist-icon {
  font-size: 16px;
}