/* PokerHub marketing site — September 2026 rebuild.
   Spec: docs/superpowers/specs/2026-09-15-site-rebuild-design.md */

/* ---------- Fonts (self-hosted, Latin subset) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/big-shoulders-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  --black: #06060a;
  --ink: #e9e9ef;
  --ink-2: #b6b6c2;
  --ink-3: #a4a4b2;
  --ink-4: #9c9caa;
  --ink-5: #6e6e7c;
  --ink-nav: #b8b8c4;
  --card-back: #0a0a0d;
  --error: #ff6b6b;

  --rgb-red: 217, 56, 56;     /* #D93838 — the one brand red */
  --rgb-neon: 255, 45, 45;    /* #FF2D2D — Launch border + glow only */
  --rgb-green: 43, 255, 136;  /* #2BFF88 */
  --red: rgb(var(--rgb-red));
  --neon: rgb(var(--rgb-neon));
  --green: rgb(var(--rgb-green));
  --green-soft: #b6ffd7;

  --font-body: 'Archivo', Helvetica, Arial, sans-serif;
  --font-display: 'Big Shoulders Display', 'Archivo', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --content: 1120px;
  --narrow: 760px;
  --gutter: 24px;
  --rhythm: 104px;
  --ease-out: cubic-bezier(.22, .9, .25, 1);
}

/* Accent modifiers: accented components read --accent-rgb (and --tint). */
.is-red   { --accent-rgb: var(--rgb-red);   --tint: 0.06; }
.is-green { --accent-rgb: var(--rgb-green); --tint: 0.05; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-soft); }
::selection { background: var(--red); color: #fff; }
/* Components set display; without !important they would un-hide [hidden]. */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- Page + background art ---------- */
.page {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
}
/* A fixed layer, not background-attachment: fixed — iOS Safari ignores that
   and would scale `cover` to the whole page height. */
.bg-art {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('../images/hero-bg.webp') center top / cover no-repeat;
  filter: saturate(1.05) brightness(1.02);
  opacity: 0.8;
}
/* Page-height scrim: legibility behind the hero, then a ramp toward the footer. */
.bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% 22%, rgba(6, 6, 10, 0.88), rgba(6, 6, 10, 0.4) 60%, transparent 80%),
    linear-gradient(180deg, rgba(6, 6, 10, 0) 0%, rgba(6, 6, 10, 0.55) 46vh, rgba(6, 6, 10, 0.82) 90vh, rgba(6, 6, 10, 0.86) 100%);
}
.page-content, .site-footer { position: relative; z-index: 1; }

/* ---------- Nav bubble ---------- */
.nav-wrap {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}
.nav-bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: var(--content);
  padding: 9px 10px 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(10, 10, 14, 0.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.nav-bar--legal { max-width: 900px; gap: 16px; }
.nav-logo { display: flex; align-items: center; margin-right: 10px; }
.nav-logo img { height: 24px; width: auto; filter: drop-shadow(0 0 16px rgba(var(--rgb-red), 0.45)); }
.nav-bar--legal .nav-logo { margin-right: auto; }
.nav-bar--legal .nav-logo img { height: 22px; filter: none; }
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-link {
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-nav);
}
.nav-back {
  padding: 9px 16px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-nav);
}
.nav-link:hover, .nav-back:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

/* ---------- Buttons ---------- */
.btn-launch {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--neon);
  background: rgba(var(--rgb-red), 0.10);
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(var(--rgb-neon), 0.8);
  box-shadow: 0 0 18px rgba(var(--rgb-neon), 0.45), inset 0 0 14px rgba(var(--rgb-neon), 0.18);
  transition: box-shadow 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.btn-launch:hover {
  color: #fff;
  background: rgba(var(--rgb-red), 0.22);
  box-shadow: 0 0 34px rgba(var(--rgb-neon), 0.85), inset 0 0 20px rgba(var(--rgb-neon), 0.3);
}
.btn-launch--lg {
  padding: 16px 40px;
  border-width: 2px;
  font-size: 24px;
  text-shadow: 0 0 14px rgba(var(--rgb-neon), 0.85);
  box-shadow: 0 0 26px rgba(var(--rgb-neon), 0.5), inset 0 0 22px rgba(var(--rgb-neon), 0.18);
}
.btn-launch--lg:hover {
  box-shadow: 0 0 52px rgba(var(--rgb-neon), 0.9), inset 0 0 28px rgba(var(--rgb-neon), 0.32);
  transform: translateY(-2px);
}
.btn-quiet {
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn-quiet:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.btn-quiet:disabled { opacity: 0.6; cursor: progress; }

/* ---------- Neon titles: one recipe, weight/stroke/size tuned per title ---------- */
.neon-title {
  font-family: var(--font-display);
  font-weight: var(--title-weight, 800);
  line-height: 0.92;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: #fff;
  -webkit-text-stroke: var(--title-stroke, 1.4px) rgba(var(--rgb-red), 0.95);
  paint-order: stroke fill;
  text-shadow: 0 0 18px rgba(var(--rgb-red), 0.55), 0 0 46px rgba(var(--rgb-red), 0.30), 0 6px 40px rgba(0, 0, 0, 0.65);
}
.neon-title--hero    { --title-stroke: 1.6px; max-width: 760px; margin: 40px auto 0; font-size: clamp(36px, 5vw, 76px); }
.neon-title--section { max-width: 900px; margin: 22px auto 0; font-size: clamp(30px, 4.4vw, 60px); }
.neon-title--contact { margin-top: 22px; font-size: clamp(34px, 5vw, 64px); }
.neon-title--success { --title-stroke: 1px; margin: 16px 0 8px; font-size: 30px; }
.neon-title--success:focus { outline: none; }
.neon-title--cta     { --title-weight: 600; --title-stroke: 1px; max-width: 860px; margin: 0 auto 16px; font-size: clamp(30px, 4.4vw, 58px); }
.neon-title--legal {
  --title-weight: 700;
  --title-stroke: 1px;
  margin-top: 16px;
  text-align: left;
  font-size: clamp(38px, 6vw, 72px);
  text-shadow: 0 0 18px rgba(var(--rgb-red), 0.5), 0 0 46px rgba(var(--rgb-red), 0.28);
}

/* ---------- Hero ---------- */
.hero {
  max-width: var(--content);
  margin: 0 auto;
  padding: 148px var(--gutter) 0;
  text-align: center;
}
.hero-cta { display: flex; justify-content: center; margin-top: 44px; }
.hero-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 26px);
  margin: 46px 0 14px;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* The float animation owns `transform`, so — as in the approved render — cards
   carry no static tilt. */
.flip-card {
  width: clamp(84px, 12vw, 148px);
  height: clamp(112px, 16vw, 200px);
  perspective: 1000px;
  animation: float var(--float-dur) ease-in-out var(--float-delay) infinite;
  cursor: pointer;
  touch-action: manipulation;
}
.flip-card:nth-child(1) { --float-dur: 6.5s; --float-delay: 0s; }
.flip-card:nth-child(2) { --float-dur: 7.4s; --float-delay: 0.5s; }
.flip-card:nth-child(3) { --float-dur: 6.9s; --float-delay: 1.1s; }
.flip-card:nth-child(4) { --float-dur: 7.8s; --float-delay: 1.7s; }

.flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease-out);
}
.flip-card.is-flipped .flip-card__inner { transform: rotateY(180deg); }

/* Faces never take the pointer — only .flip-card does. */
.flip-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.40);
  box-shadow: 0 24px 70px rgba(var(--accent-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: none;
  /* Delay the swap until the rotation passes 90° so the mirrored back never bleeds through. */
  transition: opacity 0.25s linear 0.2s;
}
.flip-card__front {
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.02));
}
.flip-card__back {
  opacity: 0;
  transform: rotateY(180deg);
  padding: 0 12%;
  background: var(--card-back);
}
.flip-card.is-flipped .flip-card__front { opacity: 0; }
.flip-card.is-flipped .flip-card__back { opacity: 1; }
.flip-card__frame {
  position: absolute;
  inset: 7px;
  border-radius: 11px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
}
.flip-card__suit {
  font-size: clamp(44px, 6.4vw, 82px);
  line-height: 1;
  color: rgb(var(--accent-rgb));
  text-shadow: 0 0 32px rgba(var(--accent-rgb), 0.9);
}
.flip-card__index {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-size: clamp(10px, 1.35vw, 15px);
  color: rgb(var(--accent-rgb));
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.85);
}
.flip-card__index b { font-family: var(--font-body); font-size: clamp(11px, 1.5vw, 17px); font-weight: 700; }
.flip-card__index--tl { top: 7px; left: 9px; }
.flip-card__index--br { bottom: 7px; right: 9px; transform: rotate(180deg); }
.flip-card__logo { position: relative; width: 100%; height: auto; filter: drop-shadow(0 0 14px rgba(var(--rgb-red), 0.5)); }
.flip-card.is-green .flip-card__logo { filter: hue-rotate(105deg) saturate(1.55) brightness(1.2) drop-shadow(0 0 14px rgba(var(--rgb-green), 0.55)); }

/* ---------- Sections, chips, dividers ---------- */
.section {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
  scroll-margin-top: var(--rhythm);
}
.section--narrow { max-width: var(--narrow); }

/* Dividers own the vertical rhythm; sections carry no vertical padding. */
.divider {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--content);
  margin: var(--rhythm) auto;
  padding: 0 var(--gutter);
}
.divider__line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14)); }
.divider__line:last-child { background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent); }
.divider__suit { font-size: 15px; line-height: 1; color: rgb(var(--accent-rgb)); text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.85); }

.chip-row { display: flex; justify-content: center; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  background: rgba(var(--accent-rgb), 0.07);
  color: rgb(var(--accent-rgb));
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- Features ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
}
.feature-card {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, border-color 0.3s ease;
}
.feature-card:hover {
  z-index: 2;
  transform: scale(1.045) translateY(-6px);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 28px 70px rgba(var(--accent-rgb), 0.22);
}
.feature-card__shot {
  height: 210px;
  padding: 14px 22px;
  background: rgba(var(--accent-rgb), var(--tint));
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.feature-card__shot img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.feature-card__body { padding: 26px 24px 30px; }
.feature-card h3 { margin: 12px 0 10px; font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.feature-card p, .news-card p { font-size: 15.5px; line-height: 1.6; color: var(--ink-4); }

/* ---------- News ---------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  margin-top: 48px;
}
.news-card {
  display: block;
  color: inherit;
  border-radius: 24px;
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), rgba(255, 255, 255, 0.015));
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.news-card:hover {
  color: inherit;
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 26px 70px rgba(var(--accent-rgb), 0.18);
}
.news-card__photo { height: 260px; background: rgba(var(--accent-rgb), 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.news-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.news-card__body { padding: 28px 26px 32px; }
.news-card h3 { margin: 14px 0 12px; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.12; font-weight: 800; letter-spacing: -0.025em; }
.news-card p { margin-bottom: 20px; }
.news-card__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: rgb(var(--accent-rgb)); }
.news-card__cta span { font-size: 13px; }

/* ---------- Contact ---------- */
.contact-form {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
  margin-top: 44px;
  padding: 34px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}
.field { display: flex; flex-direction: column; gap: 9px; }
.field--full { grid-column: 1 / -1; }
.field__label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); }
.req { color: var(--red); }
.field__input {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(6, 6, 10, 0.6);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15.5px;
  outline: none;
}
textarea.field__input { line-height: 1.55; resize: vertical; }
/* The red border + ring is the fields' focus indicator. */
.field__input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(var(--rgb-red), 0.15); }
.honeypot { position: absolute; left: -9999px; }
.form-turnstile { min-height: 65px; }
/* Always in the DOM (role="alert" must exist before its text changes); collapses when empty. */
.form-status { margin-top: 10px; font-size: 13.5px; color: var(--error); }
.form-status:empty { margin-top: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.contact-success {
  margin-top: 44px;
  padding: 40px 32px;
  border-radius: 24px;
  border: 1px solid rgba(var(--rgb-green), 0.35);
  background: rgba(var(--rgb-green), 0.07);
  text-align: center;
}
.contact-success__suit { font-size: 26px; color: var(--green); text-shadow: 0 0 24px rgba(var(--rgb-green), 0.7); }
.contact-success p { margin-bottom: 22px; font-size: 16px; line-height: 1.6; color: var(--ink-4); }

/* ---------- Closing CTA ---------- */
.cta-panel {
  padding: 74px 32px;
  border-radius: 30px;
  border: 1px solid rgba(var(--rgb-red), 0.25);
  background: radial-gradient(700px 300px at 50% 120%, rgba(var(--rgb-red), 0.28), transparent 70%), rgba(255, 255, 255, 0.02);
  text-align: center;
}
.cta-suits { display: flex; justify-content: center; gap: 14px; margin-bottom: 26px; font-size: 24px; }
.cta-suits span { color: rgb(var(--accent-rgb)); text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.8); }
.cta-lede { max-width: 520px; margin: 0 auto 34px; font-size: 17px; line-height: 1.55; color: var(--ink-3); }

/* ---------- Footer ---------- */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content);
  margin: 110px auto 0;
  padding: 34px var(--gutter) 46px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer--narrow { max-width: var(--narrow); margin-top: 90px; padding-top: 30px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-5); }
.footer-brand img { height: 19px; width: auto; opacity: 0.9; }
.site-footer--narrow .footer-brand img { height: 18px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13.5px; }
.footer-links a { color: var(--ink-4); }
.footer-links a:hover { color: #fff; }

/* ---------- Legal pages ---------- */
.page--legal { background: radial-gradient(900px 520px at 50% -10%, rgba(var(--rgb-red), 0.16), transparent 70%), var(--black); }
.legal {
  max-width: var(--narrow);
  margin: 0 auto;
  padding: 150px var(--gutter) 0;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ink-2);
}
.legal-eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--accent-rgb)); }
.legal-updated { margin-top: 14px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; color: var(--ink-5); }
.legal-sections { display: flex; flex-direction: column; gap: 34px; margin-top: 44px; }
.legal-sections h2 { margin-bottom: 10px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.legal-sections p, .legal-sections ul { margin-bottom: 12px; }
.legal-sections ul { padding-left: 22px; }
.legal-sections li + li { margin-top: 7px; }
.legal-sections ul:has(+ .legal-subhead), .legal-sections ul:has(+ .legal-note) { margin-bottom: 16px; }
.legal-sections .legal-subhead { margin-bottom: 8px; font-weight: 600; color: var(--ink); }
.legal-sections .legal-note { font-size: 15.5px; color: var(--ink-4); }
.legal-sections section > :last-child { margin-bottom: 0; }
.legal a { color: var(--red); }
.legal a:hover { color: var(--error); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .nav-bar { flex-wrap: wrap; justify-content: center; row-gap: 6px; padding: 10px 12px; border-radius: 22px; }
  .nav-links { order: 3; flex: 1 0 100%; justify-content: center; gap: 0; }
  .nav-logo { margin-right: auto; }
  .hero-cards { gap: 8px; }
  /* Quarter-row sizing so four cards always fit; the float stops here, as in the approved render. */
  .flip-card { width: calc((100% - 24px) / 4 - 8px); height: auto; aspect-ratio: 3 / 4; animation: none; }
  /* iOS Safari zooms the viewport on focus if an input's font-size is under 16px. */
  .field__input { font-size: 16px; }
  /* The nav-bar wraps to two rows here, so the desktop scroll-margin-top is no longer tall enough
     to clear it; without this, anchor jumps land the section chip under the nav. */
  .section { scroll-margin-top: 132px; }
}
@media (max-width: 560px) {
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  /* Keeps the fixed 300px Turnstile widget inside the form on small phones. */
  .contact-form { padding: 22px 16px; }
}
@media (max-width: 420px) {
  .nav-link { padding: 7px 9px; font-size: 13px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flip-card { animation: none; }
  /* Flip becomes an instant face swap with no rotation. */
  .flip-card__inner, .flip-card__face { transition: none; }
  .flip-card.is-flipped .flip-card__inner, .flip-card__back { transform: none; }
  .feature-card:hover, .news-card:hover, .btn-launch--lg:hover { transform: none; }
}