/* ==========================================================================
   refresh.css: Apple-design polish layer (Sep 2026).
   Loaded LAST on every page, so it only refines what the other stylesheets
   already do. To roll the whole refresh back, remove its <link> tag.
   Principles: instant response, spring-like easing, translucent materials,
   size-specific tracking, consistent surfaces, visible focus, inline checks.
   ========================================================================== */

:root {
  --rs-accent: var(--color-gold);
  --rs-accent-rgb: var(--color-gold-rgb);
  --rs-accent-fill: var(--color-gold);
}

/* --------------------------------------------------------------------------
   1. Motion tokens: critically-damped, spring-like ease-out. Hovers and
      state changes settle quickly instead of drifting (0.3s "ease").
   -------------------------------------------------------------------------- */
:root {
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-default: var(--ease-out-soft);
  --ease-smooth: var(--ease-out-soft);
  --duration-fast: 0.22s;
  --duration-press: 0.09s;

  --rs-card-radius: 22px;
  --rs-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.018) 100%);
  --rs-surface-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.065) 0%, rgba(255, 255, 255, 0.025) 100%);
  --rs-edge: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --rs-depth: 0 1px 2px rgba(0, 0, 0, 0.35), 0 16px 40px -20px rgba(0, 0, 0, 0.7);
  --rs-depth-hover: 0 2px 4px rgba(0, 0, 0, 0.35), 0 28px 60px -24px rgba(0, 0, 0, 0.85);
  --rs-border: rgba(255, 255, 255, 0.075);
  --rs-error: #FF6961;
}

/* --------------------------------------------------------------------------
   2. Typography: size-specific tracking and leading. Big type tightens,
      body stays at 0, small mono labels open up. Balanced headline breaks.
   -------------------------------------------------------------------------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 {
  text-wrap: balance;
  font-optical-sizing: auto;
}

p, li, .section-subtitle {
  text-wrap: pretty;
}

.hero h1 {
  letter-spacing: -0.035em;
  line-height: 1.03;
}

.section-title,
.final-cta-title,
.page-hero h1 {
  letter-spacing: -0.03em;
  line-height: 1.07;
}

h3 {
  letter-spacing: -0.015em;
}

.section-subtitle,
.hero-subtitle {
  line-height: 1.55;
  letter-spacing: -0.005em;
}

.telemetry,
.hero-badge {
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   3. Frosted header: a translucent material with content scrolling under it.
      At the top it is borderless; once scrolled, a soft shadow separates it
      instead of a hard 1px line.
   -------------------------------------------------------------------------- */
.site-nav {
  background: rgba(10, 10, 10, 0.58);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
          backdrop-filter: blur(22px) saturate(170%);
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

.site-nav.is-scrolled {
  background: rgba(10, 10, 10, 0.7);
  border-bottom-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}

@media (max-width: 900px) {
  .nav-menu {
    background: rgba(12, 12, 12, 0.94);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
            backdrop-filter: blur(22px) saturate(170%);
  }
}

/* --------------------------------------------------------------------------
   4. Buttons: capsule shape, lit top edge, instant press feedback.
      Hover brightens the gradient instead of swapping it for a flat colour.
   -------------------------------------------------------------------------- */
.btn,
.nav-cta {
  border-radius: 999px;
  transition:
    transform var(--duration-fast) var(--ease-out-soft),
    box-shadow var(--duration-fast) var(--ease-out-soft),
    filter var(--duration-fast) var(--ease-out-soft),
    background-color var(--duration-fast) var(--ease-out-soft),
    border-color var(--duration-fast) var(--ease-out-soft),
    color var(--duration-fast) var(--ease-out-soft);
}

.btn-primary,
.nav-cta {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 24px -10px rgba(var(--rs-accent-rgb), 0.55);
}

.btn-primary:hover {
  background: var(--rs-accent-fill);
  filter: brightness(1.07) saturate(1.05);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 14px 36px -12px rgba(var(--rs-accent-rgb), 0.7);
}

.nav-cta:hover {
  filter: brightness(1.07);
}

.btn-lg.btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 32px -12px rgba(var(--rs-accent-rgb), 0.65);
}

.btn-secondary {
  box-shadow: var(--rs-edge);
}

.btn:active,
.nav-cta:active,
.tab:active,
.quiz-option:active,
.faq-question:active,
.footer-social-icon:active {
  transform: scale(0.97);
  filter: brightness(0.96);
  transition-duration: var(--duration-press);
}

/* --------------------------------------------------------------------------
   5. Cards: one surface language across both sites. Soft vertical gradient,
      light catching the top edge, real depth; hover lifts a little and
      deepens the shadow (transform/shadow only, no "transition: all").
   -------------------------------------------------------------------------- */
.icp-card,
.product-card,
.testimonial-card,
.fit-card,
.tier-card,
.value-card,
.audience-card,
.offer-card,
.buyer-card,
.compare-card,
.offer-form-shell,
.spec-table-wrap {
  border-radius: var(--rs-card-radius);
  border-color: var(--rs-border);
  box-shadow: var(--rs-edge), var(--rs-depth);
  transition:
    transform var(--duration-fast) var(--ease-out-soft),
    box-shadow var(--duration-fast) var(--ease-out-soft),
    border-color var(--duration-fast) var(--ease-out-soft),
    background var(--duration-fast) var(--ease-out-soft);
}

.icp-card,
.product-card:not(.product-card-featured),
.testimonial-card,
.fit-card-no,
.tier-card:not(.tier-card-featured),
.value-card,
.audience-card,
.offer-card,
.buyer-card,
.compare-card:not(.is-us),
.offer-form-shell {
  background: var(--rs-surface);
}

.icp-card:hover,
.product-card:hover,
.testimonial-card:hover,
.value-card:hover,
.offer-card:hover,
.buyer-card:hover,
.audience-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--rs-accent-rgb), 0.28);
  box-shadow: var(--rs-edge), var(--rs-depth-hover);
}

.icp-card:hover,
.value-card:hover,
.testimonial-card:hover {
  background: var(--rs-surface-hover);
}

/* Featured / highlighted cards keep their glow, plus the shared edge + depth. */
.product-card-featured,
.tier-card-featured,
.fit-card-yes,
.compare-card.is-us {
  box-shadow: var(--rs-edge), var(--rs-depth), 0 0 0 1px rgba(var(--rs-accent-rgb), 0.12), 0 20px 60px -30px rgba(var(--rs-accent-rgb), 0.55);
}

/* Small interactive surfaces: pills, tabs, quiz answers. */
.tab,
.quiz-option,
.credibility-chip,
.specialty-tag {
  transition:
    transform var(--duration-fast) var(--ease-out-soft),
    background var(--duration-fast) var(--ease-out-soft),
    border-color var(--duration-fast) var(--ease-out-soft),
    color var(--duration-fast) var(--ease-out-soft);
}

.quiz-option {
  border-radius: 14px;
}

/* --------------------------------------------------------------------------
   6. Section rhythm: a little more air between header and content, and
      subtitles held to a comfortable reading width.
   -------------------------------------------------------------------------- */
.section-title {
  margin-bottom: var(--space-sm);
}

.section-subtitle {
  max-width: 34em;
}

/* --------------------------------------------------------------------------
   7. Modal: materialises (scale + blur settle) rather than just fading,
      over a dimmed, blurred page.
   -------------------------------------------------------------------------- */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.66);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
}

.modal-card {
  border-radius: 26px;
  box-shadow: var(--rs-edge), 0 40px 100px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(var(--rs-accent-rgb), 0.18);
  transform: translateY(16px) scale(0.96);
  filter: blur(4px);
  transition:
    transform 0.34s var(--ease-out-soft),
    filter 0.34s var(--ease-out-soft);
}

.modal.is-open .modal-card {
  transform: none;
  filter: none;
}

/* --------------------------------------------------------------------------
   8. Keyboard focus: one clear, consistent ring (was mostly missing).
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--rs-accent);
  outline-offset: 3px;
  border-radius: 10px;
}

.btn:focus-visible,
.nav-cta:focus-visible {
  outline-offset: 4px;
  border-radius: 999px;
}

.offer-input:focus-visible,
.offer-form select:focus-visible,
.offer-form textarea:focus-visible,
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible,
.quiz-email-input:focus-visible {
  outline: none;
  border-color: var(--rs-accent);
  box-shadow: 0 0 0 4px rgba(var(--rs-accent-rgb), 0.18);
}

/* --------------------------------------------------------------------------
   9. Inline form checks (field-check.js): a field flags itself when left
      empty or wrong, and clears the moment it is fixed.
   -------------------------------------------------------------------------- */
[aria-invalid="true"] {
  border-color: var(--rs-error) !important;
}

[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 4px rgba(255, 105, 97, 0.18) !important;
}

.field-hint {
  margin: 6px 2px 0;
  color: var(--rs-error);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: left;
  animation: rs-hint-in 0.2s var(--ease-out-soft);
}

.field-hint[hidden] {
  display: none;
}

@keyframes rs-hint-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   10. Accessibility preferences.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .nav-cta:active,
  .tab:active,
  .quiz-option:active,
  .faq-question:active {
    transform: none;
  }

  .icp-card:hover,
  .product-card:hover,
  .testimonial-card:hover,
  .value-card:hover,
  .offer-card:hover,
  .buyer-card:hover,
  .audience-card:hover,
  .btn-primary:hover {
    transform: none;
  }

  .modal-card {
    transform: none;
    filter: none;
    transition: none;
  }

  .field-hint {
    animation: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-nav,
  .site-nav.is-scrolled,
  .nav-menu {
    background: #0a0a0a;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }

  .modal-backdrop {
    background: rgba(0, 0, 0, 0.9);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .site-nav {
    background: #0a0a0a;
    border-bottom-color: rgba(255, 255, 255, 0.35);
  }

  .icp-card, .product-card, .testimonial-card, .fit-card, .tier-card, .value-card,
  .audience-card, .offer-card, .buyer-card, .compare-card, .offer-form-shell, .spec-table-wrap {
    border-color: rgba(255, 255, 255, 0.35);
  }
}