/* editing.help site system · the subpage components (step 5d): /pricing/, /download/, /changelog/.
   Builds on tokens.css and components.css (the pricing card, the FAQ row, the callout). Light and dark through the tokens.
   Spec: overhaul/system/system.md, "Components" (page head, check list, changelog date rail, app card, numbered steps). */

/* ---------- Page head: eyebrow, the page's D1, its lede ---------- */
.sx-page-head { padding-block: clamp(40px, 22.86px + 4.381vw, 86px) 0; }
.sx-page-head .sx-d1 { margin-bottom: var(--sx-s5); max-width: 15em; }
.sx-page-head .sx-lede { max-width: 36em; }
.sx-page-head + .sx-section { padding-top: var(--sx-s8); }

/* ---------- Pricing card additions: the card's check list and its button ---------- */
.sx-checks { list-style: none; margin: var(--sx-s2) 0 var(--sx-s5); padding: 0; display: grid; gap: var(--sx-s2); color: var(--sx-soft); font-size: var(--sx-small); line-height: 1.5; }
.sx-checks li { position: relative; padding-left: 18px; text-wrap: pretty; }
.sx-checks li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--sx-muted); } /* release 7, the ornament inventory (Randall): P08, the site's plain filled bullet, not a check mark */
.sx-plan .sx-button { margin-top: auto; justify-content: center; }
.sx-plan .sx-price { margin-top: var(--sx-s2); }

/* ---------- Changelog: the date rail. Date in columns 1-3, the entry in 4-10; stacked on phones ---------- */
.sx-log { border-top: 1px solid var(--sx-line); }
.sx-log .entry { display: grid; gap: var(--sx-s2) var(--sx-gutter); padding-block: var(--sx-s6); border-bottom: 1px solid var(--sx-line); }
@media (min-width: 900px) {
  .sx-log .entry { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sx-log .entry > time { grid-column: 1 / span 3; }
  .sx-log .entry > div { grid-column: 4 / span 7; }
}
.sx-log time { color: var(--sx-muted); font: 500 var(--sx-small)/1.9 var(--sx-ui); font-variant-numeric: tabular-nums; }
.sx-log h2 { margin: 0 0 var(--sx-s2); font-family: var(--display); font-size: calc(var(--sx-d3) * var(--sx-d-scale)); font-weight: var(--sx-d3-wt); letter-spacing: var(--sx-d3-ls); line-height: var(--sx-d3-lh); color: var(--sx-ink); text-wrap: balance; }
.sx-log p { margin: 0; max-width: 36em; color: var(--sx-soft); font-size: var(--sx-body); line-height: 1.6; }
.sx-log p + p { margin-top: var(--sx-s3); }
.sx-log .tag { margin-left: var(--sx-s2); color: var(--sx-muted); font: 400 var(--sx-small)/1 var(--sx-ui); } /* release 7, the ornament inventory (Randall): P09, a state label as plain text, no chip */
.sx-log kbd, .dl-web kbd { padding: 1px 6px; border: 1px solid var(--sx-line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--sx-ground-2); color: var(--sx-ink); font: 500 13px/1.4 var(--sx-ui); }

/* ---------- Download: the app card (icon, name, how to get it, the facts), the whole-app still beneath it ---------- */
.dl-app { padding-block: var(--sx-s8); border-top: 1px solid var(--sx-line); }
.dl-mac .dl-app:first-of-type { padding-top: 0; border-top: 0; }
.dl-app-text { max-width: 40rem; }
.dl-icon { width: 64px; height: 64px; display: block; margin: 0 0 var(--sx-s4) -3px; }
.dl-app .sx-d2 { margin-bottom: var(--sx-s3); }
.dl-app-text > p { margin: 0; color: var(--sx-soft); font-size: var(--sx-body); line-height: 1.6; text-wrap: pretty; }
.get { display: flex; flex-wrap: wrap; gap: var(--sx-s3) var(--sx-s4); align-items: center; margin: var(--sx-s5) 0 0; }
.get .button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--sx-radius-s); background: var(--sx-accent); color: var(--sx-on-accent); font: 600 15px/1.2 var(--sx-ui); text-decoration: none; }
.get .button:hover { background: var(--sx-accent-ink); color: var(--sx-on-accent); }
.soon { margin: 0; display: inline-flex; align-items: center; min-height: 44px; color: var(--sx-soft); font-size: var(--sx-small); } /* release 7, the ornament inventory (Randall): P07, a plain line, not a box shaped like a button; it keeps the badge's height */
.appstore-badge { display: inline-block; padding: 4px 0; } /* Apple's badge, unmodified, at least 40 px tall with clear space */
.appstore-badge img { height: 44px; width: auto; display: block; }
.dl-app-text > .dl-direct { margin: var(--sx-s5) 0 0; color: var(--sx-soft); font-size: var(--sx-small); line-height: 1.5; max-width: 34em; }
.dl-app-text > .dl-check { margin: var(--sx-s4) 0 0; color: var(--sx-muted); font-size: var(--sx-caption); line-height: 1.6; max-width: 34em; }
/* the SHA-256: its own mono block, 13 px, breaking anywhere (QA 6a, D7) */
.dl-check code { display: block; margin-top: var(--sx-s2); padding: var(--sx-s2) var(--sx-s3); border-radius: var(--sx-radius-s); background: var(--sx-ground-2); box-shadow: inset 0 0 0 1px var(--sx-line); font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; word-break: break-all; color: var(--sx-soft); }
/* Release 4 (Randall): the checksum in a closed disclosure under the version line, on the FAQ row's grammar (system.md § 6): the
   content arrives by opacity and a 6 px rise, the + turns to x, no height animation; native <details>, so scripts off and the keyboard work */
.dl-verify { margin: var(--sx-s2) 0 0; max-width: 34em; }
.dl-verify summary { position: relative; display: inline-block; padding: 4px 22px 4px 0; cursor: pointer; list-style: none; color: var(--sx-soft); font: 500 var(--sx-caption)/1.5 var(--sx-ui); border-radius: 4px; transition: color var(--sx-dur-1) var(--sx-ease); }
.dl-verify summary::-webkit-details-marker { display: none; }
.dl-verify summary:hover { color: var(--sx-ink); }
.dl-verify summary::before, .dl-verify summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 1.5px; margin-top: -0.75px; border-radius: 1px; background: currentColor; transition: transform var(--sx-dur-2) var(--sx-ease); }
.dl-verify summary::after { transform: rotate(90deg); }
.dl-verify[open] summary::before { transform: rotate(45deg); }
.dl-verify[open] summary::after { transform: rotate(135deg); }
.dl-verify > .dl-check { margin: var(--sx-s1) 0 0; color: var(--sx-muted); font-size: var(--sx-caption); line-height: 1.6; }
.dl-verify[open] > :not(summary) { animation: sx-arrive var(--sx-dur-3) var(--sx-ease) both; }
/* phones: the ways to get it stack on the spacing scale, each on its own step (QA 6a, D7) */
@media (max-width: 719px) {
  .get { flex-direction: column; align-items: flex-start; gap: var(--sx-s4); }
}
.req { margin: var(--sx-s5) 0 0; padding: 0; max-width: 28rem; border-top: 1px solid var(--sx-line); font-size: var(--sx-small); }
.req div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: var(--sx-s3); padding: 9px 0; border-bottom: 1px solid var(--sx-line); }
.req dt { color: var(--sx-muted); }
.req dd { margin: 0; color: var(--sx-ink); }
.dl-app-still { margin-top: var(--sx-s7); }

/* ---------- Download: the web app. Copy in columns 1-7, the browser figure in 8-12 (stacked below 900) ---------- */
.dl-web { border-top: 1px solid var(--sx-line); }
.dl-web-grid { display: grid; gap: var(--sx-s7) var(--sx-gutter); align-items: center; }
@media (min-width: 900px) {
  .dl-web-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .dl-web-text { grid-column: 1 / span 7; }
  .dl-figure { grid-column: 8 / -1; }
}
.dl-web .sx-d2 { margin-bottom: var(--sx-s4); }
.dl-steps { list-style: none; counter-reset: step; margin: var(--sx-s6) 0 0; padding: 0; display: grid; gap: var(--sx-s5); }
.dl-steps li { counter-increment: step; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; }
.dl-steps li::before { content: counter(step); grid-row: 1 / span 2; padding-top: 0.42em; font: 600 15px/1 var(--sx-ui); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--sx-accent); } /* release 7, the ornament inventory (Randall): P11, plain numerals like /editing/'s steps, no ring */
.dl-steps h3 { margin: 0 0 var(--sx-s1); font-family: var(--display); font-size: calc(var(--sx-d4) * var(--sx-d-scale)); font-weight: var(--sx-d4-wt); line-height: var(--sx-d4-lh); color: var(--sx-ink); }
.dl-steps p { margin: 0; color: var(--sx-soft); }
.dl-steps strong, .dl-other strong { color: var(--sx-ink); font-weight: 600; }
.ui { font-weight: 500; color: var(--sx-ink); white-space: nowrap; }
.dl-figure { margin: 0; }
.dl-figure svg { width: 100%; height: auto; display: block; }
.dl-figure figcaption { margin-top: var(--sx-s3); color: var(--sx-muted); font-size: var(--sx-caption); text-align: center; }
.f-window { fill: var(--sx-ground-2); stroke: var(--sx-line-2); }
.f-chrome, .f-bar { fill: var(--sx-ground-3); }
.f-dot { fill: var(--sx-line-2); }
.f-tab { fill: var(--sx-ground-2); }
.f-tabtext { font: 500 11px var(--sx-ui); fill: var(--sx-soft); }
.f-url { font: 14px var(--sx-ui); fill: var(--sx-soft); }
.f-menu { font: 700 18px var(--sx-ui); fill: var(--sx-muted); }
.f-line, .f-thread { stroke: var(--sx-line); fill: none; stroke-width: 1.5; }
.f-ring { fill: color-mix(in srgb, var(--sx-accent) 12%, transparent); stroke: var(--sx-accent); stroke-width: 1.5; }
.f-ico, .f-arrow { fill: none; stroke: var(--sx-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.f-text { fill: var(--sx-line-2); }
.f-sub { fill: var(--sx-line); }
.f-bullet { fill: var(--sx-ui-line); }
/* the other browsers: two plain paragraphs with bold run-ins (release 7, the ornament inventory P03: no card, gold bar or shadow) */
.dl-other { list-style: none; margin: var(--sx-s8) 0 0; padding: 0; display: grid; gap: var(--sx-s4) var(--sx-gutter); }
@media (min-width: 900px) { .dl-other { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dl-other li { color: var(--sx-soft); font-size: var(--sx-small); line-height: 1.6; text-wrap: pretty; }

/* ---------- The legal template (step 5e): /privacy/, /terms/, /refunds/, and /support/ on the same column.
   The pages keep their own markup (main.doc: eyebrow, h1, the "Last updated" line, a summary box, h2 sections, h3s,
   lists, tables, a contact block); only <main> gains .sx-legal. One 44rem column on the page's ground. ---------- */
.sx-legal { max-width: calc(44rem + 2 * var(--sx-pad)); margin-inline: auto; padding: clamp(40px, 22.86px + 4.381vw, 86px) var(--sx-pad) var(--sx-section); color: var(--sx-soft); }
.sx-legal .eyebrow { margin: 0 0 var(--sx-s4); font: 400 var(--sx-small)/1.4 var(--sx-ui); color: var(--sx-muted); } /* release 7, the ornament inventory (Randall): P05, the words as written, not tracked caps */
.sx-legal h1 { margin: 0 0 var(--sx-s3); font-family: var(--display); font-size: calc(var(--sx-d2) * var(--sx-d-scale)); font-weight: var(--sx-d2-wt); letter-spacing: var(--sx-d2-ls); line-height: var(--sx-d2-lh); color: var(--sx-ink); text-wrap: balance; }
.sx-legal .updated { margin: 0 0 var(--sx-s6); color: var(--sx-muted); font-size: var(--sx-small); }
.sx-legal .summary { margin: 0 0 var(--sx-s6); } /* release 7, the ornament inventory (Randall): P06, plain lead paragraphs in ink, no card */
.sx-legal .summary p { margin: 0; color: var(--sx-ink); }
.sx-legal .summary p + p { margin-top: var(--sx-s3); }
.sx-legal h2 { margin: var(--sx-s8) 0 var(--sx-s3); font-family: var(--display); font-size: calc(var(--sx-d3) * var(--sx-d-scale)); font-weight: var(--sx-d3-wt); letter-spacing: var(--sx-d3-ls); line-height: var(--sx-d3-lh); color: var(--sx-ink); text-wrap: balance; }
.sx-legal h3 { margin: var(--sx-s6) 0 var(--sx-s2); color: var(--sx-ink); font: 600 var(--sx-body)/1.4 var(--sx-ui); text-wrap: balance; }
.sx-legal p, .sx-legal li { color: var(--sx-soft); font-size: var(--sx-body); line-height: 1.6; text-wrap: pretty; }
.sx-legal ul, .sx-legal ol { padding-left: 1.2em; }
.sx-legal li { margin: 6px 0; }
.sx-legal strong { color: var(--sx-ink); font-weight: 600; }
.sx-legal a { color: var(--sx-accent); }
.sx-legal a:hover { color: var(--sx-accent-ink); }
.sx-legal dl { margin: var(--sx-s3) 0; border-top: 1px solid var(--sx-line-2); }
.sx-legal dl > div, .sx-legal dt { padding-top: 10px; }
.sx-legal dt { color: var(--sx-ink); font-weight: 600; }
.sx-legal dd { margin: 4px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--sx-line-2); color: var(--sx-soft); }
.sx-legal address { font-style: normal; color: var(--sx-soft); }
.sx-legal .table-wrap { overflow-x: auto; }
.sx-legal table { width: 100%; border-collapse: collapse; margin: var(--sx-s3) 0; font-size: var(--sx-small); }
.sx-legal th, .sx-legal td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--sx-line-2); }
.sx-legal th { color: var(--sx-ink); font-weight: 600; }
.sx-legal td { color: var(--sx-soft); }
.sx-legal code { font: 0.92em/1.4 ui-monospace, "SF Mono", Menlo, monospace; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- /capture/ (step 5e): its own markup, on the system. main.cap-page scopes these. One column: each
   section's copy, then its close-up beneath it at reading size (no zig-zag). ---------- */
.cap-page .wrap { width: 100%; max-width: calc(var(--sx-content) + 2 * var(--sx-pad)); margin-inline: auto; padding-inline: var(--sx-pad); }
.cap-page section { padding-block: var(--sx-section); }
.cap-page section + section { padding-top: 0; }
.cap-page .shot { position: relative; margin: 0; border-radius: var(--sx-radius); overflow: hidden; background: var(--sx-ground-2); box-shadow: var(--sx-surface); }
.cap-page .shot img { display: block; width: 100%; height: auto; }
.cap-page figure.shot { min-width: 0; }
.cap-page .lead, .cap-page .section-intro { margin: 0; max-width: 34em; color: var(--sx-soft); font-size: var(--sx-lede); line-height: 1.5; text-wrap: pretty; }
.cap-page h2 { margin: 0; font-family: var(--display); font-size: calc(var(--sx-d2) * var(--sx-d-scale)); font-weight: var(--sx-d2-wt); letter-spacing: var(--sx-d2-ls); line-height: var(--sx-d2-lh); color: var(--sx-ink); text-wrap: balance; }
.cap-page h3 { margin: 0 0 var(--sx-s2); font-family: var(--display); font-size: calc(var(--sx-d3) * var(--sx-d-scale)); font-weight: var(--sx-d3-wt); letter-spacing: var(--sx-d3-ls); line-height: var(--sx-d3-lh); color: var(--sx-ink); text-wrap: balance; }
.cap-page p, .cap-page li { color: var(--sx-soft); }
.cap-page strong { color: var(--sx-ink); font-weight: 600; }
.cap-page .fine { margin: var(--sx-s3) 0 0; color: var(--sx-muted); font-size: var(--sx-caption); }
.cap-page .section-head { display: grid; gap: var(--sx-s5) var(--sx-gutter); margin-bottom: var(--sx-head-gap); }
@media (min-width: 900px) { .cap-page .section-head { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; } .cap-page .section-head > h2 { grid-column: 1 / span 6; } .cap-page .section-head > p { grid-column: 7 / -1; } }
/* hero: the copy, then the shot beneath it (the two-word name stays on one line: no orphan) */
.cap-hero { display: grid; gap: var(--sx-s7); padding-top: clamp(32px, 20.11px + 3.048vw, 64px) !important; }
.cap-hero-copy { max-width: 46rem; }
/* The Capture close-ups (assets/shots-2: Capture 1.0.2's own panels on a transparent ground, each with its shadow).
   Their smallest text is 13.0 CSS px at 900 px (desktop files) and 15.0 at 358 px (phone files), so:
   - from 980 px the desktop file runs the content width (916-1135 px), 10 columns from 1200 (979 at 1440);
   - 720-979 px: the phone file, centred, 358-716 px;
   - below 720: the phone file edge to edge (360 at 360, 390 at 390). */
.cap-shot { margin: 0; min-width: 0; }
.cap-shot img { display: block; width: 100%; height: auto; }
@media (max-width: 719px) { .cap-shot { margin-inline: calc(-1 * var(--sx-pad)); } }
@media (min-width: 720px) and (max-width: 979px) { .cap-shot { width: min(100%, 716px); margin-inline: auto; } }
@media (min-width: 1200px) { .cap-shot { width: calc((100% - 11 * var(--sx-gutter)) / 12 * 10 + 9 * var(--sx-gutter)); } }
.cap-icon { width: 72px; height: 72px; display: block; margin: 0 0 var(--sx-s4) -4px; }
@media (max-width: 719px) { .cap-page .cap-hero h1 { font-size: min(calc(var(--sx-d1) * var(--sx-d-scale)), 10.5vw); } } /* D1, held to the phone's width */
.cap-kicker { margin: 0 0 var(--sx-s3); color: var(--sx-muted); font-size: var(--sx-small); }
.cap-hero h1 { white-space: nowrap; margin: 0 0 var(--sx-s5); font-family: var(--display); font-size: calc(var(--sx-d1) * var(--sx-d-scale)); font-weight: var(--sx-d1-wt); letter-spacing: var(--sx-d1-ls); line-height: var(--sx-d1-lh); color: var(--sx-ink); text-wrap: balance; }
.cap-page .get { margin-top: var(--sx-s5); }
/* how it fits: three numbered steps */
.fit-steps { list-style: none; counter-reset: fit; margin: 0; padding: 0; display: grid; gap: var(--sx-s6) var(--sx-gutter); }
@media (min-width: 900px) { .fit-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fit-steps li { counter-increment: fit; padding-top: var(--sx-s5); border-top: 1px solid var(--sx-line-2); }
.fit-steps li::before { content: counter(fit); display: block; margin-bottom: var(--sx-s3); font: 600 13px/1 var(--sx-ui); color: var(--sx-accent); font-variant-numeric: tabular-nums; }
.fit-steps p { margin: 0; }
/* features and privacy: one column, the copy then its close-up beneath it, every time (no zig-zag) */
.feature, .cap-private-grid { display: grid; gap: var(--sx-s5); padding-block: var(--sx-s7); border-top: 1px solid var(--sx-line); }
.feature-text, .cap-private-grid > div { max-width: 40rem; }
.feature-text p { margin: 0; }
.optional { margin-left: var(--sx-s2); color: var(--sx-muted); font: 400 var(--sx-small)/1 var(--sx-ui); } /* release 7, the ornament inventory (Randall): P10, the word, no pill */
.feature-also { margin: var(--sx-s6) 0 0; max-width: 46em; }
.shortcuts { margin-top: var(--sx-s7); max-width: 32rem; }
.shortcuts h3 { font-family: var(--sx-ui); font-size: var(--sx-body); font-weight: 600; }
.shortcuts table { width: 100%; border-collapse: collapse; font-size: var(--sx-small); }
.shortcuts th, .shortcuts td { padding: 9px 0; border-bottom: 1px solid var(--sx-line); text-align: left; }
.shortcuts th { color: var(--sx-soft); font-weight: 400; }
.shortcuts td { text-align: right; }
.cap-page kbd { padding: 1px 6px; border: 1px solid var(--sx-line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--sx-ground-2); color: var(--sx-ink); font: 500 13px/1.4 var(--sx-ui); }
.cap-private h2 { margin-bottom: var(--sx-s4); }
.private-list { margin: 0 0 var(--sx-s4); padding-left: 1.2em; display: grid; gap: var(--sx-s2); }
.quiet-link { font-weight: 500; }
/* the questions: the system's FAQ row (components.css .sx-faq look), on the page's own <details> */
.faq-head { margin-bottom: var(--sx-head-gap); }
.faq-list { max-width: 46rem; border-top: 1px solid var(--sx-line-2); }
.faq-list details { border-bottom: 1px solid var(--sx-line-2); }
.faq-list summary { position: relative; padding: 18px 32px 18px 0; cursor: pointer; list-style: none; font-family: var(--display); font-size: calc(var(--sx-d4) * var(--sx-d-scale)); font-weight: var(--sx-d4-wt); line-height: var(--sx-d4-lh); color: var(--sx-ink); text-wrap: balance; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list details[open] > :not(summary) { animation: sx-arrive var(--sx-dur-3) var(--sx-ease) both; } /* the answer arrives; no height animation */
.faq-list summary::before, .faq-list summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 1.5px; border-radius: 1px; background: var(--sx-muted); transition: transform var(--sx-dur-2) var(--sx-ease); }
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::before { transform: rotate(45deg); }
.faq-list details[open] summary::after { transform: rotate(135deg); }
.faq-list details p { margin: 0 0 20px; max-width: 36em; font-size: var(--sx-small); }
.cap-page .support { padding-top: 0; }
.cap-page .support p { margin: 0; }

/* A short paragraph that ends on an email address keeps the address with the words before it (balanced lines, no orphan) */
.sx-legal p:has(> a[href^="mailto:"]:last-child), .cap-page .support p { text-wrap: balance; }

/* ---------- The company pages (release 4): /about/ and /editing/. A calm template: the h1 at D2, paragraphs in the reading
   measure, /editing/'s three steps on the three-up (.sx-three) with their numbers, "What to send" as the callout, the contact
   block with the mailbox address only. Copy: website-copy/COMPANY-COPY.md, word for word. ---------- */
.co-page { padding-block: clamp(48px, 30.17px + 4.571vw, 96px) var(--sx-section); }
.co-page h1 { margin: 0 0 var(--sx-s6); max-width: 16em; }
.co-body p { margin: 0 0 var(--sx-s4); max-width: 34em; font-size: var(--sx-lede); line-height: 1.6; color: var(--sx-soft); text-wrap: pretty; }
.co-body p:first-child { color: var(--sx-ink); }
.co-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sx-s3) var(--sx-s6); margin: var(--sx-s7) 0 0; }
.co-actions .sx-button .sx-icon { width: 16px; height: 16px; }
/* Step B: the Patrons page, a plain list of names */
.pa-list { list-style: none; margin: 0 0 var(--sx-s4); padding: 0; columns: 2 14em; column-gap: var(--sx-s6); font-size: var(--sx-lede); line-height: 1.6; color: var(--sx-ink); }
.pa-list li { break-inside: avoid; }
.pa-list:empty { display: none; }
.co-helps { margin-top: var(--sx-s7); }
.co-help-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sx-s3); max-width: 40em; }
.co-help-list li { color: var(--sx-soft); font-size: var(--sx-body); line-height: 1.6; text-wrap: pretty; padding-left: var(--sx-s5); position: relative; }
.co-help-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--sx-muted); } /* the site's filled bullet: the writer's mark, never the AI's hollow one */
.co-help-list b { color: var(--sx-ink); font-weight: 600; }
.co-help-line { margin: var(--sx-s5) 0 0; color: var(--sx-soft); font-size: var(--sx-body); line-height: 1.6; }
.co-how { margin-top: var(--sx-s8); }
.co-label { margin: 0 0 var(--sx-s5); }
.co-steps .sx-num { display: block; margin-bottom: var(--sx-s3); font-size: 15px; }
.co-steps p { color: var(--sx-soft); font-size: var(--sx-body); line-height: 1.6; text-wrap: pretty; }
.co-steps b { color: var(--sx-ink); font-weight: 600; }
.co-send { margin: var(--sx-s7) 0 0; max-width: 40em; color: var(--sx-soft); font-size: var(--sx-body); line-height: 1.6; text-wrap: pretty; } /* release 7: a plain paragraph, its label a bold run-in like the steps' (no card, bar, eyebrow or shadow) */
.co-send b { color: var(--sx-ink); font-weight: 600; }
.co-contact { margin-top: var(--sx-s6); max-width: 40em; font-style: normal; font-size: var(--sx-small); line-height: 1.6; color: var(--sx-soft); }
.co-contact a { color: var(--sx-accent); }

/* release 7: the ask row at the end of /support/ (components.css, "The ask row"), set off from the last list */
.sx-legal .sx-ask-end { margin-top: var(--sx-s8); }