/* ==========================================================================
   iSix — Base layer
   Reset, document defaults, accessibility utilities, motion guard.
   Depends on tokens.css. Load order: tokens → base → components → page.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Notched-device safety; harmless elsewhere. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

a { text-decoration: none; color: inherit; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
  /* Without this the browser holds every tap back while it waits to see
     whether a second one is coming (double-tap zoom). `manipulation` keeps
     panning and pinch-zoom but drops that wait, so a single tap on a control
     dispatches its click straight away instead of after the gesture timeout. */
  touch-action: manipulation;
}

/* Same reasoning for the other things a finger lands on. */
a, label, summary, [role="button"] { touch-action: manipulation; }

input, select, textarea { font: inherit; color: inherit; }

img, svg, video { max-width: 100%; height: auto; }

/* The [hidden] attribute must beat component display rules — the search
   filter toggles it on elements that are display:grid. */
[hidden] { display: none !important; }

h1, h2, h3, h4 { line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h1 { font-size: var(--fs-xl);  font-weight: 800; }
h2 { font-size: var(--fs-lg);  font-weight: 700; }
h3 { font-size: var(--fs-md);  font-weight: 700; }

/* Tabular figures everywhere money appears. */
.num, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   Focus — visible for keyboard, quiet for pointer
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--accent, var(--accent-purchase));
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   Accessibility utilities
   ========================================================================== */

/* Visually hidden but available to screen readers. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first focusable element on every page. */
.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--elevation-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: transform var(--dur-quick) var(--ease-signature);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ==========================================================================
   Scrollbar
   ========================================================================== */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* ==========================================================================
   Reveal primitives

   CRITICAL: content must never depend on JavaScript to become visible.
   Elements are fully visible by default. Only once isix-motion.js has
   confirmed that GSAP loaded AND the user has not asked for reduced motion
   does it set [data-anim="ready"] on <html>, which arms the hidden state.
   If the script fails, the CDN is blocked, or JS is off, every number on the
   page still renders. See modern-web-design "Pitfall 3: Missing Fallbacks".
   ========================================================================== */

[data-anim="ready"] .reveal { opacity: 0; }

/* ==========================================================================
   Reduced motion — honoured 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;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}