/* privalift.app (#173). Tokens from the app world; dark only. */

@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/hanken-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/hanken-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/hanken-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/hanken-grotesk-700.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --bg: #141414;
  --surface: #191C1A;
  --surface-2: #1C1F1D;
  --frame: #0E0F0E;
  --dim: #0B0C0B;
  --hairline: #2B302D;
  --text: #E8EAE7;
  --text-2: #969C98;
  --mint: #79C7A5;
  --dot: #646A66;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: 16px;
  --phone-w: 330px;
  --pin-top: max(16px, calc(50vh - 391px));
  --font: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  overflow-x: clip;
  scroll-behavior: smooth;
  scrollbar-color: var(--hairline) var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--mint); color: var(--bg); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure, table { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--mint); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 4px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 16px; background: var(--surface); color: var(--mint);
  border: 1px solid var(--hairline); border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 12px; }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.link { color: var(--mint); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, var(--mint) 45%, transparent); }
.link:hover { text-decoration-color: var(--mint); }
.muted { color: var(--text-2); }
.hairline-top { border-top: 1px solid var(--hairline); }

/* ---------- Nav ---------- */
.site-nav { position: relative; border-bottom: 1px solid var(--hairline); }
.site-nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.lockup { display: block; width: 117px; height: 28px; }
.lockup img { width: 100%; height: 100%; }
.nav-links, .nav-status { display: none; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; line-height: 1.4; }
.nav-status { font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--text-2); }
.menu summary {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--hairline); border-radius: 8px; cursor: pointer; list-style: none; color: var(--text);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { border-color: var(--text-2); }
.menu[open] summary { border-color: var(--mint); color: var(--mint); }
.menu-panel {
  position: absolute; left: 0; right: 0; top: 65px; z-index: 20;
  background: var(--surface); border-bottom: 1px solid var(--hairline); padding: 8px 16px 16px;
}
.menu-panel a { display: flex; align-items: center; min-height: 48px; font-size: 18px; font-weight: 500; border-bottom: 1px solid var(--hairline); }
.menu-panel p { padding-top: 16px; font-size: 14px; font-weight: 500; color: var(--text-2); }

/* ---------- Shared type ---------- */
.h2 { font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -0.0125em; }
.lede { font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 540px; text-wrap: pretty; }
.tag {
  display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--text-2); border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--text-2); white-space: nowrap;
}

/* ---------- Store status chips (not interactive) ---------- */
.chips { display: flex; flex-direction: column; gap: 12px; }
.chip {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 16px 22px;
  border: 1px solid var(--hairline); border-radius: 8px; font-size: 16px; line-height: 1.2; white-space: nowrap;
}
.chip b { font-weight: 600; color: var(--text); }
.chip span { color: var(--text-2); }

/* ---------- Phone ---------- */
.phone {
  position: relative; width: var(--phone-w); padding: 7px;
  background: var(--frame); border: 1px solid var(--hairline); border-radius: 44px;
}
.screen { position: relative; }
.shot { width: 100%; height: auto; border-radius: 36px; background: var(--bg); }
/* The Demo loop sits exactly over the Demo area of the RDL detail capture (x 135, y 414, 810 px of 1080x2400). */
.demo { position: absolute; left: 12.5%; top: 17.25%; width: 75%; height: auto; aspect-ratio: 1; border-radius: 3px; }

/* ---------- Hero ---------- */
.hero .wrap { display: flex; flex-direction: column; gap: 24px; padding-top: 40px; }
.hero-text { display: flex; flex-direction: column; gap: 24px; }
.hero h1 { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.018em; }
.hero-sub { font-size: 18px; line-height: 1.5; color: var(--text-2); max-width: 560px; text-wrap: pretty; }
.hero-right { display: flex; justify-content: center; padding-top: 16px; }
.hero-right .index { display: none; }

/* Section index (desktop) */
.index { display: flex; flex-direction: column; width: 120px; flex: none; }
.index a {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--text-2);
}
.index a::before { content: ""; width: 2px; height: 18px; border-radius: 1px; background: transparent; }
.index a:hover { color: var(--text); }
.index a[aria-current="true"], .index a.is-current { color: var(--mint); font-weight: 600; }
.index a[aria-current="true"]::before, .index a.is-current::before { background: var(--mint); }

/* ---------- Ledger ---------- */
.ledger { padding-top: 96px; }
.ledger .h2 { margin-bottom: 24px; }
.sheet { width: 100%; border-collapse: collapse; }
.sheet th, .sheet td { padding: 0; text-align: left; vertical-align: middle; }
.ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ledger tbody tr { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-top: 1px solid var(--hairline); }
.ledger tbody tr:last-child { border-bottom: 1px solid var(--hairline); }
.ledger th[scope="row"] { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.ledger td { font-size: 16px; line-height: 1.4; color: var(--text-2); }
.ledger td.none { color: var(--text); }

/* ---------- Rail ---------- */
.rail-section { display: flex; flex-direction: column; gap: 24px; padding-top: 96px; }
.rail-text { display: flex; flex-direction: column; gap: 24px; }
.rail-line { font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -0.0125em; }
.rows { border-top: 1px solid var(--hairline); max-width: 540px; }
.rows li {
  display: flex; align-items: center; gap: 10px; min-height: 49px; padding: 14px 0;
  border-bottom: 1px solid var(--hairline); font-size: 16px; font-weight: 500; line-height: 1.3;
}
.rail-figure { display: flex; justify-content: center; padding-top: 8px; }
.rail-pin { display: none; }

/* ---------- Carousel ---------- */
.carousel { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 8px; --o1: 28px; --o2: 55px; --o3: 83px; }
.stack { position: relative; width: var(--phone-w); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.stack .card { position: absolute; left: 0; top: 0; width: 100%; transform-origin: left center; transition: transform 420ms var(--ease-out); }
.stack .card .phone { width: 100%; }
.stack .card .phone::after {
  content: ""; position: absolute; inset: -1px; border-radius: 44px; background: var(--dim);
  opacity: 0; transition: opacity 420ms var(--ease-out); pointer-events: none;
}
.card[data-pos="0"] { z-index: 4; transform: none; }
.card[data-pos="1"] { z-index: 3; transform: translateX(var(--o1)) scale(0.9394); }
.card[data-pos="2"] { z-index: 2; transform: translateX(var(--o2)) scale(0.8788); }
.card[data-pos="3"] { z-index: 1; transform: translateX(var(--o3)) scale(0.8212); }
.card[data-pos="1"] .phone::after { opacity: 0.45; }
.card[data-pos="2"] .phone::after { opacity: 0.62; }
.card[data-pos="3"] .phone::after { opacity: 0.75; }
.card:not([data-pos="0"]) { cursor: pointer; }
/* The first card in source order stays in flow and gives the stack its height. */
.stack .card:first-child { position: relative; }
.dots { display: none; justify-content: center; width: var(--phone-w); }
.js .dots { display: flex; }
.dots button {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; border-radius: 22px; cursor: pointer;
}
.dots button::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--dot); transition: background-color 200ms; }
.dots button:hover::before { background: var(--text-2); }
.dots button[aria-current="true"]::before { background: var(--mint); }

/* ---------- Free & Premium ---------- */
.pricing { padding-top: 96px; }
.pricing-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.pricing-head p { font-size: 16px; line-height: 1.4; color: var(--text-2); }
.plans thead th { padding: 16px 0; font-size: 16px; font-weight: 700; line-height: 1.4; text-align: center; vertical-align: bottom; }
.plans thead th:first-child { font-size: 14px; font-weight: 600; color: var(--text-2); text-align: left; }
.plans col.plan-free { width: 64px; }
.plans col.plan-premium { width: 80px; }
.plans tr { border-bottom: 1px solid var(--hairline); }
.plans tbody th { padding: 16px 0; font-size: 16px; font-weight: 500; line-height: 1.3; }
.plans tbody th small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--text-2); }
.plans td svg { margin-inline: auto; }
.plans .yes { color: var(--text); }
.plans .no { color: var(--text-2); }

/* ---------- Why ---------- */
.why { padding-top: 96px; }
.why-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 24px; }
.why-head p { font-size: 17px; line-height: 1.55; color: var(--text-2); max-width: 760px; }
.principles { border-top: 1px solid var(--hairline); counter-reset: principle; }
.principles li { display: grid; grid-template-columns: 1fr; column-gap: 12px; row-gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.principles h3 { font-size: 18px; font-weight: 600; line-height: 1.4; }
.principles p { grid-column: 1 / -1; font-size: 16px; line-height: 1.5; color: var(--text-2); }

/* ---------- FAQ ---------- */
.faq { padding-top: 96px; }
.faq .h2 { margin-bottom: 32px; }
.faq-group + .faq-group { margin-top: 32px; }
.faq-group h3 { margin-bottom: 8px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--text-2); }
.faq-items { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0;
  font-size: 18px; font-weight: 600; line-height: 1.35; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; color: var(--mint); }
.faq summary .icon-minus, .faq details[open] summary .icon-plus { display: none; }
.faq details[open] summary .icon-minus { display: block; }
.faq summary:hover { color: var(--mint); }
.faq details[open] summary { padding-bottom: 12px; }
.faq details p { padding-bottom: 20px; max-width: 720px; font-size: 16px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }

/* ---------- Close ---------- */
.close .wrap { display: flex; flex-direction: column; gap: 24px; padding-block: 96px; }
.close h2 { font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -0.0125em; max-width: 1100px; }
.support { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; font-size: 16px; line-height: 1.4; color: var(--text-2); }
.support a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mint); font-weight: 500; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--hairline); }
.site-footer .wrap { display: flex; flex-direction: column; gap: 24px; padding-block: 40px; }
.foot-brand { display: flex; align-items: center; gap: 20px; }
.foot-brand .lockup { width: 100px; height: 24px; }
.foot-brand p, .site-footer small { font-size: 14px; line-height: 1.4; color: var(--text-2); }
.foot-links { display: flex; flex-direction: column; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; line-height: 1.4; }
.foot-links a.mail { color: var(--mint); }

/* ---------- Legal pages ---------- */
.legal .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 48px; padding-bottom: 96px; }
.toc-label { margin-bottom: 6px; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--text-2); }
.toc ol { display: flex; flex-direction: column; }
.toc a { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--text-2); }
.toc a:hover { color: var(--text); }
.toc a[aria-current="true"] { color: var(--mint); font-weight: 600; }
.prose { max-width: 680px; min-width: 0; }
.prose h1 { font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -0.0125em; }
.prose .effective { margin-top: 12px; font-size: 15px; line-height: 1.4; color: var(--text-2); }
.prose h2 { margin-top: 48px; margin-bottom: 24px; font-size: 24px; font-weight: 700; line-height: 1.25; scroll-margin-top: 24px; }
.prose > header + section h2 { margin-top: 48px; }
.prose p, .prose li { font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.prose p + p, .prose p + ul, .prose ul + p, .prose table + p, .prose p + table { margin-top: 24px; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li + li { margin-top: 8px; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 0.8em; width: 8px; height: 1px; background: var(--text-2); }
.prose strong { font-weight: 600; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead { display: none; }
.data-table tr { display: block; padding: 14px 0; border-top: 1px solid var(--hairline); }
.data-table tr:last-child { border-bottom: 1px solid var(--hairline); }
.data-table th, .data-table td { display: block; padding: 0; text-align: left; font-size: 14px; line-height: 1.45; }
.data-table tbody th { font-weight: 500; margin-bottom: 6px; }
.data-table td { color: var(--text-2); font-weight: 400; }
.data-table td::before { content: attr(data-label) ": "; color: var(--text-2); font-weight: 600; }
.contact-line { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; font-size: 18px; color: var(--text-2); }
.contact-line a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- 404 ---------- */
.not-found .wrap { padding-block: 96px 160px; display: flex; flex-direction: column; gap: 24px; }
.not-found h1 { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.018em; }
.not-found p { font-size: 18px; line-height: 1.5; color: var(--text-2); }

/* ---------- Tablet and up ---------- */
@media (min-width: 600px) {
  :root { --gutter: 32px; }
  .chips { flex-direction: row; gap: 16px; }
  .chip { width: 280px; }
  .foot-links { flex-direction: row; flex-wrap: wrap; column-gap: 28px; }
}

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  :root { --gutter: 48px; --phone-w: min(330px, calc((100vh - 100px) * 0.462)); }
  .site-nav .wrap { height: 72px; }
  .lockup { width: 134px; height: 32px; }
  .site-nav .lockup-slot { width: 160px; }
  .nav-links { display: flex; gap: 40px; }
  .nav-status { display: block; }
  .menu { display: none; }

  .hero .wrap {
    display: grid; grid-template-columns: minmax(0, 740px) auto; justify-content: space-between; align-items: center;
    gap: 48px; min-height: 827px; padding-block: 56px;
  }
  .hero-text { display: flex; flex-direction: column; gap: 32px; }
  .hero h1 { font-size: clamp(72px, 7.78vw, 112px); letter-spacing: -0.018em; }
  .hero-sub { font-size: 22px; line-height: 1.45; }
  .hero-right { padding-top: 0; align-items: center; gap: 40px; }

  .h2, .rail-line { font-size: clamp(48px, 4.45vw, 64px); letter-spacing: -0.0156em; }
  .lede { font-size: 20px; line-height: 1.5; }

  .ledger { padding-top: 56px; }
  .ledger .h2 { margin-bottom: 40px; }
  .ledger thead { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  .ledger thead th { padding: 12px 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text-2); border-bottom: 1px solid var(--hairline); }
  .ledger thead th:first-child { width: 43.75%; }
  .ledger tbody tr { display: table-row; padding: 0; border-top: 0; border-bottom: 1px solid var(--hairline); }
  .ledger tbody th[scope="row"], .ledger td { display: table-cell; padding: 28px 0; font-size: 24px; line-height: 1.3; }
  .ledger tbody th[scope="row"] { padding-right: 24px; }
  .ledger th .tag { margin-left: 12px; vertical-align: 3px; }

  .rail-section {
    display: grid; grid-template-columns: minmax(0, 680px) auto; justify-content: space-between; align-items: center;
    gap: 48px; padding-top: 160px; min-height: 874px;
  }
  .rail-text { gap: 28px; }
  .rows li { min-height: 56px; padding: 16px 0; gap: 12px; font-size: 18px; }
  .rail-figure { padding-top: 0; justify-content: flex-end; }
  .carousel { gap: 24px; padding-top: 0; --o1: calc(var(--phone-w) * 0.1394); --o2: calc(var(--phone-w) * 0.2788); --o3: calc(var(--phone-w) * 0.4152); }
  #analytics { min-height: 942px; }

  .pricing { padding-top: 160px; }
  .pricing-head { gap: 16px; margin-bottom: 40px; }
  .pricing-head p { font-size: 20px; }
  .plans thead th { font-size: 22px; }
  .plans col.plan-free, .plans col.plan-premium { width: 200px; }
  .plans tbody th { padding: 22px 0; font-size: 20px; }
  .plans tbody th small { font-size: 15px; }

  .why { padding-top: 160px; }
  .why-head { gap: 20px; margin-bottom: 40px; }
  .why-head p { font-size: 22px; line-height: 1.5; }
  .principles li { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); column-gap: 0; padding: 28px 0; align-items: start; }
  .principles h3 { font-size: 24px; line-height: 1.3; padding-right: 24px; }
  .principles p { grid-column: auto; font-size: 20px; line-height: 1.45; }

  .faq { padding-top: 160px; }
  .faq .h2 { margin-bottom: 40px; }
  .faq-group { display: grid; grid-template-columns: 320px minmax(0, 1fr); }
  .faq-group + .faq-group { margin-top: 40px; }
  .faq-group h3 { margin-bottom: 0; padding-top: 24px; font-size: 20px; padding-right: 24px; }
  .faq summary { padding: 24px 0; font-size: 22px; }
  .faq details p { padding-bottom: 24px; font-size: 18px; }

  .close .wrap { gap: 40px; padding-block: 160px; }
  .close h2 { font-size: clamp(56px, 5.56vw, 80px); letter-spacing: -0.019em; }
  .support { font-size: 18px; }

  .site-footer .wrap { flex-direction: row; align-items: center; justify-content: space-between; }
  .foot-links { flex-wrap: nowrap; }

  .legal .wrap { grid-template-columns: 220px minmax(0, 680px); gap: 80px; padding-top: 96px; padding-bottom: 160px; }
  .toc { position: sticky; top: 24px; align-self: start; padding-top: 8px; }
  .prose h1 { font-size: 56px; letter-spacing: -0.018em; }
  .prose h2 { font-size: 26px; }
  .prose p, .prose li { font-size: 18px; }
  .data-table thead { display: table-header-group; }
  .data-table tr { display: table-row; padding: 0; border-top: 0; border-bottom: 1px solid var(--hairline); }
  .data-table thead tr { border-bottom: 1px solid var(--hairline); }
  .data-table th, .data-table td { display: table-cell; vertical-align: top; padding: 14px 16px 14px 0; }
  .data-table thead th { padding: 10px 16px 10px 0; font-size: 13px; font-weight: 600; color: var(--text-2); }
  .data-table tbody th { margin: 0; width: 200px; }
  .data-table td::before { content: none; }
  .data-table th:last-child, .data-table td:last-child { padding-right: 0; }

  .not-found h1 { font-size: 112px; letter-spacing: -0.018em; }

  /* Pinned rail (needs JS): one phone beside the sections, crossfading per section. */
  .js .rail { display: grid; grid-template-columns: minmax(0, 680px) auto; justify-content: space-between; column-gap: 48px; }
  .js .rail-sections { min-width: 0; }
  .js .rail-section { display: flex; flex-direction: column; justify-content: center; align-items: stretch; min-height: 874px; scroll-margin-top: calc(var(--pin-top) - 160px); }
  .js #analytics { min-height: 942px; }
  .js .rail-section .rail-figure { display: none; }
  .js .rail-pin { display: block; padding-top: 160px; }
  .pin-inner { position: sticky; top: var(--pin-top); display: flex; align-items: flex-start; gap: 40px; }
  .pin-inner .index { margin-top: calc(var(--phone-w) * 714 / 330 / 2 - 110px); }
  .pin-screens { position: relative; width: var(--phone-w); }
  .pin-screen {
    position: absolute; left: 0; top: 0; width: 100%;
    opacity: 0; visibility: hidden; transition: opacity 320ms var(--ease-out), visibility 0s linear 320ms;
  }
  .pin-screen:first-child { position: relative; }
  .pin-screen.is-active { opacity: 1; visibility: visible; transition: opacity 320ms var(--ease-out), visibility 0s; }
  .pin-screen .phone { width: 100%; }
  .pin-screens .carousel { --o1: calc(var(--phone-w) * 0.1394); --o2: calc(var(--phone-w) * 0.2788); --o3: calc(var(--phone-w) * 0.4152); }
}

@media (min-width: 1200px) {
  :root { --gutter: 80px; }
  .hero-right .index { display: flex; }
}
@media (min-width: 900px) and (max-width: 1199.98px) {
  .pin-inner .index { display: none; }
  /* Keep the peeking Analytics phones inside the narrower gutter. */
  .pin-screens, .rail-figure .carousel { margin-right: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .demo { display: none; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}

/* Current page in nav and footer; code in legal prose. */
.nav-links a[aria-current="page"], .menu-panel a[aria-current="page"], .foot-links a[aria-current="page"] { color: var(--mint); }
.prose code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.9em; }
.br-wide { display: none; }
@media (min-width: 900px) { .br-wide { display: inline; } }