/* ============================================================
   YachtSync — shared craft layer
   Loaded on every page after the brand fonts, before each page's
   inline <style>. Purely additive global refinements: typographic
   craft, motion tokens, focus/selection/scrollbar. Does NOT change
   layout, colours or fonts — those live in the brand kit (Fraunces +
   Inter + navy/teal/cream) and each page's own styles.
   Brand kit: YachtSync_Social_Brand_Kit v1.0 (May 2026).
   ============================================================ */

:root {
  /* Motion — confident, smooth easing instead of plain `ease` */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Premium shadow scale (navy-tinted, maritime depth) */
  --shadow-sm: 0 2px 8px -2px rgba(8, 21, 36, 0.12);
  --shadow-md: 0 12px 30px -12px rgba(8, 21, 36, 0.22);
  --shadow-lg: 0 28px 64px -24px rgba(8, 21, 36, 0.34);
}

/* ---- Typographic craft: the core "less AI, more crafted" fix ----
   optimizeLegibility + grayscale smoothing + kerning/ligatures make
   Inter and Fraunces render with intent rather than as flat defaults. */
html { -webkit-text-size-adjust: 100%; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  letter-spacing: -0.011em; /* subtle Inter tightening — premium, not loose */
}

/* Fraunces: use its high-contrast DISPLAY optical master at large sizes
   and switch on ligatures. This is the single biggest lift away from the
   generic "webfont serif" look. */
.display,
h1, h2, h3,
.feature h3, .step h3, .plan-name, .about-text,
.gc-head h2, .gc-cta-copy h3, .gc-shot figcaption,
.footer-col h4, .footer-col-label, .guide-header h1, .guide-content h2, .guide-content h3 {
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144;
  font-feature-settings: "liga" 1, "dlig" 1, "kern" 1;
}

/* Tabular figures everywhere numbers carry meaning (prices, steps, stats) */
.trust-item strong, .plan-amount, .feature-num,
.step::before, .gc-tag, .plan-price {
  font-feature-settings: "tnum" 1, "kern" 1;
}

/* Long-form measure: keep guide/body copy readable */
.guide-content p, .hero-sub, .section-head p { text-wrap: pretty; }
h1, h2, h3, .display { text-wrap: balance; }

/* ---- Selection: on-brand, not browser-default blue ---- */
::selection { background: rgba(58, 158, 143, 0.28); color: #081524; }

/* ---- Accessible focus ring (keyboard only) ---- */
:focus-visible {
  outline: 2px solid #3A9E8F;
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Refined scrollbar (desktop) ---- */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: rgba(58,158,143,0.45) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb {
    background: rgba(58, 158, 143, 0.45);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
  }
  *::-webkit-scrollbar-thumb:hover { background: rgba(58, 158, 143, 0.7); background-clip: padding-box; }
}

/* ---- Smoother default link/interaction easing site-wide ---- */
a, button { transition-timing-function: var(--ease-out); }

/* ---- Nav wordmark (replaces badge image — crisp at any size) ---- */
.nav-wordmark {
  font-family: Inter, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #F0EDE6;
  text-decoration: none;
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-block;
}
.nav-wordmark .ys-teal { color: #4DBFB0; }

/* ---- Image rendering crispness for screenshots/logos ---- */
img { image-rendering: -webkit-optimize-contrast; }

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