:root {
  --ink: #1D1D1F;
  --muted: #6E6E73;
  --highlight: #FFE94D;
  --rule: #E6E6E6;
  --canvas: #F6F6F6;
  --dot: #CFCFD4;
  --accent: #007AFF;
  --font: system-ui, -apple-system, sans-serif;
}

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

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

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

main { display: flex; flex-direction: column; align-items: center; }


.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  padding: 160px 40px 0;
  text-align: center;
}

.hero h1 {
  max-width: 1100px;
  font-size: clamp(44px, 6.12vw, 88px);
  line-height: 1.045;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.sub {
  color: var(--muted);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.01em;
}

.sub mark {
  display: inline-block;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--highlight);
  color: var(--ink);
}

.try {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 28px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}


.demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 44px 40px 0;
}

.switch-scroller { display: flex; justify-content: center; max-width: 100%; }

.switch {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: #EDEDF0;
}

/* Each tab reserves its semibold width, so selecting one never shifts the others. */
.switch button::after { content: attr(data-label); font-weight: 600; visibility: hidden; }
.switch button > span, .switch button::after { grid-area: 1 / 1; }

.switch button {
  display: inline-grid;
  place-items: center;
  height: 30px;
  padding: 0 16px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.switch button[aria-selected="true"] {
  background: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 0 0 0.5px #0000001F, 0 1px 3px #00000014;
}

.window { position: relative; flex-shrink: 0; overflow: clip; }

.canvas {
  width: min(1200px, 100%);
  aspect-ratio: 1200 / 760;
  border-radius: 18px;
  background-color: var(--canvas);
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.25px);
  background-size: 22px 22px;
  box-shadow: 0 0 0 0.5px #00000038, 0 24px 70px #00000033, 0 4px 14px #00000014;
}

.traffic-lights { position: absolute; left: 20px; top: 22px; display: flex; gap: 8px; }

.traffic-lights span {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 0.5px #0000001F;
}

.traffic-lights span:nth-child(1) { background: #FF5F57; }
.traffic-lights span:nth-child(2) { background: #FEBC2E; }
.traffic-lights span:nth-child(3) { background: #28C840; }

.viewport {
  position: absolute;
  left: 0;
  top: 0;
  width: 1200px;
  height: 760px;
  transform-origin: 0 0;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.board { position: absolute; left: 0; top: 0; width: 1200px; height: 760px; }

.pill {
  position: absolute;
  left: 92px;
  top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 4px 0 12px;
  border-radius: 16px;
  background: #FFFFFF;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  box-shadow: 0 0 0 0.5px #0000001F, 0 2px 10px #00000012;
  cursor: pointer;
}

.pill-back { display: none; gap: 8px; padding: 0 14px 0 10px; }

.pill-open {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 12px;
}

.hint {
  position: absolute;
  left: 298px;
  top: 22px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}

.hint p { padding-bottom: 2px; font-size: 15px; line-height: 20px; font-weight: 500; white-space: nowrap; }

.phone-only { display: none; }

.card {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 200px;
  overflow: clip;
  border-radius: 10px;
  background: #FFFFFF;
  cursor: grab;
}

.card.dragging { rotate: -2deg; }

.card p { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }

.card-note { padding: 16px 18px; }
.note-text { font-size: 15px; line-height: 21px; font-weight: 500; -webkit-line-clamp: 16; }

.card-quote { gap: 10px; padding: 14px 16px; }
.quote-body { display: flex; gap: 10px; }
.quote-body::before { content: ""; flex: 0 0 2px; border-radius: 1px; background: var(--ink); }
.quote-body p { font-size: 14px; line-height: 20px; -webkit-line-clamp: 10; }

.preview { display: block; flex-shrink: 0; width: 200px; height: 118px; background: #EFEFF2; object-fit: cover; }
.preview.number { display: flex; align-items: flex-end; padding: 14px; }
.preview.number span { font-size: 44px; line-height: 44px; font-weight: 800; letter-spacing: -0.03em; }

.preview.video {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 112px;
  background: #2C2C2E;
}

.play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: #FFFFFFEB;
}

.duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  background: #000000B3;
  color: #FFFFFF;
  font-size: 11px;
  line-height: 18px;
  font-weight: 600;
}

.card-footer { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.card-title { font-size: 13px; line-height: 17px; font-weight: 600; -webkit-line-clamp: 3; }
.card-site { color: var(--muted); font-size: 12px; line-height: 16px; -webkit-line-clamp: 1; }

.card-pdf, .card-image, .card-sheet {
  align-items: center;
  gap: 8px;
  overflow: visible;
  border-radius: 0;
  background: none;
}

.card-pdf { width: 150px; }

.first-page {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 150px;
  height: 194px;
  padding: 16px 14px;
  border-radius: 3px;
  background: #FFFFFF;
}

.first-page i { display: block; flex-shrink: 0; border-radius: 2px; }
.first-page .heading { width: 96px; height: 6px; background: var(--ink); }
.first-page .subheading { width: 60px; height: 4px; margin-bottom: 8px; background: #AEAEB2; }
.first-page .line { width: 122px; height: 3px; background: #D1D1D6; }
.first-page .line.short { width: 110px; }
.first-page .line.shorter { width: 90px; margin-bottom: 6px; }
.first-page .figure { width: 122px; height: 34px; background: #EFEFF2; }

.shot { display: block; width: 208px; height: auto; border-radius: 6px; }
.sheet { display: block; width: 200px; height: auto; border-radius: 6px; }

/* Shadows and edges per state, from the app's CardView Surface. Objects draw them on the page, not the card. */
.card, .first-page, .shot, .sheet {
  --edge: rgb(0 0 0 / 12%);
  --edge-width: 0.5px;
  --lift: 0 4px 14px rgb(0 0 0 / 6%);
  box-shadow:
    0 0 0 1px rgb(150 125 0 / calc(var(--halo) * 35%)),
    0 0 0 7px rgb(255 233 77 / calc(var(--halo) * 65%)),
    0 0 0 var(--edge-width) var(--edge),
    var(--lift);
  transition: box-shadow 0.12s ease-out, rotate 0.12s ease-out;
}

.first-page, .shot, .sheet { --edge: rgb(0 0 0 / 14%); --lift: 0 4px 14px rgb(0 0 0 / 8%); }
.card-pdf, .card-image, .card-sheet { box-shadow: none; }

.card.pressed, .card.pressed :is(.first-page, .shot, .sheet) { --edge: rgb(0 0 0 / 16%); --lift: 0 8px 22px rgb(0 0 0 / 10%); }

@media (hover: hover) {
  .card:hover, .card:hover :is(.first-page, .shot, .sheet) { --edge: rgb(0 0 0 / 16%); --lift: 0 8px 22px rgb(0 0 0 / 10%); }
}

.card.dragging, .card.dragging :is(.first-page, .shot, .sheet) { --edge: rgb(0 0 0 / 16%); --lift: 0 18px 40px rgb(0 0 0 / 18%); }

.card.selected, .card.selected :is(.first-page, .shot, .sheet) { --edge: var(--accent); --edge-width: 2.5px; }

html.grabbing, html.grabbing * { cursor: grabbing !important; }

/* Registered so the halo's strength can animate. The app holds the pulse 1.1 s, fading in 0.2 s and out 0.6 s. */
@property --halo { syntax: "<number>"; inherits: true; initial-value: 0; }

.card.highlighted { animation: pulse 1.7s; }

@keyframes pulse {
  0% { --halo: 0; animation-timing-function: ease-out; }
  12% { --halo: 1; }
  65% { --halo: 1; animation-timing-function: ease-in; }
  100% { --halo: 0; }
}

.caption { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; text-align: center; }
.caption-name { font-size: 12px; line-height: 16px; font-weight: 500; -webkit-line-clamp: 2; }
.caption-detail { color: var(--muted); font-size: 11px; line-height: 14px; -webkit-line-clamp: 1; }

.board.gliding { transition: translate 0.35s ease-in-out; }

.brief {
  position: absolute;
  inset: 56px 0 0 0;
  display: none;
  overflow-y: auto;
  -webkit-user-select: text;
  user-select: text;
}

.canvas.showing-brief { background: #FFFFFF; }
.canvas.showing-brief .brief { display: block; }
.canvas.showing-brief :is(.board, .hint, .pill-ready) { display: none; }
.canvas.showing-brief .pill-back { display: flex; }
.canvas.brief-seen .hint { display: none; }

.brief-page {
  display: flex;
  flex-direction: column;
  gap: 44px;
  width: 720px;
  margin: 0 auto;
  padding: 20px 0 80px;
}

:where(.brief-page) :where(h3, ul, ol) { margin: 0; padding: 0; list-style: none; }

.label { color: var(--muted); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

.brief-header { display: flex; flex-direction: column; gap: 14px; }
.brief-title { font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -0.025em; }
.tldr { position: relative; padding-top: 6px; font-size: 18px; line-height: 27px; letter-spacing: -0.005em; }
.tldr::before { content: ""; position: absolute; left: -22px; top: 10px; width: 4px; height: 48px; border-radius: 2px; background: var(--highlight); }

.point { display: flex; align-items: flex-start; gap: 12px; }
.point > p { flex: 1; }
.tldr-points { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.tldr-points p { font-size: 16px; line-height: 24px; }

.refs { display: flex; flex-shrink: 0; justify-content: flex-end; gap: 4px; min-width: 52px; padding-top: 4px; }

.tag {
  height: 16px;
  padding: 0 5px;
  border-radius: 4px;
  background: #F2F2F2;
  color: var(--muted);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
}

.tag:hover { background: #E6E6E6; color: var(--ink); }

.stats { display: flex; border-block: 0.5px solid var(--rule); }
.stat { display: flex; flex: var(--grow, 1) 1 0%; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 20px; border-left: 0.5px solid var(--rule); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat:last-child { padding-right: 0; }
.stat-value { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; }
.stat-value mark { display: inline-block; margin: 1px -5px; padding: 0 5px; border-radius: 4px; background: var(--highlight); color: inherit; line-height: 32px; }
.stat-label { color: var(--muted); font-size: 13px; line-height: 18px; }
.stat .refs { justify-content: flex-start; min-width: 0; padding-top: 2px; }

.themes { display: flex; flex-direction: column; gap: 24px; }
.theme { display: flex; gap: 24px; }
.theme-title { flex: 0 0 150px; font-size: 15px; line-height: 22px; font-weight: 600; }
.theme-points { display: flex; flex: 1; flex-direction: column; gap: 10px; }
.theme-points p { font-size: 15px; line-height: 22px; }
.theme-points .refs, .quote .refs { padding-top: 3px; }

.tensions { display: flex; flex-direction: column; gap: 18px; }
.tension { display: flex; align-items: flex-start; }
.tension-question { flex: 0 0 174px; padding-right: 24px; font-size: 15px; line-height: 22px; font-weight: 600; }
.side { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 6px; padding-right: 20px; }
.side + .side { padding: 0 0 0 20px; border-left: 0.5px solid #D1D1D6; }
.side .refs { min-width: 0; padding-top: 0; }
.side p { font-size: 14px; line-height: 20px; }

.quotes { display: flex; flex-direction: column; gap: 16px; }
.quote { gap: 12px; padding-left: 16px; border-left: 2px solid #D1D1D6; }
.quote p { font-size: 16px; line-height: 24px; }

.sources { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 0.5px solid var(--rule); }
.sources ol { display: flex; flex-direction: column; gap: 10px; }
.source { display: flex; align-items: flex-start; font-size: 13px; line-height: 20px; }
.source-n { flex: 0 0 28px; color: var(--muted); font-weight: 600; }
.source-title { flex: 0 0 300px; padding-right: 20px; font-weight: 500; }
.source-about { flex: 1; color: var(--muted); }

.table-block { display: flex; flex-direction: column; gap: 14px; }
.table-head, .table-row { display: grid; grid-template-columns: var(--columns); align-items: start; }
.table-head { align-items: end; padding-bottom: 10px; border-bottom: 0.5px solid #D1D1D6; color: var(--muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.table-head span, .cell { padding-right: 16px; }
.table-head .refs-head { padding-right: 0; text-align: right; }
.table-row { padding-block: 12px; border-bottom: 0.5px solid var(--rule); font-size: 14px; line-height: 20px; }
.table-row:last-child { border-bottom: 0; }
.cell-first { display: flex; flex-direction: column; gap: 1px; }
.cell-title { font-weight: 500; }
.cell-first:has(.cell-sub) .cell-title { font-weight: 600; }
.cell-sub { color: var(--muted); font-size: 13px; line-height: 18px; }
.cell-label { display: none; }
.table-row .refs { min-width: 0; padding-top: 2px; }

.get-it {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding: 152px 40px 140px;
}

.get-it h2 {
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1.055;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 26px 0 14px;
  border-radius: 26px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
}

.button-phone { height: 50px; padding: 0 24px; border-radius: 25px; }
.button-mac, html.is-mac .button-phone { display: none; }
html.is-mac .button-mac { display: inline-flex; }

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(1200px, 100% - 80px);
  height: 72px;
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}

.footer nav { display: flex; gap: 24px; font-size: 13px; line-height: 16px; }

.email-sheet {
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
  margin: auto 0 0;
  padding: 8px 24px 40px;
  border: 0;
  border-radius: 28px 28px 0 0;
  background: #FFFFFF;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 -8px 40px #00000026;
}

.email-sheet[open] { display: flex; animation: sheet-up 0.28s ease-out; }
.email-sheet::backdrop { background: #00000052; }

@keyframes sheet-up { from { translate: 0 100%; } }

.sheet-grabber { flex-shrink: 0; width: 36px; height: 5px; border-radius: 3px; background: #D1D1D6; }
.sheet-close-row { display: flex; justify-content: flex-end; align-self: stretch; padding-top: 4px; }

.sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: #EFEFF2;
  color: var(--muted);
}

.sheet-icon { margin: 6px; border-radius: 12px; box-shadow: 0 2px 6px #00000029, 0 0 0 0.5px #0000000F; }
.sheet-ask, .sheet-sent { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding-top: 4px; }
.sheet-ask[hidden], .sheet-sent[hidden] { display: none; }
.sheet-title { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.02em; }
.sheet-text { max-width: 330px; color: var(--muted); font-size: 16px; line-height: 23px; }
.sheet-form { display: flex; flex-direction: column; gap: 12px; width: 100%; padding-top: 14px; }

.sheet-field {
  height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: #F2F2F7;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  line-height: 22px;
  outline-offset: 0;
}

.sheet-field::placeholder { color: #A1A1A6; }
.sheet-error { color: #D70015; font-size: 14px; line-height: 20px; }

.sheet-primary, .sheet-secondary {
  height: 52px;
  border-radius: 26px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
}

.sheet-primary:disabled { opacity: 0.6; cursor: default; }
.sheet-secondary { background: #EFEFF2; color: var(--ink); }

@media (min-width: 720px) {
  .email-sheet { width: 390px; margin: auto; padding-bottom: 32px; border-radius: 28px; box-shadow: 0 24px 70px #00000033; }
  .email-sheet[open] { animation: none; }
  .sheet-grabber { visibility: hidden; }
}

/* Privacy, Terms and Contact */

.doc { align-items: stretch; gap: 56px; width: min(760px, 100% - 48px); margin: 0 auto; padding: 56px 0 120px; }

.back {
  display: flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px 0 10px;
  border-radius: 16px;
  background: #FFFFFF;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  box-shadow: 0 0 0 0.5px #0000001F, 0 2px 10px #00000012;
}

.eyebrow { color: var(--muted); font-size: 12px; line-height: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.doc h1 { margin-top: 16px; font-size: 48px; line-height: 52px; font-weight: 700; letter-spacing: -0.03em; }
.lead { padding-top: 22px; font-size: 20px; line-height: 30px; letter-spacing: -0.005em; }
.scope { padding-top: 14px; color: var(--muted); font-size: 15px; line-height: 22px; letter-spacing: 0; }
:is(.doc-header, .doc-body) a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.doc-sections { padding-top: 32px; border-top: 1px solid var(--rule); }
.doc section { display: flex; gap: 32px; }
.doc section + section { margin-top: 32px; padding-top: 32px; border-top: 1px solid #EFEFEF; }
.doc h2 { flex: 0 0 180px; font-size: 17px; line-height: 26px; font-weight: 600; }
.doc-body { flex: 1; min-width: 0; font-size: 17px; line-height: 26px; }
.doc-body > * + * { margin-top: 20px; }
.doc-body > p + p { margin-top: 12px; }
.doc-body h3 { margin: 0; font: inherit; font-weight: 600; }
.item p { margin-top: 2px; }
.doc-body address { font-style: normal; }

.doc table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; line-height: 22px; }
.doc th { padding: 0 16px 10px 0; color: var(--muted); font-size: 12px; line-height: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; }
.doc td { padding: 12px 16px 12px 0; border-top: 1px solid var(--rule); vertical-align: top; }
.doc :is(th, td):last-child { padding-right: 0; }
.doc-body > table:first-child th { padding-top: 6px; }
.uses th:first-child { width: 42%; }
.uses th:nth-child(2) { width: 30.5%; }
/* Cells are written lowercase for the phone's "Data: …" labels; the Mac shows them as column values. */
.uses td::first-letter { text-transform: uppercase; }
.doc-label { display: none; }
.providers th:first-child { width: 186px; }
.providers th:last-child { width: 120px; }
.providers td:first-child { font-weight: 600; }
.providers td:last-child { color: var(--muted); }

.name { text-decoration: underline 3px; text-underline-offset: 7px; }
.doc .contact-email {
  display: inline-block;
  margin-top: 34px;
  font-size: 34px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

@media (max-width: 719px) {
  .hero { gap: 18px; padding: 64px 20px 0; }
  .hero h1 { font-size: 44px; line-height: 47px; }
  .sub { font-size: 18px; line-height: 26px; letter-spacing: 0; }
  .sub mark { padding: 0 4px; }
  .try { gap: 4px; padding-top: 14px; }

  .demo { gap: 16px; padding: 28px 0 0; }

  .switch-scroller {
    justify-content: flex-start;
    width: 100%;
    padding-left: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .switch-scroller::-webkit-scrollbar { display: none; }
  /* Safari drops trailing padding in a scrolling flex row; a spacer keeps the last tab off the edge. */
  .switch-scroller::after { content: ""; flex: 0 0 16px; }
  .switch button { padding: 0 12px; }

  .canvas {
    width: calc(100% - 32px);
    height: 540px;
    aspect-ratio: auto;
    border-radius: 16px;
    background-image: radial-gradient(circle, var(--dot) 0.9px, transparent 1.15px);
    background-size: 16px 16px;
    box-shadow: 0 0 0 0.5px #00000038, 0 16px 40px #00000026, 0 4px 14px #00000014;
  }

  .traffic-lights { left: 16px; gap: 7px; }
  .traffic-lights span { width: 11px; height: 11px; }

  .viewport { width: 100%; height: 100%; }
  .pill { left: 80px; }
  .hint { left: 140px; top: 44px; }
  .hint p { position: relative; top: 20px; }
  .mac-only { display: none; }
  .phone-only { display: inline; }

  .brief { inset: 52px 0 0 0; }
  .brief-page { gap: 36px; width: auto; padding: 12px 20px 40px; }
  .brief-header { gap: 12px; }
  .brief-title { font-size: 26px; line-height: 31px; letter-spacing: -0.022em; }
  .tldr { padding-top: 4px; font-size: 17px; line-height: 25px; }
  .tldr::before { left: -12px; top: 8px; width: 3px; height: 44px; }
  .tldr-points { padding-top: 8px; }
  .tldr-points p { font-size: 15px; line-height: 22px; }
  .point { gap: 10px; }
  .refs { min-width: 0; padding-top: 3px; }

  .stats { display: grid; grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 16px 0 16px 16px; }
  .stat:nth-child(odd) { padding: 16px 16px 16px 0; border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 0.5px solid var(--rule); }
  .stat-value { font-size: 26px; line-height: 32px; }
  .stat-value mark { line-height: 30px; }

  .themes { gap: 20px; }
  .theme { flex-direction: column; gap: 8px; }
  .theme-title { flex: none; }

  .tensions { gap: 16px; }
  .tension { flex-direction: column; gap: 10px; }
  .tension-question { flex: none; padding: 0; }
  .side { flex-direction: row; gap: 10px; padding: 0; }
  .side + .side { padding: 10px 0 0; border-left: 0; border-top: 0.5px solid var(--rule); }
  .side .refs { flex: 0 0 26px; justify-content: flex-start; padding-top: 2px; }

  .quotes { gap: 14px; }
  .quote { gap: 10px; padding-left: 14px; }
  .quote p { font-size: 15px; line-height: 22px; }

  .sources ol { gap: 12px; }
  .source { flex-wrap: wrap; line-height: 19px; }
  .source-n { flex: 0 0 26px; }
  .source-title { flex: 1; padding: 0; }
  .source-about { flex: 0 0 100%; padding-left: 26px; }

  /* On a phone each row becomes a block: name and tags, then the short values side by side, then long ones. */
  .table-block { gap: 6px; }
  .table-head { display: none; }
  .table-row { display: flex; flex-wrap: wrap; align-items: stretch; column-gap: 12px; padding-block: 14px; }
  .table-row::after { content: ""; flex-basis: 100%; order: 1; }
  .cell { display: flex; flex: 1 1 0; flex-direction: column; justify-content: space-between; gap: 2px; order: 2; min-width: 0; margin-top: 10px; padding-right: 0; }
  .cell-first { justify-content: flex-start; order: 0; margin-top: 0; }
  .cell-first .cell-title { font-size: 15px; }
  .cell-wide { flex-basis: 100%; order: 3; }
  .table-row .refs { order: 1; }
  .cell-label { display: block; color: var(--muted); font-size: 12px; line-height: 16px; font-weight: 500; }

  .get-it { gap: 24px; padding: 88px 24px 80px; }
  .get-it h2 { font-size: 48px; line-height: 52px; }

  .footer { width: calc(100% - 48px); height: auto; padding: 24px 0 44px; }

  .doc { gap: 36px; width: calc(100% - 48px); padding: 16px 0 72px; }
  .doc h1 { font-size: 34px; line-height: 38px; }
  .lead { font-size: 18px; line-height: 27px; }
  .scope { padding-top: 12px; }
  .doc-sections { padding-top: 28px; }
  .doc section { flex-direction: column; gap: 10px; }
  .doc section + section { margin-top: 28px; padding-top: 28px; }
  .doc h2 { flex: none; font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.01em; }
  .doc-body { font-size: 16px; line-height: 24px; }
  .doc-body > * + * { margin-top: 18px; }

  /* Each table row becomes a block of lines; the Data and Legal basis columns get inline labels. */
  .doc :is(table, tbody, tr, td) { display: block; }
  .doc thead { display: none; }
  .doc tr { padding: 12px 0; border-top: 1px solid var(--rule); }
  .doc td { padding: 0; border: 0; }
  .doc td + td { margin-top: 2px; }
  .uses td:first-child { font-weight: 600; }
  .uses td:last-child { color: var(--muted); }
  .uses td::first-letter { text-transform: none; }
  .doc-label { display: inline; }

  .name { text-decoration-thickness: 2px; text-underline-offset: 5px; }
  .doc .contact-email { font-size: 24px; line-height: 30px; text-underline-offset: 5px; }
}