/* Dawnlet website · the document layer of the "dawn" design system.
 *
 * Loaded after dawn.css on every page that is mostly reading: /playbook and its pages, the legal
 * pages, contact, 404. It adds nothing new to the language, only applies it to long-form copy:
 * the page head is the tour's eyebrow chip over a bold rounded title, cards are the white
 * highlights card with hairline dividers, and anything that needs emphasis takes the page's
 * accent as a soft wash rather than a bar or a border.
 *
 * Put `data-accent` on <main class="doc"> to give a page its module's hue; every accent below
 * reads --a / --a-text from there, falling back to sun. The nav, footer, buttons, pills, eyebrow,
 * stage and miniature primitives all come from dawn.css unchanged. Icons on these pages come from
 * the external sprite, /assets/img/icons.svg.
 */

/* ---- Tokens ------------------------------------------------------------- */

:root {
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* Week amber is too light to read as text at the usual darkening; this is the stronger mix. */
  --text-mix-strong: black 40%;
  --toc-top: 88px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --text-mix-strong: white 22%; }
}
:root[data-theme="dark"] { --text-mix-strong: white 22%; }

[data-accent="week"] { --a-text: color-mix(in oklab, var(--a), var(--text-mix-strong)); }

html { scroll-padding-top: var(--toc-top); }

/* The current section in the shared nav. */
.nav-links a[aria-current="page"] { color: var(--ink); background: var(--line); }

/* ---- Page head ---------------------------------------------------------- */

.doc-head { padding: 28px 0 8px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--sub); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { opacity: .45; }
.breadcrumb [aria-current] { color: var(--ink); }

.doc-intro { margin-top: 34px; }
.doc-intro.with-stage { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: center; }
.doc-head .title { font-size: clamp(2.3rem, 5vw, 3.5rem); letter-spacing: -.025em; }
.lede { margin-top: 16px; font-size: 1.15rem; line-height: 1.6; color: var(--sub); max-width: 38em; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

/* A quiet chip: a fact about the page, not a link. */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 700; line-height: 1.2; color: var(--ink);
}
.chip .i { font-size: 15px; color: var(--a, var(--sun)); }

.pill.free { background: color-mix(in srgb, var(--green) 15%, transparent); color: color-mix(in oklab, var(--green), var(--text-mix)); }

/* Every reading page spans the nav's full 1140px container, so its edges line up with the nav's;
   .solo/.narrow only drop the TOC column now, they no longer narrow the page. */

/* The header's miniature: a dawn.css stage, smaller and purely decorative (aria-hidden), built
   from the m-* primitives. .mini stacks its panels; the rest are the few arrangements needed. */
.doc-head .stage { aspect-ratio: 35 / 26; }
.mini { width: 100%; display: grid; gap: 1.1em; font-size: 1.3em; }
.mini .m-panel { display: grid; gap: 1em; }
.mini .m-week { justify-content: space-between; font-size: 1.55em; padding-bottom: 1.1em; }
.mini .m-week span::after { top: auto; bottom: -1.75em; }
.mini-tiles { display: flex; gap: 1em; }
.mini-tiles .m-tile { padding: 1em 1.1em; }
.mini-tiles .m-tile b { font-size: 2.3em; }
.mini-tiles .m-tile small { font-size: 1em; margin-top: .45em; }
.mini-glyphs { display: flex !important; justify-content: space-between; }
.mini-glyphs .m-glyph { --g: 2.8em; }
.mini-link { justify-self: center; transform: rotate(90deg); font-size: 1.6em; color: color-mix(in srgb, var(--a) 70%, transparent); }
.mini-link .i { stroke-width: 2.6; }
.js .stage:not(.is-active) .mini-link[data-rise] { transform: rotate(90deg) translateX(-.8em); }
.mini .m-row .m-glyph { --g: 3em; }
.mini .m-row .lines .m-line { height: .75em; }
.mini-lock { margin-left: auto; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.mini-lock .i { font-size: 1.2em; stroke-width: 2.4; }

/* ---- Layout: TOC + body, or one column ---------------------------------- */

.doc-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px 96px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; }
.doc-wrap.solo { grid-template-columns: minmax(0, 1fr); }
.doc-body { min-width: 0; }

/* The sticky contents: a column of capsules, the current section washed in the accent. */
nav.toc { position: sticky; top: var(--toc-top); align-self: start; max-height: calc(100vh - var(--toc-top) - 24px); overflow-y: auto; padding-top: 44px; }
.toc-title { margin: 0 0 10px 12px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--sub); }
nav.toc a { display: block; padding: 7px 12px; border-radius: 12px; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--sub); text-decoration: none; transition: color .2s, background .2s; }
nav.toc a:hover { color: var(--ink); background: var(--line); }
nav.toc a.is-active { color: var(--a-text, var(--sun)); background: color-mix(in srgb, var(--a, var(--sun)) 14%, transparent); }

/* ---- Prose -------------------------------------------------------------- */

.doc-body > section { padding-top: 52px; }
.doc-body > section:first-child { padding-top: 44px; }
.doc-body h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.6rem, 3vw, 2.05rem); letter-spacing: -.02em; margin-bottom: 16px; }
/* A Free/Plus pill in a play heading keeps its body-text look rather than the heading's font */
.doc-body :is(h2, h3) .pill { font-family: var(--body); letter-spacing: normal; }
/* The section number, as a glyph tile in the accent. */
.doc-body h2 .num {
  display: inline-grid; place-items: center; flex: none;
  min-width: 1.45em; height: 1.45em; padding: 0 .3em; border-radius: .42em;
  background: color-mix(in srgb, var(--a, var(--sun)) 15%, transparent); color: var(--a-text, var(--sun));
  font-size: .62em; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.doc-body h3 { font-size: 1.22rem; letter-spacing: -.01em; margin: 30px 0 8px; }
.doc-body p, .doc-body ul, .doc-body ol, .doc-body pre, .doc-body blockquote { margin: 14px 0 0; }
.doc-body ul, .doc-body ol { padding-left: 1.4em; }
.doc-body li { margin-top: 6px; padding-left: .2em; }
.doc-body li::marker { color: var(--a, var(--sun)); font-weight: 700; }
.doc-body strong { font-weight: 700; }
.doc-body a:not([class]) { color: var(--a-text, var(--sun)); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, var(--a, var(--sun)) 45%, transparent); }
.doc-body a:not([class]):hover { text-decoration-color: currentColor; }

code { padding: .12em .4em; border-radius: 6px; background: color-mix(in srgb, var(--a, var(--sun)) 10%, var(--line)); font: 500 .86em/1.4 var(--mono); overflow-wrap: anywhere; }
pre { padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); overflow-x: auto; font: 500 14px/1.6 var(--mono); }
pre code { padding: 0; background: none; font: inherit; overflow-wrap: normal; }
blockquote { padding: 4px 0 4px 18px; border-left: 3px solid color-mix(in srgb, var(--a, var(--sun)) 55%, transparent); color: var(--sub); font-style: italic; }

/* ---- Cards -------------------------------------------------------------- */

/* The generic white card. Holds a form, a phase list, legal rows. */
.card { margin: 18px 0 0; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.card > :first-child { margin-top: 0; }

/* Callout: an accent-washed note with an eyebrow label. Default takes the page accent;
   .good is green, .warn is amber. */
.callout {
  --c: var(--a, var(--sun));
  --c-text: var(--a-text, color-mix(in oklab, var(--sun), var(--text-mix)));
  margin: 24px 0 0; padding: 20px 22px; border-radius: 20px;
  background: color-mix(in srgb, var(--c) 9%, var(--card));
  border: 1px solid color-mix(in srgb, var(--c) 24%, transparent);
}
.callout.good { --c: var(--green); --c-text: color-mix(in oklab, var(--green), var(--text-mix)); }
.callout.warn { --c: var(--week); --c-text: color-mix(in oklab, var(--week), var(--text-mix-strong)); }
.callout .label {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 4px;
  padding: 6px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c-text);
  font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1.2;
}
.callout p { margin: 10px 0 0; }
.callout a:not([class]) { color: var(--c-text); text-decoration-color: color-mix(in srgb, var(--c) 50%, transparent); }

/* Tables scroll inside their card rather than pushing the page sideways. */
.tablewrap { margin: 20px 0 0; overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.tablewrap table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.tablewrap th { padding: 14px 16px 10px; text-align: left; vertical-align: bottom; white-space: nowrap; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--sub); }
.tablewrap td { padding: 12px 16px; vertical-align: top; border-bottom: 1px solid var(--line); }
.tablewrap tr:last-child td { border-bottom: 0; }
.tablewrap td:first-child { font-weight: 700; }
.tablewrap td:not(:first-child) { color: var(--sub); }
.tablewrap td .pill { margin: 0 4px 0 0; }

/* Stat tiles: .grid > .tile > .k (label) .v (big value, in the accent) .d (note). */
.doc-body .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 20px 0 0; }
.tile { padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.tile .k { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--sub); }
.tile .v { margin-top: 8px; font: 700 1.55rem/1.1 var(--display); letter-spacing: -.02em; color: var(--a-text, var(--sun)); }
.tile .d { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--sub); }

/* Numbered steps: .phase-list.card (or any .card) > .phase > .n + div > .t + .b */
.card.phase-list { padding-top: 6px; padding-bottom: 6px; }
.phase { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; }
.phase + .phase { border-top: 1px solid var(--line); }
.card > .phase:first-child { padding-top: 2px; }
.card > .phase:last-child { padding-bottom: 2px; }
.phase-list > .phase:first-child { padding-top: 14px; }
.phase-list > .phase:last-child { padding-bottom: 14px; }
.phase .n {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px;
  background: color-mix(in srgb, var(--a, var(--sun)) 15%, transparent); color: var(--a-text, var(--sun));
  font: 700 15px/1 var(--display); font-variant-numeric: tabular-nums;
}
.phase .t { font: 700 1.05rem/1.3 var(--display); letter-spacing: -.01em; margin-top: 5px; }
.phase .b { margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--sub); }

/* Plan cards (purchases): .price-grid > .price-card[.featured] > .tier + ul */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 20px 0 0; }
.price-card { padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.price-card.featured { border: 1.5px solid color-mix(in srgb, var(--sun) 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--sun) 9%, var(--card)), var(--card) 55%); }
.price-card .tier { font: 700 1.25rem/1 var(--display); }
.price-card ul { margin: 16px 0 0; padding: 0; list-style: none; }
.price-card li { display: flex; gap: 11px; margin: 0; padding: 10px 0; font-size: 15px; line-height: 1.45; border-top: 1px solid var(--line); }
.price-card li::before {
  content: ""; flex: none; width: 15px; height: 15px; margin-top: .2em; background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.price-card.featured li::before { background: var(--sun); }

/* ---- Legal -------------------------------------------------------------- */

/* .card.legal-section > .legal-row > .t (term) + p.d (what it means), hairline between rows. */
.card.legal-section { padding-top: 4px; padding-bottom: 4px; }
.legal-row { padding: 16px 0; }
.legal-row + .legal-row { border-top: 1px solid var(--line); }
.legal-row .t { font: 700 1.05rem/1.3 var(--display); letter-spacing: -.01em; }
.legal-row .d { margin: 5px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--sub); }

/* ---- Tech index: the write-ups ------------------------------------------ */

/* a.tech-card[data-accent] > .top > .m-glyph + h3 + .go ; p */
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin: 24px 0 0; }
.tech-card {
  display: block; padding: 20px; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
  transition: transform .3s var(--spring), border-color .2s, box-shadow .3s var(--ease);
}
.tech-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--a) 45%, transparent); box-shadow: var(--shadow-lg); }
.tech-card .top { display: flex; align-items: center; gap: 12px; }
.tech-card .m-glyph { --g: 40px; border-radius: 12px; }
.tech-card .m-glyph .i { font-size: 20px; }
.tech-card h3 { font-size: 1.1rem; letter-spacing: -.01em; margin: 0; }
.tech-card .go { margin-left: auto; color: var(--sub); font-size: 16px; stroke-width: 2.6; transition: transform .25s var(--ease), color .2s; }
.tech-card:hover .go { color: var(--a-text); transform: translateX(3px); }
.tech-card p { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--sub); }

/* ---- Previous / next ---------------------------------------------------- */

/* .doc-nav > a[.next] > .dir + .name ; an empty <span> holds the left slot when there's no previous. */
.doc-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 64px; }
.doc-nav a { display: block; padding: 18px 20px; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); transition: transform .3s var(--spring), border-color .2s; }
.doc-nav a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--a, var(--sun)) 45%, transparent); }
.doc-nav a.next { text-align: right; }
.doc-nav .dir { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--a-text, var(--sun)); }
.doc-nav .name { margin-top: 4px; font: 700 1.08rem/1.3 var(--display); color: var(--ink); }

/* ---- Forms -------------------------------------------------------------- */

.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; margin-top: 36px; }
.form-grid aside > * + * { margin-top: 16px; }
.field { margin: 0 0 16px; }
.field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  font: 500 16px/1.4 var(--body);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--a, var(--sun)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a, var(--sun)) 18%, transparent); }
.form-note { margin-top: 12px; font-size: 14px; color: var(--sub); }

/* The old pages' names for dawn.css's button row and quiet button. */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-secondary { background: var(--line); color: var(--ink); }

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 960px) {
  .doc-intro.with-stage { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
  .doc-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* The contents become a strip of capsules above the copy, scrolling sideways if it must. */
  nav.toc { position: static; max-height: none; overflow: visible; padding-top: 28px; }
  nav.toc .toc-title { margin-left: 0; }
  nav.toc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  nav.toc .toc-title { flex-basis: 100%; margin-bottom: 4px; }
  nav.toc a { padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 14px; }
  nav.toc a.is-active { border-color: transparent; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .doc-intro.with-stage { grid-template-columns: minmax(0, 1fr); }
  .doc-intro.with-stage .stage-wrap { display: none; }
}

@media (max-width: 640px) {
  .doc-head { padding-top: 20px; }
  .doc-intro { margin-top: 24px; }
  .lede { font-size: 1.05rem; }
  .doc-body > section { padding-top: 40px; }
  .doc-body h2 { align-items: flex-start; }
  .doc-body h2 .num { margin-top: .12em; }
  .card, .callout { padding: 18px; }
  .doc-nav { grid-template-columns: 1fr; }
  .doc-nav a.next { text-align: left; }
  .doc-nav > span:empty { display: none; }
}

/* ---- added for tech/notifications, tech/purchases, tech/finance ---- */
/* Notifications: the quiet-hours line under the banners. */
.mini-quiet { gap: .7em; font-size: 1.25em; }
.mini-quiet > .i { font-size: 1.3em; }
.mini-quiet .m-pill:last-child { margin-left: auto; }
/* Purchases: the two plan panels side by side, Plus washed like a featured price card. */
.mini-plans > .m-panel { flex: 1; gap: .75em; }
.mini-plans .m-row .m-line { height: .55em; }
.mini-plans .plus { border-color: color-mix(in srgb, var(--a) 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--a) 12%, var(--card)), var(--card) 60%); }
/* Finance: a budget meter, track + fill in the accent (--v = fraction spent). */
.mini-budget .lines { flex: 1; gap: .6em !important; }
.mini-meter { display: block; height: .7em; border-radius: 99em; background: color-mix(in srgb, var(--a) 16%, transparent); overflow: hidden; }
.mini-meter i { display: block; height: 100%; width: calc(var(--v, .5) * 100%); border-radius: inherit; background: var(--a); transform-origin: left; transition: transform .6s var(--ease) .3s; }
.js .stage:not(.is-active) .mini-meter i { transform: scaleX(0); transition: none; }

/* ---- added for 404 ---- */
/* One centred column: a small stage over the eyebrow, title, lede and buttons. */
.doc.lost .container { max-width: 640px; padding-top: 64px; padding-bottom: 112px; text-align: center; }
.doc.lost .stage-wrap { width: min(320px, 100%); margin: 0 auto 36px; }
.doc.lost .stage { aspect-ratio: 35 / 26; }
.doc.lost .mini { text-align: left; }
.doc.lost .lost-moon { --g: 4.4em; justify-self: center; border-radius: 50%; }
.doc.lost .m-row .m-line { --o: 22%; }
.doc.lost .lede { margin: 16px auto 0; }
.doc.lost .cta-row { justify-content: center; }

/* What's inside (/features/): the home page's module grid on a reading page, and a closing line. */
.doc-wrap > .modules { margin-top: 28px; }
.features-foot { margin: 28px 0 0; color: var(--sub); }
.features-foot a { color: var(--a-text, var(--sun)); font-weight: 600; }

/* The home page's highlight list inside prose (privacy "At a glance"): undo .doc-body's list
   indents so the rows line up the way they do on the home page. */
.doc-body ul.highlights { padding: 0 16px; }
.doc-body ul.highlights li { margin-top: 0; padding-left: 0; }
.doc-body ul.highlights li::marker { content: none; }
.doc-body ul.highlights .i.no { color: var(--sub); }

/* About page: founder photo beside the bio, and three screenshots in a row */
.about-founder { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: start; }
.about-photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; background: var(--line); }
.about-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.about-shots figure { margin: 0; text-align: center; }
.about-shots img { width: 100%; height: auto; display: block; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.about-shots figcaption { font-size: 14px; color: var(--sub); margin-top: 10px; }
@media (max-width: 640px) {
  .about-founder { grid-template-columns: 1fr; gap: 18px; }
  .about-photo { width: 140px; height: 140px; }
  .about-shots { gap: 10px; }
}

/* Plain reading pages (/vs/, /daily-planner/): room above each section heading */
.doc-body.flow h2:not(:first-child) { margin-top: 44px; }

/* Comparison tables (/vs/): the Dawnlet column reads as the main one, and a ✓ marks the stronger app on each row */
.tablewrap.cmp table { table-layout: fixed; }
.tablewrap.cmp th:first-child, .tablewrap.cmp td:first-child { width: 26%; }
.tablewrap.cmp th:last-child, .tablewrap.cmp td:last-child { width: 15%; }
.tablewrap.cmp td.pick { color: var(--ink); font-weight: 700; }
.tablewrap.cmp table { min-width: 680px; }
.tablewrap.cmp th:nth-child(3) { color: var(--ink); }
.tablewrap.cmp td.win { color: var(--ink); font-weight: 600; }
.tablewrap.cmp td.win::before { content: "✓ "; color: color-mix(in oklab, var(--sun), var(--text-mix)); font-weight: 800; }
.tablewrap.cmp .th-brand { display: inline-flex; align-items: center; gap: 8px; }
.tablewrap.cmp .th-brand img { width: 20px; height: 20px; border-radius: 5px; }
.tablewrap.cmp th { vertical-align: middle; }

/* One screenshot or diagram near the top of a reading page (playbook pages, changelog, accessibility) */
.doc-figure { margin: 0 0 32px; text-align: center; }
.doc-figure img { display: block; margin: 0 auto; height: auto; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow); }
/* Light/dark screenshot twins: `.doc-figure img` above would otherwise show the dark one in light
   mode too. dawn.css's dark-mode rules still win over this, so the swap works both ways. */
.doc-figure img.shot-dark { display: none; }
.doc-figure.phone img { width: min(100%, 280px); border-radius: 30px; }
.doc-figure.watch img { width: min(100%, 220px); border-radius: 44px; border: 0; }
.doc-figure.tablet img { width: min(100%, 420px); }
.doc-figure.wide img { width: min(100%, 640px); }
.doc-figure figcaption { margin-top: 12px; font-size: 14px; color: var(--sub); }