/* =====================================================================
   ds.css — the Wayfable Design System as a page grammar, for every page
   restyled without an artboard (goals 13–18; bmad-output/redesign-site/
   decisions.md §3).

   Source of truth: the design system imported verbatim at
   bmad-output/redesign-how-it-works/dc/_ds/wayfable-design-system-012e949d…/
   (readme.md "Visual foundations", tokens/*.css) and the two finished
   sheets that applied it — home_b.css and how_it_works.css. Mobile values
   are the default; desktop values from the site's 768px breakpoint.

   ⛔ EVERY SELECTOR THAT NAMES A CLASS NAMES A ds- ONE (design contract
   §4.6): this sheet restyles nothing that exists. Page-specific rules live
   in each page's own sheet under its own prefix (gd-, th-, sf-, sg-, pxt-,
   fs-, …) and compose with these.

   ⛔ NO CUSTOM PROPERTIES ARE DEFINED HERE (contract §1.6). The palette
   ships as literals:
     page #FDF8F0  band #F5EDE1  card #FFFEFB / #FFFFFF  line #E9E0CF
     ink #2C2418   heading #1F5540  forest #2D6A4F  hover #24503C
     body #55503F  muted #6E6555  faint #8A7F68  gold #C8922A
     sage #A8C5B5  parchment #EDD9A3  pale-forest #D8E6DD  clay #D4572A
   Type: Lora 600 for headings, prices and story text; Inter otherwise.
   Sizes are the tokens' scale only (11.5 12 13 14 15 16 17 19 20 22 27 34
   38 40 52). Radii 12 cards · 10 buttons · 999 pills. No shadows, no
   gradients, no texture. Depth is a 1px #E9E0CF hairline.
   ===================================================================== */

/* --- Page root ----------------------------------------------------------- */
body:has(.ds-page) { background: #FDF8F0; }
.ds-page {
    font-family: Inter, system-ui, sans-serif;
    color: #2C2418;
    -webkit-font-smoothing: antialiased;
    line-height: normal;   /* styles.css gives body 1.6; every text style below sets its own */
}
.ds-page *, .ds-page *::before, .ds-page *::after { box-sizing: border-box; }
:where(.ds-page) a { color: #2D6A4F; }
:where(.ds-page) a:hover { color: #24503C; }
:where(.ds-page) :focus-visible { outline: 2px solid #2D6A4F; outline-offset: 2px; }

/* --- Section shells -------------------------------------------------------
   Full-bleed bands; the measure is the inner wrapper. 48/20 → 88/56. */
.ds-section { padding: 48px 20px; }
.ds-band { background: #F5EDE1; }
.ds-section--forest { background: #2D6A4F; color: #FFFFFF; }
.ds-inner { max-width: 1120px; margin: 0 auto; }
.ds-inner--narrow { max-width: 700px; }
.ds-inner--centred { text-align: center; }
.ds-inner--centred .ds-h1, .ds-inner--centred .ds-h2, .ds-inner--centred .ds-lede,
.ds-inner--centred .ds-sub, .ds-inner--centred .ds-note { margin-left: auto; margin-right: auto; }

/* --- Type ------------------------------------------------------------------- */
.ds-label, .ds-kicker {
    display: block;   /* a label on a <span> still sits on its own line */
    margin: 0 0 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2D6A4F;
}
.ds-kicker { margin: 0; }
.ds-label--light { color: #A8C5B5; }   /* on forest: decorative only — 3.4:1 (F4); use --pale for a label that must read */
.ds-label--pale { color: #D8E6DD; }
.ds-label--muted { color: #6E6555; }
.ds-h1 {
    margin: 0 0 16px;
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    font-size: 34px;
    line-height: 1.13;
    letter-spacing: -0.015em;
    color: #2C2418;
    max-width: 700px;
    text-wrap: pretty;
}
.ds-h2 {
    margin: 0 0 16px;
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    font-size: 27px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #1F5540;
    max-width: 720px;
    text-wrap: pretty;
}
.ds-h2--ink { color: #2C2418; }
.ds-h1--app { font-size: 27px; max-width: none; }   /* an app subpage inside the shell: 27 → 34 */
.ds-h3 {
    margin: 0 0 10px;
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.25;
    color: #2C2418;
    text-wrap: pretty;
}
.ds-h3--lg { font-size: 22px; }
.ds-lede {
    margin: 0 0 24px;
    font-size: 17px;
    line-height: 1.6;
    color: #55503F;
    max-width: 620px;
    text-wrap: pretty;
}
.ds-sub { margin: 0 0 24px; font-size: 16px; line-height: 1.65; color: #6E6555; max-width: 680px; text-wrap: pretty; }
.ds-body { margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: #55503F; }
.ds-body--muted { color: #6E6555; }
.ds-note { margin: 20px 0 0; font-size: 15px; line-height: 1.65; color: #6E6555; max-width: 700px; }
.ds-small { font-size: 14px; line-height: 1.55; color: #6E6555; }
.ds-caption { font-size: 13px; line-height: 1.5; color: #6E6555; }
.ds-link { font-size: 15px; font-weight: 600; color: #2D6A4F; }
.ds-passage {
    margin: 0;
    font-family: Lora, Georgia, serif;
    font-size: 20px;
    line-height: 1.55;
    color: #2C2418;
    text-wrap: pretty;
}
/* A child's name inside story text. Homepage B's player passage paints it
   forest (.hb-player-name); clay on card is 4.0:1 and fails AA at passage
   size (decisions.md F4), so the grammar follows the homepage. */
.ds-name { color: #2D6A4F; font-weight: 600; }
.ds-num {                        /* step numerals: forest-deep, not gold (decisions.md F4) */
    margin: 0;
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    font-size: 19px;
    color: #1F5540;
}
.ds-section--forest .ds-h2, .ds-section--forest .ds-h1, .ds-section--forest .ds-h3 { color: #FFFFFF; }
.ds-section--forest .ds-lede, .ds-section--forest .ds-body, .ds-section--forest .ds-sub,
.ds-section--forest .ds-note { color: #D8E6DD; }
/* Links on forest are parchment; buttons keep their own colours (the
   :not() keeps a ds-btn inside a forest band from inheriting the link
   colour — goal 13, free-stories finding). */
.ds-section--forest a:not(.ds-btn) { color: #EDD9A3; text-decoration: underline; }   /* underlined: colour alone fails link-in-text-block on forest */
.ds-section--forest a:not(.ds-btn):hover { color: #FFFFFF; }
.ds-section--forest :focus-visible { outline-color: #EDD9A3; }

/* --- Buttons (10px corners; pill for the header-style CTA) ----------------- */
.ds-btn {
    display: inline-block;
    background: #2D6A4F;
    color: #FFFFFF;
    font-family: Inter, system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    padding: 16px 28px;
    border: 1px solid #2D6A4F;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    min-height: 44px;
    text-align: center;
}
.ds-btn:hover { background: #24503C; border-color: #24503C; color: #FFFFFF; }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.ds-btn--sm { font-size: 15px; padding: 12px 20px; }
.ds-btn--ghost { background: transparent; color: #2D6A4F; }
.ds-btn--ghost:hover { background: transparent; color: #24503C; border-color: #24503C; }
.ds-btn--invert { background: #EDD9A3; border-color: #EDD9A3; color: #24503C; }
.ds-btn--invert:hover { background: #FFFFFF; border-color: #FFFFFF; color: #24503C; }
.ds-btn--pill { border-radius: 999px; font-size: 15px; padding: 11px 20px; }
.ds-btn--block { display: block; width: 100%; }
.ds-btn--icon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ds-btn--icon-only { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
/* A flat progress track: forest on the bar colour, no animation of its own */
.ds-progress { height: 4px; border-radius: 2px; background: #DDD5C2; overflow: hidden; }
.ds-progress-fill { height: 100%; background: #2D6A4F; border-radius: 2px; }
/* A child's initial on their F1 accent — ink, so it reads on every accent */
.ds-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-family: Lora, Georgia, serif;
    font-weight: 700;
    font-size: 14px;
    color: #2C2418;
    background: #A8C5B5;
}
.ds-avatar--1 { background: #A8C5B5; }
.ds-avatar--2 { background: #D4956A; }
.ds-avatar--3 { background: #E9C46A; }
.ds-avatar--4 { background: #8BADC5; }
.ds-avatar--lg { width: 64px; height: 64px; font-size: 27px; }
.ds-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ds-cta-row--centred { justify-content: center; }

/* --- Cards and grids --------------------------------------------------------- */
.ds-card {
    background: #FFFEFB;
    border: 1px solid #E9E0CF;
    border-radius: 12px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: none;
}
.ds-card--feature { border-color: #2D6A4F; }
.ds-card--sand { background: #F5EDE1; }
.ds-card--white { background: #FFFFFF; }
.ds-card--forest { background: #2D6A4F; border-color: #2D6A4F; color: #FFFFFF; }
.ds-card--forest .ds-card-title, .ds-card--forest .ds-h3 { color: #FFFFFF; }
.ds-card--forest .ds-card-body, .ds-card--forest .ds-body, .ds-card--forest .ds-small { color: #D8E6DD; }
.ds-card--forest a:not(.ds-btn) { color: #EDD9A3; text-decoration: underline; }
a.ds-card, .ds-card--link { color: inherit; text-decoration: none; }
a.ds-card:hover, .ds-card--link:hover { color: inherit; border-color: #2D6A4F; }
.ds-card--tight { padding: 16px 18px; gap: 6px; }
.ds-card-title { margin: 0; font-family: Lora, Georgia, serif; font-weight: 600; font-size: 19px; line-height: 1.25; color: #2C2418; }
.ds-card-title--lg { font-size: 22px; }
.ds-card-title--sm { font-size: 16px; font-family: Inter, system-ui, sans-serif; font-weight: 600; }
.ds-card-body { margin: 0; font-size: 15px; line-height: 1.55; color: #6E6555; }
.ds-card .ds-card-foot { margin-top: auto; }   /* (0,2,0): wins over a sibling utility like .ds-pills { margin: 0 } */
.ds-card-label { margin: auto 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #2D6A4F; }
.ds-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
.ds-grid--tight { gap: 12px; }
.ds-grid--loose { gap: 20px; }
.ds-grid--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }   /* small link tiles: two-up even on mobile */

/* --- Rows (ruled lists), tables ------------------------------------------- */
.ds-rows { margin: 0; padding: 0; list-style: none; }
.ds-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    border-top: 1px solid #E9E0CF;
    margin: 0;
}
.ds-row:last-child { border-bottom: 1px solid #E9E0CF; }
.ds-row-label { margin: 0; font-size: 16px; line-height: 1.5; color: #2C2418; }
.ds-row-figure { margin: 0; font-family: Lora, Georgia, serif; font-weight: 600; font-size: 17px; color: #2C2418; white-space: nowrap; }
.ds-row-figure--free { color: #2D6A4F; }
/* A scrolling wrap is a focusable region: give it tabindex="0" role="region"
   aria-label="…" in the markup, or axe (serious) flags it at 390. */
.ds-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ds-table-wrap:focus-visible { outline: 2px solid #2D6A4F; outline-offset: 2px; }
.ds-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; color: #2C2418; }
.ds-table th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6E6555;
    padding: 0 16px 10px 0;
    border-bottom: 1px solid #E9E0CF;
    vertical-align: bottom;
}
.ds-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid #E9E0CF; vertical-align: top; color: #55503F; }
.ds-table td:first-child { color: #2C2418; font-weight: 500; }
/* A row header is the row's name, not the column-head device. */
.ds-table th[scope="row"] {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #2C2418;
    padding: 12px 16px 12px 0;
    vertical-align: top;
}
.ds-table .ds-yes { color: #2D6A4F; font-weight: 600; }
.ds-table .ds-no { color: #6E6555; }

/* --- Breadcrumb, TOC, pills, callouts, FAQ ---------------------------------- */
.ds-breadcrumb { margin: 0 0 18px; }
.ds-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 14px; color: #6E6555; }
.ds-breadcrumb a { color: #2D6A4F; text-decoration: none; display: inline-block; padding: 8px 0; }
.ds-breadcrumb a:hover { color: #24503C; text-decoration: underline; }
.ds-breadcrumb-sep { color: #8A7F68; }
.ds-toc { margin: 0 0 8px; }
.ds-toc ol, .ds-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-toc li { border-top: 1px solid #E9E0CF; }
.ds-toc li:last-child { border-bottom: 1px solid #E9E0CF; }
.ds-toc a { display: block; padding: 12px 0; font-size: 15px; font-weight: 500; color: #2D6A4F; text-decoration: none; }
.ds-toc a:hover { color: #24503C; }
.ds-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ds-pill {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #55503F;
    border: 1px solid #E9E0CF;
    border-radius: 999px;
    padding: 9px 13px;
    text-decoration: none;
    background: transparent;
}
a.ds-pill:hover, .ds-pill--on { color: #2D6A4F; border-color: #2D6A4F; }
.ds-callout { background: #FFFEFB; border: 1px solid #E9E0CF; border-radius: 12px; padding: 20px 22px; }
.ds-callout--forest { border-color: #2D6A4F; }
.ds-callout--sand { background: #F5EDE1; border-color: #F5EDE1; }
.ds-faq { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; max-width: 760px; }
.ds-faq-item { padding: 20px 0; border-top: 1px solid #E9E0CF; margin: 0; }
.ds-faq-item:last-child { border-bottom: 1px solid #E9E0CF; }
.ds-faq-q { margin: 0 0 8px; font-family: Lora, Georgia, serif; font-weight: 600; font-size: 19px; line-height: 1.3; color: #2C2418; }
.ds-faq-a { margin: 0; font-size: 16px; line-height: 1.65; color: #55503F; }
.ds-faq-a + .ds-faq-a { margin-top: 10px; }
.ds-faq-a a { color: #2D6A4F; }

/* --- Long-form prose (guides, legal) ------------------------------------------ */
.ds-prose { max-width: 700px; }
.ds-prose > * { margin: 0 0 16px; }
.ds-prose > :last-child { margin-bottom: 0; }   /* prose inside a callout or card ends flush */
.ds-prose p, .ds-prose li { font-size: 16px; line-height: 1.65; color: #55503F; }
.ds-prose li { margin: 0 0 8px; }
.ds-prose ul, .ds-prose ol { padding-left: 22px; }
.ds-prose h2 { margin: 40px 0 14px; font-family: Lora, Georgia, serif; font-weight: 600; font-size: 27px; line-height: 1.2; letter-spacing: -0.01em; color: #1F5540; text-wrap: pretty; }
.ds-prose h3 { margin: 28px 0 10px; font-family: Lora, Georgia, serif; font-weight: 600; font-size: 19px; line-height: 1.3; color: #2C2418; }
.ds-prose h2:first-child, .ds-prose h3:first-child { margin-top: 0; }
.ds-prose strong { font-weight: 600; color: #2C2418; }
.ds-prose a { color: #2D6A4F; }
.ds-prose blockquote { margin: 0 0 16px; padding: 0 0 0 18px; border-left: 1px solid #E9E0CF; font-family: Lora, Georgia, serif; font-size: 19px; line-height: 1.5; color: #2C2418; }
.ds-prose hr { border: 0; border-top: 1px solid #E9E0CF; margin: 32px 0; }
/* Long legal / guide prose: a hairline above each clause heading (not the first) */
.ds-prose--ruled h2 { padding-top: 28px; border-top: 1px solid #E9E0CF; }
.ds-prose--ruled h2:first-child { padding-top: 0; border-top: 0; }
.ds-prose code { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 14px; background: #F5EDE1; border-radius: 2px; padding: 1px 5px; color: #2C2418; }
.ds-anchor { scroll-margin-top: 88px; }

/* --- Notices (functional colours: decisions.md F1) ---------------------------- */
.ds-notice {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #E9E0CF;
    border-radius: 10px;
    background: #FFFEFB;
    font-size: 15px;
    line-height: 1.55;
    color: #55503F;
}
.ds-notice--error { border-color: #A63D2A; color: #A63D2A; }       /* F1 error — bramble */
.ds-notice--success { border-color: #2D6A4F; color: #1F5540; }     /* F1 success — forest */
.ds-notice--warning { border-color: #C8922A; color: #55503F; }     /* F1 warning — gold rule, body ink */
.ds-notice a { color: inherit; }
.ds-field-error { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #A63D2A; }
.ds-field--invalid { border-color: #A63D2A; }

/* --- Forms ---------------------------------------------------------------------- */
.ds-form { display: flex; flex-direction: column; gap: 18px; }
.ds-card--narrow { max-width: 440px; margin: 0 auto; }
.ds-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: #55503F; padding: 4px 0; }
.ds-check input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: #2D6A4F; flex: 0 0 auto; font: inherit; color: #2C2418; }
.ds-links { font-size: 14px; line-height: 1.5; color: #6E6555; }          /* small standalone links under a form */
.ds-links a { display: inline-block; padding: 12px 0; color: #2D6A4F; } /* 44px-tall targets (21px line + 2×12) */
.ds-logo { display: block; width: 48px; height: 48px; margin: 0 auto 16px; }   /* the mark on a centred card page */
.ds-quote { margin: 0; padding: 16px 18px; background: #F5EDE1; border-radius: 10px; font-family: Lora, Georgia, serif; font-style: italic; font-size: 17px; line-height: 1.55; color: #2C2418; }
.ds-row--lead { justify-content: flex-start; gap: 12px; }   /* a mark + text row (ds-row is label / figure) */
.ds-honeypot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }  /* off-canvas trap fields, not judged */
.ds-field {
    display: block;
    width: 100%;
    font-family: Inter, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: #2C2418;
    background: #FFFEFB;
    border: 1px solid #E9E0CF;
    border-radius: 10px;
    padding: 13px 14px;
    min-height: 44px;
    -webkit-appearance: none;
    appearance: none;
}
.ds-field::placeholder { color: #8A7F68; }
.ds-field:focus { border-color: #2D6A4F; outline: 2px solid #2D6A4F; outline-offset: 0; }
/* appearance:none strips the native chevron from a select — drawn back in ink */
select.ds-field {
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232C2418' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
textarea.ds-field { line-height: 1.5; resize: vertical; min-height: 120px; }
.ds-form > .ds-notice { margin: 0; }   /* the form's gap does the spacing */
.ds-field-label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 500; color: #2C2418; }
.ds-field-hint { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #6E6555; }
.ds-form-row { display: flex; flex-direction: column; gap: 12px; }
.ds-form-row .ds-field { flex: 1 1 auto; }

/* --- Choice controls: selectable tiles and pill-radios (native input parked
   off-canvas; selection is a border colour, no fill swap, no lift) ---------- */
.ds-fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.ds-legend { padding: 0; margin: 0 0 8px; font-size: 14px; font-weight: 500; color: #2C2418; }
.ds-opts { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ds-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 44px;
    padding: 14px 16px;
    background: #FFFEFB;
    border: 1px solid #E9E0CF;
    border-radius: 12px;
    cursor: pointer;
}
.ds-opt input { position: absolute; left: -10000px; width: 1px; height: 1px; }
.ds-opt:has(input:checked), .ds-opt--on { border-color: #2D6A4F; }
.ds-opt:has(input:focus-visible) { outline: 2px solid #2D6A4F; outline-offset: 2px; }
.ds-opt-title { font-size: 15px; font-weight: 600; line-height: 1.3; color: #2C2418; }
.ds-opt-desc { font-size: 14px; line-height: 1.5; color: #6E6555; }
.ds-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-seg label {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 500;
    color: #55503F;
    border: 1px solid #E9E0CF;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}
.ds-seg input { position: absolute; left: -10000px; width: 1px; height: 1px; }
.ds-seg label:has(input:checked) { color: #2D6A4F; border-color: #2D6A4F; font-weight: 600; }
.ds-seg label:has(input:focus-visible) { outline: 2px solid #2D6A4F; outline-offset: 2px; }
.ds-check--tall { min-height: 44px; align-items: center; }

/* --- Modal: an ink scrim and a flat card (hooks are the page's) ------------- */
.ds-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(44, 36, 24, 0.4);
}
.ds-modal--open { display: flex; }   /* the page's script toggles this state class */
.ds-modal-box {
    width: 100%;
    max-width: 480px;
    max-height: 100%;
    overflow: auto;
    background: #FFFEFB;
    border: 1px solid #E9E0CF;
    border-radius: 12px;
    padding: 24px;
}
.ds-btn--danger { background: transparent; border-color: #A63D2A; color: #A63D2A; }   /* F1 error — text and border only, no red fill */
.ds-btn--danger:hover { background: transparent; border-color: #A63D2A; color: #A63D2A; text-decoration: underline; }

/* --- Media, utilities ------------------------------------------------------------ */
.ds-img { display: block; max-width: 100%; height: auto; }
.ds-img--round { border-radius: 12px; }
.ds-media { display: block; margin: 0; }
.ds-stack { display: flex; flex-direction: column; gap: 16px; }
.ds-vh { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ds-measure { max-width: 700px; }
.ds-emoji { font-size: 22px; line-height: 1; }   /* the DS's one icon: a glyph standing in for an illustration */

/* =====================================================================
   Desktop — from 768px up
   ===================================================================== */
@media (min-width: 768px) {
    .ds-section { padding: 88px 56px; }
    .ds-label { margin: 0 0 16px; }
    .ds-h1 { font-size: 52px; margin: 0 0 20px; }
    .ds-h1--app { font-size: 34px; margin: 0 0 16px; }
    .ds-h2 { font-size: 38px; }
    .ds-lede { font-size: 19px; margin: 0 0 28px; }
    .ds-sub { font-size: 17px; }
    .ds-card { padding: 28px; }
    .ds-grid { gap: 24px; }
    .ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .ds-grid--4 { grid-template-columns: repeat(4, 1fr); }
    .ds-grid--5 { grid-template-columns: repeat(5, 1fr); }
    .ds-grid--split { grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
    .ds-grid--split-even { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
    .ds-grid--aside { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
    .ds-opts--2 { grid-template-columns: repeat(2, 1fr); }
    .ds-opts--3 { grid-template-columns: repeat(3, 1fr); }
    .ds-form-row { flex-direction: row; align-items: stretch; }
    .ds-passage { font-size: 22px; }
    .ds-anchor { scroll-margin-top: 96px; }
}