/* Inter, self-hosted. Variable (100-900) because the type scale below uses 620,
   650, 720, 750 and 850 — static weights would snap those to the nearest 100.
   Latin subset only, 47KB. unicode-range means anything outside Latin-1 falls
   through to the next family in --sans instead of blocking on a font that has
   no glyph for it. font-display:swap so text is never invisible; the preload in
   index.html is what keeps the swap from being visible in practice. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --ink: #0b0d0d;
  --ink-soft: #151918;
  --paper: #f1efe8;
  --paper-2: #e4e0d5;
  --orange: #ff6433;
  --orange-soft: #ff8b68;
  /* --orange on --paper is only 2.6:1. Use this for orange text/icons on any
     light surface (.compatibility, .final-cta) — 5.5:1 against --paper. */
  --orange-deep: #b03505;
  --lime: #d5ff63;
  --muted: #9da39e;
  --line-dark: rgba(241, 239, 232, .16);
  --line-light: rgba(11, 13, 13, .18);
  --max: 1240px;
  --pad: clamp(20px, 4vw, 58px);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); scrollbar-gutter: stable; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  /* `clip` rather than `hidden`: overflow-x:hidden on body makes it a scroll
     container, which stops position:sticky (the topbar) from sticking. */
  overflow-x: clip;
}

a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
::selection { background: var(--orange); color: var(--ink); }

/* Anchored headings would otherwise land under the 68px sticky topbar. */
:target, [id] { scroll-margin-top: 88px; }

/* Baseline keyboard focus for everything that has no bespoke focus style. */
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.compatibility :focus-visible,
.final-cta :focus-visible { outline-color: var(--ink); }
#main:focus { outline: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 10px;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--lime);
  color: var(--ink);
  padding: 10px 14px;
  font: 700 12px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.skip-link:focus { transform: translateY(0); }

.site-shell { position: relative; isolation: isolate; }
.site-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000 0 34%, transparent 72%);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 68px;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--line-dark);
  background: rgba(11, 13, 13, .88);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  /* Hit area was only 13px tall. The topbar is 68px and centers its items, so
     growing this changes nothing visually. */
  min-height: 44px;
  gap: 11px;
  width: max-content;
  text-decoration: none;
  font: 800 12px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.brand-copy { display: grid; gap: 5px; }
.brand-copy small {
  color: var(--orange);
  font: 700 8px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.brand-mark {
  width: 13px;
  height: 13px;
  border: 2px solid var(--orange);
  box-shadow: inset 4px 0 0 var(--orange);
  transform: rotate(45deg);
}

.topbar nav { display: flex; gap: clamp(16px, 3vw, 36px); }
.topbar nav a {
  position: relative;
  text-decoration: none;
  font: 600 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c5c9c5;
}
/* These links are 11px tall, well under the 24x24 minimum target size. An invisible
   inset overlay grows the hit area without moving the text or the ::after underline,
   which padding would have shifted. */
.topbar nav a::before {
  content: "";
  position: absolute;
  inset: -8px -6px;
}
.topbar nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -9px;
  height: 1px;
  background: var(--orange);
  transition: right .25s ease;
}
.topbar nav a:hover::after, .topbar nav a:focus-visible::after { right: 0; }

.nav-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--paper);
  padding: 10px 14px;
  font: 800 10px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.nav-cta:hover, .nav-cta:focus-visible { background: var(--orange); border-color: var(--orange); }

/* The full CTA label runs 28 characters. Below ~520px it collides with the
   brand and the nav toggle, which overlap rather than shrink because the
   topbar's tracks are sized to their content. Swapping in a short label beats
   truncating: display:none keeps exactly one of the two out of the
   accessibility tree, so the link never announces both. */
.nav-cta-short { display: none; }

/* Hidden until JS can drive it — a dead button is worse than no button. */
.nav-toggle { display: none; }
.js .nav-toggle {
  justify-self: end;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--paper);
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform .2s ease, background .2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { transform: translateY(-6px); }
.nav-toggle-bars::after { transform: translateY(6px); }
.topbar.is-nav-open .nav-toggle-bars { background: transparent; }
.topbar.is-nav-open .nav-toggle-bars::before { transform: rotate(45deg); }
.topbar.is-nav-open .nav-toggle-bars::after { transform: rotate(-45deg); }

.hero {
  min-height: calc(100svh - 68px);
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr);
  max-width: 1600px;
  margin: 0 auto;
  border-left: 1px solid var(--line-dark);
  border-right: 1px solid var(--line-dark);
}

.hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(70px, 9vw, 138px) var(--pad) 60px;
  border-right: 1px solid var(--line-dark);
}
.hero-copy::before {
  content: "01 / PRE-SALE";
  position: absolute;
  left: var(--pad);
  top: 32px;
  color: var(--muted);
  font: 600 10px/1 var(--mono);
  letter-spacing: .13em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  color: var(--orange);
  font: 800 11px/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; }

h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 28px;
  max-width: 860px;
  font-size: clamp(54px, 7.6vw, 124px);
  line-height: .86;
  letter-spacing: -.07em;
  font-weight: 750;
}
h1 .product-title {
  display: block;
  margin-bottom: .28em;
  color: var(--orange);
  font-size: .58em;
  line-height: .96;
  letter-spacing: -.045em;
}
h1 .headline-main { display: block; }
h1 .outline {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 239, 232, .8);
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  width: min(100%, 680px);
  margin: -6px 0 28px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.hero-facts span {
  flex: 1 1 150px;
  padding: 12px 14px 12px 0;
  color: #c7cbc6;
  font: 650 10px/1.35 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hero-facts span + span { padding-left: 14px; border-left: 1px solid var(--line-dark); }
.hero-facts b { display: block; margin-bottom: 5px; color: var(--orange); font-size: 8px; letter-spacing: .14em; }

.hero-body {
  max-width: 670px;
  margin-bottom: 34px;
  color: #c7cbc6;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
}

/* The trigger that opens the signup modal. Used on both an <a href="#presale">
   (hero) and a <button> (#presale section) — see the .js gate below. */
.cta-button {
  display: inline-flex;
  align-items: center;
  /* .hero-copy is a flex column, so without this the button stretches to the
     full column width. Ignored in .final-cta, where text-align centres it. */
  align-self: flex-start;
  gap: 10px;
  border: 0;
  min-height: 58px;
  padding: 0 26px;
  background: var(--orange);
  color: var(--ink);
  text-decoration: none;
  font: 850 11px/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .2s ease;
}
.cta-button:hover, .cta-button:focus-visible { background: var(--lime); }

/* Hidden until JS can drive it — a dead button is worse than no button. Only
   the <button> needs this: the two link triggers still reach #presale, where
   the <noscript> note explains where the form went. */
button.cta-button { display: none; }
.js button.cta-button { display: inline-flex; }

.form-meta {
  width: min(100%, 680px);
  margin: 16px 0 0;
  color: #838984;
  font: 500 10px/1.5 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hero-visual {
  position: relative;
  min-height: 720px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--orange);
  color: var(--ink);
}
.hero-visual::before {
  content: "";
  position: absolute;
  width: min(72vw, 720px);
  aspect-ratio: 1;
  border: 1px solid rgba(11,13,13,.24);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(11,13,13,.045),
    0 0 0 140px rgba(11,13,13,.035),
    0 0 0 210px rgba(11,13,13,.025);
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(11,13,13,.34) .8px, transparent .8px);
  background-size: 13px 13px;
  mask-image: linear-gradient(to bottom right, #000, transparent 76%);
  opacity: .55;
  pointer-events: none;
}
.pc-wrap {
  position: relative;
  z-index: 2;
  width: min(90%, 770px);
  filter: drop-shadow(34px 42px 0 rgba(11,13,13,.13));
}
.pc-illustration { display: block; width: 100%; height: auto; background: transparent; color: var(--ink); }

.visual-label {
  position: absolute;
  z-index: 4;
  padding: 8px 10px;
  border: 1px solid rgba(11,13,13,.36);
  background: rgba(255,100,51,.78);
  backdrop-filter: blur(8px);
  font: 700 9px/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.visual-label.top { top: 34px; right: 34px; }
.visual-label.bottom { left: 34px; bottom: 34px; }
.crosshair {
  position: absolute;
  z-index: 1;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(11,13,13,.25);
  border-radius: 50%;
}
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: rgba(11,13,13,.4); }
.crosshair::before { width: 100px; height: 1px; left: -13px; top: 37px; }
.crosshair::after { width: 1px; height: 100px; top: -13px; left: 37px; }
.crosshair.a { top: 16%; left: 9%; }
.crosshair.b { right: 12%; bottom: 13%; transform: scale(.65); }

.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1600px;
  margin: 0 auto;
  border: 1px solid var(--line-dark);
  border-top: 0;
}
.proof-item {
  min-height: 118px;
  padding: 24px var(--pad);
  border-right: 1px solid var(--line-dark);
}
.proof-item:last-child { border-right: 0; }
.proof-item span { display: block; color: var(--orange); font: 700 10px/1 var(--mono); letter-spacing: .1em; margin-bottom: 12px; }
.proof-item strong { font-size: clamp(17px, 1.7vw, 24px); font-weight: 620; letter-spacing: -.03em; }

.section {
  position: relative;
  padding: clamp(88px, 11vw, 160px) var(--pad);
  border-top: 1px solid currentColor;
  overflow: hidden;
}
.section-inner { width: min(100%, var(--max)); margin: 0 auto; }
.section-head {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(32px, 7vw, 112px);
  align-items: start;
  margin-bottom: clamp(54px, 8vw, 104px);
}
/* opacity was .5, which put this at 2.8:1 on the orange .pricing surface. */
.section-number { color: currentColor; opacity: .85; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.section-head.is-centered {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 22px;
}
.section-head.is-centered .section-number {
  justify-self: start;
  text-align: left;
  color: var(--orange);
  opacity: 1;
  font-weight: 800;
  letter-spacing: .14em;
}
/* --orange fails AA on the light .compatibility surface. Needs to outrank the
   .section-head.is-centered rule above it. */
.compatibility .section-head.is-centered .section-number,
.compatibility .section-number { color: var(--orange-deep); }
.section-head.is-centered h2,
.section-head.is-centered .section-intro { margin-bottom: 0; }
.section h2 {
  max-width: 880px;
  margin-bottom: 26px;
  font-size: clamp(42px, 6.4vw, 92px);
  line-height: .94;
  letter-spacing: -.06em;
  font-weight: 720;
}
.section-intro { max-width: 720px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; opacity: .77; }

.compatibility { background: var(--paper); color: var(--ink); border-color: var(--line-light); }
.compat-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(40px, 7vw, 98px);
  align-items: start;
}
.status-list { border-top: 1px solid var(--line-light); }
.status-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-light);
}
.status-code {
  width: 52px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font: 800 10px/1 var(--mono);
  letter-spacing: .08em;
}
.status-row:nth-child(1) .status-code { background: var(--lime); }
.status-row:nth-child(2) .status-code { background: #ffd36a; }
.status-row:nth-child(3) .status-code { background: var(--orange); }
.status-row h3 { margin-bottom: 7px; font-size: 22px; letter-spacing: -.03em; }
.status-row p { margin-bottom: 0; color: #525753; }

.catalog {
  position: sticky;
  top: 104px;
  border: 1px solid var(--ink);
  background: #e9e6dc;
  box-shadow: 16px 16px 0 var(--ink);
}
.catalog-head {
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: 700 10px/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.catalog-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  min-height: 66px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-light);
  font-size: 14px;
}
.catalog-row:last-child { border-bottom: 0; }
.game-placeholder { display: flex; align-items: center; gap: 12px; }
.game-placeholder::before {
  content: "";
  width: 28px;
  height: 28px;
  border: 1px solid var(--ink);
  background:
    linear-gradient(45deg, transparent 46%, var(--ink) 47% 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, var(--ink) 47% 53%, transparent 54%);
  opacity: .56;
}
.pill { padding: 6px 8px; border: 1px solid var(--ink); font: 700 9px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pill.ok { background: var(--lime); }
.pill.note { background: #ffd36a; }
.pill.no { background: var(--orange); }
.pill.next { background: transparent; }
.transparency-note {
  grid-column: 1 / -1;
  margin-top: 56px;
  padding: 30px 34px;
  border-left: 5px solid var(--orange);
  background: rgba(11,13,13,.055);
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.35;
  letter-spacing: -.03em;
}

.ready { background: var(--ink-soft); color: var(--paper); border-color: var(--line-dark); }
.benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line-dark); }
.benefit-card {
  position: relative;
  min-height: 310px;
  padding: clamp(28px, 4vw, 52px);
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  overflow: hidden;
}
.benefit-card:nth-child(2n) { border-right: 0; }
.benefit-card:nth-last-child(-n+2) { border-bottom: 0; }
.benefit-card::after {
  content: attr(data-index);
  position: absolute;
  right: 18px;
  bottom: -38px;
  color: rgba(241,239,232,.035);
  font: 900 150px/1 var(--mono);
  letter-spacing: -.08em;
}
.benefit-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 66px;
  border: 1px solid var(--orange);
  color: var(--orange);
  font: 800 15px/1 var(--mono);
}
.benefit-card h3 { margin-bottom: 13px; font-size: clamp(23px, 2.5vw, 34px); line-height: 1.08; letter-spacing: -.04em; }
.benefit-card p { max-width: 520px; margin-bottom: 0; color: #aeb3ae; }

.pricing { background: var(--orange); color: var(--ink); border-color: rgba(11,13,13,.25); }
.pricing-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 8vw, 120px); align-items: center; }
.formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  font: 800 clamp(15px, 2vw, 24px)/1.2 var(--mono);
  letter-spacing: -.03em;
}
.formula span { padding: 13px 15px; border: 1px solid var(--ink); background: rgba(255,255,255,.14); }
.invoice {
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 18px 18px 0 var(--ink);
  transform: rotate(-1.2deg);
}
.invoice-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ink);
  font: 800 10px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.invoice-line {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  padding: 22px 20px;
  border-bottom: 1px solid var(--line-light);
}
.invoice-line:last-of-type { border-bottom: 0; }
.invoice-line strong { font-size: 17px; }
.invoice-line p { margin-bottom: 0; color: #545954; font-size: 14px; }
.invoice-total {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  border-top: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: 800 13px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pricing-note { margin-top: 30px; font: 700 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; }

.final-cta {
  position: relative;
  min-height: 78svh;
  display: grid;
  place-items: center;
  padding: clamp(90px, 12vw, 180px) var(--pad);
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--line-light);
  text-align: center;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  width: 880px;
  max-width: 92vw;
  aspect-ratio: 1;
  border: 1px solid rgba(11,13,13,.15);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(11,13,13,.025), 0 0 0 160px rgba(11,13,13,.02);
}
.final-inner { position: relative; z-index: 2; width: min(100%, 960px); }
.final-cta .eyebrow { justify-content: center; color: var(--orange-deep); }
.final-cta h2 { margin: 0 auto 26px; font-size: clamp(48px, 7.5vw, 108px); line-height: .9; letter-spacing: -.065em; }
.final-cta p { max-width: 700px; margin: 0 auto 36px; color: #565b56; font-size: clamp(17px, 1.5vw, 20px); }
/* Both of these sit inside .final-cta, where `.final-cta p` (0,1,1) outranks a
   bare class (0,1,0) — so the font and margins have to be restated here or the
   section's body-copy sizing wins. #838984 is also only 3.0:1 on --paper, below
   the 4.5:1 this small text needs. */
.final-cta .form-meta {
  margin: 16px auto 0;
  color: #666c66;
  font: 500 10px/1.5 var(--mono);
}
.final-cta .noscript-note {
  width: min(100%, 680px);
  max-width: 680px;
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

/* ---------------------------------------------------------------------------
   Signup modal

   MailerLite's universal.js injects form bhxSVB into .ml-embedded on page load,
   and the reCAPTCHA inside that form measures its container as it renders — a
   display:none ancestor gives it a zero-size box and it comes back collapsed.
   So the overlay is laid out at all times and hidden with visibility instead,
   which still keeps it out of the tab order and the accessibility tree.

   Nothing here styles the form itself. MailerLite ships its own !important-heavy
   CSS under a generated #mlb2-* id that changes when the form is edited, so
   fighting it from here would break on the next dashboard save. Restyle the form
   in MailerLite's own form designer instead.
   --------------------------------------------------------------------------- */
.signup-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(11,13,13,.86);
  visibility: hidden;
  opacity: 0;
  /* Delay visibility until the fade-out finishes, then flip it instantly. */
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.signup-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s ease;
}
/* margin:auto rather than align-items:center — auto margins collapse to 0 once
   the card is taller than the viewport, so a long form scrolls from its top
   instead of having it clipped above the scroll container. */
.signup-modal-inner {
  /* 388px of content once the card's padding is off — the reCAPTCHA iframe is a
     fixed 304px and will not shrink, so this cannot go much below 400px. */
  width: min(100%, 440px);
  margin: auto;
}
.signup-modal-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.signup-modal-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--paper);
  font: 800 10px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.signup-modal-close:hover, .signup-modal-close:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
}
.signup-modal-fallback {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--orange);
  background: var(--ink-soft);
  color: var(--paper);
  font-size: 14px;
  line-height: 1.6;
}
.signup-modal-fallback code { font: 600 13px/1 var(--mono); }
.signup-modal-fallback a { color: var(--orange-soft); }

/* ---------------------------------------------------------------------------
   Brand overrides for MailerLite's injected form

   The form's markup and stylesheet are not ours: universal.js injects both at
   runtime, after this file, scoped to a generated `#mlb2-<number>` id that
   changes whenever the form is rebuilt in the dashboard. So these rules cannot
   match on that id, and matching their class chain would only tie on
   specificity — and lose on source order, because their <style> lands later.

   `#signup-modal:is(#signup-modal)` counts as two ids. Their heaviest selectors
   carry one, and id count is compared before class count, so this wins whatever
   they generate, in any order. `!important` on top because most of their
   declarations carry it too, and important declarations are only ever beaten by
   other important ones.

   Only the class names are relied on, and every one used here comes from
   MailerLite's own generated embed. This is still an override layer over markup
   we do not control — re-check it after any change to the form. See SETUP.md §1.

   The reCAPTCHA is the one part that stays light: Google renders it in an
   iframe, so nothing here can reach inside it.
   --------------------------------------------------------------------------- */

/* Card. max-width:none releases their fixed 400px so it fills .signup-modal-inner. */
#signup-modal:is(#signup-modal) .ml-form-embedContainer,
#signup-modal:is(#signup-modal) .ml-form-embedWrapper {
  width: 100% !important;
  max-width: none !important;
}
#signup-modal:is(#signup-modal) .ml-form-embedWrapper {
  background-color: var(--ink-soft) !important;
  border: 1px solid rgba(241,239,232,.35) !important;
  border-radius: 0 !important;
}
#signup-modal:is(#signup-modal) .ml-form-embedBody,
#signup-modal:is(#signup-modal) .ml-form-successBody { padding: 28px 26px 10px !important; }

/* Heading and body copy, in the site's own self-hosted Inter rather than the
   copy MailerLite pulls from its CDN — var(--sans) is a variable font, so the
   620-850 weights this brand uses resolve instead of snapping to the nearest 100. */
#signup-modal:is(#signup-modal) .ml-form-embedContent h4,
#signup-modal:is(#signup-modal) .ml-form-successContent h4 {
  margin: 0 0 12px !important;
  color: var(--paper) !important;
  font-family: var(--sans) !important;
  font-size: 26px !important;
  font-weight: 720 !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
}
#signup-modal:is(#signup-modal) .ml-form-embedContent p,
#signup-modal:is(#signup-modal) .ml-form-successContent p {
  color: #c7cbc6 !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
#signup-modal:is(#signup-modal) .ml-form-embedContent p a,
#signup-modal:is(#signup-modal) .ml-form-successContent p a { color: var(--orange-soft) !important; }

/* Email field — the old inline .signup field, rebuilt on their markup. */
#signup-modal:is(#signup-modal) .ml-form-fieldRow input:not([type=checkbox]):not([type=radio]) {
  min-height: 58px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(241,239,232,.35) !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: var(--paper) !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
}
#signup-modal:is(#signup-modal) .ml-form-fieldRow input:not([type=checkbox]):not([type=radio])::placeholder { color: #858a86 !important; }
/* outline:none is replaced by the 2px ring, not dropped — same trade the inline
   form made before this one. */
#signup-modal:is(#signup-modal) .ml-form-fieldRow input:not([type=checkbox]):not([type=radio]):focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 2px var(--orange) !important;
  outline: none !important;
}
#signup-modal:is(#signup-modal) .ml-field-group label {
  color: var(--muted) !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
}

/* Marketing Permissions block. Their base rule forces text-transform:none and
   letter-spacing:normal onto every h4/p/span/button, so the mono label styling
   here has to outrank it — which is the whole point of the doubled id. */
#signup-modal:is(#signup-modal) .ml-form-embedPermissionsContent h4 {
  margin: 0 0 8px !important;
  color: var(--muted) !important;
  font: 800 10px/1.4 var(--mono) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
#signup-modal:is(#signup-modal) .ml-form-embedPermissionsContent p,
#signup-modal:is(#signup-modal) .ml-form-embedPermissionsOptionsCheckbox .description {
  color: var(--muted) !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
#signup-modal:is(#signup-modal) .ml-form-embedPermissionsOptionsCheckbox .label-description {
  color: var(--paper) !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
#signup-modal:is(#signup-modal) .ml-form-embedPermissionsOptionsCheckbox .label-description::before {
  border-color: rgba(241,239,232,.5) !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
#signup-modal:is(#signup-modal) .ml-form-embedPermissionsOptionsCheckbox input[type=checkbox]:checked ~ .label-description::before {
  border-color: var(--orange) !important;
  background-color: var(--orange) !important;
}
/* Their tick is white, which all but disappears on --orange. Same path, ink fill. */
#signup-modal:is(#signup-modal) .ml-form-embedPermissionsOptionsCheckbox input[type=checkbox]:checked ~ .label-description::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%230b0d0d' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e") !important;
}
#signup-modal:is(#signup-modal) .ml-form-embedMailerLite-GDPR p,
#signup-modal:is(#signup-modal) .ml-form-embedMailerLite-GDPR p a {
  color: var(--muted) !important;
  font-family: var(--sans) !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
}

/* Submit, matching .cta-button. */
#signup-modal:is(#signup-modal) .ml-form-embedSubmit button {
  min-height: 58px !important;
  padding: 16px 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--orange) !important;
  color: var(--ink) !important;
  font: 850 11px/1.2 var(--mono) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  transition: background-color .2s ease !important;
}
#signup-modal:is(#signup-modal) .ml-form-embedSubmit button:hover,
#signup-modal:is(#signup-modal) .ml-form-embedSubmit button:focus-visible {
  background-color: var(--lime) !important;
}
/* The spinner sits on that orange button; white-on-orange is nearly invisible. */
#signup-modal:is(#signup-modal) .ml-form-embedSubmitLoad::after {
  border-color: var(--ink) var(--ink) var(--ink) transparent !important;
}

/* Errors. Their #ff0000 lands at 4.4:1 on this card — just under the 4.5:1 it needs.
   This red is 5.8:1 and still far enough from --orange to not read as an accent. */
#signup-modal:is(#signup-modal) .ml-error input,
#signup-modal:is(#signup-modal) .ml-error textarea,
#signup-modal:is(#signup-modal) .ml-error select,
#signup-modal:is(#signup-modal) .ml-error .custom-checkbox-radio-list { border-color: #ff5a5a !important; }
#signup-modal:is(#signup-modal) .ml-error .label-description,
#signup-modal:is(#signup-modal) .ml-error .label-description p,
#signup-modal:is(#signup-modal) .ml-error .label-description p a,
#signup-modal:is(#signup-modal) .ml-error label:first-child { color: #ff5a5a !important; }

/* Stop the page behind the overlay from scrolling. On <html> rather than <body>:
   body is overflow-x:clip already, and making it a scroll container is what stops
   the sticky topbar from sticking. scrollbar-gutter:stable above keeps the page
   from jumping sideways when the scrollbar goes away. */
.modal-open { overflow: hidden; }

footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: end;
  padding: 38px var(--pad);
  border-top: 1px solid var(--line-dark);
  color: #838984;
  font: 600 10px/1.5 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
footer .center { text-align: center; }
footer .right { text-align: right; }
/* Also the no-JS fallback for the mobile nav, which needs a script to open. */
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.footer-nav a {
  /* 23px tall before — one pixel under the 24x24 minimum target size. */
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 0;
  text-decoration-color: rgba(131,137,132,.5);
  text-underline-offset: 3px;
}
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--paper); }

.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js [data-reveal].visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  /* Third track is the nav toggle. .site-nav is absolutely positioned below, so
     it is out of flow and does not claim a track. */
  .topbar { grid-template-columns: 1fr auto auto; }
  .js .nav-toggle { display: inline-flex; }

  /* The nav used to be display:none here, which left the site with no primary
     navigation at all below 980px. Now it is a disclosure panel. */
  .topbar .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 4px var(--pad) 12px;
    border-bottom: 1px solid var(--line-dark);
    /* Solid, not the topbar's glass: at .97 the orange headline still ghosted
       through the panel and made the links hard to read. */
    background: var(--ink);
  }
  .topbar.is-nav-open .site-nav { display: flex; }
  .topbar .site-nav a {
    display: flex;
    align-items: center;
    min-height: 52px;
    border-top: 1px solid var(--line-dark);
    font-size: 12px;
  }
  .topbar .site-nav a::after { display: none; }

  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { border-right: 0; }
  .hero-visual { min-height: 620px; border-top: 1px solid var(--line-dark); }
  .section-head, .compat-grid, .pricing-layout { grid-template-columns: 1fr; }
  .catalog { position: relative; top: auto; }
  .section-head { gap: 24px; }
  .invoice { transform: none; }
}

@media (max-width: 680px) {
  .topbar { min-height: 60px; padding: 0 18px; }
  .brand-copy small { display: none; }
  /* Was 9px/18px tall — under the 24x24 minimum target size and hard to read. */
  .nav-cta { min-height: 44px; padding: 9px 12px; font-size: 10px; }
  .hero-copy { padding-left: 20px; padding-right: 20px; }
  h1 { font-size: clamp(50px, 17vw, 78px); }
  h1 .product-title { font-size: .66em; }
  .hero-facts { display: grid; grid-template-columns: 1fr; }
  .hero-facts span + span { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-dark); }
  .hero-visual { min-height: 470px; }
  .visual-label.top { top: 18px; right: 18px; }
  .visual-label.bottom { left: 18px; bottom: 18px; }
  .proof-strip { grid-template-columns: 1fr; }
  .proof-item { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .proof-item:last-child { border-bottom: 0; }
  .cta-button { width: 100%; justify-content: center; padding: 0 18px; text-align: center; }
  .signup-modal { padding: 16px; }
  .section { padding-left: 20px; padding-right: 20px; }
  .section h2 { font-size: clamp(42px, 13vw, 68px); }
  .status-row { grid-template-columns: 1fr; }
  .benefit-grid { grid-template-columns: 1fr; }
  .benefit-card, .benefit-card:nth-child(2n), .benefit-card:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .benefit-card:last-child { border-bottom: 0; }
  .invoice-line { grid-template-columns: 1fr; gap: 6px; }
  /* space-between leaves no gap once both labels wrap to two lines, so they run
     together and read as one sentence. Stack them instead. */
  .invoice-total { flex-direction: column; align-items: flex-start; gap: 12px; }
  .catalog-row { grid-template-columns: 1fr; }
  .pill { justify-self: start; }
  footer { grid-template-columns: 1fr; text-align: left; }
  footer .center, footer .right { text-align: left; }
  .footer-nav { justify-content: flex-start; gap: 4px 18px; }
}

@media (max-width: 520px) {
  .nav-cta-long { display: none; }
  .nav-cta-short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Windows High Contrast / forced colors. The outlined headline is
   color:transparent + text-stroke, which forced-colors flattens into nothing. */
@media (forced-colors: active) {
  h1 .outline { color: CanvasText; -webkit-text-stroke: 0; }
  .brand-mark, .status-code, .pill, .benefit-icon { border: 1px solid CanvasText; }
  .cta-button, .signup-modal-close, .signup-modal-fallback,
  .final-cta .noscript-note { border: 1px solid CanvasText; }
  .nav-toggle { border: 1px solid CanvasText; }
  .catalog, .invoice { box-shadow: none; border: 1px solid CanvasText; }
  .hero-visual::before, .hero-visual::after, .final-cta::before, .crosshair { display: none; }
}