/* ==========================================================================
   Base: reset, typography, shared components (buttons, pills)
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* The page scrollbar wears the brand: ink track, lime thumb with rounded ends. Desktop pointers only (phones keep their own overlay scrollbar).
   Chrome / Edge / Safari draw it with the -webkit pseudo-elements (that is what allows round ends); Firefox has no way to round it, so it gets the thin standard one.
   The standard scrollbar-color / scrollbar-width are NOT set for Chrome: they would switch the -webkit rules off. */
@media (hover: hover) and (pointer: fine) {
  html::-webkit-scrollbar { width: 14px; height: 14px; background: var(--c-ink); }
  html::-webkit-scrollbar-track { background: var(--c-ink); }
  html::-webkit-scrollbar-thumb { min-height: 56px; background: var(--c-lime); border: 4px solid var(--c-ink); border-radius: 999px; }
  html::-webkit-scrollbar-thumb:hover { background: var(--c-paper); }
}
@supports (-moz-appearance: none) { html { scrollbar-width: thin; scrollbar-color: var(--c-lime) var(--c-ink); } }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 20px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Safety net: nothing inside the page can make it wider than the screen. overflow-x: clip is not a scroll container (sticky keeps working) and, unlike hidden on <body>, it also keeps
   clipped content out of the document's scrollable width. Without it a fast swipe past the compare table made mobile browsers widen the layout viewport to 960px and zoom the page out. */
main, .footer { overflow-x: clip; }

img, svg, video { display: block; max-width: 100%; }
/* <img data-ar> carries its natural width/height so the browser reserves the space before the file arrives (no layout shift). These two zero-specificity declarations make those attributes a pure aspect-ratio hint: every CSS size still wins, so the rendered size is unchanged. */
:where(img[data-ar]) { width: auto; height: auto; }
/* Deterrent (see js/main.js, "Media protection"): no drag-out, no selection highlight, no long-press "save image" sheet on iOS. Nothing changes on screen. */
img, video, picture { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
a { color: inherit; text-decoration: none; }
/* Links to pages that do not exist yet are <a> without href (scripts/links.config.js): keep the hand cursor they always had, so nothing changes until the page exists. */
a:is([data-link], [data-nolink]):not([href]) { cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

.font-display { font-family: var(--f-display); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Section scaffolding — every top-level section is a GSAP/ScrollTrigger target */
.section { position: relative; width: 100%; }
.section--dark { background: var(--c-ink); color: var(--c-white); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0; width: 160px;
  border-radius: var(--r-pill);
  font-size: 18px; line-height: 1; white-space: nowrap;
  transition: transform .35s var(--ease-out), background-color .25s, color .25s;
}
.btn--lime    { background: var(--c-lime); color: var(--c-ink); }
.btn--outline { border: 1px solid var(--c-lime); color: var(--c-lime); }
.btn--outline:hover { background: var(--c-lime); color: var(--c-ink); }
.btn--block { width: 100%; height: 52px; font-size: 16px; margin-top: 20px; }
.btn--purple { background: var(--c-purple); color: #fff; }
.btn--orange { background: var(--c-orange); color: #fff; }

/* Card buttons (Explore …): same inverting hover as the hero buttons - a circular fill grows from the bottom edge.
   Lime → dark fill, lime text; purple / orange → dark fill, white text. */
.btn--block {
  position: relative; overflow: hidden; isolation: isolate; --fill: var(--c-ink);
  transition: color .45s var(--ease-out) .05s, transform .4s var(--ease-out);
}
.btn--block::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 100%; width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: var(--fill); transform: translate(-50%, -50%) scale(0);
  transition: transform .7s var(--ease-out);
}
.btn--block.btn--lime:hover { color: var(--c-lime); }
.btn--block:hover::before, .btn--block:focus-visible::before { transform: translate(-50%, -50%) scale(1.15); }
.btn--block:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .btn--block, .btn--block::before { transition-duration: .01ms; } }

/* ---------- Pill tags ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 20px;
  border: 1px solid #fff; border-radius: 20px;
  color: #fff; font-size: 12px; white-space: nowrap;
  transition: background-color .25s, color .25s;
}
.pill:hover { background: #fff; color: var(--c-ink); }

/* ---------- One hover for every button (Nov 2026) ----------
   Every .btn gets the site's hover: a circular fill rises from the bottom edge and the label inverts.
   Lime buttons keep a 1px lime outline, so on a dark background the hovered button stays visible as a lime-outlined dark pill
   (before, the dark fill matched the background and the button disappeared). Section rules above may set their own --fill. */
.btn { position: relative; overflow: hidden; isolation: isolate; --fill: var(--c-ink);
  transition: color .45s var(--ease-out) .05s, transform .4s var(--ease-out); }
.btn::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 100%; width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: var(--fill); transform: translate(-50%, -50%) scale(0); transition: transform .7s var(--ease-out); }
.btn:hover::before, .btn:focus-visible::before { transform: translate(-50%, -50%) scale(1.15); }
.btn:active { transform: scale(.98); }
.btn--lime { border: 1px solid var(--c-lime); }
.btn--lime:hover, .btn--lime:focus-visible { color: var(--c-lime); }
.btn--outline { --fill: var(--c-lime); }
.btn--outline:hover, .btn--outline:focus-visible { background: transparent; color: var(--c-ink); }
.btn--purple:hover, .btn--orange:hover, .btn--purple:focus-visible, .btn--orange:focus-visible { color: #fff; }
.btn:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn, .btn::before { transition-duration: .01ms; } }