/*
  re:Work — site styles.

  The page borrows the app's own structure rather than a landing-page kit:
  - the History window's word-only rail becomes the site navigation;
  - sections sit on a chronology thread, stamped with 12-hour times the way
    the Day view stamps its stretches;
  - the three sky paintings the Today panel uses carry the page from morning
    to night.
  Colours and faces come from tokens.css, which mirrors the app's Theme.
*/

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-weight: 600; margin: 0; text-wrap: balance; }
p, li { text-wrap: pretty; }

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--card);
  border-radius: var(--r-control);
  font: 500 14px/1.4 var(--font-sans);
}
.skip-link:focus { top: 12px; }

/* ---------- Type ---------- */

.eyebrow,
.rail-word {
  /* The History rail's face: SF Mono, medium, tracked. */
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.eyebrow {
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted-ink);
}
.display {
  font-family: var(--font-serif);
  font-size: clamp(44px, 6.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.h2 {
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.012em;
}
.h3 {
  font-size: 23px;
  line-height: 1.25;
}
.lede {
  font-size: clamp(20px, 1.6vw, 23px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 34em;
}
.small-sans {
  font: 400 14px/1.5 var(--font-sans);
  color: var(--muted-ink);
}
.muted { color: var(--muted-ink); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Clock stamps: New York numerals with an SF Pro suffix, as the Day view
   draws them. */
.clock {
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
}
.clock small {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-left: 3px;
}

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

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font: 600 15px/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease-out, transform 150ms ease-out, box-shadow 150ms ease-out;
}
.button svg { width: 18px; height: 18px; flex: none; }
.button--primary {
  background: var(--selection-deep);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 18px rgba(6, 91, 163, 0.28);
}
.button--primary:hover { background: #054b87; }
:root[data-theme="dark"] .button--primary,
.on-dark .button--primary { background: #117bc8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .button--primary { background: #117bc8; color: #fff; }
  :root:not([data-theme="light"]) .button--primary:hover { background: #1a8ad9; }
}
.button--quiet {
  background: var(--fill-5);
  color: var(--ink);
}
.button--quiet:hover { background: var(--fill-10); }
.button--on-sky {
  background: rgba(255, 255, 255, 0.9);
  color: #0b1b2b;
  box-shadow: 0 8px 28px rgba(10, 20, 50, 0.25);
}
.button--on-sky:hover { background: #fff; }
.button:active { transform: translateY(1px); }

.download-meta {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--muted-ink);
}

/* ---------- Page frame: the rail ---------- */

.frame {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  min-height: 100vh;
}
.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 28px 22px 28px 16px;
  z-index: 20;
}
.rail__mark {
  display: block;
  width: 56px;
  margin-bottom: 64px;
}
.rail__mark img { width: 56px; height: auto; }
.rail nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}
.rail-word {
  font-size: 17px;
  line-height: 23px;
  letter-spacing: 0.05em;
  color: var(--muted-ink);
  text-decoration: none;
  transition: color 150ms ease-out;
}
.rail-word:hover { color: var(--ink); }
.rail-word[aria-current="true"],
.rail-word[aria-current="page"] { color: var(--selection); }
.rail__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.rail__foot .rail-word { font-size: 13px; }

.page { min-width: 0; }

/* On the hero the rail sits over the painting. */
.rail--over-sky .rail-word { color: rgba(255, 255, 255, 0.78); }

@media (max-width: 1040px) {
  .frame { display: block; }
  .rail {
    position: sticky;
    top: 0;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: saturate(1.4) blur(18px);
    -webkit-backdrop-filter: saturate(1.4) blur(18px);
    border-bottom: 0.5px solid var(--hairline);
  }
  .rail__mark { margin: 0; width: 40px; }
  .rail__mark img { width: 40px; }
  .rail nav ul { flex-direction: row; gap: 18px; }
  .rail-word { font-size: 13px; }
  .rail__foot { display: none; }
}
@media (max-width: 620px) {
  .rail nav .rail-optional { display: none; }
  .rail nav ul { gap: 14px; }
}

/* ---------- Chronology thread ---------- */
/* Each section is a stretch on the page's day. A hairline thread runs down
   the left, a clock stamps each stop. */

.day {
  position: relative;
  padding: 0 clamp(20px, 4vw, 56px) 0 0;
}
.stop {
  position: relative;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr); /* the Day view's time rail */
  column-gap: 28px;
  padding: 112px 0 40px;
}
.stop::before {
  /* the thread */
  content: "";
  position: absolute;
  left: 124px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hairline);
}
.stop__time {
  position: relative;
  text-align: right;
  padding-top: 6px;
  color: var(--muted-ink);
}
.stop__time::after {
  /* the stop marker on the thread */
  content: "";
  position: absolute;
  right: -18px;
  top: 11px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 1.5px var(--stop-color, var(--muted-ink));
}
.stop__body { min-width: 0; padding-left: 16px; }
.stop__head { max-width: 780px; margin-bottom: 40px; }
.stop__head .eyebrow { margin-bottom: 14px; display: block; }
.stop__head .h2 + .lede { margin-top: 20px; }

@media (max-width: 760px) {
  .day { padding: 0 20px; }
  .stop {
    display: block;
    padding: 80px 0 24px 22px;
  }
  .stop::before { left: 0; }
  .stop__time {
    text-align: left;
    padding: 0 0 12px;
  }
  .stop__time::after { left: -26px; right: auto; top: 5px; }
  .stop__body { padding-left: 0; }
}

/* ---------- Hero: morning ---------- */

.hero {
  position: relative;
  min-height: min(100vh, 980px);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/sky-morning.jpg") center 70% / cover no-repeat;
}
.hero::after {
  /* Keep white type legible over the brightest part of the painting. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(20, 30, 70, 0.34) 0%, rgba(20, 30, 70, 0.08) 38%, rgba(40, 30, 60, 0) 60%),
    linear-gradient(90deg, rgba(25, 30, 70, 0.28) 0%, rgba(25, 30, 70, 0) 55%);
}

/* A macOS menu bar across the top of the painting. */
.menubar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  height: 30px;
  padding: 0 16px;
  font: 500 13px/1 var(--font-sans);
  color: rgba(255, 255, 255, 0.96);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
}
.menubar__left {
  margin-right: auto;
  display: flex;
  gap: 18px;
  align-items: center;
}
.menubar__left b { font-weight: 700; }
.menubar svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.menubar__tray {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.24);
}
.menubar__tray img {
  width: 20px;
  height: auto;
  /* The tray icon is a template image; the menu bar draws it white here. */
  filter: brightness(0) invert(1);
}
.menubar__clock { font-variant-numeric: tabular-nums; }

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: start;
  padding: 0 clamp(20px, 4vw, 56px) 96px 0;
}
.hero__copy {
  padding-top: clamp(80px, 13vh, 150px);
  max-width: 640px;
  text-shadow: 0 1px 24px rgba(20, 25, 60, 0.28);
}
.hero__copy .eyebrow { color: rgba(255, 255, 255, 0.86); display: block; margin-bottom: 22px; }
.hero__copy .lede { color: rgba(255, 255, 255, 0.95); margin: 28px 0 36px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.hero__actions .download-meta { color: rgba(255, 255, 255, 0.86); text-shadow: none; }

/* The Today panel hangs 6pt under its status item, as it does on a Mac
   (StatusItemController.panelGap), and centres on the item until it would
   pass 8pt from the screen's edge (panelScreenInset). With the item this
   close to the right edge, that keeps the panel 8pt in from it. `.shot` sets
   margin: 0, so these need the extra class to apply. */
.shot.hero__panel {
  position: relative;
  margin-top: 6px;
  margin-right: 0;
  --screen-scale: 1;
}
@media (min-width: 1181px) {
  .hero__inner { padding-right: 8px; }
}
.hero__panel::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 72px;
  width: 1px;
  height: 0;
}

@media (max-width: 1180px) {
  .hero__inner { grid-template-columns: 1fr; padding-left: clamp(20px, 4vw, 56px); }
  .shot.hero__panel { justify-self: center; margin: 0; }
}
@media (max-width: 1040px) {
  .hero .menubar__left span:not(:first-child) { display: none; }
}

/* ---------- Screens on the page ---------- */

.shot {
  margin: 0;
  position: relative;
}
.shot__frame {
  /* JS sets --screen-scale from the available width; this is the no-JS
     fallback, which crops rather than overflows. */
  max-width: 100%;
  overflow: hidden;
  border-radius: 18px;
}
.shot figcaption {
  margin-top: 18px;
  font: 400 14px/1.5 var(--font-sans);
  color: var(--muted-ink);
  max-width: 60ch;
}

/* Side notes beside a screen: the Day view's quiet annotations. */
.notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 40px;
  max-width: 1080px;
}
.note {
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}
.note h3 {
  font: 600 15px/1.35 var(--font-sans);
  margin-bottom: 6px;
}
.note p {
  font: 400 15px/1.55 var(--font-sans);
  color: var(--muted-ink);
  margin: 0;
}
@media (max-width: 900px) {
  .notes { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- The privacy ledger ---------- */

.ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1.5px solid var(--ink);
  max-width: 1080px;
}
.ledger__col {
  padding: 22px 28px 26px 0;
}
.ledger__col + .ledger__col {
  padding-left: 28px;
  border-left: 1px solid var(--hairline);
}
.ledger__col h3 {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ledger__col h3 i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dot, var(--muted-ink));
}
.ledger__col p { font-size: 18px; line-height: 1.5; margin: 0; }
.ledger__foot {
  max-width: 1080px;
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font: 400 14px/1.5 var(--font-sans);
  color: var(--muted-ink);
}
.ledger__foot a { color: var(--selection); text-decoration: none; }
.ledger__foot a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger__col, .ledger__col + .ledger__col {
    padding: 18px 0;
    border-left: 0;
  }
  .ledger__col + .ledger__col { border-top: 1px solid var(--hairline); }
}

/* ---------- Blocks → work items → streams ---------- */
/* Drawn from the logo's own bars: each bar is a block. */

.model {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 1080px;
  margin-top: 8px;
}
.model__step {
  padding: 0 28px 0 0;
}
.model__step + .model__step {
  padding-left: 28px;
  border-left: 1px solid var(--hairline);
}
.model__step h3 {
  font-size: 23px;
  margin: 22px 0 8px;
}
.model__step p {
  font: 400 15px/1.55 var(--font-sans);
  color: var(--muted-ink);
  margin: 0;
}
.model__art {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}
.bar {
  height: 11px;
  border-radius: 6px;
  background: var(--c);
}
.bar-row { display: flex; gap: 6px; align-items: center; }
.bar-row .label {
  font: 500 11px/1 var(--font-mono);
  color: var(--muted-ink);
  width: 64px;
  flex: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stream-group {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--card);
}
.stream-group + .stream-group { margin-top: 8px; }
.stream-group__name {
  font: 600 12px/1.2 var(--font-sans);
  display: flex;
  justify-content: space-between;
}
.stream-group__name span:last-child { font-family: var(--font-mono); font-weight: 400; color: var(--muted-ink); }
@media (max-width: 900px) {
  .model { grid-template-columns: 1fr; }
  .model__step, .model__step + .model__step {
    padding: 22px 0;
    border-left: 0;
  }
  .model__step + .model__step { border-top: 1px solid var(--hairline); }
}

/* ---------- Claim tiers ---------- */

.tiers {
  width: 100%;
  max-width: 1080px;
  border-collapse: collapse;
  margin-top: 36px;
  font: 400 15px/1.5 var(--font-sans);
}
.tiers th, .tiers td {
  text-align: left;
  vertical-align: top;
  padding: 14px 20px 14px 0;
  border-top: 1px solid var(--hairline);
}
.tiers thead th {
  font: 500 12px/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-ink);
  border-top: 1.5px solid var(--ink);
}
.tiers tbody th {
  font: 600 19px/1.3 var(--font-serif);
  white-space: nowrap;
}
.tiers td:last-child { font-family: var(--font-serif); font-size: 18px; font-style: italic; }
.tiers-wrap { overflow-x: auto; }

/* ---------- Plan: the field ---------- */

.field-band {
  position: relative;
  margin: 0 0 0 0;
  height: clamp(160px, 22vw, 300px);
  background: url("../img/field-midday.jpg") center 60% / cover no-repeat;
}

/* ---------- Principles ---------- */

.principles {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  counter-reset: p;
}
.principles li {
  counter-increment: p;
  display: grid;
  grid-template-columns: 44px 1fr;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
}
.principles li::before {
  content: counter(p, decimal-leading-zero);
  font: 500 13px/1.9 var(--font-mono);
  color: var(--muted-ink);
}
.principles h3 { font-size: 22px; margin-bottom: 6px; }
.principles p { font: 400 15px/1.55 var(--font-sans); color: var(--muted-ink); margin: 0; }
@media (max-width: 900px) {
  .principles { grid-template-columns: 1fr; }
}

/* ---------- Night: download ---------- */

.night {
  position: relative;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
  margin-top: 120px;
}
.night::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/sky-night.jpg") center 40% / cover no-repeat;
}
.night::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--paper) 0%, rgba(7, 18, 22, 0) 22%);
}
.night .stop::before { background: rgba(255, 255, 255, 0.22); }
.night .stop__time { color: rgba(255, 255, 255, 0.72); }
.night .stop__time::after { background: #0c1830; box-shadow: 0 0 0 1.5px var(--mint); }
.night .eyebrow { color: rgba(255, 255, 255, 0.72); }
.night .lede { color: rgba(255, 255, 255, 0.9); }
.night__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
  padding-bottom: 120px;
}
.night .download-meta { color: rgba(255, 255, 255, 0.72); }
.night .download-meta a { color: #fff; }
.live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 14px/1 var(--font-sans);
  color: rgba(255, 255, 255, 0.86);
  margin-top: 28px;
}
.live i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 0 rgba(95, 224, 200, 0.6);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(95, 224, 200, 0.55); }
  70% { box-shadow: 0 0 0 12px rgba(95, 224, 200, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 224, 200, 0); }
}
@media (max-width: 1180px) {
  .night__grid { grid-template-columns: 1fr; }
  .night__grid .shot { justify-self: start; }
}

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

.site-footer {
  background: #050d10;
  color: rgba(234, 242, 244, 0.7);
  font: 400 14px/1.6 var(--font-sans);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  padding: 40px clamp(20px, 4vw, 56px) 48px 0;
}
.site-footer__mark {
  display: flex;
  justify-content: flex-end;
  padding-right: 22px;
}
.site-footer__mark img { width: 56px; height: auto; }
.site-footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  justify-content: space-between;
  padding-left: 44px;
}
.site-footer a { color: rgba(234, 242, 244, 0.92); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
@media (max-width: 1040px) {
  .site-footer__inner { grid-template-columns: 1fr; padding-left: 20px; gap: 20px; }
  .site-footer__mark { justify-content: flex-start; }
  .site-footer__cols { padding-left: 0; }
}

/* ---------- Document pages (privacy, download) ---------- */

.doc {
  padding: 72px clamp(20px, 4vw, 56px) 120px 44px;
  max-width: 1040px;
}
.doc > header { margin-bottom: 56px; }
.doc > header .eyebrow { display: block; margin-bottom: 16px; }
.doc > header .lede { margin-top: 22px; }
.doc section { margin-top: 64px; }
.doc section > h2 {
  font-size: 30px;
  line-height: 1.2;
  margin-bottom: 18px;
}
.doc section > h2 .mono {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-ink);
  display: block;
  margin-bottom: 8px;
  letter-spacing: 0.06em;
}
.doc p, .doc li { max-width: 38em; }
.doc ul.plain { padding-left: 1.1em; }
.doc ul.plain li { margin-bottom: 0.4em; }
.doc code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: var(--fill-5);
  padding: 1px 5px;
  border-radius: 5px;
}
.doc a { color: var(--selection); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.table {
  width: 100%;
  border-collapse: collapse;
  font: 400 15px/1.5 var(--font-sans);
  margin: 8px 0 0;
}
.table th, .table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 18px 12px 0;
  border-top: 1px solid var(--hairline);
}
.table thead th {
  font: 500 12px/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-ink);
  border-top: 1.5px solid var(--ink);
}
.table tbody th { font-weight: 600; white-space: nowrap; }
.table-wrap { overflow-x: auto; }

.steps {
  list-style: none;
  counter-reset: s;
  padding: 0;
  margin: 0;
}
.steps > li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 56px 1fr;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
  max-width: none;
}
.steps > li::before {
  content: counter(s);
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1;
  color: var(--muted-ink);
}
.steps h3 { font-size: 21px; margin-bottom: 6px; }
.steps p { font: 400 16px/1.55 var(--font-sans); color: var(--muted-ink); margin: 0; }
.steps kbd {
  font: 500 13px/1 var(--font-sans);
  padding: 3px 6px;
  border-radius: 5px;
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--ink);
}

.download-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-dialog);
  background: var(--card);
  box-shadow: 0 4px 12px var(--shadow);
  max-width: 760px;
}
.download-card img { width: 112px; height: 112px; }
.download-card h2 { font-size: 30px; margin-bottom: 4px; }
.download-card .download-meta { margin: 6px 0 18px; }
@media (max-width: 620px) {
  .download-card { grid-template-columns: 1fr; }
  .download-card img { width: 88px; height: 88px; }
}

.faq dt {
  font: 600 19px/1.35 var(--font-serif);
  margin-top: 28px;
}
.faq dd {
  margin: 8px 0 0;
  font: 400 16px/1.6 var(--font-sans);
  color: var(--muted-ink);
  max-width: 40em;
}

.callout {
  border-left: 3px solid var(--indigo);
  background: var(--card);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  padding: 14px 18px;
  font: 400 15px/1.55 var(--font-sans);
  max-width: 40em;
  box-shadow: 0 0 0 1px var(--hairline);
}
.callout strong { font-weight: 600; }

/* The current page's word in the rail, as History marks its route. */
body[data-page="privacy"] .rail-word[data-nav="privacy"],
body[data-page="download"] .rail-word[data-nav="download"] { color: var(--selection); }

/* ---------- Full-bleed sections under the rail ---------- */
/* The hero and the night section run under the rail, the way a painting
   runs under the Today panel's header. JS marks the rail while it sits over
   one, so its words turn white. */
@media (min-width: 1041px) {
  .hero,
  .night {
    margin-left: -200px;
    padding-left: 200px;
  }
  .rail { transition: color 200ms ease-out; }
  .rail.is-over-art .rail-word { color: rgba(255, 255, 255, 0.8); }
  .rail.is-over-art .rail-word:hover,
  .rail.is-over-art .rail-word[aria-current] { color: #fff; }
  .rail.is-over-art .rail__mark img { filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.25)); }
  .rail__mark { background: rgba(255, 255, 255, 0.92); border-radius: 12px; padding: 7px 8px; width: auto; }
  .rail__mark img { width: 44px; }
}
.hero__copy { padding-left: 0; }
@media (min-width: 1181px) {
  .hero__inner { padding-left: 44px; }
}
.night .day { padding-left: 0; }

/* ---------- Screens sit on the app's own paintings ---------- */
/* A History window drawn straight onto the page's paper loses its edges, so
   each one sits on a painting from the app, like a window on a desktop. */
.shot__frame {
  overflow: visible;
  padding: clamp(18px, 4vw, 56px);
  border-radius: 22px;
  background: var(--wallpaper, url("../img/sky-midday.jpg")) center / cover no-repeat;
}
.shot--morning { --wallpaper: url("../img/sky-morning.jpg"); }
.shot--field { --wallpaper: url("../img/field-midday.jpg"); }
.shot--evening { --wallpaper: url("../img/field-night.jpg"); }
@media (min-width: 1041px) {
  .hero .menubar { margin-left: -200px; }
  .rail { padding-top: 48px; }
}
@media (max-width: 1180px) {
  .hero__inner { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 620px) {
  .hero__copy { padding-top: 56px; }
  .shot__frame { padding: 10px; border-radius: 14px; }
}
.doc section > h2 .mono { text-transform: uppercase; }
.site-footer__mark img { background: rgba(255, 255, 255, 0.92); border-radius: 12px; padding: 7px 8px; width: 60px; }