/* ============================================================================
   Roofing Collective NZ — design tokens
   Source of truth: docs/09-design-system.md (v1, 2026-10-26). Direction: "B · Charcoal hero".
   Every colour here was measured against WCAG 2.2 AA; see that document, chapter 3.5, before changing a value.

   HOW TO USE
   - Load this file first in every app (public static sites, Directory Worker HTML, partner portal, admin/caller app).
   - Fonts are NOT imported here. Outfit (500, 700) and Figtree (400, 500, 600, 700) are SELF-HOSTED as woff2
     under /assets/fonts/ in every app (SIL OFL; the CSP of docs/13 SC-33 allows font-src 'self' only, docs/13 P8).
     Put this in <head>: <link rel="stylesheet" href="/assets/fonts/fonts.css">  (the @font-face file and the woff2
     files ship in packages/ui/fonts/ and are copied by each app's build; no request to fonts.googleapis.com).
   - Component classes (rc-btn, rc-input, ...) are in packages/ui/components/*.css, loaded after this file.
   - Themes: light is the default (launch). Dark applies when the OS prefers dark and no explicit choice is set,
     or when <html data-theme="dark">. <html data-theme="light"> forces light.
   - Never use a raw hex in component CSS. If a value you need is missing, add a token here and document it in 09.
   - Naming: --rc-<group>-<name>[-<variant>]. Semantic tokens (what it is for) sit on top of a small set of primitives.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- Primitives (the logo's colours and neutrals) ---------- */
  --rc-orange:        #D4552B; /* logo left slope. Non-text marks only (fails AA under text) */
  --rc-rust:          #B33A1E; /* logo right slope. Fills that carry white text */
  --rc-rust-ink:      #A83C1C; /* orange family as text or icon on light surfaces */
  --rc-charcoal:      #202020; /* logo wordmark */
  --rc-charcoal-band: #232323; /* hero / nav band, as in the logo's dark artboard */

  /* ---------- Surfaces ---------- */
  --rc-bg:            #FFFFFF; /* page */
  --rc-surface:       #FFFFFF; /* cards, inputs, modals */
  --rc-surface-2:     #F5F4F2; /* table header, hover row, secondary panels (warm, slight grey) */
  --rc-surface-3:     #ECEBE8; /* pressed row, skeleton base, disabled fill */
  --rc-band:          #232323; /* dark band: top nav on public site, homepage hero, app sidebar */
  --rc-band-fg:       #FFFFFF;
  --rc-band-muted:    #C9C7C3;
  --rc-overlay:       rgba(32, 32, 32, 0.55); /* behind modals */

  /* ---------- Text ---------- */
  --rc-text:          #202020; /* 16.3:1 on bg */
  --rc-text-muted:    #5C5B59; /* 6.8:1 on bg, 6.2:1 on surface-2: labels, helper text, captions */
  --rc-text-subtle:   #8B8A86; /* 3.5:1: placeholders and decorative icons only, never for information */
  --rc-text-on-accent:#FFFFFF;
  --rc-text-on-primary:#FFFFFF;
  --rc-text-disabled: #9C9A96;

  /* ---------- Borders and focus ---------- */
  --rc-border:        #E3E2DF; /* dividers, card edges (decorative, not a control boundary) */
  --rc-border-strong: #8B8A86; /* inputs, checkboxes, outlined buttons: 3.5:1 on bg, 3.1:1 on surface-2 */
  --rc-focus:         #A83C1C; /* focus ring, 2 px, offset 2 px */
  --rc-focus-width:   2px;
  --rc-focus-offset:  2px;

  /* ---------- Actions ---------- */
  --rc-primary:        #202020; /* default button: charcoal */
  --rc-primary-hover:  #3A3A3A;
  --rc-primary-active: #0F0F0F;
  --rc-accent:         #B33A1E; /* the ONE emphasised action per screen: buy pack, send enquiry, assign */
  --rc-accent-hover:   #9C3219;
  --rc-accent-active:  #87290F;
  --rc-accent-bright:  #D4552B; /* progress bars, selected borders, trust dots, highlighted card edge: no text on it */
  --rc-accent-ink:     #A83C1C; /* links, checkmarks, orange text */
  --rc-accent-tint:    #FBEDE8; /* light fill behind selected choice cards and accent alerts */
  --rc-link:           #A83C1C;
  --rc-link-hover:     #87290F;
  --rc-disabled-bg:    #EDECEA;
  --rc-disabled-fg:    #9C9A96;

  /* ---------- Status (shared vocabulary across all apps; never colour alone) ---------- */
  --rc-success:        #2F7A4D; --rc-success-bg: #E6F3EA; /* delivered, won, active, paid */
  --rc-warning:        #9A6400; --rc-warning-bg: #FBF3E0; /* awaiting accept, past_due, verifying */
  --rc-error:          #C5203E; --rc-error-bg:   #FDECEE; /* rejected, lost, cancelled, failed */
  --rc-info:           #2B5F8A; --rc-info-bg:    #E8F0F7; /* new, approved, assigned, contacted, quoted */
  --rc-neutral:        #5C5B59; --rc-neutral-bg: #F5F4F2; /* draft, archived, unknown */

  /* ---------- Membership tiers ---------- */
  --rc-gold:           #8A6A00; --rc-gold-bg:     #FBF3D6;
  --rc-platinum:       #3D4A5C; --rc-platinum-bg: #E9EDF2;

  /* ---------- Typography ---------- */
  --rc-font-display: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rc-font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rc-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* lead IDs, codes */

  /* Type scale (px via rem; base 16). Line-height is unitless. */
  --rc-text-2xs:  0.6875rem;--rc-leading-2xs:  1.3;  /* 11  ribbon only (09 5.6), uppercase, never body text */
  --rc-text-xs:   0.75rem;  --rc-leading-xs:   1.4;  /* 12  captions, badges */
  --rc-text-sm:   0.8125rem;--rc-leading-sm:   1.45; /* 13  table cells, helper text */
  --rc-text-md:   0.875rem; --rc-leading-md:   1.5;  /* 14  app UI default */
  --rc-text-base: 1rem;     --rc-leading-base: 1.55; /* 16  public-site body, form inputs on phone */
  --rc-text-lg:   1.125rem; --rc-leading-lg:   1.5;  /* 18  lead-in paragraph */
  --rc-text-xl:   1.25rem;  --rc-leading-xl:   1.3;  /* 20  card title, form step title */
  --rc-text-2xl:  1.5rem;   --rc-leading-2xl:  1.25; /* 24  section title (app) */
  --rc-text-3xl:  1.875rem; --rc-leading-3xl:  1.2;  /* 30  price, page title (app) */
  --rc-text-4xl:  2.25rem;  --rc-leading-4xl:  1.1;  /* 36  section title (public) */
  --rc-text-5xl:  2.75rem;  --rc-leading-5xl:  1.05; /* 44  hero (phone) */
  --rc-text-6xl:  3.5rem;   --rc-leading-6xl:  1.02; /* 56  hero (desktop) */

  --rc-tracking-display: -0.02em; /* Outfit headings */
  --rc-tracking-label:    0.08em; /* uppercase labels and eyebrows */
  --rc-weight-regular: 400; --rc-weight-medium: 500; --rc-weight-semibold: 600; --rc-weight-bold: 700;

  /* ---------- Spacing (4 px base) ---------- */
  --rc-space-0: 0;      --rc-space-1: 0.25rem; --rc-space-2: 0.5rem;  --rc-space-3: 0.75rem;
  --rc-space-4: 1rem;   --rc-space-5: 1.25rem; --rc-space-6: 1.5rem;  --rc-space-8: 2rem;
  --rc-space-10: 2.5rem;--rc-space-12: 3rem;   --rc-space-16: 4rem;   --rc-space-20: 5rem;
  --rc-gutter: max(16px, env(safe-area-inset-left, 0px)); /* page side padding, phone-safe */
  --rc-gutter-start: max(16px, env(safe-area-inset-left, 0px));  /* E14-T02: the two sides of the gutter, so a */
  --rc-gutter-end:   max(16px, env(safe-area-inset-right, 0px)); /* full-bleed band can cancel the body padding */
  --rc-content-max: 72rem;   /* 1152 px: public page content */
  --rc-prose-max:   65ch;    /* running text */
  --rc-form-max:    30rem;   /* 480 px: enquiry form and auth forms */

  /* ---------- Radii (direction B: rounded) ---------- */
  --rc-radius-sm:   6px;   /* badges, chips, small inputs */
  --rc-radius-md:   8px;   /* buttons, inputs, choice cards */
  --rc-radius-lg:   12px;  /* cards, modals, toasts */
  --rc-radius-xl:   16px;  /* hero panels, phone-width sheets */
  --rc-radius-full: 999px; /* pills, avatars */

  /* ---------- Elevation ---------- */
  --rc-shadow-sm: 0 1px 2px rgba(32, 32, 32, 0.06);
  --rc-shadow-md: 0 4px 12px rgba(32, 32, 32, 0.10);
  --rc-shadow-lg: 0 12px 32px rgba(32, 32, 32, 0.16);

  /* ---------- Sizes ---------- */
  --rc-control-sm: 2rem;     /* 32 px: table row actions */
  --rc-control-md: 2.5rem;   /* 40 px: app default */
  --rc-control-lg: 2.75rem;  /* 44 px: public site and phone: minimum touch target */
  --rc-icon-sm: 1rem; --rc-icon-md: 1.25rem; --rc-icon-lg: 1.5rem;
  --rc-sidebar-w: 15rem;     /* admin / portal sidebar */
  --rc-topbar-h:  3.5rem;
  /* Component sizes named in docs/09 chapter 5 (added by E14-T02; no new values, only names for them) */
  --rc-border-width: 1px;
  --rc-logo-h:       1.75rem; /* 28 px: lockup minimum height (09 2, 6.1) */
  --rc-check-size:   1.25rem; /* 20 px checkbox and radio (09 5.5) */
  --rc-switch-w:     2.75rem; /* 44 px switch track (09 5.5) */
  --rc-switch-h:     1.5rem;  /* 24 px */
  --rc-target-min:   1.5rem;  /* 24 px: WCAG 2.5.8 minimum for icon buttons in apps (09 5.1, 7.4) */
  --rc-chip-h:       2rem;    /* 32 px (09 5.4) */
  --rc-row-h:        2.75rem; /* 44 px table row (09 5.8) */
  --rc-bar-w:        4px;     /* toast status bar, steps bar (09 5.10, 5.11) */
  --rc-spinner:      1rem;    /* 16 px loading spinner (09 5) */
  --rc-modal-sm: 30rem; --rc-modal-md: 40rem; --rc-modal-lg: 55rem; /* 480 / 640 / 880 px (09 5.9) */
  --rc-toast-max:    24rem;   /* toast width on desktop */
  --rc-listbox-max:  18rem;   /* combobox list height before it scrolls */

  /* ---------- Motion ---------- */
  --rc-duration-fast: 120ms; --rc-duration-base: 200ms; --rc-duration-slow: 320ms;
  --rc-duration-shimmer: 1600ms; /* skeleton shimmer cycle (09 5.12), 0 under reduced motion */
  --rc-ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Layers ---------- */
  --rc-z-sticky: 10; --rc-z-dropdown: 20; --rc-z-overlay: 30; --rc-z-modal: 40; --rc-z-toast: 50;

  /* ---------- Breakpoints (for reference in JS; CSS cannot read vars in @media) ----------
     sm 480px · md 768px · lg 1024px · xl 1280px */
}

/* ============================================================================
   DARK THEME. Same semantics, measured separately (docs/09, 3.3).
   Applied when the OS prefers dark and the page has not forced light, and whenever data-theme="dark".
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --rc-bg: #161616; --rc-surface: #202020; --rc-surface-2: #2A2A2A; --rc-surface-3: #343434;
    --rc-band: #161616; --rc-band-fg: #F2F1EF; --rc-band-muted: #A9A7A3; --rc-overlay: rgba(0, 0, 0, 0.65);
    --rc-text: #F2F1EF; --rc-text-muted: #A9A7A3; --rc-text-subtle: #7E7C78; --rc-text-disabled: #6F6D69;
    --rc-text-on-primary: #202020;
    --rc-border: #353432; --rc-border-strong: #8B8A86; --rc-focus: #F08A72;
    --rc-primary: #F2F1EF; --rc-primary-hover: #DCDAD6; --rc-primary-active: #FFFFFF;
    --rc-accent: #B33A1E; --rc-accent-hover: #C94A2C; --rc-accent-active: #9C3219;
    --rc-accent-bright: #D4552B; --rc-accent-ink: #F08A72; --rc-accent-tint: #3A221C;
    --rc-link: #F08A72; --rc-link-hover: #F6A892;
    --rc-disabled-bg: #2A2A2A; --rc-disabled-fg: #6F6D69;
    --rc-success: #5FBF86; --rc-success-bg: #1C3327;
    --rc-warning: #E0B04B; --rc-warning-bg: #3A2E12;
    --rc-error:   #F27C8C; --rc-error-bg:   #3F1C22;
    --rc-info:    #7FB3E0; --rc-info-bg:    #1B2E3F;
    --rc-neutral: #A9A7A3; --rc-neutral-bg: #2A2A2A;
    --rc-gold: #E5C35A; --rc-gold-bg: #3A3112;
    --rc-platinum: #B8C4D3; --rc-platinum-bg: #283140;
    --rc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --rc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --rc-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --rc-bg: #161616; --rc-surface: #202020; --rc-surface-2: #2A2A2A; --rc-surface-3: #343434;
  --rc-band: #161616; --rc-band-fg: #F2F1EF; --rc-band-muted: #A9A7A3; --rc-overlay: rgba(0, 0, 0, 0.65);
  --rc-text: #F2F1EF; --rc-text-muted: #A9A7A3; --rc-text-subtle: #7E7C78; --rc-text-disabled: #6F6D69;
  --rc-text-on-primary: #202020;
  --rc-border: #353432; --rc-border-strong: #8B8A86; --rc-focus: #F08A72;
  --rc-primary: #F2F1EF; --rc-primary-hover: #DCDAD6; --rc-primary-active: #FFFFFF;
  --rc-accent: #B33A1E; --rc-accent-hover: #C94A2C; --rc-accent-active: #9C3219;
  --rc-accent-bright: #D4552B; --rc-accent-ink: #F08A72; --rc-accent-tint: #3A221C;
  --rc-link: #F08A72; --rc-link-hover: #F6A892;
  --rc-disabled-bg: #2A2A2A; --rc-disabled-fg: #6F6D69;
  --rc-success: #5FBF86; --rc-success-bg: #1C3327;
  --rc-warning: #E0B04B; --rc-warning-bg: #3A2E12;
  --rc-error:   #F27C8C; --rc-error-bg:   #3F1C22;
  --rc-info:    #7FB3E0; --rc-info-bg:    #1B2E3F;
  --rc-neutral: #A9A7A3; --rc-neutral-bg: #2A2A2A;
  --rc-gold: #E5C35A; --rc-gold-bg: #3A3112;
  --rc-platinum: #B8C4D3; --rc-platinum-bg: #283140;
  --rc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --rc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --rc-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* ============================================================================
   BASE RULES that every app inherits (kept minimal; components live in packages/ui/components/*.css).
   ========================================================================== */
html { font-family: var(--rc-font-body); font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--rc-bg); color: var(--rc-text);
  font-size: var(--rc-text-base); line-height: var(--rc-leading-base);
  padding-left: var(--rc-gutter-start);
  padding-right: var(--rc-gutter-end);
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--rc-font-display); font-weight: var(--rc-weight-bold); letter-spacing: var(--rc-tracking-display); text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: var(--rc-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--rc-link-hover); }
:focus-visible { outline: var(--rc-focus-width) solid var(--rc-focus); outline-offset: var(--rc-focus-offset); }
:focus:not(:focus-visible) { outline: none; }
/* Numbers that line up (prices, units, dates, phone numbers) */
.rc-num, td.rc-num, .rc-price { font-variant-numeric: tabular-nums; }
/* Uppercase labels */
.rc-label { font-size: var(--rc-text-xs); font-weight: var(--rc-weight-semibold); letter-spacing: var(--rc-tracking-label); text-transform: uppercase; color: var(--rc-text-muted); }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root { --rc-duration-fast: 0ms; --rc-duration-base: 0ms; --rc-duration-slow: 0ms; --rc-duration-shimmer: 0ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* Print: invoices and lead sheets */
@media print {
  :root { --rc-bg: #FFFFFF; --rc-text: #000000; }
  body { padding: 0; }
}
/* The rc-* component set (docs/09 chapter 5, D09-6): one stylesheet for the Astro sites, the React PWAs and the
   form snippet. Load after tokens.css; Vite and Astro inline these imports into one file at build. */
/* Shared helpers of the rc-* component set (docs/09 chapter 5, 6, 7; 14 E14-T02). Load after tokens.css.
   Icons are alpha masks painted with currentColor or a token, so no colour is ever written into an SVG. */

:root {
  --rc-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.6 2.6 8l1.1-1.1 2.5 2.5 6.1-6.1 1.1 1.1z'/%3E%3C/svg%3E");
  --rc-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 3.2 8 6.9l3.7-3.7 1.1 1.1L9.1 8l3.7 3.7-1.1 1.1L8 9.1l-3.7 3.7-1.1-1.1L6.9 8 3.2 4.3z'/%3E%3C/svg%3E");
  --rc-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1zm-.8 3.5v5h1.6v-5zm0 6.2V12h1.6v-1.3z'/%3E%3C/svg%3E");
  --rc-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1.2 15.3 14H.7zM7.2 6v4h1.6V6zm0 5v1.4h1.6V11z'/%3E%3C/svg%3E");
  --rc-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1zm-.8 3.3v1.4h1.6V4.3zm0 2.7V12h1.6V7z'/%3E%3C/svg%3E");
  --rc-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1zm3.6 4.2-4.5 4.5-2.4-2.4-1.1 1.1 3.5 3.5 5.6-5.6z'/%3E%3C/svg%3E");
  --rc-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 5.4 8 9.8l4.4-4.4 1.1 1.1L8 12 2.5 6.5z'/%3E%3C/svg%3E");
}

/* Text only screen readers get ("Loading", "Remove", sort state). */
.rc-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* First focusable element of every public page (09 7.3). */
.rc-skip-link {
  position: absolute; left: var(--rc-space-2); top: var(--rc-space-2); z-index: var(--rc-z-toast);
  transform: translateY(-200%); padding: var(--rc-space-2) var(--rc-space-4);
  background: var(--rc-surface); color: var(--rc-text); border-radius: var(--rc-radius-md); box-shadow: var(--rc-shadow-md);
}
.rc-skip-link:focus-visible { transform: none; }

/* Content column (09 6): the body already carries the gutter. */
.rc-container { width: 100%; max-width: var(--rc-content-max); margin-inline: auto; box-sizing: border-box; }
.rc-prose { max-width: var(--rc-prose-max); }

/* A band that runs edge to edge although the body has the gutter as padding (header, hero, footer). */
.rc-bleed {
  margin-left: calc(-1 * var(--rc-gutter-start)); margin-right: calc(-1 * var(--rc-gutter-end));
  padding-left: var(--rc-gutter-start); padding-right: var(--rc-gutter-end);
}

/* Theme-specific artwork (the logo lockups): shown in one theme only. */
.rc-only-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rc-only-light { display: none; }
  :root:not([data-theme="light"]) .rc-only-dark { display: revert; }
}
:root[data-theme="dark"] .rc-only-light { display: none; }
:root[data-theme="dark"] .rc-only-dark { display: revert; }

/* Mask icon: <span class="rc-icon rc-icon--error" aria-hidden="true"></span> takes the text colour. */
.rc-icon {
  display: inline-block; flex: none; width: var(--rc-icon-sm); height: var(--rc-icon-sm);
  background: currentColor; -webkit-mask: var(--rc-icon-info) center / contain no-repeat; mask: var(--rc-icon-info) center / contain no-repeat;
}
.rc-icon--check { -webkit-mask-image: var(--rc-icon-check); mask-image: var(--rc-icon-check); }
.rc-icon--close { -webkit-mask-image: var(--rc-icon-close); mask-image: var(--rc-icon-close); }
.rc-icon--error { -webkit-mask-image: var(--rc-icon-error); mask-image: var(--rc-icon-error); }
.rc-icon--warning { -webkit-mask-image: var(--rc-icon-warning); mask-image: var(--rc-icon-warning); }
.rc-icon--success { -webkit-mask-image: var(--rc-icon-success); mask-image: var(--rc-icon-success); }
.rc-icon--chevron { -webkit-mask-image: var(--rc-icon-chevron); mask-image: var(--rc-icon-chevron); }

/* 16 px loading spinner (09 5 "Loading"); the control around it carries aria-busy and a hidden "Loading". */
.rc-spinner {
  display: inline-block; flex: none; width: var(--rc-spinner); height: var(--rc-spinner); box-sizing: border-box;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--rc-radius-full);
  animation: rc-spin 800ms linear infinite;
}
@keyframes rc-spin { to { transform: rotate(360deg); } }

/* Skeleton block (09 5.12): surface-3 with a slow shimmer, still under reduced motion. */
.rc-skeleton {
  display: block; min-height: 1em; border-radius: var(--rc-radius-sm);
  background: linear-gradient(90deg, var(--rc-surface-3) 0%, var(--rc-surface-2) 50%, var(--rc-surface-3) 100%) 0 0 / 200% 100%;
  animation: rc-shimmer var(--rc-duration-shimmer) var(--rc-ease) infinite;
}
@keyframes rc-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Empty state (09 5.12, 5.8): title, one sentence, one action. */
.rc-empty { display: grid; justify-items: center; gap: var(--rc-space-3); padding: var(--rc-space-10) var(--rc-space-4); text-align: center; }
.rc-empty__title { font-family: var(--rc-font-display); font-size: var(--rc-text-xl); line-height: var(--rc-leading-xl); font-weight: var(--rc-weight-bold); }
.rc-empty__text { color: var(--rc-text-muted); max-width: var(--rc-prose-max); }

/* Avatar / initials (09 5.12). */
.rc-avatar {
  display: inline-grid; place-items: center; flex: none; width: var(--rc-control-md); height: var(--rc-control-md);
  border-radius: var(--rc-radius-full); background: var(--rc-surface-3); color: var(--rc-text);
  font-size: var(--rc-text-sm); font-weight: var(--rc-weight-semibold); text-transform: uppercase;
}

/* Price line (09 4): "$297 + GST per lead". */
.rc-price { font-family: var(--rc-font-display); font-weight: var(--rc-weight-bold); font-size: var(--rc-text-3xl); line-height: var(--rc-leading-3xl); }
.rc-price__gst { font-family: var(--rc-font-body); font-weight: var(--rc-weight-medium); font-size: var(--rc-text-sm); color: var(--rc-text-muted); }
/* Button rc-btn (docs/09 5.1). Variants: --primary (default, charcoal), --accent (rust; one per screen, 09 3.4 rule 2,
   D09-3), --secondary (alias --outline), --ghost, --danger, --on-band. Sizes: --sm 32, --md 40, --lg 44.
   Mobile first: below 768 px every button is 44 px tall (09 7.4); from 768 px the default is md (the apps), so public
   pages use --lg, which stays 44 px at every width (09 5.1 "lg 44 px (public site, phone, any touch target)"). */
.rc-btn {
  --rc-btn-bg: var(--rc-primary); --rc-btn-bg-hover: var(--rc-primary-hover); --rc-btn-bg-active: var(--rc-primary-active);
  --rc-btn-fg: var(--rc-text-on-primary); --rc-btn-border: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--rc-space-2);
  box-sizing: border-box; min-height: var(--rc-control-lg); padding: 0 var(--rc-space-4); margin: 0;
  border: var(--rc-border-width) solid var(--rc-btn-border); border-radius: var(--rc-radius-md);
  background: var(--rc-btn-bg); color: var(--rc-btn-fg);
  font: inherit; font-family: var(--rc-font-body); font-size: var(--rc-text-md); line-height: 1.2; font-weight: var(--rc-weight-semibold);
  text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color var(--rc-duration-base) var(--rc-ease), border-color var(--rc-duration-base) var(--rc-ease), color var(--rc-duration-base) var(--rc-ease);
}
.rc-btn:hover { background: var(--rc-btn-bg-hover); color: var(--rc-btn-fg); }
.rc-btn:active { background: var(--rc-btn-bg-active); transition: none; }
.rc-btn:focus-visible { outline: var(--rc-focus-width) solid var(--rc-focus); outline-offset: var(--rc-focus-offset); }

.rc-btn--accent {
  --rc-btn-bg: var(--rc-accent); --rc-btn-bg-hover: var(--rc-accent-hover); --rc-btn-bg-active: var(--rc-accent-active);
  --rc-btn-fg: var(--rc-text-on-accent);
}
.rc-btn--secondary, .rc-btn--outline {
  --rc-btn-bg: transparent; --rc-btn-bg-hover: var(--rc-surface-2); --rc-btn-bg-active: var(--rc-surface-3);
  --rc-btn-fg: var(--rc-text); --rc-btn-border: var(--rc-border-strong);
}
.rc-btn--ghost {
  --rc-btn-bg: transparent; --rc-btn-bg-hover: var(--rc-surface-2); --rc-btn-bg-active: var(--rc-surface-3);
  --rc-btn-fg: var(--rc-text);
}
.rc-btn--danger {
  --rc-btn-bg: transparent; --rc-btn-bg-hover: var(--rc-error-bg); --rc-btn-bg-active: var(--rc-error-bg);
  --rc-btn-fg: var(--rc-error); --rc-btn-border: var(--rc-error);
}
.rc-btn--on-band {
  --rc-btn-bg: transparent; --rc-btn-bg-hover: var(--rc-band-fg); --rc-btn-bg-active: var(--rc-band-muted);
  --rc-btn-fg: var(--rc-band-fg); --rc-btn-border: var(--rc-band-fg);
}
.rc-btn--on-band:hover, .rc-btn--on-band:active { color: var(--rc-band); }

.rc-btn--sm { min-height: var(--rc-control-sm); padding: 0 var(--rc-space-3); font-size: var(--rc-text-sm); }
.rc-btn--lg { min-height: var(--rc-control-lg); padding: 0 var(--rc-space-5); font-size: var(--rc-text-base); }
@media (min-width: 768px) {
  .rc-btn { min-height: var(--rc-control-md); }
  .rc-btn--sm { min-height: var(--rc-control-sm); }
  .rc-btn--lg { min-height: var(--rc-control-lg); }
}
/* Full width (09 5.1: full width on phone inside forms; --block-phone returns to auto width from 768 px). */
.rc-btn--block, .rc-btn--block-phone { display: flex; width: 100%; }
@media (min-width: 768px) { .rc-btn--block-phone { display: inline-flex; width: auto; } }
/* Icon-only: square, aria-label required; 44 px on phone, never below the 24 px target (WCAG 2.5.8). */
.rc-btn--icon { padding: 0; width: var(--rc-control-lg); min-width: var(--rc-target-min); }
@media (min-width: 768px) {
  .rc-btn--icon { width: var(--rc-control-md); }
  .rc-btn--icon.rc-btn--sm { width: var(--rc-control-sm); }
  .rc-btn--icon.rc-btn--lg { width: var(--rc-control-lg); }
}

/* Disabled and loading (09 5 shared states): keeps its size and label; loading swaps the label for a spinner. */
.rc-btn:disabled, .rc-btn[aria-disabled="true"] {
  --rc-btn-bg: var(--rc-disabled-bg); --rc-btn-bg-hover: var(--rc-disabled-bg); --rc-btn-bg-active: var(--rc-disabled-bg);
  --rc-btn-fg: var(--rc-disabled-fg); --rc-btn-border: transparent; cursor: not-allowed;
}
.rc-btn[aria-busy="true"] { position: relative; cursor: progress; }
.rc-btn[aria-busy="true"] > :not(.rc-spinner, .rc-visually-hidden) { visibility: hidden; }
.rc-btn[aria-busy="true"] > .rc-spinner { position: absolute; inset: 0; margin: auto; }
/* Form fields (docs/09 5.2 rc-input, 5.3 rc-select, 7.5): label above, control, helper or error text below.
   Inputs use 16 px text everywhere (no iOS zoom), 44 px tall on phone and 40 px from 768 px in the apps; public
   forms use --lg, which keeps 44 px at every width (09 5.2, 7.4). */
.rc-field { display: grid; gap: var(--rc-space-1); min-width: 0; }
.rc-field__label { font-size: var(--rc-text-md); line-height: var(--rc-leading-md); font-weight: var(--rc-weight-medium); color: var(--rc-text); }
.rc-field__optional { font-weight: var(--rc-weight-regular); color: var(--rc-text-muted); }
.rc-field__help { font-size: var(--rc-text-sm); line-height: var(--rc-leading-sm); color: var(--rc-text-muted); }
.rc-field__error { display: flex; gap: var(--rc-space-1); align-items: flex-start; font-size: var(--rc-text-sm); line-height: var(--rc-leading-sm); color: var(--rc-error); }
.rc-field__error::before {
  content: ""; flex: none; width: var(--rc-icon-sm); height: var(--rc-icon-sm); margin-top: 0.05em; background: currentColor;
  -webkit-mask: var(--rc-icon-error) center / contain no-repeat; mask: var(--rc-icon-error) center / contain no-repeat;
}

.rc-input, .rc-select, .rc-textarea {
  box-sizing: border-box; width: 100%; min-height: var(--rc-control-lg); margin: 0; padding: 0 var(--rc-space-3);
  border: var(--rc-border-width) solid var(--rc-border-strong); border-radius: var(--rc-radius-md);
  background: var(--rc-surface); color: var(--rc-text);
  font: inherit; font-family: var(--rc-font-body); font-size: var(--rc-text-base); line-height: var(--rc-leading-base);
  transition: border-color var(--rc-duration-base) var(--rc-ease);
}
@media (min-width: 768px) {
  .rc-input, .rc-select { min-height: var(--rc-control-md); }
  .rc-input--lg, .rc-select--lg { min-height: var(--rc-control-lg); }
}
.rc-textarea { min-height: calc(3lh + 2 * var(--rc-space-2)); padding-block: var(--rc-space-2); resize: vertical; }
.rc-input::placeholder, .rc-textarea::placeholder { color: var(--rc-text-subtle); opacity: 1; }
.rc-input:hover, .rc-select:hover, .rc-textarea:hover { border-color: var(--rc-text-muted); }
.rc-input:focus, .rc-select:focus, .rc-textarea:focus { border-color: var(--rc-focus); }
.rc-input:focus-visible, .rc-select:focus-visible, .rc-textarea:focus-visible { outline: var(--rc-focus-width) solid var(--rc-focus); outline-offset: var(--rc-focus-offset); }
.rc-input[aria-invalid="true"], .rc-select[aria-invalid="true"], .rc-textarea[aria-invalid="true"] { border-color: var(--rc-error); }
.rc-input:disabled, .rc-select:disabled, .rc-textarea:disabled {
  background: var(--rc-disabled-bg); color: var(--rc-disabled-fg); border-color: var(--rc-disabled-bg); cursor: not-allowed;
}
.rc-input[readonly], .rc-textarea[readonly] { background: var(--rc-surface-2); }
.rc-input[readonly]:hover, .rc-textarea[readonly]:hover { border-color: var(--rc-border-strong); }

/* Native select (12 options or fewer): the chevron is drawn from currentColor, no image. */
.rc-select {
  appearance: none; padding-right: calc(var(--rc-space-3) * 2 + var(--rc-icon-sm)); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - var(--rc-space-3) - 5px) 50%, calc(100% - var(--rc-space-3)) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

/* Prefix and suffix slots ("$", "+ GST"). */
.rc-input-group { display: flex; align-items: stretch; }
.rc-input-group > .rc-input { flex: 1 1 auto; min-width: 0; }
.rc-input-group__addon {
  display: inline-flex; align-items: center; padding: 0 var(--rc-space-3); background: var(--rc-surface-2); color: var(--rc-text-muted);
  border: var(--rc-border-width) solid var(--rc-border-strong); font-size: var(--rc-text-md); white-space: nowrap;
}
.rc-input-group__addon:first-child { border-right: 0; border-radius: var(--rc-radius-md) 0 0 var(--rc-radius-md); }
.rc-input-group__addon:last-child { border-left: 0; border-radius: 0 var(--rc-radius-md) var(--rc-radius-md) 0; }
.rc-input-group__addon:first-child + .rc-input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rc-input-group > .rc-input:has(+ .rc-input-group__addon) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Form layout: stacked fields at the form width (09 4). */
.rc-form { display: grid; gap: var(--rc-space-5); max-width: var(--rc-form-max); }
.rc-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--rc-space-2); }
.rc-fieldset > legend { padding: 0; margin-bottom: var(--rc-space-2); font-size: var(--rc-text-md); font-weight: var(--rc-weight-medium); }
/* Choice cards rc-choice and chips rc-chip (docs/09 5.4). A choice card is a <label> around a visually hidden
   radio (single choice) or checkbox (multiple); the whole card is the target (44 px or more). Selected: orange
   border plus a 1 px inset of the same, accent tint fill, rust-ink checkmark. */
.rc-choice-group { display: grid; gap: var(--rc-space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }

.rc-choice {
  position: relative; display: flex; align-items: flex-start; gap: var(--rc-space-3);
  box-sizing: border-box; min-height: var(--rc-control-lg); padding: var(--rc-space-3); padding-right: calc(var(--rc-space-3) * 2 + var(--rc-icon-md));
  border: var(--rc-border-width) solid var(--rc-border-strong); border-radius: var(--rc-radius-md);
  background: var(--rc-surface); color: var(--rc-text); cursor: pointer;
  transition: border-color var(--rc-duration-base) var(--rc-ease), background-color var(--rc-duration-base) var(--rc-ease);
}
.rc-choice:hover { border-color: var(--rc-text-muted); }
.rc-choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.rc-choice__body { display: grid; gap: var(--rc-space-1); min-width: 0; }
.rc-choice__title { font-size: var(--rc-text-md); line-height: var(--rc-leading-md); font-weight: var(--rc-weight-semibold); }
.rc-choice__hint { font-size: var(--rc-text-sm); line-height: var(--rc-leading-sm); color: var(--rc-text-muted); }
.rc-choice:has(.rc-choice__input:checked) {
  border-color: var(--rc-accent-bright); box-shadow: inset 0 0 0 var(--rc-border-width) var(--rc-accent-bright); background: var(--rc-accent-tint);
}
.rc-choice:has(.rc-choice__input:checked)::after {
  content: ""; position: absolute; top: var(--rc-space-3); right: var(--rc-space-3); width: var(--rc-icon-md); height: var(--rc-icon-md);
  background: var(--rc-accent-ink); -webkit-mask: var(--rc-icon-check) center / contain no-repeat; mask: var(--rc-icon-check) center / contain no-repeat;
}
.rc-choice:has(.rc-choice__input:focus-visible) { outline: var(--rc-focus-width) solid var(--rc-focus); outline-offset: var(--rc-focus-offset); }
.rc-choice:has(.rc-choice__input[aria-invalid="true"]) { border-color: var(--rc-error); }
.rc-choice:has(.rc-choice__input:disabled) { background: var(--rc-disabled-bg); color: var(--rc-disabled-fg); border-color: var(--rc-disabled-bg); cursor: not-allowed; }

/* Chips: 32 px pills in the same colours; a removable chip carries an x button with its own aria-label. */
.rc-chip-list { display: flex; flex-wrap: wrap; gap: var(--rc-space-2); padding: 0; margin: 0; list-style: none; }
.rc-chip {
  display: inline-flex; align-items: center; gap: var(--rc-space-1); box-sizing: border-box; min-height: var(--rc-chip-h);
  padding: 0 var(--rc-space-3); border: var(--rc-border-width) solid var(--rc-border-strong); border-radius: var(--rc-radius-full);
  background: var(--rc-surface); color: var(--rc-text); font: inherit; font-size: var(--rc-text-sm); font-weight: var(--rc-weight-medium);
  line-height: 1.2; white-space: nowrap;
}
button.rc-chip { cursor: pointer; }
button.rc-chip:hover { border-color: var(--rc-text-muted); }
.rc-chip--selected, .rc-chip[aria-pressed="true"] {
  border-color: var(--rc-accent-bright); box-shadow: inset 0 0 0 var(--rc-border-width) var(--rc-accent-bright); background: var(--rc-accent-tint);
}
.rc-chip:focus-visible { outline: var(--rc-focus-width) solid var(--rc-focus); outline-offset: var(--rc-focus-offset); }
.rc-chip__remove {
  display: inline-grid; place-items: center; width: var(--rc-target-min); height: var(--rc-target-min); margin-right: calc(-1 * var(--rc-space-2));
  padding: 0; border: 0; border-radius: var(--rc-radius-full); background: transparent; color: var(--rc-text-muted); cursor: pointer;
}
.rc-chip__remove::before {
  content: ""; width: var(--rc-icon-sm); height: var(--rc-icon-sm); background: currentColor;
  -webkit-mask: var(--rc-icon-close) center / contain no-repeat; mask: var(--rc-icon-close) center / contain no-repeat;
}
.rc-chip__remove:hover { background: var(--rc-surface-3); color: var(--rc-text); }
.rc-chip__remove:focus-visible { outline: var(--rc-focus-width) solid var(--rc-focus); outline-offset: 0; }
/* Checkbox, radio and switch (docs/09 5.5). 20 px box or circle, strong border, checked fill primary with the
   on-primary check; the label is clickable and the whole row is at least 44 px tall. Switch: 44 x 24 track,
   border-strong off, success on, with the state word next to it and role="switch". */
.rc-check {
  display: inline-flex; align-items: center; gap: var(--rc-space-2); min-height: var(--rc-control-lg);
  font-size: var(--rc-text-md); line-height: var(--rc-leading-md); color: var(--rc-text); cursor: pointer;
}
.rc-check__input {
  appearance: none; position: relative; flex: none; display: inline-grid; place-content: center;
  width: var(--rc-check-size); height: var(--rc-check-size); margin: 0;
  border: var(--rc-border-width) solid var(--rc-border-strong); border-radius: var(--rc-radius-sm); background: var(--rc-surface); cursor: pointer;
  transition: background-color var(--rc-duration-fast) var(--rc-ease), border-color var(--rc-duration-fast) var(--rc-ease);
}
.rc-check__input[type="radio"] { border-radius: var(--rc-radius-full); }
.rc-check__input:hover { border-color: var(--rc-text-muted); }
.rc-check__input:checked { background: var(--rc-primary); border-color: var(--rc-primary); }
.rc-check__input[type="checkbox"]:checked::before {
  content: ""; width: var(--rc-icon-sm); height: var(--rc-icon-sm); background: var(--rc-text-on-primary);
  -webkit-mask: var(--rc-icon-check) center / contain no-repeat; mask: var(--rc-icon-check) center / contain no-repeat;
}
.rc-check__input[type="radio"]:checked { box-shadow: inset 0 0 0 4px var(--rc-surface); }
.rc-check__input:focus-visible { outline: var(--rc-focus-width) solid var(--rc-focus); outline-offset: var(--rc-focus-offset); }
.rc-check__input[aria-invalid="true"] { border-color: var(--rc-error); }
.rc-check__input:disabled { background: var(--rc-disabled-bg); border-color: var(--rc-disabled-bg); cursor: not-allowed; }
.rc-check:has(.rc-check__input:disabled) { color: var(--rc-disabled-fg); cursor: not-allowed; }

.rc-switch {
  display: inline-flex; align-items: center; gap: var(--rc-space-2); min-height: var(--rc-control-lg);
  font-size: var(--rc-text-md); line-height: var(--rc-leading-md); color: var(--rc-text); cursor: pointer;
}
.rc-switch__input {
  appearance: none; position: relative; flex: none; width: var(--rc-switch-w); height: var(--rc-switch-h); margin: 0;
  border-radius: var(--rc-radius-full); background: var(--rc-border-strong); cursor: pointer;
  transition: background-color var(--rc-duration-base) var(--rc-ease);
}
.rc-switch__input::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: calc(var(--rc-switch-h) - 6px); height: calc(var(--rc-switch-h) - 6px);
  border-radius: var(--rc-radius-full); background: var(--rc-surface); box-shadow: var(--rc-shadow-sm);
  transition: transform var(--rc-duration-base) var(--rc-ease);
}
.rc-switch__input:checked { background: var(--rc-success); }
.rc-switch__input:checked::before { transform: translateX(calc(var(--rc-switch-w) - var(--rc-switch-h))); }
.rc-switch__input:focus-visible { outline: var(--rc-focus-width) solid var(--rc-focus); outline-offset: var(--rc-focus-offset); }
.rc-switch__input:disabled { background: var(--rc-disabled-bg); cursor: not-allowed; }
.rc-switch__state { min-width: 2.5em; font-weight: var(--rc-weight-medium); color: var(--rc-text-muted); }
.rc-switch__state--on { display: none; }
.rc-switch:has(.rc-switch__input:checked) .rc-switch__state--on { display: inline; }
.rc-switch:has(.rc-switch__input:checked) .rc-switch__state--off { display: none; }
/* Card rc-card (docs/09 5.6). Surface, decorative border, lg radius, small shadow; 16 px padding on phone and 20 px
   from 768 px. Variants: --highlighted (orange edge, optional rc-ribbon), --interactive (the whole card is a link),
   --stat (big number with a muted caption). Cards never nest. */
.rc-card {
  position: relative; display: flex; flex-direction: column; gap: var(--rc-space-3); box-sizing: border-box; min-width: 0;
  padding: var(--rc-space-4); background: var(--rc-surface); color: var(--rc-text);
  border: var(--rc-border-width) solid var(--rc-border); border-radius: var(--rc-radius-lg); box-shadow: var(--rc-shadow-sm);
}
@media (min-width: 768px) { .rc-card { padding: var(--rc-space-5); } }
.rc-card__title { font-family: var(--rc-font-display); font-size: var(--rc-text-xl); line-height: var(--rc-leading-xl); font-weight: var(--rc-weight-bold); }
.rc-card__body { color: var(--rc-text); }
.rc-card__footer { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--rc-space-2); }

.rc-card--highlighted { border-color: var(--rc-accent-bright); box-shadow: inset 0 0 0 var(--rc-border-width) var(--rc-accent-bright), var(--rc-shadow-sm); }

a.rc-card, .rc-card--interactive { text-decoration: none; color: var(--rc-text); transition: box-shadow var(--rc-duration-base) var(--rc-ease); }
a.rc-card:hover, .rc-card--interactive:hover { color: var(--rc-text); box-shadow: var(--rc-shadow-md); }
a.rc-card:focus-visible, .rc-card--interactive:focus-visible { outline: var(--rc-focus-width) solid var(--rc-focus); outline-offset: var(--rc-focus-offset); }

.rc-card--stat { gap: var(--rc-space-1); }
.rc-card__value { font-family: var(--rc-font-display); font-size: var(--rc-text-3xl); line-height: var(--rc-leading-3xl); font-weight: var(--rc-weight-bold); font-variant-numeric: tabular-nums; }
.rc-card__caption { font-size: var(--rc-text-sm); line-height: var(--rc-leading-sm); color: var(--rc-text-muted); }

/* Ribbon ("Most popular", Platinum): rust fill, white 11 px uppercase text. */
.rc-ribbon {
  position: absolute; top: 0; right: var(--rc-space-4); transform: translateY(-50%);
  padding: var(--rc-space-1) var(--rc-space-2); border-radius: var(--rc-radius-sm);
  background: var(--rc-accent); color: var(--rc-text-on-accent);
  font-size: var(--rc-text-2xs); line-height: var(--rc-leading-2xs); font-weight: var(--rc-weight-bold);
  letter-spacing: var(--rc-tracking-label); text-transform: uppercase;
}

.rc-card-grid { display: grid; gap: var(--rc-space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
/* Status badge rc-badge (docs/09 5.7): pill, 12 px Figtree 600, 1 px border and text in the status colour on the
   surface (--tint: on the status tint, for table rows). Always a word (09 3.4 rule 3); the vocabulary is
   packages/ui/src/badges.ts. Tones: success, warning, error, info, neutral, gold, platinum. */
.rc-badge {
  --rc-badge-fg: var(--rc-neutral); --rc-badge-bg: var(--rc-neutral-bg);
  display: inline-flex; align-items: center; gap: var(--rc-space-1); box-sizing: border-box;
  padding: 2px var(--rc-space-2); border: var(--rc-border-width) solid var(--rc-badge-fg); border-radius: var(--rc-radius-full);
  background: var(--rc-surface); color: var(--rc-badge-fg);
  font-family: var(--rc-font-body); font-size: var(--rc-text-xs); line-height: var(--rc-leading-xs); font-weight: var(--rc-weight-semibold);
  white-space: nowrap; vertical-align: middle;
}
.rc-badge--tint { background: var(--rc-badge-bg); }
.rc-badge--success { --rc-badge-fg: var(--rc-success); --rc-badge-bg: var(--rc-success-bg); }
.rc-badge--warning { --rc-badge-fg: var(--rc-warning); --rc-badge-bg: var(--rc-warning-bg); }
.rc-badge--error { --rc-badge-fg: var(--rc-error); --rc-badge-bg: var(--rc-error-bg); }
.rc-badge--info { --rc-badge-fg: var(--rc-info); --rc-badge-bg: var(--rc-info-bg); }
.rc-badge--neutral { --rc-badge-fg: var(--rc-neutral); --rc-badge-bg: var(--rc-neutral-bg); }
.rc-badge--gold { --rc-badge-fg: var(--rc-gold); --rc-badge-bg: var(--rc-gold-bg); }
.rc-badge--platinum { --rc-badge-fg: var(--rc-platinum); --rc-badge-bg: var(--rc-platinum-bg); }
.rc-badge > .rc-icon { width: var(--rc-text-xs); height: var(--rc-text-xs); }
/* Table rc-table (docs/09 5.8, D09-7). Mobile first: below 768 px every row is a card of label/value pairs, the label
   coming from each cell's data-label; from 768 px it is a table with a surface-2 header row, 44 px rows, hover and
   selected states. Numeric columns: .rc-num (right-aligned, tabular). Wide reporting tables that may scroll
   instead: .rc-table-wrap--scroll > .rc-table--scroll (keeps the table layout at every width). */
.rc-table-wrap { width: 100%; }
.rc-table { width: 100%; border-collapse: collapse; font-size: var(--rc-text-sm); line-height: var(--rc-leading-sm); color: var(--rc-text); }
.rc-table caption { text-align: left; padding-bottom: var(--rc-space-2); font-weight: var(--rc-weight-semibold); }

/* Phone: cards. */
.rc-table:not(.rc-table--scroll) thead {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.rc-table:not(.rc-table--scroll) tbody, .rc-table:not(.rc-table--scroll) tr, .rc-table:not(.rc-table--scroll) td { display: block; }
.rc-table:not(.rc-table--scroll) tbody { display: grid; gap: var(--rc-space-3); }
.rc-table:not(.rc-table--scroll) tr {
  padding: var(--rc-space-3) var(--rc-space-4); background: var(--rc-surface);
  border: var(--rc-border-width) solid var(--rc-border); border-radius: var(--rc-radius-lg); box-shadow: var(--rc-shadow-sm);
}
.rc-table:not(.rc-table--scroll) td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rc-space-3); padding: var(--rc-space-1) 0; text-align: right; }
.rc-table:not(.rc-table--scroll) td::before {
  content: attr(data-label); flex: none; text-align: left;
  font-size: var(--rc-text-xs); font-weight: var(--rc-weight-semibold); letter-spacing: var(--rc-tracking-label); text-transform: uppercase; color: var(--rc-text-muted);
}
.rc-table:not(.rc-table--scroll) td:not([data-label])::before, .rc-table:not(.rc-table--scroll) td[data-label=""]::before { content: none; }
.rc-table:not(.rc-table--scroll) td.rc-table__actions { justify-content: flex-end; flex-wrap: wrap; padding-top: var(--rc-space-2); }

/* Table layout (from 768 px, and always for --scroll). */
.rc-table th, .rc-table td { box-sizing: border-box; }
.rc-table--scroll th, .rc-table--scroll td { height: var(--rc-row-h); padding: 0 var(--rc-space-3); text-align: left; border-bottom: var(--rc-border-width) solid var(--rc-border); }
.rc-table--scroll thead th {
  background: var(--rc-surface-2); font-size: var(--rc-text-xs); font-weight: var(--rc-weight-semibold); letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase; color: var(--rc-text-muted); white-space: nowrap;
}
.rc-table-wrap--scroll { overflow-x: auto; }
@media (min-width: 768px) {
  .rc-table:not(.rc-table--scroll) thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; display: table-header-group; }
  .rc-table:not(.rc-table--scroll) tbody { display: table-row-group; }
  .rc-table:not(.rc-table--scroll) tr { display: table-row; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  /* The phone rule above (`td { padding: space-1 0 }`, specificity 0,2,1) would otherwise beat the plain
     `.rc-table td` padding below, leaving body cells without horizontal padding (14 E17-T06 review round 1). */
  .rc-table:not(.rc-table--scroll) td { display: table-cell; text-align: left; padding: 0 var(--rc-space-3); }
  .rc-table:not(.rc-table--scroll) td::before { content: none; }
  .rc-table th, .rc-table td { height: var(--rc-row-h); padding: 0 var(--rc-space-3); text-align: left; vertical-align: middle; border-bottom: var(--rc-border-width) solid var(--rc-border); }
  .rc-table thead th {
    background: var(--rc-surface-2); font-size: var(--rc-text-xs); font-weight: var(--rc-weight-semibold); letter-spacing: var(--rc-tracking-label);
    text-transform: uppercase; color: var(--rc-text-muted); white-space: nowrap;
  }
  .rc-table tbody tr:hover { background: var(--rc-surface-2); }
  .rc-table td.rc-table__actions { text-align: right; white-space: nowrap; }
  .rc-table:not(.rc-table--scroll) .rc-num { text-align: right; }
}
.rc-table .rc-num { text-align: right; font-variant-numeric: tabular-nums; }
.rc-table tr[aria-selected="true"], .rc-table tr.is-selected { background: var(--rc-accent-tint); }
.rc-table tr[aria-selected="true"]:hover, .rc-table tr.is-selected:hover { background: var(--rc-accent-tint); }

/* Sortable header: a button with the direction icon; the th carries aria-sort. */
.rc-table__sort {
  display: inline-flex; align-items: center; gap: var(--rc-space-1); min-height: var(--rc-target-min); padding: 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer;
}
.rc-table__sort::after { content: ""; width: var(--rc-icon-sm); height: var(--rc-icon-sm); background: currentColor; opacity: 0.4; -webkit-mask: var(--rc-icon-chevron) center / contain no-repeat; mask: var(--rc-icon-chevron) center / contain no-repeat; }
th[aria-sort="ascending"] .rc-table__sort::after { opacity: 1; transform: rotate(180deg); }
th[aria-sort="descending"] .rc-table__sort::after { opacity: 1; }
.rc-table__sort:focus-visible { outline: var(--rc-focus-width) solid var(--rc-focus); outline-offset: var(--rc-focus-offset); }

/* Pagination (25 rows per page, "Showing 1-25 of 132"). */
.rc-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rc-space-3); padding-top: var(--rc-space-3); font-size: var(--rc-text-sm); color: var(--rc-text-muted); }
.rc-pagination__pages { display: flex; gap: var(--rc-space-2); }
/* Modal rc-modal (docs/09 5.9) on the native <dialog> opened with showModal(): the browser traps focus, closes on
   Esc (the "cancel" event) and returns focus to the opener. Overlay token behind it; panel surface, lg radius,
   lg shadow; widths --sm 480 / --md 640 / --lg 880 px; a full-screen sheet below 480 px. */
.rc-modal {
  box-sizing: border-box; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: var(--rc-surface); color: var(--rc-text); box-shadow: var(--rc-shadow-lg);
}
.rc-modal::backdrop { background: var(--rc-overlay); }
.rc-modal[open] { display: flex; flex-direction: column; }
@media (min-width: 480px) {
  .rc-modal { width: calc(100% - 2 * var(--rc-space-4)); max-width: var(--rc-modal-sm); height: auto; max-height: calc(100% - 2 * var(--rc-space-8)); margin: auto; border-radius: var(--rc-radius-lg); }
  .rc-modal--md { max-width: var(--rc-modal-md); }
  .rc-modal--lg { max-width: var(--rc-modal-lg); }
}
.rc-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rc-space-3); padding: var(--rc-space-5) var(--rc-space-5) 0; }
.rc-modal__title { font-family: var(--rc-font-display); font-size: var(--rc-text-xl); line-height: var(--rc-leading-xl); font-weight: var(--rc-weight-bold); }
.rc-modal__close { margin: calc(-1 * var(--rc-space-2)) calc(-1 * var(--rc-space-2)) 0 0; }
.rc-modal__body { flex: 1 1 auto; overflow-y: auto; padding: var(--rc-space-4) var(--rc-space-5); display: grid; gap: var(--rc-space-4); align-content: start; }
.rc-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--rc-space-2); padding: 0 var(--rc-space-5) var(--rc-space-5); }
/* Toast rc-toast (docs/09 5.10): bottom-centre on phone, bottom-right from 768 px, stacked, at most 3. Surface fill,
   4 px status bar on the left, icon, one sentence, optional action, close button. role="status" for success and
   info, role="alert" for errors (set by the caller or packages/ui/react/Toast). */
.rc-toast-region {
  position: fixed; z-index: var(--rc-z-toast); left: var(--rc-gutter-start); right: var(--rc-gutter-end); bottom: var(--rc-space-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--rc-space-2); pointer-events: none;
}
@media (min-width: 768px) { .rc-toast-region { left: auto; align-items: flex-end; width: var(--rc-toast-max); } }
.rc-toast {
  --rc-toast-tone: var(--rc-info);
  box-sizing: border-box; width: 100%; max-width: var(--rc-toast-max); pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--rc-space-3); padding: var(--rc-space-3) var(--rc-space-3) var(--rc-space-3) var(--rc-space-4);
  background: var(--rc-surface); color: var(--rc-text); border: var(--rc-border-width) solid var(--rc-border);
  border-left: var(--rc-bar-w) solid var(--rc-toast-tone); border-radius: var(--rc-radius-lg); box-shadow: var(--rc-shadow-md);
  font-size: var(--rc-text-md); line-height: var(--rc-leading-md);
}
.rc-toast::before {
  content: ""; flex: none; width: var(--rc-icon-md); height: var(--rc-icon-md); background: var(--rc-toast-tone);
  -webkit-mask: var(--rc-icon-info) center / contain no-repeat; mask: var(--rc-icon-info) center / contain no-repeat;
}
.rc-toast--success { --rc-toast-tone: var(--rc-success); }
.rc-toast--success::before { -webkit-mask-image: var(--rc-icon-success); mask-image: var(--rc-icon-success); }
.rc-toast--warning { --rc-toast-tone: var(--rc-warning); }
.rc-toast--warning::before { -webkit-mask-image: var(--rc-icon-warning); mask-image: var(--rc-icon-warning); }
.rc-toast--error { --rc-toast-tone: var(--rc-error); }
.rc-toast--error::before { -webkit-mask-image: var(--rc-icon-error); mask-image: var(--rc-icon-error); }
.rc-toast__message { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.rc-toast__action { margin-left: var(--rc-space-1); font-weight: var(--rc-weight-semibold); }
.rc-toast__close { margin: calc(-1 * var(--rc-space-1)) calc(-1 * var(--rc-space-1)) 0 0; }
/* Progress steps rc-steps (docs/09 5.11). Phone: a segmented bar (4 px, done and current in accent-bright, upcoming
   in border) with "Step 2 of 4" (.rc-steps__count). From 768 px: numbered circles joined by a line with labels
   under them. The current step carries aria-current="step"; done steps are links back, upcoming ones are text. */
.rc-steps { display: grid; gap: var(--rc-space-2); }
.rc-steps__count { font-size: var(--rc-text-sm); line-height: var(--rc-leading-sm); color: var(--rc-text-muted); font-weight: var(--rc-weight-medium); }
.rc-steps__list { display: flex; gap: var(--rc-space-1); padding: 0; margin: 0; list-style: none; counter-reset: rc-step; }
.rc-steps__item { flex: 1 1 0; min-width: 0; height: var(--rc-bar-w); border-radius: 2px; background: var(--rc-border); counter-increment: rc-step; }
.rc-steps__item--done, .rc-steps__item[aria-current="step"] { background: var(--rc-accent-bright); }
/* On phone the labels are read by screen readers only; the count above says where you are. */
.rc-steps__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (min-width: 768px) {
  .rc-steps__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .rc-steps__list { gap: 0; }
  .rc-steps__item { position: relative; height: auto; background: none; display: flex; flex-direction: column; align-items: center; gap: var(--rc-space-2); text-align: center; }
  .rc-steps__item--done, .rc-steps__item[aria-current="step"] { background: none; }
  .rc-steps__item::before {
    content: counter(rc-step); position: relative; z-index: 1; display: grid; place-items: center; box-sizing: border-box;
    width: var(--rc-control-sm); height: var(--rc-control-sm); border-radius: var(--rc-radius-full);
    border: 2px solid var(--rc-border-strong); background: var(--rc-surface); color: var(--rc-text-muted);
    font-size: var(--rc-text-sm); font-weight: var(--rc-weight-semibold);
  }
  .rc-steps__item:not(:first-child)::after {
    content: ""; position: absolute; top: calc(var(--rc-control-sm) / 2 - 1px); right: 50%; width: 100%; height: 2px; background: var(--rc-border);
  }
  .rc-steps__item--done::before { border-color: var(--rc-primary); background: var(--rc-primary); color: var(--rc-text-on-primary); }
  .rc-steps__item[aria-current="step"]::before { border-color: var(--rc-accent-bright); color: var(--rc-text); }
  .rc-steps__item--done::after, .rc-steps__item[aria-current="step"]::after { background: var(--rc-accent-bright); }
  .rc-steps__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; font-size: var(--rc-text-sm); line-height: var(--rc-leading-sm); color: var(--rc-text-muted); }
  .rc-steps__item[aria-current="step"] .rc-steps__label { color: var(--rc-text); font-weight: var(--rc-weight-semibold); }
}
.rc-steps__link { color: inherit; }
/* Alert / banner rc-alert (docs/09 5.12): status tint, icon, title, text. Used for "Membership payment overdue" at
   the top of the portal and for form-level errors (role="alert"); a status is never colour alone (09 3.4 rule 3). */
.rc-alert {
  --rc-alert-fg: var(--rc-info); --rc-alert-bg: var(--rc-info-bg);
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--rc-space-3); row-gap: var(--rc-space-1); align-items: start;
  padding: var(--rc-space-3) var(--rc-space-4); border: var(--rc-border-width) solid var(--rc-alert-fg); border-radius: var(--rc-radius-md);
  background: var(--rc-alert-bg); color: var(--rc-text); font-size: var(--rc-text-md); line-height: var(--rc-leading-md);
}
.rc-alert::before {
  content: ""; grid-row: 1 / span 3; width: var(--rc-icon-md); height: var(--rc-icon-md); margin-top: 1px; background: var(--rc-alert-fg);
  -webkit-mask: var(--rc-icon-info) center / contain no-repeat; mask: var(--rc-icon-info) center / contain no-repeat;
}
.rc-alert__title { font-weight: var(--rc-weight-semibold); color: var(--rc-alert-fg); }
.rc-alert__body { color: var(--rc-text); }
.rc-alert__actions { display: flex; flex-wrap: wrap; gap: var(--rc-space-2); padding-top: var(--rc-space-1); }
.rc-alert--success { --rc-alert-fg: var(--rc-success); --rc-alert-bg: var(--rc-success-bg); }
.rc-alert--success::before { -webkit-mask-image: var(--rc-icon-success); mask-image: var(--rc-icon-success); }
.rc-alert--warning { --rc-alert-fg: var(--rc-warning); --rc-alert-bg: var(--rc-warning-bg); }
.rc-alert--warning::before { -webkit-mask-image: var(--rc-icon-warning); mask-image: var(--rc-icon-warning); }
.rc-alert--error { --rc-alert-fg: var(--rc-error); --rc-alert-bg: var(--rc-error-bg); }
.rc-alert--error::before { -webkit-mask-image: var(--rc-icon-error); mask-image: var(--rc-icon-error); }
.rc-alert--accent { --rc-alert-fg: var(--rc-accent-ink); --rc-alert-bg: var(--rc-accent-tint); }
/* Tabs rc-tabs (docs/09 5.12): underline style with the accent-bright indicator; role="tablist" / "tab" /
   "tabpanel" with a roving tab index, which the app that uses them supplies (first used by the caller's Today page,
   14 E17-T01). `overflow-x: auto` alone makes the row scroll vertically too, so the indicator sits inside the row. */
.rc-tabs { display: flex; gap: var(--rc-space-1); border-bottom: var(--rc-border-width) solid var(--rc-border); overflow-x: auto; overflow-y: hidden; }
.rc-tabs__tab {
  position: relative; min-height: var(--rc-control-lg); padding: 0 var(--rc-space-3); border: 0; background: none;
  font: inherit; font-size: var(--rc-text-md); font-weight: var(--rc-weight-medium); color: var(--rc-text-muted); white-space: nowrap; cursor: pointer;
}
.rc-tabs__tab:hover { color: var(--rc-text); }
.rc-tabs__tab[aria-selected="true"] { color: var(--rc-text); font-weight: var(--rc-weight-semibold); }
.rc-tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--rc-accent-bright); }
.rc-tabs__tab:focus-visible { outline: var(--rc-focus-width) solid var(--rc-focus); outline-offset: calc(-1 * var(--rc-focus-width)); }
.rc-tabs__panel { padding-top: var(--rc-space-4); }
/* Combobox rc-combobox (docs/09 5.3): for more than 12 options or a searchable list (suburbs, services, partners).
   An rc-input with role="combobox", aria-expanded, aria-controls and aria-activedescendant over a role="listbox";
   the active option carries .is-active (keyboard ArrowUp/ArrowDown/Enter/Escape), a chosen one aria-selected="true".
   Multi-select shows the chosen items as removable rc-chips with the tier limit ("3 of 6 suburbs"). */
.rc-combobox { position: relative; display: grid; gap: var(--rc-space-2); }
.rc-combobox__control { position: relative; }
.rc-combobox__control > .rc-input { padding-right: calc(var(--rc-space-3) * 2 + var(--rc-icon-sm)); }
.rc-combobox__control::after {
  content: ""; position: absolute; top: 50%; right: var(--rc-space-3); width: var(--rc-icon-sm); height: var(--rc-icon-sm); transform: translateY(-50%);
  background: var(--rc-text-muted); pointer-events: none; -webkit-mask: var(--rc-icon-chevron) center / contain no-repeat; mask: var(--rc-icon-chevron) center / contain no-repeat;
}
.rc-combobox__listbox {
  position: absolute; z-index: var(--rc-z-dropdown); top: 100%; left: 0; right: 0; margin: var(--rc-space-1) 0 0; padding: var(--rc-space-1);
  max-height: var(--rc-listbox-max); overflow-y: auto; list-style: none;
  background: var(--rc-surface); border: var(--rc-border-width) solid var(--rc-border); border-radius: var(--rc-radius-md); box-shadow: var(--rc-shadow-md);
}
.rc-combobox__listbox[hidden] { display: none; }
.rc-combobox__option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--rc-space-2); min-height: var(--rc-control-md);
  padding: 0 var(--rc-space-3); border-radius: var(--rc-radius-sm); font-size: var(--rc-text-base); color: var(--rc-text); cursor: pointer;
}
.rc-combobox__option:hover, .rc-combobox__option.is-active { background: var(--rc-surface-2); }
.rc-combobox__option.is-active { box-shadow: inset 0 0 0 var(--rc-focus-width) var(--rc-focus); }
.rc-combobox__option[aria-selected="true"]::after {
  content: ""; flex: none; width: var(--rc-icon-sm); height: var(--rc-icon-sm); background: var(--rc-accent-ink);
  -webkit-mask: var(--rc-icon-check) center / contain no-repeat; mask: var(--rc-icon-check) center / contain no-repeat;
}
.rc-combobox__option[aria-disabled="true"] { color: var(--rc-disabled-fg); cursor: not-allowed; }
.rc-combobox__empty { padding: var(--rc-space-3); font-size: var(--rc-text-sm); color: var(--rc-text-muted); }
.rc-combobox__limit { font-size: var(--rc-text-sm); color: var(--rc-text-muted); }
/* Public shell (docs/09 5.12 "Public shell", 6, 6.1): the charcoal top band with the lockup, nav, the site phone and
   the header CTA (packages/ui/astro/Header.astro), and the footer on surface-2 (Footer.astro). Both run edge to edge
   (.rc-bleed) while their content keeps the content width.
   ASSUMPTION(docs-gap): 09 6 collapses the nav at 768 px; with four links, the phone number and the CTA the band
   does not fit at 768 px, so below 1024 px the links sit in the Menu disclosure and from 768 px the phone and CTA
   stay in the band. */
.rc-site-header { position: relative; z-index: var(--rc-z-sticky); background: var(--rc-band); color: var(--rc-band-fg); }
.rc-site-header__inner { display: flex; align-items: center; gap: var(--rc-space-4); min-height: var(--rc-topbar-h); padding-block: var(--rc-space-2); }
.rc-site-header__brand { display: inline-flex; flex: none; align-items: center; min-height: var(--rc-control-lg); margin-right: auto; }
.rc-site-header__brand img { display: block; height: var(--rc-logo-h); width: auto; }
/* Satellite text brand (05 A71): the site's public_name in the display face instead of the main site's lockup. */
.rc-site-header__brand-text, .rc-site-footer__brand-text { font-family: var(--rc-font-display); font-weight: var(--rc-weight-bold); letter-spacing: var(--rc-tracking-display); font-size: var(--rc-text-xl); line-height: var(--rc-leading-xl); }
.rc-site-header a:not(.rc-btn) { color: var(--rc-band-fg); text-decoration: none; }
.rc-site-header a:not(.rc-btn):hover { color: var(--rc-band-fg); text-decoration: underline; }
.rc-site-header :focus-visible { outline-color: var(--rc-band-fg); }

.rc-site-nav ul { display: flex; gap: var(--rc-space-1); padding: 0; margin: 0; list-style: none; }
.rc-site-nav a { display: inline-flex; align-items: center; min-height: var(--rc-control-lg); padding: 0 var(--rc-space-3); font-weight: var(--rc-weight-medium); }
.rc-site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--rc-accent-bright); text-decoration-thickness: 3px; text-underline-offset: 0.4em; }
.rc-site-nav--wide { display: none; }
.rc-site-header__actions { display: none; align-items: center; gap: var(--rc-space-4); }
.rc-site-header__phone { display: inline-flex; align-items: center; min-height: var(--rc-control-lg); font-weight: var(--rc-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The Menu disclosure (no script): holds the links below 1024 px, and the phone and CTA below 768 px. */
.rc-site-menu { flex: none; }
.rc-site-menu > summary { list-style: none; }
.rc-site-menu > summary::-webkit-details-marker { display: none; }
.rc-site-menu__panel {
  position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: var(--rc-space-3);
  padding: var(--rc-space-3) var(--rc-gutter-end) var(--rc-space-5) var(--rc-gutter-start);
  background: var(--rc-band); border-top: var(--rc-border-width) solid var(--rc-band-muted); box-shadow: var(--rc-shadow-md);
}
.rc-site-menu__panel .rc-site-nav ul { flex-direction: column; gap: 0; }
.rc-site-menu__panel .rc-site-nav a { display: flex; padding: 0; }
.rc-site-menu__panel .rc-site-header__phone { min-height: var(--rc-control-lg); }
@media (min-width: 768px) {
  .rc-site-header__actions { display: flex; }
  .rc-site-menu__contact { display: none; }
}
@media (min-width: 1024px) {
  .rc-site-nav--wide { display: block; }
  .rc-site-menu { display: none; }
}

/* Main column and page title. */
.rc-main { display: block; padding-block: var(--rc-space-8) var(--rc-space-16); }
.rc-main:focus { outline: none; }
.rc-page-title { font-size: var(--rc-text-4xl); line-height: var(--rc-leading-4xl); margin-bottom: var(--rc-space-6); }
.rc-section { padding-block: var(--rc-space-12); }
@media (min-width: 1024px) { .rc-section { padding-block: var(--rc-space-20); } }

/* Footer: surface-2, lockup, links, the sender identification lines (13 EM-02 shape; 04 D26 footer.* keys). */
.rc-site-footer { background: var(--rc-surface-2); color: var(--rc-text); padding-block: var(--rc-space-10); font-size: var(--rc-text-sm); line-height: var(--rc-leading-sm); }
.rc-site-footer__inner { display: grid; gap: var(--rc-space-8); }
@media (min-width: 768px) { .rc-site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rc-site-footer__brand img { display: block; height: var(--rc-logo-h); width: auto; }
.rc-site-footer__identity { display: grid; gap: var(--rc-space-2); align-content: start; }
.rc-site-footer__identity p, .rc-site-footer__identity address { margin: 0; font-style: normal; color: var(--rc-text-muted); }
.rc-site-footer__identity .rc-site-footer__entity { color: var(--rc-text); font-weight: var(--rc-weight-semibold); }
.rc-site-footer__note { max-width: var(--rc-prose-max); }
.rc-site-footer__links ul { display: flex; flex-wrap: wrap; gap: 0 var(--rc-space-5); padding: 0; margin: 0; list-style: none; }
.rc-site-footer__links a { display: inline-flex; align-items: center; min-height: var(--rc-control-lg); color: var(--rc-text); }
.rc-site-footer__contact a { display: inline-flex; align-items: center; min-height: var(--rc-target-min); }
.rc-site-footer__sub { grid-column: 1 / -1; color: var(--rc-text-muted); }