/* Sections: buttons, links, fields, choices, cards, badges, banners, dialogs, tables, pagination, navigation, accordions, empty states and errors. */
@layer site-components {
  /* Buttons: one default outline and five semantic variants. */
  /* Button: enabled default, with a full contrast boundary. */
  .button {
    border: var(--border-width) solid var(--control-border);
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text-primary);
    font: 500 var(--font-size-min) / var(--leading-1-35) var(--mono);
    letter-spacing: var(--tracking-ui);
    text-decoration: none;
    white-space: normal;
    overflow-wrap: break-word;
    cursor: pointer;
  }
  /* Primary and local lead buttons: use the brand fill when no persistent action competes. */
  .button--primary, .button--lead {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--text-on-accent);
  }
  /* Tertiary button: an underlined, readable lower priority action. */
  .button--tertiary {
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: var(--link-offset);
  }
  /* Uppercase button: retain the original action label treatment without changing its text. */
  .button--uppercase {
    text-transform: var(--label-case);
  }
  /* Danger button: destructive intent retains readable foreground text. */
  .button--danger {
    border-color: var(--status-danger-border);
    color: var(--status-danger-text);
  }
  /* Icon button: a square target with no decorative filled background. */
  .button--icon {
    border-color: transparent;
  }
  /* Floating icon button: a raised circular surface keeps the menu discoverable. */
  .button--floating {
    border-color: var(--border-bright);
    border-radius: var(--radius-round);
    background: var(--canvas-raised);
    color: var(--accent);
    box-shadow: var(--shadow-floating);
  }
  /* Quiet icon button: dismiss and menu actions retain an unboxed target. */
  .button--quiet {
    border: 0;
    border-radius: 0;
    color: var(--accent);
  }
  /* Primary button: hover uses a nearby accent, never a selected segment. */
  .button--primary:hover:where(:not(:disabled):not([aria-disabled="true"])) {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
  }
  /* Danger button: hover strengthens its existing danger boundary. */
  .button--danger:hover:where(:not(:disabled):not([aria-disabled="true"])) {
    background: var(--status-danger-surface);
  }
  /* Controls: keyboard focus stays visible outside the component boundary. */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible, .checkbox:focus-visible, .radio:focus-visible, .select-shell:focus-within {
    outline-style: solid;
    outline-width: var(--focus-width);
    outline-color: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }
  /* Button and choice: disabled targets have a separate solid surface. */
  .button:disabled, .button[aria-disabled="true"], .choice:disabled, .choice[aria-disabled="true"], .segment:disabled, .tab:disabled, .chip:disabled, .field:disabled {
    border-color: var(--disabled-border);
    background: var(--disabled-surface);
    color: var(--disabled-text);
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
  }
  /* Button: loading preserves its label and advertises pending work. */
  .button[aria-busy="true"] {
    cursor: progress;
  }
  /* Links: ordinary links retain the current brand and an explicit underline. */
  .link {
    color: var(--accent);
    text-decoration-color: var(--link-decoration);
    text-underline-offset: var(--link-offset);
  }
  /* Link: hover makes the underline visible without changing its meaning. */
  .link:hover {
    text-decoration: underline;
  }
  /* Inputs, selects and textareas: one enabled field appearance. */
  /* Field: a clear border and readable foreground distinguish enabled input. */
  .field {
    border: var(--border-width) solid var(--control-border);
    border-radius: var(--radius-control);
    background: var(--canvas-inset);
    color: var(--text-primary);
    font: 400 var(--font-size-min) / var(--leading-field) var(--body);
    accent-color: var(--accent);
  }
  /* Field: placeholders remain readable on enabled surfaces. */
  .field::placeholder {
    color: var(--field-placeholder);
    opacity: 1;
  }
  /* Field: invalid input follows the required two pixel form policy. */
  .field[aria-invalid="true"] {
    border: var(--invalid-width) solid var(--control-invalid-border);
  }
  /* Field labels and table headings: use readable shared mono labels. */
  .table-heading, .table-label {
    color: var(--text-primary);
    font: 500 var(--font-size-min) / var(--leading-field) var(--mono);
  }
  /* Field label: quiet mono text keeps the original enabled form hierarchy. */
  .field-label {
    color: var(--muted);
    font: 400 var(--font-size-min) / var(--leading-1-65) var(--mono);
  }
  /* Checkbox and radio: native semantics and theme accent remain available. */
  /* Checkbox: the enabled native target uses the theme accent. */
  .checkbox {
    accent-color: var(--accent);
    cursor: pointer;
  }
  /* Radio: draw the circle in CSS so the native theme cannot replace its focus outline. */
  .radio {
    cursor: pointer;
    appearance: none;
    border: var(--border-width) solid var(--control-border);
    border-radius: var(--radius-round);
    background: var(--canvas-inset);
    color: var(--accent);
  }
  /* Radio: a filled center marks the native checked state. */
  .radio:checked {
    background-image: radial-gradient(circle, currentColor 45%, transparent 50%);
  }
  /* Radio: disabled choices retain a distinct surface and readable checked mark. */
  .radio:disabled {
    cursor: not-allowed;
    border-color: var(--disabled-border);
    background-color: var(--disabled-surface);
    color: var(--disabled-text);
  }
  /* Checkbox: the disabled target advertises unavailable interaction. */
  .checkbox:disabled {
    cursor: not-allowed;
  }
  /* Toggle: checked state uses a filled track with native checkbox semantics. */
  /* Toggle: the native checkbox remains responsible for checked state. */
  .toggle {
    accent-color: var(--accent);
  }
  /* Segmented controls, tabs, chips and quiz choices: explicit filled selection. */
  /* Segmented control: the shared inset tray groups related choices. */
  .segmented-control {
    border: var(--border-width) solid var(--control-border);
    border-radius: var(--radius-xl);
    background: var(--canvas-inset);
  }
  /* Segment, tab and chip: default enabled choices use readable text. */
  .segment, .tab, .chip {
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font: 500 var(--font-size-min) / var(--leading-1-35) var(--mono);
    cursor: pointer;
  }
  /* Choices: default quiz and compact inventory targets share one boundary. */
  .choice {
    border: var(--border-width) solid var(--control-border);
    border-radius: var(--radius-xl);
    background: var(--canvas-inset);
    color: var(--text-primary);
    font: 400 var(--font-size-body) / var(--leading-1-4) var(--body);
    cursor: pointer;
  }
  /* Choice indicator: a native looking round outline accompanies the label. */
  .choice-indicator {
    border: var(--border-width) solid currentColor;
    border-radius: var(--radius-round);
    color: inherit;
  }
  /* Choice labels and contrasting banners: inherit the owning surface foreground. */
  .choice-label, .choice-help, .banner--cookie :where(.component-copy), .banner--cookie :where(.link), .banner--announcement :where(.link), .banner--announcement :where(.button) {
    color: inherit;
  }
  /* Cards: common content surfaces and three semantic treatments. */
  /* Card: default surface retains the site's quiet raised appearance. */
  .card {
    border: var(--border-width) solid var(--border-bright);
    border-radius: var(--radius-control);
    background: var(--canvas-raised);
    color: var(--text-primary);
    text-decoration: none;
  }
  /* Subtle card: quiet reading panels retain soft borders and six pixel corners. */
  .card--subtle {
    border-color: var(--border);
    border-radius: var(--radius-lg);
  }
  /* Card: unavailable content uses explicit danger feedback. */
  /* Unavailable status swatch: match the actual unavailable choice state. */
  .card--danger {
    border-color: var(--status-danger-border);
    background: var(--status-danger-surface);
  }
  /* Component title: headings in cards, banners and dialogs share readable type. */
  .component-title {
    color: var(--text-primary);
    font-family: var(--body);
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: var(--leading-1-4);
  }
  /* Component label: metadata uses the site's existing mono label scale. */
  .component-label {
    color: var(--accent);
    font-family: var(--mono);
    font-size: var(--font-size-min);
    letter-spacing: var(--tracking-meta);
    text-transform: var(--label-case);
    font-weight: 400;
  }
  /* Component copy: descriptive text uses the accessible body scale. */
  .component-copy, .accordion-copy {
    color: var(--text-secondary);
    font-size: var(--font-size-body);
    line-height: var(--leading-copy);
  }
  /* Badges and pills: compact noninteractive status labels. */
  /* Badge: default status uses a subtle brand tinted surface. */
  .badge {
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--text-on-tint);
    font: 500 var(--font-size-min) / var(--leading-1-4) var(--mono);
  }
  /* Neutral badge: coverage counts retain a quiet mono surface instead of selected emphasis. */
  .badge--neutral {
    background: var(--surface-neutral-badge);
    color: var(--muted);
    font-weight: 400;
    line-height: var(--leading-body);
  }
  /* Round badge: numbered steps retain a circular outline. */
  .badge--round {
    border-color: var(--accent);
    border-radius: var(--radius-round);
  }
  /* Monogram badge: a bold brand letter sits inside a quiet circular tint. */
  .badge--monogram {
    border-color: var(--border-tint);
    border-radius: var(--radius-round);
    color: var(--accent);
    font: var(--weight-display) var(--font-size-counter) / var(--leading-single) var(--sans);
  }
  /* Banners and alerts: informational, success and danger surfaces. */
  /* Banner: default information is readable on the shared raised surface. */
  .banner {
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-card);
    background: var(--canvas-raised);
    color: var(--text-primary);
    font-size: var(--font-size-body);
    line-height: var(--leading-copy);
  }
  /* Announcement banner: retain the live mono type and uninterrupted accent strip. */
  .banner--announcement {
    border: 0;
    border-radius: 0;
    background: var(--accent-strong);
    color: var(--text-on-accent);
    font: 400 var(--font-size-min) / var(--leading-1-35) var(--mono);
  }
  /* Cookie banner: consent text retains its original contrasting surface. */
  .banner--cookie {
    background: var(--cookie-canvas);
    color: var(--cookie-text);
    box-shadow: var(--shadow-cookie);
  }
  /* Banner: success uses a quiet accent tint. */
  .banner--success {
    border-color: var(--accent);
    background: var(--accent-soft);
  }
  /* Dialogs: a common raised panel and scrim for review workflows. */
  /* Dialog: default panel retains the shared overlay depth. */
  .dialog, .nav-panel {
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-xl);
    background: var(--canvas-raised);
    color: var(--text-primary);
  }
  /* Dialog: backdrop and page overlay share the existing scrim. */
  .dialog::backdrop, .dialog-overlay {
    background: var(--overlay-scrim);
  }
  /* Floating action panel: grouped actions keep an opaque boundary above content. */
  .action-panel {
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-xl);
    background: var(--nav-drawer-background);
    box-shadow: var(--shadow-popover);
  }
  /* Tables: shared comparison appearance with page owned reflow geometry. */
  /* Table: default comparison text remains readable in both themes. */
  .table {
    border-collapse: collapse;
    color: var(--text-secondary);
    font-size: var(--font-size-body);
  }
  /* Editorial table: compact body text keeps the open reading presentation. */
  .table--editorial {
    font-size: var(--font-size-min);
    line-height: var(--leading-1-55);
  }
  /* Body row heading: passive labels retain proportional text and medium emphasis. */
  .table-heading--body {
    font-family: var(--body);
    line-height: inherit;
  }
  /* Comparison table: preserve the live enclosing boundary. */
  .table--comparison {
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-xl);
  }
  /* Table column heading: retain the live mono header hierarchy. */
  .table-heading--column {
    background: var(--canvas-raised);
    letter-spacing: var(--tracking-label);
    text-transform: var(--label-case);
  }
  /* Comparison heading: the ArtDrop column retains its brand emphasis. */
  .table-heading--accent {
    color: var(--accent);
    background: var(--surface-positive);
  }
  /* Comparison cell: preserve the highlighted ArtDrop column. */
  .table-cell--accent {
    background: var(--surface-positive);
    border-inline-start: var(--border-width) solid var(--border-strong);
  }
  /* Table total: retain the separate summary row boundary. */
  .table-row--total {
    background: var(--canvas-raised);
    border-block-start: var(--invalid-width) solid var(--border-strong);
  }
  /* Tinted card: retain the live positive comparison surface. */
  .card--tinted {
    background: var(--surface-positive);
    border-color: var(--border-tint);
  }
  /* Table cells and accordion rows: use the same quiet separator. */
  .table-cell, .accordion {
    border-block-end: var(--border-width) solid var(--border-default);
  }
  /* Selected choices: a filled dark tint differs from primary and hover states. */
  .pagination [aria-current="page"], .segment[aria-pressed="true"]:where(:not(:disabled)), .tab[aria-selected="true"]:where(:not(:disabled)), .chip[aria-pressed="true"]:where(:not(:disabled)), .choice[aria-checked="true"]:where(:not(:disabled):not([aria-disabled="true"])), .choice[aria-pressed="true"]:where(:not(:disabled):not([aria-disabled="true"])) {
    border-color: var(--accent);
    background: var(--surface-selected);
    color: var(--selected-text);
  }
  /* Navigation: full contrast items with distinct current location treatment. */
  /* Navigation item: default links remain readable, including visited links. */
  .nav-item {
    color: var(--accent);
    font: 400 var(--font-size-min) / var(--leading-ui) var(--body);
    text-decoration: none;
    letter-spacing: var(--tracking-ui);
    overflow-wrap: break-word;
    hyphens: manual;
  }
  /* Footer navigation: preserve the live quiet mono reading style. */
  .nav-item--muted {
    color: var(--text-secondary);
    font-family: var(--mono);
    line-height: var(--leading-body);
  }
  /* German footer navigation: natural hyphenation for long compound words. */
  .nav-item--muted:lang(de) {
    hyphens: auto;
    overflow-wrap: normal;
  }
  /* Mono navigation and fields: reading actions and short values retain the code face. */
  .nav-item--mono, .field--mono {
    font-family: var(--mono);
  }
  /* Section navigation: the uppercase index label retains its strong bottom boundary. */
  .nav-item--section {
    color: var(--white);
    border-block-end: var(--border-width) solid var(--border-bright);
    text-transform: var(--label-case);
    line-height: var(--leading-body);
  }
  /* Divided navigation: quiet reading rows keep their separators and compact leading. */
  .nav-item--divided {
    border-block-end: var(--border-width) solid var(--border);
    line-height: var(--leading-1-35);
    letter-spacing: normal;
  }
  /* Navigation item: hover adds an underline without selected fill. */
  .nav-item:hover {
    text-decoration: underline;
    text-underline-offset: var(--link-offset);
  }
  /* Navigation disclosure: the caret rotates with its semantic expanded state. */
  .button--disclosure::after {
    content: '';
    border-inline-end: var(--border-width) solid currentColor;
    border-block-end: var(--border-width) solid currentColor;
    transform: rotate(45deg);
  }
  /* Navigation disclosure: expanded caret points back toward its trigger. */
  .button--disclosure[aria-expanded="true"]::after {
    transform: rotate(225deg);
  }
  /* Brand mark: the existing mono wordmark remains a navigation component. */
  .brand-mark {
    color: var(--text-primary);
    font: 500 var(--brand-size-active) / var(--leading-ui) var(--mono);
    text-decoration: none;
    letter-spacing: var(--tracking-ui);
  }
  /* Brand mark: the trademark is sized relative to the wordmark. */
  .brand-mark :where(sup) {
    font-size: var(--trademark-size);
  }
  /* Accordion trigger: enabled questions stay readable and wrap naturally. */
  .accordion-trigger {
    background: transparent;
    border: 0;
    color: var(--text-primary);
    font: 600 var(--font-size-body) / var(--leading-1-4) var(--body);
    cursor: pointer;
  }
  /* Accordion title: the trigger owns the foreground for its complete label. */
  .accordion-title {
    color: inherit;
    font: inherit;
  }
  /* Accordion icon: default disclosure outline uses the current accent. */
  .accordion-icon {
    border: var(--border-width) solid var(--accent);
    border-radius: var(--radius-round);
    color: var(--accent);
  }
  /* Quiet navigation, metadata and empty states: keep full contrast secondary text. */
  .empty-state, .nav-item--quiet, .component-label--muted, .detail-label {
    color: var(--text-secondary);
  }
  /* Form errors: messages belong below their corresponding invalid field. */
  /* Form error: visible text uses the shared danger role at full body size. */
  .form-error, .text-danger {
    color: var(--status-danger-text);
    font: 400 var(--font-size-min) / var(--leading-field) var(--body);
  }
  /* Spinner: pending actions use a label adjacent indicator. */
  .spinner {
    border: var(--invalid-width) solid currentColor;
    border-inline-end-color: transparent;
    border-radius: var(--radius-round);
    animation: control-spin var(--duration-spinner) linear infinite;
  }
  /* Field overlay: a native language picker retains its complete pointer target. */
  .field--overlay {
    opacity: 0;
    cursor: pointer;
  }
  /* Choice tile: compact inventory controls keep square page owned geometry. */
  .choice--tile {
    border-radius: var(--radius-md);
    font: 500 var(--font-size-min) / var(--leading-1-4) var(--mono);
  }
  /* Navigation bar: the shared fixed header retains its existing translucent tone. */
  .nav-bar {
    background: var(--nav-background);
    border-block-end: var(--border-width) solid var(--border-default);
  }
  /* Component metric: default numeric summaries keep complete words and a stronger hierarchy. */
  .component-metric {
    overflow-wrap: normal;
    color: var(--accent);
    font: 900 var(--font-size-title) / var(--leading-single) var(--sans);
    font-variation-settings: var(--font-optical-reading);
  }
  /* Metric unit: concise labels retain the original supporting type scale. */
  .metric-unit {
    font-size: var(--font-size-lead);
  }
  /* Price value: prominent plan numerals retain the proportional brand face. */
  .price-value {
    color: var(--text-primary);
    font: 900 var(--font-size-price) / var(--leading-single) var(--body);
    letter-spacing: var(--tracking-display);
  }
  /* Price unit: currency and cadence remain quiet beside the main value. */
  .price-unit {
    color: var(--muted);
    font: 600 var(--font-size-price-unit) / var(--leading-single) var(--body);
  }
  /* Outline card: partner tiles keep their quiet border and open surface. */
  .card--outline {
    background: transparent;
    border-color: var(--border);
  }
  /* Masked icon: partner artwork follows the current theme accent. */
  .icon--mask {
    background: var(--accent);
    mask: var(--partner-logo) center / contain no-repeat;
  }
  /* Accent table column: editorial comparisons keep the established heading tone. */
  .table-heading--editorial {
    color: var(--accent);
    letter-spacing: var(--tracking-meta);
    background: transparent;
  }
  /* Select shell: the language control retains a visible enabled boundary. */
  .select-shell {
    font: 500 var(--font-size-min) / var(--leading-1-35) var(--mono);
    color: var(--text-primary);
    border: var(--border-width) solid var(--control-border);
    border-radius: var(--radius-md);
    background: var(--canvas-raised);
  }
  /* Spinner: rotation conveys pending work without altering the label. */
  @keyframes control-spin {
    /* Spinner: complete one full turn. */
    to {
      transform: rotate(360deg);
    }
  }
  /* Expanded accordion: the disclosure indicator uses the selected tint. */
  .accordion-trigger[aria-expanded="true"] :where(.accordion-icon) {
    background: var(--surface-selected);
    color: var(--selected-text);
  }
  /* Announcement link: the pricing action keeps its visible default underline. */
  .link--announcement {
    font-weight: 500;
    text-decoration: underline;
  }
  /* Inline link: legal and company credit inherit their paragraph typography. */
  .link--inline {
    color: inherit;
    font: inherit;
    text-decoration: underline;
  }
  /* Contact link: quiet mono metadata retains a readable inline underline. */
  .link--metadata, .detail-value {
    font-family: var(--mono);
    color: var(--text-primary);
  }
  /* Related link: sentence case reading links keep their original hierarchy. */
  .link--related {
    font-family: var(--body);
    color: var(--text-primary);
    text-transform: none;
  }
  /* Return link: subordinate navigation keeps its default underline. */
  .link--back {
    font-family: var(--mono);
    text-decoration: underline;
  }
  /* Step label: plain mono metadata has no badge surface. */
  .step-label {
    text-transform: var(--label-case);
    font: 400 var(--font-size-min) / var(--leading-body) var(--mono);
    color: var(--accent);
    letter-spacing: var(--tracking-tag);
  }
  /* Grid card: flat canvas cells preserve the quiet shared grid surface. */
  .card--canvas {
    background: var(--canvas-primary);
    border: 0;
    border-radius: 0;
  }
  /* Card grid: neutral separators preserve the original joined surface. */
  .card--grid {
    background: var(--border);
    border-color: var(--border);
  }
  /* Glass card: translucent panels preserve the glow beneath them. */
  .card--glass {
    background: var(--surface-card);
    border-color: var(--border);
    border-radius: var(--radius-glass);
  }
  /* Informational banner: subtle green tint retains the original full outline. */
  .banner--tinted {
    background: var(--accent-soft);
    border-color: var(--border-tint);
  }
  /* Invalid native choice: a danger shadow leaves the keyboard focus outline available. */
  .checkbox[aria-invalid="true"], .radio[aria-invalid="true"] {
    box-shadow: var(--shadow-invalid-choice);
  }
  /* Select shell: the visible caret preserves the dropdown affordance. */
  .select-shell:where(:has(.field--overlay))::after {
    content: "";
    border-inline-end: var(--border-width) solid currentColor;
    border-block-end: var(--border-width) solid currentColor;
    transform: rotate(45deg);
    pointer-events: none;
  }
  /* Status swatch: the small map key uses the shared status boundary. */
  .badge--swatch {
    border: var(--border-width-map) solid var(--border-bright);
    border-radius: var(--focus-offset);
    background: transparent;
  }
  /* Selected status swatch: match the actual filled choice state. */
  .badge--selected {
    border-color: var(--accent);
    background: var(--surface-selected);
  }
  /* Navigation drawer: background separates the menu from page content. */
  .nav-drawer {
    background: var(--nav-drawer-background);
  }
  /* Soft banner: neutral information keeps a subtle positive surface without a stripe. */
  .banner--soft {
    background: var(--surface-positive);
  }
  /* Feature title: prominent capability cards use the original larger reading scale. */
  .component-title--feature {
    font-size: var(--font-size-card-feature);
    line-height: var(--leading-1-3);
  }
  /* Bold title: editorial card headings retain ordinary heading emphasis. */
  .component-title--bold {
    font-weight: var(--weight-heading);
  }
  /* Detail row: passive plan features retain the smaller reading scale and quiet boundary. */
  .detail-row {
    font-size: var(--font-size-min);
    border-block-end: var(--border-width) solid var(--border);
  }
  /* Terminal row or cell: the final passive feature leaves its reading edge open. */
  .detail-row:last-of-type, .table-cell--terminal {
    border-block-end: 0;
  }
  /* Sentence label: plan names retain their original case and mono tracking. */
  .component-label--sentence {
    text-transform: none;
    letter-spacing: var(--tracking-tag);
  }
  /* Decorative marker: included features retain their small round accent dot. */
  .marker {
    background: var(--accent);
    border-radius: var(--radius-round);
  }
  /* Subtle marker: supporting metadata keeps its original quiet accent strength. */
  .marker--subtle {
    opacity: 0.6;
  }
  /* Card divider: a quiet horizontal boundary separates details from actions on phones. */
  .card-divider {
    border-block-start: var(--border-width) solid var(--border);
  }
  /* Accent emphasis: icons, note lead ins and supporting assurances retain the brand highlight. */
  .brand-mark :where(span, :where(sup)), .form-error:where(.is-success), .button--disclosure, .icon--accent, .banner--emphasis :where(strong), .metadata--accent {
    color: var(--accent);
  }
  /* Progress track: the uncompleted quiz range remains visible. */
  .progress-track {
    background: var(--surface-interactive);
  }
  /* Progress indicator: completed questions retain their brand fill. */
  .progress-indicator {
    background: var(--accent);
  }
  /* Danger anatomy: manual metrics, headings and labels retain the original status red. */
  .table-heading--danger, .component-label--danger, .component-metric--danger {
    color: var(--status-danger-border);
  }
  /* Danger annotation: supporting explanations retain the readable error text red. */
  .metadata--danger {
    color: var(--status-danger-text);
  }
  /* Field label: message forms keep uppercase tracked mono labels. */
  .field-label--uppercase {
    letter-spacing: var(--tracking-tag);
    text-transform: var(--label-case);
  }
  /* Metadata field label: search labels retain quiet mono tracking and uppercase copy. */
  .field-label--metadata {
    color: var(--faint-bright);
    letter-spacing: var(--tracking-meta);
    text-transform: var(--label-case);
  }
  /* Step title: numbered instructions keep their original compact heading scale. */
  .component-title--step {
    font-size: var(--font-size-reading);
    letter-spacing: var(--tracking-heading);
  }
  /* Card title: documentation cards keep their original reading hierarchy. */
  .component-title--card {
    font-size: var(--font-size-lead);
    line-height: var(--leading-card-title);
    letter-spacing: var(--tracking-display);
  }
  /* Tracked text: headings and supporting metadata share the same readable spacing. */
  .tracking--ui {
    letter-spacing: var(--tracking-ui);
  }
  /* Compact metric: total time values retain their original thirty two pixel scale. */
  .component-metric--compact {
    font-size: var(--font-size-summary);
  }
  /* Stat card: a metric holding translated text sizes from its card so the longest word fits. */
  .stat-card {
    container-type: inline-size;
  }
  /* Stat figure: size follows its card and wraps only between words. */
  .stat-num {
    font-size: var(--font-size-stat-figure);
  }
  /* Counter metric: available inventory keeps its accent mono numeral. */
  .component-metric--counter {
    font: 500 var(--font-size-counter) / var(--leading-display) var(--mono);
  }
  /* Table row label: passive comparison steps retain quiet mono text. */
  .table-heading--row {
    color: var(--muted);
    font-weight: 400;
    letter-spacing: var(--tracking-ui);
  }
  /* Stacked table row: phone comparisons retain an individual raised frame. */
  .table-row--stacked {
    border: var(--border-width) solid var(--border-bright);
    border-radius: var(--radius-lg);
    background: var(--canvas-raised);
  }
  /* Stacked table heading: the phone step remains distinct from both comparison cells. */
  .table-heading--stacked {
    border-block-end-color: var(--border-bright);
    background: var(--canvas-inset);
    color: var(--white);
  }
  /* Desktop table: ordinary rows return to the enclosing table surface. */
  @media (min-width: 1024px) {
    /* Stacked table row: desktop uses the enclosing frame and ordinary cell separators. */
    .table-row--stacked {
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    /* Stacked table total: desktop retains its separate raised summary boundary. */
    .table-row--stacked:where(.table-row--total) {
      border-block-start: var(--invalid-width) solid var(--border-strong);
      background: var(--canvas-raised);
    }
    /* Stacked table heading: desktop steps return to quiet text on the table canvas. */
    .table-heading--stacked {
      border-block-end-color: var(--border-default);
      background: transparent;
      color: var(--muted);
    }
  }
  /* Annotation badge: comparison checks keep their filled label anatomy. */
  .badge--annotation {
    font-weight: 400;
    line-height: var(--leading-body);
    border-radius: var(--radius-sm);
    letter-spacing: var(--tracking-meta);
    text-transform: var(--label-case);
  }
  /* Unavailable choice: taken inventory retains its distinct danger status. */
  /* Banner: error uses the shared danger foreground and surface. */
  .banner--danger, .choice--unavailable:disabled, .badge--unavailable {
    border-color: var(--status-danger-border);
    background: var(--status-danger-surface);
    color: var(--status-danger-text);
  }
  /* Copied actions, hovered choices and linked cards: use an accent boundary. */
  .button:where(.is-copied), .choice:hover:where(:not(:disabled):not([aria-disabled="true"])), .card--interactive:hover, .banner--outlined {
    border-color: var(--accent);
  }
  /* Navigation item: the current location has a quiet filled background. */
  .nav-item[aria-current], .nav-item:where(.active) {
    background: var(--accent-soft);
    color: var(--text-on-tint);
  }
  /* Local lead button: the phone tray or open drawer carries the visible primary action. */
  .button--lead:where(:root:has(.purchase-tray:not(.is-hidden)):not(:has(.cookie-banner, .nav-drawer.open)) *):where(:not(:disabled):not([aria-disabled="true"])), .button--lead:where(:root:has(.nav-drawer.open) *):where(:not(:disabled):not([aria-disabled="true"])) {
    border-color: var(--control-border);
    background: transparent;
    color: var(--text-primary);
  }
  /* Local lead button: hover remains a subtle boundary change beside the phone tray. */
  .button:hover:where(:not(:disabled):not([aria-disabled="true"])), .field:hover:where(:not(:disabled):not([aria-invalid="true"])), .segment:hover, .tab:hover, .chip:hover, .button--lead:hover:where(:root:has(.purchase-tray:not(.is-hidden)):not(:has(.cookie-banner, .nav-drawer.open)) *):where(:not(:disabled):not([aria-disabled="true"])) {
    border-color: var(--text-primary);
  }
  /* Tablet actions: the phone tray is hidden and compact navigation can carry the primary. */
  @media (min-width: 768px) {
    /* Local lead button: compact navigation carries the primary from tablet width. */
    .button--lead:where(:root:has(.nav-bar--compact) *):where(:not(:disabled):not([aria-disabled="true"])) {
      border-color: var(--control-border);
      background: transparent;
      color: var(--text-primary);
    }
    /* Local lead button: compact navigation leaves a readable secondary hover. */
    .button--lead:hover:where(:root:has(.nav-bar--compact) *):where(:not(:disabled):not([aria-disabled="true"])) {
      border-color: var(--text-primary);
    }
    /* Local lead button: use its own primary fill while the phone tray is hidden. */
    .button--lead:where(:root:has(.purchase-tray):not(:has(.nav-drawer.open)) *):where(:not(:disabled):not([aria-disabled="true"])) {
      border-color: var(--accent);
      background: var(--accent);
      color: var(--text-on-accent);
    }
  }
  /* Desktop navigation: retain the primary purchase action in the header. */
  @media (min-width: 1024px) {
    /* Local lead button: the visible desktop purchase action takes priority. */
    .button--lead:where(:root:has(.nav-cta) *):where(:not(:disabled):not([aria-disabled="true"])) {
      border-color: var(--control-border);
      background: transparent;
      color: var(--text-primary);
    }
    /* Local lead button: a secondary desktop action retains a clear hover boundary. */
    .button--lead:hover:where(:root:has(.nav-cta) *):where(:not(:disabled):not([aria-disabled="true"])) {
      border-color: var(--text-primary);
    }
    /* Desktop navigation: restore the transparent link row inside its header. */
    .nav-drawer {
      background: transparent;
    }
  }
  /* Split card: wide columns use a vertical boundary in place of the phone rule. */
  @media (min-width: 768px) {
    /* Card divider: the action column starts after a quiet vertical boundary. */
    .card-divider--split {
      border-block-start: 0;
      border-inline-start: var(--border-width) solid var(--border);
    }
  }
  /* Support title: final help cards retain their original compact emphasis. */
  .component-title--support {
    line-height: var(--leading-body);
    font-size: var(--font-size-subheading);
    font-weight: var(--weight-heading);
    letter-spacing: var(--tracking-display);
  }
  /* Tracked label: download card labels retain their original width and wrapping. */
  .component-label--tracked {
    letter-spacing: var(--tracking-tag);
  }
  /* Section label: plan and guide introductions keep the original wide mono tracking. */
  .component-label--section {
    letter-spacing: var(--tracking-label);
  }
  /* Inherited label: panel headings keep their surrounding reading line height. */
  .component-label--inherited {
    line-height: inherit;
  }
  /* Icon tile: capability symbols retain their original filled square frame. */
  .icon--tile {
    background: var(--accent-soft);
    border-radius: var(--radius-control);
    color: var(--accent);
  }
  /* Neutral table heading: passive plan comparisons retain subdued mono labels. */
  .table-heading--neutral {
    color: var(--faint);
    font-weight: 400;
    letter-spacing: var(--tracking-label);
    line-height: var(--leading-1-65);
  }
  /* Reading table: passive comparison text retains its original foreground. */
  .table--reading {
    color: var(--white);
  }
  /* Reading navigation: article sidebars retain ordinary body metrics and useful label width. */
  .nav-item--reading {
    letter-spacing: normal;
    line-height: var(--leading-1-65);
  }
  /* Reading banner: informational copy stays muted while explicit labels retain their accent. */
  .banner--reading {
    color: var(--muted);
    line-height: var(--leading-description);
  }
  /* Compact card: support and message panels retain their subtle edge and small original corners. */
  .card--compact {
    border-color: var(--border);
    border-radius: var(--radius-md);
  }
  /* Reading card: linked guide summaries retain their original translucent surface and quiet boundary. */
  .card--reading {
    background: var(--surface-card);
    border-color: var(--border);
  }
  /* Accent edge: information banners and contact cards retain the original left stripe. */
  .banner--edge, .card--accent {
    border-inline-start: var(--focus-width) solid var(--accent);
  }
  /* Caption link: compact guide and reading actions retain their mono label geometry. */
  .link--caption {
    font: 400 var(--font-size-min) / var(--leading-1-65) var(--mono);
    text-decoration: none;
  }
  /* Compact title: small explanatory headings retain the original body label scale. */
  .component-title--small {
    font-size: var(--font-size-min);
  }
  /* Medium text: instructional titles and informational links retain their original emphasis. */
  .component-title--medium, .link--medium {
    font-weight: var(--weight-medium);
  }
  /* Body title: step, support and capability headings retain the original ordinary reading leading. */
  .component-title:where(.component-title--step, .component-title--body) {
    line-height: var(--leading-1-65);
  }
}