/* Shodhana home page.

   Light by default, aluminium rather than paper: the page should feel like
   the machine the app runs on, and the app's own dark windows read as
   objects sitting on it. Dark mode follows the system.

   One loud thing: the scan bar in the hero. It is the product's argument
   drawn to scale. Everything else stays quiet: system type (this is a Mac
   app, sold to people reading on Macs), one neutral ink for actions, and
   colour only where it encodes a category of bytes.

   The guides, changelog and legal pages still use style.css. */

:root {
  --page: #e8ebee;
  --raise: #f4f5f7;
  --ink: #15171c;
  --ink-2: #474d58;
  --ink-3: #6c727d;
  --rule: rgba(21, 23, 28, 0.13);
  --btn-ink: #15171c;
  --btn-ink-text: #f4f5f7;
  --shadow: 0 1px 2px rgba(21, 23, 28, 0.10), 0 28px 64px -24px rgba(21, 23, 28, 0.45);

  /* Category hues, matched to the app. Used for bytes, never for chrome. */
  --c-build: #54c965;
  --c-cache: #3ec8c0;
  --c-dev: #be6ff2;
  --c-remnant: #f0566e;
  --c-large: #7c83f2;
  --c-install: #b8865a;
  --c-logs: #f2a33e;

  --measure: 34rem;
  --gutter: 24px;
  --max: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #141619;
    --raise: #1c1f24;
    --ink: #eef0f3;
    --ink-2: #a6acb6;
    --ink-3: #7c828d;
    --rule: rgba(238, 240, 243, 0.11);
    --btn-ink: #eef0f3;
    --btn-ink-text: #15171c;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 28px 64px -24px rgba(0, 0, 0, 0.8);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  background: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--c-cache); outline-offset: 3px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--c-cache) 40%, transparent); }

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  padding: 1px 5px; border-radius: 5px;
  background: var(--raise); border: 1px solid var(--rule);
}

.inner, main {
  max-width: var(--max);
  margin-left: auto; margin-right: auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: 1rem; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-ink { background: var(--btn-ink); color: var(--btn-ink-text); }
.btn-ink:hover { background: color-mix(in srgb, var(--btn-ink) 82%, var(--page)); }
.btn-plain { color: var(--ink); border: 1px solid var(--rule); }
.btn-plain:hover { border-color: var(--ink-3); }
.btn-small { min-height: 36px; padding: 0 16px; font-size: 0.92rem; }

/* ── Nav ─────────────────────────────────────────── */
nav.top { position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--page) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid transparent;
}
nav.top .inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 1.05rem; text-decoration: none; letter-spacing: -0.01em; }
.brand img { width: 30px; height: 30px; }
nav .links { display: flex; align-items: center; gap: 26px; font-size: 0.93rem; }
nav .links a:not(.btn) { color: var(--ink-2); text-decoration: none; }
nav .links a:not(.btn):hover { color: var(--ink); }

/* ── Hero ────────────────────────────────────────── */
.hero { padding-top: clamp(40px, 6vw, 80px); }
.hero h1 {
  font-size: clamp(2.9rem, 7.2vw, 6rem);
  font-weight: 700; line-height: 0.98; letter-spacing: -0.045em;
  text-wrap: balance;
}
.hero-row {
  margin-top: clamp(24px, 3vw, 36px);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px 48px; flex-wrap: wrap;
}
.hero .sub { max-width: var(--measure); font-size: 1.2rem; line-height: 1.5; color: var(--ink-2); }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .fine { margin-top: 12px; font-size: 0.86rem; color: var(--ink-3); }

/* ── The stage: the app window, drawn in HTML ──────
   Laid out once at the app's real size (1080 × 680 points) and scaled to
   fit by home.js, so it reads like a screenshot at every width instead of
   reflowing into something the app never looks like. Its colours follow
   the page's light/dark scheme, the way the app follows the system. */
/* ── The story ───────────────────────────────────────
   One clean, performed by scrolling. The section is tall; .pin sticks
   under the nav while home.js maps scroll position to the window's state.
   The window keeps the app's real layout (1080 × 680) and is scaled to fit
   whatever height the pin leaves it. Without JS (no .js on <html>) it is a
   plain section: captions as a list, the window as a still overview. */
.story { max-width: 1240px; margin: clamp(36px, 5vw, 64px) auto 0; padding: 0 var(--gutter); }
.pin { display: grid; gap: 28px; }
.caps { list-style: none; }
.cap h2 { font-size: clamp(1.55rem, 2.7vw, 2.4rem); }
.cap p { margin-top: 10px; color: var(--ink-2); max-width: var(--measure); }
.cap + .cap { margin-top: 28px; }
.stage-box { position: relative; width: 100%; max-width: 1080px; aspect-ratio: 1080 / 680; margin: 0 auto; }

.js .story { height: 560vh; }
.js .pin {
  position: sticky; top: 64px; height: calc(100vh - 64px); height: calc(100svh - 64px);
  grid-template-rows: auto minmax(0, 1fr); align-content: start; padding: 8px 0 28px;
}
.js .caps { display: grid; width: min(100%, var(--sw, 1080px)); justify-self: center; }
.js .cap { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(14px); transition: opacity 0.45s, transform 0.45s; }
.js .cap.on { opacity: 1; transform: none; }
/* JS sizes the box to the space the pin leaves; the window scales into it.
   The tilt is the hero's one flourish: the window lies back while the scan
   runs and stands up as it reaches the pin. */
.js .stage-box {
  aspect-ratio: auto; width: var(--sw, 100%); height: var(--sh, auto); align-self: start;
  transform: perspective(1800px) rotateX(calc(var(--tilt, 0) * 26deg)) scale(calc(1 - var(--tilt, 0) * 0.1));
  transform-origin: 50% 0;
}
.js .hero h1 {
  transform: scale(calc(1 - var(--recede, 0) * 0.05)); transform-origin: 0 100%;
  opacity: calc(1 - var(--recede, 0) * 0.55);
}

/* ── Manifesto ───────────────────────────────────────
   One line, read word by word: each word lights as the line scrolls past
   the reading position. */
.manifesto p {
  font-size: clamp(1.9rem, 4.6vw, 3.7rem); font-weight: 700;
  line-height: 1.08; letter-spacing: -0.038em; max-width: 26ch; text-wrap: pretty;
}
.manifesto .w { transition: opacity 0.25s; }
.js .manifesto .w { opacity: 0.17; }
.js .manifesto .w.lit { opacity: 1; }

.win {
  --w-bg: #ffffff; --w-side: #f1f2f4; --w-row: #f6f7f8; --w-ink: #1d1f23;
  --w-ink-2: #6b7079; --w-line: rgba(0, 0, 0, 0.08); --w-sel: rgba(0, 0, 0, 0.07);
  --w-track: #e6e7ea; --w-used: #b9bcc2; --w-accent: #0a84ff;
  position: absolute; left: 0; top: 0; width: 1080px; height: 680px;
  transform: scale(var(--k, 1)); transform-origin: 0 0;
  display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: 52px minmax(0, 1fr);
  background: var(--w-bg); color: var(--w-ink);
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--w-line); box-shadow: var(--shadow);
  font: 13px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: -0.003em;
  -webkit-user-select: none; user-select: none;
}
@media (prefers-color-scheme: dark) {
  .win {
    --w-bg: #1e1f22; --w-side: #26272b; --w-row: #26272b; --w-ink: #ececee;
    --w-ink-2: #9a9da4; --w-line: rgba(255, 255, 255, 0.08); --w-sel: rgba(255, 255, 255, 0.09);
    --w-track: #313237; --w-used: #6b6e75;
  }
}
.win svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Title bar */
.lights { position: absolute; left: 22px; top: 21px; display: flex; gap: 8px; z-index: 2; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.tb { grid-column: 2; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 22px; }
.tb-title { font-weight: 600; font-size: 13.5px; }
.tb-status { color: var(--w-ink-2); }
.tb-clean {
  margin-left: auto; padding: 5px 13px; border-radius: 999px;
  background: var(--w-accent); color: #fff; font-weight: 600;
  transition: background-color 0.3s, color 0.3s;
}
.tb-clean.off { background: var(--w-sel); color: var(--w-ink-2); }

/* Sidebar: an inset panel, as in the macOS 26 app */
.side {
  grid-column: 1; grid-row: 1 / 3; margin: 8px 0 8px 8px; padding: 50px 10px 10px;
  background: var(--w-side); border-radius: 11px; border: 1px solid var(--w-line);
}
.side p { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; white-space: nowrap; }
.brandrow { font-weight: 700; margin-bottom: 6px; }
.mini-bar { display: flex; gap: 2px; }
.mini-bar i { width: 5px; height: 9px; border-radius: 2px; background: var(--c-cache); }
.mini-bar i:nth-child(2) { background: var(--c-build); }
.mini-bar i:nth-child(3) { background: var(--c-dev); }
.mini-bar i:nth-child(4) { background: var(--w-used); }
.side .nav { color: var(--w-ink); transition: background-color 0.2s; }
.side .nav svg { color: var(--w-ink-2); }
.side .nav.on { background: var(--w-sel); }
.side .sh { margin-top: 12px; padding-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--w-ink-2); }
.side .cat i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); flex: none; }
.side .cat span { margin-left: auto; font-size: 11px; color: var(--w-ink-2); transition: opacity 0.3s; }

/* Content pane; overview and map are stacked and cross-faded */
.pane { grid-column: 2; position: relative; overflow: hidden; transition: opacity 0.5s; }
.v-overview, .v-map { position: absolute; inset: 0; padding: 14px 34px 24px 26px; transition: opacity 0.45s, transform 0.45s; }
.v-map { opacity: 0; transform: scale(0.98); pointer-events: none; display: flex; flex-direction: column; }
.win[data-scene="map"] .v-overview { opacity: 0; transform: scale(0.98); }
.win[data-scene="map"] .v-map { opacity: 1; transform: none; }

.ov-h { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.ov-sub { margin-top: 2px; color: var(--w-ink-2); font-size: 12px; }
.disk { display: flex; gap: 1px; height: 22px; margin-top: 14px; border-radius: 6px; overflow: hidden; background: var(--w-track); }
.disk .used { width: 83.05%; background: var(--w-used); }
.dseg { width: calc(var(--gb) / 494.38 * 100%); background: var(--c); transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.dseg.pale { background: color-mix(in srgb, var(--c) 40%, var(--w-track)); }
.legend { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11.5px; color: var(--w-ink-2); }
.legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--w-used); margin-right: 6px; }

.grp { margin-top: 16px; transition: opacity 0.5s, margin 0.6s; }
.gh { color: var(--w-ink-2); font-size: 12px; margin-bottom: 7px; }
.gh b { color: var(--w-ink); margin-right: 5px; }
.r {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 12px; background: var(--w-row); max-height: 60px; overflow: hidden;
  transition: opacity 0.35s, transform 0.35s, max-height 0.6s, padding 0.6s;
}
.r + .r { border-top: 1px solid var(--w-line); }
.grp .r:first-of-type { border-radius: 9px 9px 0 0; }
.grp .r:last-of-type { border-radius: 0 0 9px 9px; }
.ic { width: 26px; height: 26px; border-radius: 7px; background: var(--c); color: #fff; display: grid; place-items: center; }
.ic svg { width: 15px; height: 15px; stroke-width: 1.6; }
.r .t, .r .n { display: flex; flex-direction: column; min-width: 0; }
.r .t b, .r .n b { font-weight: 600; }
.r small { font-size: 11.5px; color: var(--w-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r .n { text-align: right; }
.r .n small { font-size: 10.5px; transition: opacity 0.3s; }

/* Space map */
/* .win svg sizes the icons; the map is the one svg that fills its box. */
.win .map { flex: 1; width: 100%; height: auto; min-height: 0; margin-top: 4px; stroke: none; }
.map .arc { fill: none; stroke-linecap: butt; transition: stroke-dasharray 0.9s cubic-bezier(0.25, 0.7, 0.2, 1); }
.map .center-1 { fill: var(--w-ink-2); font-size: 7px; }
.map .center-2 { fill: var(--w-ink); font-size: 17px; font-weight: 700; }
.map .center-3 { fill: var(--w-ink-2); font-size: 6.5px; }
.map text { text-anchor: middle; stroke: none; transition: opacity 0.5s 0.5s; }
.map-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--w-ink-2); }

/* Review sheet */
.win::after {
  content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.16);
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.win.sheet-open::after { opacity: 1; }
.sheet {
  position: absolute; left: 50%; top: 50%; width: 480px; z-index: 3;
  background: var(--w-bg); border: 1px solid var(--w-line); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  transform: translate(-50%, -46%) scale(0.97); opacity: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
}
.win.sheet-open .sheet { transform: translate(-50%, -50%); opacity: 1; }
/* The sheet's three phases share one box, as in ReviewSheet.swift. */
.sheet { display: grid; }
.ph { grid-area: 1 / 1; transition: opacity 0.3s; }
.sheet:not([data-phase="review"]) .ph-review,
.sheet:not([data-phase="work"]) .ph-work,
.sheet:not([data-phase="done"]) .ph-done { opacity: 0; visibility: hidden; }
.ph-work, .ph-done { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px; }
.prog { width: 100%; height: 5px; border-radius: 3px; background: var(--w-track); overflow: hidden; }
.prog i { display: block; height: 100%; width: 0; background: var(--w-accent); }
.ph-work p { color: var(--w-ink-2); }
.win .seal { width: 44px; height: 44px; stroke: none; }
.seal path:first-child { fill: #30c85a; }
.seal .tick { fill: none; stroke: #fff; stroke-width: 3; }
.done-h { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.done-s { color: var(--w-ink-2); }
.ph-done .b { margin-top: 6px; padding: 5px 16px; border-radius: 7px; background: var(--w-accent); color: #fff; font-weight: 500; }
.sh-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--w-line); }
.sh-title { font-size: 15px; font-weight: 600; }
.sh-sub { color: var(--w-ink-2); }
.sh-body { padding: 14px 20px 6px; }
.rg + .rg { margin-top: 14px; }
.rg-h { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.rg-h .ic { width: 20px; height: 20px; border-radius: 5px; }
.rg-h .ic svg { width: 12px; height: 12px; }
.rg-h span:last-child { margin-left: auto; color: var(--w-ink-2); }
.why { display: flex; gap: 7px; align-items: center; color: var(--w-ink-2); font-size: 12px; padding: 1px 0; }
.why svg { width: 12px; height: 12px; }
.items { margin-top: 7px; padding: 7px 10px; background: var(--w-row); border-radius: 8px; font-size: 12px; }
.items p { display: flex; justify-content: space-between; font-weight: 500; }
.items .more { color: var(--w-ink-2); font-weight: 400; }
.sh-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px 14px 20px; border-top: 1px solid var(--w-line); margin-top: 12px; font-size: 12px; color: var(--w-ink-2); }
.sh-foot > span:first-child { display: flex; align-items: center; gap: 7px; margin-right: auto; }
.sh-foot svg { width: 13px; height: 13px; }
.sh-foot .b { padding: 4px 12px; border-radius: 7px; background: var(--w-sel); color: var(--w-ink); font-weight: 500; }
.sh-foot .b-go { background: var(--w-accent); color: #fff; }


/* States the script toggles */
.win.scanning .r.pending { opacity: 0; transform: translateY(6px); }
.win.scanning .n small { opacity: 0; }
.side .cat.pending span { opacity: 0; }
.dseg.pending { width: 0; }
.win.cleaned .safe-grp { opacity: 0; }
.win.cleaned .safe-grp .r { max-height: 0; padding-top: 0; padding-bottom: 0; }
.win.cleaned .safe-grp .gh { display: none; }
.win.cleaned .safe-grp + .grp { margin-top: 0; }
.side p { max-height: 32px; transition: opacity 0.4s, max-height 0.5s, padding 0.5s, margin 0.5s, background-color 0.2s; }
.side .gone { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; overflow: hidden; }
.win.fading .pane { opacity: 0; }

.c-build   { --c: var(--c-build); }
.c-cache   { --c: var(--c-cache); }
.c-dev     { --c: var(--c-dev); }
.c-remnant { --c: var(--c-remnant); }
.c-large   { --c: var(--c-large); }
.c-install { --c: var(--c-install); }
.c-logs    { --c: var(--c-logs); }

/* Screenshots are app windows; they and the stage get the one shadow on the page. */
.shot img { border-radius: 12px; box-shadow: var(--shadow); }

/* ── Feature sections ────────────────────────────── */
main { padding-top: clamp(80px, 11vw, 150px); }
main > section + section { margin-top: clamp(96px, 13vw, 168px); }

.feature {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.feature:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.feature:nth-of-type(even) .copy { order: 2; }
.feature-narrow .shot img { width: min(100%, 440px); margin: 0 auto; }

h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 700; line-height: 1.06; letter-spacing: -0.032em;
  text-wrap: balance;
}
.copy p { margin-top: 18px; color: var(--ink-2); max-width: var(--measure); }

/* ── Developers ──────────────────────────────────── */
.dev { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px clamp(32px, 5vw, 72px); align-items: center; }
.dev h2 { max-width: 15ch; }
.dev .langs { font-size: 0.95rem; color: var(--ink-3); }

/* A terminal is dark in either theme. Rows are sorted by size and underlaid
   with their share of the largest; the one you built today is dimmed,
   because that is the one you should keep. */
.term {
  background: #101215; color: #d9dde3;
  border-radius: 14px; padding: 18px 10px; box-shadow: var(--shadow);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88rem;
}
.term .row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px;
  padding: 10px 14px; border-radius: 7px;
  /* --g grows 0 → 1 as the list scrolls into view (home.js). */
  background: linear-gradient(90deg, rgba(190, 111, 242, 0.22) calc(var(--w) * var(--g, 1) * 1%), transparent 0);
}
.term .row + .row { margin-top: 6px; }
.term .p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term .s { text-align: right; font-variant-numeric: tabular-nums; color: #fff; }
.term .a { grid-column: 1 / -1; color: #8a919c; font-size: 0.8rem; }
.term .row:not(.stale) { opacity: 0.55; }
.dev .models { grid-column: 1 / -1; max-width: 46rem; color: var(--ink-2); font-size: 0.97rem; }

/* ── Facts ───────────────────────────────────────── */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 5vw, 72px); }
.facts > div { border-top: 1px solid var(--rule); padding-top: 20px; }
.facts h3 { font-size: 1.1rem; font-weight: 650; letter-spacing: -0.012em; }
.facts p { margin-top: 8px; color: var(--ink-2); max-width: var(--measure); }

/* ── Price ───────────────────────────────────────── */
.price { border-top: 1px solid var(--rule); padding-top: clamp(64px, 9vw, 112px); }
.price h2 { font-size: clamp(3rem, 8vw, 6rem); line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.price .terms { margin-top: 18px; font-size: 1.2rem; color: var(--ink-2); max-width: var(--measure); }
.price .cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.price .fine { margin-top: 26px; max-width: 40rem; font-size: 0.86rem; color: var(--ink-3); }

/* ── FAQ ─────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(32px, 5vw, 72px); }
.faq h2 { align-self: start; }
.qs details { border-top: 1px solid var(--rule); }
.qs details:last-child { border-bottom: 1px solid var(--rule); }
.qs summary {
  cursor: pointer; list-style: none; padding: 18px 2px;
  display: flex; justify-content: space-between; gap: 20px;
  font-weight: 600;
}
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: "+"; color: var(--ink-3); font-weight: 400; font-size: 1.2rem; line-height: 1; transition: transform 0.2s ease; }
.qs details[open] summary::after { transform: rotate(45deg); }
.qs details p { padding: 0 2px 20px; color: var(--ink-2); max-width: 40rem; }
.faq .aside { grid-column: 2; color: var(--ink-3); font-size: 0.95rem; max-width: 40rem; }

/* ── Footer ──────────────────────────────────────── */
footer { margin-top: clamp(96px, 12vw, 160px); border-top: 1px solid var(--rule); padding: 36px 0 56px; font-size: 0.9rem; color: var(--ink-3); }
footer .inner { display: flex; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
footer .name span { color: var(--ink-2); margin-right: 4px; }
footer .legal { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

/* ── Small screens ───────────────────────────────── */
@media (max-width: 860px) {
  nav .links a:not(.btn) { display: none; }
  .feature, .feature:nth-of-type(even), .dev, .faq { grid-template-columns: minmax(0, 1fr); }
  .feature:nth-of-type(even) .copy { order: 0; }
  .faq .aside { grid-column: 1; }
  .facts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .hero .act, .hero .cta .btn, .price .cta .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}