/* Edgepost website. The palette and the type are the app's own (DESIGN.md):
   neutral canvas, white cards on hairlines, ink type, blue for every action,
   the brand orange only on the Signpost mark and the active tab. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700.woff2') format('woff2');
}

:root {
  color-scheme: light dark;
  --canvas: #f6f7f9;
  --surface: #ffffff;
  --ink: #17181c;
  --ink-muted: #5b606a;
  --hairline: #e3e5e9;
  --tint: #2557d6;
  --tint-hover: #1d47b3;
  --on-tint: #ffffff;
  --tint-wash: #eaf0fd;
  --brand: #f2672a;
  --attention: #c42b1f;
  --on-attention: #ffffff;
  --neutral-wash: #eff1f4;
  --band: #17181c;
  --on-band: #f3f4f6;
  --on-band-muted: #a2a6ae;
  --band-hairline: #2a2c31;
  --band-tint: #9db8ff;
  --shot-shadow: 0 30px 60px -24px rgba(23, 24, 28, 0.38), 0 10px 20px -12px rgba(23, 24, 28, 0.22);
  --bezel: #17181c;
  --bezel-edge: transparent;
  --display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 40px);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0e0f12;
    --surface: #17181c;
    --ink: #ecedef;
    --ink-muted: #a2a6ae;
    --hairline: #2a2c31;
    --tint: #86a8ff;
    --tint-hover: #a9c1ff;
    --on-tint: #0b1530;
    --tint-wash: #1b2541;
    --brand: #ff8a4f;
    --attention: #ff6b5e;
    --on-attention: #2a0d0a;
    --neutral-wash: #24262b;
    --band: #1f2025;
    --band-hairline: #2a2c31;
    --shot-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px #2a2c31;
    --bezel: #2a2c33;
    --bezel-edge: #3b3e46;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--tint-wash);
  color: var(--ink);
}

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

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--tint);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--tint-hover);
}

h1,
h2,
h3 {
  font-family: var(--display);
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(2.5rem, 4.4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

/* The ® on a trademark's first use in text: small, raised, and out of the
   line's height so the heading keeps its rhythm. */
.tm {
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0;
  vertical-align: super;
}

h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 20;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}

.skip:focus {
  top: 12px;
}

.wrap {
  width: min(1200px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* The Signpost mark: post and lower board in ink, envelope in orange. */
.mark {
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--ink);
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.site-header.is-scrolled {
  border-bottom-color: var(--hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font: 700 1.25rem/1 var(--display);
  letter-spacing: -0.02em;
}

.brand:hover {
  color: var(--ink);
}

.nav {
  margin-left: auto;
}

.nav ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.97rem;
}

.nav a:hover,
.nav a[aria-current='page'] {
  color: var(--ink);
  background: var(--neutral-wash);
}

.menu-button {
  display: none;
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: 600 0.95rem var(--text);
  cursor: pointer;
}

/* Narrow screens: a menu once the script runs; without it, the links wrap
   under the name. */
@media (max-width: 760px) {
  .site-header__inner {
    flex-wrap: wrap;
  }

  .nav ul {
    flex-wrap: wrap;
  }

  .has-menu .site-header__inner {
    flex-wrap: nowrap;
  }

  .has-menu .menu-button {
    display: inline-flex;
    align-items: center;
  }

  .has-menu .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 8px var(--gutter) 16px;
    background: var(--canvas);
    border-bottom: 1px solid var(--hairline);
  }

  .has-menu .nav[hidden] {
    display: none;
  }

  .has-menu .nav ul {
    flex-direction: column;
  }

  .has-menu .nav a {
    width: 100%;
  }
}

/* Buttons and store boxes */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  font: 600 1rem/1 var(--text);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.button svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.button--primary {
  background: var(--tint);
  color: var(--on-tint);
}

.button--primary:hover {
  background: var(--tint-hover);
  color: var(--on-tint);
}

.button--quiet {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline);
}

.button--quiet:hover {
  color: var(--ink);
  border-color: var(--ink-muted);
}

/* A store listing that is not live yet: a box, not a link. */
.store {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
  padding: 6px 16px;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  line-height: 1.2;
}

.store small {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.store strong {
  color: var(--ink);
  font: 600 0.98rem/1.2 var(--display);
}

/* The tour: the copy on the left, the pinned phone on the right. */

.tour {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: clamp(32px, 6vw, 96px);
  padding-top: clamp(32px, 6vw, 72px);
}

.hero {
  display: grid;
  gap: 24px;
  padding-bottom: clamp(48px, 10vh, 120px);
  min-height: calc(100svh - 64px - 72px);
  align-content: center;
}

.hero__offer {
  max-width: 34em;
  color: var(--ink-muted);
  font-size: clamp(1.08rem, 1.4vw, 1.2rem);
}

.hero__offer strong {
  color: var(--ink);
  font-weight: 600;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.facts svg {
  width: 16px;
  height: 16px;
  color: var(--tint);
}

.caveat {
  max-width: 34em;
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.chapter {
  padding-top: clamp(40px, 8vh, 96px);
  border-top: 1px solid var(--hairline);
}

.chapter > h2 {
  max-width: 14em;
  margin-bottom: 8px;
}

/* Each step holds the phone on its screen while it is read: its words at
   the top, the rest of the block the time the screen stays. */
.step {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 55svh;
  max-width: 32em;
  padding-block: 20px 0;
}

.chapter > h2 + .step {
  padding-top: 8px;
}

.step p {
  color: var(--ink-muted);
}

.step p strong {
  color: var(--ink);
  font-weight: 600;
}

.step__screen {
  display: none;
}

.chapter:last-of-type .step:last-child {
  min-height: 60svh;
}

.hero picture,
.step picture {
  display: contents;
}

.tour__device {
  position: relative;
}

.device {
  position: sticky;
  top: max(84px, calc(50svh - 320px));
  display: grid;
  justify-items: center;
  gap: 18px;
  padding-bottom: 48px;
}

/* A phone drawn in CSS around the real screens: the frame, the island in
   the band the captures leave above the app. */
.phone {
  position: relative;
  width: clamp(250px, 24vw, 300px);
  padding: 9px;
  border-radius: 50px;
  background: var(--bezel);
  box-shadow: var(--shot-shadow), 0 0 0 1px var(--bezel-edge);
}

.phone__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1320 / 2868;
  border-radius: 41px;
  background: #f6f7f9;
}

.phone__screen::after {
  content: '';
  position: absolute;
  top: 2.2%;
  left: 50%;
  width: 31%;
  height: 3.3%;
  border-radius: 999px;
  background: #0b0b0d;
  transform: translateX(-50%);
  z-index: 2;
}

.phone__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateX(26%);
  transition: transform 0.42s var(--ease-out), opacity 0.42s var(--ease-out), filter 0.42s var(--ease-out);
}

.phone__screen img.is-current {
  opacity: 1;
  transform: none;
  z-index: 1;
}

.phone__screen img.is-behind {
  opacity: 0;
  transform: translateX(-12%);
  filter: brightness(0.92);
}

.phone__screen.is-back img:not(.is-current):not(.is-behind) {
  transform: translateX(-12%);
}

.phone__screen.is-back img.is-behind {
  transform: translateX(26%);
}

/* The phone's tab bar is the chapter index: drawn over the one in the
   captures, at the app's height, its active glyph in the brand orange. It
   slides away on the screens the app shows without it (a thread, a reply),
   as the app does. */
.dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 9%;
  padding: 0 4% 3.2%;
  border-top: 0.5px solid var(--hairline);
  /* Opaque: it stands in for the bar in the capture, which must not show. */
  background: var(--surface);
  transition: transform 0.35s var(--ease-out);
}

.dock[hidden] {
  display: none;
}

.dock.is-away {
  transform: translateY(101%);
}

.dock button {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font: 500 0.625rem/1.1 var(--text);
  cursor: pointer;
  transition: color 0.2s;
}

.dock button:hover {
  color: var(--ink);
}

.dock button:focus-visible {
  outline-offset: -3px;
}

.dock__glyph {
  position: relative;
  display: inline-grid;
}

.dock svg {
  width: 21px;
  height: 21px;
  transition: color 0.25s var(--ease-out);
}

/* The app's tab badges: what needs you in attention red, unread in blue. */
.badge {
  position: absolute;
  top: -4px;
  left: 13px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--on-tint);
  font: 600 0.56rem/15px var(--text);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.badge--attention {
  background: var(--attention);
  color: var(--on-attention);
}

.dock button[aria-current='step'] {
  color: var(--ink);
  font-weight: 600;
}

.dock button[aria-current='step'] svg {
  color: var(--brand);
}

.demo-note {
  color: var(--ink-muted);
  font-size: 0.82rem;
  text-align: center;
}

@media (max-width: 900px) {
  .tour {
    grid-template-columns: minmax(0, 1fr);
  }

  .tour__device {
    display: none;
  }

  .hero {
    min-height: 0;
    padding-bottom: 48px;
  }

  .step {
    min-height: 0;
    padding-block: 28px 8px;
  }

  .step__screen {
    display: block;
    width: min(78%, 330px);
    margin: 16px auto 8px;
    border-radius: 34px;
    box-shadow: var(--shot-shadow);
  }

  .hero .step__screen {
    margin-top: 8px;
  }
}

/* Sections */

.section {
  padding-block: clamp(72px, 12vw, 136px);
}

.section__head {
  display: grid;
  gap: 16px;
  max-width: 40em;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section__head p {
  color: var(--ink-muted);
  font-size: 1.1rem;
}

/* Screens: three device tabs over one scrolling strip. */

.gallery-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.strip-nav {
  display: flex;
  gap: 8px;
}

.strip-nav[hidden] {
  display: none;
}

.icon-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-md);
  background: var(--neutral-wash);
}

.tabs button {
  min-height: 40px;
  min-width: 96px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-muted);
  font: 600 0.95rem var(--text);
  cursor: pointer;
}

.tabs button[aria-selected='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(23, 24, 28, 0.1), 0 0 0 1px var(--hairline);
}

.strip {
  display: flex;
  gap: clamp(16px, 2.4vw, 28px);
  overflow-x: auto;
  padding: 8px var(--gutter) 40px;
  margin-inline: calc(-1 * var(--gutter));
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}

.strip::-webkit-scrollbar {
  height: 8px;
}

.strip::-webkit-scrollbar-thumb {
  background: var(--hairline);
  border-radius: 999px;
}

.shot {
  flex: none;
  display: grid;
  gap: 12px;
  scroll-snap-align: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font: 500 0.9rem/1.3 var(--text);
  text-align: left;
  cursor: zoom-in;
}

.shot img {
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shot-shadow);
  transition: transform 0.3s var(--ease-out);
}

.shot:hover img {
  transform: translateY(-4px);
}

.strip[data-device='iphone'] .shot img {
  width: clamp(200px, 22vw, 260px);
}

.strip[data-device='ipad'] .shot img {
  width: clamp(280px, 36vw, 440px);
  border-radius: 18px;
}

.strip[data-device='android'] .shot img {
  width: clamp(200px, 22vw, 260px);
  border-radius: 18px;
}

.strip[hidden] {
  display: none;
}

/* The screen viewer */

.viewer {
  width: min(100vw - 32px, 1100px);
  max-height: calc(100svh - 32px);
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
}

.viewer::backdrop {
  background: rgba(14, 15, 18, 0.72);
}

.viewer__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 16px;
}

.viewer figure {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 12px;
}

.viewer img {
  max-height: calc(100svh - 160px);
  width: auto;
  border-radius: 16px;
  box-shadow: var(--shot-shadow);
}

.viewer figcaption {
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.icon-button:hover {
  border-color: var(--ink-muted);
}

.icon-button svg {
  width: 20px;
  height: 20px;
}

.viewer__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}

/* Nothing in between: the one ink band. */

.band {
  background: var(--band);
  color: var(--on-band);
}

.band h2,
.band h3 {
  color: var(--on-band);
}

.band .section__head p,
.band p {
  color: var(--on-band-muted);
}

.band a {
  color: var(--band-tint);
}

.route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
  grid-template-rows: auto auto;
  gap: 18px 0;
  align-items: center;
  max-width: 980px;
}

.node {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--band-hairline);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
}

.node strong {
  color: var(--on-band);
  font: 600 1.05rem/1.3 var(--display);
}

.node span {
  color: var(--on-band-muted);
  font-size: 0.92rem;
}

.node--phone {
  grid-row: 1 / span 2;
  align-self: stretch;
  align-content: center;
}

.node--phone .mark {
  width: 40px;
  height: 40px;
  margin-bottom: 6px;
  color: var(--on-band);
}

.wire {
  position: relative;
  width: clamp(48px, 9vw, 120px);
  height: 2px;
  background: var(--band-tint);
}

.wire::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--band-tint);
  border-right: 2px solid var(--band-tint);
  transform: translateY(-50%) rotate(45deg);
}

.none {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  color: var(--on-band-muted);
  font-size: 0.95rem;
}

.none s {
  color: var(--on-band);
  text-decoration-thickness: 2px;
}

.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px 40px;
  margin-top: clamp(48px, 7vw, 80px);
  padding: 0;
  list-style: none;
}

.points li {
  display: grid;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--band-hairline);
}

@media (max-width: 700px) {
  .route {
    grid-template-columns: minmax(0, 1fr);
  }

  .node--phone {
    grid-row: auto;
  }

  .wire {
    width: 2px;
    height: 28px;
    margin-left: 28px;
  }

  .wire::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1px;
    transform: translateX(-50%) rotate(135deg);
  }
}

/* Source */

.source {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.license {
  margin: 0;
  padding: 22px 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink-muted);
  font: 400 0.86rem/1.6 var(--mono);
  white-space: pre-wrap;
}

.license b {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 860px) {
  .source {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Questions */

.faq {
  max-width: 820px;
  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;
  min-height: 64px;
  padding: 14px 0;
  font: 600 1.12rem/1.35 var(--display);
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--ink-muted);
  transition: transform 0.25s var(--ease-out);
}

.faq details[open] summary svg {
  transform: rotate(45deg);
}

.faq details > div {
  display: grid;
  gap: 12px;
  max-width: 44em;
  padding: 0 0 22px;
  color: var(--ink-muted);
}

/* The close */

.close {
  display: grid;
  justify-items: start;
  gap: 24px;
  padding-block: clamp(72px, 10vw, 120px);
  border-top: 1px solid var(--hairline);
}

.close h2 {
  max-width: 16em;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
}

/* Footer */

.site-footer {
  padding-block: 40px 56px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.site-footer__inner {
  display: grid;
  gap: 18px;
}

.site-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.site-footer a:hover,
.site-footer a[aria-current='page'] {
  color: var(--ink);
}

.site-footer p {
  max-width: 60em;
  font-size: 0.86rem;
}

/* Legal and policy pages */

.doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  padding-block: clamp(40px, 7vw, 80px) clamp(64px, 9vw, 112px);
}

.doc > * {
  max-width: 44rem;
}

.doc h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.2rem);
  margin-bottom: 12px;
}

.doc .updated {
  color: var(--ink-muted);
  margin-bottom: 32px;
}

.doc h2 {
  font-size: 1.55rem;
  margin: 44px 0 12px;
}

.doc h3 {
  font-size: 1.12rem;
  margin: 28px 0 8px;
}

.doc p,
.doc ul {
  margin: 0 0 14px;
}

.doc ul {
  padding-left: 1.2em;
}

.doc li {
  margin-bottom: 6px;
}

.doc .summary {
  display: grid;
  gap: 10px;
  margin: 0 0 8px;
  padding: 20px 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.doc dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 24px;
  margin: 0 0 16px;
}

.doc dt {
  color: var(--ink-muted);
}

.doc dd {
  margin: 0;
}

.toc {
  margin-bottom: 8px;
  padding: 16px 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}

.toc h2 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.toc ol {
  margin: 0;
  padding-left: 1.3em;
  columns: 2 14em;
}

@media (max-width: 520px) {
  .doc dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .doc dd {
    margin-bottom: 10px;
  }
}

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

  .phone__screen img,
  .phone__screen.is-back img,
  .phone__screen img.is-behind {
    transform: none !important;
    filter: none !important;
    transition: opacity 0.16s linear;
  }

  .dock {
    transition: opacity 0.16s linear;
  }

  .dock.is-away {
    transform: none;
    opacity: 0;
    visibility: hidden;
  }

  .shot img,
  .dock svg {
    transition: none;
  }
}