/* =========================================================
   Iron Click — homepage
   Display: SouthGhetto  ·  Body: Manrope  ·  Black / White / #D51115

   One type scale drives the whole page. Never hard-code a font size
   in a component — pick the right step below.
     --fs-h1   hero headline, once per page
     --fs-h2   section titles
     --fs-h3   service card titles
     --fs-h4   small card titles, footer company name
     --fs-lead section subtitles
     --fs-body all descriptions
     --fs-sm   labels, footer links, legal
   ========================================================= */

/* ---------------------------- Fonts ---------------------------- */

/* SouthGhetto covers Latin + Cyrillic А-я but has no & ’ — and no Ukrainian
   Є І Ї Ґ; the stack falls through to Anton for those symbols and to
   Ermilov on the UA page. */
@font-face {
  font-family: 'SouthGhetto';
  src: url('../assets/fonts/SouthGhetto-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AntonFallback';
  src: url('../assets/fonts/Anton-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ErmilovUA';
  src: url('../assets/fonts/Ermilov-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------------------------- Tokens --------------------------- */

:root {
  --red: #D51115;
  --red-hi: #F0181D;
  --red-dk: #9E0C10;

  --black: #000000;
  --panel: #0E0E0E;
  --white: #FFFFFF;

  --fg-2: rgba(255, 255, 255, .70);
  --fg-3: rgba(255, 255, 255, .45);
  --line: rgba(255, 255, 255, .14);

  --ink: #101014;
  --ink-2: #5A5C63;
  --ink-line: #E4E6EA;
  --ink-soft: #F4F5F7;

  --display: 'SouthGhetto', 'AntonFallback', 'ErmilovUA', Impact, sans-serif;
  --body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale — the single source of truth for every size on the page.
     Every clamp tops out by ~1280px, so 1440, 1920 and 2560 all render
     identically. Only the two headline steps scale at all; body copy is
     a fixed 14px and section subtitles a fixed 16px. */
  --fs-h1:   clamp(2.1rem, 4.6vw, 3.7rem);   /* hero, once per page  → 59px */
  --fs-h2:   clamp(1.7rem, 3vw,   2.4rem);   /* section titles       → 38px */
  --fs-h3:   clamp(1.4rem, 2.2vw, 1.75rem);  /* service card titles  → 28px */
  --fs-h4:   1.25rem;                        /* small card titles    → 20px */
  --fs-lead: 1rem;                           /* section subtitles    → 16px */
  --fs-body: .875rem;                        /* all descriptions     → 14px */
  --fs-sm:   .8125rem;                       /* labels, legal        → 13px */

  --wrap: 1200px;
  --pad: clamp(16px, 4vw, 40px);
  --gap: clamp(16px, 2vw, 24px);
  --sect: clamp(64px, 8vw, 112px);
  --r: 20px;

  /* Glyph size inside every round social button, as a share of the DIAMETER.
     A circle narrows toward its edges, so a glyph at 70% of the diameter
     already looks edge-to-edge. Half the diameter is what reads as "inset". */
  --soc-glyph: 50%;
}

/* ---------------------------- Reset ---------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }

::selection { background: var(--red); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--red); color: #fff; padding: 12px 20px; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 3px; }

.red { color: var(--red); }

/* ------------------------- Type helpers ------------------------ */

.h1, .h2, .h3, .h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.08; }
.h4 { font-size: var(--fs-h4); line-height: 1.12; }

.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--fg-2); }
.desc { font-size: var(--fs-body); line-height: 1.6; color: var(--fg-2); }

/* Section header — same rhythm in every section. */
.shead { display: grid; justify-items: center; gap: 14px; text-align: center; margin-bottom: clamp(32px, 4vw, 52px); }
.shead .lead { max-width: 62ch; }

/* ------------------------- 12-column grid ---------------------- */

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }

/* Grid children default to min-width:auto, so one long word ("recommendations")
   forces its own tracks wider and starves the neighbouring ones down to 0.
   Pinning min-width keeps every span the width its columns say it is. */
.grid > * { min-width: 0; }

/* A 12-column grid always pays for 11 gutters. On a phone those gutters eat
   most of the row and the tracks collapse unevenly, so the gutter shrinks. */
@media (max-width: 700px) {
  .grid { column-gap: 10px; }
}
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-5 { grid-column: span 5; }
.col-7 { grid-column: span 7; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }

@media (max-width: 1080px) {
  .col-2 { grid-column: span 4; }
  .col-3 { grid-column: span 6; }
  .col-4 { grid-column: span 6; }
  .grid > .col-4:last-child { grid-column: span 12; }
}
@media (max-width: 880px) {
  .col-2 { grid-column: span 6; }
  .col-3, .col-4, .col-5, .col-6, .col-7 { grid-column: span 12; }
}

/* --------------------------- Buttons --------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .22s, border-color .22s, color .22s, transform .22s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn__i { width: 15px; height: 15px; flex: none; position: relative; top: -.06em; }

.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-hi); }

.btn--outline { border-color: currentColor; }
.btn--outline:hover { background: var(--white); color: var(--black); border-color: var(--white); }

.btn--white { background: var(--white); color: var(--ink); }
.btn--white:hover { background: #f0f0f0; }

.btn--lg { padding: 15px 34px; font-size: 1.08rem; }

/* --------------------------- Socials --------------------------- */

.soc { display: flex; gap: 12px; }
.soc a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--red);
  transition: background-color .22s, transform .22s;
}
.soc a:hover { background: var(--red-hi); transform: translateY(-2px); }
/* Sized as a share of the circle, not in px, so the glyph keeps the same
   proportion wherever the circle shrinks (mobile hero, footer). */
.soc img { width: var(--soc-glyph); height: var(--soc-glyph); object-fit: contain; }

/* The paper plane is geometrically centred but reads low-right: its solid body
   sits upper-right while the thin tail trails down-left. Nudge it back. */
.ico-tg { transform: translate(-3%, -4%); }

.soc--onred a { background: rgba(0, 0, 0, .3); }
.soc--onred a:hover { background: rgba(0, 0, 0, .5); }

/* --------------------------- Header ---------------------------- */

.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 14px;
  background: var(--black);
  transition: padding .25s, box-shadow .25s;
}
.hdr.is-stuck { padding-block: 9px; box-shadow: 0 1px 0 var(--line); }

.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hdr__logo img { width: clamp(112px, 12vw, 150px); }
.hdr__right { display: flex; align-items: center; gap: 10px; }

.hdr .btn { padding: 10px 18px; font-size: .9rem; border-radius: 7px; }

.lang { display: flex; gap: 2px; margin-left: 6px; }
.lang a { padding: 6px 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--fg-3); transition: color .2s; }
.lang a:hover, .lang a.is-on { color: var(--white); }
/* The Ukrainian build does not exist yet. Shown, but plainly not clickable —
   swap this span back to <a href="/ua"> once ua/ ships. */
.lang .is-soon, .menu__lang .is-soon {
  padding: 6px 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, .28);
  cursor: not-allowed;
}

.burger { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; }
.burger span { display: block; width: 17px; height: 2px; margin: 3.5px auto; background: #fff; transition: transform .3s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 99;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 90px var(--pad) 40px;
  background: var(--black);
}
.menu a {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: var(--fs-h3);
  text-transform: uppercase;
}
.menu a:hover { color: var(--red); }
.menu__lang { display: flex; gap: 10px; padding-top: 22px; }
.menu__lang a { border: 0; font-family: var(--body); font-weight: 700; font-size: var(--fs-sm); padding: 7px 16px; border-radius: 999px; background: rgba(255,255,255,.08); }

/* ---------------------------- Hero ----------------------------- */

/* Full viewport at every size. `svh` keeps mobile browser chrome from
   pushing the CTA below the fold; `vh` is the fallback for older engines. */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: clamp(72px, 8.5vh, 82px) 8px;
}

.hero__in { display: grid; justify-items: center; text-align: center; }

.hero__title { display: grid; gap: .04em; }

/* The helmet PNG ships on a black plate — `screen` drops it onto the page
   background and the mask feathers the frame edges away. */
.hero__helmet { width: min(816px, 96%); margin-block: clamp(-14px, -1.2vh, -4px) clamp(4px, 1vh, 14px); }
.hero__helmet img {
  width: 100%;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 48%, #000 52%, transparent 100%);
          mask-image: radial-gradient(72% 62% at 50% 48%, #000 52%, transparent 100%);
}

.hero__text { max-width: 64ch; }

.hero .btn { margin-top: clamp(20px, 3vh, 32px); }
.hero .soc { margin-top: clamp(18px, 2.6vh, 28px); }

/* ------------------------- Core activity ----------------------- */
/* Four columns on the red field, plates alternating dark / light,
   illustration on top, rectangular CTA. */

.core { background: var(--red); padding-block: var(--sect); }
/* Whole title stays white — a red accent word disappears on the red field. */
.core .h2, .core .h2 .red { color: #fff; }
.core .lead { color: rgba(255, 255, 255, .85); }

.scard {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .28s;
}
.scard:hover { transform: translateY(-4px); }

/* Every other plate flips dark / light, the way the live block alternates. */
.scard:nth-child(odd)  { background: var(--panel); color: var(--white); }
.scard:nth-child(even) { background: var(--white); color: var(--ink); }

/* Phones sit flush on the frame's bottom edge, identically in every card.
   The hairline gives them a ground to stand on instead of floating. */
.scard__media { height: 230px; padding: 20px 20px 0; border-bottom: 1px solid; }
.scard:nth-child(odd)  .scard__media { border-color: var(--line); }
.scard:nth-child(even) .scard__media { border-color: var(--ink-line); }
.scard__media img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }

.scard__body { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 22px; }

.scard__meta { display: flex; align-items: center; gap: 10px; }
.scard__no { font-family: var(--display); font-size: var(--fs-sm); color: var(--red); }
.scard__tag {
  font-size: var(--fs-sm);
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.scard:nth-child(odd)  .scard__tag { color: var(--fg-3); }
.scard:nth-child(even) .scard__tag { color: var(--ink-2); }

.scard__title { max-width: 16ch; }
.scard__text { font-size: var(--fs-body); line-height: 1.6; }
.scard:nth-child(odd)  .scard__text { color: var(--fg-2); }
.scard:nth-child(even) .scard__text { color: var(--ink-2); }

.scard .btn { align-self: end; justify-self: start; }

/* ----------------------------- Why ----------------------------- */

.why { background: var(--white); color: var(--ink); padding-block: var(--sect); }
.why .lead { color: var(--ink-2); }


.wcard {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 14px;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--ink-line);
  border-radius: var(--r);
  background: var(--white);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.wcard:hover { border-color: #CBCFD6; box-shadow: 0 18px 40px -24px rgba(16, 16, 20, .45); transform: translateY(-3px); }

/* Stretch the img to the frame and let object-fit letterbox it — the item must
   stretch for `object-fit` to have an area to fit into. */
/* All three illustrations are 1680x1680 squares, so sizing them by height
   renders them at identical dimensions and 70% of the grey frame. */
.wcard__media {
  height: 200px;
  border-radius: 14px;
  background: var(--ink-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.wcard__media img {
  display: block;
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.wcard__no {
  font-family: var(--display);
  font-size: var(--fs-sm);
  letter-spacing: .02em;
  color: var(--red);
}
.wcard__title { color: var(--ink); }
.wcard__text { font-size: var(--fs-body); color: var(--ink-2); }

/* --------------------------- Partners -------------------------- */

.partners { background: var(--panel); padding-block: var(--sect); }

.pgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.pgrid__cell {
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color .25s;
}
.pgrid__cell:hover { background: rgba(255, 255, 255, .04); }
.pgrid__cell:nth-child(4n) { border-right: 0; }
.pgrid__cell:nth-last-child(-n+4) { border-bottom: 0; }

/* The logo PNGs ship on a pure-black plate that reads as a dark box against
   the #0E0E0E panel. `lighten` keeps the lighter of the two, so the plate
   vanishes into the panel while the white marks stay white. */
.pgrid__cell img {
  width: 100%;
  max-width: 170px;
  max-height: 56px;
  object-fit: contain;
  mix-blend-mode: lighten;
  transition: transform .25s;
}
.pgrid__cell:hover img { transform: scale(1.07); }

/* Marks that already ship as white-on-transparent need no blend trick, and
   `lighten` would wash out the hover tint underneath them. */
.pgrid--clean img { mix-blend-mode: normal; }

/* ----------------------------- CTA ----------------------------- */

.cta { background: var(--black); padding-block: var(--sect); }

.cta__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r);
  padding: clamp(52px, 6vw, 88px) clamp(24px, 5vw, 64px) clamp(96px, 12vw, 150px);
  background: linear-gradient(135deg, var(--red-dk) 0%, var(--red) 46%, #6E070A 100%);
  min-height: 460px;
  display: grid;
  align-content: center;
}

/* Two counter-drifting blooms keep the field from reading as flat fill. */
.cta__panel::before,
.cta__panel::after {
  content: '';
  position: absolute;
  z-index: -3;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
}
.cta__panel::before {
  top: -45%; left: -12%;
  background: radial-gradient(circle, #FF4A4E 0%, transparent 68%);
  animation: drift-a 16s ease-in-out infinite alternate;
}
.cta__panel::after {
  bottom: -50%; right: -8%;
  background: radial-gradient(circle, #6E070A 0%, transparent 66%);
  animation: drift-b 20s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate(0, 0)       scale(1); }
  to   { transform: translate(22%, 16%)   scale(1.18); }
}
@keyframes drift-b {
  from { transform: translate(0, 0)       scale(1.1); }
  to   { transform: translate(-20%, -14%) scale(.92); }
}

/* ---- Diagonal wordmark bands ---- */

.cta__bands {
  position: absolute;
  inset: -25% -20%;
  z-index: -2;
  display: grid;
  align-content: center;
  gap: clamp(20px, 3vw, 44px);
  transform: rotate(-8deg);
  opacity: .14;
  pointer-events: none;
}
.cta__band {
  display: flex;
  width: max-content;
  font-family: var(--display);
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #000;
  animation: band 30s linear infinite;
}
.cta__band--rev { animation-direction: reverse; color: #fff; }
.cta__band span { padding-right: .35em; }

@keyframes band {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Helmet ---- */

/* Centred under the copy, bleeding off the bottom edge. `screen` drops the
   PNG's black plate onto the red field, so no mask (and no smudge) is needed. */
.cta__helmet {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -30%;
  width: min(940px, 88%);
  translate: -50% 0;
  mix-blend-mode: screen;
  opacity: .55;
  animation: float-cta 9s ease-in-out infinite;
  pointer-events: none;
}
/* Uses translate/transform separately so the -50% centring stays intact. */
@keyframes float-cta {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* ---- Content ---- */

.cta__in {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 28px;
}
.cta__title { max-width: 18ch; }
.cta__sub { max-width: 46ch; color: rgba(255, 255, 255, .92); }

/* ---------------------------- Footer --------------------------- */

.ftr { background: var(--black); padding-block: clamp(44px, 5vw, 76px); }

.ftr__in { display: grid; grid-template-columns: minmax(220px, 1fr) 2.2fr auto; gap: clamp(28px, 4vw, 56px); align-items: start; }

.ftr__logo img { width: 140px; margin-bottom: 20px; }
.ftr__co { font-family: var(--display); font-size: var(--fs-body); letter-spacing: .05em; text-transform: uppercase; }
.ftr__addr { color: var(--fg-3); font-size: var(--fs-sm); line-height: 1.7; margin-top: 8px; }

.ftr__nav { display: grid; grid-template-columns: repeat(4, auto); gap: 16px clamp(20px, 3vw, 44px); }
.ftr__col { display: grid; gap: 11px; align-content: start; }
.ftr__col a, .ftr__lbl { font-size: var(--fs-sm); color: var(--fg-2); transition: color .2s; }
.ftr__col a:hover { color: var(--red); }
.ftr__lbl { color: var(--fg-3); }

.ftr__soc { display: flex; gap: 10px; }
.ftr__soc a {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  transition: background-color .22s;
}
.ftr__soc a:hover { background: var(--red-hi); }
.ftr__soc img, .ftr__soc svg { width: var(--soc-glyph); height: var(--soc-glyph); object-fit: contain; }

/* ---------------------------- Cookies -------------------------- */

.ck { position: fixed; left: var(--pad); bottom: 22px; z-index: 120; max-width: 400px; }
.ck__box { padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.ck__title { font-family: var(--display); font-size: var(--fs-h3); text-transform: uppercase; margin-bottom: 8px; }
.ck__text { color: var(--fg-2); font-size: var(--fs-sm); }
.ck__row { display: flex; align-items: center; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.ck__link { font-weight: 700; font-size: var(--fs-sm); color: var(--fg-2); text-decoration: underline; text-underline-offset: 4px; }
.ck__link:hover { color: #fff; }

.ckm { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: var(--pad); background: rgba(0, 0, 0, .78); }
.ckm__panel { position: relative; width: min(620px, 100%); max-height: 86svh; overflow-y: auto; padding: clamp(24px, 3.4vw, 38px); border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.ckm__x { position: absolute; top: 12px; right: 18px; font-size: 1.8rem; line-height: 1; color: var(--fg-3); }
.ckm__x:hover { color: #fff; }
.ckm__title { font-family: var(--display); font-size: var(--fs-h3); text-transform: uppercase; }
.ckm__lead { color: var(--fg-2); font-size: var(--fs-sm); margin-top: 10px; }
.ckm__row { padding-block: 18px; border-top: 1px solid var(--line); margin-top: 18px; }
.ckm__row p { color: var(--fg-3); font-size: var(--fs-sm); margin-top: 8px; }
.ckm__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ckm__head b { font-size: var(--fs-body); }
.ckm__state { font-size: var(--fs-sm); font-style: normal; color: var(--fg-3); }
.ckm__state--on { color: var(--red); }
.ckm .btn { margin-top: 24px; width: 100%; justify-content: center; }

.tgl { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.tgl input { position: absolute; opacity: 0; pointer-events: none; }
.tgl span { width: 42px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.16); position: relative; transition: background-color .25s; }
.tgl span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .25s; }
.tgl input:checked + span { background: var(--red); }
.tgl input:checked + span::after { transform: translateX(18px); }

/* -------------------------- Responsive ------------------------- */

@media (max-width: 1080px) {
}

@media (max-width: 1024px) {
  .hdr__right .btn { display: none; }
  .burger { display: block; }
  .ftr__in { grid-template-columns: 1fr; }
  .ftr__nav { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .pgrid__cell:nth-child(4n) { border-right: 1px solid var(--line); }
  .pgrid__cell:nth-child(2n) { border-right: 0; }
  .pgrid__cell:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
  .pgrid__cell:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 700px) {
}

/* The hero is locked to one viewport, so on phones the intro paragraph and the
   helmet have to give up room or the CTA drops below the fold. */
@media (max-width: 700px) {
  .hero { padding-block: 84px 24px; }
  .hero__title { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .hero__helmet { width: 100%; margin-block: -4px 6px; }
  .hero__text { font-size: var(--fs-body); line-height: 1.5; max-width: 40ch; }
  .hero .btn { margin-top: 20px; }
  .hero .soc { margin-top: 16px; }
  .hero .soc a { width: 40px; height: 40px; }
}

@media (max-height: 820px) and (min-width: 701px) {
  .hero__helmet { width: min(560px, 74%); }
  .hero__text { max-width: 74ch; }
}

/* Below the two-column threshold the helmet would sit under the copy — drop it
   to a faint backdrop and let the text use the full panel. */
@media (max-width: 780px) {
  .cta__helmet { width: 130%; bottom: -14%; opacity: .45; }
}

@media (max-width: 560px) {
  .ck { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* =========================================================
   Media Buying page — reuses every token, grid step and type
   step from above; only the page-specific components live here.
   ========================================================= */

/* Full viewport, same treatment as the homepage hero: the top padding matches
   the fixed header and the grid centres what is left. */
.mb-hero {
  position: relative;
  isolation: isolate;
  background: var(--black);
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: clamp(80px, 9vh, 96px) 16px;
  overflow: hidden;
}
.mb-hero__glow {
  position: absolute;
  z-index: -1;
  left: 50%; top: -10%;
  translate: -50% 0;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(213, 17, 21, .30) 0%, transparent 62%);
  filter: blur(40px);
}
/* Two columns: copy left, the product mock-up right. */
.mb-hero__in { align-items: center; row-gap: clamp(28px, 5vw, 48px); }

.mb-hero__copy { display: grid; justify-items: start; gap: 20px; }
/* Smaller than the homepage H1: this headline is long and shares the row with
   the mock-up, so it is sized to land on three lines. */
.mb-hero__title { font-size: clamp(1.6rem, 2.9vw, 2.5rem); max-width: none; }
.mb-hero__text { max-width: 52ch; }

/* A kicker line, not a heading — capped at 12px so it reads as a label. */
.mb-hero__claim {
  font-family: var(--display);
  font-size: .75rem;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--red);
  max-width: none;
}
.mb-hero__copy .btn { margin-top: 6px; }

.mb-hero__art { display: grid; place-items: center; min-width: 0; }
/* Overhangs its column on both sides, but the column is centred so it still
   clears the viewport. Height is capped so the hero stays exactly one screen —
   on taller windows the mock-up grows up to the 880px cap. */
.mb-hero__art img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100svh - 200px);
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, .65));
  animation: float-art 8s ease-in-out infinite;
}
@keyframes float-art {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

/* The mock-up may only overhang its column once the container has hit its
   1200px cap and the viewport is wide enough to absorb the overhang. Below
   that it stays inside the column, or it would be clipped at the edge. */
@media (min-width: 1400px) {
  .mb-hero__art { margin-inline: -14%; }
  .mb-hero__art img { max-width: 880px; }
}

/* Stacked layout. Tablets have height to spare, phones do not — so the
   mock-up is capped in two steps rather than one. */
@media (max-width: 880px) {
  .mb-hero { padding-block: clamp(80px, 11vh, 96px) 24px; }
  .mb-hero__art img { max-height: min(46svh, 460px); }
}
@media (max-width: 560px) {
  .mb-hero__art img { max-height: min(36svh, 320px); }
}

/* ---- Stats band ---- */

.stats { background: var(--red); padding-block: clamp(48px, 6vw, 84px); }
/* Wider gutters than the page default — the four figures need air. */
.stats .grid { column-gap: clamp(14px, 5vw, 72px); row-gap: clamp(28px, 4vw, 40px); }
.stat { display: grid; gap: 10px; justify-items: center; text-align: center; }
.stat__n { font-family: var(--display); font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.1; letter-spacing: .07em; color: #fff; }
.stat__l { font-size: var(--fs-body); color: rgba(255, 255, 255, .85); }

/* ---- Traffic sources ---- */

.src { background: var(--black); padding-block: var(--sect); }

/* Big logo tiles instead of a bullet list — the channels are the illustration. */
.chan {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(24px, 2.6vw, 34px) 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(213, 17, 21, .20) 0%, transparent 62%),
    var(--panel);
  transition: border-color .25s, transform .25s;
}
.chan:hover { border-color: rgba(213, 17, 21, .55); transform: translateY(-4px); }

.chan__logo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 76px;
  color: var(--red);
}
/* Logo PNGs ship on a black plate; `lighten` drops it into the dark tile. */
.chan__logo img {
  max-width: 84%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: lighten;
}
.chan__logo svg { width: 42px; height: 42px; }

.chan__l {
  font-family: var(--display);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-3);
}
.chan--more .chan__l { color: var(--fg-2); }

/* Closing sentence rendered as the pipeline it describes: a red rail runs
   through five stages, each with its own node. */
.flow { margin-top: clamp(28px, 4vw, 48px); }

.flow__lead {
  font-family: var(--display);
  font-size: var(--fs-h4);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff;
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.flow__lead span { color: var(--red); }

.flow__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.5vw, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The rail sits behind the nodes, spanning the middle three-fifths gap. */
.flow__track::before {
  content: '';
  position: absolute;
  top: 27px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red) 12%, var(--red) 88%, transparent);
  opacity: .55;
}

.flow__step { display: grid; justify-items: center; gap: 14px; text-align: center; }

.flow__dot {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--black);
  border: 2px solid var(--red);
  color: var(--red-hi);
  position: relative;
  z-index: 1;
  transition: background-color .25s, color .25s, transform .25s;
}
.flow__step:hover .flow__dot { background: var(--red); color: #fff; transform: translateY(-3px); }
.flow__dot svg { width: 24px; height: 24px; }

.flow__t { font-size: var(--fs-body); line-height: 1.45; color: var(--fg-2); max-width: 20ch; }

@media (max-width: 880px) {
  .flow__track { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .flow__track::before { display: none; }
}

/* ---- Built for volume (light) ---- */

/* Tall, narrow tiles so all six sit on one row and the section stays short. */
.vtile {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 250px;
  padding: clamp(16px, 1.6vw, 20px) clamp(12px, 1.2vw, 16px) clamp(18px, 1.8vw, 24px);
  border: 1px solid var(--ink-line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--ink-soft) 0%, #fff 55%);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.vtile:hover {
  border-color: rgba(213, 17, 21, .45);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -26px rgba(16, 16, 20, .5);
}

/* The page's own illustrations. The source SVGs shipped with a viewBox but no
   width/height — no intrinsic size means max-height cannot hold them and they
   stretch to the grid area, printing over the caption below. The files now
   carry their viewBox as explicit dimensions; overflow is a second line of
   defence in case a future asset arrives without them.
   A percentage max-height on a grid item resolves against an indefinite grid
   area here and is dropped, so the cap is stated in pixels through a variable
   the box and the image both read. */
.vtile__art { --art-h: 84px; width: 100%; height: var(--art-h); display: grid; place-items: center; overflow: hidden; }
.vtile__art img { max-width: 100%; max-height: var(--art-h); }

.vtile__n { font-family: var(--display); font-size: var(--fs-sm); letter-spacing: .05em; color: var(--red); }
.vtile__t { font-size: var(--fs-body); line-height: 1.45; color: var(--ink); }

/* ---- Why providers (dark) ---- */

.prov { background: var(--panel); padding-block: var(--sect); }

.fcard {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .02);
  transition: border-color .25s, transform .25s;
}
.fcard:hover { border-color: rgba(213, 17, 21, .55); transform: translateY(-3px); }
.fcard__ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: rgba(213, 17, 21, .16);
  border: 1px solid rgba(213, 17, 21, .34);
  color: var(--red-hi);
}
.fcard__ico svg { width: 22px; height: 22px; }

/* ---- AI infrastructure (black, numbered) ---- */

.ai { background: var(--black); padding-block: var(--sect); }

.acard {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: var(--r);
  background: linear-gradient(150deg, rgba(213, 17, 21, .16) 0%, rgba(255, 255, 255, .02) 46%);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .25s, transform .25s;
}
.acard:hover { border-color: rgba(213, 17, 21, .55); transform: translateY(-3px); }
/* Same tile, stroke weight and colour as every other icon on the page. */
.acard__ico {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 14px;
  background: rgba(213, 17, 21, .16);
  border: 1px solid rgba(213, 17, 21, .34);
  color: var(--red-hi);
  margin-bottom: 4px;
}
.acard__ico svg { width: 24px; height: 24px; }

/* ---- Vacancies ---- */

.vac { background: var(--panel); padding-block: var(--sect); }

.job {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--black);
  margin-bottom: var(--gap);
  overflow: hidden;
}
.job[open] { border-color: rgba(213, 17, 21, .5); }

.job__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 32px);
  cursor: pointer;
  list-style: none;
}
.job__head::-webkit-details-marker { display: none; }
.job__head:hover .job__title { color: var(--red-hi); }
.job__title { transition: color .2s; }

/* Plus that rotates into a minus — pure CSS, no icon file. */
.job__mark { position: relative; width: 20px; height: 20px; flex: none; }
.job__mark::before, .job__mark::after {
  content: '';
  position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: var(--red);
  transition: transform .28s var(--ease, ease);
}
.job__mark::after { transform: rotate(90deg); }
.job[open] .job__mark::after { transform: rotate(0); }

.job__body { padding: 0 clamp(20px, 2.4vw, 32px) clamp(24px, 2.6vw, 34px); display: grid; gap: 14px; }
.job__sub {
  font-family: var(--display);
  font-size: var(--fs-body);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--red);
  margin-top: 8px;
}
.job__list { display: grid; gap: 9px; margin: 0; padding-left: 20px; }
.job__list li { font-size: var(--fs-body); color: var(--fg-2); line-height: 1.6; }
.job__list li::marker { color: var(--red); }
.job__list b { color: #fff; font-weight: 700; }
.job__apply { font-size: var(--fs-body); color: var(--fg-2); margin-top: 8px; }
.job__apply a { color: var(--red-hi); font-weight: 700; }

/* =========================================================
   Search Provider page — same tokens, grid and type steps.
   ========================================================= */

/* Hero: centred copy with three product tiles underneath. */
.sp-hero {
  position: relative;
  isolation: isolate;
  background: var(--black);
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: clamp(96px, 12vh, 128px) clamp(32px, 5vh, 56px);
  overflow: hidden;
}
.sp-hero__in { display: grid; justify-items: center; text-align: center; gap: 22px; }
.sp-hero__title { max-width: none; }
.sp-hero__text { max-width: 72ch; }
.sp-hero .btn { margin-top: 4px; }

/* The source artwork is 2240x1200 and 1040x1200, so at 6/3/3 columns the three
   tiles come out the same height on their own — no cropping needed. */
.sp-tiles { width: 100%; margin-top: clamp(24px, 4vh, 48px); align-items: start; }
.sp-tile img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
  border: 1px solid var(--line);
}

@media (max-width: 880px) {
  /* Wide tile keeps the full row, the two squares pair up — one per row makes
     each tile ~700px tall on a phone. */
  .sp-tile.col-6 { grid-column: span 12; }
  .sp-tile.col-3 { grid-column: span 6; }
  .sp-tile img { height: auto; }
}

@media (max-width: 700px) {
  .sp-hero { padding-block: clamp(84px, 11vh, 100px) 24px; }
  .sp-hero__in { gap: 16px; }
  .sp-tiles { margin-top: 20px; }
  .sp-hero__title { font-size: clamp(1.45rem, 6.6vw, 2.1rem); }
  .sp-hero__text { font-size: var(--fs-body); line-height: 1.55; }
}

/* Intro: copy beside the team photo. */
.sp-intro { align-items: center; }
.sp-intro__copy { display: grid; gap: 18px; align-content: start; }
.sp-intro__copy .desc { max-width: 56ch; }
.sp-intro__photo img {
  width: 100%;
  border-radius: var(--r);
  border: 1px solid var(--line);
  filter: grayscale(1) contrast(1.05);
}

/* Requirement cards sit on the red field, so they need their own surface. */
.req {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: clamp(20px, 2vw, 28px);
  border-radius: var(--r);
  background: rgba(0, 0, 0, .24);
  color: #fff;
  transition: background-color .25s, transform .25s;
}
.req:hover { background: rgba(0, 0, 0, .38); transform: translateY(-3px); }
.req .fcard__ico { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
.req .desc { color: rgba(255, 255, 255, .82); }

/* Vertical tiles here carry a heading as well as a line of copy. */
.vtile__ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: rgba(213, 17, 21, .1);
  border: 1px solid rgba(213, 17, 21, .28);
  color: var(--red);
}
.vtile__ico svg { width: 22px; height: 22px; }
/* Three per row instead of six — these tiles carry a heading and a full
   sentence, so they need real width. */
.vtile--lg { min-height: 0; padding: clamp(22px, 2.2vw, 30px); gap: 14px; }
.vtile__h { color: var(--ink); }
.vtile__t { font-size: var(--fs-body); line-height: 1.5; color: var(--ink-2); }

/* Four-stage RSOC flow — same rail as the media-buying page, plus a heading. */
.sp-flow { grid-template-columns: repeat(4, 1fr); }
.flow__h {
  font-family: var(--display);
  font-size: var(--fs-h4);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff;
}
.sp-flow .flow__t { color: var(--fg-3); }

/* Six benefits, 3x2, each led by a solid red icon tile. */
.compound { background: var(--black); padding-block: var(--sect); }

/* Own explicit grid rather than the 12-column one: a span-6 item whose text
   holds a long word skews the shared tracks, and this block is a simple 3x2. */
.clist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 60px) clamp(16px, 3vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.clist__item { display: grid; justify-items: center; gap: 20px; text-align: center; }

.clist__ico {
  display: grid; place-items: center;
  width: 72px; height: 72px;
  border-radius: 16px;
  background: var(--red);
  color: #fff;
  transition: background-color .25s, transform .25s;
}
.clist__item:hover .clist__ico { background: var(--red-hi); transform: translateY(-4px); }
.clist__ico svg { width: 34px; height: 34px; }

.clist__t { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-2); width: 100%; max-width: 26ch; margin-inline: auto; }

@media (max-width: 880px) {
  .clist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clist__ico { width: 60px; height: 60px; }
  .clist__ico svg { width: 28px; height: 28px; }
}
@media (max-width: 340px) {
  .clist { grid-template-columns: 1fr; }
}

/* Long label — let it wrap rather than push the page wider than the screen. */
.clist__cta { display: flex; width: max-content; max-width: 100%; white-space: normal; text-align: center; margin: clamp(36px, 5vw, 56px) auto 0; }

/* Feed types: red plate with the device shot, then title, copy and CTA. */
.feeds { background: var(--black); padding-block: var(--sect); }

.feed { display: grid; grid-template-rows: auto auto 1fr auto; gap: 16px; align-content: start; }

.feed__art { border-radius: var(--r); overflow: hidden; background: var(--red); transition: transform .3s; }
.feed__art img { width: 100%; height: auto; display: block; }
.feed:hover .feed__art { transform: translateY(-4px); }

/* Mixed weight, not the display face — matches the source layout. */
.feed__title { font-size: var(--fs-h4); line-height: 1.3; font-weight: 700; color: #fff; }
.feed__text { font-size: var(--fs-body); line-height: 1.6; color: var(--fg-2); }
.feed__btn { justify-self: start; }

@media (max-width: 880px) {
  .sp-flow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 340px) {
  .sp-flow { grid-template-columns: 1fr; }
}
/* Two vertical tiles per row get too narrow for their headings below this. */
@media (max-width: 480px) {
  .col-2 { grid-column: span 12; }
  .vtile { min-height: 0; }
}

/* ---------------------- Numbers panel (home) -------------------- */
/* Sits in the same red panel as the old CTA — gradient, drifting bands and
   helmet all stay, only the contents change. */

.figs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px) clamp(14px, 2vw, 28px);
  width: 100%;
}

.fig { display: grid; justify-items: center; text-align: center; gap: 12px; align-content: start; }

.fig__ico {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 15px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  transition: background-color .25s, transform .25s;
}
.fig:hover .fig__ico { background: rgba(0, 0, 0, .48); transform: translateY(-3px); }
.fig__ico svg { width: 26px; height: 26px; }

.fig__n {
  font-family: var(--display);
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: .04em;
  color: #fff;
  font-variant-numeric: tabular-nums;   /* digits keep width while counting */
}
.fig__n--inf { font-family: var(--body); font-weight: 800; font-size: clamp(2.9rem, 5.2vw, 4.2rem); line-height: 1; }
.fig__u { font-size: .6em; margin-left: .06em; }

.fig__l { font-size: var(--fs-body); line-height: 1.45; color: rgba(255, 255, 255, .88); max-width: 22ch; }

@media (max-width: 1080px) {
  .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig__ico { width: 46px; height: 46px; }
  .fig__ico svg { width: 22px; height: 22px; }
}
@media (max-width: 340px) {
  .figs { grid-template-columns: 1fr; }
}

/* =========================================================
   CTV Advertising page — same tokens, grid and type steps.
   ========================================================= */

.ctv-hero {
  position: relative;
  isolation: isolate;
  background: var(--black);
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: clamp(92px, 11vh, 116px) clamp(28px, 4vh, 48px);
  overflow: hidden;
}
.ctv-hero__in { display: grid; justify-items: center; text-align: center; gap: 20px; }
.ctv-hero__title { max-width: 36ch; font-size: clamp(1.5rem, 3vw, 2.6rem); }
.ctv-hero__text { max-width: 76ch; }
/* The banner sits in a shallow 3D frame. The frame is filled with the banner's
   own background colour (sampled: #D51115 = --red), so when the artwork is
   shorter than the frame the sides extend seamlessly instead of the image
   being cropped or blown up. */
.ctv-hero__art {
  width: 100%;
  margin-top: clamp(24px, 4vh, 48px);
  perspective: 1400px;
  display: grid;
  justify-items: center;
}
/* A block, not a grid: an auto grid row grows to the image's natural height
   and the frame's own height stops constraining it. */
/* Frame matches the banner's own 1680:771 ratio, so the artwork fills it
   exactly — no crop, no upscaling, no empty red margins. Height drives the
   width until the container runs out, then width takes over. */
.ctv-hero__frame {
  display: block;
  width: min(100%, calc(min(34svh, 400px) * 2.179));
  aspect-ratio: 1680 / 771;
  overflow: hidden;
  background: var(--red);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  transform: rotateX(6deg);
  transform-origin: 50% 100%;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .18) inset,
    0 -2px 0 rgba(0, 0, 0, .35) inset,
    0 34px 60px -26px rgba(0, 0, 0, .95),
    0 60px 90px -50px rgba(213, 17, 21, .55);
  transition: transform .45s var(--ease, ease);
}
.ctv-hero__frame:hover { transform: rotateX(0deg) translateY(-4px); }

/* Stretched to the frame so object-fit has an area to letterbox into — with
   `width:auto` the element is sized by its own content and object-fit does
   nothing, which is what cropped the banner before. */
.ctv-hero__frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Standfirst under a section title. */
.ctv-kicker {
  font-family: var(--display);
  font-size: var(--fs-h4);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--red);
}

/* Two paragraphs of very different length read badly as equal columns, so the
   short one becomes the statement and the long one its explanation. */
.ctv-intro { align-items: stretch; }

/* Both halves share the same box and the same 6/6 split as the cards below,
   so every vertical edge in the section lines up. */
.ctv-intro__lead,
.ctv-intro__body {
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.ctv-intro__lead {
  border-left: 3px solid var(--red);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  color: #fff;
}
.ctv-intro__body {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--fg-2);
}
.ctv-two { margin-top: var(--gap); }
.ctv-center { display: flex; width: max-content; max-width: 100%; margin: clamp(28px, 4vw, 44px) auto 0; white-space: normal; text-align: center; }

/* ---- Trust cards ---- */

.trust {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid var(--ink-line);
  border-radius: var(--r);
  background: var(--white);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.trust:hover { border-color: #CBCFD6; transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(16,16,20,.45); }
/* Same tile as every other icon on the site — the supplied SVGs came on
   black plates that read as broken squares on a white card. */
.trust__ico {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 15px;
  background: rgba(213, 17, 21, .1);
  border: 1px solid rgba(213, 17, 21, .28);
  color: var(--red);
}
.trust__ico svg { width: 25px; height: 25px; }
.trust h3 { color: var(--ink); }

.trust__list { display: grid; gap: 10px; margin: 0; padding-left: 18px; }
.trust__list li { font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); }
.trust__list li::marker { color: var(--red); }
.trust__list b { color: var(--ink); font-weight: 700; }

/* ---- How we work ---- */

.wstep {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  transition: border-color .25s, transform .25s;
}
.wstep:hover { border-color: rgba(213, 17, 21, .55); transform: translateY(-3px); }
.wstep__art { border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.03); }
.wstep__art img { width: 100%; height: auto; display: block; }
.wstep__n { font-family: var(--display); font-size: var(--fs-sm); letter-spacing: .06em; color: var(--red); }

/* ---- Comparison table ---- */

.cmp { background: var(--black); padding-block: var(--sect); }

.cmp__head, .cmp__row {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 1.3fr;
  gap: clamp(12px, 2vw, 28px);
  align-items: start;
  padding: 18px clamp(16px, 2vw, 26px);
}
.cmp__head {
  font-family: var(--display);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--fg-3);
  border-bottom: 1px solid var(--line);
}
.cmp__head .cmp__us { color: var(--red); }

.cmp__row { border-bottom: 1px solid var(--line); transition: background-color .25s; }
.cmp__row:hover { background: rgba(255, 255, 255, .03); }
.cmp__row:last-child { border-bottom: 0; }

.cmp__c { font-size: var(--fs-body); line-height: 1.55; color: var(--fg-3); }
.cmp__c--k { font-weight: 700; color: #fff; }
.cmp__c--us { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--fg-2); }
.cmp__c--us svg { width: 18px; height: 18px; color: var(--red); margin-top: 3px; }

@media (max-width: 780px) {
  /* Column headers disappear, so each cell carries its own label. */
  .cmp__head { display: none; }
  .cmp__row {
    grid-template-columns: 1fr;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    margin-bottom: var(--gap);
    background: var(--panel);
  }
  .cmp__c::before {
    content: attr(data-l);
    display: block;
    font-family: var(--display);
    font-size: var(--fs-sm);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 4px;
  }
  .cmp__c--us { grid-template-columns: 1fr; }
  .cmp__c--us svg { display: none; }
  .cmp__c--us::before { color: var(--red); }
}

/* =========================================================
   Mobile Install Offers page — same tokens, grid and type
   steps; only the page-specific components live here.
   ========================================================= */

/* One viewport tall: copy and mock-up share the first row, the verticals
   strip closes the screen. */
.mio-hero {
  position: relative;
  isolation: isolate;
  background: var(--black);
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: clamp(84px, 10vh, 104px) clamp(20px, 3vh, 32px);
  overflow: hidden;
}
.mio-hero__in { align-items: center; row-gap: clamp(24px, 4vh, 40px); }

.mio-hero__copy { display: grid; justify-items: start; gap: 18px; align-content: center; }
/* Long headline sharing the row with the mock-up — sized to land on three
   lines at desktop widths instead of the full homepage H1 step. */
.mio-hero__title { font-size: clamp(1.7rem, 3.2vw, 2.8rem); }
.mio-hero__text { max-width: 46ch; }
.mio-hero__copy .btn { margin-top: 6px; }

.mio-hero__art { display: grid; place-items: center; min-width: 0; }
/* Height is capped against the viewport so the hero stays exactly one screen
   with the verticals strip still visible below it. */
.mio-hero__art img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(58svh, 560px);
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, .7));
  animation: float-art 8s ease-in-out infinite;
}

/* ---- Verticals strip ---- */

.mio-verts {
  display: grid;
  gap: clamp(14px, 2vh, 20px);
  padding-top: clamp(18px, 2.6vh, 28px);
  border-top: 1px solid var(--line);
}
.mio-verts__t {
  font-family: var(--display);
  font-size: var(--fs-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.mio-verts__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(10px, 1.4vw, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  transition: border-color .25s, background-color .25s, transform .25s;
}
.vert:hover { border-color: rgba(213, 17, 21, .55); background: rgba(213, 17, 21, .08); transform: translateY(-2px); }
.vert img { width: 34px; height: 34px; flex: none; object-fit: contain; }
.vert span {
  font-family: var(--display);
  font-size: var(--fs-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- Who we are ---- */

.mio-who { background: var(--panel); padding-block: var(--sect); }
.mio-who__in { align-items: center; row-gap: clamp(28px, 4vw, 44px); }
/* The artwork ships on its own red plate, so the frame only rounds it. */
.mio-who__art img {
  width: 100%;
  border-radius: var(--r);
  border: 1px solid var(--line);
}
.mio-who__copy { display: grid; justify-items: start; gap: 18px; align-content: center; }
.mio-who__copy .desc { max-width: 58ch; }
.mio-who__copy .btn { margin-top: 6px; }

/* ---- Key advantages ---- */

.mio-adv { background: var(--black); padding-block: var(--sect); }
.aitem {
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
  gap: 18px;
  padding: clamp(26px, 2.8vw, 36px) clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  transition: border-color .25s, transform .25s;
}
.aitem:hover { border-color: rgba(213, 17, 21, .55); transform: translateY(-3px); }
.aitem img { width: 76px; height: 76px; transition: transform .25s; }
.aitem:hover img { transform: scale(1.06); }
.aitem .h4 { max-width: 26ch; }

/* ---- Publishers / Advertisers tabs ---- */

.sides { background: var(--panel); padding-block: var(--sect); }

/* The switcher only appears once the script has taken over; without JS both
   panels simply stack and nothing is hidden from the page. */
.tabs { display: none; }
.js-tabs .tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.tab {
  padding: 13px clamp(20px, 2.6vw, 34px);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--display);
  font-size: var(--fs-body);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg-2);
  transition: color .25s, background-color .25s, border-color .25s;
}
.tab:hover { color: #fff; border-color: rgba(255, 255, 255, .34); }
.tab[aria-selected="true"] { background: var(--red); border-color: var(--red); color: #fff; }

/* A hidden pane is still a sibling, so the gap is only claimed when both
   panels are actually on screen. */
.pane:not([hidden]) + .pane:not([hidden]) { margin-top: var(--sect); }

.pane__in { align-items: start; row-gap: clamp(24px, 3vw, 36px); }
.pane__head { display: grid; justify-items: start; gap: 18px; align-content: start; }
.pane__head .lead { max-width: 44ch; }
.pane__head .btn { margin-top: 6px; }

.pane__list { display: grid; gap: var(--gap); }
.fitem {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--black);
  transition: border-color .25s, transform .25s;
}
.fitem:hover { border-color: rgba(213, 17, 21, .55); transform: translateY(-3px); }
.fitem img { width: 60px; height: 60px; flex: none; }
.fitem__t { font-size: var(--fs-lead); font-weight: 700; line-height: 1.35; margin-bottom: 8px; }

/* ---- Numbers band ---- */

/* The four figures each carry a sentence, so the band uses tighter gutters
   than the media-buying stats and left-aligns the copy. */
.mio-stats .grid { column-gap: var(--gap); row-gap: clamp(28px, 4vw, 40px); }
.mio-stats .stat { justify-items: start; text-align: left; gap: 8px; }
.stat__d { font-size: var(--fs-body); line-height: 1.6; color: rgba(255, 255, 255, .82); margin-top: 4px; }
.mio-stats .stat__l {
  font-family: var(--display);
  font-size: var(--fs-h4);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}

/* ---- Get started ---- */

.mio-steps { background: var(--black); padding-block: var(--sect); }
.mstep {
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
  gap: 14px;
  padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  transition: border-color .25s, transform .25s;
}
.mstep:hover { border-color: rgba(213, 17, 21, .55); transform: translateY(-3px); }
.mstep__art img { width: 112px; height: auto; }
.mstep__n { font-family: var(--display); font-size: var(--fs-sm); letter-spacing: .07em; color: var(--red); }
.mstep .h4 { max-width: 18ch; }

/* ---- Responsive ---- */

@media (max-width: 1080px) {
  /* Six advantage cards stay a clean 2-up rather than inheriting the
     "last child spans the row" rule from the generic .col-4. */
  .grid > .aitem.col-4 { grid-column: span 6; }
  .mio-stats .stat.col-3 { grid-column: span 6; }
}

@media (max-width: 880px) {
  .mio-hero { padding-block: clamp(84px, 11vh, 100px) 24px; }
  .mio-hero__in { row-gap: clamp(18px, 3vh, 28px); }
  .mio-hero__copy { justify-items: center; text-align: center; }
  .mio-hero__text { max-width: 52ch; }
  .mio-hero__art { grid-row: 1; }          /* mock-up leads on stacked layouts */
  .mio-hero__art img { max-height: min(34svh, 340px); }
  .mio-verts__row { justify-content: center; }
  .mio-verts { text-align: center; }
  .mio-who__copy { justify-items: start; }
}

@media (max-width: 700px) {
  .mio-hero__title { font-size: clamp(1.55rem, 6.6vw, 2.1rem); }
  .mio-hero__art img { max-height: min(26svh, 240px); }
  /* Three wrapped rows of chips cost ~150px of a phone screen, so the strip
     becomes one swipeable row that bleeds to both edges of the viewport. */
  .mio-verts__row {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .mio-verts__row::-webkit-scrollbar { display: none; }
  .vert { padding: 7px 14px 7px 8px; scroll-snap-align: start; }
  .vert img { width: 28px; height: 28px; }
  .vert span { font-size: var(--fs-sm); }
  .tabs { gap: 8px; }
  .tab { padding: 11px 16px; font-size: var(--fs-sm); }
  .fitem { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
  .fitem img { width: 48px; height: 48px; }
  .aitem img { width: 62px; height: 62px; }
}

@media (max-width: 560px) {
  .grid > .aitem.col-4 { grid-column: span 12; }
  .mio-stats .stat.col-3 { grid-column: span 12; }
  .mio-hero__art img { max-height: min(22svh, 190px); }
  .mio-hero { padding-block: 78px 18px; }
  .mio-hero__in { row-gap: 16px; }
  .mio-verts { padding-top: 14px; gap: 12px; }
}

/* The smallest phones still in use (320×568) cannot hold the hero at the
   sizes above, so the intro drops to body size and the mock-up shrinks. */
@media (max-width: 380px) {
  .mio-hero__text { font-size: var(--fs-body); line-height: 1.5; }
  .mio-hero__art img { max-height: min(19svh, 155px); }
  .mio-hero__copy { gap: 14px; }
}

/* =========================================================
   Search Feed Monetization page — same tokens, grid and type
   steps; only the page-specific components live here.
   ========================================================= */

.sfm-hero {
  position: relative;
  isolation: isolate;
  background: var(--black);
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: clamp(84px, 10vh, 104px) clamp(20px, 3vh, 32px);
  overflow: hidden;
}
.sfm-hero__in { align-items: center; row-gap: clamp(24px, 4vh, 40px); }

.sfm-hero__copy { display: grid; justify-items: start; gap: 20px; align-content: center; }
.sfm-hero__title { font-size: clamp(1.8rem, 3.4vw, 3rem); }
.sfm-hero__text { max-width: 44ch; }
.sfm-hero__copy .btn { margin-top: 2px; }

.sfm-hero__art { display: grid; place-items: center; min-width: 0; }
/* The artwork is portrait, so it eats height fast — capped against the
   viewport to keep the hero exactly one screen. */
.sfm-hero__art img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(72svh, 640px);
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, .7));
  animation: float-art 8s ease-in-out infinite;
}

/* ---- Feed sources strip ---- */

.srcs { display: grid; gap: 14px; }
.srcs__t {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}
.srcs__t svg { width: 14px; height: 14px; flex: none; }
.srcs__row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px clamp(10px, 1.4vw, 16px);
  margin: 0; padding: 0; list-style: none;
}
.srcs__row li {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  transition: border-color .25s, background-color .25s, transform .25s;
}
.srcs__row li:hover { border-color: rgba(213, 17, 21, .55); background: rgba(213, 17, 21, .08); transform: translateY(-2px); }
.srcs__row img { width: 34px; height: 34px; object-fit: contain; }

/* ---- Marquee band ---- */

.mq { background: var(--red); overflow: hidden; padding-block: clamp(14px, 1.6vw, 20px); }
.mq__track { display: flex; width: max-content; animation: mq-run 30s linear infinite; }
.mq--rev .mq__track { animation-direction: reverse; }
/* Two identical halves; shifting by exactly half the track loops seamlessly. */
.mq__set {
  display: flex; align-items: center;
  font-family: var(--display);
  font-size: var(--fs-h4);
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}
.mq__set i {
  display: inline-block; flex: none;
  width: 7px; height: 7px;
  margin-inline: clamp(18px, 2.4vw, 32px);
  border-radius: 50%;
  background: #fff;
}
@keyframes mq-run { to { transform: translateX(-50%); } }

/* ---- Benefit cards ---- */

.bens { background: var(--panel); padding-block: var(--sect); }

/* Two masonry columns, so every card keeps its own natural height and the
   two sides stagger instead of being stretched to a shared row height. */
.bwall { columns: 2; column-gap: var(--gap); }

.bcard {
  break-inside: avoid;
  margin-bottom: var(--gap);
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* art to one edge, copy to the other */
  border-radius: 30px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.bcard--red   { background: var(--red); color: #fff; }
.bcard--light { background: var(--white); color: var(--ink); }
.bcard:hover { transform: translateY(-3px); }
.bcard--red:hover   { box-shadow: 0 24px 50px -28px rgba(213, 17, 21, .9); }
.bcard--light:hover { box-shadow: 0 24px 50px -30px rgba(16, 16, 20, .7); }

/* The artwork runs the full width of the card, at its own aspect ratio —
   each illustration was composed for a card exactly this wide. */
.bcard__art { display: block; }
.bcard__art img { display: block; width: 100%; height: auto; }

.bcard__body { display: grid; align-content: start; gap: 12px; padding: clamp(24px, 2.6vw, 32px); }
.bcard__body .desc { max-width: 44ch; }
.bcard--red   .h4 { color: #fff; }
.bcard--light .h4 { color: var(--red); }
.bcard--red   .desc { color: rgba(255, 255, 255, .92); }
.bcard--light .desc { color: var(--ink-2); }

/* ---- Responsive ---- */

@media (max-width: 880px) {
  /* One column: the DOM order alternates red / white all the way down. */
  .bwall { columns: 1; }
  .sfm-hero { padding-block: clamp(84px, 11vh, 100px) 24px; }
  .sfm-hero__in { row-gap: clamp(18px, 3vh, 28px); }
  .sfm-hero__copy { justify-items: center; text-align: center; }
  .sfm-hero__text { max-width: 52ch; }
  .sfm-hero__art { grid-row: 1; }
  .sfm-hero__art img { max-height: min(38svh, 380px); }
  .srcs { justify-items: center; }
  .srcs__t { justify-content: center; }
  .srcs__row { justify-content: center; }
}

@media (max-width: 700px) {
  .sfm-hero__title { font-size: clamp(1.6rem, 6.8vw, 2.2rem); }
  .sfm-hero__art img { max-height: min(30svh, 280px); }
  .srcs__row li { width: 48px; height: 48px; border-radius: 12px; }
  .srcs__row img { width: 28px; height: 28px; }
  .mq__set { font-size: var(--fs-body); }
}

@media (max-width: 560px) {
  .grid > .bcard.col-4 { grid-column: span 12; }
  .sfm-hero { padding-block: 78px 18px; }
  .sfm-hero__copy { gap: 16px; }
  .sfm-hero__art img { max-height: min(24svh, 210px); }
}

@media (max-width: 380px) {
  .sfm-hero__text { font-size: var(--fs-body); line-height: 1.5; }
  .sfm-hero__art img { max-height: min(21svh, 175px); }
}

/* =========================================================
   Feed detail pages — N2S, RSOC, AFD and Type-in share one
   set of components; only the copy and the artwork differ.
   ========================================================= */

/* ---- Hero ---- */

.fd-hero {
  position: relative;
  isolation: isolate;
  background: var(--black);
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: clamp(84px, 10vh, 104px) clamp(20px, 3vh, 32px);
  overflow: hidden;
}
.fd-hero__in { align-items: center; row-gap: clamp(24px, 4vh, 40px); }
.fd-hero__copy { display: grid; justify-items: start; gap: 18px; align-content: center; }

/* The provider line is the page's <h1> on the live site — it stays an h1
   here and is only styled down to a label. */
.fd-hero__eyebrow {
  font-family: var(--display);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}
.fd-hero__title { font-size: clamp(1.8rem, 3.4vw, 3rem); }
.fd-hero__text { max-width: 50ch; }
.fd-hero__copy .btn { margin-top: 2px; }

.fd-hero__art { display: grid; place-items: center; min-width: 0; }
/* Square artwork on a red plate — capped against the viewport so the hero
   stays exactly one screen tall on every phone. */
.fd-hero__art img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(66svh, 540px);
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, .7));
  animation: float-art 8s ease-in-out infinite;
}

/* ---- Why Iron Click ---- */

.fd-why { background: var(--black); padding-block: var(--sect); }

/* Not .wcard — the homepage already owns that name for its light "Why
   partners choose us" tiles, and these are dark. */
.fdcard {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  transition: border-color .25s, transform .25s;
}
.fdcard:hover { border-color: rgba(213, 17, 21, .55); transform: translateY(-3px); }
.fdcard img { width: 52px; height: 52px; }
.fdcard p { font-size: var(--fs-body); line-height: 1.6; color: #fff; font-weight: 600; }

/* ---- How the feed works ---- */

.fd-how { background: var(--panel); padding-block: var(--sect); }
.fd-how__in { align-items: center; row-gap: clamp(28px, 4vw, 44px); }
.fd-how__copy { display: grid; gap: 20px; align-content: start; }
.fd-how__sub {
  font-family: var(--display);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}
.fd-how__body { display: grid; gap: 10px; }
.fd-how__art { display: grid; place-items: center; }
.fd-how__art img { width: 100%; max-width: 520px; height: auto; }

/* Plain check bullets (RSOC, Type-in). */
.fd-checks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fd-checks li {
  display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start;
  font-size: var(--fs-body); line-height: 1.6; color: var(--fg-2);
}
.fd-checks svg { width: 16px; height: 16px; color: var(--red); margin-top: 4px; }

/* Titled features (AFD, N2S). */
.fd-feats { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.fd-feats li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; }
.fd-feats svg { width: 16px; height: 16px; color: var(--red); margin-top: 4px; }
.fd-feats b {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-h4);
  font-weight: 400;
  letter-spacing: .045em;
  text-transform: uppercase;
  line-height: 1.12;
  margin-bottom: 6px;
}
.fd-feats span { font-size: var(--fs-body); line-height: 1.6; color: var(--fg-2); }

/* ---- Feature comparison ---- */

.vtab-sect { background: var(--black); padding-block: var(--sect); }

.vtab { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.vtab__row {
  display: grid;
  grid-template-columns: 1.7fr .9fr .9fr;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.vtab__row:last-child { border-bottom: 0; }
.vtab__row:not(.vtab__row--h):hover { background: rgba(255, 255, 255, .03); }

.vtab__f, .vtab__v { padding: 16px clamp(14px, 1.8vw, 24px); }
.vtab__f { font-size: var(--fs-body); line-height: 1.55; color: #fff; align-self: center; }
.vtab__v { display: grid; place-items: center; }
/* Our column is tinted so the eye finds it without reading the header. */
.vtab__v--us { background: rgba(213, 17, 21, .08); }

.vtab__row--h { background: rgba(255, 255, 255, .04); }
.vtab__row--h .vtab__f, .vtab__row--h .vtab__v {
  font-family: var(--display);
  font-size: var(--fs-sm);
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--fg-3);
  text-align: center;
}
.vtab__row--h .vtab__f { text-align: left; }
.vtab__row--h .vtab__v--us { color: #fff; }

/* Yes / no marks, drawn in CSS — 20 of them per table, so no icon files. */
.mk { position: relative; width: 24px; height: 24px; border-radius: 50%; flex: none; }
.mk--y { background: #25B309; }
.mk--n { background: #F24613; }
.mk::before, .mk::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  background: #fff;
}
.mk--y::before {
  width: 10px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  background: none;
  transform: translate(-50%, -70%) rotate(-45deg);
}
.mk--y::after { display: none; }
.mk--n::before, .mk--n::after { width: 13px; height: 2px; border-radius: 1px; }
.mk--n::before { transform: translate(-50%, -50%) rotate(45deg); }
.mk--n::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---- Other feeds ---- */

.fd-nav { background: var(--panel); padding-block: var(--sect); }
/* It sits on the same plate as the partner wall above it, so the two section
   paddings would otherwise stack into one huge empty band. */
.partners + .fd-nav { padding-top: clamp(28px, 3.5vw, 48px); }

.fcell {
  display: grid;
  gap: 18px;
  align-content: space-between;
  min-height: 172px;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--black);
  transition: border-color .25s, transform .25s, background-color .25s;
}
.fcell:hover { border-color: rgba(213, 17, 21, .55); transform: translateY(-3px); }
.fcell[aria-current="page"] { border-color: var(--red); background: rgba(213, 17, 21, .09); }
.fcell__more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-body); font-weight: 700; color: var(--red-hi);
}
.fcell__more svg { width: 15px; height: 15px; transition: transform .25s; }
.fcell:hover .fcell__more svg { transform: translateX(3px); }

/* ---- FAQ ---- */

.faq { background: var(--black); padding-block: var(--sect); }
.faq__list { display: grid; gap: 12px; max-width: 900px; margin-inline: auto; }

.qa { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.qa[open] { border-color: rgba(213, 17, 21, .5); }
.qa__q {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2.2vw, 28px);
  font-size: var(--fs-lead); font-weight: 700; line-height: 1.45;
  cursor: pointer; list-style: none;
  transition: color .2s;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { color: var(--red-hi); }

.qa__m { position: relative; width: 18px; height: 18px; flex: none; }
.qa__m::before, .qa__m::after {
  content: '';
  position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: var(--red);
  transition: transform .28s ease;
}
.qa__m::after { transform: rotate(90deg); }
.qa[open] .qa__m::after { transform: rotate(0); }

.qa__a {
  padding: 0 clamp(18px, 2.2vw, 28px) clamp(20px, 2.2vw, 26px);
  font-size: var(--fs-body); line-height: 1.7; color: var(--fg-2);
}

/* ---- Responsive ---- */

@media (max-width: 880px) {
  .fd-hero { padding-block: clamp(84px, 11vh, 100px) 24px; }
  .fd-hero__in { row-gap: clamp(18px, 3vh, 28px); }
  .fd-hero__copy { justify-items: center; text-align: center; }
  .fd-hero__text { max-width: 56ch; }
  .fd-hero__art { grid-row: 1; }
  .fd-hero__art img { max-height: min(36svh, 340px); }
  .fd-how__art { grid-row: 1; }
  .fd-how__art img { max-width: 420px; }
}

@media (max-width: 700px) {
  .fd-hero__title { font-size: clamp(1.6rem, 6.8vw, 2.2rem); }
  .fd-hero__art img { max-height: min(29svh, 260px); }

  /* Column headers go away, so every mark carries its own label. */
  .vtab__row--h { display: none; }
  .vtab__row { grid-template-columns: 1fr 1fr; }
  .vtab__f { grid-column: 1 / -1; font-weight: 700; padding-bottom: 4px; }
  .vtab__v { align-content: start; justify-items: center; gap: 8px; padding-top: 10px; }
  .vtab__v::before {
    content: attr(data-l);
    font-family: var(--display);
    font-size: .6875rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.25;
    text-align: center;
    color: var(--fg-3);
  }
  .vtab__v--us::before { color: var(--red); }
  .fcell { min-height: 0; }
}

@media (max-width: 560px) {
  .fd-hero { padding-block: 78px 18px; }
  .fd-hero__copy { gap: 14px; }
  .fd-hero__art img { max-height: min(23svh, 200px); }
  .qa__q { font-size: var(--fs-body); }
}

/* 320x568 is the shortest screen we still fit a whole hero into. Five lines
   of headline plus five of lead leave almost nothing for the artwork, so
   everything tightens one more step here. */
@media (max-width: 380px) {
  .fd-hero { padding-block: 72px 14px; }
  .fd-hero__in { row-gap: 12px; }
  .fd-hero__copy { gap: 11px; }
  .fd-hero__eyebrow { font-size: .6875rem; letter-spacing: .08em; }
  .fd-hero__title { font-size: clamp(1.35rem, 6.4vw, 1.9rem); }
  .fd-hero__text { font-size: var(--fs-body); line-height: 1.45; }
  .fd-hero__art img { max-height: min(17svh, 140px); }
}

/* =========================================================
   Blog, articles and legal pages. The prose styles carry the
   whole article body, so every element an article can contain
   is covered here rather than per page.
   ========================================================= */

/* ---- Page header (blog index, legal, article) ---- */

.phead {
  background: var(--black);
  padding-block: clamp(96px, 11vh, 148px) clamp(28px, 4vw, 48px);
}
.phead__in { display: grid; gap: 16px; justify-items: center; text-align: center; }
.phead--left .phead__in { justify-items: start; text-align: left; }
.phead__title { max-width: 24ch; }
.phead--left .phead__title { max-width: 30ch; }
.phead .lead { max-width: 68ch; }

/* Breadcrumb — mirrors the BreadcrumbList markup on the source pages. */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: var(--fs-sm); color: var(--fg-3);
}
.crumbs a { color: var(--fg-2); }
.crumbs a:hover { color: var(--red-hi); }
.crumbs span[aria-hidden] { color: var(--fg-3); }

/* ---- Blog listing ---- */

.blog { background: var(--panel); padding-block: var(--sect); }

.bgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.post {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--black);
  overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.post:hover { border-color: rgba(213, 17, 21, .55); transform: translateY(-4px); box-shadow: 0 24px 50px -32px rgba(213, 17, 21, .8); }
.post__art { aspect-ratio: 700 / 466; overflow: hidden; background: var(--red); }
.post__art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.post:hover .post__art img { transform: scale(1.04); }
.post__body { display: grid; gap: 12px; align-content: start; padding: 0 clamp(18px, 2vw, 24px); }
.post__title { color: #fff; }
.post__more {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 26px);
  font-size: var(--fs-body); font-weight: 700; color: var(--red-hi);
}
.post__more svg { width: 15px; height: 15px; transition: transform .25s; }
.post:hover .post__more svg { transform: translateX(3px); }

/* ---- Article body ---- */

.article { background: var(--black); padding-block: clamp(32px, 4vw, 56px) var(--sect); }
.prose { max-width: 76ch; margin-inline: auto; }

.prose > * + * { margin-top: 1.1em; }
.prose p, .prose li { font-size: 1rem; line-height: 1.75; color: var(--fg-2); }
.prose strong { color: #fff; font-weight: 700; }
.prose a { color: var(--red-hi); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: #fff; background: rgba(213, 17, 21, .28); }

.prose h2, .prose h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.14;
}
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-top: 2em; }
.prose h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); margin-top: 1.7em; color: var(--red-hi); }
.prose h2 + p, .prose h3 + p, .prose h2 + ul, .prose h3 + ul { margin-top: .7em; }

.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 10px; }
.prose li::marker { color: var(--red); }
.prose li > ul, .prose li > ol { margin-top: 10px; }

.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.4em; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

/* The lede is the answer-first paragraph the pillar articles open with. */
.prose .ic-lede {
  font-size: clamp(1.02rem, 1.4vw, 1.12rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
  padding-left: clamp(14px, 1.6vw, 20px);
  border-left: 3px solid var(--red);
}

.prose .ic-callout,
.prose .ic-scorecard,
.prose .ic-about,
.prose .ic-sources {
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.prose .ic-callout { border-color: rgba(213, 17, 21, .42); background: rgba(213, 17, 21, .07); }
.prose .ic-callout-title {
  font-family: var(--display);
  font-size: var(--fs-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red-hi);
}
.prose .ic-callout > * + *,
.prose .ic-scorecard > * + *,
.prose .ic-about > * + *,
.prose .ic-sources > * + * { margin-top: .85em; }
.prose .ic-scorecard { border-left: 3px solid var(--red); }
.prose .ic-sources li { font-size: var(--fs-body); color: var(--fg-3); }
.prose .ic-about h2, .prose .ic-sources h2 { margin-top: 0; font-size: var(--fs-h4); }

.prose .ic-faq { margin-top: 2em; }
.prose .ic-faq h3 { color: #fff; }

/* Wide comparison tables are lifted out of the reading column and scroll
   inside their own box — never the page. */
.ic-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r);
  border: 1px solid var(--line);
  margin-block: clamp(20px, 2.4vw, 32px);
}
.prose table, .ic-table-wrap table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--fs-body); }
.prose th, .prose td, .ic-table-wrap th, .ic-table-wrap td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose thead th, .ic-table-wrap thead th {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-3);
  background: rgba(255, 255, 255, .04);
  white-space: nowrap;
}
.prose tbody tr:last-child td, .ic-table-wrap tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover, .ic-table-wrap tbody tr:hover { background: rgba(255, 255, 255, .03); }
.prose td, .ic-table-wrap td { color: var(--fg-2); }
.prose tbody td:first-child, .ic-table-wrap tbody td:first-child { color: #fff; font-weight: 700; }

/* ---- Card grids lifted from the Tilda article blocks ---- */

/* Card grids sit outside .prose so they keep the three-across width the
   source blocks had, instead of squeezing into the reading measure. */
/* A grid section carries its own heading and intro, both lifted out of the
   reading column so they line up with the cards rather than sitting indented. */
.article > .wrap > h2,
.legal > .wrap > h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.14;
  color: #fff;
  margin-top: 2em;
}
.article > .wrap > p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--fg-2);
  margin-top: .7em;
  max-width: 76ch;
}
.article > .wrap > h2 + p { margin-top: .7em; }

.icards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap);
  margin-block: clamp(20px, 2.4vw, 32px);
}
.icard {
  display: grid; gap: 10px; align-content: start;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.icard > * + * { margin-top: 0; }
.icard h3 { margin-top: 0; font-size: var(--fs-h4); color: #fff; }
.icard p, .icard li { font-size: var(--fs-body); line-height: 1.6; }
.icard ul { padding-left: 18px; }

/* The red plates are the source design, not decoration — T850 sets them. */
.icards--red .icard { background: var(--red); border-color: transparent; }
.icards--red .icard h3 { color: #fff; }
.icards--red .icard p,
.icards--red .icard li { color: rgba(255, 255, 255, .93); }
.icards--red .icard li::marker { color: #fff; }
.icards--red .icard a { color: #fff; }

/* ---- Conclusion pull quote ---- */

.prose .apull {
  margin: 2.2em 0 0;
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid rgba(213, 17, 21, .45);
  border-radius: var(--r);
  background: var(--panel);
  position: relative;
}
.prose .apull::before {
  content: '“';
  position: absolute; top: 4px; left: clamp(18px, 2vw, 26px);
  font-family: Georgia, serif;
  font-size: 64px; line-height: 1;
  color: rgba(213, 17, 21, .5);
}
.prose .apull > * + * { margin-top: .85em; }
.prose .apull > p:first-child { padding-top: 22px; }

/* ---- Article footer nav ---- */

.artnav {
  display: flex; flex-wrap: wrap; gap: 14px;
  max-width: 76ch; margin: clamp(36px, 4vw, 56px) auto 0;
}

/* ---- Legal pages ---- */

.legal { background: var(--black); padding-block: clamp(24px, 3vw, 40px) var(--sect); }
.legal .prose h2 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); color: var(--red-hi); }
.legal .prose > p:first-child { color: var(--fg-3); font-size: var(--fs-body); }

/* ---- Responsive ---- */

@media (max-width: 980px) {
  .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .bgrid { grid-template-columns: 1fr; }
  .prose p, .prose li { font-size: .9375rem; }
  .prose .icards { grid-template-columns: 1fr; }
  .artnav .btn { flex: 1 1 100%; justify-content: center; }
}

/* =========================================================
   Sign-up wizard. One page, three steps. The panels ship
   visible and JS turns them into steps, so a no-JS visitor
   still sees the whole form (submitting does need JS).
   ========================================================= */

/* Without JS every panel stays open and the step buttons are pointless. */
html:not(.js-steps) .su-rail,
html:not(.js-steps) [data-next],
html:not(.js-steps) [data-back] { display: none; }
html:not(.js-steps) .su-panel + .su-panel { margin-top: var(--gap); }

.su-hero {
  background: var(--black);
  padding-block: clamp(96px, 11vh, 148px) clamp(24px, 3vw, 36px);
}
.su-hero__in { display: grid; gap: 14px; justify-items: center; text-align: center; }
.su-hero .h1 { max-width: 20ch; }
.su-hero .lead { max-width: 54ch; }

.su-wrap { background: var(--black); padding-bottom: var(--sect); }

/* ---- Progress rail ---- */

.su-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
  max-width: 860px;
  margin: 0 auto clamp(28px, 3.4vw, 44px);
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.su-rail__item {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 2px solid var(--line);
  color: var(--fg-3);
  transition: color .25s, border-color .25s;
}
.su-rail__n {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-family: var(--display);
  font-size: var(--fs-sm);
}
.su-rail__t {
  font-family: var(--display);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.25;
}
.su-rail__item.is-active { color: #fff; border-top-color: var(--red); }
.su-rail__item.is-active .su-rail__n { background: var(--red); border-color: var(--red); color: #fff; }
.su-rail__item.is-done { color: var(--fg-2); border-top-color: rgba(213, 17, 21, .55); }
.su-rail__item.is-done .su-rail__n { border-color: rgba(213, 17, 21, .55); color: var(--red-hi); }

/* ---- Panels ---- */

.su-form { max-width: 860px; margin-inline: auto; }

.su-panel {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.su-panel__h { margin: 0; color: #fff; }
.su-panel__d { font-size: var(--fs-body); color: var(--fg-3); margin-top: -8px; }
.su-req { color: var(--red); font-style: normal; }

/* ---- Option cards ---- */

.su-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.su-opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.su-opt {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: clamp(18px, 2vw, 24px);
  padding-right: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--black);
  cursor: pointer;
  transition: border-color .25s, background-color .25s, transform .25s;
}
.su-opt:hover { border-color: rgba(213, 17, 21, .55); transform: translateY(-2px); }
.su-opt input { position: absolute; opacity: 0; pointer-events: none; }
.su-opt__t { font-family: var(--display); font-size: var(--fs-h4); letter-spacing: .04em; text-transform: uppercase; color: #fff; line-height: 1.15; }
.su-opt__d { font-size: var(--fs-body); line-height: 1.55; color: var(--fg-3); }

.su-opt__tick {
  position: absolute; top: clamp(18px, 2vw, 24px); right: clamp(16px, 1.8vw, 20px);
  width: 20px; height: 20px;
  color: var(--red-hi);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s, transform .2s;
}
.su-opt:has(input:checked) { border-color: var(--red); background: rgba(213, 17, 21, .1); }
.su-opt:has(input:checked) .su-opt__tick { opacity: 1; transform: scale(1); }
.su-opt:has(input:focus-visible) { outline: 2px solid var(--red-hi); outline-offset: 3px; }

/* ---- Fields ---- */

.su-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.su-field { display: grid; gap: 8px; align-content: start; }
.su-field--full { grid-column: 1 / -1; }
.su-field__l {
  font-family: var(--display);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.su-field__l i { color: var(--red); font-style: normal; margin-left: 3px; }
/* The counterpart to the red asterisk: says a field may be left blank. */
.su-field__l b {
  margin-left: 6px;
  font-weight: 400;
  font-family: var(--body);
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--fg-3);
}

.su-input, .su-select, .su-textarea {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: #fff;
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .2s, background-color .2s;
}
.su-textarea { resize: vertical; min-height: 120px; }
.su-input::placeholder, .su-textarea::placeholder { color: rgba(255, 255, 255, .3); }
.su-input:focus, .su-select:focus, .su-textarea:focus {
  outline: none;
  border-color: var(--red);
  background: rgba(213, 17, 21, .06);
}
/* Native select arrow, drawn so it matches on every platform. */
.su-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 44px;
}
.su-select option { background: var(--panel); color: #fff; }
.su-select:invalid { color: rgba(255, 255, 255, .4); }

.su-field.has-error .su-input,
.su-field.has-error .su-select,
.su-field.has-error .su-textarea { border-color: var(--red); }

/* ---- Consent ---- */

.su-check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-2);
  cursor: pointer;
}
.su-check input { position: absolute; opacity: 0; pointer-events: none; }
.su-check__box {
  width: 22px; height: 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--black);
  position: relative;
  transition: border-color .2s, background-color .2s;
}
.su-check__box::after {
  content: '';
  position: absolute; left: 7px; top: 3px;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.5);
  opacity: 0;
  transition: opacity .18s, transform .18s;
}
.su-check input:checked + .su-check__box { background: var(--red); border-color: var(--red); }
.su-check input:checked + .su-check__box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.su-check input:focus-visible + .su-check__box { outline: 2px solid var(--red-hi); outline-offset: 3px; }
.su-check a { color: var(--red-hi); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Errors, nav, honeypot ---- */

.su-err { font-size: var(--fs-body); color: var(--red-hi); }
.su-err--form { margin-top: -4px; }

.su-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.su-nav .btn { min-width: 150px; justify-content: center; }

.su-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Success ---- */

.su-done {
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
  padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px);
  border: 1px solid rgba(213, 17, 21, .45);
  border-radius: var(--r);
  background: var(--panel);
}
.su-done__i {
  width: 54px; height: 54px;
  padding: 13px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
}
.su-done .lead { max-width: 46ch; }

.su-sum {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  margin: 6px 0 8px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--black);
  text-align: left;
}
.su-sum__row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: baseline; }
.su-sum dt {
  font-family: var(--display);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.su-sum dd { margin: 0; font-size: var(--fs-body); color: #fff; word-break: break-word; }

/* ---- Responsive ---- */

@media (max-width: 820px) {
  .su-opts { grid-template-columns: 1fr; }
  .su-opts--2 { grid-template-columns: 1fr; }
  .su-rail__t { display: none; }
  .su-rail { grid-template-columns: repeat(3, 1fr); max-width: 420px; }
  .su-rail__item { grid-template-columns: 1fr; justify-items: center; }
}
@media (max-width: 620px) {
  .su-grid2 { grid-template-columns: 1fr; }
  .su-nav { flex-direction: column-reverse; }
  .su-nav .btn { width: 100%; }
  .su-sum__row { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================== 404 ============================== */
/* Cloudflare Pages serves /404.html for every unmatched URL, so this is the
   one page a visitor only ever reaches by accident. Keep it short and give
   them two ways out. */
.nf { padding: clamp(96px, 15vw, 190px) 0 clamp(72px, 11vw, 140px); text-align: center; }
.nf__code {
  font-family: var(--display);
  font-size: clamp(88px, 22vw, 210px);
  line-height: .84;
  color: var(--red);
  letter-spacing: .01em;
}
.nf__title { margin-top: 14px; }
.nf__text { max-width: 520px; margin: 16px auto 0; color: var(--fg-2); font-size: var(--fs-lead); }
.nf__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }

@media (max-width: 560px) {
  .nf__btns .btn { width: 100%; }
}

/* ========================== Thank you =========================== */
/* Отдельная страница после отправки заявки. Своя, а не панель в форме:
   на её адрес вешается цель в аналитике. */
.ty { padding: clamp(96px, 14vw, 170px) 0 clamp(64px, 9vw, 110px); }
.ty__in { max-width: 760px; text-align: center; }
.ty__mark {
  display: inline-grid; place-items: center;
  width: 76px; height: 76px; margin-bottom: 24px;
  border-radius: 50%; background: var(--red); color: #fff;
}
.ty__mark svg { width: 38px; height: 38px; }
.ty__text { margin-top: 14px; color: var(--fg-2); }
.ty__sum { margin: 34px auto 0; max-width: 420px; text-align: left; }

.ty__steps { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 780px) { .ty__steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  display: grid; gap: 6px; padding: 22px 20px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
}
.step__n { font-family: var(--display); font-size: var(--fs-h4); color: var(--red); }
.step__t { font-size: var(--fs-body); color: #fff; }
.step__d { font-size: var(--fs-sm); color: var(--fg-3); line-height: 1.5; }

.ty__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 40px; }
.ty__note { margin-top: 28px; font-size: var(--fs-sm); color: var(--fg-3); }
.ty__note a { color: var(--fg-2); text-decoration: underline; }

@media (max-width: 560px) {
  .ty__btns .btn { width: 100%; }
}