/* ============================================================
   Affiliate Discovery — redesign mockup
   Palette inherited from marketing.css so this ports cleanly.
   Type scale, depth and motion are the new part.
   ============================================================ */
:root{
  --ground:#E9EEF2; --ground-2:#DFE6EC; --surface:#F5F8FA; --surface-2:#FFFFFF;
  --line:#CBD5DD; --text:#1A1D21; --text-2:#4E5A66; --text-3:#7C8794;
  --signal:#F2A73B; --signal-ink:#96590A; --signal-deep:#C4821F; --signal-hover:#E09420;
  --on-signal:#100B02; --flux:#12706E; --violet:#5B49D6; --ok:#1F6B4A; --ok-fill:#2E9E6B;
  --danger:#C0392B; --wash-1:rgba(26,29,33,.045); --wash-2:rgba(26,29,33,.075);
  --ink:#0E1114;

  /* Lifted verbatim from marketing.css. Archivo carries a width axis, which
     is what the brand and every heading key off; substituting a static
     grotesk loses the thing that makes the type look like this product. */
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --display:"Archivo","Archivo Expanded",system-ui,sans-serif;

  /* Depth as a system, not per-element guesses. Each step adds one ring of
     contact shadow plus one of ambient, so panels stack legibly on a light
     ground without any of them looking like they are floating. */
  --lift-1:0 1px 2px rgba(14,17,20,.06), 0 2px 8px rgba(14,17,20,.04);
  --lift-2:0 1px 2px rgba(14,17,20,.07), 0 8px 24px rgba(14,17,20,.07);
  --lift-3:0 2px 4px rgba(14,17,20,.08), 0 24px 64px rgba(14,17,20,.12);
  --edge:inset 0 1px 0 rgba(255,255,255,.9);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  margin:0;font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 800;
  line-height:1.02;letter-spacing:-.03em;font-weight:800;
}
p{margin:0}
a{color:inherit}
button{font-family:inherit}
.wrap{max-width:1240px;margin:0 auto;padding-inline:24px}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}

/* ---- eyebrow label, used everywhere a section needs naming -------------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--line);flex:none}
.eyebrow.is-signal{color:var(--signal-ink)}
.eyebrow.is-signal::before{background:var(--signal)}

/* ---- nav ---------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--ground) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s;
}
.nav.is-stuck{border-bottom-color:var(--line);box-shadow:var(--lift-1)}
.nav__in{display:flex;align-items:center;gap:28px;height:64px}
/* The gap was the wordmark being spaced off a 26px glyph in a 64px bar with
   no baseline relationship. 7px and an explicit line-height put the mark and
   the type on the same optical line instead of merely in the same flex row. */
/* Matched to .brand in marketing.css rather than guessed at: 11px gap, the
   wordmark as a single <b> in Archivo at wdth 108 / wght 800, and the amber
   word as an <i> inside it. Two separate text nodes with a flex gap between
   them was the gap -- the space belongs inside the wordmark, not between the
   mark and the words. */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0;line-height:1}
.brand svg{display:block;flex:none}
.brand b{
  font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 800;
  font-size:19px;letter-spacing:-.025em;line-height:1;
}
.brand b i{font-style:normal;color:var(--signal-ink)}
.nav__links{display:flex;gap:2px;margin-left:auto}
.nav__links a{
  font-family:var(--mono);font-size:12.5px;color:var(--text-2);text-decoration:none;
  padding:8px 12px;border-radius:8px;white-space:nowrap;transition:color .16s,background .16s;
}
.nav__links a:hover{color:var(--text);background:var(--wash-1)}
/* The panel carries its own CTA for narrow screens. At desktop the bar's CTA
   is the real one, so this stays out of the inline link row. */
.nav__links .btn{display:none}
/* The two signed-out actions sit as siblings in .nav__in, which has a 28px
   flex gap -- right between the nav links and the CTA block, far too wide
   BETWEEN a pair. The negative margin cancels most of it so they read as one
   control group rather than two unrelated buttons. */
.nav__cta--quiet{margin-right:-18px}
/* Quieter than a ghost button elsewhere on the page: in a header this sits
   beside the thing being sold, and a second outlined button competes with it. */
.nav__in > .nav__cta--quiet{box-shadow:none;color:var(--text-2);padding-inline:12px}
.nav__in > .nav__cta--quiet:hover{color:var(--text);background:var(--wash-1)}

/* The burger. Six inline links plus a button stopped fitting well before the
   700px the old rule waited for: between 700 and 1040 they wrapped onto two
   rows and collided with the brand. */
.nav__burger{
  display:none;margin-left:auto;width:40px;height:40px;border:0;border-radius:10px;
  background:transparent;cursor:pointer;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px var(--line);
}
.nav__burger:hover{background:var(--wash-1)}
.nav__burger i{position:relative;width:17px;height:1.5px;background:var(--text);display:block;transition:all .2s}
.nav__burger i::before,.nav__burger i::after{
  content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--text);transition:all .2s;
}
.nav__burger i::before{top:-5.5px}
.nav__burger i::after{top:5.5px}
.nav__burger[aria-expanded="true"] i{background:transparent}
.nav__burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.nav__burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}

@media (max-width:1040px){
  .nav__in{gap:14px}
  .nav__burger{display:flex}
  .nav__in > .nav__cta{display:none}
  .nav__links{
    position:absolute;left:0;right:0;top:64px;margin:0;display:grid;gap:2px;
    background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--lift-2);
    padding:10px 24px 18px;
  }
  .nav__links[hidden]{display:none}
  .nav__links a{padding:13px 2px;font-size:14.5px;border-radius:0;border-bottom:1px solid var(--line)}
  /* In the burger panel both buttons stack full width, so the negative
     margin that pulls the desktop pair together must not follow them. */
  .nav__links .btn{display:inline-flex;margin-top:12px;width:100%}
  .nav__cta--quiet{margin-right:0}
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:10px;padding:11px 20px;font-size:14px;font-weight:700;
  cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .2s,background .15s;
}
.btn:active{transform:translateY(1px)}
.btn--signal{background:var(--signal);color:var(--on-signal);box-shadow:var(--lift-1),var(--edge)}
.btn--signal:hover{background:var(--signal-hover);box-shadow:var(--lift-2),var(--edge)}
.btn--ink{background:var(--ink);color:#fff;box-shadow:var(--lift-1)}
.btn--ink:hover{box-shadow:var(--lift-2)}
.btn--ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost:hover{background:var(--wash-1)}
.btn--lg{padding:15px 26px;font-size:15px;border-radius:12px}
.btn--block{width:100%}

/* ---- hero --------------------------------------------------------------- */
.hero{position:relative;overflow:clip;padding:64px 0 84px}
/* Grid paper, and a slow amber wash that drifts across it. The motion is the
   only thing on the page that moves without being asked to, so it is kept
   under 4% opacity and 40 seconds -- present at the edge of attention,
   invisible if you look for it. */
.hero__grid{
  position:absolute;inset:-1px;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.42;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);
}
.hero__glow{
  position:absolute;top:-340px;left:50%;width:1100px;height:700px;translate:-50% 0;
  background:radial-gradient(closest-side,rgba(242,167,59,.22),transparent 70%);
  pointer-events:none;animation:drift 40s ease-in-out infinite;
}
@keyframes drift{0%,100%{transform:translateX(-120px)}50%{transform:translateX(120px)}}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start}
/* The console grows from one screen to three as the conversation advances,
   and a static left column left a thousand pixels of empty ground beside the
   plan. Sticky keeps the claim next to the proof of it the whole way down. */
.hero__claim{position:sticky;top:92px}
@media (max-width:1040px){.hero__claim{position:static}}

.kicker{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;
  padding:6px 12px 6px 8px;border-radius:999px;background:var(--surface-2);
  box-shadow:var(--lift-1),inset 0 0 0 1px var(--line);
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.04em;color:var(--text-2);
}
.kicker i{width:7px;height:7px;border-radius:50%;background:var(--ok-fill);box-shadow:0 0 0 3px rgba(46,158,107,.2);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(46,158,107,0)}}

h1.display{
  font-size:clamp(29px,3.05vw,42px);letter-spacing:-.032em;line-height:1.07;
  font-variation-settings:"wdth" 112,"wght" 800;
  text-wrap:balance;
}
h1.display em{font-style:normal;color:var(--signal-ink);position:relative;white-space:nowrap}
/* The underline is drawn rather than styled, so it keeps its weight at every
   size and does not collide with descenders the way text-decoration does. */
h1.display em::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.13em;
  background:var(--signal);opacity:.38;border-radius:2px;
}
.lede{margin-top:22px;font-size:18.5px;line-height:1.52;color:var(--text-2);max-width:46ch}
.lede b{color:var(--text);font-weight:700}

.proof{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.proof span{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--text-2);
  padding:7px 11px;border-radius:8px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
}

/* ---- the console: the centrepiece -------------------------------------- */
.console{
  background:var(--surface);border-radius:18px;box-shadow:var(--lift-3),inset 0 0 0 1px var(--line),var(--edge);
  overflow:hidden;
}
.console__bar{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:var(--ground-2);border-bottom:1px solid var(--line);
}
.lamps{display:flex;gap:6px}
.lamps i{width:9px;height:9px;border-radius:50%;background:#C2CAD3}
.console__title{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.console__step{
  margin-left:auto;display:flex;gap:5px;align-items:center;
  font-family:var(--mono);font-size:11px;color:var(--text-3);
}
.console__step b{color:var(--text);font-weight:700}
.console__body{padding:20px}

/* the ask */
.ask__label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px;display:flex;gap:8px;align-items:center}
.ask__label svg{color:var(--signal-ink)}
.ask__field{
  position:relative;background:var(--surface-2);border-radius:13px;
  box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .18s;
}
.ask__field:focus-within{box-shadow:inset 0 0 0 2px var(--signal),0 0 0 6px rgba(242,167,59,.16)}
.ask__field textarea{
  display:block;width:100%;border:0;background:transparent;resize:none;
  padding:18px 18px 6px;font-family:inherit;font-size:17.5px;line-height:1.45;color:var(--text);
  outline:none;min-height:84px;font-weight:500;
}
.ask__field textarea::placeholder{color:var(--text-3);font-weight:400}
.ask__foot{display:flex;align-items:center;gap:12px;padding:10px 14px 14px}
.ask__hint{font-family:var(--mono);font-size:11.5px;color:var(--text-3)}
.ask__foot .btn{margin-left:auto}

.tries{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center}
.tries__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.chip{
  border:0;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-2);
  padding:7px 13px;border-radius:999px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line);transition:all .15s;
}
.chip:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--signal);background:rgba(242,167,59,.08)}


/* ---- the console's resting state ---------------------------------------
   What the panel shows before anybody asks. Three live figures rather than a
   picture of some, because the claim under them is that every number on this
   page is a query -- and a resting state made of fixtures would be the one
   place that stopped being true. */
.ask__idle{padding:18px 2px 4px}
.ask__idle-row{
  display:flex;align-items:baseline;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line);
}
.ask__idle-row:last-of-type{border-bottom:0}
.ask__idle-n{
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 800;
  font-size:22px;letter-spacing:-.03em;line-height:1;min-width:5.5ch;
  font-variant-numeric:tabular-nums;
}
.ask__idle-k{font-size:13.5px;color:var(--text-2)}
.ask__idle-note{
  margin-top:14px;font-size:12.5px;color:var(--text-3);line-height:1.55;
  padding-left:12px;border-left:2px solid var(--line);
}
.ask-out{padding-top:2px}

/* ---- the processing trace ---------------------------------------------- */
/* This is the part that earns the "cool". It is not a spinner dressed up: it
   narrates the real stages -- the words that survived, the corpus it scanned,
   the ranking it applied -- and every number in it is one the backend already
   computes. A progress bar tells you to wait. This tells you what you are
   about to be shown, which is the only honest way to spend four seconds. */
.trace{display:grid;gap:2px}
.trace__row{
  display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:center;
  padding:11px 4px;font-size:14px;color:var(--text-3);
  opacity:0;transform:translateY(6px);transition:opacity .32s,transform .32s,color .32s;
}
.trace__row.is-in{opacity:1;transform:none}
.trace__row.is-done{color:var(--text)}
.trace__dot{
  width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);
  display:grid;place-items:center;
}
.is-done .trace__dot{background:var(--ok-fill);box-shadow:none}
.is-done .trace__dot::after{content:"";width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;rotate:45deg;translate:0 -1px}
.is-live .trace__dot{box-shadow:inset 0 0 0 1.5px var(--signal)}
.is-live .trace__dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal);animation:blip .9s ease-in-out infinite}
@keyframes blip{50%{opacity:.25;transform:scale(.7)}}
.trace__what b{font-weight:700}
.trace__val{font-family:var(--mono);font-size:12px;color:var(--text-2)}
.trace__row:not(.is-done) .trace__val{color:var(--text-3)}

/* ---- results ----------------------------------------------------------- */
.res__head{display:flex;align-items:flex-start;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.res__count{display:flex;align-items:baseline;gap:8px}
.res__count .n{font-size:40px;font-weight:900;letter-spacing:-.04em;line-height:1}
.res__count .u{font-size:15px;font-weight:600;color:var(--text-2)}
.res__note{margin-top:7px;font-size:13.5px;color:var(--text-2);max-width:50ch}
.res__reset{margin-left:auto;flex:none;border:0;background:transparent;cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);padding:5px 8px;border-radius:7px}
.res__reset:hover{background:var(--wash-1);color:var(--text)}

/* Coverage tiers. The bar is the honest part: it shows at a glance that the
   headline is a union with a strong core, which a single number cannot. */
/* Coverage as ONE stacked bar rather than four separate ones.
   Four bars invited the reader to compare their lengths, and the lengths were
   a share of nothing -- the tier with the smallest count had the longest bar,
   which is exactly backwards. A single bar is a composition: the amber
   segment IS the full-coverage share of the headline, and it needs no axis
   to be read correctly. */
.tiers{padding:16px 0;border-bottom:1px solid var(--line)}
.tierbar{display:flex;height:11px;border-radius:6px;overflow:hidden;background:var(--ground-2)}
.tierbar span{height:100%;width:0;transition:width .8s cubic-bezier(.22,1,.36,1)}
.tierkeys{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:11px}
.tk{display:flex;align-items:baseline;gap:7px;font-size:12px;color:var(--text-2)}
.tk i{width:8px;height:8px;border-radius:2px;flex:none;translate:0 -1px}
.tk b{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.tk.is-full{color:var(--text)}
.tk.is-full b{color:var(--signal-ink)}

.bd{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.bd__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:9px}
.geo{display:flex;height:8px;border-radius:5px;overflow:hidden;background:var(--ground-2)}
.geo span{height:100%}
.geo__keys{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;font-size:12px;color:var(--text-2)}
.geo__keys b{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.nets{display:flex;flex-wrap:wrap;gap:6px}
.net{font-size:12px;color:var(--text-2);padding:5px 10px;border-radius:7px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.net b{font-family:var(--mono);font-size:11px;color:var(--text);margin-left:5px}

.rows{list-style:none;margin:0;padding:4px 0 0}
.row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:13px 12px;margin:0 -12px;border-radius:11px;transition:background .15s;
}
.row:hover{background:var(--wash-1)}
.row__dom{font-weight:700;font-size:15px;letter-spacing:-.01em}
.row__cat{font-size:12px;color:var(--text-3);margin-top:2px}
.row__cov{display:inline-flex;gap:3px;margin-left:8px;vertical-align:middle}
.row__cov i{width:5px;height:5px;border-radius:50%;background:var(--signal)}
.row__cov i.off{background:var(--line)}
.stats{display:flex;gap:22px}
.stat{text-align:right}
.stat dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.stat dd{margin:2px 0 0;font-family:var(--mono);font-size:14px;font-weight:700}

.locked{display:grid;gap:7px;padding:14px 0 4px}
.locked i{height:14px;border-radius:5px;background:linear-gradient(90deg,var(--ground-2),var(--line),var(--ground-2));background-size:200% 100%;animation:shim 2.4s linear infinite;opacity:.65}
.locked i:nth-child(2){width:86%}.locked i:nth-child(3){width:72%}
@keyframes shim{to{background-position:-200% 0}}

/* ---- turn two: the goals question -------------------------------------- */
/* Conversational, but not a chat. A chat asks an open question and gets an
   essay; this asks three closed ones the plan actually needs and can be
   answered with the mouse in about four seconds. The conversational part is
   the framing, not the input method. */
.turn{display:grid;gap:18px}
.said{
  display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;
}
.said__av{
  width:26px;height:26px;border-radius:8px;background:var(--ink);color:var(--signal);
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:700;
}
.said__b{font-size:15.5px;line-height:1.5;color:var(--text)}
.said__b b{font-weight:700}
.said--me .said__av{background:var(--signal);color:var(--on-signal)}
.said--me .said__b{color:var(--text-2)}

.qgrid{display:grid;gap:14px;padding:4px 0 0}
.q__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:7px}
.opts{display:flex;flex-wrap:wrap;gap:7px}
.opt{
  border:0;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--text-2);
  padding:9px 14px;border-radius:10px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line);transition:all .14s;
}
.opt:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--card-hover-line,#A3AFBB)}
.opt[aria-pressed="true"]{
  background:var(--ink);color:#fff;box-shadow:var(--lift-1);
}

/* ---- the plan ---------------------------------------------------------- */
.plan{display:grid;gap:12px}
.chan{
  border-radius:14px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line),var(--lift-1);
  overflow:hidden;position:relative;
}
.chan__h{display:flex;align-items:center;gap:12px;padding:15px 17px}
.chan__ic{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--ground-2);color:var(--text-2);
}
.chan--on .chan__ic{background:var(--signal);color:var(--on-signal)}
.chan__t{font-weight:800;font-size:15px;letter-spacing:-.015em}
.chan__s{font-size:12.5px;color:var(--text-3);margin-top:1px}
.chan__tag{
  margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px;background:var(--ground-2);color:var(--text-3);
}
.chan--on .chan__tag{background:rgba(46,158,107,.14);color:var(--ok)}
.chan__body{padding:0 17px 17px;display:grid;gap:11px}
.step{display:grid;grid-template-columns:auto 1fr;gap:11px;font-size:13.5px;color:var(--text-2);line-height:1.5}
.step__n{
  font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--signal-ink);
  background:rgba(242,167,59,.16);border-radius:5px;padding:2px 6px;height:fit-content;
}
.step b{color:var(--text);font-weight:700}
.step .q{display:block;margin-top:4px;padding:9px 12px;border-radius:9px;background:var(--ground-2);font-size:13px;color:var(--text);font-style:italic}

/* The walled channels are drawn, not described. Blur plus a lock reads as
   "there is more of this"; a sentence saying so reads as a paywall. */
.chan--off .chan__body{filter:blur(5px);opacity:.5;user-select:none;pointer-events:none}
.chan--off::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--surface) 92%,transparent));
}
.chan__lock{
  position:absolute;inset:auto 0 0 0;z-index:2;display:flex;align-items:center;gap:8px;
  justify-content:center;padding:12px;font-size:12.5px;font-weight:600;color:var(--text-2);
}

.wall{
  margin-top:4px;border-radius:14px;padding:20px;text-align:center;
  background:linear-gradient(180deg,var(--surface-2),var(--ground-2));
  box-shadow:inset 0 0 0 1px var(--line),var(--lift-2);
}
.wall__t{font-size:19px;font-weight:900;letter-spacing:-.025em}
.wall__b{font-size:13.5px;color:var(--text-2);margin:7px auto 15px;max-width:44ch;line-height:1.5}
.wall__fine{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--text-3)}
.saved{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ok);
  background:rgba(46,158,107,.12);padding:6px 11px;border-radius:999px;
}



/* ---- live app panels ----------------------------------------------------
   What a frame holds when no capture is on disk. Not an empty state: the
   same information the screenshot carried, drawn from the same corpus the
   app reads, so the page is finished either way and the numbers are today's
   rather than the day somebody took a picture. */
.panel{
  aspect-ratio:2560/1314;background:var(--surface-2);padding:18px;
  display:flex;flex-direction:column;gap:14px;overflow:hidden;
  container-type:inline-size;
}
.panel__tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.panel__tile{background:var(--surface);border-radius:10px;padding:13px 14px;box-shadow:inset 0 0 0 1px var(--line)}
.panel__tile-k{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
.panel__tile-v{
  margin-top:6px;font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 800;
  font-size:clamp(15px,2.2cqw,26px);letter-spacing:-.03em;line-height:1.1;
}
.panel__chart{flex:1;background:var(--surface);border-radius:10px;padding:14px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column}
.panel__chart-k{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
.panel__bars{flex:1;display:flex;align-items:flex-end;gap:6px;margin-top:12px;min-height:40px}
.panel__bar{flex:1;background:var(--signal);border-radius:3px 3px 0 0;opacity:.85}
.panel__bar:nth-child(even){background:var(--signal-deep)}

.panel__split{flex:1;display:grid;grid-template-columns:minmax(90px,.8fr) 2fr;gap:12px;min-height:0}
.panel__rail{background:var(--surface);border-radius:10px;padding:12px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.panel__rail-k{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);margin-bottom:9px}
.panel__check{display:flex;align-items:center;gap:7px;font-size:clamp(9px,.95cqw,12px);color:var(--text-2);padding:4px 0}
.panel__check i{width:10px;height:10px;border-radius:3px;flex:none;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface-2)}
.panel__cards{display:grid;gap:9px;align-content:start;min-height:0}
.panel__card,.panel__profile{background:var(--surface);border-radius:10px;padding:12px 13px;box-shadow:inset 0 0 0 1px var(--line)}
.panel__card-h{display:flex;align-items:baseline;gap:10px}
.panel__card-d{font-weight:700;font-size:clamp(10px,1.05cqw,14px);letter-spacing:-.01em}
.panel__card-q{margin-left:auto;font-family:var(--mono);font-size:clamp(9px,.9cqw,12px);color:var(--ok);font-weight:700}
.panel__card-c{font-size:clamp(8px,.85cqw,11px);color:var(--text-3);margin-top:3px}
.panel__card-n{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px}
.panel__card-n span{font-size:clamp(8px,.8cqw,10.5px);color:var(--text-2);padding:3px 7px;border-radius:5px;background:var(--ground-2)}
.panel__profile{flex:1}
.panel__stats{display:flex;gap:22px;margin:12px 0 0}
.panel__stats dt{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.panel__stats dd{margin:3px 0 0;font-family:var(--mono);font-size:clamp(11px,1.1cqw,15px);font-weight:700}

/* ---- product showcase --------------------------------------------------
   The dashboard on a slight recede, with the numbers that matter lifted OUT
   of the screenshot as real HTML cards and one publisher profile floating
   over the corner.

   Why not just show the screenshot: at any size that fits a page, the figures
   inside a dashboard capture are 11px and unreadable, so the screenshot
   proves the product exists and proves nothing about what it says. Lifting
   three numbers into live type means the eye reads them at a glance and the
   capture behind stays what it is good at, which is texture and credibility.
   The floating cards are HTML, so they stay sharp and selectable. */
.show{position:relative;padding:0 0 96px}
.show__stage{
  position:relative;max-width:1080px;margin:0 auto;
  perspective:2000px;
}
.show__frame{
  position:relative;border-radius:16px;overflow:hidden;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line),var(--lift-3);
  transform:rotateX(4deg) rotateY(-5deg) scale(.97);
  transform-origin:60% 0;transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.show__stage:hover .show__frame{transform:rotateX(0) rotateY(0) scale(1)}
.show__bar{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:var(--ground-2);border-bottom:1px solid var(--line);
}
.show__url{
  flex:1;margin-left:6px;font-family:var(--mono);font-size:11.5px;color:var(--text-2);
  background:var(--surface-2);border-radius:6px;padding:5px 12px;
}
.show__shot{display:block;width:100%;height:auto;background:var(--surface-2)}

/* floating figures */
.float{
  position:absolute;z-index:4;display:flex;align-items:center;gap:12px;
  background:var(--surface-2);border-radius:13px;padding:13px 17px;
  box-shadow:var(--lift-3),inset 0 0 0 1px var(--line);
}
.float__ic{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:rgba(242,167,59,.16);color:var(--signal-ink);
}
.float__n{font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 800;font-size:20px;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.float__k{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);margin-top:3px}
.float--a{top:-26px;left:4%}
.float--b{top:-26px;left:33%}
/* The keyword chip. Sits low-right against the frame rather than up with the
   other two: three chips in a row across the top crowds the browser bar and
   the eye reads them as one block instead of three facts. */
.float--c{bottom:8%;right:-2%}
.float--live{
  top:-22px;right:3%;padding:10px 15px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.05em;color:var(--ok);gap:8px;
}
.float--live i{width:7px;height:7px;border-radius:50%;background:var(--ok-fill);box-shadow:0 0 0 3px rgba(46,158,107,.2);animation:pulse 2.4s ease-in-out infinite}

/* the profile card that overlaps the corner */
.pcard{
  position:absolute;z-index:5;left:-2%;bottom:-56px;width:340px;
  background:var(--surface-2);border-radius:14px;padding:16px;
  box-shadow:var(--lift-3),inset 0 0 0 1px var(--line);
}
.pcard__h{display:flex;align-items:center;gap:10px}
.pcard__logo{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;background:#FF9900;color:#111;font-weight:800;font-size:13px}
.pcard__d{font-weight:700;font-size:14px;letter-spacing:-.015em}
.pcard__v{font-family:var(--mono);font-size:11px;color:var(--text-3);margin-top:2px}
.pcard__nets{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px}
.pcard__nets span{font-size:10.5px;color:var(--text-2);padding:3px 7px;border-radius:5px;background:var(--ground-2)}
.pcard__mix{display:flex;height:6px;border-radius:4px;overflow:hidden;margin-top:12px;background:var(--ground-2)}
.pcard__foot{display:flex;align-items:center;gap:8px;margin-top:12px}
.pcard__foot .btn{padding:7px 12px;font-size:11.5px;border-radius:8px}
.pcard__q{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--text-3)}

@media (max-width:940px){
  .show{padding-bottom:64px}
  .show__frame{transform:none}
  .float--a{top:-18px;left:0}
  /* Narrow screens keep ONE chip. Two overlap the frame and three bury it. */
  .float--b{display:none}
  .float--c{display:none}
  .float--live{top:-18px;right:0}
  .pcard{position:static;width:100%;margin-top:16px;bottom:auto;left:auto}
}

/* ---- sections ---------------------------------------------------------- */
section{padding:96px 0}
.sec__h{max-width:60ch;margin-bottom:44px}
.sec__h h2{font-size:clamp(27px,2.9vw,40px);margin-top:16px;letter-spacing:-.032em}
.sec__h p{margin-top:16px;font-size:17px;color:var(--text-2);line-height:1.55}

.band{background:var(--ground-2);border-block:1px solid var(--line)}

/* three-step rail */
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--lift-2)}
.rail__c{background:var(--surface);padding:28px 26px 30px}
.rail__n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--signal-ink);letter-spacing:.12em}
.rail__c h3{font-size:20px;margin:12px 0 9px;letter-spacing:-.025em}
.rail__c p{font-size:14.5px;color:var(--text-2);line-height:1.55}

/* corpus numbers */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.fig{background:var(--ground-2);padding:30px 24px}
.fig__n{font-size:clamp(30px,3.4vw,44px);font-weight:900;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.fig__k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-top:11px}
.fig__d{font-size:13px;color:var(--text-2);margin-top:8px;line-height:1.5}

/* channel cards on the marketing page */
.chans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cc{background:var(--surface);border-radius:15px;padding:24px;box-shadow:inset 0 0 0 1px var(--line),var(--lift-1);transition:transform .18s,box-shadow .18s}
.cc:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--line),var(--lift-2)}
.cc__ic{width:38px;height:38px;border-radius:11px;background:var(--ink);color:var(--signal);display:grid;place-items:center;margin-bottom:16px}
.cc h3{font-size:17px;letter-spacing:-.02em}
.cc p{font-size:14px;color:var(--text-2);margin-top:9px;line-height:1.55}

/* done-for-you */
.dfy{
  border-radius:20px;background:var(--ink);color:#fff;padding:46px;
  display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center;
  box-shadow:var(--lift-3);position:relative;overflow:hidden;
}
.dfy::before{
  content:"";position:absolute;top:-200px;right:-120px;width:560px;height:560px;
  background:radial-gradient(closest-side,rgba(242,167,59,.3),transparent 70%);
}
.dfy h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.035em;position:relative}
.dfy p{color:rgba(255,255,255,.72);margin-top:16px;font-size:16px;line-height:1.6;position:relative}
.dfy ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px;position:relative}
.dfy li{display:grid;grid-template-columns:auto 1fr;gap:11px;font-size:14.5px;color:rgba(255,255,255,.86)}
.dfy li svg{color:var(--signal);margin-top:3px}
.incl{
  position:relative;margin-top:24px;padding:18px 20px;border-radius:13px;
  background:rgba(242,167,59,.12);box-shadow:inset 0 0 0 1px rgba(242,167,59,.34);
}
.incl__k{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);font-weight:700;
}
.incl__b{margin-top:8px!important;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.82)!important}
.incl__b b{color:#fff;font-weight:700}

.dfy__card{background:rgba(255,255,255,.06);border-radius:15px;padding:26px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);position:relative}

/* Three routes. The middle one is not "recommended" -- these are not tiers
   of the same thing, they are three different products, and styling one as
   the default would push a self-serve visitor at a licence or vice versa.
   What is emphasised instead is the price shape, because that is what tells
   somebody instantly which column is theirs. */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.route{
  background:var(--surface);border-radius:17px;padding:28px 26px 26px;
  box-shadow:inset 0 0 0 1px var(--line),var(--lift-1);
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;
}
.route:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--line),var(--lift-2)}
.route__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-ink)}
.route h3{font-size:22px;margin:13px 0 0;letter-spacing:-.028em}
.route__p{margin-top:14px;display:flex;align-items:baseline;gap:6px}
.route__p .v{font-size:30px;font-weight:900;letter-spacing:-.04em}
.route__p .u{font-size:13px;color:var(--text-3);font-family:var(--mono)}
.route__d{margin-top:13px;font-size:14.5px;color:var(--text-2);line-height:1.55}
.route ul{list-style:none;margin:17px 0 0;padding:0;display:grid;gap:9px;font-size:13.5px;color:var(--text-2)}
.route li{display:grid;grid-template-columns:auto 1fr;gap:9px}
.route li svg{color:var(--ok-fill);margin-top:4px;flex:none}
.route .btn{margin-top:22px}
.route__spacer{flex:1}
@media (max-width:1040px){.routes{grid-template-columns:1fr}}

/* ---- product tour -----------------------------------------------------
   Screenshots of a light-themed app on a light page dissolve into it, so
   each one sits in a browser frame with its own chrome and a hard 1px edge.
   The frame is what makes it read as a window onto software rather than a
   picture pasted on a background. */
/* STACKED, not laid out in a grid. Three equal frames in a row read as a
   feature list; overlapping them reads as one application with depth, and it
   lets the lead screen stay large while the other two are still legibly
   present. Each frame lifts out of the stack on hover so any of them can be
   looked at properly. */
.tour{position:relative;display:grid;gap:22px}
.tour__stack{position:relative;padding-bottom:clamp(60px,11vw,150px)}
.tour__stack .frame{transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s}
.tour__stack .frame:nth-child(1){position:relative;z-index:1;width:76%}
.tour__stack .frame:nth-child(2){position:absolute;z-index:2;right:0;bottom:8%;width:46%}
.tour__stack .frame:nth-child(3){position:absolute;z-index:3;left:10%;bottom:0;width:34%}
/* Captions come off the stacked frames: three overlapping figcaptions
   covered each other and the lead frame's own text. The frames carry the
   picture, the legend underneath carries the words. */
.tour__stack .frame__cap{display:none}
.tour__legend{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:6px}
.tl__k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--signal-ink);font-weight:700}
.tl h3{font-size:16.5px;margin:9px 0 8px;letter-spacing:-.02em}
.tl p{font-size:13.5px;color:var(--text-2);line-height:1.55}
@media (max-width:860px){.tour__legend{grid-template-columns:1fr;gap:18px}}
.tour__stack .frame:hover{z-index:9;transform:translateY(-6px) scale(1.015);box-shadow:inset 0 0 0 1px var(--line),var(--lift-3)}
.tour__row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.tour__row.is-wide{grid-template-columns:1fr}
@media (max-width:860px){
  .tour__stack{padding-bottom:0;display:grid;gap:18px}
  .tour__stack .frame:nth-child(1),
  .tour__stack .frame:nth-child(2),
  .tour__stack .frame:nth-child(3){position:static;width:100%}
}
.frame{
  border-radius:14px;overflow:hidden;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line),var(--lift-2);
}
.frame__bar{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:var(--ground-2);border-bottom:1px solid var(--line);
}
.frame__bar i{width:8px;height:8px;border-radius:50%;background:#C2CAD3;flex:none}
.frame__url{
  flex:1;margin-left:6px;font-family:var(--mono);font-size:10.5px;color:var(--text-3);
  background:var(--surface-2);border-radius:5px;padding:3px 9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.frame__shot{display:block;width:100%;height:auto;background:var(--surface-2);border-bottom:1px solid var(--line)}
/* The empty state IS the instruction. An unfilled frame says which screen it
   wants and at what size, so nobody has to come back and ask. */
.frame__todo{
  display:grid;place-items:center;text-align:center;gap:7px;
  aspect-ratio:2560/1314;padding:24px;background:
    repeating-linear-gradient(45deg,var(--surface-2) 0 11px,var(--ground-2) 11px 22px);
}
.frame__todo b{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal-ink)}
.frame__todo span{font-size:13px;color:var(--text-2);max-width:38ch;line-height:1.5}
.frame__cap{padding:14px 16px 16px}
.frame__cap h3{font-size:16px;letter-spacing:-.02em}
.frame__cap p{font-size:13.5px;color:var(--text-2);margin-top:6px;line-height:1.55}
@media (max-width:860px){.tour__row{grid-template-columns:1fr}}

/* ---- the customisation argument -------------------------------------- */
.usp{
  margin-top:34px;display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:start;
  padding:32px;border-radius:18px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line),var(--lift-1);
}
.usp h3{font-size:clamp(21px,2.1vw,28px);margin-top:15px;letter-spacing:-.028em}
.usp p{margin-top:15px;font-size:15.5px;color:var(--text-2);line-height:1.6}
.usplist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.usplist li{
  display:grid;gap:4px;padding:15px 0;border-bottom:1px solid var(--line);
}
.usplist li:last-child{border-bottom:0}
.usplist b{font-size:14.5px;letter-spacing:-.01em}
.usplist span{font-size:13.5px;color:var(--text-2);line-height:1.5}
@media (max-width:940px){.usp{grid-template-columns:1fr;gap:26px;padding:24px}}

footer{background:var(--ground-2);border-top:1px solid var(--line);padding:44px 0}
.foot{display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--text-3)}
.foot__links{margin-left:auto;display:flex;gap:20px}
.foot a{color:var(--text-2);text-decoration:none}

.note{
  margin-top:18px;font-size:13px;color:var(--text-3);line-height:1.55;
  padding-left:13px;border-left:2px solid var(--line);max-width:62ch;
}

/* ---- taxonomy panel ---------------------------------------------------
   23 verticals and 249 categories is a lot of words, and a plain list of it
   is unreadable. So the verticals are a proportional wall -- each tile sized
   by how many affiliate publishers sit in it -- and the categories under one
   only appear when you ask for them. The shape carries the scale; the detail
   is there for the person who wants to check. */
.tax{display:grid;gap:3px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tx{
  position:relative;border:0;cursor:pointer;text-align:left;font-family:inherit;
  padding:14px 14px 13px;border-radius:10px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);transition:all .15s;overflow:hidden;
}
.tx::before{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:var(--signal);width:var(--w,0);opacity:.9;
}
.tx:hover{box-shadow:inset 0 0 0 1px var(--card-hover-line,#A3AFBB);background:var(--surface-2)}
.tx[aria-pressed="true"]{background:var(--ink);box-shadow:none}
.tx[aria-pressed="true"] .tx__n,.tx[aria-pressed="true"] .tx__k{color:#fff}
.tx[aria-pressed="true"] .tx__c{color:rgba(255,255,255,.62)}
.tx__n{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.tx__k{display:block;margin-top:5px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--text)}
.tx__c{display:block;font-family:var(--mono);font-size:10.5px;color:var(--text-3);margin-top:2px}

.taxout{
  margin-top:16px;border-radius:13px;background:var(--surface);padding:18px 20px;
  box-shadow:inset 0 0 0 1px var(--line);min-height:96px;
}
.taxout__h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.taxout__h b{font-size:17px;letter-spacing:-.02em}
.taxout__h span{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.taxout__list{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.taxout__list i{
  font-style:normal;font-size:12.5px;color:var(--text-2);padding:5px 10px;border-radius:7px;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);
}

/* ---- network wall ---------------------------------------------------- */
.netwall{display:flex;flex-wrap:wrap;gap:7px}
.nw{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--text);padding:7px 13px 7px 9px;border-radius:9px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;
  transition:transform .14s,box-shadow .14s;
}
.nw:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--card-hover-line,#A3AFBB),var(--lift-1)}
/* Real marks, fetched by domain from the app's own network-to-domain table.
   A favicon service is fine for a mockup; on the live page these should come
   out of the bucket the app already caches logos in, so the page does not
   depend on a third party staying up. Any that fails becomes a monogram, so a
   missing mark never leaves a broken icon in the wall. */
.nw__logo{
  width:18px;height:18px;border-radius:4px;flex:none;object-fit:contain;background:var(--surface-2);
}
.nw__logo--mono{
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:700;
  background:var(--chip-bg,#E3E9EF);color:var(--text-2);
}
.nw--rest{
  padding-left:13px;color:var(--signal-ink);background:rgba(242,167,59,.12);
  box-shadow:inset 0 0 0 1px rgba(242,167,59,.45);
}
.nw--rest:hover{background:rgba(242,167,59,.2);box-shadow:inset 0 0 0 1px var(--signal),var(--lift-1)}

/* ---- api panel -------------------------------------------------------- */
.api{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center}
.term{
  border-radius:14px;overflow:hidden;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line),var(--lift-2);
}
.term__bar{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--ground-2);border-bottom:1px solid var(--line)}
.term__bar .lamps i{width:8px;height:8px}
.term__host{font-family:var(--mono);font-size:11.5px;color:var(--text-3)}
.term__ms{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--flux)}
.term__tabs{display:flex;border-bottom:1px solid var(--line);background:var(--ground-2)}
.term__tab{
  border:0;background:transparent;cursor:pointer;padding:11px 18px;
  font-family:var(--mono);font-size:12px;color:var(--text-3);transition:all .15s;
}
.term__tab:hover{color:var(--text)}
.term__tab[aria-selected="true"]{background:rgba(242,167,59,.12);color:var(--signal-ink);box-shadow:inset 0 -2px 0 var(--signal)}
.term__body{padding:17px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.65;overflow-x:auto}
.term__body pre{margin:0;white-space:pre}
.tk-m{color:var(--violet);font-weight:700}
.tk-p{color:var(--text)}
.tk-k{color:var(--flux)}
.tk-s{color:var(--signal-ink)}
.tk-n{color:var(--violet)}
.tk-d{color:var(--text-3)}
@media (max-width:940px){.api{grid-template-columns:1fr;gap:28px}}

/* ---- delivery grid ---------------------------------------------------- */
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--lift-1)}
.dg{background:var(--surface);padding:22px 22px 24px}
.dg__k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--flux);font-weight:700}
.dg h3{font-size:16.5px;margin:9px 0 8px;letter-spacing:-.02em}
.dg p{font-size:13.5px;color:var(--text-2);line-height:1.55}
@media (max-width:700px){.dgrid{grid-template-columns:1fr}}

/* ---- compare: a real table -------------------------------------------
   Cards were readable one at a time and useless for comparing, which is the
   only job this section has. A table puts the same field for every vendor in
   one column so the eye can run down it. It is the one element on the page
   allowed to scroll sideways on a phone, because squashing eight columns into
   430px would destroy the comparison to save a gesture. */
.cmptable{overflow-x:auto;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface)}
.cmptable table{border-collapse:separate;border-spacing:0;width:100%;min-width:880px;font-size:13.5px}
.cmptable th,.cmptable td{padding:15px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmptable thead th{
  /* Not sticky. A sticky thead inside a page that already has a sticky nav
     parks the header row underneath the nav and both fight for the same
     64px. Seven rows fit on one screen anyway. */
  background:var(--ground-2);
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-3);font-weight:700;white-space:nowrap;
}
.cmptable tbody tr:last-child th,.cmptable tbody tr:last-child td{border-bottom:0}
.cmptable tbody tr:hover td,.cmptable tbody tr:hover th{background:var(--wash-1)}
.cmptable tr.is-us td,.cmptable tr.is-us th{background:rgba(242,167,59,.11)}
.cmptable tr.is-us:hover td,.cmptable tr.is-us:hover th{background:rgba(242,167,59,.16)}
.ct__name{font-size:14.5px;font-weight:800;letter-spacing:-.015em;white-space:nowrap}
.ct__cat{display:block;margin-top:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.is-us .ct__cat{color:var(--signal-ink)}
.ct__p{font-size:17px;font-weight:900;letter-spacing:-.025em;white-space:nowrap}
.ct__p small{display:block;margin-top:5px;font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--text-3);line-height:1.45;white-space:normal}
.ct__d{color:var(--text-2);line-height:1.5;min-width:250px}
.yes{color:var(--ok);font-weight:700}
.no{color:var(--text-3)}
.part{color:var(--signal-ink);font-weight:700}
.ct__v{white-space:nowrap}
.ct__v small{display:block;margin-top:4px;font-size:11px;color:var(--text-3);white-space:normal;font-weight:400}
.cmpkey{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px;font-size:12px;color:var(--text-3)}
.cmpkey b{font-weight:700}

/* ---- compare (legacy card styles, kept for nothing else) -------------- */
.cmp{display:grid;gap:9px}
.cr{
  display:grid;grid-template-columns:1.1fr 1fr 1.9fr auto;gap:20px;align-items:center;
  background:var(--surface);border-radius:12px;padding:18px 20px;
  box-shadow:inset 0 0 0 1px var(--line);
}
.cr--us{background:rgba(242,167,59,.1);box-shadow:inset 0 0 0 1.5px var(--signal)}
.cr__n{font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.cr__tag{
  display:inline-block;margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 7px;border-radius:5px;background:var(--ground-2);color:var(--text-3);
}
.cr--us .cr__tag{background:var(--signal);color:var(--on-signal)}
.cr__p{font-size:23px;font-weight:900;letter-spacing:-.035em}
.cr__p small{display:block;font-size:11.5px;font-weight:500;color:var(--text-3);letter-spacing:0;margin-top:5px;line-height:1.45}
.cr__d{font-size:13.5px;color:var(--text-2);line-height:1.55}
.cr__src{
  font-family:var(--mono);font-size:10.5px;color:var(--text-2);text-decoration:none;white-space:nowrap;
  padding:7px 11px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface-2);
}
.cr__src:hover{box-shadow:inset 0 0 0 1px var(--signal)}
@media (max-width:940px){
  .cr{grid-template-columns:1fr;gap:11px}
  .cr__src{justify-self:start}
}

/* ---- faq -------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line)}
.fq__q{
  width:100%;border:0;background:transparent;cursor:pointer;text-align:left;font-family:inherit;
  display:flex;align-items:center;gap:16px;padding:19px 2px;font-size:15.5px;font-weight:700;
  color:var(--text);letter-spacing:-.015em;
}
.fq__q:hover{color:var(--signal-ink)}
.fq__q span{margin-left:auto;font-family:var(--mono);font-size:17px;color:var(--text-3);transition:transform .2s}
.fq__q[aria-expanded="true"]{color:var(--signal-ink)}
.fq__q[aria-expanded="true"] span{transform:rotate(45deg)}
.fq__a{padding:0 2px 20px;font-size:14.5px;color:var(--text-2);line-height:1.62;max-width:78ch}
.fq__a b{color:var(--text)}

/* ---- closing cta ------------------------------------------------------ */
.close{text-align:center;padding:84px 0}
.close__k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.close h2{font-size:clamp(30px,3.6vw,50px);margin:18px auto 0;letter-spacing:-.038em;max-width:20ch}
.close p{margin:18px auto 0;font-size:16.5px;color:var(--text-2);max-width:52ch;line-height:1.55}
.close__btns{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}

/* ---- footer ----------------------------------------------------------- */
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.fbrand{display:flex;align-items:center;gap:11px;line-height:1}
.fbrand b{font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 800;font-size:19px;letter-spacing:-.025em;line-height:1}
.fbrand b i{font-style:normal;color:var(--signal-ink)}
.fcol__k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fcol a{font-size:14px;color:var(--text-2);text-decoration:none}
.fcol a:hover{color:var(--text)}
.fbot{
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:38px;padding-top:22px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--text-3);
}
.fbot span:last-child{margin-left:auto}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr;gap:26px}.fbot span:last-child{margin-left:0}}

[hidden]{display:none!important}

@media (max-width:1040px){
  .hero__in{grid-template-columns:1fr;gap:44px}
  .figs,.chans{grid-template-columns:1fr 1fr}
  .rail{grid-template-columns:1fr}
  .dfy{grid-template-columns:1fr;padding:32px}
}
@media (max-width:700px){
  .wrap{padding-inline:18px}
  section{padding:64px 0}
  .figs,.chans{grid-template-columns:1fr}
  .bd{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .stats{gap:16px;justify-content:flex-start}
  .stat{text-align:left}
  h1.display{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* =====================================================================
   Carried over from the previous marketing.css, unchanged.

   The login modal, the auth SSO row and the small "shot" chrome are shared
   with partials this redesign keeps as they are. They are appended rather
   than rewritten because they work, they are already wired to the
   auth-modal Stimulus controller, and a redesign that also rewrites the
   sign-in flow is two changes pretending to be one.

   Every token these rules reference (--surface, --line, --signal, --mono)
   is defined at the top of this file with the same name it had, which is
   why the paste survives.
   ===================================================================== */
/* ---------- login modal ---------- */
.backdrop{
  position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px;
  background:rgba(12,14,17,.80);backdrop-filter:blur(7px);
}
.backdrop.open{display:grid;animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  width:min(100%,440px);background:var(--surface);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 50px 120px -30px rgba(24,34,48,.30);overflow:hidden;max-height:92vh;overflow-y:auto;
  animation:rise .24s cubic-bezier(.2,.8,.25,1);
}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.modal-top{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 0}
.modal-x{background:none;border:0;color:var(--text-3);cursor:pointer;font-size:20px;line-height:1;padding:6px;border-radius:4px}
.modal-x:hover{color:var(--text);background:var(--wash-2)}
.modal-head{padding:14px 26px 0}
.modal-head h3{font-size:24px;letter-spacing:-.02em}
.modal-head p{color:var(--text-2);font-size:13.5px;margin-top:8px}
.mtabs{display:flex;gap:2px;margin:20px 26px 0;background:var(--ground-2);border:1px solid var(--line);border-radius:5px;padding:3px}
.mtabs button{
  flex:1;background:none;border:0;cursor:pointer;border-radius:3px;padding:9px;
  font-family:var(--mono);font-size:12px;color:var(--text-2);transition:.16s;
}
.mtabs button[aria-selected="true"]{background:var(--surface-2);color:var(--text);box-shadow:0 1px 0 var(--inset-hi) inset}
form{padding:22px 26px 26px;display:flex;flex-direction:column;gap:14px}
label{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:7px}
.field{position:relative}
input[type=email],input[type=password],input[type=text]{
  width:100%;background:var(--ground-2);border:1px solid var(--line);border-radius:5px;
  padding:12px 13px;color:var(--text);font-family:var(--sans);font-size:14.5px;transition:border-color .16s,background .16s;
}
input::placeholder{color:var(--placeholder)}
input:focus{outline:none;border-color:var(--signal);background:var(--ground-2)}
input[aria-invalid="true"]{border-color:var(--danger)}
.peek{
  position:absolute;right:8px;top:31px;background:none;border:0;cursor:pointer;color:var(--text-3);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;padding:6px 8px;border-radius:4px;
}
.peek:hover{color:var(--text);background:var(--wash-2)}
.err{color:var(--danger);font-family:var(--mono);font-size:11.5px;margin-top:7px;display:none}
.err.show{display:block}
.rowline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.check{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-2);cursor:pointer;margin-bottom:0}
.check input{accent-color:var(--signal);width:15px;height:15px}
.forgot{font-family:var(--mono);font-size:12px;color:var(--text-2);text-decoration:none}
.forgot:hover{color:var(--signal-ink)}
.orline{display:flex;align-items:center;gap:14px;color:var(--text-3);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em}
.orline::before,.orline::after{content:"";height:1px;flex:1;background:var(--line)}
.sso{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sso .btn{padding:11px 10px;font-size:12px}
.legal{font-size:11.5px;color:var(--text-3);line-height:1.55;text-align:center}
.legal a{color:var(--text-2)}
.done{padding:38px 30px 42px;text-align:center;display:none}
.done.show{display:block}
.done .ok{width:46px;height:46px;border-radius:50%;background:rgba(95,214,154,.17);display:grid;place-items:center;margin:0 auto 16px}
.done h3{font-size:20px}
.done p{color:var(--text-2);font-size:14px;margin-top:9px}
.spin{width:14px;height:14px;border:2px solid rgba(16,11,2,.3);border-top-color:var(--on-signal);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   PRODUCT SHOTS
   Real captures of the signed-in app, not illustrations.

   The frame matters as much as the image: a screenshot dropped
   flat onto a page reads as a picture of software, while a
   screenshot in a chrome frame with a real shadow reads as
   software. The frame is CSS so the image itself stays a clean
   viewport capture with no baked-in decoration.
   ============================================================ */
.shot{
  position:relative;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);overflow:hidden;box-shadow:var(--shot-shadow);
}
/* A 1px inner highlight along the top edge. Without it a bordered
   panel on a mid ground looks printed on rather than raised. */
.shot::after{
  content:"";position:absolute;inset:0;border-radius:9px;pointer-events:none;
  box-shadow:inset 0 1px 0 var(--inset-hi);
}
.shot-chrome{
  display:flex;align-items:center;gap:7px;padding:9px 13px;
  background:var(--ground-2);border-bottom:1px solid var(--line);
}
.shot-chrome i{width:8px;height:8px;border-radius:50%;background:var(--lamp);flex:0 0 auto}
.shot-chrome .u{
  font-family:var(--mono);font-size:11px;color:var(--text-2);
  margin-left:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.shot-chrome .tagged{margin-left:auto;color:var(--flux);font-family:var(--mono);font-size:10.5px;white-space:nowrap}
.shot img{display:block;width:100%;height:auto}

/* The captures are 1496px wide and render around 700-800px, so they land
   near 2x. Letting the browser scale them down with default smoothing is
   what keeps 12px UI text in the shot legible instead of shimmering. */
.shot img{image-rendering:auto}


/* =====================================================================
   THE ANSWER PANEL

   marketing/_match_results.html.erb is rendered by the server into the
   hero, and it uses the .ask-* class family. Those rules lived in
   marketing.css, which this page no longer loads -- so the first real
   search after the redesign returned a correct answer as unstyled text.

   Carried over rather than renamed: the partial is shared with anything
   else that renders a match, and a redesign that also rewrites the
   markup of the thing it is trying to display is two changes pretending
   to be one.
   ===================================================================== */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* ---- country + network breakdown ---- */
.ask-breakdown{padding:15px 20px 4px;border-bottom:1px solid var(--line);display:grid;gap:15px}
.ask-breakdown__head{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:7px;}
.ask-breakdown__bar{display:flex;width:100%;height:7px;border-radius:4px;overflow:hidden;background:var(--ground-2)}
.ask-breakdown__seg{display:block;height:100%}
.ask-breakdown__keys{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
.ask-breakdown__key{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2)}
.ask-breakdown__key .num{color:var(--text);font-weight:600}
.ask-breakdown__key .pub-flag{font-size:13px}
.ask-breakdown__nets{display:flex;flex-wrap:wrap;gap:6px}
.ask-net{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  border:1px solid var(--line);border-radius:100px;padding:3px 10px;
  background:var(--surface-2);color:var(--text-2);}
.ask-net__n{font-family:var(--mono);font-size:10.5px;color:var(--text-3)}
/* The brand mark on a result chip. No loading="lazy" on these: the result
   panel is rendered into an element that was hidden a moment ago, and a lazy
   image inside it can sit undecoded long enough for the monogram fallback in
   home.js to fire on a logo that was going to arrive. */
.ask-net__logo{width:15px;height:15px;border-radius:3px;object-fit:contain;flex:none}
.ask-breakdown__note{font-size:11.5px;color:var(--text-3);margin-top:2px}
/* ---- the answer ---- */
.ask-out{min-width:0}
.ask-result{border:1px solid var(--line);border-radius:9px;background:var(--surface);
  box-shadow:var(--shot-shadow);overflow:hidden;}
.ask-result__head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding:18px 20px 14px;border-bottom:1px solid var(--line);background:var(--ground-2);}
.ask-result__count{font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 700;font-size:20px;letter-spacing:-.02em}
.ask-result__count .num{color:var(--signal-ink)}
.ask-result__note{margin-top:5px;font-size:13px;color:var(--text-2);max-width:52ch}
/* Coverage tiers. The full-cover row is the one that makes the headline
   trustworthy, so it is the only one given weight; the rest are context. */
.ask-tiers{list-style:none;margin:11px 0 0;padding:0;display:grid;gap:3px}
.ask-tiers__row{display:flex;align-items:baseline;gap:7px;font-size:12px;color:var(--text-2);line-height:1.5}
.ask-tiers__row.is-full{color:var(--text-1);font-weight:600}
.ask-tiers__n{min-width:4.5ch;text-align:right;font-variant-numeric:tabular-nums}
.ask-tiers__words{display:none}
.ask-tiers__row.is-full .ask-tiers__words{display:inline;font-weight:400;color:var(--text-2)}
.ask-result__reset{flex:0 0 auto;font:inherit;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;background:transparent;border:1px solid var(--line);
  border-radius:4px;color:var(--text-2);padding:5px 10px;}
.ask-result__reset:hover{color:var(--text);border-color:var(--text-3)}
.ask-list{list-style:none;margin:0;padding:0}
.ask-row{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:13px 20px;border-bottom:1px solid var(--line);}
.ask-row:last-child{border-bottom:0}
.ask-row__id{min-width:0}
.ask-row__domain{display:block;font-weight:600;font-size:14.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ask-row__cat{display:block;font-size:12px;color:var(--text-3);margin-top:2px}
.ask-row__stats{display:flex;gap:18px;margin:0;flex:0 0 auto}
.ask-row__stats div{text-align:right}
.ask-row__stats dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.ask-row__stats dd{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--text)}
/* The rows behind the wall, drawn rather than described. */
.ask-locked{display:flex;flex-direction:column;gap:9px;padding:14px 20px 4px}
.ask-locked__bar{height:13px;border-radius:3px;
  background:linear-gradient(90deg,var(--line),var(--ground-2) 62%,transparent);
  filter:blur(1.4px);}
.ask-locked__bar:nth-child(2){width:86%}
.ask-locked__bar:nth-child(3){width:68%;opacity:.7}
.ask-cta{padding:14px 20px 20px;text-align:center}
.ask-cta p{font-size:13.5px;color:var(--text-2);margin-bottom:12px;max-width:44ch;margin-inline:auto}
.ask-cta strong{color:var(--text)}
.ask-cta__fine{display:block;margin-top:9px;font-family:var(--mono);font-size:11px;color:var(--text-3)}
.ask-empty{padding:30px 24px;text-align:center}
.ask-empty__title{font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 700;font-size:18px;letter-spacing:-.015em}
.ask-empty__body{margin:8px auto 16px;font-size:13.5px;color:var(--text-2);max-width:42ch}
.ask-row{flex-direction:column;align-items:flex-start;gap:9px}
.ask-row__stats{gap:14px}
.ask-row__stats div{text-align:left}
/* ---- done-for-you hook + enquiry form ----------------------------------- */
.ask-dfy{border-top:1px solid var(--line);padding:14px 20px 18px;background:var(--ground-2)}
.ask-dfy__line{font-size:13px;color:var(--text-2);text-align:center}
.ask-dfy__open{font:inherit;font-weight:600;color:var(--signal-ink);background:transparent;border:0;
  padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.ask-dfy__open:hover{color:var(--text)}

/* The coverage tiers and the per-row dots, added with the union query. These
   never existed in the old stylesheet because the old matcher had no tiers. */
.ask-tiers{padding:14px 0;border-bottom:1px solid var(--line)}
.tierbar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--ground-2)}
.tierbar span{height:100%}
.tierkeys{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
.tk{display:flex;align-items:baseline;gap:6px;font-size:11.5px;color:var(--text-2)}
.tk i{width:8px;height:8px;border-radius:2px;flex:none;translate:0 -1px}
.tk b{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--text)}
.tk.is-full b{color:var(--signal-ink)}
.ask-row__cov{display:inline-flex;gap:3px;margin-left:7px;vertical-align:middle}
.ask-row__cov i{width:5px;height:5px;border-radius:50%;background:var(--signal)}
.ask-row__cov i.off{background:var(--line)}

/* ==========================================================================
   THE OMNICHANNEL PLAN
   Turn two and three of the hero conversation. Lives inside the match result,
   so everything here is scoped under .plan and inherits the console's ground.
   ========================================================================== */

.btn--sm{padding:7px 13px;font-size:12.5px}

/* ---- the invitation ----------------------------------------------------- */
.plan{border-top:1px solid var(--line);background:var(--surface)}
.plan__kick{padding:16px 20px 18px;text-align:center}
.plan__kick-line{font-size:14px;color:var(--text);margin-bottom:10px;font-weight:600}
.plan__kick-fine{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--text-3)}
.plan__trace{padding:14px 20px}

/* ---- the three questions ------------------------------------------------ */
.plan-q{padding:16px 20px 20px}
.plan-q__lede{font-size:13px;color:var(--text-2);margin-bottom:14px;max-width:52ch}
.plan-q__set{border:0;padding:0;margin:0 0 14px}
.plan-q__legend{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:7px;padding:0
}
.plan-q__opts{display:flex;flex-wrap:wrap;gap:6px}
.plan-q__fine{margin-top:8px;font-size:11.5px;color:var(--text-3);max-width:52ch}

/* A radio that looks like a chip. The input stays in the DOM and stays
   focusable -- this is a form somebody answers with a keyboard as often as a
   mouse, and hiding the control with display:none would take that away. */
.plan-opt{position:relative;display:inline-flex;cursor:pointer}
.plan-opt input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.plan-opt span{
  display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface-2);font-size:12.5px;color:var(--text-2);
  transition:border-color .14s ease,background .14s ease,color .14s ease
}
.plan-opt:hover span{border-color:var(--text-3);color:var(--text)}
.plan-opt input:focus-visible + span{outline:2px solid var(--signal);outline-offset:2px}
.plan-opt input:checked + span{
  background:var(--signal);border-color:var(--signal);color:var(--on-signal);font-weight:600
}

.plan-q__go{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.plan-q__note{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.plan-q__go .btn:disabled{opacity:.45;cursor:not-allowed}

/* ---- the plan ----------------------------------------------------------- */
.plan-out{background:var(--surface-2)}
.plan-out__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 20px 12px;border-bottom:1px solid var(--line)
}
.plan-out__kick{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--signal-ink);margin-bottom:5px
}
.plan-out__title{
  font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 700;
  font-size:17px;line-height:1.25;letter-spacing:-.015em;color:var(--text);margin:0
}
.plan-out__answers{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.plan-tag{
  font-family:var(--mono);font-size:10.5px;padding:3px 8px;border-radius:999px;
  background:var(--ground-2);color:var(--text-2)
}

/* Both of these are <section> elements, and `section{padding:96px 0}` further
   up this file is what a marketing band wants and what a card inside a result
   panel must not have. .plan-ch overrode it by accident because it sets its
   own padding; .plan-locked set none and inherited 96px top AND bottom, which
   is the empty band that appeared between the email track and WhatsApp. */
.plan-locked{padding:0}
.plan-ch{padding:16px 20px;border-bottom:1px solid var(--line)}
.plan-ch__head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.plan-ch__badge{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.04em;
  padding:3px 8px;border-radius:5px;background:var(--signal);color:var(--on-signal)
}
.plan-ch__badge.is-locked{background:var(--ground-2);color:var(--text-3)}
.plan-ch__title{font-size:13.5px;font-weight:650;color:var(--text)}
.plan-ch__lock{color:var(--text-3)}
.plan-ch__note{font-size:12.5px;color:var(--text-2);margin:0 0 10px;max-width:58ch}

.plan-steps{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.plan-step{display:flex;gap:12px;align-items:flex-start}
/* Wide enough for the longest label the model actually writes. "Day 5 (after
   email open)" broke onto four lines in a 62px column and pushed the step it
   belonged to off its own baseline. */
.plan-step__when{
  flex:0 0 84px;font-family:var(--mono);font-size:11px;line-height:1.45;
  color:var(--text-3);padding-top:2px;letter-spacing:.01em
}
.plan-step__body{min-width:0}
.plan-step__title{font-size:13px;font-weight:650;color:var(--text);margin-bottom:2px}
.plan-step__what{font-size:12.5px;color:var(--text-2);margin:0;max-width:58ch}
.plan-step__eg{
  margin:7px 0 0;padding:8px 11px;border-left:2px solid var(--signal);
  background:var(--surface);font-size:12.5px;color:var(--text);font-style:italic;max-width:58ch
}

/* The locked tracks. The shape is shown and the words are not: you can see
   there are two touches and when they land, which is the honest version of a
   teaser -- nothing here pretends to be text that is being withheld. */
.plan-locked .plan-ch{background:var(--surface)}
.plan-step__what.is-hidden{display:flex;flex-direction:column;gap:5px;margin-top:5px}
.plan-step__what.is-hidden span{
  height:8px;border-radius:4px;
  background:linear-gradient(90deg,var(--ground-2),var(--line),var(--ground-2));
  background-size:200% 100%;animation:shim 2.4s linear infinite;opacity:.7
}
.plan-step__what.is-hidden span:first-child{width:min(100%,320px)}
.plan-step__what.is-hidden span:last-child{width:min(70%,220px)}

.plan-wall{padding:16px 20px 20px;text-align:center;background:var(--surface-2)}
.plan-wall__line{font-size:13.5px;color:var(--text-2);max-width:48ch;margin:0 auto 12px}
.plan-wall__line strong{color:var(--text)}
.plan-dfy{border-top:1px solid var(--line);padding:14px 20px 18px;background:var(--ground-2)}

@media (max-width:640px){
  .plan-step{flex-direction:column;gap:3px}
  .plan-step__when{flex:none}
  .plan-out__head{flex-direction:column}
}

/* A footer link that has to be a button, because it opens the auth modal
   rather than going anywhere. Styled to be indistinguishable from its
   neighbours: the user should not be able to tell which of them are anchors. */
.fcol .flink{font-family:inherit;font-size:14px;color:var(--text-2);background:transparent;
  border:0;padding:0;cursor:pointer;text-align:left}
.fcol .flink:hover{color:var(--text)}

/* ==========================================================================
   LEGAL PAGES
   Privacy and terms. One column, generous measure, the page's own type. A
   policy set in a different family than the product reads as boilerplate
   somebody pasted in, which is exactly the impression a policy must not give.

   NAMED .lgl, NOT .legal. `.legal` was already taken further up this file by
   the fine print under the login modal -- centred, 11.5px, muted -- and a
   second .legal here silently restyled that AND centred every paragraph of
   policy. Two meanings for one class name is the bug; renaming is the fix.
   ========================================================================== */
.lgl{padding:120px 0 80px;background:var(--surface-2)}
.lgl__in{max-width:760px}
.lgl__h1{font-size:clamp(32px,4.4vw,50px);letter-spacing:-.035em;margin:14px 0 10px;color:var(--text)}
.lgl__meta{font-family:var(--mono);font-size:11.5px;color:var(--text-3);margin-bottom:30px}
.lgl__lede{font-size:17px;line-height:1.62;color:var(--text);margin-bottom:14px;
  padding-bottom:26px;border-bottom:1px solid var(--line)}
.lgl h2{
  font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 700;
  font-size:20px;letter-spacing:-.02em;color:var(--text);margin:34px 0 12px
}
.lgl p{font-size:15px;line-height:1.68;color:var(--text-2);margin:0 0 13px}
.lgl p b{color:var(--text);font-weight:650}
.lgl a{color:var(--signal-ink);text-decoration:underline;text-underline-offset:2px}
.lgl a:hover{color:var(--text)}
.lgl__list{margin:0 0 13px;padding-left:20px;display:grid;gap:8px}
.lgl__list li{font-size:15px;line-height:1.6;color:var(--text-2)}
.lgl__list li b{color:var(--text);font-weight:650}
.lgl__back{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.lgl__back a{text-decoration:none;font-weight:600}

@media (max-width:640px){
  .lgl{padding:96px 0 60px}
  .lgl__h1{font-size:32px}
}

/* ==========================================================================
   Enquiry form (`inq`). Its own namespace: it used to borrow `.dfy`, the
   Done-for-you SECTION's class, and inherited that section's two-column grid.
   Two tones: light under the hero's results, dark inside the DFY card.
   ========================================================================== */
.dfy{align-items:start}
.dfy__card{padding:28px}
.dfy__cardk{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal)}
.dfy__cardtitle{margin:10px 0 0;font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 800;font-size:24px;letter-spacing:-.025em;color:#fff}
.dfy .dfy__cardsub{margin-top:8px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.66)}

.inq{--inq-bg:var(--surface-2);--inq-line:var(--line);--inq-text:var(--text);--inq-muted:var(--text-3);
     --inq-label:var(--text-2);--inq-focus:var(--signal);--inq-pill:var(--surface);
     position:relative;margin-top:14px}
.inq--dark{--inq-bg:rgba(255,255,255,.07);--inq-line:rgba(255,255,255,.16);--inq-text:#fff;
           --inq-muted:rgba(255,255,255,.5);--inq-label:rgba(255,255,255,.62);--inq-pill:rgba(255,255,255,.05);
           margin-top:20px}
.inq--light{background:var(--surface-2);border-radius:14px;padding:20px;box-shadow:inset 0 0 0 1px var(--line),var(--lift-1)}
.inq__head{margin-bottom:14px}
.inq .inq__title{margin:0;font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 750;font-size:19px;letter-spacing:-.02em;color:var(--inq-text);line-height:1.2}
.inq .inq__sub{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--inq-label)}
.inq__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 12px}
.inq__field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:0;border:0}
.inq__field--wide{grid-column:1/-1}
.inq .inq__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--inq-label);padding:0}
.inq input[type=text],.inq input[type=email],.inq textarea{
  width:100%;font:inherit;font-size:14.5px;color:var(--inq-text);background:var(--inq-bg);
  border:0;border-radius:10px;padding:11px 13px;box-shadow:inset 0 0 0 1px var(--inq-line);
  transition:box-shadow .15s,background .15s;outline:none}
.inq textarea{resize:vertical;min-height:88px;line-height:1.5}
.inq input::placeholder,.inq textarea::placeholder{color:var(--inq-muted)}
.inq input:focus,.inq textarea:focus{box-shadow:inset 0 0 0 2px var(--inq-focus),0 0 0 4px rgba(242,167,59,.18)}
.inq__pills{display:flex;flex-wrap:wrap;gap:6px}
.inq__pill{position:relative;cursor:pointer}
.inq__pill input{position:absolute;opacity:0;pointer-events:none}
.inq__pill span{display:inline-block;padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:500;
  color:var(--inq-label);background:var(--inq-pill);box-shadow:inset 0 0 0 1px var(--inq-line);transition:all .15s}
.inq__pill:hover span{color:var(--inq-text)}
.inq__pill input:checked + span{background:var(--signal);color:var(--on-signal);box-shadow:none;font-weight:600}
.inq__pill input:focus-visible + span{outline:2px solid var(--signal);outline-offset:2px}
.inq__foot{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}
.inq--dark .inq__submit{width:100%}
.inq .inq__fine{margin:10px 0 0;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--inq-muted)}
.inq .inq__error{margin:0 0 12px;padding:10px 12px;border-radius:9px;font-size:13px;color:#fff;background:var(--danger)}
.inq--done{text-align:center;padding:26px 20px}
.inq__tick{width:46px;height:46px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;color:var(--ok-fill);background:rgba(46,158,107,.14)}
.inq--dark .inq__tick{color:#5FD69A;background:rgba(95,214,154,.14)}
.inq .inq__sub a{color:inherit}
@media (max-width:560px){.inq__grid{grid-template-columns:1fr}}

/* ---- Data on credits: the three plans, above the other two routes ------- */
.plans__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:18px}
.plans__title{font-size:26px;margin:10px 0 0;letter-spacing:-.03em}
.plans__lede{margin-top:8px;font-size:14.5px;color:var(--text-2);max-width:58ch;line-height:1.55}
.plans__you{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:13px;color:var(--text-2);text-align:right}
.plans__you a{color:var(--signal-ink);font-weight:600}
.plans__youk{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:34px}
.plan{
  position:relative;display:flex;flex-direction:column;padding:24px;border-radius:16px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--lift-1);transition:transform .18s,box-shadow .18s;
}
.plan:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--line),var(--lift-2)}
.plan.is-feat{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--signal),var(--lift-2)}
.plan.is-current{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--flux),var(--lift-2)}
.plan__badge{
  position:absolute;top:-11px;left:22px;padding:4px 10px;border-radius:999px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  background:var(--signal);color:var(--on-signal);
}
.plan__badge--you{background:var(--flux);color:#fff}
.plan__name{font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 800;font-size:20px;letter-spacing:-.02em}
.plan__price{margin-top:10px;display:flex;align-items:baseline;gap:6px}
.plan__price .v{font-size:36px;font-weight:900;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.plan__price .u{font-family:var(--mono);font-size:12.5px;color:var(--text-3)}
.plan ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px;font-size:13.5px;color:var(--text-2)}
.plan li{display:grid;grid-template-columns:auto 1fr;gap:9px}
.plan li svg{color:var(--ok-fill);margin-top:4px}
.plan li b{color:var(--text);font-variant-numeric:tabular-nums}
.plan li.is-off{color:var(--text-3)}
.plan li.is-off svg{color:var(--line)}
.plan .btn,.plan .plan__form{margin-top:22px}
.plan .plan__form .btn{margin-top:0;width:100%}
.plan__current{display:inline-flex;justify-content:center;gap:7px;background:rgba(18,112,110,.1);color:var(--flux);cursor:default;box-shadow:none}
.plan__covered{background:transparent;color:var(--text-3);box-shadow:inset 0 0 0 1px var(--line);cursor:default}
.routes--two{grid-template-columns:repeat(2,1fr)}
@media (max-width:1040px){.plans,.routes--two{grid-template-columns:1fr}.plans__you{align-items:flex-start;text-align:left}}

/* ---- signed-in header: Log out beside Dashboard -------------------------- */
.nav__logout{margin:0;display:inline-flex}
.nav__logout--desk{margin-right:-6px}
.nav__logout--desk .btn{box-shadow:none;color:var(--text-2);padding-inline:12px;background:transparent}
.nav__logout--desk .btn:hover{color:var(--text);background:var(--wash-1)}
@media (max-width:1040px){ .nav__links .nav__logout{display:block} }

/* ---- auth modal: in-place errors and the "already signed in" panel ------ */
.auth-err{margin:16px 26px 0;padding:10px 12px;border-radius:9px;background:rgba(192,57,43,.08);
  box-shadow:inset 0 0 0 1px rgba(192,57,43,.28);font-family:var(--sans);font-size:13px;line-height:1.45}
form .auth-err{margin:0 0 14px}
.already{padding:30px 30px 26px;text-align:center}
.already__av{
  width:56px;height:56px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 800;font-size:22px;color:var(--on-signal);
  background:linear-gradient(135deg,var(--signal),#F7C774);box-shadow:0 0 0 6px rgba(242,167,59,.16),var(--lift-2);
  animation:already-pop .5s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes already-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.already__av{animation:none}}
.already h3{font-size:22px;letter-spacing:-.02em}
.already p{margin-top:8px;color:var(--text-2);font-size:14px;line-height:1.5}
.already p b{color:var(--text)}
.already__mail{display:block;font-family:var(--mono);font-size:12px;color:var(--text-3);margin-top:2px}
.already__actions{display:grid;gap:8px;margin-top:20px}
.already__foot{margin-top:16px;font-size:12.5px;color:var(--text-3);display:flex;gap:6px;justify-content:center;align-items:center}
.already__outform{display:inline;margin:0}
.already__out{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--signal-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.already__out:hover{color:var(--text)}

/* The modal's bare `form` and `label` rules (padding, mono uppercase labels)
   are global, so every form outside the modal has to opt out of them. */
.inq .inq__form,.plan .plan__form,.nav__logout,.already__outform{padding:0;display:block;gap:0}
.nav__logout{display:inline-flex}
.inq label{font-family:var(--sans);font-size:inherit;letter-spacing:0;text-transform:none;color:inherit;margin:0}
.inq label.inq__field{display:flex}
.inq label.inq__pill{display:inline-block}
.inq input[type=text],.inq input[type=email],.inq textarea{font-family:var(--sans)}
.inq input:focus,.inq textarea:focus{background:var(--inq-bg)}
.inq__pill span{font-family:var(--sans);text-transform:none;letter-spacing:0}
@media (max-width:560px){ .dfy{padding:24px 18px} .dfy__card{padding:20px 16px} }
/* Last so it beats `.nav__logout{display:inline-flex}` above: in the burger
   panel the form has to be a block or its full-width button collapses. */
@media (max-width:1040px){
  .nav__links .nav__logout{display:block;width:100%;margin:0}
  .nav__links .nav__logout .btn{width:100%}
  /* `.nav__links a` styles the menu rows; the Dashboard button is also an
     <a> in that panel and must not look like a row. */
  .nav__links a.btn{font-family:var(--sans);font-size:14px;border-radius:10px;border-bottom:0;
    padding:11px 20px;justify-content:center;color:var(--on-signal)}
}