/* Extracted verbatim from config-design-system-v5_24.html — do not hand-edit.
   Regenerate with tools/extract_ds.py. */

/* --- local reset (not from v5_24) ---------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}        /* attribute must beat any display rule */
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);
     color:var(--ink);background:var(--bg-surface);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
button{font:inherit;color:inherit}
:where(a){color:var(--teal-600)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                       transition-duration:.01ms!important;scroll-behavior:auto!important}
}


/* ==== buttons — three variants, one 44 px height ==== */
/* BUTTONS — locked sizes & variants
   Single typography (16/600) across sm/md/lg. Only height + padding change.
   This is the Apple HIG / Stripe pattern — consistent label legibility regardless of size. */
/* BUTTONS — locked single size, three variants, plus link
   Every primary, secondary, and danger button shares: 44 px height, 16/600 typography,
   -0.005em tracking, 20 px horizontal padding, 8 px radius. The only differences are
   color variant (primary/secondary/danger), width (auto vs full-width), and link treatment. */
.btn{
  text-decoration:none;   /* added: a.btn must not inherit link underline */
  font-family:var(--font-sans);
  font-weight:600;
  font-size:16px;
  letter-spacing:-.005em;
  height:var(--btn-h);
  padding:0 20px;
  border-radius:var(--r-md);
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background var(--dur-fast) var(--ease-out);
  white-space:nowrap;
  min-width:88px;
}
.btn:active{transform:scale(var(--press-scale))}
.btn:focus-visible{outline:0;box-shadow:0 0 0 var(--focus-ring-offset) var(--bg-surface), 0 0 0 calc(var(--focus-ring-offset) + 2px) var(--teal-500-30)}
.btn:disabled{cursor:not-allowed}
.btn-primary:disabled,.btn-primary[disabled]{background:var(--ink-6);color:var(--ink-4)}
.btn-primary:disabled:hover,.btn-primary[disabled]:hover{background:var(--ink-6)}
.btn-secondary:disabled,.btn-secondary[disabled]{background:var(--bg-surface);color:var(--ink-5);border-color:var(--line)}
.btn-secondary:disabled:hover,.btn-secondary[disabled]:hover{background:var(--bg-surface)}
.btn-danger:disabled,.btn-danger[disabled]{background:var(--bg-surface);color:var(--ink-5);border-color:var(--line)}
.btn-block{width:100%}
.btn-primary{background:var(--teal-500);color:var(--bg-surface)}
.btn-primary:hover{background:var(--teal-600)}
.btn-secondary{background:var(--bg-surface);color:var(--teal-600);border:1.5px solid var(--teal-500)}
.btn-secondary:hover{background:var(--teal-50)}
.btn-danger{background:var(--bg-surface);color:var(--danger-500);border:1.5px solid var(--danger-500)}
.btn-danger:hover{background:var(--danger-50)}
.btn-link{background:transparent;color:var(--teal-600);font-weight:600;font-size:15px;padding:0;height:auto;min-width:0;display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;font-family:inherit;letter-spacing:-.005em;text-underline-offset:3px;text-decoration-thickness:1.5px}
.btn-link:hover{text-decoration:underline}
.btn-link:focus-visible{outline:0;text-decoration:underline;text-decoration-thickness:2.5px;text-underline-offset:3px}
.btn-icon{height:40px;width:40px;min-width:40px;padding:0;border-radius:var(--r-md);background:transparent;color:var(--ink-2);border:0;cursor:pointer;display:grid;place-items:center}
.btn-icon:hover{background:var(--bg-muted)}

/* ==== form fields — locked anatomy ==== */
/* INPUTS — single style */
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-size:var(--text-sm);font-weight:600;color:var(--ink);letter-spacing:-.005em}
.field-helper{font-size:var(--text-sm);color:var(--ink-4);line-height:1.45;margin:0}
.input{
  width:100%;
  font-family:var(--font-sans);
  font-size:var(--text-base);
  padding:13px 14px;
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  background:var(--bg-surface);
  color:var(--ink);
  outline:none;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.input:focus{outline:0;border-color:var(--teal-500);box-shadow:0 0 0 3px var(--teal-500-18)}
.input.error{border-color:var(--danger-500)}
.input.error:focus{box-shadow:0 0 0 3px var(--danger-500-12)}
.input:disabled{background:var(--bg-muted);color:var(--ink-4);cursor:not-allowed}
.input::placeholder{color:var(--ink-5)}
.input.with-action{padding-right:96px;position:relative}
.field-with-action{position:relative}
.field-with-action .input{padding-right:96px}
.field-with-action .field-action{position:absolute;right:6px;top:50%;transform:translateY(-50%);height:36px;padding:0 12px;border-radius:var(--r-sm);font-size:var(--text-sm);font-weight:500;background:transparent;color:var(--teal-600);border:0;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:5px}
.field-with-action .field-action:hover{background:var(--teal-50)}

/* ==== pills — six classes ==== */
/* PILLS — locked catalog */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-xs);font-weight:600;padding:4px 10px;border-radius:var(--r-pill);height:22px;line-height:1;white-space:nowrap}
.pill-teal{background:var(--teal-500);color:var(--bg-surface)}
.pill-teal-soft{background:var(--teal-50);color:var(--teal-700)}
.pill-editorial{background:var(--ink);color:var(--bg-surface)}
.pill-success{background:var(--success-50);color:var(--success-600);border:1px solid var(--success-500)}
.pill-warning{background:var(--warning-50);color:var(--warning-600)}
.pill-neutral{background:var(--bg-muted);color:var(--ink-3)}
.pill-price{background:var(--price-500);color:var(--bg-surface)}

/* ==== option cards, expandable variant, opt-card-detail, tinted-surface seg ==== */
/* SELECTION STATES — locked across all card types */
.opt-card{
  background:var(--bg-subtle);
  border:1.5px solid transparent;
  border-radius:var(--r-md);
  padding:16px 18px;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;cursor:pointer;
  transition:background var(--dur-fast),border-color var(--dur-fast);
}
.opt-card:hover{background:var(--bg-subtle-hover)}
.opt-card.selected{background:var(--teal-50);border-color:var(--teal-500)}
.opt-card .opt-info{min-width:0;flex:1}
.opt-card .opt-title{font-size:var(--text-md);font-weight:500;color:var(--ink);margin:0 0 2px}
.opt-card.selected .opt-title{color:var(--ink)}
.opt-card .opt-sub{font-size:var(--text-sm);color:var(--ink-4);line-height:1.4;margin:0}
.opt-card .opt-price{font-size:var(--text-md);font-weight:500;color:var(--ink);flex-shrink:0;font-variant-numeric:tabular-nums}
.opt-card .opt-thumb{width:48px;height:48px;border-radius:var(--r-sm);background:var(--bg-muted);flex-shrink:0;background-size:cover}

/* OPT-CARD · EXPANDABLE VARIANT · v5_24
   Adds a collapsing detail slot below the card's main row. Expands on selection.
   See "Sub-property disclosure inside option cards" rule in Section 03 and the
   Option card · expandable variant component in Section 04 for full spec.
   The Premium Layflat / Matte+Glossy use case is the inaugural deployment;
   pattern generalizes to any future card with sub-property disclosure. */
.opt-card.expandable .opt-card-detail{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height var(--dur-base) var(--ease-out),
             opacity var(--dur-base) var(--ease-out);
}
.opt-card.expandable.selected .opt-card-detail{
  max-height:200px;
  opacity:1;
}
.opt-card-detail-inner{
  padding:14px 18px 16px;
  border-top:1px solid var(--line-on-teal);
}
.opt-card-detail-label{
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--ink-3);
  margin-bottom:8px;
  letter-spacing:-.005em;
}

/* TINTED-SURFACE CONTEXT OVERRIDE FOR .seg · v5_24
   When .seg sits inside .opt-card-detail, the parent surface is teal-50.
   Default --bg-subtle is too close in luminance, so resting bg shifts to white.
   Hover and selected MUST be explicitly restored at 0,3,0 specificity tier —
   omitting them ties on specificity with .seg:hover and .seg.selected (both
   0,2,0) and CSS source-order silently kills hover and selected fills.
   Selected uses --teal-100 instead of --teal-50 because the parent IS teal-50;
   using the same shade would blend selected with the parent and lose the
   parent-differentiation axis that .seg.selected relies on in normal use.
   Border stays --teal-500 and text stays --teal-700 from base .seg.selected.
   General principle: context overrides on stateful components must spell out
   their state matrix. */
.opt-card-detail .seg{background:var(--bg-surface)}
.opt-card-detail .seg:hover{background:var(--bg-subtle-hover)}
.opt-card-detail .seg.selected{background:var(--teal-100)}

/* SEG · TEXT-ONLY VARIANT · v5_24
   Used inside .opt-card-detail when the segment is label-only (no icon).
   Slightly tighter padding than the icon-bearing default. */
.seg.text-only{padding:12px 10px}

/* ==== tile cards ==== */
.tile-card{
  background:var(--bg-subtle);
  border:1.5px solid transparent;
  border-radius:var(--r-md);
  padding:18px 14px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:pointer;text-align:center;position:relative;
  transition:background var(--dur-fast),border-color var(--dur-fast);
}
.tile-card:hover{background:var(--bg-subtle-hover)}
.tile-card.selected{background:var(--teal-50);border-color:var(--teal-500)}
.tile-card .tile-name{font-size:var(--text-sm);font-weight:500;color:var(--ink-2)}
.tile-card.selected .tile-name{color:var(--teal-700)}
.tile-check{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--teal-500);color:var(--bg-surface);display:none;align-items:center;justify-content:center}
.tile-card.selected .tile-check{display:flex}

/* ==== segment tabs ==== */
.segment-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg{
  background:var(--bg-subtle);
  border:1.5px solid transparent;
  border-radius:var(--r-md);
  padding:14px 10px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;font-size:var(--text-sm);font-weight:500;color:var(--ink-4);
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
}
.seg .seg-ic{width:18px;height:18px;color:var(--ink-5)}
.seg.selected{background:var(--teal-50);border-color:var(--teal-500);color:var(--teal-700)}
.seg.selected .seg-ic{color:var(--teal-600)}
/* SEG · disabled-with-lock variant — v5_20
   Used for past months in the calendar start picker. Background stays subtle so the segment
   still reads as a tappable surface that's currently unavailable, not as missing UI. */
.seg.disabled{cursor:not-allowed;color:var(--ink-5);position:relative;pointer-events:none}
.seg.disabled .seg-ic{color:var(--ink-5)}
.seg.disabled .seg-lock{position:absolute;top:6px;right:6px;width:14px;height:14px;color:var(--ink-5)}

/* TOGGLE (switch) · v5_20
   The original animated component in v5_20 — knob translates 20 px (50−26−2×2)
   in --dur-fast (160 ms), track color crossfades simultaneously. As of v5_22,
   .opt-card.nav also animates (chevron-shift on hover), so the Toggle is one of
   two animated components, not the only one. Apple HIG / Material 3 convergent

/* ==== toggle ==== */
.toggle{position:relative;display:inline-block;width:50px;height:30px;flex-shrink:0;vertical-align:middle;cursor:pointer;border:0;padding:0;background:transparent;font-family:inherit}
.toggle .toggle-track{position:absolute;inset:0;background:var(--ink-6);border-radius:var(--r-pill);transition:background var(--dur-fast) var(--ease-out)}
.toggle .toggle-knob{position:absolute;top:2px;left:2px;width:26px;height:26px;background:var(--bg-surface);border-radius:50%;box-shadow:var(--shadow-xs);transition:left var(--dur-fast) var(--ease-out)}
.toggle.on .toggle-track{background:var(--teal-500)}
.toggle.on .toggle-knob{left:22px}
.toggle:focus-visible{outline:0;box-shadow:0 0 0 var(--focus-ring-offset) var(--bg-surface),0 0 0 calc(var(--focus-ring-offset) + 2px) var(--teal-500-30);border-radius:var(--r-pill)}
.toggle:disabled,.toggle.disabled{cursor:not-allowed;opacity:.5}
@media (prefers-reduced-motion: reduce){.toggle .toggle-track,.toggle .toggle-knob{transition:none}}

/* CHECKBOX · v5_20
   Used in calendar Calendar Events sheet for per-holiday multi-select. 22 px box matches

/* ==== checkbox + checkbox row ==== */
.checkbox{position:relative;width:22px;height:22px;border-radius:var(--r-sm);background:var(--bg-subtle);border:1.5px solid var(--line);cursor:pointer;flex-shrink:0;transition:background var(--dur-fast),border-color var(--dur-fast);display:grid;place-items:center}
.checkbox:hover{background:var(--bg-subtle-hover);border-color:var(--ink-6)}
.checkbox .check-ic{width:14px;height:14px;color:var(--bg-surface);display:none;stroke-width:2.5}
.checkbox.checked{background:var(--teal-500);border-color:var(--teal-500)}
.checkbox.checked .check-ic{display:block}
.checkbox.indeterminate{background:var(--teal-500);border-color:var(--teal-500)}
.checkbox.indeterminate .indet-ic{display:block;width:12px;height:2px;background:var(--bg-surface);border-radius:1px}
.checkbox:focus-visible{outline:0;box-shadow:0 0 0 var(--focus-ring-offset) var(--bg-surface),0 0 0 calc(var(--focus-ring-offset) + 2px) var(--teal-500-30)}
.checkbox.disabled{background:var(--bg-muted);border-color:var(--ink-6);cursor:not-allowed}
.checkbox.disabled.checked .check-ic{color:var(--ink-5)}
.checkbox-row{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:var(--r-sm);cursor:pointer;transition:background var(--dur-fast)}
.checkbox-row:hover{background:var(--bg-subtle)}
.checkbox-row .cb-day{font-size:var(--text-base);font-weight:500;color:var(--ink-3);width:28px;flex-shrink:0;font-variant-numeric:tabular-nums}
.checkbox-row .cb-label{flex:1;min-width:0;font-size:var(--text-base);font-weight:500;color:var(--ink);display:flex;align-items:center;gap:8px}
.checkbox-row .cb-label .cb-dot{width:5px;height:5px;border-radius:50%;background:var(--marker-personal);flex-shrink:0}

/* DROPDOWN / SELECT · v5_20
   Trigger button. Same 44 px height as buttons. Same 6 px radius as inputs. On tap, opens
   a popover (desktop) or native picker / sheet (mobile). The trigger is documented here;

/* ==== dropdown ==== */
.dropdown{position:relative;display:inline-flex;align-items:center;justify-content:space-between;height:44px;padding:0 10px 0 13px;background:var(--bg-surface);border:1.5px solid var(--line);border-radius:var(--r-sm);font-family:inherit;font-size:var(--text-base);color:var(--ink);cursor:pointer;gap:8px;width:100%;transition:border-color var(--dur-fast)}
.dropdown.placeholder{color:var(--ink-5)}
.dropdown:hover{border-color:var(--ink-6)}
.dropdown:focus-visible,.dropdown.focus{outline:0;border-color:var(--teal-500);box-shadow:0 0 0 3px var(--teal-500-18)}
.dropdown[disabled],.dropdown.disabled{background:var(--bg-muted);color:var(--ink-4);cursor:not-allowed;border-color:var(--line)}
.dropdown .dd-ic{width:16px;height:16px;color:var(--ink-3);transition:transform var(--dur-fast) var(--ease-out);flex-shrink:0}
.dropdown.open .dd-ic{transform:rotate(180deg)}

/* QUOTA COUNTER · v5_20
   "Used spots: 8/8" pattern. Tier 1 plain text up to 79% used. Tier 2 promotes to a
   pill-warning once the quota is at or above 80% (one slot left, or full). Tabular-nums

/* ==== quota counter ==== */
.quota{font-size:var(--text-sm);font-weight:400;color:var(--ink-4);font-variant-numeric:tabular-nums}
.quota.warn{display:inline-flex;align-items:center;gap:4px;background:var(--warning-50);color:var(--warning-600);padding:2px 8px;border-radius:var(--r-md);font-weight:500}

/* OPTION CARD — NAV-ROW VARIANT · v5_20
   Settings sheet entries. NEVER apply .selected. The chevron-right tells the user this
   is a nav row, not a selection. Reuses .opt-card sizing exactly so it slots into existing

/* ==== option card · nav variant ==== */
.opt-card.nav{cursor:pointer}
.opt-card.nav:hover{background:var(--bg-subtle-hover)}
.opt-card.nav .nav-chev{width:18px;height:18px;color:var(--ink-3);flex-shrink:0;transition:transform var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.opt-card.nav:hover .nav-chev{transform:translateX(2px);color:var(--teal-700)}
@media (prefers-reduced-motion: reduce){.opt-card.nav .nav-chev{transition:none}.opt-card.nav:hover .nav-chev{transform:none}}
/* Guard: in v5_20 .opt-card.nav must never carry .selected — if it does, make it visible to QA */
.opt-card.nav.selected{outline:2px dashed var(--danger-500);outline-offset:2px}
.opt-card.nav.selected::before{content:"⚠ Settings nav rows cannot use selected state — see Section 03 Settings sheet rule";position:absolute;background:var(--danger-500);color:var(--bg-surface);font-size:10px;padding:2px 6px;border-radius:4px;top:-8px;left:8px}

/* REPEATING EDITABLE ROW · v5_20
   Calendar Personal Events sheet. Each card holds its own internal fields plus a delete
   affordance. Stack of cards with a dashed "Add new" affordance at the end. */
/* REPEATING EDITABLE ROW · v5_20 (restructured v5_22)
   Calendar Personal Events sheet. Each card holds its own internal fields plus a
   delete affordance in a dedicated header row at the top — pattern matches Stripe
   Dashboard recipient cards, Linear subtask cards, Apple Notes management bars.
   v5_22 changed: .rr-delete is no longer position:absolute; it now lives inside
   .rr-header right-aligned, which eliminates overlap with the Day dropdown's

/* ==== step indicator ==== */
/* STEP INDICATOR (loading) */
.steps{display:flex;align-items:center;gap:0;justify-content:center}
.step{display:flex;align-items:center;gap:0}
.step .dot{width:24px;height:24px;border-radius:50%;background:var(--teal-500);color:var(--bg-surface);display:grid;place-items:center;flex-shrink:0;border:2px solid var(--teal-500)}
.step.current .dot{background:var(--bg-surface);color:var(--teal-500)}
.step.upcoming .dot{background:var(--bg-surface);color:var(--ink-5);border-color:var(--ink-6)}
.step .bar{width:32px;height:2px;background:var(--teal-500)}
.step:last-child .bar{display:none}
.step.upcoming .bar,.step.current .bar{background:var(--ink-6)}

/* ==== progress bar ==== */
.progress{height:6px;background:var(--line);border-radius:var(--r-pill);overflow:hidden}
.progress-fill{height:100%;background:var(--teal-500);border-radius:var(--r-pill);transition:width var(--dur-base)}

/* ==== skeleton loader ==== */
@keyframes skel{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skel{background:linear-gradient(90deg,var(--bg-muted) 0%,var(--line-2) 50%,var(--bg-muted) 100%);background-size:200% 100%;animation:skel 1.6s ease-in-out infinite;border-radius:var(--r-sm);display:inline-block;color:transparent}

/* ==== filter chips ==== */
.chip-row{display:flex;gap:8px;overflow-x:auto;padding:4px 0}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;height:36px;padding:0 14px;background:var(--bg-muted);border-radius:var(--r-pill);display:inline-flex;align-items:center;font-size:var(--text-sm);font-weight:500;color:var(--ink-3);cursor:pointer;border:0;font-family:inherit}
.chip.active{background:var(--teal-500);color:var(--bg-surface)}

/* ==== callouts ==== */
.callout{border-radius:var(--r-md);padding:14px 16px;display:flex;align-items:flex-start;gap:12px;font-size:var(--text-sm);line-height:1.5}
.callout-icon{flex-shrink:0;margin-top:2px}
.callout-success{background:var(--success-50);color:var(--success-600);border:1px solid var(--success-100)}
.callout-success a{color:var(--success-600);font-weight:600;text-decoration:underline}
.callout-info{background:var(--teal-50);color:var(--teal-700)}
.callout-warning{background:var(--warning-50);color:var(--warning-600)}
.callout-danger{background:var(--danger-50);color:var(--danger-600);border:1px solid var(--danger-500)}

/* ==== page title ==== */
/* page title block — final rule */
.page-title{padding:8px 0 12px}
.page-title.center{text-align:center}
.page-title.left{text-align:left}
.page-title h1{font-family:var(--font-sans);font-size:var(--text-2xl);font-weight:700;letter-spacing:-.018em;line-height:1.15;margin:0 0 6px;color:var(--ink)}
.page-title h1.hero{font-size:var(--text-3xl);letter-spacing:-.024em;line-height:1.1}
.page-title .sub{font-size:var(--text-base);color:var(--ink-4);line-height:1.45;margin:0;max-width:480px}
.page-title.center .sub{margin-left:auto;margin-right:auto}

/* ==== sheet anatomy ==== */
.sheet-overlay{position:absolute;inset:0;background:var(--overlay-scrim);z-index:5}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--bg-surface);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--shadow-sheet);z-index:10;display:flex;flex-direction:column}
.sheet.h50{height:50%}
.grabber{width:36px;height:4px;background:var(--ink-6);border-radius:2px;margin:8px auto 0;flex-shrink:0}
.sheet-head{padding:12px var(--space-screen) 8px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-shrink:0}
.sheet-head .sh-titles{flex:1;text-align:center;padding-left:36px}
.sheet-head h3{font-family:var(--font-sans);font-size:var(--text-lg);font-weight:600;letter-spacing:-.012em;margin:0;color:var(--ink);line-height:1.2}
.sheet-head .sh-sub{font-size:var(--text-sm);color:var(--ink-4);margin-top:2px;line-height:1.4}
.sheet-close{width:36px;height:36px;border-radius:50%;background:var(--bg-muted);border:0;cursor:pointer;display:grid;place-items:center;color:var(--ink-3);flex-shrink:0}
.sheet-body{padding:12px var(--space-screen) 0;overflow-y:auto;flex:1;min-height:0}
.sheet-body::-webkit-scrollbar{display:none}
.sheet-actions{padding:14px var(--space-screen);display:flex;gap:10px;border-top:1px solid var(--line-2);flex-shrink:0}
.sheet-actions .btn{flex:1}

/* ==== bottom action bar + price block ==== */
/* bottom action bar */
.bottom-cta{background:var(--bg-surface);border-top:1px solid var(--line);padding:12px var(--space-screen) 14px;display:flex;align-items:center;gap:12px;flex-shrink:0;box-shadow:var(--shadow-sheet)}
.bottom-cta .price-block{flex:0 0 auto;display:flex;flex-direction:column;line-height:1.1;min-width:0}
.bottom-cta .price-block .from{font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);margin-bottom:2px}
.bottom-cta .price-block .price{font-size:22px;font-weight:700;color:var(--price-500);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bottom-cta .btn{flex:1}

/* ==== svg reset ==== */
svg{display:block}