/* ═══════════════════════════════════════════════════════════
   Blue Arctic V6 · Homepage
   ─────────────────────────
   Section styles for index.php. Order mirrors the page:
   hero → logo band → trust bar → plans → stack →
   migration → company → logos → reviews → support →
   security → pro services → final CTA.
   ═══════════════════════════════════════════════════════════ */

/* ── 1 · Hero (dark, infrastructure-first) ─────────────────
   Final pass 2026-07-21: the hero is the one dark, dramatic
   moment of the homepage: deep navy over enterprise
   infrastructure, followed by a calm, light reading experience.
   The announce bar and .header-dark share the same surface so
   the top of the page reads as a single canvas. */
.hero {
  position: relative;
  background:
    radial-gradient(64rem 30rem at 86% -14%, rgba(95, 185, 238, .17), transparent 62%),
    radial-gradient(48rem 28rem at -10% 110%, rgba(21, 96, 232, .2), transparent 58%),
    linear-gradient(178deg, var(--navy-900) 0%, var(--navy-950) 82%);
  color: #A8BFD3;
  overflow: clip;
}
/* Arctic lattice: the faint node-and-survey-line signature
   (infrastructure map ⁄ ice fracture). Static, ~600 bytes, fades
   out toward the content edge. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%23AFCDE6' stroke-width='1'%3E%3Cpath d='M-10 70 78 44l82 46 110-38M78 44 64-12M160 90l8 180M160 90l106 62M-20 190l96 34 84-20'/%3E%3C/g%3E%3Cg fill='%23AFCDE6'%3E%3Ccircle cx='78' cy='44' r='2.2'/%3E%3Ccircle cx='160' cy='90' r='2.2'/%3E%3Ccircle cx='76' cy='224' r='2.2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 260px 260px;
  opacity: .055;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-block: clamp(2.25rem, 4vw, 3.5rem) clamp(2rem, 3.5vw, 2.75rem);
}
.hero-copy .eyebrow { margin-bottom: 1.1rem; }
.hero-copy h1 { max-width: 17ch; margin-bottom: 1.15rem; color: #F6FAFD; }
.hero-copy h1 em {
  font-style: normal;
  color: var(--sky-400);
  position: relative;
}
.hero-copy .lead { max-width: 34rem; margin-bottom: 1.65rem; color: #A8BFD3; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.25rem; }
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.3rem;
  font-size: var(--fs-tiny);
  color: #8FA9C0;
}
.hero-proof span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-proof .ico { color: var(--ok-600); }

/* Hero visual: editorial composition. One photograph, one honest
   caption. No floating badges: the photo is evidence, the caption
   is provenance, and the claims live in the proof points below.
   The frame is deliberately quiet so an exceptional final hero
   photograph can carry the whole moment. */
.hero-visual { position: relative; }
.hero-photo {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 4px 12px rgba(2, 8, 16, .35), 0 34px 80px -30px rgba(2, 8, 16, .8);
  overflow: hidden;
  background: var(--navy-800);
}
.hero-photo img { width: 100%; height: auto; aspect-ratio: 1 / .84; object-fit: cover; object-position: center 42%; }
.hero-photo-caption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 2.5rem 1.35rem 1.05rem;
  background: linear-gradient(180deg, transparent, rgba(3, 9, 17, .82));
  color: #D9E6F2;
  font-size: var(--fs-tiny);
  line-height: 1.45;
  text-wrap: balance;
}
.hero-photo-caption .ico { color: var(--sky-400); flex: none; }

/* ── 2 · Trust bar (floating proof points) ─────────────────
   Final pass 2026-07-21: no more spec-table dividers. Five quiet
   proof cards with generous air, each with a brand-gradient icon
   tile. Premium evidence, not a feature list. */
/* A proof band, not a section: band spacing so it groups with the
   logo band above rather than floating between two blocks. */
.trust-bar { padding-block: var(--space-band); }
.trust-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem .6rem;
  /* Balanced 3 + 2 cluster: floating proof points, not a spec row */
  max-width: 53rem;
  margin-inline: auto;
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem 1rem .65rem .75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-soft);
}
.trust-chip-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ice-100), var(--blue-100));
  border: 1px solid var(--ice-200);
  color: var(--blue-600);
}
.trust-chip-copy { display: grid; line-height: 1.3; }
.trust-chip-copy strong {
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.trust-chip-copy small { font-size: var(--fs-tiny); color: var(--ink-3); }
@media (max-width: 640px) {
  /* A little more air between and inside the chips: reads calmer/premium. */
  .trust-chips { gap: .7rem; }
  /* Shared floor width + centered content so the shorter "Free migration"
     chip harmonizes with the ~222–235px cluster instead of pinching the
     centered stack. Restrained: not full-width; longer chips keep their
     natural width. */
  .trust-chip {
    padding: .78rem 1.2rem .78rem .85rem;
    gap: .72rem;
    min-width: 13.25rem;
    justify-content: center;
  }
  .trust-chip-ico { width: 2rem; height: 2rem; }
}

/* ── 4 · Why Blue Arctic (layered card stack) ───────────── */
/*  Four large cards that rise over one another on desktop via
    position:sticky with an increasing top offset, so every card
    that has been passed stays visible as a thin layered edge.
    JS only writes four custom properties (--s, --dim, --mx, --my)
    that this stylesheet reads: all painting happens in CSS.     */

.why-section {
  position: relative;
  background: var(--mist);
  /* The stack's last card carries its own breathing room; the extra
     1.5rem here used to push the following section 104px away. */
  padding-bottom: var(--space-section-md);
}
.why-section > .container { position: relative; z-index: 1; }
.why-head { max-width: 46rem; }

/* Atmosphere: slow arctic light behind the stack.
   Its own clipped layer, and NOT an ancestor of the sticky cards. */
.why-atmos {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.why-atmos i {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform, opacity;
}
.why-atmos i:nth-child(1) {
  left: -8%; top: 3%; width: 52%; height: 46%;
  background: radial-gradient(circle at 50% 50%, rgba(45,121,245,.13), rgba(45,121,245,0) 68%);
  animation: whyDriftA 26s ease-in-out infinite;
}
.why-atmos i:nth-child(2) {
  right: -10%; top: 32%; width: 58%; height: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(95,185,238,.16), rgba(95,185,238,0) 68%);
  animation: whyDriftB 34s ease-in-out infinite;
}
.why-atmos i:nth-child(3) {
  left: 20%; bottom: -6%; width: 56%; height: 40%;
  background: radial-gradient(circle at 50% 50%, rgba(201,231,248,.5), rgba(201,231,248,0) 70%);
  animation: whyDriftA 42s ease-in-out infinite reverse;
}
@keyframes whyDriftA {
  0%, 100% { transform: translate3d(0,0,0) scale(1);      opacity: .85; }
  50%      { transform: translate3d(3%,-4%,0) scale(1.12); opacity: 1; }
}
@keyframes whyDriftB {
  0%, 100% { transform: translate3d(0,0,0) scale(1.06);  opacity: .7; }
  50%      { transform: translate3d(-4%,3%,0) scale(1);   opacity: 1; }
}

/* ── The stack ───────────────────────────────────────────── */
.why-stack {
  --why-edge: 1.15rem;          /* height of each exposed layered edge */
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.why-card {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem + (var(--i, 0) * var(--why-edge)));
  z-index: calc(var(--i, 0) + 1);
  scroll-margin-top: calc(var(--header-h) + 2rem);
  overflow: hidden;
  border-radius: clamp(1.25rem, 2.4vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(8,20,32,.04),
    0 2px 10px rgba(8,20,32,.04),
    0 30px 64px -32px rgba(8,20,32,.32);
  transform: scale(var(--s, 1));
  transform-origin: 50% 0;
  will-change: transform;
}

/* Soft blue lighting inside the current card, nudged by the pointer. */
.why-card::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%; top: 0;
  width: 128%;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  transform: translate3d(calc(-50% + (var(--mx, 0) * 26px)), calc(-56% + (var(--my, 0) * 18px)), 0);
  background: radial-gradient(circle at 50% 50%,
              rgba(45,121,245,.11), rgba(45,121,245,.035) 42%, rgba(45,121,245,0) 66%);
  opacity: 0;
  transition: opacity 800ms var(--ease-out), transform 520ms var(--ease-out);
}
.why-card.is-active::before { opacity: 1; }

/* Veil: a card recedes as the next one rises over it. */
.why-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8,20,32,.09), rgba(8,20,32,.17));
  opacity: var(--dim, 0);
}

/* Keyboard access: a card receiving focus always comes forward. */
.why-card:focus-within {
  --s: 1 !important;
  --dim: 0 !important;
  z-index: 60;
}

.why-card-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  padding: clamp(2rem, 4.2vw, 4rem);
  min-height: clamp(30rem, 74vh, 44rem);
}

/* ── Copy column ─────────────────────────────────────────── */
.why-copy { max-width: 34rem; }

.why-eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.15rem;
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.why-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 1.75rem;
  padding: 0 .55rem;
  border-radius: var(--r-pill);
  background: var(--blue-100);
  color: var(--blue-700);
  font-size: .8125rem;
  letter-spacing: .06em;
}
.why-kicker { color: var(--ink-3); }

.why-card h3 {
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 2.9vw, 2.35rem);
  line-height: var(--lh-head);
  letter-spacing: -.022em;
  max-width: 21ch;
  text-wrap: balance;
}
.why-body {
  margin: 0;
  max-width: 45ch;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: var(--lh-body);
}

.why-metrics {
  list-style: none;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}
.why-metric {
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(168deg, #FFFFFF, var(--mist));
  box-shadow: 0 1px 2px rgba(8,20,32,.03), 0 12px 24px -18px rgba(8,20,32,.32);
  transform: translate3d(0,0,0);
}
.why-card.is-active .why-metric {
  animation: whyFloat 7s ease-in-out infinite;
  animation-delay: calc(var(--m, 0) * 900ms);
}
@keyframes whyFloat {
  0%, 100% { transform: translate3d(0,0,0); }
  50%      { transform: translate3d(0,-2.5px,0); }
}
.why-metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
}
.why-metric span {
  display: block;
  margin-top: .3rem;
  font-size: var(--fs-tiny);
  color: var(--ink-3);
}

a.why-cta { margin-top: clamp(1.5rem, 2.6vw, 2rem); }

/* ── Visual column ───────────────────────────────────────── */
.why-visual { position: relative; min-width: 0; }
.why-visual-inner {
  position: relative;
  transform: translate3d(calc(var(--mx, 0) * 7px), calc(var(--my, 0) * 7px), 0);
  transition: transform 420ms var(--ease-out);
  will-change: transform;
}

/* 01 · Price plate: sign-up rate and renewal rate, identical. */
.why-price {
  position: relative;
  overflow: hidden;
  padding: clamp(1.85rem, 3vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: clamp(1rem, 1.8vw, 1.5rem);
  background: linear-gradient(165deg, #FFFFFF, var(--frost));
  box-shadow: 0 1px 2px rgba(8,20,32,.03), 0 26px 54px -32px rgba(8,20,32,.38);
}
.why-price-sheen {
  position: absolute;
  inset: -20% -40%;
  pointer-events: none;
  background: linear-gradient(102deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform: translate3d(-55%, 0, 0);
  opacity: 0;
}
.why-card.is-active .why-price-sheen {
  opacity: 1;
  animation: whySheen 11s var(--ease-out) infinite;
}
@keyframes whySheen {
  0%        { transform: translate3d(-55%, 0, 0); }
  45%, 100% { transform: translate3d(55%, 0, 0); }
}
.why-price-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(.6rem, 2vw, 1.4rem);
}
.why-price-cell { text-align: center; }
.why-price-label {
  display: block;
  margin-bottom: .55rem;
  font-size: var(--fs-tiny);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.why-price-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}
.why-price-value em {
  font-style: normal;
  font-size: .4em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-3);
}
.why-price-equals {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 700;
  color: var(--blue-600);
  opacity: .8;
}
.why-card.is-active .why-price-equals { animation: whyEquals 5.5s ease-in-out infinite; }
@keyframes whyEquals {
  0%, 100% { opacity: .55; transform: scale(.95); }
  50%      { opacity: 1;   transform: scale(1); }
}
.why-price-note {
  position: relative;
  margin: clamp(1.3rem, 2.4vw, 1.8rem) 0 0;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--line-2);
  text-align: center;
  font-size: var(--fs-tiny);
  color: var(--ink-3);
}

/* 02 · Orbit: everything we run so the customer doesn't. */
.why-orbit {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 23rem;
  margin-inline: auto;
  display: grid;
  place-items: center;
}
.why-orbit-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid var(--line);
  transform: translate(-50%, -50%);
}
.why-orbit-ring-1 { width: 38%; height: 38%; border-color: var(--line-2); }
.why-orbit-ring-2 { width: 64%; height: 64%; border-style: dashed; }
.why-orbit-ring-3 { width: 92%; height: 92%; }
.why-orbit-sweep {
  position: absolute;
  top: 50%; left: 50%;
  width: 92%; height: 92%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
              rgba(45,121,245,0) 0deg, rgba(45,121,245,0) 244deg,
              rgba(45,121,245,.12) 326deg, rgba(95,185,238,.34) 357deg,
              rgba(45,121,245,0) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 44%, #000 46%);
  mask: radial-gradient(circle, transparent 44%, #000 46%);
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.why-card.is-active .why-orbit-sweep {
  opacity: 1;
  animation: whySpin 20s linear infinite;
}
@keyframes whySpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.why-orbit-core {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 1.5rem;
  color: var(--ice-100);
  background: linear-gradient(150deg, var(--navy-800), var(--navy-950));
  box-shadow: 0 20px 38px -20px rgba(8,20,32,.6), inset 0 1px 0 rgba(255,255,255,.14);
}
.why-chip { position: absolute; z-index: 2; }
/* The top and bottom chips are centred on the ring, which is safe: their
   width is symmetrical about left:50%. The side chips cannot be centred
   the same way. A shrink-to-fit absolute box centred at left:92% pushes
   half its own width past the orbit (measured at ~29px past the right
   edge at 1440 and ~34px at 768) so the Backups pill hung outside the
   visual and read as misaligned against its three neighbours. Anchor the
   side chips by their inner edge instead so all four sit inside the box
   at every width. This is the same rule the ≤640px block already used;
   it now applies everywhere, so that override no longer repeats it. */
.why-chip-1 { top: 6%;  left: 50%; transform: translate(-50%, -50%); }
.why-chip-2 { top: 50%; right: 0;  left: auto; transform: translateY(-50%); }
.why-chip-3 { top: 94%; left: 50%; transform: translate(-50%, -50%); }
.why-chip-4 { top: 50%; left: 0;   transform: translateY(-50%); }
.why-chip-in {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(8,20,32,.04), 0 14px 26px -18px rgba(8,20,32,.4);
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--ink-2);
}
.why-chip-in svg { color: var(--blue-600); flex: none; }
.why-card.is-active .why-chip-in {
  animation: whyFloat 8s ease-in-out infinite;
  animation-delay: calc(var(--m, 0) * 700ms);
}

/* 03 & 04 · Photography */
.why-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(1rem, 1.8vw, 1.5rem);
  border: 1px solid var(--line);
  background: var(--frost);
  box-shadow: 0 1px 2px rgba(8,20,32,.04), 0 32px 62px -36px rgba(8,20,32,.55);
}
.why-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.why-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8,20,32,0) 42%, rgba(8,20,32,.46));
}
.why-photo-inset {
  position: absolute;
  right: -1rem;
  bottom: -1.5rem;
  width: 46%;
  z-index: 3;
  border: 3px solid var(--paper);
  border-radius: clamp(.75rem, 1.4vw, 1.1rem);
  box-shadow: 0 26px 50px -26px rgba(8,20,32,.6);
  transform: translate3d(calc(var(--mx, 0) * 11px), calc(var(--my, 0) * 11px), 0);
  transition: transform 520ms var(--ease-out);
}
.why-photo-inset::after {
  background: linear-gradient(180deg, rgba(8,20,32,0) 55%, rgba(8,20,32,.3));
}

.why-photo-badge {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .9rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(8,20,32,.62);
  color: #EAF3FA;
  font-size: var(--fs-tiny);
  font-weight: 600;
}
.why-photo-badge i {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--sky-400);
  flex: none;
}
.why-card.is-active .why-photo-badge i { animation: whyPulse 3s ease-out infinite; }
@keyframes whyPulse {
  0%   { box-shadow: 0 0 0 0 rgba(95,185,238,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(95,185,238,0); }
  100% { box-shadow: 0 0 0 0 rgba(95,185,238,0); }
}

/* Arctic light across the datacenter photograph. */
.why-aurora {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.why-card.is-active .why-aurora { opacity: 1; }
.why-aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}
.why-aurora i:nth-child(1) {
  left: -18%; top: -34%; width: 82%; height: 92%;
  background: radial-gradient(circle at 50% 50%, rgba(95,185,238,.5), rgba(95,185,238,0) 64%);
  animation: whyAuroraA 17s ease-in-out infinite;
}
.why-aurora i:nth-child(2) {
  right: -22%; top: -24%; width: 76%; height: 84%;
  background: radial-gradient(circle at 50% 50%, rgba(201,231,248,.42), rgba(201,231,248,0) 64%);
  animation: whyAuroraB 23s ease-in-out infinite;
}
.why-aurora i:nth-child(3) {
  left: 22%; top: -44%; width: 62%; height: 74%;
  background: radial-gradient(circle at 50% 50%, rgba(45,121,245,.38), rgba(45,121,245,0) 60%);
  animation: whyAuroraA 29s ease-in-out infinite reverse;
}
@keyframes whyAuroraA {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(12%,9%,0) scale(1.24); }
}
@keyframes whyAuroraB {
  0%, 100% { transform: translate3d(0,0,0) scale(1.16); }
  50%      { transform: translate3d(-14%,11%,0) scale(1); }
}

/* ── Reveal (only armed once JS confirms IntersectionObserver) ── */
.why-stack.why-observe .why-card .why-copy,
.why-stack.why-observe .why-card .why-visual {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
}
.why-stack.why-observe .why-card .why-visual { transition-delay: 110ms; }
.why-stack.why-observe .why-card.is-revealed .why-copy,
.why-stack.why-observe .why-card.is-revealed .why-visual {
  opacity: 1;
  transform: none;
}

/* ── Tablet & mobile: large vertical cards, no stacking ──── */
@media (max-width: 1023px) {
  .why-stack { gap: 1.25rem; }
  .why-card {
    position: static;
    transform: none;
    box-shadow: 0 1px 2px rgba(8,20,32,.04), 0 20px 44px -28px rgba(8,20,32,.3);
  }
  .why-card::after { display: none; }
  .why-card-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 5vw, 2.5rem);
    min-height: 0;
    padding: clamp(1.75rem, 6vw, 2.75rem);
  }
  .why-copy { max-width: none; }
  .why-card h3 { max-width: 24ch; }
  .why-body { max-width: 60ch; }
  /* Stacked cards give the visual the full column, so the orbit keeps its
     full 23rem. Capping it at 19rem here squeezed the ring until the side
     pills (anchored to its edges) collided with the centre tile. */
  .why-photo-inset { width: 42%; right: -.5rem; bottom: -1rem; }
}
@media (max-width: 460px) {
  .why-metrics { grid-template-columns: minmax(0, 1fr); }
  .why-eyebrow { flex-wrap: wrap; gap: .5rem; }
  .why-photo-inset { display: none; }
}

/* ── Reduced motion: keep the layout, drop the movement ──── */
@media (prefers-reduced-motion: reduce) {
  .why-card {
    position: static;
    transform: none !important;
  }
  .why-card::after { display: none; }
  .why-card::before { opacity: .55; transform: translate3d(-50%, -56%, 0) !important; }
  .why-atmos i,
  .why-aurora i,
  .why-orbit-sweep,
  .why-price-sheen,
  .why-price-equals,
  .why-metric,
  .why-chip-in,
  .why-photo-badge i { animation: none !important; }
  .why-price-sheen { opacity: 0; }
  .why-orbit-sweep { opacity: .85; }
  .why-aurora { opacity: .8; }
  .why-visual-inner,
  .why-photo-inset { transform: none !important; }
  .why-stack.why-observe .why-card .why-copy,
  .why-stack.why-observe .why-card .why-visual { opacity: 1; transform: none; }
}

/* ── 5 · Migration ─────────────────────────────────────── */
.migration-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.mig-steps { display: grid; gap: 0; counter-reset: step; }
.mig-step {
  position: relative;
  display: flex;
  gap: 1.1rem;
  padding: 1.05rem 0 1.05rem 0;
}
.mig-step + .mig-step { border-top: 1px dashed var(--line-2); }
.mig-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--ice-100);
  border: 1px solid var(--ice-200);
  color: var(--blue-700);
  font-weight: 700;
  font-size: var(--fs-small);
  font-family: var(--font-display);
}
.mig-step strong { display: block; margin-bottom: .15rem; }
.mig-step p { font-size: var(--fs-small); color: var(--ink-2); }
.mig-note {
  margin-top: 1.5rem;
  font-size: var(--fs-tiny);
  color: var(--ink-3);
  max-width: 40rem;
}
/* Migration CTA: was an inline style="margin-top:1.5rem" on the <p>;
   moved to a class so the mobile pass can re-centre it without an
   !important override. The rendered desktop value is unchanged. */
.mig-cta { margin-top: 1.5rem; }
.mig-visual { position: relative; }
.mig-photo {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}
.mig-photo img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.mig-badge {
  position: absolute;
  bottom: 1.4rem;
  left: -1.4rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--navy-900);
  color: #fff;
  border-radius: var(--r-md);
  padding: .85rem 1.2rem;
  box-shadow: var(--shadow-panel);
}
.mig-badge .ico { color: var(--sky-400); }
.mig-badge strong { display: block; font-size: var(--fs-small); line-height: 1.3; }
.mig-badge small { font-size: var(--fs-tiny); color: #8FA9C0; }

@media (max-width: 900px) {
  .migration-grid { grid-template-columns: 1fr; }
  .mig-badge { left: 1rem; }
}

/* ── 6 · Company proof ─────────────────────────────────── */
.company-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.company-photos { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.company-photo { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.company-photo img { width: 100%; height: 100%; object-fit: cover; }
.company-photo-wide { grid-column: 1 / -1; }
.company-photo-wide img { aspect-ratio: 16 / 9; }
.company-photo-sq img { aspect-ratio: 4 / 3; }

.company-copy h2 { margin-bottom: 1.1rem; }
.company-copy .lead { margin-bottom: 1.75rem; }
.timeline { display: grid; gap: .8rem; margin-bottom: 2rem; }
.timeline li { display: flex; gap: 1rem; align-items: baseline; font-size: var(--fs-small); color: var(--ink-2); }
.timeline .t-year {
  flex: none;
  width: 3.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--blue-600);
}
.company-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.company-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.company-stats span { font-size: var(--fs-tiny); color: var(--ink-3); line-height: 1.35; display: block; }

/* 2026-08-17: compact benefit group replacing the homepage timeline.
   Quiet pills, deliberately smaller than a feature grid. */
.company-points {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.5rem 0 1.25rem;
}
.company-points li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .9rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--ink-2);
}
.company-points .ico { color: var(--blue-600); }
.company-note { font-size: var(--fs-small); color: var(--ink-3); margin-bottom: 1.25rem; }

@media (max-width: 900px) {
  .company-grid { grid-template-columns: 1fr; }
  .company-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── 7 · Customer logos ────────────────────────────────── */
.logos-section { padding-block: clamp(3rem, 6vw, 4.5rem); }
.logos-head { text-align: center; margin-bottom: 2.25rem; }
.logos-head h2 { font-size: 1.05rem; font-family: var(--font-body); font-weight: 600; color: var(--ink-2); letter-spacing: .01em; }
.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem 3.5rem;
}
.logo-row img {
  height: 2.5rem;
  width: auto;
  filter: grayscale(1) brightness(0) opacity(.45);
  transition: filter var(--dur-med) var(--ease-out);
}
.logo-row img:hover { filter: none; }
@media (max-width: 640px) {
  .logo-row { gap: 1.75rem 2.25rem; }
  .logo-row img { height: 2rem; }
}

/* ── 8 · Reviews (legacy static grid) ──────────────────── */
/* ⚠ The HOMEPAGE no longer uses these rules. It renders the .rv-*
   carousel defined directly below. This block is still live for
   why-us.php, which loads home.css specifically to reuse .review-card
   (see why-us.php line 20). Do not delete it while that page depends
   on it, and do not "unify" the two: the why-us cards are a static
   three-up proof grid, the homepage cards are compact slides. */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2.25rem 2.1rem 1.9rem;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
/* Brand hairline: the cyan→blue gradient of the mark */
.review-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2.1rem;
  width: 3rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--sky-400), var(--blue-600));
}
.review-head {
  margin-bottom: 1.1rem;
}
.review-stars { display: inline-flex; gap: .2rem; color: var(--star); }

/* The testimonial is the focal element: an editorial pull-quote, not
   a caption. A hanging quotation mark anchors it; generous size, line
   height and air do the work (not brute-force scale). The person's
   words are byte-identical to the source; only the framing quotes are
   now drawn in CSS. */
.review-card blockquote {
  flex: 1;
  position: relative;
  margin: 0;
  padding-top: 2.4rem;
  font-size: 1.2rem;
  line-height: 1.6;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: pretty;
}
.review-card blockquote::before {
  content: "\201C";
  position: absolute;
  top: 0.35rem;
  left: -0.1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 0;
  color: var(--ice-200);
  pointer-events: none;
}
.review-card blockquote strong { color: var(--ink); font-weight: 650; }

/* Attribution: pure typography. Name → relationship → platform, set
   in a clear three-step hierarchy under a hairline. No avatar, no
   decoration; the platform label carries the trust the circles used to. */
.review-meta {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  margin-top: 1.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.review-name {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.review-rel {
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.review-src {
  margin-top: .55rem;
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 960px) {
  .reviews-grid { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
}

/* ── 8b · Reviews carousel (.rv-*) · homepage ───────────────
   A compact, quiet testimonial rail. Deliberately NOT a loud
   marketing carousel: no avatars, no oversized pull-quote glyph,
   no marquee. Cards are tight enough that three read as evidence
   rather than as three billboards.

   Mechanism: the viewport is a real scroll container with CSS
   scroll-snap, so with JavaScript disabled every review is still
   reachable by scroll, swipe, trackpad and keyboard. The arrows
   and dots are progressive enhancement and stay [hidden] until
   home.js confirms there is something to page through.

   How many cards are visible is stated once, as --rv-n, which both
   the slide width and home.js read. Change it in one place. */
.rv {
  --rv-n: 3;
  --rv-gap: 1.25rem;
  /* Line clamp for .rv-quote, declared here so a page can tighten it
     without a second copy of the quote rule. 10 is the homepage
     guardrail value this component shipped with; do not change it. */
  --rv-clamp: 10;
  position: relative;
}

/* Compact rail (/why-us/, 2026-08-19). Same component, shorter cards:
   the quote clamps sooner so three testimonials read as a scannable
   strip rather than three tall tiles, and reviews.js offers a
   "Read more" on any card the clamp actually cuts. The homepage does
   NOT take this class and is unaffected. */
.rv--compact { --rv-clamp: 6; }

.rv-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Stop a horizontal fling from chaining into browser back-navigation. */
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  /* Negative-margin gutter: card shadows and focus rings need room to
     breathe, but a scroll container clips them. Pad, then pull back so
     the cards still line up with the container edge. */
  padding: .5rem .4rem 1rem;
  margin: -.5rem -.4rem -1rem;
  /* Inset the snapport by that same gutter, so a slide snaps flush
     with the container edge rather than 6px inside it. Otherwise a
     programmatic scroll lands one gutter off and the snap visibly
     tugs it back. */
  scroll-padding-inline: .4rem;
  border-radius: var(--r-md);
  scrollbar-width: thin;
}
.rv-viewport:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}
/* Once the controls exist the scrollbar is redundant chrome. Before
   that it is the only affordance, so it stays. */
.rv.is-ready .rv-viewport { scrollbar-width: none; }
.rv.is-ready .rv-viewport::-webkit-scrollbar { width: 0; height: 0; }

.rv-track {
  display: flex;
  gap: var(--rv-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rv-slide {
  flex: 0 0 calc((100% - (var(--rv-n) - 1) * var(--rv-gap)) / var(--rv-n));
  display: flex;
  scroll-snap-align: start;
}

.rv-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 1.35rem 1.4rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
}
.rv-stars {
  display: flex;
  gap: .1rem;
  margin-bottom: .7rem;
  color: var(--star);
}
/* Optional review fields (2026-07-28). Every one renders only when the
   source evidences it (see includes/reviews.php). They are styled to sit
   quietly around the quote, which stays the focus of the card. */
.rv-title {
  margin: 0 0 .45rem;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ink);
}
.rv-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: .65rem 0 0;
  font-size: var(--fs-tiny);
}
.rv-excerpt-tag {
  display: inline-flex;
  align-items: center;
  padding: .1rem .4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rv-more a { font-weight: 600; color: var(--blue-600); }
.rv-src-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
.rv-date { font-size: var(--fs-tiny); color: var(--ink-3); }
.rv-verified {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ok-600);
}
.rv-verified .ico { width: 12px; height: 12px; }
.rv-quote {
  flex: 1;
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  letter-spacing: -0.004em;
  color: var(--ink);
  text-wrap: pretty;
  /* Guardrail, not a design decision: none of the approved reviews
     reach this on the homepage. It exists so one unusually long future
     testimonial cannot inflate every card in the rail. The value comes
     from --rv-clamp on .rv, so /why-us/ can run a tighter rail without
     restating this rule.

     This is a VISUAL clamp only. The full quote stays in the DOM and in
     the accessibility tree, so assistive technology reads the whole
     review whether or not it is expanded, and no customer's words are
     ever shortened to make a card fit (includes/reviews.php). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--rv-clamp);
  line-clamp: var(--rv-clamp);   /* standard property, for when the -webkit- prefix retires */
  overflow: hidden;
}
.rv-card.is-expanded .rv-quote {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* "Read more" · inserted by reviews.js only where the clamp bites, so
   it is never a control that does nothing. Sized to the WCAG 2.2 24px
   target minimum via padding, and styled as a quiet text button rather
   than a second call to action inside a testimonial. */
.rv-readmore {
  align-self: flex-start;
  margin-top: .5rem;
  padding: .2rem 0;
  min-height: 1.5rem;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--blue-600);
  cursor: pointer;
}
.rv-readmore:hover { text-decoration: underline; text-underline-offset: 3px; }
.rv-readmore:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; border-radius: 4px; }
.rv-meta {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
}
.rv-name {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.rv-rel { font-size: var(--fs-tiny); color: var(--ink-2); }
.rv-src {
  margin-top: .3rem;
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Controls ── */
.rv-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.6rem;
}
.rv-nav[hidden] { display: none; }
.rv-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.rv-arrow:hover { color: var(--blue-600); border-color: var(--blue-600); }
.rv-arrow:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }

.rv-dots { display: flex; align-items: center; gap: .3rem; }
.rv-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 28px hit area around a 7px mark, comfortably over the WCAG 2.2
     24×24 target minimum without a heavy visual footprint. */
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  cursor: pointer;
}
.rv-dot::before {
  content: "";
  width: .4375rem;
  height: .4375rem;
  border-radius: var(--r-pill);
  background: var(--line-2);
  transition: width .25s ease, background-color .25s ease;
}
.rv-dot:hover::before { background: var(--ink-3); }
.rv-dot[aria-current="true"]::before { width: 1.15rem; background: var(--blue-600); }
.rv-dot:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 1px; }

/* Smaller desktop / tablet: two across. */
@media (max-width: 1099.98px) {
  .rv { --rv-n: 2; }
}

/* Mobile: one card at a time. Heading, controls and pagination are
   centred by the section; the testimonial itself stays left-aligned
   because it is reading material, and so is the attribution under it
   so the two read as one left-hung block. */
@media (max-width: 767.98px) {
  .rv { --rv-n: 1; --rv-gap: .9rem; }
  .rv-card { padding: 1.25rem 1.2rem 1.1rem; }
  .rv-quote, .rv-meta { text-align: left; }
  .rv-nav { gap: .75rem; margin-top: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* html sets scroll-behavior:smooth, which would make even an
     explicitly instant scrollTo animate. Opt this container out so
     reduced-motion paging lands immediately. */
  .rv-viewport { scroll-behavior: auto; }
  .rv-dot::before { transition: none; }
  .rv-arrow { transition: none; }
}

/* ── 8c · Review-platform row under the rail ────────────────
   FIXED 2026-08-19. .trust-row is a flex row with no justify-content,
   which is right in the hero (a left-aligned copy column) and wrong
   under a centred carousel: on /why-us/ it left Trustpilot pinned to
   the container's left edge with G2 beside it and ~600px of nothing to
   the right, so the two read as unrelated strays rather than one row.

   This modifier centres the pair as a group, gives them one deliberate
   gap, and lets them wrap into centred rows on narrow screens instead
   of stretching. It also re-points the component's colour variables:
   the defaults (--silver-100 / --steel-400) are the carbon-hero values,
   and --steel-400 on --mist measures about 2.9:1, under the AA floor.

   No figure is touched. What each platform prints is decided in
   includes/trust-platforms.php and nowhere else. */
.trust-row--center {
  justify-content: center;
  gap: .5rem clamp(1.5rem, 3.5vw, 2.5rem);
  margin-top: 1.75rem;
  --trust-name-color: var(--ink);
  --trust-meta-color: var(--ink-2);
  --trust-rule-color: var(--line-2);
  --trust-star-empty: #DCDCE6;
  --trust-star-glyph: #fff;
}
/* The row belongs to the rail above it, so it keeps the rail's rhythm
   rather than the section's. */
.rv + .trust-row--center { margin-top: 1.5rem; }

@media (max-width: 560px) {
  /* Two centred lines read better than one cramped one at this width.
     flex-wrap already does it; this only opens the vertical gap so the
     two items do not look like one broken line. */
  .trust-row--center { gap: .9rem 1.25rem; }
}

@media (max-width: 400px) {
  /* .trust-meta is nowrap, which is right beside a hero CTA and wrong at
     320px: "Read our reviews on Trustpilot" plus the star meter measures
     ~2px wider than the container there and pushed the row out. Let that
     one string wrap and centre instead. The meter, the figures and the
     link target are untouched. */
  .trust-row--center .trust-meta { white-space: normal; text-align: center; }
  .trust-row--center .trust-item-inner { align-items: center; }
}

/* ── 9 · Support ───────────────────────────────────────── */
.support-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.support-photo {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}
.support-photo img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; }
.support-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.support-channel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow-soft);
}
.support-channel .ico { color: var(--blue-600); margin-bottom: .6rem; }
.support-channel strong { display: block; font-size: var(--fs-small); margin-bottom: .15rem; }
.support-channel span { font-size: var(--fs-tiny); color: var(--ink-3); line-height: 1.45; display: block; }
.support-note { margin-top: 1.25rem; font-size: var(--fs-tiny); color: var(--ink-3); }
@media (max-width: 900px) {
  .support-grid { grid-template-columns: 1fr; }
  .support-channels { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .support-channels { grid-template-columns: 1fr; }
}

/* ── 10 · Security ─────────────────────────────────────── */
.security-section {
  background:
    radial-gradient(60rem 26rem at 110% 0%, rgba(95, 185, 238, .14), transparent 55%),
    radial-gradient(40rem 22rem at -10% 100%, rgba(21, 96, 232, .12), transparent 55%),
    var(--navy-950);
  color: #D9E6F2;
}
.security-section h2 { color: #F4F9FD; }
.security-section .lead { color: #A8BFD3; }
.security-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.security-list { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.5rem; margin-top: .5rem; }
.security-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-small); color: #C0D3E4; }
.security-list .ico { color: var(--ok-600); flex: none; margin-top: .15rem; }
.security-proof {
  margin-top: 1.75rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--navy-700);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .04);
  font-size: var(--fs-tiny);
  color: #8FA9C0;
  line-height: 1.6;
}
.security-cta { margin-top: 1.75rem; display: flex; gap: .8rem; flex-wrap: wrap; }
@media (max-width: 860px) {
  .security-grid { grid-template-columns: 1fr; }
  .security-list { grid-template-columns: 1fr; }
}

/* ── 11 · Pro services ─────────────────────────────────── */
.pro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-card-gap); }
.pro-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.75rem 1.6rem;
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.pro-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.pro-card .pro-ico {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--ice-100), var(--blue-100));
  border: 1px solid var(--ice-200);
  color: var(--blue-600);
  margin-bottom: 1.1rem;
}
.pro-card h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.pro-card p { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: 1.1rem; }
.pro-card .pro-price { margin-top: auto; font-size: var(--fs-small); font-weight: 600; color: var(--ink); padding-top: .75rem; border-top: 1px solid var(--line); }
.pro-card .pro-price small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--fs-tiny); }
.pro-emergency {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem 1rem;
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  color: var(--ink-2);
  text-align: center;
}
.pro-emergency .ico { color: var(--blue-600); }
.pro-actions { display: flex; justify-content: center; margin-top: 2rem; }
@media (max-width: 900px) {
  .pro-grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
}

/* ── 12 · Final CTA ────────────────────────────────────── */
.final-cta {
  position: relative;
  text-align: center;
  background: linear-gradient(180deg, var(--paper), var(--mist));
  overflow: clip;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 60%;
  background: radial-gradient(48rem 16rem at 50% 100%, rgba(95, 185, 238, .16), transparent 70%);
  pointer-events: none;
}
.final-cta-inner { position: relative; max-width: 46rem; margin-inline: auto; }
.final-cta h2 { font-size: clamp(2.1rem, 4vw, 3.1rem); margin-bottom: 1.25rem; }
.final-cta .lead { margin-bottom: 2.25rem; }
.final-cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-bottom: 1.5rem; }
.final-cta-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }

/* ── Responsive hero ───────────────────────────────────── */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy h1 { max-width: none; }
}


/* ── Hero trial announcement chip (dark variant) ───────── */
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .32rem .45rem .32rem .9rem;
  margin-bottom: 1.1rem;
  border-radius: var(--r-pill);
  background: rgba(95, 185, 238, .12);
  border: 1px solid rgba(95, 185, 238, .28);
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: #BCE0F7;
}
.hero-chip:hover { text-decoration: none; border-color: rgba(95, 185, 238, .55); }
.hero-chip > span { white-space: nowrap; }
@media (max-width: 420px) {
  .hero-chip { font-size: .8125rem; gap: .45rem; }
}
.hero-chip .hero-chip-cta {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  color: var(--blue-700);
  box-shadow: 0 2px 8px rgba(2, 8, 16, .35);
}
.hero-chip:hover .hero-chip-cta .ico { transform: translateX(2px); }
.hero-chip .ico { transition: transform var(--dur-fast) var(--ease-out); }

/* ── Trusted-by logo band (label left, logos flowing) ────
   Sits tight against the trust chips below: logos + proof points
   read as ONE quiet evidence zone between the dark hero and the
   plans, instead of two separate "trust us" moments. */
/* ── Customer logos: centered editorial intro over a full-width marquee.
   The logos are the hero; the copy simply introduces them. ── */
.logo-band { padding-block: var(--space-section-xl) var(--space-band); }
.logo-band-intro {
  max-width: 46rem;
  margin: 0 auto clamp(2.1rem, 4vw, 3rem);
  text-align: center;
}
.logo-band-intro .eyebrow { justify-content: center; }
.logo-band-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: .55rem 0 .7rem;
  text-wrap: balance;
}
.logo-band-sub {
  font-size: var(--fs-body);
  color: var(--ink-2);
  max-width: 40rem;
  margin-inline: auto;
  line-height: 1.6;
  text-wrap: pretty;
}
/* Smooth continuous marquee: the track holds two identical logo sets and
   slides exactly one set-width (-50%) on a linear loop. Soft edge masks
   fade logos in/out; hover pauses the scroll and restores full colour. */
.logo-band-scroller {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-band-track {
  display: flex;
  width: max-content;
  animation: logoScroll 52s linear infinite;
}
.logo-band-track:hover { animation-play-state: paused; }
.logo-band-set {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 5.5vw, 5rem);
  padding-inline-end: clamp(3rem, 5.5vw, 5rem);
}
.logo-band-logos img {
  height: 2.5rem;
  width: auto;
  object-fit: contain;
  /* brightness(0) flattens every logo to a pure silhouette first, so
     light and dark marks all carry identical optical weight */
  filter: grayscale(1) brightness(0);
  opacity: .5;
  transition: filter var(--dur-med), opacity var(--dur-med);
}
/* Optical normalization: compact square marks need a touch more height
   to carry the same visual weight as wide wordmarks.
   2026-08-17 audit (per-logo ink measurement): every other mark's artwork
   fills its canvas height 100%, but sol-logo.png's ink is only 69px of a
   120px canvas (57.5%). At the old 3rem box its visible mark stood ~28px
   against the wordmarks' 40px, and the "Mental Health" line was illegible.
   4.75rem box × 57.5% ink ≈ 44px visible: level with the wordmarks, with
   the small compact-mark bonus, and still visually smaller than Optum/UCF.
   If the artwork is ever re-exported trimmed, drop this back to ~3rem. */
.logo-band-logos img.logo-compact,
.logo-row img.logo-compact { height: 4.75rem; }
/* Full colour on hover: desktop / fine-pointer only */
@media (hover: hover) {
  .logo-band-logos img:hover { filter: none; opacity: 1; }
}
@keyframes logoScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-band-track { animation: none; width: auto; }
  .logo-band-scroller { -webkit-mask-image: none; mask-image: none; }
  .logo-band-set { flex-wrap: wrap; justify-content: center; gap: 1.75rem 2.75rem; padding-inline-end: 0; }
  .logo-band-set[aria-hidden="true"] { display: none; }
}
@media (max-width: 760px) {
  /* Pin the scroller to the container width so the max-content track
     can never create page-wide horizontal scroll. */
  .logo-band-scroller { width: 100%; }
  .logo-band-logos img { height: 2rem; }
  .logo-band-logos img.logo-compact,
  .logo-row img.logo-compact { height: 3.8rem; }
}

/* ── Expanding showcase canvas (security section) ──────── */
/* Starts as a centered rounded container; JS drives --p 0→1
   as it scrolls into view, easing it out to full width.
   No JS / reduced motion: stays an elegant inset container.
   2026-08-17 refinement: the initial inset now tracks the content
   column: max(2rem, half the space outside --container), so the
   panel begins at content width (1216px at 1440) instead of the old
   5vw sliver (1296px at 1440), and the compact → full-width journey
   is visible. Timing/easing of --p live in home.js. */
.showcase { --p: 0; --showcase-inset: max(2rem, (100vw - var(--container)) / 2); }
.showcase-canvas {
  margin-inline: calc((1 - var(--p)) * var(--showcase-inset));
  border-radius: calc((1 - var(--p)) * var(--r-xl));
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .showcase-canvas { margin-inline: var(--showcase-inset); border-radius: var(--r-xl); }
}


/* ── Hero entrance (subtle, once, JS-gated) ────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > * {
    opacity: 0;
    transform: translateY(14px);
    animation: heroRise .5s var(--ease-out) forwards;
  }
  .js .hero-copy > *:nth-child(1) { animation-delay: .04s; }
  .js .hero-copy > *:nth-child(2) { animation-delay: .1s; }
  .js .hero-copy > *:nth-child(3) { animation-delay: .16s; }
  .js .hero-copy > *:nth-child(4) { animation-delay: .22s; }
  .js .hero-copy > *:nth-child(5) { animation-delay: .28s; }
  .js .hero-visual {
    opacity: 0;
    animation: heroFade .6s var(--ease-out) .18s forwards;
  }
}
@keyframes heroRise { to { opacity: 1; transform: none; } }
@keyframes heroFade { to { opacity: 1; } }


/* ═══════════════════════════════════════════════════════════
   MOBILE COMPOSITION PASS  ·  homepage only  ·  ≤ 767.98px
   ───────────────────────────────────────────────────────────
   Scope note: home.css is loaded ONLY by index.php, and every
   rule below lives inside a max-width query, so nothing here
   can reach the desktop breakpoint or any other page.

   The rule the whole block follows:
     · MARKETING voice  → centered (eyebrows, headings, leads,
       CTAs, promotional card copy, decorative icons, metrics)
     · READING material → left  (plan feature lists, spec and
       security checklists, timelines, numbered procedures,
       testimonials, long-form notes, footer navigation)

   The Final CTA section was already composed this way; it is
   the model the rest of the page is now tuned against.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* ── Shared primitives ─────────────────────────────────── */

  /* Every centered eyebrow: keep the brand peak married to the
     label and let a long label break as a centered two-liner
     instead of orphaning the glyph beside it. */
  .ba-m-center .eyebrow,
  .section-head-center .eyebrow,
  .hero-copy .eyebrow,
  .why-head .eyebrow,
  .company-copy .eyebrow,
  .trial-band > div .eyebrow,
  .security-grid .section-head .eyebrow,
  .support-grid .section-head .eyebrow,
  .migration-grid .section-head .eyebrow {
    display: block;
    justify-content: center;
    text-align: center;
  }
  /* .eyebrow is an inline-flex row, so a label that wraps leaves the
     brand peak vertically centered against the far-left edge while the
     words centre away from it. Switching to a text block and making the
     peak an inline marker keeps them together on the first line. */
  .ba-m-center .eyebrow::before,
  .section-head-center .eyebrow::before,
  .hero-copy .eyebrow::before,
  .why-head .eyebrow::before,
  .company-copy .eyebrow::before,
  .trial-band > div .eyebrow::before,
  .security-grid .section-head .eyebrow::before,
  .support-grid .section-head .eyebrow::before,
  .migration-grid .section-head .eyebrow::before {
    display: inline-block;
    margin-right: .55rem;
    vertical-align: -.02em;
  }

  /* Standalone CTAs and button groups: one column, one shared
     width, centered, with matching air above and below. A single
     button gets the same treatment as a pair so the rhythm of
     the page never changes shape. */
  .hero-ctas,
  .trial-cta,
  .security-cta,
  .final-cta-buttons,
  .mig-cta,
  .pro-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
  }
  .hero-ctas > .btn,
  .trial-cta > .btn,
  .security-cta > .btn,
  .final-cta-buttons > .btn,
  .mig-cta > .btn,
  .pro-actions > .btn {
    width: 100%;
    max-width: 20.5rem;
    justify-content: center;
    text-align: center;
  }

  /* ── 1 · Hero ──────────────────────────────────────────── */
  /* `1fr` is minmax(auto, 1fr), so the column inherited the
     min-content width of the nowrap trust chip and pushed the whole
     hero past the right edge on narrow phones. The section's
     overflow:clip hid the symptom rather than fixing it. Floor the
     column at zero and let the chip wrap instead. */
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    padding-block: clamp(1.75rem, 6vw, 2.5rem) clamp(2rem, 7vw, 3rem);
  }
  .hero-copy { text-align: center; }
  .hero-copy h1,
  .hero-copy .lead { margin-inline: auto; }
  .hero-copy .lead { max-width: 30rem; margin-bottom: 1.85rem; }
  .hero-ctas { margin-block: 0 1.85rem; }
  .hero-proof { justify-content: center; }
  /* The hero copy centres here, so the review links centre with it.
     Otherwise the row hangs off the left of a centred column. */
  .hero .trust-row { justify-content: center; }
  /* The provenance caption is part of the picture, not a list.
     Dropping the flex row lets the pin sit inline with the first
     word instead of being stranded at the far left while the
     text centres away from it. */
  .hero-photo-caption { display: block; text-align: center; padding: 2.5rem 1.35rem 1.05rem; }
  .hero-photo-caption .ico { display: inline-block; vertical-align: -.2em; margin-right: .3rem; }

  /* ── 2 · Trust bar ─────────────────────────────────────── */
  /* Five proof points at five different widths read as an
     accident. One shared width turns them into a deliberate
     stack; icon + copy stay left because each is a labelled
     fact, not a slogan. */
  .trust-bar { padding-block: clamp(1.25rem, 4vw, 2rem) clamp(3rem, 8vw, 4rem); }
  .trust-chips {
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
    max-width: 21.5rem;
    margin-inline: auto;
  }
  .trust-chip {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    padding: .75rem 1.1rem .75rem .8rem;
  }

  /* ── 3 · Plans ─────────────────────────────────────────── */
  /* The tablist wrapped 2 + 1 and read as a broken row. A single
     full-width column of pills is unambiguous at 390px. */
  .plans-tablist-wrap { margin-bottom: 2rem; }
  .plans-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .3rem;
    width: 100%;
    max-width: 21.5rem;
    border-radius: var(--r-lg);
  }
  .plans-tab { border-radius: var(--r-pill); text-align: center; }

  /* Plan cards, their feature lists and the platform notes stay
     left: they are specifications and long-form reading. */

  /* The honesty strip was the one real breakage on mobile: each
     item is an inline-flex row, so <strong> and the trailing
     clause became two competing columns ~150px wide and every
     line wrapped three times against a floating em dash. Normal
     inline flow fixes the wrapping; centering finishes it. */
  .plans-honesty {
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    text-align: center;
  }
  .plans-honesty span { display: block; max-width: 22rem; }
  .plans-honesty span .ico { display: inline-block; vertical-align: -.15em; margin-right: .3rem; }

  /* ── 3b · 30-day trial band ────────────────────────────── */
  .trial-band { padding: 2.25rem 1.4rem 2rem; }
  .trial-band > div:first-child { text-align: center; }
  .trial-cta { margin-top: 1.85rem; gap: 1.15rem; }
  .trial-renewal { max-width: 22rem; text-align: center; }
  /* The rail inset was squeezing the copy column to ~150px and
     forcing five-line wraps. The steps themselves stay left:
     they are a sequence, and sequences read left. */
  .trial-band .trial-path {
    padding: 1.85rem 1.4rem;
    gap: 1.9rem;
  }
  .trial-stop { gap: .95rem; }
  .trial-stop small { max-width: none; }

  /* ── 4 · Why Blue Arctic ───────────────────────────────── */
  .why-head { text-align: center; margin-inline: auto; }
  .why-head .lead { margin-inline: auto; }
  /* These four are marketing cards end to end: index badge,
     kicker, headline, body, metrics and CTA all resolve to the
     card's own centre line. */
  .why-copy { text-align: center; }
  .why-eyebrow { justify-content: center; }
  .why-card h3,
  .why-body { margin-inline: auto; }
  .why-card h3 { max-width: 20ch; }
  .why-metric { text-align: center; }
  .why-metrics { margin-top: 1.9rem; }
    /* The card links wrap to two lines at this width. As a flex row the
       arrow gets stranded against the right edge of the second line, so
       the link becomes a centered text block and the arrow flows inline
       after the last word instead. */
    a.why-cta {
      display: block;
      text-align: center;
      margin-inline: auto;
      font-size: var(--fs-small);
    }
    a.why-cta .ico {
      display: inline-block;
      vertical-align: -.15em;
      margin-left: .35rem;
    }

    /* Let the orbit take the full card width at phone sizes. The ring is
       only as wide as the card here, so the side pills and the centre tile
       are competing for the same horizontal band: tighten the pills and
       ease the tile down a size so the two never touch. The side-chip edge
       anchoring itself now lives in the base rules and applies everywhere. */
    .why-orbit { max-width: none; }
    .why-orbit-core { width: 4.5rem; height: 4.5rem; border-radius: 1.3rem; }
    .why-chip-in { gap: .32rem; padding: .4rem .6rem; font-size: .8125rem; }

    /* Sub-375px phones give the ring barely 260px to work with. One more
       small step down on the tile and the pills keeps them apart there
       too, rather than letting the widest pill graze the tile. */
    @media (max-width: 400px) {
      .why-orbit-core { width: 4rem; height: 4rem; border-radius: 1.15rem; }
      .why-orbit-core svg { width: 22px; height: 22px; }
      .why-chip-in { gap: .28rem; padding: .36rem .52rem; }
      .why-chip-in svg { width: 14px; height: 14px; }
    }

    /* Below ~340px the ring simply cannot fit a pill either side of the
       tile on the same line. Lift the side pills off the tile's band
       rather than letting the widest one cross it. */
    @media (max-width: 340px) {
      .why-chip-2 { top: 26%; }
      .why-chip-4 { top: 74%; }
    }

  /* ── 5 · Migration ─────────────────────────────────────── */
  .migration-grid .section-head {
    text-align: center;
    margin-inline: auto;
    margin-bottom: 2rem !important;
  }
  .migration-grid .section-head .lead { margin-inline: auto; }
  /* Numbered procedure and its footnote stay left. */
  .mig-cta { margin-top: 2rem; }
  /* The badge was pinned to the photo's left edge; on mobile it
     resolves to the photo's centre instead. */
  .mig-badge {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 1rem;
    width: max-content;
    max-width: calc(100% - 2rem);
  }

  /* ── 6 · Company ───────────────────────────────────────── */
  .company-copy { text-align: center; }
  .company-copy .lead { margin-inline: auto; }
  .company-points { justify-content: center; }
  /* Dated milestones are a table of record: left. */
  .timeline { text-align: left; }
  .company-stats { text-align: center; gap: 1.25rem 1rem; }

  /* ── 8 · Reviews ───────────────────────────────────────── */
  /* Head is already centered; the quotes themselves are
     long-form testimony and stay left. Only the card's own
     padding is eased so the pull-quote is not pinched. */
  .review-card { padding: 2rem 1.5rem 1.75rem; }
  .review-card::before { left: 1.5rem; }

  /* ── 9 · Support ───────────────────────────────────────── */
  .support-grid .section-head { text-align: center; margin-inline: auto; }
  .support-grid .section-head .lead { margin-inline: auto; }
  /* Four matched marketing tiles: icon, label and description
     share one centre line instead of three left edges. */
  .support-channels { margin-top: 2.25rem; gap: .85rem; }
  .support-channel { text-align: center; padding: 1.4rem 1.25rem; }
  .support-channel .ico { display: block; margin: 0 auto .65rem; }
  .support-note { margin-top: 1.5rem; text-align: center; }

  /* ── 10 · Security ─────────────────────────────────────── */
  .security-grid .section-head {
    text-align: center;
    margin-inline: auto;
    margin-bottom: 1.5rem !important;
  }
  .security-grid .section-head .lead { margin-inline: auto; }
  .security-cta { margin-top: 1.85rem; }
  /* The eight-point stack and the "under the hood" note are
     security specifications: left, for scanning. */
  .security-list { margin-top: 1.75rem; }
  .security-proof { margin-top: 1.85rem; }

  /* ── 11 · Pro services ─────────────────────────────────── */
  /* Same family as the support tiles, so the same composition. */
  .pro-card { align-items: center; text-align: center; padding: 1.85rem 1.5rem; }
  .pro-card .pro-ico { margin-bottom: 1.15rem; }
  /* The price rule must still span the card, so it opts out of
     the centering that the rest of the card inherits. */
  .pro-card .pro-price { align-self: stretch; }
  .pro-emergency { margin-top: 2.25rem; }
  .pro-actions { margin-top: 2.25rem; }

  /* ── 12 · Final CTA ────────────────────────────────────── */
  .final-cta .lead { margin-bottom: 2rem; }
  .final-cta-buttons { margin-bottom: 1.75rem; }

  /* Footer navigation is navigation: it stays left. */
}

/* Very small phones (≤ 359px). The hero trust chip is a single nowrap
   row that no longer fits; let it break onto two centred rows so the
   hero keeps its composition instead of being clipped. */
@media (max-width: 359.98px) {
  .hero-chip {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .35rem;
    padding: .4rem .6rem;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   3b · PLATFORM CHOOSER: under the Web Hosting plan grid
   ───────────────────────────────────────────────────────────
   Replaces the old keyword-dense `.plans-note` paragraph (owner
   directive 2026-08-05: that block was cognitively overloaded).
   The job of this component is a decision, not a description:
   a visitor should see which of the two hosting products they
   need without reading prose.

   Lives inside #panel-web only. It must NOT sit outside the
   `.plans-panels` wrapper, or it would also appear under the
   VPS and Virtual Dedicated tabs, where it is meaningless.

   Cards are flex columns with the CTA pinned to the bottom via
   margin-top:auto, so the pair stays perfectly aligned even
   though one list carries five rows and the other four. Do not
   pad the shorter list with a filler bullet to even them up.
   ═══════════════════════════════════════════════════════════ */

/* Enterprise note: deliberately subordinate to the plan cards.
   The price lives on /pricing/; quoting it here is what made the
   old paragraph read like a second price list. */
.plans-enterprise-note {
  /* 52rem, not 44: at 44rem "supports up to 30." orphaned onto a
     second line and the note stopped reading as a single aside. */
  margin: 1.6rem auto 0;
  max-width: 52rem;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--ink-3);
}
.plans-enterprise-note a {
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-color: var(--line-2);
}
.plans-enterprise-note a:hover { color: var(--blue-600); text-decoration-color: currentColor; }

.chooser { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.chooser-head {
  max-width: 40rem;
  margin: 0 auto clamp(1.5rem, 3vw, 2.1rem);
  text-align: center;
}
.chooser-head h3 { font-size: var(--fs-h3); margin-bottom: .55rem; }
.chooser-head p { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.65; }

.chooser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 56rem;
  margin-inline: auto;
}
.chooser-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  padding: 1.75rem 1.7rem;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.chooser-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.chooser-ico {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  background: var(--ice-100);
  border: 1px solid var(--ice-200);
  color: var(--blue-600);
  margin-bottom: .9rem;
}
.chooser-card h4 { font-size: var(--fs-h4); margin-bottom: .15rem; }
.chooser-tag { font-size: var(--fs-tiny); color: var(--ink-3); margin-bottom: 1.2rem; }

.chooser-list {
  display: grid;
  gap: .58rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
  margin-bottom: 1.6rem;
  list-style: none;
}
.chooser-list li { display: flex; gap: .55rem; align-items: flex-start; }
.chooser-list .ico { flex: none; margin-top: .2rem; color: var(--ok-600); }
/* Anchor links on the platform names: keeps the internal links the
   old paragraph carried, without any visual noise. */
.chooser-list a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: .15em;
}
.chooser-list a:hover { color: var(--blue-600); text-decoration-color: currentColor; }
/* "Not included" row: muted, with a cross rather than a tick. This is
   an honest limitation, not a feature. Never style it as a check. */
.chooser-list .is-off { color: var(--ink-3); }
.chooser-list .is-off .ico { color: var(--line-2); }

.chooser-card .btn { margin-top: auto; width: 100%; justify-content: center; }

/* The two supporting links the old paragraph carried. Kept because
   /small-business-hosting/ and /web-hosting/#compare-plans have no
   other link from the homepage. */
.chooser-links {
  margin-top: 1.5rem;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--ink-3);
}
.chooser-links a { font-weight: 600; }

@media (max-width: 760px) {
  .chooser-grid { grid-template-columns: 1fr; max-width: 26rem; }
}


/* ── Homepage section rhythm (2026-08-17 polish) ─────────────────────
   Major narrative sections breathe at lg; the reviews proof block gets
   xl so it reads as a deliberate trust moment, not a module in a stack.
   Values come from the spacing tokens, which already scale down at the
   768px token breakpoint, so this stays mobile-first. Scoped to
   .page-home because why-us.php also loads home.css. */
.page-home #why,
.page-home #migration,
.page-home #company,
.page-home #support { padding-block: var(--space-section-lg); }
.page-home #reviews { padding-block: var(--space-section-xl); }
/* What You Get: the padding is INSIDE the dark canvas, so it is the
   distance from the panel edge to the heading/list. lg (52→60px) left
   the copy compressed against the transitions; this centers it in the
   panel without making the section excessively tall (76px at 1440,
   stepping down with the viewport). */
.page-home #security { padding-block: clamp(3.5rem, 6vw, 4.75rem); }


/* ── Homepage display typography (2026-08-17, from the live-site hierarchy) ──
   The live homepage carries its presence through scale and weight: hero at
   72px/800 with 1.08 line-height and -2.5% tracking, section headlines at
   48px/800. The ratios here already matched; this restores the scale and
   weight, responsively, without touching the design system. Scoped to
   .page-home (home.css is shared with why-us.php). */
.page-home .hero h1 {
  font-size: clamp(2.75rem, 3.2vw + 1.6rem, 4.5rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.page-home .section-head h2,
.page-home .why-head h2 {
  font-size: clamp(1.9rem, 1.5vw + 1.65rem, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

/* Restrained trust label above the scrolling logos (live-site treatment).
   2026-08-17 polish: weight 700→800 (Inter 800 now loaded in head.php) and
   ink-3→ink-2 so it reads confident. Still a small uppercase trust label:
   size and letter-spacing deliberately unchanged; never promote it to H2 scale. */
.logo-band-label {
  margin: 0 0 1.6rem;
  text-align: center;
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2, #43607B);
}