/* ============================================================
   GENIES PAY — Global chrome
   Reset · type · nav · footer · buttons · cards · reveals
   Rounded, warm, weighty. The motif is the QR finder pattern.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.64;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--surge); color: var(--on-brand); }
:focus-visible { outline: 2px solid var(--surge); outline-offset: 3px; border-radius: 4px; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 0 0.48em;
}
h1 { font-size: clamp(2.6rem, 6.4vw, 4.8rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.42rem); }
p  { margin: 0 0 1.05em; color: var(--ink-dim); }
p.lead { font-size: clamp(1.03rem, 1.45vw, 1.22rem); color: var(--ink-dim); max-width: 60ch; }

.mono { font-family: var(--font-mono); }
.surge { color: var(--surge); }
.flare { color: var(--flare); }
.grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Eyebrow — carries the finder-pattern mark */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 15px 7px 11px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--panel);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim);
}
.eyebrow::before {
  content: ""; width: 12px; height: 12px; border-radius: 3px;
  border: 3px solid var(--surge);
}
.eyebrow--flare::before { border-color: var(--flare); }
.eyebrow--ok::before    { border-color: var(--ok); }
.eyebrow--warn::before  { border-color: var(--warn); }

/* ---------- Layout ---------- */
.wrap { width: min(100% - (var(--pad-x) * 2), var(--w-max)); margin-inline: auto; }
.wrap--wide { width: min(100% - (var(--pad-x) * 2), var(--w-wide)); }
section { padding-block: var(--sec-y); position: relative; }
.grid { display: grid; gap: 20px; }
@media (min-width: 720px)  { .g-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .g-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .g-4 { grid-template-columns: repeat(4, 1fr); } }

.sec-head { max-width: 64ch; margin-bottom: 44px; }
.sec-head h2 { margin-top: 14px; }
.sec-head--center { margin-inline: auto; text-align: center; }

.tinted { background: var(--bg-raise); border-block: 1px solid var(--line); }

/* Finder-pattern backdrop — the motif, used quietly */
.finder { overflow: hidden; }
.finder::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 18%, var(--surge-soft), transparent 42%),
    radial-gradient(circle at 88% 74%, var(--flare-soft), transparent 46%);
}
.finder > * { position: relative; z-index: 1; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  color: var(--ink); background: var(--panel); cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); border-color: var(--surge); box-shadow: var(--sh-2); }
.btn--solid {
  background: var(--grad); border-color: transparent; color: var(--on-brand);
  box-shadow: var(--sh-brand);
}
.btn--solid:hover { box-shadow: 0 18px 50px rgba(255, 107, 53, 0.44); }
.btn--ghost { background: transparent; }

/* ---------- Cards ---------- */
.card {
  background: linear-gradient(168deg, var(--panel), var(--bg-raise));
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px 26px 26px; position: relative; overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--line-strong); }
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
.card__tag {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 12px;
}

.kv { display: flex; justify-content: space-between; gap: 16px;
      padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.kv:last-child { border-bottom: 0; }
.kv dt { color: var(--ink-faint); font-family: var(--font-mono); font-size: 12px; margin: 0; }
.kv dd { margin: 0; color: var(--ink); text-align: right; font-weight: 600; }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11.5px;
  background: var(--panel); color: var(--ink-dim); border: 1px solid var(--line-strong);
  white-space: nowrap;
}
.pill i { width: 7px; height: 7px; border-radius: 2px; background: currentColor; display: block; }
.pill--ok    { background: var(--ok-soft);    color: var(--ok);    border-color: transparent; }
.pill--warn  { background: var(--warn-soft);  color: var(--warn);  border-color: transparent; }
.pill--stop  { background: var(--stop-soft);  color: var(--stop);  border-color: transparent; }
.pill--surge { background: var(--surge-soft); color: var(--surge); border-color: transparent; }
.pill--flare { background: var(--flare-soft); color: var(--flare); border-color: transparent; }

/* ---------- Tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl caption {
  text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); padding: 16px 18px 10px;
  background: var(--panel);
}
.tbl th, .tbl td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 400;
  background: var(--panel-2); border-bottom: 1px solid var(--line-strong);
}
.tbl tbody th { font-weight: 600; color: var(--ink); width: 26%; }
.tbl td { color: var(--ink-dim); }
.tbl td.m { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.tbl tbody tr:hover th, .tbl tbody tr:hover td { background: var(--panel-2); }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl-wrap {
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--panel); box-shadow: var(--sh-1);
}
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-scroll .tbl { min-width: 660px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(18, 11, 9, 0.8);
  backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid var(--line);
}
.nav__in {
  width: min(100% - (var(--pad-x) * 2), var(--w-wide));
  margin-inline: auto; display: flex; align-items: center; gap: 20px; height: 74px;
}
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand__mark { width: 30px; height: 30px; }
.brand__txt {
  font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.03em;
}
.brand__txt span {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav__links { display: flex; gap: 2px; margin-left: auto; }
.nav__links a {
  padding: 9px 14px; border-radius: 999px; font-size: 15px; color: var(--ink-dim);
  white-space: nowrap; transition: color var(--dur-1), background var(--dur-1);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); background: var(--panel-2); }
.nav__cta { margin-left: 10px; padding: 11px 22px; font-size: 15px; }
.nav__burger {
  display: none; margin-left: auto; width: 44px; height: 40px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line-strong); color: var(--ink);
  cursor: pointer; font-size: 15px;
}

/* ---------- Grouped menus ------------------------------------------
   Twelve pages will not sit in one row, so the site's two halves each
   get a menu. Above the burger breakpoint these are panels; below it
   they flatten into labelled lists inside the burger, because a
   dropdown nested in a dropdown helps nobody.
   ------------------------------------------------------------------ */
.nav__grp { position: relative; }
.nav__grpbtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-dim);
  font: inherit; font-size: 15px; cursor: pointer; white-space: nowrap;
  transition: color var(--dur-1), background var(--dur-1);
}
.nav__grpbtn i {
  width: 7px; height: 7px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-1);
}
.nav__grp .nav__grpbtn:hover,
.nav__grp.open .nav__grpbtn { color: var(--ink); background: var(--panel-2); }
.nav__grp.is-here .nav__grpbtn { color: var(--ink); }
.nav__grp.is-here .nav__grpbtn::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--grad);
}
.nav__grp.open .nav__grpbtn i { transform: rotate(225deg) translate(-2px, -2px); }
.nav__grpbtn:focus-visible { outline: 2px solid var(--surge); outline-offset: 2px; }

/*  A rule that sets `display` on an element which also carries the
 *  `hidden` attribute outranks the UA stylesheet's [hidden]{display:none},
 *  leaving an invisible panel on top of the page. Restore it first. */
.nav__menu[hidden] { display: none !important; }

.nav__menu {
  position: absolute; top: calc(100% + 10px);
  width: min(340px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 20px; padding: 14px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .6);
  display: grid; gap: 2px; z-index: 70;
}
/* The panels are wider than their buttons, so each is anchored to the
   side of the bar it sits on rather than centred — centred panels ran
   off the viewport on the right-hand group at narrower desktop widths. */
.nav__grp:first-of-type .nav__menu { left: 0;  right: auto; }
.nav__grp:last-of-type  .nav__menu { right: 0; left: auto; }

.nav__menuhead {
  margin: 2px 8px 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint);
}
.nav__menu a {
  display: grid; gap: 1px; padding: 10px 12px; border-radius: 13px;
  background: transparent; white-space: normal;
}
.nav__menu a strong { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.nav__menu a span { font-size: 12.5px; color: var(--ink-faint); }
.nav__menu a:hover, .nav__menu a:focus-visible { background: var(--panel-2); }
.nav__menu a[aria-current="page"] { background: var(--surge-soft); }
.nav__menu a[aria-current="page"] strong { color: var(--surge); }

@media (max-width: 1080px) {
  .nav__burger { display: block; }
  .nav__cta { display: none; }
  .nav__links a { white-space: normal; }
  .nav__links {
    position: absolute; top: 74px; left: 0; right: 0; flex-direction: column; gap: 0;
    padding: 8px var(--pad-x) 20px; background: var(--bg-raise);
    border-bottom: 1px solid var(--line); display: none;
    /* Twelve links and two headings scroll inside the panel. The consent
       bar is fixed to the bottom of the viewport, so the panel has to stop
       above it or its last items are unreachable. */
    max-height: calc(100vh - 74px - var(--tp-consent-h, 0px));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav.open .nav__links { display: flex; }
  .nav__links > a { padding: 13px 0; border-bottom: 1px solid var(--line); border-radius: 0; }

  .nav__grp { position: static; }
  .nav__grpbtn {
    width: 100%; justify-content: flex-start; padding: 16px 0 8px;
    border-radius: 0; pointer-events: none;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .nav__grpbtn i { display: none; }
  .nav__grp.is-here .nav__grpbtn::after { display: none; }
  .nav__menu {
    position: static; transform: none; width: auto;
    background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
  }
  .nav__menuhead { display: none; }
  .nav__menu a {
    padding: 13px 0; border-bottom: 1px solid var(--line); border-radius: 0;
    grid-template-columns: 1fr auto; align-items: baseline; gap: 12px;
  }
  .nav__menu a span { text-align: right; }
}

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); background: var(--bg-raise); padding-block: 58px 28px; }
.foot__grid { display: grid; gap: 34px; }
@media (min-width: 720px)  { .foot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .foot__grid { grid-template-columns: 1.6fr repeat(4, 1fr); gap: 28px; } }
.foot h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
           text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a { font-size: 15px; color: var(--ink-dim); transition: color var(--dur-1); }
.foot a:hover { color: var(--surge); }
.foot__bar {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 13.5px; color: var(--ink-faint);
}

/* ---------- Reveal ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.rv-l { opacity: 0; transform: translateX(-26px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.rv-l.in { opacity: 1; transform: none; }
.rv-r { opacity: 0; transform: translateX(26px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.rv-r.in { opacity: 1; transform: none; }
.rv-s { opacity: 0; transform: scale(0.95); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.rv-s.in { opacity: 1; transform: none; }
[class*="rv"][data-d="1"] { transition-delay: 90ms; }
[class*="rv"][data-d="2"] { transition-delay: 180ms; }
[class*="rv"][data-d="3"] { transition-delay: 270ms; }
[class*="rv"][data-d="4"] { transition-delay: 360ms; }

@media (max-width: 760px) {
  .rv-l, .rv-r { transform: translateY(22px); }
  .rv-l.in, .rv-r.in { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-l, .rv-r, .rv-s { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Scroll progress ---------- */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--grad); z-index: 80; transition: width 80ms linear;
}

/* ---------- Section head — the chip ----------------------------------
   Everything on this brand is device-shaped, so the eyebrow is a pill
   rather than a line of small caps, and the head sits without a rule.
   -------------------------------------------------------------------- */
.eyebrow--chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
}
.eyebrow--chip::before {
  content: ""; width: 9px; height: 9px; border-radius: 3px;
  background: var(--grad); flex: 0 0 auto;
}
.sec-head { max-width: none; }
.sec-head h2 { margin: 16px 0 12px; max-width: 24ch; }
.sec-head .lead { margin: 0; max-width: 60ch; }
.sec-head--center h2, .sec-head--center .lead { margin-inline: auto; }

/* ---------- Reveal — the spring -------------------------------------
   Overshoots slightly. This brand is the one allowed to be playful.
   -------------------------------------------------------------------- */
.rv  { opacity: 0; transform: translateY(20px) scale(.97);
       transition: opacity 260ms ease-out,
                   transform 520ms cubic-bezier(.16, 1.18, .3, 1); }
.rv.in { opacity: 1; transform: none; }


/* ---------- Shared layout primitives --------------------------------
   These used to live in stage.css, which only the counter pages load —
   so the "In the hand" pages rendered every two-column split as one
   column. They belong here, where every page can see them.
   -------------------------------------------------------------------- */
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } }
.split--start { align-items: start; }
.split > * { min-width: 0; }

.hero__pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 32px; }