/* =============================================
   Net Hub — Trust Hub (sports club community trusts)
   Base system lifted from the Events Builder site, which took it from
   mynethub.com, so all three read as one company. Everything below the
   "TRUST HUB COMPONENTS" rule is specific to this microsite.
   ============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red:       #E8274B;
  --red-dark:  #C01F3C;
  --red-light: #FDEAEE;
  --red-line:  #f5b8c4;
  --text:      #0F0F12;
  --text-sub:  #6B6B7A;
  --border:    #E8E8F0;
  --bg:        #F5F5F7;
  --white:     #FFFFFF;
  --nav-h:     60px;

  /* Net Hub navy from the brand guidelines. Used only where the page stops
     selling and states a fact — the safeguarding band. */
  --navy:      #08191F;

  /* accents, kept from the base system */
  --amber:       #F59E0B;
  --amber-light: #FEF3C7;
  --amber-line:  #FDE68A;
  --amber-dark:  #92400E;
  --green:       #1A9C5B;
  --green-light: #E6F7F0;
  --green-dark:  #0E6E3E;
  --indigo:      #4F46E5;
  --indigo-light:#EEF0FF;
  --indigo-dark: #3730A3;
}

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }

body {
  font-family: 'Inter', -apple-system, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
svg { display: block; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
}
.skip-link:focus { left: 12px; }

/* ── Utility ── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.text-center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
  border: none;
  text-decoration: none;
  font-family: inherit;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(232,39,75,0.30);
}
.btn-primary:hover { box-shadow: 0 8px 28px rgba(232,39,75,0.42); }

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.5);
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }

.btn-ghost {
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.btn-ghost:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }

.btn-dark { background: var(--text); color: var(--white); }

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(245,245,247,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.nav-name  {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
}
/* the mark is the two-figure glyph from the Net Hub logo, brand red */
.logo-svg { width: 22px; height: auto; display: block; color: var(--red); flex-shrink: 0; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.nav-links a, .nav-links .dropdown-toggle {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: color 0.15s;
  cursor: pointer;
  text-decoration: none;
}
.nav-links a:hover, .nav-links .dropdown-toggle:hover { color: var(--red); }
.nav-links a[aria-current="page"] { color: var(--red); font-weight: 600; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-toggle { display: flex; align-items: center; gap: 5px; }
.dropdown-toggle::after { content: '\25BE'; font-size: 10px; color: var(--text-sub); }

/* Invisible bridge so the mouse can reach the menu without losing hover */
.dropdown::before {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 16px;
  background: transparent;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 210px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  overflow: hidden;
  z-index: 101;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block;
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.dropdown-menu a:hover { background: var(--red-light); color: var(--red); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.btn-login {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  text-decoration: none;
  font-family: inherit;
}
.btn-login:hover { border-color: var(--red); color: var(--red); }
.nav-actions .btn-primary { padding: 8px 18px; font-size: 13px; }

/* ── PAGE HERO (dark) ── */
.page-hero {
  background: var(--text);
  color: var(--white);
  padding: 130px 24px 88px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
  width: 760px; height: 540px;
  background: radial-gradient(ellipse, rgba(232,39,75,0.14) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232,39,75,0.14);
  color: #FF7C93;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(232,39,75,0.35);
  margin-bottom: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(0.82); }
}

.page-hero h1 {
  color: var(--white);
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -1.6px;
  margin: 0 auto 18px;
  line-height: 1.1;
  max-width: 860px;
}
.page-hero h1 span { color: #FF6683; }

.page-hero .hero-sub {
  color: rgba(255,255,255,0.66);
  font-size: clamp(14px, 2vw, 17px);
  max-width: 620px;
  margin: 0 auto 34px;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Ring backdrop for the dark hero — pure CSS, no imagery */
.hero-rings {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(232,39,75,0.16);
  animation: ring-spin linear infinite, ring-pulse ease-in-out infinite;
}
.hero-ring:nth-child(1) { width: 460px;  height: 460px;  animation-duration: 42s, 4.8s;  animation-delay: 0s, -2.5s; }
.hero-ring:nth-child(2) { width: 660px;  height: 660px;  animation-duration: 56s, 6.2s;  animation-delay: 0s, -0.8s; animation-direction: reverse, normal; }
.hero-ring:nth-child(3) { width: 880px;  height: 880px;  animation-duration: 72s, 7.5s;  animation-delay: 0s, -3.2s; }
.hero-ring:nth-child(4) { width: 1120px; height: 1120px; animation-duration: 90s, 9.0s;  animation-delay: 0s, -5.0s; animation-direction: reverse, normal; }
.hero-ring:nth-child(5) { width: 1400px; height: 1400px; animation-duration: 110s, 11s;  animation-delay: 0s, -7.0s; }
@keyframes ring-spin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ring-pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ── TRUST BAR ── */
.trust-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 500;
  flex-wrap: wrap;
}
.trust-sep { color: var(--border); font-size: 18px; line-height: 1; }

/* ── SECTION LAYOUT ── */
.section { padding: 100px 24px; }
.section-tight { padding: 72px 24px; }
.section-white {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.section-title {
  text-align: center;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -1.3px;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.14;
}
.section-title span { color: var(--red); }

.section-sub {
  text-align: center;
  font-size: clamp(14px, 1.8vw, 17px);
  color: var(--text-sub);
  max-width: 640px;
  margin: 0 auto 56px;
  line-height: 1.75;
}

/* ── ICON TILE (inline SVG, replaces emoji) ── */
.icon-tile {
  width: 46px; height: 46px;
  background: var(--red-light);
  color: var(--red-dark);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-tile svg { width: 22px; height: 22px; }
.icon-tile.amber  { background: var(--amber-light);  color: var(--amber-dark); }
.icon-tile.green  { background: var(--green-light);  color: var(--green-dark); }
.icon-tile.indigo { background: var(--indigo-light); color: var(--indigo-dark); }
.icon-tile.lg { width: 56px; height: 56px; border-radius: 16px; }
.icon-tile.lg svg { width: 27px; height: 27px; }

/* ── FEATURE GRID ── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.feature-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.07); }
.feature-card .icon-tile { margin-bottom: 18px; }
.feature-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 9px; letter-spacing: -0.3px; }
.feature-card p  { font-size: 13.5px; color: var(--text-sub); line-height: 1.72; }

.section-white .feature-card { background: var(--bg); }

/* ── TICKED LISTS ── */
.tick-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 32px;
}
.tick-list.one-col { grid-template-columns: 1fr; }
.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.5;
}
.tick-list li::before {
  content: '';
  flex-shrink: 0;
  width: 15px; height: 15px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--red-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C01F3C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 11px 11px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── ALTERNATING SPLIT (text + SVG visual) ── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--white);
  scroll-margin-top: 84px;
}
.split-visual {
  background: var(--bg);
  padding: 40px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  border-right: 1px solid var(--border);
}
.split-visual svg { width: 100%; height: auto; max-height: 340px; }
/* a real product capture fills the panel edge to edge; anchored top-left
   because UI screenshots read from that corner */
.split-visual.is-shot { padding: 0; align-items: stretch; }
.split-visual.is-shot img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: left top;
  display: block;
}

.split-body { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.split-body .icon-tile { margin-bottom: 20px; }
.split-body h3 {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.7px;
  margin-bottom: 12px;
  line-height: 1.15;
}
.split-body .detail-desc { font-size: 14.5px; color: var(--text-sub); line-height: 1.75; margin-bottom: 26px; }
.split-more { margin-top: 22px; }
.split-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
}
.split-more a::after {
  content: '';
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8274B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.15s;
}
.split-more a:hover::after { transform: translateX(3px); }
.split.reverse .split-visual { order: 2; border-right: none; border-left: 1px solid var(--border); }
.split.reverse .split-body   { order: 1; }

/* ── STAT STRIP ── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  max-width: 1100px;
  margin: 0 auto;
}
.stat-cell { background: var(--white); padding: 26px 24px; }
.section-white .stat-cell { background: var(--bg); }
.stat-value {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 5px;
}
.stat-label { font-size: 12.5px; color: var(--text-sub); line-height: 1.55; }

/* ── PRICING ── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}
.pricing-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 26px;
  position: relative;
  transition: transform 0.18s, box-shadow 0.18s;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.section-white .pricing-card { background: var(--bg); }
.pricing-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.08); }
.pricing-card.popular { border-color: var(--red); border-width: 2px; padding: 31px 25px; }
.popular-badge {
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: var(--white);
  font-size: 11px; font-weight: 700;   /* 11px floor, and matches mynethub.com's badge */
  padding: 4px 15px; border-radius: 20px;
  white-space: nowrap; letter-spacing: 0.05em; text-transform: uppercase;
}
.price-name { font-size: 13px; font-weight: 600; color: var(--text-sub); margin-bottom: 10px; }
.price-amount {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 34px; font-weight: 700;
  letter-spacing: -1.4px; line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.price-amount span { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500; color: var(--text-sub); letter-spacing: 0; }
.price-desc { font-size: 13px; color: var(--text-sub); margin-bottom: 0; line-height: 1.65; }
.price-divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.price-features { list-style: none; margin: 0 0 26px; }
.price-features li {
  padding: 5px 0; font-size: 13px; line-height: 1.5;
  display: flex; align-items: flex-start; gap: 9px;
}
.price-features li::before {
  content: '';
  flex-shrink: 0;
  width: 15px; height: 15px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--red-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C01F3C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 11px 11px;
  background-position: center;
  background-repeat: no-repeat;
}
/* the fee line is a cost, not a feature — mark it as such */
.price-features li.is-fee::before {
  background: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B7A' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
}
.price-features li.is-fee { color: var(--text-sub); }
.pricing-card .btn { width: 100%; justify-content: center; margin-top: auto; }

/* ── COMPARISON TABLE ── */
.compare-wrap {
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow-x: auto;
  background: var(--white);
}
.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: 13.5px;
}
.compare th, .compare td {
  padding: 15px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.compare thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-sub);
  background: var(--bg);
  white-space: nowrap;
}
.compare tbody th { font-weight: 600; color: var(--text); width: 30%; }
.compare td { color: var(--text-sub); line-height: 1.6; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }
.compare .yes { color: var(--green-dark); font-weight: 700; white-space: nowrap; }

/* ── FAQ ── */
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.section-white .faq-item { background: var(--bg); }
.faq-item summary {
  cursor: pointer;
  padding: 19px 24px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B7A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.18s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--red); }
.faq-answer { padding: 0 24px 22px; font-size: 13.5px; color: var(--text-sub); line-height: 1.8; }
.faq-answer p + p { margin-top: 12px; }
.faq-answer a { color: var(--red); font-weight: 600; }
.faq-answer a:hover { text-decoration: underline; }

/* ── CTA BANNER ── */
.cta-banner {
  background: var(--text);
  color: var(--white);
  padding: 100px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
  width: 700px; height: 500px;
  background: radial-gradient(ellipse, rgba(232,39,75,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.cta-banner .section-title { color: var(--white); position: relative; z-index: 1; }
.cta-banner .section-sub   { color: rgba(255,255,255,0.65); margin-bottom: 40px; position: relative; z-index: 1; }
.cta-banner .section-label { color: rgba(255,255,255,0.45); position: relative; z-index: 1; }
.cta-banner .hero-actions  { position: relative; z-index: 1; }

/* ── FOOTER ── */
footer {
  background: var(--text);
  color: rgba(255,255,255,0.45);
  padding: 64px 0 32px;
}
.footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand-row { display: flex; align-items: center; gap: 11px; }
.footer-brand-name {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.5px;
}
.footer-brand p { font-size: 13px; line-height: 1.7; margin-top: 12px; max-width: 340px; }

.footer-contact {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-style: normal;          /* it is an <address>, which browsers italicise */
  max-width: 340px;
}
.footer-contact a,
.footer-contact span {
  font-size: 13px;
  color: rgba(255,255,255,0.42);
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.15s;
  white-space: normal;
  word-break: break-word;
}
.footer-contact a:hover { color: var(--white); }
.footer-contact svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  stroke: currentColor;
}
/* h3, not h4: the preceding section heading is an h2, so h4 would skip a level */
.footer-col h3 { color: rgba(255,255,255,0.8); font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 13px; color: rgba(255,255,255,0.42); transition: color 0.15s; }
.footer-col ul li a:hover { color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 12px;
}
.footer-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.footer-legal a { color: rgba(255,255,255,0.42); transition: color 0.15s; }
.footer-legal a:hover { color: var(--white); }

/* Net Hub is credited here and nowhere else in the chrome */
.powered-by {
  display: block;
  flex-shrink: 0;
  opacity: 0.82;
  transition: opacity 0.15s;
}
.powered-by:hover { opacity: 1; }
.powered-by img { width: 132px; height: auto; }

/* =============================================
   TRUST HUB COMPONENTS
   ============================================= */

/* ── HERO QUOTE ──
   The brief leads with the buyer's own words, so the quote sits in the hero
   rather than in a testimonial grid two thirds down the page. */
.hero-quote {
  max-width: 620px;
  margin: 40px auto 0;
  padding: 24px 26px;
  text-align: left;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-quote blockquote {
  color: rgba(255,255,255,0.92);
  font-size: 15px;
  line-height: 1.7;
  font-style: italic;
  padding-left: 14px;
  border-left: 3px solid var(--red);
  margin-bottom: 18px;
}
.hero-quote-by { display: flex; align-items: center; gap: 12px; }
.hero-quote-by span {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  display: block;
}
.hero-quote-by strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
}
/* Sized the same whether it holds the portrait or the initials fallback, so
   the row does not move if the image is ever missing. */
.hq-avatar {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(232,39,75,0.22);
  border: 1px solid rgba(232,39,75,0.45);
  color: #FF9DAF;
  font-size: 12px; font-weight: 700;
}
img.hq-avatar { object-fit: cover; border-color: rgba(255,255,255,0.28); }

/* ── SAFEGUARDING BAND ──
   Deliberately not a card and not centred. It reads as a statement of fact
   because a governance reader distrusts anything that looks like a pitch. */
.safeguard {
  background: var(--navy);
  color: rgba(255,255,255,0.72);
  padding: 62px 24px;
  scroll-margin-top: 84px;
}
.safeguard-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FF7C93;
  margin-bottom: 14px;
}
.safeguard h2 {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.9px;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 26px;
  max-width: 720px;
}
.safeguard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  font-size: 14.5px;
  line-height: 1.75;
  margin-bottom: 30px;
}
.safeguard-grid strong { color: var(--white); font-weight: 600; }
.safeguard-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.safeguard-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.86);
}
.safeguard-facts li::before {
  content: '';
  width: 14px; height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ── A NOTE UNDER A SECTION ──
   Carries the sourced ratio that proves the section. Separated by a rule so it
   reads as evidence rather than more copy. */
.section-note {
  max-width: 760px;
  margin: 38px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-sub);
  text-align: center;
}
.section-note strong { color: var(--text); font-weight: 700; }
.section-note a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── BEFORE / AFTER PANELS ── */
/* This site alternates splits by DOM order rather than with .reverse, so the
   divider has to follow the visual instead of always sitting on its right. */
.split-body + .split-visual { border-right: none; border-left: 1px solid var(--border); }

/* Equal height on purpose: the comparison only lands if the eye reads the two
   panels as the same object with different contents. */
.vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.vs-panel {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* a grid item defaults to min-width:auto, which lets the logo grid inside
     push wider than its column and get clipped by the overflow above */
  min-width: 0;
}
/* the "today" panel is deliberately flat and colourless; the point of the
   comparison is that it has nothing in it */
.vs-panel.is-before { background: var(--bg); }
.vs-panel.is-after { border-color: var(--red-line); box-shadow: 0 10px 34px rgba(232,39,75,0.10); }
.vs-head { padding: 24px 26px 18px; }
.vs-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 20px;
  background: #ECECF2;
  color: var(--text-sub);
  margin-bottom: 12px;
}
.vs-tag.is-live { background: var(--red-light); color: var(--red-dark); }
.vs-head h3 {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.vs-head p { font-size: 13px; color: var(--text-sub); }
.vs-foot {
  margin-top: auto;
  padding: 18px 26px 24px;
  border-top: 1px solid var(--border);
}
.vs-foot p { font-size: 12.5px; line-height: 1.7; color: var(--text-sub); }

/* the wall of logos: thirteen tiles carrying no information at all */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 26px 24px;
}
.lw-tile {
  position: relative;
  min-width: 0;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.02) 100%),
    var(--white);
  border: 1px solid var(--border);
}
/* A faint mark inside each tile so it reads as "a logo", not "a loading state".
   Positioned rather than margin'd — a percentage margin resolves against the
   tile's own width and fights the aspect-ratio for the track size. */
.lw-tile::after {
  content: '';
  position: absolute;
  inset: 33% 27%;
  border-radius: 3px;
  background: #DCDCE6;
}

/* the directory: the same thirteen, with the fields that make them usable */
.dir { padding: 0 26px 22px; }
.dir-search {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  font-size: 13px;
  color: var(--text);
  margin-bottom: 10px;
}
.dir-search svg { width: 15px; height: 15px; color: var(--text-sub); flex-shrink: 0; }
.dir-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dir-chips span {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--text-sub);
  background: var(--white);
}
.dir-chips span.on {
  background: var(--red-light);
  border-color: var(--red-line);
  color: var(--red-dark);
}
.dir-list { list-style: none; display: grid; gap: 8px; }
.dir-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
}
.dir-av {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--red-light);
  color: var(--red-dark);
  font-size: 11px; font-weight: 700;
}
.dir-list li { min-width: 0; }
.dir-who { min-width: 0; overflow: hidden; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dir-who b { font-size: 13px; font-weight: 700; letter-spacing: -0.2px; }
.dir-who em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dir-go {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--text);
  color: var(--white);
}
.dir-foot { margin-top: 12px; font-size: 11.5px; color: var(--text-sub); }

/* ── THE RENEWAL REPORT ── */
.renewal {
  width: 100%;
  max-width: 380px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 12px 40px rgba(20,20,30,0.10);
}
.renewal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.renewal-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-sub);
  margin-bottom: 5px;
}
.renewal-head h3 {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.renewal-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--amber-light);
  border: 1px solid var(--amber-line);
  color: var(--amber-dark);
  white-space: nowrap;
}
.renewal-stats { list-style: none; display: grid; gap: 15px; }
.renewal-stats li {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas: 'n l' 'n b';
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
}
.rn-n {
  grid-area: n;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rn-n em { font-style: normal; font-size: 13px; color: var(--text-sub); font-weight: 600; }
.rn-l { grid-area: l; font-size: 12.5px; font-weight: 600; color: var(--text-sub); }
.rn-bar {
  grid-area: b;
  display: block;
  height: 5px;
  border-radius: 4px;
  background: var(--bg);
  overflow: hidden;
}
.rn-bar i {
  display: block; height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--red) 0%, #FF6683 100%);
}
.renewal-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--navy);
  color: rgba(255,255,255,0.7);
}
.rt-l { font-size: 12px; line-height: 1.45; max-width: 150px; }
.rt-n {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1.2px;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.renewal-foot { margin-top: 12px; font-size: 11.5px; color: var(--text-sub); text-align: center; }
.renewal-foot strong { color: var(--green-dark); font-weight: 700; }
/* the report is the argument, so the body copy opens by quoting it */
.split-body h3.is-quote { font-size: 21px; line-height: 1.35; }

/* ── MEMBERSHIP TIERS, GROUPS, THE APP ── */
.tiers, .groups, .appcard {
  width: 100%;
  max-width: 330px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 32px rgba(20,20,30,0.08);
}
.tiers-eyebrow, .groups-eyebrow, .app-brand {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-sub);
  margin-bottom: 14px;
}
.tiers ul { list-style: none; display: grid; gap: 8px; }
.tiers li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.tiers li.on { border-color: var(--red); border-width: 1.5px; background: var(--red-light); }
.ti-name { font-size: 13px; font-weight: 700; letter-spacing: -0.2px; display: flex; flex-direction: column; gap: 2px; }
.ti-note { font-size: 10.5px; font-weight: 500; color: var(--text-sub); }
.ti-price {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.ti-price em { font-style: normal; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; color: var(--text-sub); }
.ti-cta {
  display: block;
  margin-top: 14px;
  padding: 11px;
  border-radius: 50px;
  background: var(--red);
  color: var(--white);
  font-size: 13px; font-weight: 600;
  text-align: center;
}
.ti-foot, .groups-foot, .app-foot {
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-sub);
  text-align: center;
  line-height: 1.5;
}

.groups ul { list-style: none; display: grid; gap: 7px; }
.groups li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
}
.groups li b { font-weight: 700; letter-spacing: -0.2px; flex: 1; min-width: 0; }
.groups li em { font-style: normal; font-size: 11px; color: var(--text-sub); white-space: nowrap; }
.gr-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.gr-dot.is-2 { background: var(--indigo); }
.gr-dot.is-3 { background: var(--green); }
.gr-dot.is-4 { background: var(--amber); }

.appcard { position: relative; padding-top: 30px; }
.app-notch {
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  width: 54px; height: 5px;
  border-radius: 4px;
  background: var(--border);
}
.app-brand { text-align: center; color: var(--text); }
.app-nav {
  list-style: none;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 20px;
  background: var(--bg);
  margin-bottom: 12px;
}
.app-nav li {
  flex: 1;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-sub);
  padding: 6px 0;
  border-radius: 16px;
}
.app-nav li.on { background: var(--white); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.app-post {
  display: flex;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 7px;
}
.app-av {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--indigo-light);
  color: var(--indigo-dark);
  font-size: 10px; font-weight: 700;
}
.app-av.is-2 { background: var(--amber-light); color: var(--amber-dark); }
.app-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.app-body b { font-size: 12px; font-weight: 700; letter-spacing: -0.2px; }
.app-body em { font-style: normal; font-size: 11.5px; color: var(--text-sub); line-height: 1.5; }

/* ── PRICING, WITH THE OBJECTION ANSWERED BESIDE IT ── */
.pricing-grid.one {
  grid-template-columns: 340px 1fr;
  align-items: start;
  gap: 26px;
  max-width: 1000px;
}
/* The comparison table carries min-width:640px and scrolls inside its wrapper.
   Without this the aside's min-content is that 640, which drags the whole grid
   wider than the phone and the price card gets clipped instead. */
.pricing-grid.one > * { min-width: 0; }
.pricing-aside .compare-wrap { min-width: 0; }
.pricing-aside h3 {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 14px;
}
.pricing-aside .compare-wrap { margin: 0; }
.pricing-note {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-sub);
}
.pricing-note strong { color: var(--text); font-weight: 700; }

/* ── CASE STUDY ── */
.case-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  align-items: start;
}
.case-video {
  border-radius: 18px;
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 14px 44px rgba(20,20,30,0.16);
}
.case-video video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; background: #000; }
.case-video figcaption {
  padding: 12px 16px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}
.case-body p { font-size: 14.5px; line-height: 1.75; color: var(--text-sub); margin-bottom: 16px; }
.case-body strong { color: var(--text); font-weight: 700; }
.case-facts { list-style: none; display: grid; gap: 9px; margin-bottom: 22px; }
.case-facts li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sub);
  line-height: 1.45;
}
.section-white .case-facts li { background: var(--white); }
.case-facts li span {
  flex: 0 0 38px;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.8px;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.case-more a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--red);
}

/* ── THE NAMED HUMAN ──
   Every trust site in the research hides behind a form, so this one is a
   person-sized card with a face, an address and a number that ring through. */
.person-card {
  display: grid;
  /* 260 rather than 220. The portrait is square and the panel is portrait, so
     every pixel of column width is a pixel of face that stops being cropped. */
  grid-template-columns: 260px 1fr;
  gap: 0;
  max-width: 780px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 12px 40px rgba(20,20,30,0.08);
}
.person-photo {
  width: 100%; height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: center top;
  background: var(--bg);
}
.person-body { padding: 32px 34px; }
.person-name {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.7px;
}
.person-role { font-size: 13px; color: var(--text-sub); margin-bottom: 16px; }
.person-blurb { font-size: 14px; line-height: 1.75; color: var(--text-sub); margin-bottom: 20px; }
.person-contact { list-style: none; display: grid; gap: 10px; margin-bottom: 22px; }
.person-contact li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.person-contact svg { width: 16px; height: 16px; color: var(--red); flex-shrink: 0; }
.person-contact a { color: var(--text); }
.person-contact a:hover { color: var(--red); }

/* ── RESPONSIVE ── */
@media (max-width: 1060px) {
  nav { padding: 0 24px; }
  .nav-links { gap: 20px; }
  .pricing-grid.one { grid-template-columns: 1fr; max-width: 620px; }
}
@media (max-width: 1000px) {
  .feature-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 940px) {
  /* shed the least load-bearing links before the bar starts wrapping */
  .nav-links li.nav-optional { display: none; }
}
@media (max-width: 900px) {
  nav { padding: 0 20px; }
  .split { grid-template-columns: 1fr; }
  .split-visual { min-height: 240px; padding: 32px 28px; border-right: none; border-bottom: 1px solid var(--border); }
  .split-body { padding: 34px 28px; }
  .split.reverse .split-visual { order: 1; border-left: none; border-bottom: 1px solid var(--border); }
  .split.reverse .split-body   { order: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
  .safeguard-grid { grid-template-columns: 1fr; gap: 16px; }
  .case-split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* Nav links go; every destination is still reachable from the footer. */
  .nav-links { display: none; }
  .btn-login { display: none; }
  /* stacked, the interpuncts end up dangling at the end of each line */
  .trust-bar { flex-direction: column; gap: 9px; }
  .trust-sep { display: none; }
  /* Side by side under 760px both panels are too narrow to read, and the
     comparison only works if each is legible on its own. */
  .vs-grid { grid-template-columns: 1fr; }
  /* On one column there is no width to ellipsize into — a taller row that says
     the sector and the distance beats a truncated one that says neither. */
  .dir-who em { white-space: normal; }
  .person-card { grid-template-columns: 1fr; max-width: 420px; }
  /* Square, matching the source. A 4:3 window cannot contain this headshot —
     it is cropped tight enough that something (crown or chin) always goes. */
  .person-photo { min-height: 0; aspect-ratio: 1; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 24px; }
  .section, .section-tight { padding: 64px 20px; }
  /* the section already gives 20px; the container's own 24 doubled it into a
     44px gutter, a quarter of a 375px screen spent on margin */
  .container { padding-left: 0; padding-right: 0; }
  .page-hero { padding: 104px 20px 64px; }
  .safeguard { padding: 52px 20px; }
  .cta-banner { padding: 72px 20px; }
  .feature-grid, .feature-grid.cols-3 { grid-template-columns: 1fr; }
  .tick-list { grid-template-columns: 1fr; }
  footer { padding: 48px 0 24px; }
  .footer-inner { padding: 0 20px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-quote { margin-top: 30px; padding: 20px; }
  .person-body { padding: 26px 22px; }
  .renewal-total { flex-direction: column; align-items: flex-start; gap: 6px; }
  .rt-l { max-width: none; }
}

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