/*
 * Apple-style design layer (see SKILL.md).
 *
 * Presentation only: no layout, display, position, form, or content changes.
 * Linked AFTER each page's own stylesheets. Everything here is a refinement of
 * surfaces, type, press feedback and motion, so it can be removed by deleting
 * the <link> tag without touching any behavior.
 */

:root {
  /* Critically damped feel: fast start, no overshoot (damping 1.0) */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --press-duration: 120ms;
  --settle-duration: 380ms;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.05), 0 18px 48px rgba(15, 23, 42, 0.12);
  --material-edge: rgba(255, 255, 255, 0.55);
  --focus-ring: 0 0 0 3px rgba(16, 71, 147, 0.28);
}

body.dark-theme {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 18px 48px rgba(0, 0, 0, 0.5);
  --material-edge: rgba(255, 255, 255, 0.08);
  --focus-ring: 0 0 0 3px rgba(147, 186, 255, 0.4);
}

/*=============== TYPOGRAPHY ===============*/
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

/* Size-specific tracking and leading: tighter as type grows, body stays near 0 */
h1 {
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}
h2 {
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
h3 {
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;
}
p,
li {
  text-wrap: pretty;
}

::selection {
  background: rgba(16, 71, 147, 0.18);
}

/*=============== MATERIALS ===============*/
/* Translucent chrome: content scrolls underneath instead of an opaque strip */
.header {
  background-color: color-mix(in srgb, var(--body-color, #f5f7fa) 72%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.06);
}
body.dark-theme .header {
  background-color: color-mix(in srgb, var(--body-color, #0f172a) 70%, transparent);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}
.scroll-header {
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06);
}

/* Bottom tab bar on mobile uses the same material */
.mobile-tabs {
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--material-edge);
}

/* Slide-over menu is a thicker surface than the header */
@media screen and (max-width: 767px) {
  .nav__menu {
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    transition: right var(--settle-duration) var(--ease-spring);
  }
}

/*=============== SURFACES ===============*/
.card,
.steps__card,
.pricing-tier,
.questions__item,
.policy-content,
.form-container,
.radio-option {
  border-radius: var(--radius-xl, 16px);
  transition:
    transform var(--settle-duration) var(--ease-spring),
    box-shadow var(--settle-duration) var(--ease-spring),
    border-color 200ms ease,
    background-color 200ms ease;
}

.card,
.steps__card,
.policy-content,
.form-container {
  box-shadow: var(--shadow-md);
}

@media (hover: hover) and (pointer: fine) {
  .steps__card:hover,
  .pricing-tier:hover,
  .radio-option:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
}

/*=============== CONTROLS ===============*/
.button,
button,
[role="button"],
input[type="submit"],
input[type="button"],
.mobile-tabs__item,
.footer-social a,
.change-theme {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* removes the tap delay */
}

.button {
  border-radius: 14px;
  letter-spacing: 0;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--press-duration) ease-out,
    background-color 200ms ease,
    box-shadow var(--settle-duration) var(--ease-spring);
}
.button:hover {
  box-shadow: var(--shadow-md);
}

/* Feedback on press, not on release */
.button:active,
button:not(:disabled):active,
[role="button"]:active,
input[type="submit"]:not(:disabled):active,
input[type="button"]:not(:disabled):active,
.pricing-tier:active,
.radio-option:active,
.footer-social a:active,
.change-theme:active {
  transform: scale(0.97);
  transition-duration: var(--press-duration);
}

/* Fields: soft ring that appears at once, never removing the native outline
   unless the ring replaces it */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  border-radius: 12px;
  transition:
    box-shadow 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid transparent; /* stays visible in forced-colors mode */
  box-shadow: var(--focus-ring);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-color, #104793);
  outline-offset: 3px;
  border-radius: 6px;
}

/*=============== MEDIA ===============*/
img {
  image-rendering: auto;
}
.home__img img,
.about__img img {
  border-radius: var(--radius-xl, 16px);
}

/* In-page anchors land clear of the fixed header */
[id] {
  scroll-margin-top: calc(var(--header-height, 3.5rem) + 1rem);
}

/*=============== ACCESSIBILITY ===============*/
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  /* Keep opacity/color changes, drop movement */
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
  .steps__card:hover,
  .pricing-tier:hover,
  .radio-option:hover,
  .button:active,
  button:active,
  [role="button"]:active,
  .pricing-tier:active,
  .radio-option:active {
    transform: none;
  }
  .nav__menu {
    transition: opacity 200ms ease;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .header,
  .mobile-tabs,
  .nav__menu {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--body-color, #fff);
  }
}

@media (prefers-contrast: more) {
  .header,
  .mobile-tabs {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--body-color, #fff);
    box-shadow: inset 0 -1px 0 currentColor;
  }
  .card,
  .steps__card,
  .pricing-tier,
  .policy-content,
  .form-container {
    border: 1px solid currentColor;
  }
}