/* ==========================================================================
   Unfiled — site design system
   Apple HIG fundamentals: clarity, deference, depth. Content leads; chrome
   recedes. One accent, semantic neutrals, generous rhythm, no ornament.
   ========================================================================== */

:root {
  /* Both, so an unforced page follows the system. An explicit choice narrows
     this to one value below. */
  color-scheme: light dark;

  /* Neutrals and accent follow Apple's marketing palette so the site and the
     app read as one product. */
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --surface: #f5f5f7;
  --surface-2: #ebebef;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --muted: #6e6e73;
  --faint: #86868b;
  --rule: #d2d2d7;
  --accent: #0066cc;
  --accent-ink: #ffffff;
  --accent-soft: #e8f1fc;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
  --shadow-md: 0 4px 20px -4px rgba(0, 0, 0, .12);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .28);

  --pro: #6941c6;
  --pro-soft: #f0eafc;
  --ok: #1d7a45;

  --page: min(1120px, 100% - 3rem);
  --prose: 68ch;
  --radius: 14px;
  --radius-lg: 20px;

  /* Critically damped (no overshoot) is the house default; the bounce curve is
     reserved for motion a pointer actually pushed. Apple: damping 1.0 /
     response 0.3–0.4 for ordinary UI, ~0.8 damping only after momentum. */
  --ease-damped: cubic-bezier(.32, .72, 0, 1);
  --ease-bounce: cubic-bezier(.34, 1.42, .64, 1);
  /* Something crossing the screen under its own power starts at rest and
     arrives at rest, so it wants a curve that eases at both ends. The damped
     curve above is an ease-out: right for an element appearing, wrong for one
     travelling. */
  --ease-travel: cubic-bezier(.77, 0, .175, 1);
  --response: .32s;
  /* The same scale, one step down, for state changes a reader triggers over
     and over — a tab, a hover. At .32s those read as lag rather than as
     response. */
  --response-quick: .16s;

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

:root[data-theme="light"] { color-scheme: light; }

/* An explicit choice, from the footer control. The media query below covers
   the system preference and is what a reader without JavaScript gets; this
   covers "Dark" chosen on a light Mac, which no media query can express.
   The two palettes are the same values and must stay that way — there is no
   way to share them in plain CSS without `light-dark()`, which is newer than
   this site's support floor. */
:root[data-theme="dark"] {
  /* Scrollbars, form controls and the caret are painted by the browser from
     `color-scheme`, not from these tokens. Left at `light dark` they follow the
     system, so a forced theme showed a dark scrollbar on a light page. */
  color-scheme: dark;
  --bg: #000000;
  --bg-elevated: #1d1d1f;
  --surface: #101012;
  --surface-2: #1d1d1f;
  --ink: #f5f5f7;
  --ink-2: #d2d2d7;
  --muted: #a1a1a6;
  --faint: #86868b;
  --rule: #303034;
  --accent: #2997ff;
  --accent-ink: #00234a;
  --accent-soft: #0f2540;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 20px -4px rgba(0, 0, 0, .6);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .8);
  --pro: #b18cf5;
  --pro-soft: #241a3a;
  --ok: #4ed17f;
  
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --bg-elevated: #1d1d1f;
    --surface: #101012;
    --surface-2: #1d1d1f;
    --ink: #f5f5f7;
    --ink-2: #d2d2d7;
    --muted: #a1a1a6;
    --faint: #86868b;
    --rule: #303034;
    --accent: #2997ff;
    --accent-ink: #00234a;
    --accent-soft: #0f2540;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
    --shadow-md: 0 4px 20px -4px rgba(0, 0, 0, .6);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .8);
    --pro: #b18cf5;
    --pro-soft: #241a3a;
    --ok: #4ed17f;
  }

  /* On the dark ground the light chip fill disappears; the hairline is what
     keeps each capability legible as its own object. */
  :root:not([data-theme="light"]) .pill {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    border-color: color-mix(in srgb, var(--rule) 55%, transparent);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Reduced motion keeps comprehension cues (opacity, color) and drops movement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .btn:active { transform: none; }
}

/* Frostier, not translucent, when the system asks for less transparency. */
@media (prefers-reduced-transparency: reduce) {
  .masthead {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--rule);
  }
  .masthead::after { display: none; }
}

/* Near-solid surfaces with defined borders under increased contrast. */
@media (prefers-contrast: more) {
  :root { --muted: var(--ink-2); --faint: var(--ink-2); }
  .card, .win { border: 1px solid var(--ink); }
  .masthead {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--ink);
  }
}

/* Wide content scrolls inside its own container; the page never does. */
html { overflow-x: clip; }
body {
  overflow-x: clip;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }

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

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bg-elevated); color: var(--ink);
  padding: 12px 18px; border-radius: 0 0 var(--radius) 0;
  box-shadow: var(--shadow-md);
}
.skip:focus { left: 0; }

/* ---------- typography ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }

.display {
  font-size: clamp(40px, 6.4vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
}
.h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.02em; }
.h3 { font-size: clamp(20px, 2vw, 26px); line-height: 1.2; }
.h4 { font-size: 18px; line-height: 1.3; }

p { margin: 0; }
.lede {
  font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.45;
  color: var(--muted);
  letter-spacing: -0.005em;
}
.body { color: var(--ink-2); }
/* Tracking is size-specific: display sizes get negative tracking above, small
   sizes get a touch of positive tracking so they stay legible. */
.small { font-size: 15px; color: var(--muted); letter-spacing: .002em; }
.caption { font-size: 13px; color: var(--faint); letter-spacing: .006em; }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

code, kbd, .mono { font-family: var(--mono); font-size: .9em; }
kbd {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
}
.inline-code {
  background: var(--surface-2);
  border-radius: 5px;
  padding: 1px 6px;
  font-family: var(--mono);
  font-size: .88em;
}

/* ---------- layout ---------- */
.wrap { width: var(--page); margin-inline: auto; }
.prose { max-width: var(--prose); }

.section { padding-block: clamp(64px, 9vw, 128px); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
/* For a section that continues the one above it rather than starting a new
   idea — a page intro followed by its own body. */
.section--flush-top { padding-top: 0; }
.section--surface { background: var(--surface); }
.section + .section--surface, .section--surface + .section { border-top: 1px solid var(--rule); }

/* Each step is self-sufficient: applying `stack-24` to any element makes it a
   vertical stack. They are used on plain containers (.wrap, .card) that are not
   otherwise flex, so the display must come along with the gap. */
.stack, .stack-8, .stack-12, .stack-16, .stack-24, .stack-32, .stack-48 {
  display: flex; flex-direction: column;
}
.stack-8 { gap: 8px; } .stack-12 { gap: 12px; } .stack-16 { gap: 16px; }
.stack-24 { gap: 24px; } .stack-32 { gap: 32px; } .stack-48 { gap: 48px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.center { text-align: center; }
.center .lede, .center .prose { margin-inline: auto; }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 24px;
  border-radius: 999px; border: 1px solid transparent;
  font-size: 16px; font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--response) var(--ease-damped),
              border-color var(--response) var(--ease-damped),
              color var(--response) var(--ease-damped),
              transform 100ms ease-out;
}
.btn:hover { text-decoration: none; }
/* Latency is the enemy: the press itself is the feedback, not the release. */
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--secondary { background: transparent; color: var(--accent); border-color: currentColor; }
.btn--secondary:hover { background: var(--accent-soft); }
.btn--quiet { background: var(--surface-2); color: var(--ink); }
.btn--quiet:hover { background: var(--rule); }
.btn--lg { min-height: 54px; padding: 0 32px; font-size: 17px; }
.btn--block { width: 100%; }

/* ---------- header / footer ---------- */
/* A translucent functional layer with content passing underneath, and a soft
   scroll edge rather than a hard divider — the material separates the regions. */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
}
.masthead::after {
  content: ""; position: absolute; inset: 100% 0 auto 0; height: 14px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) 55%, transparent), transparent);
  pointer-events: none;
}
.masthead__inner { display: flex; align-items: center; gap: 24px; height: 52px; }
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
/* The mark only. The wordmark beside it is live text, so it takes its colour
   from the theme and stays crisp at any size — which the artwork's near-black
   lettering could not do on a dark background.
   The source art is trimmed to its bounding box: the original sat in a square
   canvas it filled less than three quarters of, so a 24px box drew a 17px mark
   and it read as undersized next to 17px type. */
.brand__mark { width: 26px; height: 26px; flex: none; }
.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
/* Vibrancy over a translucent layer: heavier weight and a small tracking bump
   rather than flat grey, so the label survives whatever scrolls beneath it. */
/* `:not(.btn)` because `.nav a` (0,1,1) out-specifies `.btn--primary` (0,1,0),
   so the Download button in the masthead was taking the nav's link colour
   instead of its own. In dark mode `--ink-2` is near-white and the mistake was
   invisible; in light mode it is dark grey on blue, which is how it surfaced. */
.nav a:not(.btn) { color: var(--ink-2); font-size: 14.5px; font-weight: 500; letter-spacing: .004em; }
.nav a:not(.btn):hover { color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"]:not(.btn) { color: var(--ink); font-weight: 500; }
.nav .btn { min-height: 32px; padding: 0 15px; font-size: 14px; }
@media (max-width: 640px) {
  .nav { gap: 15px; }
  .nav .nav__hide-sm { display: none; }
}

.footer { border-top: 1px solid var(--rule); padding-block: 48px; background: var(--surface); }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }
.footer h2 { font-size: 13px; font-weight: 600; color: var(--faint); letter-spacing: .04em; text-transform: uppercase; }
.footer ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.footer a { color: var(--ink-2); font-size: 15px; }
.footer__base { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); }

/* ---------- cards & feature blocks ---------- */
/* A small surface reads as a thin material: a hairline and a shallow shadow.
   The window mockups are large surfaces and carry --shadow-lg instead. */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.card--flat { background: transparent; border: 0; padding: 0; }

.feature { display: grid; gap: 10px; }
.feature__icon { width: 26px; height: 26px; color: var(--accent); }
.feature h3 { font-size: 19px; }
.feature p { color: var(--muted); font-size: 15.5px; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--pro-soft); color: var(--pro);
  vertical-align: 2px;
}
.badge--free { background: var(--surface-2); color: var(--muted); }

/* ---------- alternating showcase rows ---------- */
.showcase {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
@media (min-width: 900px) {
  .showcase { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  /* Flipped rows move the copy to the right, so the wider track has to move
     with it — otherwise the mockup lands in the narrow column and clips. */
  .showcase--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .showcase--flip > :first-child { order: 2; }
}
.showcase__copy { display: grid; gap: 14px; align-content: center; }
.showcase__copy p { color: var(--muted); }
.showcase__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.showcase__list li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: 15.5px; }
.showcase__list li::before {
  content: ""; position: absolute; left: 4px; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.matrix {
  width: 100%; border-collapse: collapse; font-size: 15px;
  min-width: 620px;
}
table.matrix caption { text-align: left; color: var(--muted); font-size: 14px; padding-bottom: 12px; }
table.matrix th, table.matrix td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.matrix thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 600; }
table.matrix tbody th { font-weight: 500; color: var(--ink); }
table.matrix td { color: var(--muted); }
table.matrix .yes { color: var(--ok); font-weight: 600; }
table.matrix .no { color: var(--faint); }
table.matrix tbody tr:last-child th, table.matrix tbody tr:last-child td { border-bottom: 0; }

/* ---------- pricing ---------- */
.plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); align-items: start; }
.plan { position: relative; display: grid; gap: 18px; }
.plan--featured { border-color: var(--accent); box-shadow: var(--shadow-md); }
.plan__flag {
  position: absolute; top: -11px; left: 28px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.plan__price { display: flex; align-items: baseline; gap: 8px; }
.plan__amount { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.plan__per { color: var(--muted); font-size: 15px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink-2); }
.plan li::before {
  content: ""; position: absolute; left: 3px; top: .42em;
  width: 12px; height: 7px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
.plan li.is-off { color: var(--faint); }
.plan li.is-off::before { border-color: var(--rule); }

/* ---------- docs layout ---------- */
.docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 940px) {
  .docs { grid-template-columns: 224px minmax(0, 1fr); gap: 56px; }
  .docs__nav { position: sticky; top: 76px; max-height: calc(100vh - 100px); overflow-y: auto; }
}
/* On narrow screens the full index would push the article most of a screen
   down, so it becomes a bounded, scrollable table of contents instead. */
@media (max-width: 899px) {
  .docs__nav {
    max-height: 40vh; overflow-y: auto;
    padding: 16px 18px;
    border: 1px solid var(--rule); border-radius: var(--radius);
    background: var(--bg-elevated);
  }
  .docs__nav ul:last-child { margin-bottom: 0; }
}
.docs__nav h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-bottom: 10px; }
.docs__nav ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 7px; }
.docs__nav a { color: var(--ink-2); font-size: 14.5px; }
/* `p { margin: 0 }` means prose sections need an explicit rhythm; a column
   gap gives every child the same spacing without margin collapsing. */
.docs__article > section {
  display: flex; flex-direction: column; gap: 18px;
  padding-block: 32px; border-top: 1px solid var(--rule);
}
.docs__article > section > h2 + p { margin-top: -4px; }
.docs__article > section:first-of-type { border-top: 0; padding-top: 0; }
.docs__article h2 { scroll-margin-top: 76px; }
.docs__article h3 { margin-top: 4px; }
.docs__article p { color: var(--muted); }
.docs__article .prose { max-width: 66ch; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 12px; }
.steps li { position: relative; padding-left: 34px; color: var(--ink-2); font-size: 15.5px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink);
  font-size: 12px; font-weight: 600;
  display: grid; place-items: center;
}

.note {
  border-left: 3px solid var(--accent);
  background: var(--surface);
  padding: 14px 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px;
  color: var(--ink-2);
}
.note--warn { border-left-color: #b26205; }

.shortcut-list { display: grid; gap: 8px; }
.shortcut { display: flex; align-items: baseline; gap: 12px; font-size: 15px; }
.shortcut kbd { flex: none; }
.shortcut span { color: var(--muted); }

/* ---------- faq ---------- */
.faq { display: grid; gap: 0; }
.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
}
.faq summary {
  cursor: pointer; font-weight: 500; font-size: 17px;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(45deg); transition: transform var(--response) var(--ease-damped);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > p { margin-top: 10px; color: var(--muted); max-width: var(--prose); }

/* ---------- misc ---------- */
.hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* A chip needs an edge. Without one the words run together and a
   three-word capability reads as three separate ones. */
.pill {
  font-size: 13px; line-height: 1.2; padding: 6px 11px; border-radius: 8px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--rule);
  white-space: nowrap;
}

/* ---------- appearance control ----------
   The segmented control is the idiom macOS uses for exactly this choice in
   System Settings, so it needs no explanation. Radio inputs rather than
   buttons: one of three is always chosen, which is what a radio group means,
   and it brings arrow-key navigation and the announcement for free. */
/* Pushed to the trailing edge, opposite the copyright. `margin-left: auto`
   rather than `space-between` on the row, so anything added to the footer base
   later lands beside the copyright instead of being spread across the width. */
.appearance {
  display: inline-flex; align-items: center; gap: 10px;
  border: 0; padding: 0; margin: 0 0 0 auto;
}
.appearance__label { font-size: 13px; color: var(--muted); }
.segmented {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surface-2); border-radius: 9px;
}
.segmented input {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.segmented label {
  padding: 4px 11px; border-radius: 7px; cursor: pointer;
  font-size: 12.5px; line-height: 1.4; color: var(--ink-2);
  transition: background-color .15s ease, color .15s ease;
}
.segmented label:hover { color: var(--ink); }
/* The selected segment lifts on a surface of its own, the way the macOS
   control does — the shadow is what separates it from the trough. */
.segmented input:checked + label {
  background: var(--bg-elevated); color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.segmented input:focus-visible + label {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---------- tier inventory ----------
   A flat list of twenty-nine capabilities is a wall, and next to it a list of
   twelve reads as an emptier card rather than a more focused one. Grouping
   gives both sides the same shape, so the comparison is between two structured
   offers instead of between two lengths. */
/* Cards hug their content. Stretching them to a shared height leaves the
   shorter one with a void underneath, which reads as "Pro has less" — the
   opposite of what a focused tier should say. */
.tier-grid { align-items: start; }
.tier { display: grid; gap: 22px; align-content: start; }
/* Closes the Pro card with its argument rather than with empty space. */
.tier__note {
  margin-top: 2px; padding-top: 16px; border-top: 1px solid var(--rule);
  color: var(--muted); font-size: 14px; line-height: 1.5;
}
.tier__group { display: grid; gap: 9px; }
.tier__label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint);
}
/* The count carries the breadth claim so the copy does not have to. */
.tier__count {
  font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--muted);
}
.tier__head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 4px;
}
.tier__head h3 { font-size: 24px; letter-spacing: -0.02em; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Utilities ───────────────────────────────────────────────────────────
   Small, named helpers so every page can keep a strict Content-Security-
   Policy: no `style` attributes means style-src never needs 'unsafe-inline'. */
.row--center { justify-content: center; }
.display--sm { font-size: clamp(36px, 5vw, 60px); }
.page-title { font-size: clamp(32px, 4.4vw, 50px); }
.prose--center { max-width: 74ch; margin-inline: auto; }
.footer__tag { margin-top: 10px; max-width: 26ch; }

/* ---------- feature deck ---------- */
/* Baseline, and what renders before deck.js runs: a native scroll-snap
   container. Every slide is reachable by scrolling, keyboard or screen reader
   with no script at all. `.is-enhanced` swaps in the transform track that the
   gesture code drives. */
.deck { display: grid; gap: 24px; }

.deck__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
}
.deck__viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }

.deck__track { display: flex; gap: 32px; align-items: stretch; }

.deck__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.deck__slide > .showcase { height: 100%; }
@media (max-width: 899px) {
  .deck__track { gap: 16px; }
  /* A sliver of the next slide is the affordance that says "swipe". */
  .deck__slide { flex: 0 0 calc(100% - 30px); }
}

.deck.is-enhanced .deck__viewport {
  overflow: hidden;
  scroll-snap-type: none;
  /* Vertical panning stays with the page until the gesture commits sideways. */
  touch-action: pan-y;
  cursor: grab;
}
.deck.is-enhanced[data-deck-dragging] .deck__viewport { cursor: grabbing; }
.deck.is-enhanced[data-deck-dragging] .deck__slide,
.deck.is-enhanced[data-deck-dragging] .deck__slide * { user-select: none; }
.deck.is-enhanced[data-deck-dragging] .deck__track,
.deck.is-enhanced[data-deck-animating] .deck__track { will-change: transform; }

/* Off-centre slides recede as they travel, so the deck reads as one object
   moving rather than four panels swapping. The opacity is set per frame from
   each slide's distance to centre — a CSS transition would lag the finger,
   which is exactly the disconnect this is meant to avoid. deck.js leaves it
   alone under reduced motion or increased contrast. */

/* ---------- deck controls ---------- */
.deck__controls { display: none; }
.deck.is-enhanced .deck__controls {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}

.deck__btn {
  flex: none;
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--bg-elevated); color: var(--ink);
  cursor: pointer;
  transition: background-color var(--response) var(--ease-damped),
              border-color var(--response) var(--ease-damped),
              opacity var(--response) var(--ease-damped),
              transform 100ms ease-out;
}
.deck__btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--faint); }
.deck__btn:active:not(:disabled) { transform: scale(.94); }
.deck__btn:disabled { opacity: .3; cursor: default; }
.deck__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.deck__btn svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

.deck__dots { display: flex; align-items: center; gap: 2px; }
.deck__dot {
  width: 28px; height: 36px; padding: 0;
  border: 0; background: none; cursor: pointer;
  display: inline-grid; place-items: center;
}
.deck__dot::before {
  content: "";
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--rule);
  transition: background-color var(--response) var(--ease-damped),
              width var(--response) var(--ease-damped);
}
.deck__dot:hover::before { background: var(--faint); }
.deck__dot[aria-current="true"]::before { background: var(--accent); width: 22px; }
.deck__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 10px; }

@media (prefers-contrast: more) {
  .deck__dot::before { background: var(--ink-2); }
  .deck__dot[aria-current="true"]::before { background: var(--accent); }
  .deck__btn { border-color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  /* The spring and the per-frame dimming are both disabled in deck.js; this is
     the CSS-side companion. */
  .deck__btn:active:not(:disabled) { transform: none; }
}