/* CloakAPI canonical nav + footer v2 */
nav.top { display:flex; align-items:center; gap:24px; max-width:1200px; margin:0 auto; padding:18px 36px; border-bottom:1px solid var(--line, #1f2230); font-size:14px; font-family:var(--sans, Inter, system-ui, -apple-system, sans-serif); flex-wrap:wrap; }
nav.top .brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; color:var(--fg, #f5f5f5); text-decoration:none; }
nav.top .brand .brand-mark { display:block; border-radius:6px; }
nav.top .links { display:flex; gap:24px; align-items:center; }
nav.top .links a { color:var(--fg-dim, #a6adc8); text-decoration:none; font-size:13.5px; transition:color .15s; }
nav.top .links a:hover, nav.top .links a.active { color:var(--fg, #f5f5f5); }
nav.top .right { margin-left:auto; display:flex; gap:10px; align-items:center; }
nav.top .btn { display:inline-flex; align-items:center; padding:7px 14px; border-radius:6px; font-size:13px; font-weight:500; text-decoration:none; border:1px solid var(--line-soft, #2b2f3f); background:var(--bg-elev, #11141d); color:var(--fg, #f5f5f5); transition:.15s; }
nav.top .btn.primary { background:var(--brand, #6c5ce7); color:#fff; border-color:var(--brand-strong, #4f3cc9); }
nav.top .btn.primary:hover { background:var(--brand-strong, #4f3cc9); }
nav.top .btn.ghost { background:transparent; }
nav.top .btn.ghost:hover { background:var(--bg-inset, #1a1d29); }
/* Mobile-nav hamburger toggle (hidden on desktop) */
nav.top .menu-toggle { display:none; background:transparent; border:1px solid var(--line-soft, #2b2f3f); color:var(--fg, #f5f5f5); width:44px; height:44px; border-radius:8px; align-items:center; justify-content:center; font-size:20px; line-height:1; cursor:pointer; padding:0; margin-left:auto; }
nav.top .menu-toggle:focus-visible { outline:2px solid var(--brand, #6c5ce7); outline-offset:2px; }

@media (max-width:760px) {
  nav.top { padding:14px 20px; gap:14px; flex-wrap:wrap; }
  nav.top .menu-toggle { display:inline-flex; }
  nav.top .links,
  nav.top .right { display:none; flex-basis:100%; }
  nav.top[data-menu-open="true"] .links { display:flex; order:3; flex-basis:100%; flex-direction:column; gap:14px; align-items:flex-start; }
  nav.top[data-menu-open="true"] .right { display:flex; order:4; flex-basis:100%; gap:10px; margin-left:0; flex-wrap:wrap; }
  nav.top .links a { padding:10px 0; min-height:44px; display:inline-flex; align-items:center; }
  nav.top .right .btn,
  nav.top .btn { min-height:44px !important; padding-top:11px !important; padding-bottom:11px !important; }
}

/* Touch-target sizing on mobile (Wave 7 E1-E3 accessibility fix). */
@media (max-width:760px) {
  .btn, .btn-primary, .btn-ghost, .btn-outline, .hero-actions a, .hero .btn,
  button[type="submit"], input[type="submit"] { min-height:44px !important; padding-top:11px !important; padding-bottom:11px !important; }
}

/* iter-15 fix-5: any touch device gets 44px CTAs regardless of width.
   iPad at 810x1080 sits above the 760px breakpoint above but is still touch-only,
   so the hover-none/pointer-coarse query catches it (and any other tablet) while
   leaving desktop pointer devices >=1024px untouched.

   iter-15 fix-6 (2026-05-07): broaden selector list to cover blog/legal/
   changelog/compliance/enterprise CTAs that use page-local `.btn`,
   `.btn primary`, `.btn ghost`, `.cta`, `.button`, `.action`, or
   `a[role="button"]`. Explicitly EXCLUDES nav/sidebar toggles and
   close/dismiss icon buttons (those should stay smaller per a11y guidance).
   Sets `min-height` + line-height so the 44px floor wins regardless of
   page-local `padding:7px 14px` overrides. */
@media (hover: none) and (pointer: coarse) {
  .btn, .btn.primary, .btn.ghost, .btn.outline, .btn.sm,
  .btn-primary, .btn-ghost, .btn-outline,
  .cta, .button, .action,
  .hero-actions a, .hero .btn,
  a[role="button"],
  button[type="submit"], input[type="submit"],
  button:not([class*="toggle"]):not([class*="hamburger"]):not([aria-label*="menu" i]):not([aria-label*="sidebar" i]):not([aria-label*="close" i]):not([aria-label*="dismiss" i]) {
    min-height: 44px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
  }
  nav.top .btn,
  nav.top .right .btn { min-height: 44px !important; padding-top: 11px !important; padding-bottom: 11px !important; }
}

.site-footer { margin-top:80px; padding:64px 36px 28px; border-top:1px solid var(--line, #1f2230); background:var(--bg-elev, #11141d); color:var(--fg-dim, #a6adc8); font-size:13.5px; font-family:var(--sans, Inter, system-ui, sans-serif); }
.site-footer .footer-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.4fr 2.6fr; gap:64px; }
.site-footer .footer-brand .footer-logo { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:16px; color:var(--fg, #f5f5f5); text-decoration:none; }
.site-footer .footer-brand .footer-logo img { display:block; border-radius:7px; }
.site-footer .footer-brand .footer-tag { color:var(--fg-mute, #7a7f99); font-size:13px; line-height:1.6; max-width:320px; margin:14px 0 14px; }
.site-footer .footer-brand .footer-receipt { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:99px; background:var(--accent-soft, rgba(52,211,153,0.10)); color:var(--accent, #34d399); font-size:11.5px; font-weight:500; border:1px solid rgba(52,211,153,0.25); }
.site-footer .footer-brand .footer-receipt-dot { width:6px; height:6px; border-radius:50%; background:var(--accent, #34d399); display:inline-block; box-shadow:0 0 0 3px rgba(52,211,153,0.18); }
.site-footer .footer-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.site-footer .footer-col { display:flex; flex-direction:column; gap:8px; }
.site-footer .footer-col-h { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg-mute, #7a7f99); margin-bottom:6px; font-weight:600; }
.site-footer .footer-col a { color:var(--fg-dim, #a6adc8); text-decoration:none; line-height:1.55; font-size:13px; transition:color .15s; }
.site-footer .footer-col a:hover { color:var(--fg, #f5f5f5); }
.site-footer .footer-bottom { max-width:1200px; margin:48px auto 0; padding-top:22px; border-top:1px solid var(--line, #1f2230); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--fg-mute, #7a7f99); }
.site-footer .footer-bottom a { color:var(--fg-dim, #a6adc8); text-decoration:none; }
.site-footer .footer-bottom a:hover { color:var(--fg, #f5f5f5); }
@media (max-width:880px) {
  .site-footer .footer-inner { grid-template-columns:1fr; gap:40px; }
  .site-footer .footer-cols { grid-template-columns:repeat(3,1fr); gap:24px; }
}
@media (max-width:560px) {
  .site-footer { padding:48px 22px 24px; margin-top:48px; }
  .site-footer .footer-cols { grid-template-columns:1fr; gap:24px; }
  .site-footer .footer-bottom { flex-direction:column; gap:8px; }
}

/* ============================================================
 * Wave 7 a11y: reduced-motion + forced-colors
 * ============================================================ */

/* Reduced motion — honor user preference; suppress decorative animations */
@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;
  }
}

/* Forced colors mode (Windows High Contrast etc.) — let the OS theme paint
   buttons and form fields with system colours; preserve focus outlines. */
@media (forced-colors: active) {
  button, [role="button"], a {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
  }
  :focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px !important;
  }
  /* Avoid invisible-on-system text; let system pick foreground. */
  *, *::before, *::after {
    color: CanvasText;
    background-color: Canvas;
    border-color: CanvasText;
  }
}

/* ============================================================
 * iter17 mobile-sweep fix: above-the-fold primary CTA at <=480px
 * ============================================================
 *
 * The mobile-sweep WARNs all stemmed from the hero's primary CTA sitting
 * below the first viewport on iPhone SE (320x568) and similar small
 * screens, because the hero's vertical rhythm (h1 size, lead paragraph,
 * eyebrow margin, section padding) was tuned for 760-840px and not
 * shrunk further at phone widths. This block compresses hero rhythm on
 * narrow viewports so the in-hero `.btn-primary` / `.btn.primary` lands
 * within the first ~1.5 viewports — verified via Playwright probe.
 *
 * Targets the apex hero (section.hero on /) and the variant hero used
 * by /enterprise, /compliance, /trust (.hero with `.hero h1`/`.hero .sub`).
 */
@media (max-width: 480px) {
  /* Apex marketing hero (index.html) */
  section.hero { padding: 24px 0 32px !important; }
  section.hero h1,
  .hero h1 {
    font-size: clamp(28px, 8vw, 34px) !important;
    line-height: 1.08 !important;
    margin: 0 0 12px !important;
  }
  .hero-lead,
  .hero .sub {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 0 18px !important;
  }
  .hero-actions { margin-bottom: 20px !important; gap: 8px !important; }
  .eyebrow { margin-bottom: 14px !important; padding: 4px 10px !important; }
  /* Trust/Enterprise/Compliance hero meta-row + callouts wrap closely */
  .hero .meta-row { margin-bottom: 6px !important; gap: 6px !important; }
  /* Generic <section> wrapper used on /trust, /enterprise, /compliance */
  section { padding-top: 24px !important; }
}

/* /pricing: iter17 product fix added a hero-level "Start free" CTA inside
 * section.head so the primary action is above the fold. The conversion-
 * anchored CTA at the bottom of the rate-panel stays where it is. */