/* ===========================================================================
   MachineKept — design system
   ===========================================================================

   WHY THIS FILE EXISTS

   The marketing site was one 28KB HTML file with every token, component and
   media query inlined. That is fine for one page and untenable for nine: the
   moment there are industry pages, a pricing page and a demo, a button either
   gets redefined nine times or drifts nine ways. Both happen, usually at once.

   So the system lives here and every page links it. The pages stay static
   HTML, which keeps the GitHub Pages deploy a pure file copy — that
   constraint is load-bearing (see .github/workflows/deploy-site.yml, where a
   build step once took the whole site down) and nothing here changes it.

   HOW IT IS ORGANISED

     1. Tokens          — colour, type, space, radius, shadow
     2. Reset & base    — element defaults
     3. Layout          — containers, sections, grids
     4. Typography      — headings, lede, eyebrow
     5. Buttons & links
     6. Cards & surfaces
     7. Product UI      — the faux-app chrome used to show the product
     8. Components      — nav, footer, accordion, tabs, steps, calculator
     9. Motion          — reveal, hover, reduced-motion
    10. Utilities

   CONVENTIONS

   - Every colour is a token. No raw hex outside section 1.
   - Dark mode is a token override, not a parallel stylesheet.
   - Nothing here depends on JavaScript to become visible. Motion is additive:
     content renders at full opacity and JS opts into animating it. The site
     has already shipped one bug where a scroll-reveal left every below-fold
     section permanently invisible, and this is the structural fix.
   ======================================================================== */

/* ===== 1. Tokens ======================================================== */

:root {
  /* Neutrals — Apple-ish greys, warmed very slightly to avoid a clinical blue cast */
  --ink:        #1d1d1f;
  --ink-2:      #52525b;
  --ink-3:      #6e6e73;
  --bg:         #ffffff;
  --bg-alt:     #f5f5f7;
  --bg-sunk:    #ebebef;
  --card:       #ffffff;
  --hairline:   #d2d2d7;
  --hairline-2: #e8e8ed;

  /* Brand + status. One accent, used sparingly, so it still means "act here". */
  --blue:       #0071e3;
  --blue-hover: #0077ed;
  --blue-wash:  #eef4fe;
  --amber:      #b25000;
  --amber-wash: #fdf3e7;
  --green:      #0a7d33;
  --green-wash: #eaf6ed;
  --red:        #c11b17;
  --red-wash:   #fdeeed;

  --nav-bg:     rgba(255, 255, 255, .72);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, .06);
  --shadow:     0 4px 16px rgba(0, 0, 0, .07);
  --shadow-lg:  0 24px 60px rgba(0, 0, 0, .13), 0 6px 16px rgba(0, 0, 0, .06);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* A 4px scale. Anything not on it is a mistake, not a nuance. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 980px;

  --grid: 1040px;
  --grid-narrow: 760px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #f5f5f7;
    --ink-2:      #a1a1aa;
    --ink-3:      #86868b;
    --bg:         #000000;
    --bg-alt:     #0c0c0e;
    --bg-sunk:    #17171a;
    --card:       #1d1d1f;
    --hairline:   #3a3a3c;
    --hairline-2: #2c2c2e;

    --blue:       #2997ff;
    --blue-hover: #5aaeff;
    --blue-wash:  #11243a;
    --amber:      #ff9f0a;
    --amber-wash: #2e2008;
    --green:      #30d158;
    --green-wash: #0d2716;
    --red:        #ff453a;
    --red-wash:   #2e1210;

    --nav-bg:     rgba(0, 0, 0, .72);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, .5);
    --shadow:     0 4px 16px rgba(0, 0, 0, .55);
    --shadow-lg:  0 24px 60px rgba(0, 0, 0, .7), 0 6px 16px rgba(0, 0, 0, .5);
  }
}

/* ===== 2. Reset & base ================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* The sticky nav is 48px; without this an anchor lands under it. */
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Stops a wide child (a product table) scrolling the whole document
     sideways on a phone. Individual scrollers opt back in. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.08;
  text-wrap: balance;
}

p { margin: 0; }
img, svg { max-width: 100%; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Visible focus on every interactive thing. Keyboard users get the same
   affordances as everyone else, and :focus-visible keeps it off mouse clicks. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Skip link — first tab stop on every page. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff;
  padding: var(--s3) var(--s4); border-radius: 0 0 var(--r) 0;
  font-size: 14px; font-weight: 500;
}
.skip:focus { left: 0; text-decoration: none; }

/* ===== 3. Layout ======================================================== */

.wrap { max-width: var(--grid); margin-inline: auto; padding-inline: 22px; }
.wrap-narrow { max-width: var(--grid-narrow); margin-inline: auto; padding-inline: 22px; }

.section { padding: var(--s9) 0; }
.section-sm { padding: var(--s8) 0; }
.section-alt { background: var(--bg-alt); }
.center { text-align: center; }

@media (max-width: 734px) {
  .section { padding: var(--s8) 0; }
  .section-sm { padding: var(--s7) 0; }
}

.cols { display: grid; gap: var(--s5); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Collapse in two stages. Four across goes to two, not one, because a 2x2 of
   short cards reads better on a tablet than a 500px-tall column. */
@media (max-width: 980px) {
  .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
}

.split {
  display: grid; gap: var(--s8);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } }

/* ===== 4. Typography ==================================================== */

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: var(--s3);
}

.h-xl { font-size: clamp(40px, 7vw, 76px); line-height: 1.02; letter-spacing: -.022em; }
.h-lg { font-size: clamp(30px, 4.4vw, 48px); }
.h-md { font-size: clamp(23px, 3vw, 32px); }
.h-sm { font-size: 19px; letter-spacing: -.01em; }

.lede {
  font-size: clamp(17px, 2vw, 21px); line-height: 1.5;
  color: var(--ink-2); letter-spacing: -.014em;
  max-width: 62ch;
}
.center .lede { margin-inline: auto; }

.small { font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.tiny  { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s6); }

/* ===== 5. Buttons & links =============================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  background: var(--blue); color: #fff;
  font-family: var(--font); font-size: 17px; font-weight: 400; letter-spacing: -.022em;
  padding: 12px 24px; border: none; border-radius: var(--r-pill);
  cursor: pointer; transition: background .2s, transform .12s;
  text-align: center;
}
.btn:hover { background: var(--blue-hover); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }

.btn-ghost {
  background: transparent; color: var(--blue);
  border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent);
}
.btn-ghost:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

.btn-sm { font-size: 14px; padding: 8px 16px; }
.btn-lg { font-size: 18px; padding: 14px 30px; }

.chev { font-size: 17px; color: var(--blue); white-space: nowrap; }
.chev::after { content: '\00a0›'; }
.chev:hover { text-decoration: underline; }

.btn-row {
  display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center;
}
.center .btn-row { justify-content: center; }
/* On a narrow phone two side-by-side pills each get ~150px and wrap their
   labels to two lines. Full width is the readable answer. */
@media (max-width: 460px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* ===== 6. Cards & surfaces ============================================== */

.card {
  background: var(--card);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-lg);
  padding: var(--s5);
}

.card-link {
  display: block; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-link:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--blue) 30%, var(--hairline-2));
}
.card-link h3, .card-link .h-sm { color: var(--ink); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; letter-spacing: -.005em;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--bg-sunk); color: var(--ink-2);
}
.badge-ok    { background: var(--green-wash); color: var(--green); }
.badge-warn  { background: var(--amber-wash); color: var(--amber); }
.badge-alert { background: var(--red-wash);   color: var(--red); }
.badge-info  { background: var(--blue-wash);  color: var(--blue); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* A quiet band used for "this is a demo" / "illustrative only" notices. The
   product makes honesty claims all over this site; the UI has to carry them. */
.notice {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--amber-wash); color: var(--amber);
  border-radius: var(--r); padding: var(--s3) var(--s4);
  font-size: 14px; line-height: 1.45;
}
.notice strong { font-weight: 600; }

/* ===== 7. Product UI ==================================================== */
/* The faux-application chrome. MachineKept is software, so the product is the
   hero image — there is no stock photography anywhere on this site. These
   classes render a convincing app surface from markup alone: no screenshots to
   go stale, no images to ship, and it stays legible in dark mode. */

.app {
  background: var(--card);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  text-align: left;
}

.app-bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: 11px var(--s4);
  border-bottom: 1px solid var(--hairline-2);
  background: var(--bg-alt);
}
.app-dots { display: flex; gap: 6px; flex: none; }
.app-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--hairline); }
.app-title { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }

.app-body { padding: var(--s5); }

.app-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: 11px 0;
  border-top: 1px solid var(--hairline-2);
}
.app-row:first-child { border-top: 0; }
.app-row .grow { flex: 1; min-width: 0; }
.app-row .n { font-size: 14.5px; font-weight: 550; letter-spacing: -.01em; }
.app-row .m { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }

.app-stat {
  background: var(--bg-alt); border-radius: var(--r);
  padding: var(--s4); text-align: left;
}
.app-stat .v { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.app-stat .k { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.app-stat.is-warn .v  { color: var(--amber); }
.app-stat.is-alert .v { color: var(--red); }
.app-stat.is-ok .v    { color: var(--green); }

/* Phone shell, for the QR / technician views where the point is that this
   happens standing in front of the machine. */
.phone {
  width: min(300px, 78vw); aspect-ratio: 9 / 19.5;
  background: #1d1d1f; border-radius: min(44px, 10vw);
  padding: min(10px, 2.4vw);
  box-shadow: var(--shadow-lg);
  margin-inline: auto;
}
@media (prefers-color-scheme: dark) { .phone { background: #2b2b2e; } }
.phone-screen {
  width: 100%; height: 100%; background: var(--bg-alt);
  border-radius: min(35px, 8vw); overflow: hidden;
  display: flex; flex-direction: column; text-align: left;
}
@media (prefers-color-scheme: dark) { .phone-screen { background: #000; } }
.phone-head { padding: 26px var(--s4) var(--s3); }
.phone-body { flex: 1; padding: 0 var(--s3); display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.phone-foot { padding: var(--s3); }

/* ===== 8. Components =================================================== */

/* -- Nav ---------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 100;
  height: 48px; background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 55%, transparent);
}
.nav-inner {
  max-width: var(--grid); margin-inline: auto; padding-inline: 22px;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
}
.nav-brand {
  font-size: 15.5px; font-weight: 600; color: var(--ink);
  letter-spacing: -.015em; flex: none;
}
.nav-brand:hover { text-decoration: none; }

.nav-links { display: flex; align-items: center; gap: var(--s5); }
.nav-links > a, .nav-drop > button {
  font-family: var(--font); font-size: 12.5px; color: var(--ink);
  background: none; border: 0; padding: 0; cursor: pointer;
  letter-spacing: -.01em; opacity: .88; white-space: nowrap;
}
.nav-links > a:hover, .nav-drop > button:hover { opacity: 1; text-decoration: none; }

.nav-actions { display: flex; align-items: center; gap: var(--s4); flex: none; }
.nav-signin { font-size: 12.5px; color: var(--ink); opacity: .88; }
.nav-signin:hover { opacity: 1; text-decoration: none; }
.nav-cta {
  font-size: 12.5px; font-weight: 500;
  padding: 5px 13px; border-radius: var(--r-pill);
  background: var(--blue); color: #fff;
}
.nav-cta:hover { background: var(--blue-hover); text-decoration: none; }

/* Dropdown. Opens on hover for pointers and on click/Enter for keyboards and
   touch — hover alone is unreachable on a phone and invisible to a keyboard. */
.nav-drop { position: relative; }
.nav-drop > button::after { content: ' ⌄'; opacity: .6; }
.nav-panel {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(-4px);
  min-width: 230px; padding: var(--s3);
  background: var(--card); border: 1px solid var(--hairline-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s, visibility .16s;
}
.nav-drop:hover .nav-panel,
.nav-drop:focus-within .nav-panel,
.nav-drop[data-open="true"] .nav-panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-panel a {
  display: block; padding: 7px 10px; border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--ink); letter-spacing: -.01em;
}
.nav-panel a:hover { background: var(--bg-alt); text-decoration: none; }
.nav-panel .k { font-size: 11px; color: var(--ink-3); display: block; margin-top: 1px; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; color: var(--ink); }

/* Below 900px the inline menu cannot fit, so it becomes a sheet under the bar. */
@media (max-width: 900px) {
  .nav-links {
    position: fixed; inset: 48px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--hairline-2);
    padding: var(--s3) 22px var(--s5);
    max-height: calc(100vh - 48px); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .18s, transform .18s, visibility .18s;
  }
  .nav[data-open="true"] .nav-links { opacity: 1; visibility: visible; transform: none; }
  .nav-links > a, .nav-drop > button {
    display: block; width: 100%; text-align: left;
    font-size: 16px; padding: 12px 0; opacity: 1;
    border-bottom: 1px solid var(--hairline-2);
  }
  .nav-drop > button::after { content: ''; }
  /* No hover on touch, so the panel is always expanded inside the sheet. */
  .nav-panel {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; box-shadow: none; border: 0; border-radius: 0;
    padding: var(--s2) 0 var(--s3) var(--s3);
    background: transparent;
  }
  .nav-panel a { font-size: 14.5px; padding: 8px 0; }
  .nav-toggle { display: block; }
  .nav-signin { display: none; }
}

/* -- Steps -------------------------------------------------------------- */

.steps { counter-reset: step; display: grid; gap: var(--s5); }
.step { position: relative; padding-left: 52px; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; left: 0; top: 1px;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--blue); letter-spacing: 0;
}
.step::after {
  content: ''; position: absolute; left: 15px; top: 24px; bottom: -22px;
  width: 1px; background: var(--hairline-2);
}
.step:last-child::after { display: none; }

/* -- Accordion (FAQ) ---------------------------------------------------- */
/* <details>/<summary>: open/close, keyboard support and screen-reader state
   for free, and it still works with JavaScript off. */

.faq { border-top: 1px solid var(--hairline-2); }
.faq details { border-bottom: 1px solid var(--hairline-2); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: var(--s4) 40px var(--s4) 0; position: relative;
  font-size: 17px; font-weight: 500; letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 300; color: var(--ink-3); line-height: 1;
  transition: transform .2s;
}
.faq details[open] summary::after { content: '−'; }
.faq .faq-a { padding: 0 40px var(--s5) 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.faq .faq-a > * + * { margin-top: var(--s3); }

/* -- Tabs --------------------------------------------------------------- */

.tabs {
  display: flex; gap: var(--s1); padding: var(--s1);
  background: var(--bg-sunk); border-radius: var(--r-pill);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; font-family: var(--font); font-size: 13.5px; font-weight: 500;
  padding: 7px 15px; border-radius: var(--r-pill);
  background: none; border: 0; cursor: pointer; color: var(--ink-2);
  white-space: nowrap; transition: background .16s, color .16s;
}
.tab[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }

.tabpanel[hidden] { display: none; }

/* -- Calculator --------------------------------------------------------- */

.calc { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr); } }

.field { display: block; }
.field + .field { margin-top: var(--s4); }
.field-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.field-label { font-size: 14.5px; font-weight: 500; }
.field-val { font-family: var(--mono); font-size: 14px; color: var(--blue); font-weight: 600; letter-spacing: -.01em; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin-top: 11px;
  background: var(--bg-sunk); border-radius: 2px; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm); cursor: pointer; border-color: var(--hairline);
}
input[type="range"]:focus-visible::-webkit-slider-thumb { border-color: var(--blue); }

.calc-out {
  background: var(--card); border: 1px solid var(--hairline-2);
  border-radius: var(--r-lg); padding: var(--s6) var(--s5);
  position: sticky; top: 72px;
}
@media (max-width: 860px) { .calc-out { position: static; } }
.calc-total {
  font-size: clamp(34px, 6vw, 46px); font-weight: 600;
  letter-spacing: -.028em; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.calc-line {
  display: flex; justify-content: space-between; gap: var(--s4);
  font-size: 14px; padding: 9px 0; border-top: 1px solid var(--hairline-2);
}
.calc-line span:last-child { font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* -- Pricing ------------------------------------------------------------ */

.plan { display: flex; flex-direction: column; height: 100%; }
.plan-amt { font-size: 38px; font-weight: 600; letter-spacing: -.026em; line-height: 1; margin: var(--s3) 0 var(--s4); }
.plan-amt small { font-size: 15px; font-weight: 400; color: var(--ink-3); letter-spacing: -.01em; }
.plan ul { margin: 0 0 var(--s5); padding: 0; list-style: none; flex: 1; }
.plan li { font-size: 14.5px; color: var(--ink-2); line-height: 1.4; padding-left: 22px; position: relative; }
.plan li + li { margin-top: 9px; }
.plan li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--green); font-size: 13px; font-weight: 600;
}
.plan-featured { border-color: color-mix(in srgb, var(--blue) 45%, transparent); box-shadow: var(--shadow); }

/* -- Footer ------------------------------------------------------------- */

.footer { background: var(--bg-alt); padding: var(--s8) 0 var(--s6); font-size: 13.5px; }
.footer-grid {
  display: grid; gap: var(--s6);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer h3 {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3);
}
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer li + li { margin-top: 9px; }
.footer a { color: var(--ink-2); }
.footer a:hover { color: var(--ink); }
.footer-base {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  color: var(--ink-3); font-size: 12.5px;
}

/* ===== 9. Motion ======================================================= */
/* Content is visible by default. `html.anim` is added by JS only once an
   IntersectionObserver is confirmed to exist, so a script failure can never
   leave the page blank — the exact bug this site shipped once already. */

.r { opacity: 1; }
html.anim .r {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.28, .11, .32, 1),
              transform .7s cubic-bezier(.28, .11, .32, 1);
}
html.anim .r.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.anim .r { opacity: 1; transform: none; }
}

/* ===== 9b. Legal prose ================================================= */
/* Privacy and terms. Long-form reading, so the measure is capped and the type
   is slightly larger and looser than the marketing pages. These carried their
   own inline stylesheet until they joined the design system, and looked like a
   different company's website — which is exactly the impression you do not
   want on the page where somebody is deciding whether to trust you. */

.doc { max-width: 700px; margin-inline: auto; padding: var(--s8) 22px var(--s9); }
.doc h1 { font-size: clamp(32px, 5vw, 44px); }
.doc h2 {
  font-size: 19px; letter-spacing: -.012em;
  margin-top: var(--s7); margin-bottom: var(--s3);
}
.doc p, .doc li { font-size: 16.5px; line-height: 1.62; color: var(--ink-2); }
.doc p + p { margin-top: var(--s4); }
.doc ul { margin: 0; padding-left: 1.2em; }
.doc li + li { margin-top: 9px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc section + section { margin-top: 0; }

.doc .effective { font-size: 14px; color: var(--ink-3); margin-top: var(--s3); }
.doc .intro { margin-top: var(--s5); font-size: 18px; color: var(--ink); }
.doc .divider { border: 0; border-top: 1px solid var(--hairline-2); margin: var(--s7) 0; }
.doc .page-links { display: flex; gap: var(--s5); flex-wrap: wrap; font-size: 14px; }

/* ===== 10. Utilities =================================================== */

.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }
.muted { color: var(--ink-2); }
.nowrap { white-space: nowrap; }
.full { width: 100%; }

/* Horizontal scroller for wide tables, so the page itself never scrolls. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}