/* ─────────────────────────────────────────────────────────────────
 * Ventanal — coming-soon landing
 * Shared stylesheet for index, /terminos, /privacidad.
 * Design tokens, layout primitives, sections, components, utilities.
 * ──────────────────────────────────────────────────────────────── */

:root {
  --navy:        #002E5B;
  --navy-deep:   #05243A;
  --navy-ink:    #011a31;
  --amber:       #EDB21D;
  --amber-soft:  #F9C85D;
  --amber-glow:  #FFD86A;

  --paper:       #FBF9F4;
  --surface:     #FFFFFF;
  --silver:      #E9E5DC;
  --border:      #D9D4C6;
  --ink:         #0A1626;
  --ink-muted:   #4A5468;
  --ink-faint:   #8A93A4;

  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* Matches the footer color so the overscroll area below the page
     blends in with the footer instead of showing the paper bg. */
  background: var(--navy-ink);
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--navy); }
a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: var(--amber); color: var(--navy-deep); }

/* ── Layout primitives ─────────────────────────────────────── */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  /* 28px lateral default — kept uniform on phones (used to drop to 20px
     and hero felt cramped). Tiny phones (≤360px) ease back to 22px so
     the email field doesn't lose too much usable width. */
  padding: 0 28px;
}
@media (max-width: 360px) { .wrap { padding: 0 22px; } }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.eyebrow .dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--amber);
  margin-right: 10px; transform: translateY(-1px);
}
.eyebrow.on-dark { color: var(--amber-soft); }

h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: -0.02em; margin: 0;
  color: var(--navy-deep); overflow-wrap: break-word;
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }

h1 { font-size: clamp(38px, 7.4vw, 104px); line-height: 0.96; }
h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.02; }
h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.15; font-weight: 700; }

p.lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--ink-muted); max-width: 64ch; }
.on-dark p.lead { color: rgba(255,255,255,0.82); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  --bg: var(--navy);
  --fg: #fff;
  --bd: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 22px;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd); border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.01em;
  cursor: pointer; text-decoration: none;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(237, 178, 29, 0.45);
}
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn--amber { --bg: var(--amber); --fg: var(--navy-deep); --bd: var(--amber); }
.btn--amber:hover { --bg: var(--amber-soft); --bd: var(--amber-soft); color: var(--navy-deep); }
.btn--ghost { --bg: transparent; --fg: var(--navy); --bd: var(--navy); }
.btn--ghost.on-dark { --fg: #fff; --bd: rgba(255,255,255,0.6); }
.btn--ghost.on-dark:hover { --bd: #fff; background: rgba(255,255,255,0.06); }
.btn--lg { height: 58px; padding: 0 28px; font-size: 16px; }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ── Top utility bar ───────────────────────────────────────── */
.topbar {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.82);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; height: 38px; }
.topbar .strong { color: var(--amber); }
@media (max-width: 720px) { .topbar .hide-sm { display: none; } }

.topbar-platforms {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.topbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--amber-soft);
  cursor: help;
  transition: color .15s ease, transform .15s ease;
}
.topbar-icon:hover,
.topbar-icon:focus-visible {
  color: var(--amber);
  transform: translateY(-1px);
  outline: none;
}
.topbar-icon svg { width: 14px; height: 14px; }
.topbar-platforms > span:last-child {
  margin-left: 4px;
  color: rgba(255, 255, 255, 0.82);
}

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0, 46, 91, 0.85);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 24px; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; width: auto; }
.brand-logo--full { height: 44px; }
.brand-logo--mark { display: none; height: 48px; }
.brand-logo--footer {
  height: 58px;
}

.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { font-weight: 600; font-size: 14px; color: rgba(255, 255, 255, 0.82); }
.nav-links a:hover { color: #fff; }
@media (max-width: 880px) { .nav-links { display: none; } }

.nav .nav-cta .full-label { display: inline; }
.nav .nav-cta .short-label { display: none; }

/* Mobile-ish (phones + small tablets): swap full wordmark for mark only —
   matches the favicon shape so brand identity stays consistent in tight
   space. */
@media (max-width: 768px) {
  .nav .brand-logo--full { display: none; }
  .nav .brand-logo--mark { display: block; }
}
@media (max-width: 520px) {
  .nav .wrap { gap: 12px; height: 72px; }
  .nav .brand-logo--mark { height: 48px; }
  .nav .nav-cta { height: 44px; padding: 0 16px; font-size: 14px; }
  .nav .nav-cta .full-label { display: none; }
  .nav .nav-cta .short-label { display: inline; }
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 55%, #001d3f 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* Full-bleed designer scene: navy brick wall with two glowing arched windows
   and an amber halo (single SVG — navy base + bricks + windows + glow). Covers
   the whole hero, anchored right so the windows sit on the right and the left
   stays clear for the copy. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/hero-scene.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  pointer-events: none;
  z-index: -4;
}
/* Windows breathe: a brightened, screen-blended copy of the SAME scene whose
   opacity pulses, so the lit windows (and their amber halo) glow on and off.
   Adapted from the designer's two-layer technique, reusing hero-scene.svg with
   our exact proportions/crop. A radial mask confines the brightening to the
   window cluster so it fades out smoothly toward the edges — without it, our
   medium-navy fill would brighten as a hard rectangle and seam against the base
   gradient. The warm halo that brightens with it is what "warms" the background
   as the windows turn on. Tracks the base scene's crop at every breakpoint. */
.hero-windows-pulse {
  position: absolute; inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image: url('/assets/hero-scene.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  filter: brightness(1.55) saturate(1.2);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(62% 80% at 82% 48%, #000 0%, #000 34%, transparent 72%);
  mask-image: radial-gradient(62% 80% at 82% 48%, #000 0%, #000 34%, transparent 72%);
  opacity: 0;
  animation: hero-window-pulse 4.4s ease-in-out infinite;
  will-change: opacity;
}
@keyframes hero-window-pulse { 0%, 100% { opacity: 0.28; } 50% { opacity: 0.85; } }
/* Left scrim: keeps the white copy legible over the scene no matter how the
   cover crop lands, then fades out before the windows on the right. */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(1,26,49,0.94) 0%,
    rgba(1,26,49,0.78) 26%,
    rgba(1,26,49,0.34) 50%,
    transparent 68%);
  pointer-events: none;
  z-index: -2;
}
/* Desktop: the scene is landscape-cropped and the two lit windows sit on the
   right. Keep the copy column clear of them — cap the copy widths so text never
   reaches the windows, extend the left scrim deeper to the right, and nudge the
   scene rightward so the windows clear the copy band entirely. */
@media (min-width: 881px) {
  .hero::after { background-position: right 50%; background-size: auto 112%; }
  .hero-windows-pulse {
    background-position: right 50%; background-size: auto 112%;
    -webkit-mask-image: radial-gradient(52% 78% at 88% 50%, #000 0%, #000 32%, transparent 70%);
    mask-image: radial-gradient(52% 78% at 88% 50%, #000 0%, #000 32%, transparent 70%);
  }
  .hero::before {
    background: linear-gradient(90deg,
      rgba(1,26,49,0.96) 0%,
      rgba(1,26,49,0.92) 38%,
      rgba(1,26,49,0.62) 58%,
      transparent 80%);
  }
}

/* Tablet: the scene is portrait-cropped, so pin it to the top-right where the
   windows live and deepen the scrim into a vertical wash. */
@media (max-width: 880px) {
  .hero::after { background-position: 72% center; }
  .hero-windows-pulse {
    background-position: 72% center;
    -webkit-mask-image: radial-gradient(70% 56% at 72% 32%, #000 0%, #000 34%, transparent 72%);
    mask-image: radial-gradient(70% 56% at 72% 32%, #000 0%, #000 34%, transparent 72%);
  }
  .hero::before {
    background: linear-gradient(168deg,
      rgba(1,26,49,0.50) 0%,
      rgba(1,26,49,0.72) 50%,
      rgba(1,26,49,0.88) 100%);
  }
}
/* Phones: hold the windows in the top-right as an ambient glow and let the
   copy sit on a near-solid wash below. */
@media (max-width: 520px) {
  /* Scale the scene up and pin it to the top so the windows' bases land at the
     bottom of the hero, resting on the trust strip. Scrim is darkest through
     the copy band and clears at the bottom so the windows glow above the strip. */
  .hero::after { background-position: center top; background-size: auto 164%; }
  .hero-windows-pulse {
    background-position: center top; background-size: auto 164%;
    -webkit-mask-image: radial-gradient(86% 40% at 50% 18%, #000 0%, #000 36%, transparent 74%);
    mask-image: radial-gradient(86% 40% at 50% 18%, #000 0%, #000 36%, transparent 74%);
  }
  .hero::before {
    background: linear-gradient(180deg,
      rgba(1,26,49,0.52) 0%,
      rgba(1,26,49,0.76) 32%,
      rgba(1,26,49,0.70) 60%,
      rgba(1,26,49,0.34) 100%);
  }
}

/* ── Hero twinkling stars ──────────────────────────────────── */
/* Amber "embers" scattered across the scene; positions injected by JS into
   .hero-stars (index.html). Decorative — frozen for reduced motion. */
.hero-stars {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hero-star {
  position: absolute;
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: var(--amber-glow);
  box-shadow: 0 0 6px 1.5px rgba(255, 216, 106, 0.6);
  opacity: 0;
  animation:
    star-twinkle var(--d, 3.6s) ease-in-out var(--delay, 0s) infinite,
    star-drift var(--dd, 9s) ease-in-out var(--delay, 0s) infinite;
  will-change: opacity, transform, translate;
}
@keyframes star-twinkle {
  0%, 100% { opacity: calc(var(--o, 0.85) * 0.18); transform: scale(0.65); }
  50%      { opacity: var(--o, 0.85); transform: scale(1.18); }
}
@keyframes star-drift {
  0%   { translate: 0 0; }
  50%  { translate: var(--dx, 4px) var(--dy, -7px); }
  100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-star {
    animation: none;
    opacity: calc(var(--o, 0.85) * 0.7);
    transform: none;
    translate: 0 0;
  }
  /* Freeze the window heartbeat to a steady "lights on" glow. */
  .hero-windows-pulse { animation: none; opacity: 0.55; }
}
.hero-inner {
  position: relative;
  /* top/bottom only — leave horizontal padding to .wrap (0 28px) so the hero
     keeps its lateral gutter on mobile. A `padding` shorthand here would reset
     .wrap's 28px to 0 and push the content to the screen edges. */
  padding-top: clamp(72px, 13vw, 180px);
  padding-bottom: clamp(80px, 11vw, 160px);
  /* No max-width override: inherit .wrap's 1200px so the hero copy shares the
     same left gutter as the nav logo and footer — one consistent container.
     The H1 / lead / form keep their own narrower max-widths to stay left. */
  z-index: 1;
}

.hero h1 { color: #fff; margin: 24px 0 28px; font-size: clamp(34px, 4.5vw, 58px); max-width: 660px; }
.hero h1 .accent { color: var(--amber); }
.hero h1 .underline {
  background-image: linear-gradient(transparent 76%, var(--amber) 76%, var(--amber) 92%, transparent 92%);
  /* Clone the highlight onto each line box so the amber band wraps cleanly
     instead of stretching across the line break. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero .lead { color: rgba(255,255,255,0.88); max-width: 56ch; }

.hero-form {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: 560px;
}
.hero-form input[type="email"] {
  flex: 1 1 280px;
  min-width: 0;
  height: 58px; padding: 0 18px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.28);
  border-radius: var(--r-sm);
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.hero-form input[type="email"]::placeholder { color: rgba(255,255,255,0.55); }
.hero-form input[type="email"]:focus,
.hero-form input[type="email"]:focus-visible {
  border-color: var(--amber);
  background: rgba(255,255,255,0.14);
  box-shadow: 0 0 0 3px rgba(237, 178, 29, 0.25);
}
.hero-form input[type="email"][aria-invalid="true"] {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(237, 178, 29, 0.35);
}
.hero-form .btn { height: 58px; }
.hero-note {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
}
/* Honest social-proof row under the hero form (verification · city · count). */
.hero-social {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; align-items: center;
  row-gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.hero-social .hs-item { display: inline-flex; align-items: center; gap: 7px; }
.hero-social .hs-item:not(:first-child)::before {
  content: '·';
  color: var(--amber);
  margin: 0 12px;
  font-size: 14px;
  line-height: 1;
}
.hero-social .hs-verified svg { color: var(--amber-soft); flex-shrink: 0; }
.hero-social .hs-count { color: #fff; }
.hero-social .hs-count[hidden] { display: none; }
/* Desktop (≥881px): cap the hero copy column so it ALWAYS clears the right-anchored
   windows at every resolution. Placed after the base .hero rules so these caps win
   the cascade — the earlier min-width:881px block sat before the base rules and was
   silently overridden. The vw ceilings keep the copy left of the window zone even on
   narrow desktops; the px/ch ceilings keep it readable on ultrawide. */
@media (min-width: 881px) {
  .hero h1     { max-width: min(660px, 60vw); }
  .hero .lead  { max-width: min(46ch, 48vw); }
  .hero-form   { max-width: min(520px, 54vw); }
  .hero-social { max-width: min(560px, 64vw); }
}
@media (max-width: 520px) {
  /* Tighten the microtext cluster under the form (note + trust signals) so it
     reads as one compact group instead of 4 sprawling lines. */
  .hero-note { margin-top: 14px; font-size: 10px; }
  .hero-social {
    flex-direction: column; align-items: flex-start;
    gap: 5px; margin-top: 10px; font-size: 10px;
  }
  .hero-social .hs-item:not(:first-child)::before { display: none; }
}
.hero-success {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  background: rgba(237,178,29,0.14);
  border: 1.5px solid var(--amber);
  border-radius: var(--r-sm);
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 15px;
}
.hero-success .check {
  width: 32px; height: 32px;
  background: var(--amber); color: var(--navy-deep);
  border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
}
.hero-error {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--amber-soft);
  text-transform: uppercase;
  display: none;
}
.hero-error.visible { display: block; }

/* ── Trust strip ───────────────────────────────────────────── */
.trust-strip {
  background: var(--navy-ink);
  color: rgba(255,255,255,0.78);
  padding: 26px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.trust-strip .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
/* Each pillar fills an equal column, separated by a hairline divider — the
   divider is a left border that stretches the full row height. */
.trust-strip .item {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0 6px clamp(20px, 3vw, 44px);
  border-left: 1px solid rgba(255,255,255,0.16);
}
.trust-strip .item:first-child { padding-left: 0; border-left: none; }
.trust-strip .item svg { width: 18px; height: 18px; color: var(--amber); flex-shrink: 0; }
.trust-strip .item strong { color: #fff; font-weight: 600; }
/* Tablet: 2×2 grid with a single vertical divider down the middle. */
@media (max-width: 880px) {
  .trust-strip .wrap { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .trust-strip .item { padding-left: 32px; }
  .trust-strip .item:nth-child(odd) { padding-left: 0; border-left: none; }
  .trust-strip .item:nth-child(even) { border-left: 1px solid rgba(255,255,255,0.16); }
}
/* Phones: single stacked column, no dividers. */
@media (max-width: 440px) {
  .trust-strip .wrap { grid-template-columns: 1fr; row-gap: 16px; }
  .trust-strip .item,
  .trust-strip .item:nth-child(even) { padding-left: 0; border-left: none; }
}

/* ── Section base ──────────────────────────────────────────── */
section { padding: clamp(80px, 9vw, 130px) 0; }
section.dark { background: var(--navy-deep); color: #fff; }
section.paper { background: var(--paper); }
section.surface { background: var(--surface); }
.section-head { max-width: 760px; margin-bottom: clamp(48px, 5vw, 72px); }
.section-head h2 { margin: 18px 0 16px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head.center .eyebrow { justify-content: center; display: inline-flex; }
.section-head.center p.lead { margin-left: auto; margin-right: auto; }

/* ── Dual audience split ───────────────────────────────────── */
.duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (max-width: 880px) { .duo { grid-template-columns: 1fr; } }
.duo-panel {
  background: var(--surface);
  padding: clamp(36px, 4vw, 56px);
  display: flex; flex-direction: column;
}
.duo-panel.dark-panel { background: var(--navy-deep); color: #fff; }
.duo-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 100px;
  width: max-content;
  color: var(--ink-muted);
}
.dark-panel .duo-tag { border-color: rgba(255,255,255,0.22); color: var(--amber-soft); }
.duo-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.duo-panel h3 {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  margin: 20px 0 16px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy-deep);
}
.dark-panel h3 { color: #fff; }
.duo-panel .sub { font-size: 17px; color: var(--ink-muted); line-height: 1.5; max-width: 42ch; }
.dark-panel .sub { color: rgba(255,255,255,0.78); }

.duo-list { margin: 32px 0 0; padding: 0; list-style: none; flex: 1; }
.duo-list li { padding: 16px 0; border-bottom: 1px solid var(--border); display: flex; gap: 16px; align-items: start; }
.duo-list li:last-child { border-bottom: 0; }
.dark-panel .duo-list li { border-color: rgba(255,255,255,0.12); }
.duo-list .num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  /* Darker than --ink-faint so the 11px ordinals clear WCAG AA on white (5.1:1 vs 3.1:1). */
  color: #646E82; padding-top: 4px;
  width: 28px; flex-shrink: 0;
}
.dark-panel .duo-list .num { color: var(--amber); }
.duo-list .body { flex: 1; }
.duo-list .body strong { display: block; font-weight: 700; font-size: 16px; color: var(--navy-deep); margin-bottom: 2px; letter-spacing: -0.005em; }
.dark-panel .duo-list .body strong { color: #fff; }
.duo-list .body span { font-size: 14px; color: var(--ink-muted); line-height: 1.5; }
.dark-panel .duo-list .body span { color: rgba(255,255,255,0.74); }

/* ── Differentiators ───────────────────────────────────────── */
.diffs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px) { .diffs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .diffs { grid-template-columns: 1fr; } }
.diff {
  padding: 36px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.diff:hover {
  transform: translateY(-2px);
  border-color: var(--ink-faint);
  box-shadow: 0 18px 40px -28px rgba(0, 46, 91, 0.35);
}
.diff .ic { width: 44px; height: 44px; color: var(--navy); margin-bottom: 24px; }
.diff .ic svg { width: 100%; height: 100%; }
.diff h3 { font-size: 19px; font-weight: 700; margin: 0 0 10px; color: var(--navy-deep); letter-spacing: -0.01em; line-height: 1.15; }
.diff p { font-size: 14px; color: var(--ink-muted); margin: 0; line-height: 1.55; }

/* ── FAQ accordion ─────────────────────────────────────────── */
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer; padding: 26px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy-deep);
  letter-spacing: -0.01em;
}
.faq summary:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
  border-radius: 2px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus {
  width: 28px; height: 28px;
  border: 1.5px solid var(--navy);
  border-radius: 50%;
  display: grid; place-items: center;
  position: relative;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
.faq summary .plus::before, .faq summary .plus::after {
  content: ''; position: absolute; background: var(--navy); transition: transform .2s ease;
}
.faq summary .plus::before { width: 12px; height: 1.5px; }
.faq summary .plus::after { width: 1.5px; height: 12px; }
.faq details[open] summary .plus { background: var(--navy); }
.faq details[open] summary .plus::before, .faq details[open] summary .plus::after { background: #fff; }
.faq details[open] summary .plus::after { transform: rotate(90deg); }
.faq .answer { padding: 0 0 28px; max-width: 64ch; color: var(--ink-muted); font-size: 16px; line-height: 1.6; }
.faq .answer p { margin: 0; }

/* ── Final CTA ─────────────────────────────────────────────── */
.cta-final { position: relative; overflow: hidden; }
.cta-final::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 80% at 110% 100%, rgba(237, 178, 29, 0.35) 0%, transparent 55%),
    radial-gradient(40% 50% at -10% 0%, rgba(249, 200, 93, 0.18) 0%, transparent 60%);
}
.cta-final .wrap { position: relative; z-index: 1; }
.cta-final-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
@media (max-width: 980px) { .cta-final-grid { grid-template-columns: 1fr; gap: 40px; } }

.cta-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-md);
  padding: clamp(28px, 3vw, 40px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cta-card .field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-card label {
  display: block;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); font-weight: 500;
  margin-bottom: 10px;
}
.cta-card input[type="email"] {
  flex: 1 1 220px; min-width: 0;
  height: 54px; padding: 0 16px;
  background: rgba(0,0,0,0.22);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: var(--r-sm);
  color: #fff;
  font-family: var(--font-display); font-size: 15px;
  outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cta-card input[type="email"]::placeholder { color: rgba(255,255,255,0.45); }
.cta-card input[type="email"]:focus,
.cta-card input[type="email"]:focus-visible {
  border-color: var(--amber);
  background: rgba(0,0,0,0.32);
  box-shadow: 0 0 0 3px rgba(237, 178, 29, 0.25);
}
.cta-card input[type="email"][aria-invalid="true"] {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(237, 178, 29, 0.35);
}
.cta-card .submit-row { margin-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cta-card .fineprint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.cta-card .fineprint a { color: var(--amber-soft); text-decoration: underline; text-underline-offset: 2px; }
.cta-card .fineprint a:hover { color: var(--amber-glow); }
.cta-card .err {
  display: none;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--amber-soft);
}
.cta-card .err.visible { display: block; }
.cta-card .divider {
  position: relative;
  margin: 28px 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.cta-card .divider::after {
  content: 'O';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--navy-deep);
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.55);
}
.cta-card .secondary-cta { display: flex; flex-direction: column; gap: 14px; }
.cta-card .secondary-cta h3 {
  color: #fff; font-size: 17px; font-weight: 800; line-height: 1.55; margin: 0; letter-spacing: -0.005em;
}
.cta-card .secondary-cta p {
  margin: 0; font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.5;
}

.cta-success {
  display: none;
  padding: 28px 24px;
  background: rgba(30, 122, 82, 0.14);
  border: 1px solid rgba(45, 175, 120, 0.55);
  border-radius: var(--r-md);
  color: #fff;
}
.cta-card.is-success .form-area,
.cta-card.is-success .divider { display: none; }
.cta-card.is-success .cta-success { display: block; }
.cta-success .check {
  width: 40px; height: 40px;
  background: var(--amber); color: var(--navy-deep);
  border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 14px;
}
.cta-success h3 { color: #fff; font-size: 20px; margin: 0 0 6px; }
.cta-success p { color: rgba(255,255,255,0.84); margin: 0; font-size: 14px; line-height: 1.5; }
.cta-success .success-next { margin-top: 16px; }

/* Success "next step": one clear secondary action after a signup, so the
   success state isn't a dead end. Shared by the hero/mid inline success and
   the final CTA card success. */
.success-body { display: flex; flex-direction: column; gap: 6px; }
.success-next {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.success-next:hover { color: var(--amber-glow); }
.success-next:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.cta-bullets { margin: 36px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.cta-bullets li { display: flex; align-items: center; gap: 14px; }
.cta-bullets .ic-check {
  width: 36px; height: 36px;
  background: rgba(237,178,29,0.18);
  color: var(--amber);
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.cta-bullets li span { font-size: 15px; color: rgba(255,255,255,0.88); }

/* ── Mid-page capture band ─────────────────────────────────── */
/* Slim navy band (not a full section) so it adds a conversion point without
   adding another heavy content block. */
.mid-cta { background: var(--navy-deep); padding: clamp(36px, 5vw, 56px) 0; }
.mid-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 40px; flex-wrap: wrap;
}
.mid-cta-copy {
  margin: 0; max-width: 20ch;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px); line-height: 1.1;
  letter-spacing: -0.01em; color: #fff;
}
.mid-form { display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 360px; max-width: 480px; }
.mid-form input[type="email"] {
  flex: 1 1 220px; min-width: 0;
  height: 54px; padding: 0 18px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.28);
  border-radius: var(--r-sm);
  color: #fff; font-family: var(--font-display); font-size: 16px;
  outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.mid-form input[type="email"]::placeholder { color: rgba(255,255,255,0.5); }
.mid-form input[type="email"]:focus,
.mid-form input[type="email"]:focus-visible {
  border-color: var(--amber);
  background: rgba(255,255,255,0.14);
  box-shadow: 0 0 0 3px rgba(237, 178, 29, 0.25);
}
.mid-form input[type="email"][aria-invalid="true"] {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(237, 178, 29, 0.35);
}
.mid-form .btn { height: 54px; }
.mid-error {
  display: none; width: 100%; margin-top: 4px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--amber-soft);
}
.mid-error.visible { display: block; }
@media (max-width: 640px) {
  .mid-cta-inner { flex-direction: column; align-items: stretch; }
  .mid-cta-copy { max-width: none; }
  .mid-form { width: 100%; max-width: none; flex: 1 1 auto; }
}

/* ── Footer ────────────────────────────────────────────────── */
footer.site-footer {
  background: var(--navy-ink);
  color: rgba(255,255,255,0.74);
  padding: 64px 0 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 44px;
}
@media (max-width: 880px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .foot-grid { grid-template-columns: 1fr; }
}
.foot-grid .brand { color: #fff; }
.foot-grid .brand-name { color: #fff; }
.foot-blurb { margin-top: 14px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.58); max-width: 42ch; }
.foot-social { margin-top: 22px; display: flex; gap: 12px; }
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  user-select: none;
}
.social-icon:hover,
.social-icon:focus-visible {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(237, 178, 29, 0.06);
  outline: none;
}
.social-icon svg { width: 18px; height: 18px; }
.foot-col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  margin: 0 0 14px;
}
.foot-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.foot-list a { color: rgba(255,255,255,0.78); }
.foot-list a:hover { color: #fff; }
.foot-bottom {
  display: flex; gap: 24px; justify-content: space-between; align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.48);
  flex-wrap: wrap;
}
/* Footer link legibility: the global a:hover (navy) is invisible on the dark
   footer, so override toward amber. */
.foot-bottom a { color: rgba(255,255,255,0.68); text-underline-offset: 2px; }
.foot-bottom a:hover { color: var(--amber-soft); }

/* ── Marquee ───────────────────────────────────────────────── */
.marquee {
  overflow: hidden;
  padding: 22px 0;
  background: var(--paper);
  border-block: 1px solid var(--border);
}
.marquee-track {
  display: flex; gap: 36px;
  animation: scroll 48s linear infinite;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.marquee-track span::after {
  content: '·';
  color: var(--amber);
  margin-left: 16px;
  font-size: 18px;
}
.marquee-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
}
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
@media (max-width: 520px) {
  .marquee { padding: 18px 0; }
  .marquee-icon { width: 26px; height: 26px; }
  .marquee-track { gap: 28px; font-size: 12px; }
}

/* ── Legal page styles ────────────────────────────────────── */
.legal-page {
  background: var(--paper);
  min-height: 100vh;
  padding-bottom: clamp(64px, 8vw, 96px);
}
.legal-content {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) 28px;
}
.legal-content .eyebrow { margin-bottom: 16px; }
.legal-content h1 {
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.05;
  margin-bottom: 12px;
}
.legal-content .updated {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: clamp(36px, 4vw, 56px);
}
.legal-content h2 {
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.2;
  margin: clamp(32px, 3.5vw, 44px) 0 14px;
}
.legal-content p,
.legal-content li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
}
.legal-content p { margin: 0 0 16px; }
.legal-content ul { padding-left: 22px; margin: 0 0 16px; }
.legal-content ul li { margin-bottom: 8px; }
.legal-content strong { color: var(--navy-deep); }
.legal-content a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-content a:hover { color: var(--navy-deep); text-decoration-thickness: 2px; }
.legal-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 24px;
}
.legal-back:hover { color: var(--navy); }
.legal-back .arrow { transform: rotate(180deg); transition: transform .15s ease; }
.legal-back:hover .arrow { transform: rotate(180deg) translateX(3px); }

/* ── Utility ───────────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip link: off-screen until keyboard focus, then pinned top-left. */
.skip-link {
  position: absolute; top: 0; left: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--navy); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
  transition: transform .15s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--amber); outline-offset: 2px;
}
main:focus { outline: none; }

/* ── Tooltip (CSS-only, more reliable than the native title attr) ── */
.tooltip { position: relative; }
.tooltip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 100;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -6px);
  padding: 6px 10px;
  background: var(--paper);
  color: var(--navy-deep);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
}
.tooltip[data-tip]::before {
  content: '';
  position: absolute;
  z-index: 100;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -2px);
  border: 5px solid transparent;
  border-top-color: var(--paper);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
}
.tooltip[data-tip]:hover::after,
.tooltip[data-tip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -10px);
}
.tooltip[data-tip]:hover::before,
.tooltip[data-tip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -6px);
}

/* Variant: tooltip appears BELOW the element instead of above.
   Use on topbar icons so the bubble doesn't render off-screen. */
.tooltip--below[data-tip]::after {
  top: 100%; bottom: auto;
  transform: translate(-50%, 6px);
}
.tooltip--below[data-tip]::before {
  top: 100%; bottom: auto;
  border-top-color: transparent;
  border-bottom-color: var(--paper);
  transform: translate(-50%, 2px);
}
.tooltip--below[data-tip]:hover::after,
.tooltip--below[data-tip]:focus-visible::after {
  transform: translate(-50%, 10px);
}
.tooltip--below[data-tip]:hover::before,
.tooltip--below[data-tip]:focus-visible::before {
  transform: translate(-50%, 6px);
}