/* The feature sections and their live demos. Loads after strip.css. */
/* ---------- Features ---------- */

.feature { padding-block: var(--section); }
.feature-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(36px, 6vw, 96px); }
.feature-grid-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature-copy h2 { max-width: 11ch; }
.feature-copy p { margin-top: 24px; max-width: 30em; font-size: clamp(17px, 1.3vw, 19px); }
.feature-copy .feature-aside { margin-top: 16px; font-size: 16px; color: var(--text-dim); }
.feature-fates, .feature-catchup, .feature-yours {
  background: var(--surface) var(--grain) 0 0 / 256px;
  background-blend-mode: overlay;
}

/* A demo plays in a frame: a hairline border with nothing filled in, so it reads as something
   to watch, not a piece of the app to use. Its bar carries what it is and its pause control, in
   the same corner as the hero's. */
.scene { --pad: clamp(18px, 2.6vw, 34px); position: relative; padding: 0 var(--pad) var(--pad); border-radius: 22px; box-shadow: inset 0 0 0 1px var(--rule); }
.no-js .scene { display: none; }
.scene-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: calc(52px + var(--corner)); margin-right: calc(var(--corner) - var(--pad)); padding-top: var(--corner); }
.scene-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.scene .pause { margin-left: auto; background: transparent; color: var(--text-dim); }
.scene.is-paused .pause { color: var(--text); }

/* A slice of the app, drawn on the frame itself. */
.panel { position: relative; overflow: hidden; }

/* Scene · one tap */
.scene-tap .panel { padding: 0 0 84px; }
.tap-group { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.tap-group-name { transition: opacity 260ms var(--ease); }
.tap-rows { margin-top: 10px; }
.tap-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--hairline); }
.tap-row img { grid-row: span 2; width: 44px; height: 66px; border-radius: 5px; object-fit: cover; box-shadow: 0 0 0 1px rgb(233 228 217 / 0.08); }
.tap-title { font: var(--display-weight) 25px/var(--lead) var(--display); }
.tap-meta { font: 600 17px/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; justify-self: end; }
.tap-row .strip { grid-column: 2 / 4; }
.tap-row.is-dim { opacity: 0.45; }
.tap-row.is-main { position: relative; }
.toast {
  position: absolute; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 18px;
  padding: 12px 14px 12px 18px; border-radius: 12px; background: var(--text); color: var(--bg);
  font-size: 15px; font-weight: 500; white-space: nowrap;
  transform: translate(-50%, 140%); opacity: 0;
  transition: transform 420ms var(--ease), opacity 260ms var(--ease);
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.toast b { font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.finger {
  position: absolute; z-index: 4; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: rgb(233 228 217 / 0.22); box-shadow: 0 0 0 2px rgb(233 228 217 / 0.65);
  opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) scale(1);
  transition: transform 520ms var(--ease), opacity 260ms var(--ease);
  pointer-events: none; will-change: transform;
}
.finger.is-on { opacity: 1; }
.finger.is-down { transform: translate(var(--x, 0), var(--y, 0)) scale(0.78); transition-duration: 120ms; }
.finger::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; transform: scale(0.7); }
.finger.is-holding::after { animation: hold 300ms linear both; }
.finger.is-sliding { transition: opacity 260ms var(--ease); }
@keyframes hold { from { opacity: 1; transform: scale(0.7); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: scale(1); clip-path: inset(0 0 0 0); } }
/* Scene · fates: each one's glyph, large, glowing like the key art on the hero's screen */
.fates-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.fates-head p { max-width: 34em; font-size: clamp(17px, 1.3vw, 19px); }
.scene-fates { margin-top: clamp(40px, 5vw, 72px); }
/* The glyph sits beside the word alone, centred on its capitals; the detail hangs below, out of
   the centring. The word's box is trimmed to its ink (0.87em up, 0.30em down from the baseline),
   so its centre is 0.285em above the baseline and the capitals' 0.41em: the glyph rises the
   difference, 0.125em of the word's size. Its margins give back what it stands taller than the
   word (1.17em of ink), so the row is the word's height and the detail sits just under it. It's
   lifted with `top`, never a transform: a transform would isolate it, and the glow's grain
   would blend with nothing instead of the page behind it. */
.fates-stage {
  --fate-size: clamp(54px, 7.6vw, 124px);
  --fate-mark: clamp(96px, 11vw, 168px);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 0 clamp(28px, 4.4vw, 72px); padding: clamp(18px, 3vw, 44px) clamp(4px, 2vw, 32px) clamp(10px, 1.6vw, 20px);
}
.fates-text { display: contents; }
.fate-mark {
  grid-area: 1 / 1; top: calc(var(--fate-size) * -0.125); margin-block: min(0px, (1.17 * var(--fate-size) - var(--fate-mark)) / 2);
  position: relative; display: grid; width: var(--fate-mark); aspect-ratio: 1;
}
.fates-word { grid-area: 1 / 2; }
.fates-detail { grid-area: 2 / 2; align-self: start; }
/* Each fate is a layer, its glyph with its own glow, so the glow comes and goes with it. */
.fate-layer {
  position: relative; grid-area: 1 / 1; display: grid; opacity: 0; transform: scale(0.92);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.fate-layer.is-on { opacity: 1; transform: none; transition-duration: 450ms, 700ms; }
.fates-stage.is-out .fate-layer.is-on { opacity: 0; transform: scale(0.94); transition-duration: 300ms; }
/* The glow: the status colour spilled and blurred, with the page's grain through it. The halo
   shrinks it away as the fate leaves; the glow inside moves with the glyph. */
.fate-halo, .fate-grain { position: absolute; inset: -60%; pointer-events: none; }
.fate-halo { transform: scale(0.55); opacity: 0; transition: transform 300ms var(--ease), opacity 300ms var(--ease); }
.fate-layer.is-on .fate-halo { transform: none; opacity: 1; transition-duration: 700ms, 400ms; }
.fates-stage.is-out .fate-layer.is-on .fate-halo { transform: scale(0.5); opacity: 0; transition-duration: 300ms; }
.fate-glow {
  position: absolute; inset: 0; background: var(--status); filter: blur(22px) saturate(1.2); opacity: 0.42;
  -webkit-mask-image: radial-gradient(closest-side, #000, rgb(0 0 0 / 0.4) 45%, transparent);
  mask-image: radial-gradient(closest-side, #000, rgb(0 0 0 / 0.4) 45%, transparent);
}
.fate-grain {
  z-index: 2; background: var(--grain) 0 0 / 160px; mix-blend-mode: overlay; opacity: 0.85;
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent);
  mask-image: radial-gradient(closest-side, #000 20%, transparent);
}
.fate-glyph { position: relative; z-index: 1; grid-area: 1 / 1; width: 100%; height: 100%; overflow: visible; }
.fate-glyph * { transform-box: fill-box; transform-origin: center; }
/* Each fate moves the way it reads, and its glow moves with it, on the same clock. */
@keyframes fg-bloom { from { opacity: 0; transform: scale(0.4); } }
@keyframes fg-breathe { 50% { opacity: 0.56; transform: scale(1.04); } }
/* Airing: the dot and its glow pulse together, the glow dimming as the dot draws in. */
.fate-layer[data-status='airing'].is-on .g-dot { animation: g-live 1.8s var(--ease-in-out) infinite; }
.fate-layer[data-status='airing'].is-on .fate-glow { animation: fg-live 1.8s var(--ease-in-out) infinite; }
@keyframes g-live { 50% { transform: scale(0.82); opacity: 0.78; } }
@keyframes fg-live { 50% { opacity: 0.26; transform: scale(0.88); } }
/* Returning: the glow blooms as the inner dot fills. */
.fate-layer[data-status='returning'].is-on .g-dot { animation: g-fill 900ms var(--ease) 150ms both; }
.fate-layer[data-status='returning'].is-on .fate-glow { animation: fg-bloom 900ms var(--ease) 150ms both, fg-breathe 4.8s var(--ease-in-out) 1050ms infinite; }
@keyframes g-fill { from { transform: scale(0); } }
/* Concluded: the glow grows as the ring draws itself closed. The ring is r 6, so 37.7 round: a
   dash of 38 always ends whole, with no seam. */
.fate-layer[data-status='ended'] .g-ring { transform: rotate(-90deg); stroke-dasharray: 38; }
.fate-layer[data-status='ended'].is-on .g-ring { animation: g-draw 1300ms var(--ease-in-out) 100ms both; }
.fate-layer[data-status='ended'].is-on .fate-glow { animation: fg-bloom 1300ms var(--ease-in-out) 100ms both, fg-breathe 4.8s var(--ease-in-out) 1400ms infinite; }
@keyframes g-draw { from { stroke-dashoffset: 38; } }
/* Cancelled: the glow flares as the ring breaks, and stays dim after. */
.fate-layer[data-status='cancelled'] .g-arc-0 { --dx: 0px; --dy: -1px; }
.fate-layer[data-status='cancelled'] .g-arc-1 { --dx: 0.87px; --dy: 0.5px; }
.fate-layer[data-status='cancelled'] .g-arc-2 { --dx: -0.87px; --dy: 0.5px; }
.fate-layer[data-status='cancelled'].is-on .g-arc { animation: g-part 1100ms var(--ease) 250ms both; }
.fate-layer[data-status='cancelled'].is-on .fate-glow { animation: fg-short 1100ms var(--ease) 250ms both; }
@keyframes g-part { 0% { translate: 0 0; } 30% { translate: calc(var(--dx) * 1.2) calc(var(--dy) * 1.2); } 100% { translate: calc(var(--dx) * 0.55) calc(var(--dy) * 0.55); } }
@keyframes fg-short { 0% { opacity: 0.1; transform: scale(0.7); } 18% { opacity: 0.42; transform: none; } 30% { opacity: 0.68; transform: scale(1.1); } 100% { opacity: 0.22; transform: scale(0.94); } }
/* Awaiting renewal: the glow blooms, then breathes slowly while the dashes turn. */
.fate-layer[data-status='undecided'].is-on .g-ring { animation: g-turn 16s linear infinite; }
.fate-layer[data-status='undecided'].is-on .fate-glow { animation: fg-bloom 900ms var(--ease) both, fg-breathe 4.8s var(--ease-in-out) 900ms infinite; }
@keyframes g-turn { to { transform: rotate(1turn); } }
.fates-word { margin-block: calc(-1 * var(--ink-top)) var(--ink-bottom); font: var(--display-weight) var(--fate-size)/var(--lead) var(--display); }
.fates-detail { margin-top: clamp(10px, 1.2vw, 16px); font-size: clamp(15px, 1.2vw, 17px); color: var(--text-dim); }
.fates-show { color: var(--text); font-weight: 500; }
.fates-text > * { transition: opacity 300ms var(--ease), transform 480ms var(--ease); }
.fates-stage.is-out .fates-text > * { opacity: 0; transform: translateY(6px); }
.fates-picker { display: flex; gap: 4px; margin: 8px 0 0 clamp(-8px, 1.4vw, 24px); }
.fates-pick {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; opacity: 0.5; transition: opacity 160ms var(--ease), background-color 160ms var(--ease);
}
.fates-pick[aria-pressed='true'] { opacity: 1; background: rgb(233 228 217 / 0.08); }

/* The list */
.list-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.list-copy p { margin-top: 24px; max-width: 32em; font-size: clamp(17px, 1.3vw, 19px); }
.note {
  justify-self: end; width: min(100%, 330px); padding: 22px 26px 26px; border-radius: 6px;
  background: var(--paper) var(--grain) 0 0 / 256px; background-blend-mode: overlay;
  color: var(--ink); font-size: 16px; line-height: 1.7;
  transform: rotate(2.2deg);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset, 0 24px 50px -18px rgb(0 0 0 / 0.75), 0 2px 6px rgb(0 0 0 / 0.3);
}
.note-title { font-weight: 700; font-size: 20px; margin-bottom: 6px; }
.note s { text-decoration-thickness: 1.5px; }
.note .note-last { color: var(--ink-dim); font-style: italic; }
.timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: clamp(40px, 5vw, 64px); }
.timeline-label { font-size: 15px; color: var(--text-dim); }
.timeline-days { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
.day {
  position: relative; min-height: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent;
  color: var(--text-dim); font: 600 14px var(--mono); cursor: pointer; overflow: hidden;
  transition: color 160ms, background-color 160ms;
}
.day[aria-checked='true'] { background: var(--surface-high); color: var(--text); }
.day[aria-checked='true']::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left;
}
.timeline-caption { flex-basis: 100%; min-height: 1.6em; font-size: 16px; }

.table { margin-top: 18px; }
.tr {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 2.5fr) minmax(0, 0.95fr) minmax(0, 1.35fr) minmax(0, 1.25fr);
  column-gap: clamp(14px, 2vw, 28px);
}
.table-head .tr { padding: 0 0 12px; border-bottom: 1px solid var(--rule); }
.th { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.group-row { padding: 30px 0 10px; }
.group-row > [role='cell'] { display: flex; align-items: center; gap: 10px; }
.group-icon { color: var(--text-dim); margin-right: -1px; }
.group-name { font-size: 15px; font-weight: 700; }
.group-count { font: 500 13px var(--mono); color: var(--text-dim); }
/* Shows alternate between the page and a slightly lighter band, so each reads as one show across
   its columns. The band reaches past the columns, so posters stay in line with the heads above,
   and lets the grain through. list.js alternates it down the whole list, across groups; it fades
   over on the same clock as the rows' glide when they re-sort. */
.table-row {
  --row-pad: 14px;
  min-height: 76px; margin-inline: calc(-1 * var(--row-pad)); padding: 10px var(--row-pad); border-radius: 10px;
  transition: background-color 560ms var(--ease);
}
.table-row.is-alt { background: rgb(233 228 217 / 0.045); }
.tr > [role='cell'] { min-width: 0; }
.c-show { display: flex; align-items: center; gap: 14px; }
.c-show img { width: 36px; height: 54px; flex: none; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgb(233 228 217 / 0.08); }
.c-name { min-width: 0; }
.row-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-bottom: var(--ink-bottom); font: var(--display-weight) 21px/var(--lead) var(--display); }
.row-net { display: block; margin-top: 3px; font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.track-row { display: flex; align-items: center; width: calc(100% + 20px); min-height: 44px; margin: 0 -10px; padding: 0 10px; border-radius: 10px; transition: background-color 160ms var(--ease); }
.c-where, .c-next { font: 500 15px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-next { color: var(--text-dim); }
.c-next.is-now { color: var(--text); }
.c-status { display: flex; align-items: center; gap: 8px; font-size: 15px; white-space: nowrap; }
.table-row.is-arriving .row-title { animation: arrive 900ms var(--ease); }
@keyframes arrive { from { color: var(--accent); } }
.table-row.is-nudged .c-where { animation: nudge 520ms var(--ease); }
.table-undo { margin-left: auto; }
.table-foot { display: flex; align-items: center; gap: 18px; min-height: 48px; margin-top: 14px; border-top: 1px solid var(--rule); padding-top: 10px; }
.table-msg { font-size: 15px; color: var(--text-dim); }

/* Scene · catch up */
.scene-catchup .panel { padding: 0; }
.cu-head { display: flex; align-items: center; gap: 16px; }
.cu-head img { width: 54px; height: 81px; border-radius: 6px; object-fit: cover; }
.cu-title { font: var(--display-weight) 25px/var(--lead) var(--display); }
.cu-sub { margin-top: 4px; font-size: 14px; color: var(--text-dim); }
.cu-ask { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 26px; }
.cu-q { font-size: 15px; font-weight: 600; }
.cu-meta { font: 600 17px var(--mono); font-variant-numeric: tabular-nums; word-spacing: -0.3em; white-space: nowrap; }
/* Room above the strip for the readout. */
.cu-slider { padding-top: 40px; }
.cu-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
.cu-end { padding: 6px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule); font-size: 13px; font-weight: 600; color: var(--text-dim); }
.cu-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.cu-manual { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--text-dim); }
.cu-field { display: inline-flex; align-items: center; gap: 6px; }
.cu-field b { display: inline-grid; place-items: center; min-width: 34px; height: 32px; padding: 0 6px; border-radius: 8px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); font: 600 15px var(--mono); color: var(--text); }
.cu-add { flex: none; height: 46px; padding: 0 20px; border-radius: 11px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; transition: transform 140ms var(--ease); }
.cu-add.is-down { transform: scale(0.95); }
.cu-note { margin-top: 14px; font-size: 14px; color: var(--text-dim); opacity: 0; transition: opacity 400ms var(--ease); }
.cu-note.is-on { opacity: 1; }

/* Scene · upcoming */
.upcoming-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.upcoming-head p { max-width: 34em; font-size: clamp(17px, 1.3vw, 19px); }
.scene-upcoming { margin-top: clamp(40px, 5vw, 72px); }
/* Today has its own place at the start of the track, so the marker travels to the first date too. */
.cal { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); padding: 48px 0 0 clamp(56px, 6vw, 88px); }
.cal-track { position: absolute; left: 0; right: 0; top: 18px; height: 2px; background: var(--rule); border-radius: 2px; overflow: hidden; }
/* Time gone by, in amber behind the marker. Both move frame by frame (loops.js). */
.cal-fill { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left center; will-change: transform; }
.cal-now { position: absolute; top: 4px; left: 0; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); will-change: transform; }
.cal-now span { padding: 3px 8px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font: 700 12px/1 var(--mono); white-space: nowrap; }
.cal-now i { width: 2px; height: 14px; background: var(--accent); }
.cal-col { position: relative; }
/* --lit (0–1, loops.js) rises as the marker comes in to a date and falls as it passes back. */
.cal-date { font: 600 14px var(--mono); color: color-mix(in srgb, var(--text) calc(var(--lit, 0) * 100%), var(--text-dim)); }
.cal-when { margin-top: 2px; font-size: 13px; color: var(--text-dim); min-height: 1.4em; }
.cal-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 14px;
  position: relative; padding: 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hairline);
}
.cal-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--accent); opacity: var(--lit, 0); pointer-events: none; }
.cal-card img { width: 46px; height: 69px; border-radius: 5px; object-fit: cover; }
.cal-card b { display: block; font: var(--display-weight) 19px/var(--lead) var(--display); }
.cal-card span { display: block; margin-top: 4px; font-size: 14px; color: var(--text-dim); }
.cal-when { transition: color 300ms; }
.cal-when.is-swap { animation: when-in 360ms var(--ease) both; }
@keyframes when-in { from { opacity: 0; transform: translateY(3px); } }
.cal-tba { display: flex; margin-top: 14px; padding: 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hairline); border: 1px dashed transparent; }
.cal-tba img { width: 46px; height: 69px; border-radius: 5px; object-fit: cover; margin-right: -14px; box-shadow: 0 0 0 2px var(--bg); }
.cal-tba-text { margin-top: 10px; font-size: 14px; color: var(--text-dim); }

/* Scene · export, printed on paper. The paper is the whole picture, so this demo has no frame
   and no bar; clicking the sheet (or Space on it) pauses it. */
.scene-export { --pad: 0px; box-shadow: none; cursor: pointer; border-radius: 10px; }
.scene-export:focus-visible { outline-offset: 4px; border-radius: 12px; }
.scene-export.is-paused .doc-caret { animation-play-state: paused; }
.doc {
  position: relative; overflow: hidden; border-radius: 10px;
  background: var(--paper) var(--grain) 0 0 / 256px; background-blend-mode: overlay; color: var(--ink);
  box-shadow: 0 30px 70px -26px rgb(0 0 0 / 0.85), 0 2px 8px rgb(0 0 0 / 0.35);
  transform: rotate(-1.2deg);
}
.doc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--paper-rule); }
.doc-name { font: 600 14px var(--mono); }
.doc-tabs { display: inline-flex; padding: 3px; border-radius: 9px; background: rgb(28 26 23 / 0.07); }
.doc-tabs span { padding: 6px 12px; border-radius: 7px; font: 600 13px var(--mono); color: var(--ink-dim); transition: background-color 200ms, color 200ms; }
.doc-tabs span.is-on { background: var(--ink); color: var(--paper); }
.doc-body { min-height: 300px; margin: 0; padding: 18px 20px 26px; font: 500 13.5px/1.75 var(--mono); white-space: pre; overflow: hidden; }
.doc-caret { display: inline-block; width: 8px; height: 1.1em; margin-left: 1px; vertical-align: -0.2em; background: var(--ink); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.promises { margin-top: 30px; }
.promises div { padding: 18px 0; border-top: 1px solid var(--rule); }
.promises dt { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.promises dt .icon { color: var(--text-dim); }
.promises dd { margin-top: 4px; padding-left: 30px; color: #c9c3b8; font-size: 16px; max-width: 32em; }