/*
  Global stylesheet — single source of truth for the site.

  Structure:
    1) Reset and base
    2) Design tokens (:root) — palette and typography are owned by the
       `brand-guidelines` skill. Spacing, radii, shadows, motion, and layout
       tokens are owned here.
    3) Layout primitives
    4) Components (site-wide reusable primitives only — page-specific
       styles live with their page builds, not here)
    5) Utilities
*/

/* ===== 1) Reset and base ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

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

/* ===== 2) Design tokens ===== */
/* Palette and typography are written by the `brand-guidelines` skill from
   `build-assets/0-the-brand/tokens.json`. Spacing, radii, shadows, and
   transitions are owned here. */
:root {
  /* Palette (brand-guidelines) */
  --color-bg: #180f22;
  --color-surface: #241732;
  --color-surface-soft: #2c1d3d;
  --color-text: #f5eefa;
  --color-text-soft: #b9a7c4;
  --color-primary: #ff4d94;
  --color-primary-dark: #d6236e;
  --color-primary-light: #3a2140;
  --color-accent: #3fc3ea;
  --color-focus: #ff4d94;

  /* Typography (brand-guidelines) */
  --font-heading: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(60, 64, 67, 0.12);
  --shadow-md: 0 4px 14px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.12);

  /* Motion */
  --transition-fast: 180ms ease;
  --transition-base: 260ms ease;

  /* Layout */
  --container-max: 72rem;

  /* Aesthetic dials — the `design-system` skill SETS these per brand to diverge
     the look (sharp vs soft, flat vs shadowed, square vs pill). Defaults below are
     a soft/rounded baseline; a brand's design stage should deliberately override
     them so two brands don't look like the same template reskinned. */
  --logo-height: 2.75rem;    /* prominent by default — the logo is a brand asset, not chrome */
  --logo-max-width: 22rem;   /* generous, so wide wordmarks stay tall (not width-starved) */
  --header-bg: var(--color-surface);   /* header band — design-system may set a brand colour */
  --header-fg: var(--color-text);      /* header text/nav colour — flips for a coloured band */
  --btn-radius: var(--radius-pill);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-sm);
  --card-border: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
  --chip-radius: var(--radius-pill);
}

/* Logo grows on wider screens — override the dial at the breakpoint, never per-page. */
@media (min-width: 1024px) {
  :root { --logo-height: 3.5rem; }
}

/* ===== 3) Layout primitives ===== */
.container {
  width: min(100% - 2rem, var(--container-max));
  margin-inline: auto;
}

.section {
  padding: var(--space-10) 0;
}

.section-soft {
  background: var(--color-surface-soft);
}

.grid {
  display: grid;
  gap: var(--space-4);
}

.grid-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

@media (min-width: 600px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== 4) Components ===== */

/* Site header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.site-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* The header logo is an <img src="{{logo.src}}"> whose REAL file is injected by the CMS
   at upload — its aspect ratio is unknown at build time. HEIGHT is the primary driver
   (a generous --logo-height), so every logo renders at a consistent, prominent height
   regardless of ratio; --logo-max-width is a generous, viewport-relative safety cap that
   only clamps a very wide logo on small screens (it then scales down proportionally, never
   distorts). Never pin width AND height. Tune the dials per brand — never a per-page size. */
.site-logo img {
  height: auto;
  width: auto;
  max-height: var(--logo-height);
  max-width: min(var(--logo-max-width, 22rem), 55vw);
  object-fit: contain;
}

.site-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.site-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* CMS-rendered menus — `{{menu.navigation}}` and `{{menu.footer}}` expand to
   <ul class="canvas-navigation-menu"> / <ul class="canvas-footer-menu"> with
   <li><a> children. Style the generated classes directly. */

.canvas-navigation-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.canvas-navigation-menu > li {
  margin: 0;
}

.canvas-navigation-menu a {
  color: var(--header-fg);
  font-weight: 600;
  font-size: 0.95rem;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.canvas-navigation-menu a:hover,
.canvas-navigation-menu a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.canvas-footer-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

/* Footers can carry many links. With 8+ items, flow them into responsive columns
   (auto-fill grid) instead of one long, sprawling wrapping row — multi-column on wide
   screens, collapsing toward a single column on mobile. Short footer menus keep the
   inline row above. Where :has() is unsupported it harmlessly stays the flex row. */
.canvas-footer-menu:has(> li:nth-child(8)) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
  align-items: start;
  gap: var(--space-2) var(--space-5);
}

.canvas-footer-menu > li {
  margin: 0;
}

.canvas-footer-menu a {
  color: var(--color-text-soft);
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}

.canvas-footer-menu a:hover,
.canvas-footer-menu a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  color: var(--color-text-soft);
  font-size: 0.9rem;
}

.breadcrumb a {
  color: var(--color-primary);
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-separator {
  color: var(--color-text-soft);
  opacity: 0.6;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--btn-radius);
  min-height: 2.75rem;
  padding: 0.78rem 1.4rem;
  font-size: 0.98rem;
  line-height: 1;
  letter-spacing: 0.01em;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline-offset: 3px; }

.btn[disabled],
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
  box-shadow: none;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-surface-soft) 75%, #fff);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
}

.btn-ghost:hover {
  background: color-mix(in srgb, var(--color-surface-soft) 65%, transparent);
}

/* Header CTAs follow the header foreground so they stay legible on a coloured band
   (no-op on the neutral default where --header-fg == --color-text). */
.site-header .btn-ghost {
  color: var(--header-fg);
  border-color: color-mix(in srgb, var(--header-fg) 20%, transparent);
}

.btn-sm {
  min-height: 2.2rem;
  padding: 0.55rem 1rem;
  font-size: 0.87rem;
}

.btn-lg {
  min-height: 3rem;
  padding: 0.9rem 1.7rem;
  font-size: 1.04rem;
}

.btn-block { width: 100%; }

.btn-icon {
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  border-radius: 50%;
}

/* Card */
.card {
  background: var(--color-surface);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  padding: var(--space-5);
}

.card-title {
  margin: 0 0 var(--space-2);
  font-size: 1.08rem;
}

.card-text {
  margin: 0;
  color: var(--color-text-soft);
}

/* Chip — pill-shaped tag */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--chip-radius);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.chip-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Site footer */
.site-footer {
  padding: var(--space-10) 0;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* Member profile */
.profile-head {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-6);
}
.profile-avatar {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: var(--radius-pill);
  object-fit: cover;
}
.profile-id {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.profile-headline {
  font-size: 1.15rem;
  font-weight: 600;
}
.profile-bio {
  color: var(--color-text-soft);
  max-width: 60ch;
}
.profile-interests {
  margin-top: var(--space-3);
}

/* Desktop-only chrome (paired with {{menu.navigation.default}} — the CMS drawer
   handles mobile CTAs, so a separately-emitted desktop CTA group must hide below
   the snippet's 1024px breakpoint to avoid duplicate Join/Login buttons). */
@media (max-width: 1023px) {
  .desktop-only { display: none; }
}

/* Canvas nav (menu.navigation.default) theming — brand the primary CTA instead of
   the snippet's hardcoded black. Higher-specificity selector targets the consumer
   property directly (equal-specificity variable overrides silently lose to the
   snippet's inline <style>, which loads after global.css). */
/* Join is dropped from the mobile drawer entirely — it was crowding/overflowing
   the drawer next to Login. The drawer only ever renders on mobile (<1024px;
   the snippet hides the whole drawer at desktop), so this has no effect on
   desktop, where Join still shows via the separate .site-cta.desktop-only
   buttons in the page header. */
.hs-canvas-nav .hs-canvas-nav__cta--primary {
  display: none;
}

/* Mobile drawer text contrast — the drawer background stays the snippet's
   default white (#fff), but our body text color is light (for the dark
   site theme) and was inheriting into the drawer, making menu links,
   the Login CTA, and the close button unreadable on white. Force a dark
   color for these specific elements. Each selector uses 0,2,0 specificity
   (two classes) to beat the snippet's own inline <style>, which loads
   after global.css — see menu.navigation.default.md's CSS cascade warning
   for why an equal-specificity override would silently fail. */
.hs-canvas-nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__link,
.hs-canvas-nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__summary {
  color: var(--color-bg);
}

.hs-canvas-nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__link:hover,
.hs-canvas-nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__summary:hover {
  color: var(--color-primary-dark);
}

.hs-canvas-nav .hs-canvas-nav__cta--secondary {
  color: var(--color-bg);
  border-color: color-mix(in srgb, var(--color-bg) 30%, transparent);
}

.hs-canvas-nav .hs-canvas-nav__close {
  color: var(--color-bg);
}

/* Eyebrow label — small uppercase tag above a section heading */
.eyebrow {
  display: inline-block;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.section-head {
  max-width: 46rem;
  margin: 0 auto var(--space-8);
  text-align: center;
}

.section-head h2 {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  margin: 0 0 var(--space-3);
}

.section-head p {
  color: var(--color-text-soft);
  margin: 0;
  font-size: 1.05rem;
}

/* Hero (split: copy left, image right on desktop; stacked on mobile) */
.hero {
  padding: var(--space-12) 0 var(--space-10);
  background: linear-gradient(180deg, var(--color-surface-soft), var(--color-bg) 65%);
}

.hero-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.hero h1 {
  font-size: clamp(2.4rem, 1.9rem + 2.6vw, 4rem);
  line-height: 1.08;
  margin: 0 0 var(--space-4);
}

.hero-lede {
  font-size: 1.15rem;
  color: var(--color-text-soft);
  max-width: 42ch;
  margin: 0 0 var(--space-6);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.hero-subline {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  max-width: 42ch;
}

.hero-subline strong {
  display: block;
  margin-bottom: var(--space-1);
}

.hero-subline p {
  margin: 0;
  color: var(--color-text-soft);
}

.hero-media {
  position: relative;
}

.hero-media-frame {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.hero-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Trust row — average rating + a scrolling strip of member chips (silhouette + name + rating) */
.trust-row {
  padding: var(--space-6) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  background: var(--color-surface);
}

.trust-stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.trust-stat-number {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--color-text);
}

.trust-stat-label {
  color: var(--color-text-soft);
  font-size: 0.95rem;
}

.ticker {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ticker-row {
  display: flex;
  gap: var(--space-3);
  width: max-content;
  animation: ticker-scroll 45s linear infinite;
}

.ticker-row.is-reverse { animation-direction: reverse; }

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

.ticker:hover .ticker-row,
.ticker:focus-within .ticker-row {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .ticker-row {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
}

.avatar-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface-soft);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem 0.4rem 0.4rem;
  white-space: nowrap;
}

.avatar-chip img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface);
}

.avatar-chip-name {
  font-size: 0.86rem;
  font-weight: 600;
}

.avatar-chip-rating {
  font-size: 0.8rem;
  color: var(--color-text-soft);
}

/* Two-column feature/community block: text one side, image the other */
.split-block {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 900px) {
  .split-block {
    grid-template-columns: 1fr 1fr;
  }
  .split-block.is-reversed .split-media { order: 2; }
}

.split-media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.split-copy h2 {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  margin: 0 0 var(--space-4);
}

.split-copy p {
  color: var(--color-text-soft);
  font-size: 1.05rem;
  margin: 0 0 var(--space-5);
}

/* Step cards (How it works) */
.step-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
}

.step-card-media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.step-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0 auto var(--space-2);
}

.step-card h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
}

.step-card p {
  color: var(--color-text-soft);
  font-size: 0.94rem;
  margin: 0 0 var(--space-4);
}

.step-card .btn { margin-top: auto; }

/* Feature cards */
.feature-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.feature-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.feature-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.feature-card h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.1rem;
}

.feature-card p {
  color: var(--color-text-soft);
  margin: 0;
}

/* FAQ (native <details>/<summary> — no JS) */
.faq-list {
  max-width: 48rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-1) var(--space-5);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) 0;
  font-weight: 700;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--color-primary);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 0 0 var(--space-4);
  color: var(--color-text-soft);
}

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: #fff;
}

.cta-band h2 {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
}

.cta-band p {
  margin: 0 0 var(--space-6);
  color: color-mix(in srgb, #fff 85%, transparent);
  max-width: 40ch;
  margin-inline: auto;
}

.cta-band .btn-primary {
  background: #fff;
  color: var(--color-primary-dark);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.cta-band .btn-primary:hover {
  background: color-mix(in srgb, #fff 90%, var(--color-primary-light));
}

/* Platform availability row */
.platform-list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 700px) {
  .platform-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.platform-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.platform-icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.platform-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.platform-icon img {
  width: 1.5rem;
  height: 1.5rem;
}

.platform-name {
  margin: 0 0 0.15rem;
  font-size: 1.02rem;
}

.platform-desc {
  margin: 0 0 0.35rem;
  color: var(--color-text-soft);
  font-size: 0.92rem;
}

.platform-availability {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* Tier cards (features + pricing) */
.tier-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: stretch;
}

@media (min-width: 768px) {
  .tier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tier-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tier-card-header {
  margin-bottom: var(--space-3);
}

.tier-name {
  font-size: 1.3rem;
  margin: 0;
}

.tier-badge {
  display: inline-flex;
}

.tier-badge svg {
  height: 1.5rem;
  width: auto;
  display: block;
}

.tier-badge--vip { color: var(--color-primary); }
.tier-badge--vip-plus { color: var(--color-accent); }

.tier-desc {
  color: var(--color-text-soft);
  font-size: 0.92rem;
  margin: 0 0 var(--space-4);
}

.tier-features {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.tier-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.9rem;
  color: var(--color-text);
}

.tier-features li::before {
  content: "";
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--color-primary-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7a70' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 0.65rem;
  background-repeat: no-repeat;
  background-position: center;
}

/* Comparison table */
.table-scroll {
  overflow-x: auto;
  border-radius: var(--card-radius);
  border: var(--card-border);
}

.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--color-surface);
  font-size: 0.9rem;
}

.compare-table th,
.compare-table td {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
}

.compare-table thead th {
  font-family: var(--font-heading);
  font-weight: 700;
  background: var(--color-surface-soft);
}

.compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.compare-table .tier-badge svg {
  height: 1.1rem;
  margin: 0 auto;
}

.compare-check {
  color: var(--color-primary);
  font-weight: 700;
}

.compare-dash {
  color: var(--color-text-soft);
  opacity: 0.5;
}

/* Simple content list (matching algorithm, safety sections) */
.content-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
  margin: 0 0 var(--space-4);
  list-style: none;
}

.content-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text-soft);
}

.content-list li::before {
  content: "";
  flex-shrink: 0;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--color-primary);
}

.info-block {
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-5);
}

.info-block h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
}

.info-block p {
  margin: 0;
  color: var(--color-text-soft);
}

.cross-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Safety page — categorized feature grid */
.safety-category {
  margin-bottom: var(--space-10);
}

.safety-category:last-child { margin-bottom: 0; }

.category-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.category-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.category-head h2 {
  margin: 0;
  font-size: 1.35rem;
}

.category-desc {
  color: var(--color-text-soft);
  margin: 0 0 var(--space-5);
  font-size: 0.96rem;
}

.safety-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.safety-card-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: var(--space-3);
}

.safety-card h3 {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}

.safety-card-does {
  color: var(--color-text-soft);
  font-size: 0.9rem;
  margin: 0 0 var(--space-3);
}

.safety-card-protects {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--color-accent);
  font-weight: 600;
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-3);
  margin-top: auto;
}

/* Pricing tier cards */
.pricing-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: stretch;
}

@media (min-width: 768px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}

.pricing-card--light {
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--card-border);
}

.pricing-card--dark {
  background: var(--color-text);
  color: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-bg) 12%, transparent);
}

.pricing-card-logo {
  margin-bottom: var(--space-3);
}

.pricing-card-logo svg {
  height: 1.75rem;
  width: auto;
  display: block;
}

.pricing-card--light .pricing-card-logo svg { color: var(--color-text); }
.pricing-card--dark .pricing-card-logo svg { color: var(--color-bg); }

.pricing-tagline {
  font-weight: 700;
  margin: 0 0 var(--space-2);
}

.pricing-desc {
  font-size: 0.94rem;
  margin: 0 0 var(--space-4);
}

.pricing-card--light .pricing-desc { color: var(--color-text-soft); }
.pricing-card--dark .pricing-desc { color: color-mix(in srgb, var(--color-bg) 75%, transparent); }

.pricing-features {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.9rem;
}

.pricing-features .feat-icon {
  flex-shrink: 0;
}

.price-block {
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  padding-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.price-block-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin: 0 0 var(--space-2);
}

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.3rem 0;
}

.price-row.is-prime {
  font-size: 1.15rem;
  font-weight: 700;
}

.price-row.is-secondary {
  font-size: 0.98rem;
  font-weight: 600;
}

.price-currency {
  opacity: 0.75;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.price-amounts {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}

.price-amounts .sep {
  opacity: 0.5;
  font-size: 0.8em;
}

.price-other-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem var(--space-4);
  font-size: 0.78rem;
  opacity: 0.85;
}

.price-other-grid .price-currency-code {
  font-weight: 700;
  margin-right: 0.3rem;
}

.pricing-card .btn {
  margin-top: auto;
  width: 100%;
}

.pricing-card--dark .btn-primary {
  background: var(--color-bg);
  color: var(--color-text);
}

.pricing-card--dark .btn-primary:hover {
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
}

.length-note {
  text-align: center;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  max-width: 40ch;
  margin: var(--space-6) auto 0;
}

.trust-strip {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.trust-strip-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.88rem;
  color: var(--color-text-soft);
  font-weight: 600;
}

/* Scroll movement — sections gently rise + fade in as they enter the
   viewport. CSS-only (no JavaScript), using scroll-driven animation where
   the browser supports it (Chrome/Edge). Browsers without support simply
   show sections at full opacity immediately — never hidden, never broken. */
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

.section,
.trust-row {
  opacity: 1;
}

@supports (animation-timeline: view()) {
  .section,
  .trust-row {
    animation: reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section,
  .trust-row {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== 5) Utilities ===== */
.text-center { text-align: center; }
.muted { color: var(--color-text-soft); }

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}