/* UShow website. Tokens follow the app's DS4 "Concentric Stage" (Iris). */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("fonts/inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/plexmono-medium.woff2") format("woff2"); }

/* Dark is the booth; light is daylight. Both mirror DS4 values. */
:root {
  color-scheme: dark;
  --canvas: #0D0E12;
  --surface: #16171C;
  --surface-2: #1E1F26;
  --surface-3: #26272F;
  --matte: #08090B;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #F3F3F6;
  --text-2: #A6A7B2;
  --text-3: #878893;
  --accent: #5B50E6;
  --accent-hover: #6A60EE;
  --accent-text: #A39CFF;
  --accent-tint: #262245;
  --on-accent: #FFFFFF;
  --focus: #8D84FF;
  --live: #FF5147;
  --live-fill: #D7261B;
  --next: #30D158;
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --lift: none;
  --slide: #14161F;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --canvas: #F4F4F7;
    --surface: #FFFFFF;
    --surface-2: #EDEDF2;
    --surface-3: #E4E4EB;
    --matte: #E2E2E8;
    --line: #DCDCE3;
    --line-strong: #C9C9D2;
    --text: #111216;
    --text-2: #5B5C66;
    --text-3: #686974;
    --accent: #5145DB;
    --accent-hover: #4639CF;
    --accent-text: #4A3FD0;
    --accent-tint: #ECEAFD;
    --focus: #5145DB;
    --live: #C42318;
    --live-fill: #D42A1E;
    --next: #17732F;
    --highlight: none;
    --lift: 0 1px 2px rgba(17, 18, 22, 0.06), 0 12px 32px rgba(17, 18, 22, 0.08);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #F4F4F7;
  --surface: #FFFFFF;
  --surface-2: #EDEDF2;
  --surface-3: #E4E4EB;
  --matte: #E2E2E8;
  --line: #DCDCE3;
  --line-strong: #C9C9D2;
  --text: #111216;
  --text-2: #5B5C66;
  --text-3: #686974;
  --accent: #5145DB;
  --accent-hover: #4639CF;
  --accent-text: #4A3FD0;
  --accent-tint: #ECEAFD;
  --focus: #5145DB;
  --live: #C42318;
  --live-fill: #D42A1E;
  --next: #17732F;
  --highlight: none;
  --lift: 0 1px 2px rgba(17, 18, 22, 0.06), 0 12px 32px rgba(17, 18, 22, 0.08);
}

/* Concentric radii: inner = outer - inset (DS4 rule). */
:root {
  --r-frame: 28px;
  --r-panel: 20px;  /* frame 28 - inset 8 */
  --r-row: 12px;    /* panel 20 - inset 8 */
  --r-chip: 6px;
  --gutter: 16px;
  --measure: 66ch;
  --wide: 1200px;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

/* The surfaces the browser draws also belong to the design. */
::selection { background: var(--accent); color: var(--on-accent); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border: 3px solid var(--canvas); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }
* { scrollbar-color: var(--surface-3) var(--canvas); scrollbar-width: thin; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip {
  position: absolute; left: 16px; top: -48px; z-index: 10;
  padding: 8px 14px; border-radius: var(--r-row);
  background: var(--accent); color: var(--on-accent); text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

@media (min-width: 720px) { :root { --gutter: 32px; } }

/* ---------- Header ---------- */

/* Sticky: the page is long and the download action has to stay reachable. */
.site-header {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--canvas); } }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }


.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: #5145DB; display: grid; place-items: center; }
.brand-mark svg { width: 17px; height: auto; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; font-size: 15px; font-weight: 500; padding: 0 12px; border-radius: var(--r-row); }
.site-nav a:hover { color: var(--text); background: var(--surface-2); }
/* "You are here" is carried by weight and full-strength text; the fill means
   "you are about to click this". No drawn mark: an inset rule follows the
   link's 12px corner radius and renders as a curved tray under the label. */
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 600; }

.theme-toggle {
  appearance: none; border: 1px solid var(--line-strong); background: transparent; color: var(--text-2);
  width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; margin-left: 4px;
}
.theme-toggle:hover { color: var(--text); background: var(--surface-2); }
.theme-toggle svg { width: 18px; height: 18px; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); }
/* The mark turns over, so a click is visible and not only announced. */
:root[data-theme="light"] .theme-toggle svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .theme-toggle svg { transition: none; } }

/* The header carries a download button once the hero's own has scrolled off.
   These selectors match the nav's specificity on purpose: `.site-nav a` beats
   `.btn-primary`, so the colours have to be set together, here. */
.site-nav a.nav-get {
  display: none; min-height: 38px; padding: 0 16px; margin-left: 8px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 15px;
}
.site-nav a.nav-get:hover { background: var(--accent-hover); color: var(--on-accent); }
.is-scrolled .site-nav a.nav-get { display: inline-flex; }
.site-nav a.nav-get svg { width: 16px; height: 16px; }
@media (max-width: 719px) { .is-scrolled .site-nav a.nav-get { display: none; } }

/* Both nav links stay on a phone: help has to be reachable from the top. */
@media (max-width: 560px) {
  .site-header .wrap { gap: 12px; }
  .site-nav { gap: 0; }
  .site-nav a { padding: 0 9px; font-size: 14px; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Home: hero ---------- */

/* Two columns: the promise on the left, the instrument it describes on the
   right. Preview, take, live is the product in one control. */
.hero { padding: 56px 0 48px; }
@media (min-width: 980px) { .hero { padding: 88px 0 72px; } }

.hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); gap: 72px; }
}
@media (min-width: 1200px) { .hero-grid { grid-template-columns: minmax(0, 1fr) 440px; } }

.hero h1 {
  margin: 0; max-width: 13ch;
  font-size: clamp(42px, 6.6vw, 72px); line-height: 1.01; letter-spacing: -0.038em; font-weight: 700;
  text-wrap: balance;
}
.hero .lede { margin: 22px 0 0; max-width: 44ch; font-size: clamp(18px, 2.1vw, 21px); line-height: 1.5; color: var(--text-2); }

/* The ProPresenter switch, in the first viewport where it decides the visit. */
.switch {
  margin: 22px 0 0; max-width: 46ch; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.55; color: var(--text-2);
}
.switch a { display: inline-block; font-weight: 500; white-space: nowrap; }

/* ---------- The tally instrument: the page's one authored moment ---------- */

/* Concentric, like the app: frame 28 with an 8 px inset holds its cards at 20. */
.tally { margin: 0; }
/* Stacked under the copy it must not stretch into a letterbox. */
@media (max-width: 979px) { .tally { max-width: 460px; } }

/* The whole instrument stays dark in both themes, the way a video player
   does, because its two cards stand for screens. Pinning the tokens on the
   stack rather than on the cards keeps the Take control in the same world as
   the screens it sits between; --lift stays theme-following so the panel
   still lifts off a daylight page. */
.tally-stack {
  --surface: #16171C;
  --surface-2: #1E1F26;
  --surface-3: #26272F;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #F3F3F6;
  --text-2: #A6A7B2;
  --text-3: #878893;
  --live: #FF5147;
  --next: #30D158;
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: grid; gap: 8px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--r-frame); box-shadow: var(--highlight), var(--lift);
}

.tally-card {
  position: relative; padding: 18px 20px 16px;
  background: var(--slide); color: var(--text); border-radius: var(--r-panel);
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1), transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tally-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--edge, transparent);
  transition: box-shadow 260ms ease-out;
}
.is-next { --edge: var(--next); }
.is-live { --edge: var(--live); }

.tally-role {
  margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--edge);
}
.tally-role-sub { font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--text-3); }

.tally-words {
  margin: 0; min-height: 2.6em;
  font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -0.018em; color: var(--text);
  transition: opacity 180ms ease-out;
}
.tally-meta {
  margin: 12px 0 0; font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
  transition: opacity 180ms ease-out;
}
.is-swapping .tally-words, .is-swapping .tally-meta { opacity: 0; }

.tally-act { display: grid; }
.tally-take {
  appearance: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 18px; border-radius: var(--r-panel);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.01em;
  transition: background 160ms ease-out, border-color 160ms ease-out, transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tally-take:hover { background: var(--surface-3); border-color: var(--text-3); }
.tally-take:active, .is-taking .tally-take { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: scale(0.985); }

/* The release: the slide leaving the room's screen lets go before the new one
   lands, which is what the operator sees happen. */
.is-releasing .is-live { opacity: 0.35; transform: scale(0.985); }

.tally figcaption {
  margin: 18px 4px 0; max-width: 46ch;
  font-size: 14px; line-height: 1.55; color: var(--text-3);
}

@media (prefers-reduced-motion: reduce) {
  .tally-card, .tally-words, .tally-meta, .tally-take { transition: none; }
}

.get { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.get-facts { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.get-facts strong { color: var(--text); font-weight: 500; }
.signed { display: inline-flex; align-items: baseline; gap: 6px; }
.signed svg { width: 15px; height: 15px; color: var(--accent-text); }

/* ---------- Real screenshots ---------- */

/* Frame 28 with an 8 px inset holds the picture at 20 (concentric). */
.shot {
  margin: 0; padding: 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-frame); box-shadow: var(--highlight), var(--lift);
}
.shot img { width: 100%; height: auto; border-radius: var(--r-panel); background: var(--matte); }

/* One screenshot earns the full width. The rest are cropped to the region the
   paragraph beside them is about, so the evidence is legible at its size. */
.bleed { padding: 0 0 8px; }
.bleed .shot { margin: 0 var(--gutter); padding: 10px; }
@media (min-width: 1500px) { .bleed .shot { margin: 0 auto; max-width: 1440px; } }
.bleed-caption {
  margin: 18px auto 0; padding: 0 var(--gutter); max-width: 64ch;
  font-size: 14px; line-height: 1.55; color: var(--text-3);
}

.crop {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 16 / 8; border-radius: var(--r-panel); background: var(--matte);
}
.crop img {
  width: 100%; height: 100%; border-radius: 0;
  object-fit: cover; object-position: var(--pos, 50% 50%);
  transform: scale(var(--z, 1)); transform-origin: var(--pos, 50% 50%);
}

.act-shot { margin-top: 40px; }
@media (min-width: 900px) { .act-shot { margin-top: 56px; } }

.shot-phone { max-width: 252px; justify-self: center; border-radius: 44px; padding: 10px; }
.shot-phone img { border-radius: 36px; }

/* ---------- Sections ---------- */

.section { padding: 80px 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .section { padding: 96px 0; } }

.section h2 { margin: 0; max-width: 24ch; font-size: clamp(28px, 4vw, 42px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; }
.section-intro { margin: 16px 0 0; max-width: 52ch; color: var(--text-2); font-size: 18px; }

/* Three steps: a real sequence, so numbered. */
.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 32px; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.steps li { counter-increment: step; border-top: 2px solid var(--line-strong); padding-top: 20px; }
.steps li::before { content: counter(step); display: block; font-size: 15px; font-weight: 600; color: var(--accent-text); margin-bottom: 12px; }
.steps h3 { margin: 0; font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; }
.steps p { margin: 8px 0 0; color: var(--text-2); }

/* ---------- The three acts: room, stage, anywhere ---------- */


.facts { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 40px; }
@media (min-width: 900px) { .facts { margin-top: 72px; gap: 56px; } }
.facts > li { display: grid; gap: 10px; }
@media (min-width: 900px) {
  .facts > li { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .facts > li > h3 { grid-column: 1; }
  .facts > li > p { grid-column: 2; grid-row: 1; }
  .facts > li > .shot { grid-column: 2; margin-top: 8px; }
}
.facts h3 { margin: 0; font-size: 21px; line-height: 1.3; letter-spacing: -0.012em; }
.facts p { margin: 0; color: var(--text-2); max-width: 62ch; }

.shot-say { margin: 14px 4px 0; font-size: 14px; line-height: 1.5; color: var(--text-3); }
.shot-say strong { color: var(--text-2); font-weight: 600; }
.layouts-say { margin: 48px 0 0; font-size: 15px; color: var(--text-2); max-width: 52ch; }

.layouts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 680px) { .layouts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.layouts > li { padding-top: 16px; border-top: 2px solid var(--line-strong); }
.layouts h3 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.layouts p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }

.pair { display: grid; gap: 32px; align-items: center; margin-top: 48px; }
@media (min-width: 900px) {
  .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 64px; margin-top: 64px; }
}
.pair h3 { margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -0.015em; }
.pair p { margin: 14px 0 0; color: var(--text-2); max-width: 54ch; }

/* ---------- What you are downloading ---------- */

.plain { margin: 48px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.plain > div { display: grid; gap: 6px; padding: 24px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) {
  .plain > div { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); column-gap: 48px; padding: 28px 0; }
}
.plain dt { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.plain dd { margin: 0; color: var(--text-2); max-width: 64ch; }
.plain strong { color: var(--text); font-weight: 600; }

/* Waiting on real values. Styled now so filling the slot is a copy edit and
   not a layout job. */
.proof {
  margin: 28px 0 0; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel);
  font-size: 18px; line-height: 1.5; color: var(--text-2); max-width: 54ch;
}
.proof strong { color: var(--text); font-weight: 600; }

/* Visible to a screen reader only. */
.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;
}

/* FAQ */
.faq-group {
  margin: 56px 0 0; font-size: 21px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--text);
}
.faq { margin: 16px 0 0; max-width: 760px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-weight: 600; font-size: 18px; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg);
  transition: transform 180ms ease-out;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { margin: 0 0 20px; max-width: var(--measure); color: var(--text-2); }

/* Closing call */
.closing { padding: 96px 0 112px; border-top: 1px solid var(--line); }
.closing h2 { margin: 0; font-size: clamp(32px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; max-width: 16ch; text-wrap: balance; }
.closing-say { margin: 18px 0 0; max-width: 52ch; font-size: 18px; line-height: 1.55; color: var(--text-2); }

/* Back to the top of a long page, once there is a long page above you. */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2);
  cursor: pointer; opacity: 0; visibility: hidden;
  transition: opacity 240ms ease-out, visibility 240ms, color 160ms, background 160ms;
}
.is-deep .to-top { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--surface-3); color: var(--text); }
.to-top svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ---------- Download page ---------- */

.page { padding: 64px 0 96px; }
@media (min-width: 900px) { .page { padding: 88px 0 120px; } }
.page h1 { margin: 0; font-size: clamp(32px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; }
.page .lede { margin: 16px 0 0; max-width: 54ch; color: var(--text-2); font-size: 18px; }

.platforms { margin-top: 48px; display: grid; gap: 16px; }
@media (min-width: 900px) { .platforms { grid-template-columns: 1.4fr 1fr; } }

/* The page detects the visitor's OS, so the matching card takes the wide
   track instead of the page explaining the mismatch in a sentence. */
.platforms[data-lead] .platform:not(.is-yours) { order: 1; }
.platforms[data-lead] .platform.is-yours { order: 0; }

.yours {
  margin: 0 0 14px; display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: var(--r-chip);
  background: var(--accent-tint); color: var(--accent-text);
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
}
.platform.is-yours { border-color: var(--line-strong); }

.btn-aside { font-weight: 500; font-variant-numeric: tabular-nums; opacity: 0.72; }
.btn-aside::before { content: "\00b7"; margin-right: 7px; }

/* On a narrow screen the label and the size stop fitting on one line. The
   size stays, on its own line, because it is the fact a visitor on church
   Wi-Fi wants before tapping, not after. */
@media (max-width: 559px) {
  .platform .btn { flex-wrap: wrap; gap: 0 10px; padding: 12px 20px; line-height: 1.25; }
  .platform .btn-aside { flex: 1 0 100%; text-align: center; margin-top: 2px; }
  .platform .btn-aside::before { content: none; }
}

.btn-warn { display: block; margin: 10px 0 0; font-size: 14px; color: var(--text-2); max-width: 34ch; }

/* 64 hex characters are not checked by eye, so the fingerprint is a control
   that hands them over rather than a line of text to squint at. */
.copy {
  appearance: none; width: 100%; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px;
  margin: -7px -11px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: var(--r-row);
  background: transparent; color: var(--text); font: inherit;
}
.copy:hover { background: var(--surface-3); border-color: var(--line-strong); }
.copy .mono { display: block; color: var(--text-2); line-height: 1.45; }
.copy:hover .mono { color: var(--text); }
.copy-say {
  justify-self: end; padding: 3px 8px; border-radius: var(--r-chip);
  background: var(--surface-3); color: var(--text-2);
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.copy:hover .copy-say { background: var(--accent-tint); color: var(--accent-text); }
.copy.is-done .copy-say { background: transparent; color: var(--next); }

.platform {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-frame); padding: 8px;
  box-shadow: var(--highlight), var(--lift);
}
.platform-body { background: var(--surface-2); border-radius: var(--r-panel); padding: 28px 24px; height: 100%; }
.platform h2 { margin: 0; font-size: 24px; letter-spacing: -0.02em; }
.platform .sub { margin: 4px 0 24px; color: var(--text-2); }
.platform p { color: var(--text-2); max-width: 56ch; }
.platform .btn { width: 100%; }
@media (min-width: 560px) { .platform .btn { width: auto; } }

.specs { margin: 24px 0 0; display: grid; grid-template-columns: max-content 1fr; align-items: baseline; gap: 10px 20px; font-size: 15px; }
.specs dt { color: var(--text-2); }
.specs dd { margin: 0; }
.mono { font-family: "Plex Mono", ui-monospace, monospace; font-size: 13px; overflow-wrap: anywhere; }

.note-block { margin-top: 64px; max-width: var(--measure); }
.note-block h2 { margin: 0 0 12px; font-size: 21px; letter-spacing: -0.015em; }
.note-block p, .note-block li { color: var(--text-2); }
.note-block ol { padding-left: 1.3em; }
.note-block li + li { margin-top: 6px; }

/* A command the reader is meant to retype or copy; long ones scroll rather
   than widening the page. */
.snippet {
  margin: 12px 0 16px; padding: 12px 14px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-row);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.snippet code { font-family: "Plex Mono", ui-monospace, monospace; font-size: 13px; color: var(--text); white-space: pre; }

.os-hint { margin: 20px 0 0; padding: 12px 16px; border-radius: var(--r-row); background: var(--accent-tint); color: var(--text); font-size: 15px; max-width: 60ch; }
.os-hint[hidden] { display: none; }
.nowrap { white-space: nowrap; }

/* ---------- Prose pages (support, legal) ---------- */

.prose { max-width: 68ch; }
.prose .updated { margin: 12px 0 0; color: var(--text-3); font-size: 15px; }

/* Sixteen headings in one column is a wall. The listing is built from the
   page's own h2s at build time, so it cannot drift from the document. */
.toc {
  margin: 32px 0 8px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel);
}
.toc-head {
  margin: 0 0 12px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}
.prose .toc ol {
  list-style: none; margin: 0; padding: 0; font-size: 15px;
}
/* Columns, not a grid: a reader scans down one column, so the order has to
   run down it too. */
@media (min-width: 620px) { .prose .toc ol { columns: 2; column-gap: 32px; } }
.prose .toc li { margin: 0; break-inside: avoid; }
.toc a { display: block; padding: 10px 0; color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--accent-text); text-decoration: underline; }
.prose h2 { scroll-margin-top: 88px; }
.prose h2 { margin: 56px 0 12px; font-size: 24px; line-height: 1.25; letter-spacing: -0.015em; }
.prose h3 { margin: 32px 0 8px; font-size: 18px; }
.prose p, .prose li { color: var(--text-2); }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 6px; }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
.prose th { color: var(--text); font-weight: 600; }
.prose td { color: var(--text-2); }
.table-scroll { overflow-x: auto; }

.contact-card {
  margin-top: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-frame); padding: 8px;
  box-shadow: var(--highlight), var(--lift);
}
.contact-card > div { background: var(--surface-2); border-radius: var(--r-panel); padding: 24px; }
.contact-card h2 { margin: 0; font-size: 21px; }
.contact-card p { margin: 8px 0 0; }
.contact-card .email { font-size: 21px; font-weight: 600; }

.path { font-weight: 500; color: var(--text); }

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

.site-footer { border-top: 1px solid var(--line); padding: 48px 0 40px; font-size: 15px; color: var(--text-2); }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-head { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-grid a { color: var(--text-2); text-decoration: none; }
.footer-grid li a { display: inline-block; padding: 10px 0; }
.footer-grid a:hover { color: var(--text); text-decoration: underline; }
.footer-about { grid-column: 1 / -1; max-width: 36ch; }
@media (min-width: 900px) { .footer-about { grid-column: auto; } }
.footer-about p { margin: 12px 0 0; }
.legal-line { margin-top: 40px; font-size: 13px; color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}