/* ============================================================
   ToolHaven — landing page
   Visual language: Apple HIG (editorial minimalism)
   Ground #FFFFFF · Ink #1D1D1F · Muted #86868B · Accent #0071E3
   ============================================================ */

/* ── Self-hosted Inter Tight ───────────────────────────────
   Latin subset, only the three weights the page sets. Local rather
   than the Google CDN: it removes two third-party connections from
   the critical path, and the bytes were going to be fetched anyway.
   SIL OFL 1.1 — see assets/fonts/OFL.txt.                         */

@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("assets/fonts/inter-tight-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("assets/fonts/inter-tight-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("assets/fonts/inter-tight-600.woff2") format("woff2");
}

:root {
  /* Colour */
  --ground:      #ffffff;
  --ground-soft: #f5f5f7;
  --ground-deep: #000000;
  --ink:         #1d1d1f;
  --ink-onDark:  #f5f5f7;
  /* Secondary text needs a different value per ground: #6e6e73 clears
     4.5:1 on white and on #f5f5f7, but only reaches 4.14:1 on black,
     so the film section gets its own lighter token. */
  --muted:       #6e6e73;
  --muted-onDark:#98989d;
  --ink-soft:    #424245;
  --accent:      #0066cc;
  --accent-hover:#0058b0;
  --hairline:    #d2d2d7;
  --hairline-onDark: #2a2a2c;

  /* Space — 4 / 8 / 16 / 24 / 40 / 64 / 96 / 160 */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2.5rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 10rem;

  /* Radius */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 22px;

  /* Motion — expo-out, never bouncy */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-hover: 200ms;
  --dur-move:  520ms;

  --measure: 42rem;
  --shell:   min(1120px, 100% - 3rem);
}

/* ── Reset ────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Inter Tight", "Segoe UI Variable Text", system-ui, sans-serif;
  font-size: 1.0625rem;          /* 17px, Apple's body */
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: var(--s-3) var(--s-4);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: var(--shell); margin-inline: auto; }
.mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 0.9em; }
.muted { color: var(--muted); }

/* ── Type scale ───────────────────────────────────────────────
   Tracking is size-specific: negative as text grows, near zero
   at body size. Leading tightens as size increases.            */

.display {
  margin: 0 0 var(--s-4);
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.display__muted { color: var(--muted); }

.headline {
  margin: 0 0 var(--s-4);
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.09;
  letter-spacing: -0.021em;
  text-wrap: balance;
}
.headline--onDark { color: var(--ink-onDark); }

.lede {
  max-width: var(--measure);
  margin: 0 0 var(--s-5);
  font-size: clamp(1.125rem, 1.65vw, 1.375rem);
  line-height: 1.42;
  letter-spacing: -0.011em;
  color: var(--muted);
  text-wrap: pretty;
}

.body {
  max-width: var(--measure);
  margin: 0 0 var(--s-4);
  letter-spacing: 0;
  color: var(--muted);
  text-wrap: pretty;
}
.body--onDark { color: var(--muted-onDark); }

.eyebrow {
  margin: 0 0 var(--s-3);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.055em;       /* positive tracking: small text */
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--onDark { color: #6ea8ff; }

.fineprint {
  margin: var(--s-4) 0 0;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  max-width: var(--measure);
}

/* ── Link CTA (Apple never puts a chunky button in the hero) ── */

.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--accent);
  font-size: 1.1875rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease);
}
.link-cta span { transition: transform var(--dur-hover) var(--ease); }
.link-cta:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 0.28em; }
.link-cta:hover span { transform: translateX(3px); }
.link-cta--sm { font-size: 1rem; }

/* ── Nav: translucent chrome, content scrolls under ─────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  /* No hard divider — the edge appears only once content is under it */
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 400ms var(--ease), background 400ms var(--ease);
}
.nav.is-stuck {
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.09);
}
.nav__inner {
  width: var(--shell); margin-inline: auto;
  height: 3.25rem;
  display: flex; align-items: center; justify-content: space-between;
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none;
}
.nav__mark { border-radius: 6px; }
.nav__links {
  display: flex; align-items: center; gap: var(--s-4);
  font-size: 0.8125rem; letter-spacing: 0.005em;
}
.nav__links a { color: var(--ink-soft); text-decoration: none; transition: color var(--dur-hover) var(--ease); }
.nav__links a:hover { color: var(--ink); }
.nav__cta { color: var(--accent) !important; font-weight: 500; }

/* ── Hero ─────────────────────────────────────────────────── */

.hero { padding-top: clamp(4rem, 9vw, 7.5rem); text-align: center; }
.hero .lede { margin-inline: auto; }
.hero .fineprint { margin-inline: auto; }

.hero__stage {
  width: min(1240px, 100% - 2rem);
  margin: clamp(3rem, 6vw, 5.5rem) auto 0;
}

.shot {
  width: 100%;
  border-radius: var(--r-md);
  border: 1px solid rgba(0, 0, 0, 0.08);
  /* Elevation stays whisper-quiet: the screenshot is a window on paper */
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.22),
              0 2px 6px rgba(0, 0, 0, 0.03);
}

/* ── Figures ──────────────────────────────────────────────── */

.figures { padding: var(--s-8) 0; }
.figures__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-6) var(--s-5);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-6);
}
.figure__value {
  margin: 0 0 var(--s-2);
  font-size: clamp(3rem, 6vw, 4.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}
.figure__unit {
  font-size: 0.42em; font-weight: 500; letter-spacing: -0.01em;
  margin-left: 0.15em; color: var(--muted);
}
.figure__label { margin: 0; max-width: 17rem; color: var(--muted); font-size: 0.9375rem; }

/* ── Bands ────────────────────────────────────────────────── */

.band { padding: var(--s-8) 0; }
.band--alt { background: var(--ground-soft); }

/* ── Ledger (what ships where) ────────────────────────────── */

.ledger { margin: var(--s-6) 0 0; }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) 1fr;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--hairline);
}
.ledger__row:last-child { border-bottom: 1px solid var(--hairline); }
.ledger dt { font-weight: 600; letter-spacing: -0.01em; }
.ledger dd { margin: 0; color: var(--muted); }

/* ── Film: the one black moment ───────────────────────────── */

.film {
  background: var(--ground-deep);
  color: var(--ink-onDark);
  /* Padded on both edges: the shot is framed by the black, not clipped
     by it. A half-cut screenshot reads as a bug, not as a bleed. */
  padding: var(--s-8) 0;
}
.film__stage {
  width: min(1240px, 100% - 2rem);
  margin: clamp(3rem, 6vw, 5rem) auto 0;
}
.shot-swap { position: relative; }
.shot-swap .shot {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}
.shot--b {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
/* Cross-fade, not a slide: the two states occupy the same space */
.shot--a, .shot--b {
  opacity: 0;
  transition: opacity var(--dur-move) var(--ease);
}
.shot--a.is-visible, .shot--b.is-visible { opacity: 1; }

/* ── Segmented switch ─────────────────────────────────────── */

.switch {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border-radius: 980px;               /* Apple's pill */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.switch__btn {
  position: relative; z-index: 1;
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 0.5rem 1.25rem;
  border-radius: 980px;
  font: inherit; font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--muted-onDark);
  transition: color var(--dur-hover) var(--ease);
}
.switch__btn.is-active { color: var(--ground-deep); }
.switch__thumb {
  /* left stays 0: the offset comes entirely from JS, measured off the
     real button box, so there is no padding constant to keep in sync. */
  position: absolute; z-index: 0; top: 3px; left: 0;
  height: calc(100% - 6px);
  border-radius: 980px;
  background: var(--ink-onDark);
  /* Width and X are set from JS so the thumb tracks the real button box */
  transition: transform var(--dur-move) var(--ease),
              width var(--dur-move) var(--ease);
}

/* ── Tools list ───────────────────────────────────────────── */

.tools {
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0 var(--s-6);
}
.tools li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  padding: 0.875rem 0;
  border-top: 1px solid var(--hairline);
}
.tools__name { font-weight: 500; letter-spacing: -0.008em; }
.tools__use { color: var(--muted); font-size: 0.875rem; text-align: right; }


/* ── FAQ ──────────────────────────────────────────────────── */

.faq { margin-top: var(--s-6); max-width: 52rem; }
.faq__item { border-top: 1px solid var(--hairline); }
.faq__item:last-child { border-bottom: 1px solid var(--hairline); }
.faq__item summary {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-4) 0;
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.008em;
  cursor: pointer; list-style: none;
  transition: color var(--dur-hover) var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; margin-left: auto; flex: none;
  font-size: 1.25rem; font-weight: 400; line-height: 1; color: var(--muted);
  transition: transform var(--dur-move) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--accent); }
.faq__item p {
  margin: 0 0 var(--s-4);
  max-width: var(--measure);
  color: var(--muted);
  text-wrap: pretty;
}
.faq__item a { color: var(--accent); text-decoration: none; }
.faq__item a:hover { text-decoration: underline; text-underline-offset: 0.22em; }

/* Prose links inside body copy: underlined so they read as links
   without relying on colour alone. */
.body a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.fineprint a { color: var(--accent); }

/* ── Download ─────────────────────────────────────────────── */

.formats {
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s-5);
}
.format {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
}
.format__head { display: flex; flex-direction: column; gap: 0.15rem; }
.format__name { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.015em; }
.format__size { margin: 0; font-size: 0.8125rem; color: var(--muted); letter-spacing: 0.01em; }
.format__note { margin: 0; flex: 1; color: var(--muted); font-size: 0.9375rem; }

/* ── Footer ───────────────────────────────────────────────── */

.footer { background: var(--ground-soft); padding: var(--s-6) 0; }
.footer__inner { display: grid; gap: var(--s-4); }
.footer__brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em;
}
.footer__brand img { border-radius: 5px; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: 0.8125rem; }
.footer__links a { color: var(--accent); text-decoration: none; }
.footer__links a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.footer__legal { margin: 0; font-size: 0.8125rem; color: var(--muted); max-width: var(--measure); }

/* ── Scroll reveal ────────────────────────────────────────── */

/* Gated on .js: content is visible by default and only hidden when a
   script exists to bring it back. Never hide content behind JavaScript. */
.js .reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 46rem) {
  :root { --s-8: 5.5rem; --s-7: 4rem; }
  .nav__links a:not(.nav__cta) { display: none; }
  .ledger__row { grid-template-columns: 1fr; gap: var(--s-1); }
  .tools li { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .tools__use { text-align: left; }
}


/* Touch pointers get targets that clear 44px regardless of type size. */
@media (pointer: coarse) {
  .nav__links a { padding-block: 0.75rem; }
  .switch__btn { padding-block: 0.75rem; }
  .footer__links a { padding-block: 0.35rem; }
  .faq__item summary { padding-block: var(--s-4); }
}

/* ── Accessibility preferences ────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Motion is removed; the feedback survives as a cross-fade */
  .js .reveal { transform: none; transition: opacity 300ms linear; }
  .switch__thumb { transition: none; }
  .link-cta span { transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--ground); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .switch { background: rgba(255, 255, 255, 0.18); }
}

@media (prefers-contrast: more) {
  :root { --muted: #55555a; --hairline: #a1a1a6; }
  .nav { background: var(--ground); backdrop-filter: none; }
  .shot { border-color: rgba(0, 0, 0, 0.35); }
}

@media print {
  .nav, .switch { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}