/* ==========================================================================
   stead.css — the Stead design system
   ==========================================================================

   Source of truth for the Stead product surfaces: the public marketing site,
   the account funnel, the signed-in dashboard, and the admin console. Author
   themes (theme_packages/) are a separate, author-owned surface and never load
   this file.

   The palette, type, and components below are derived from the approved
   deadline-focused homepage (templates/landing.html). That page remains the public visual
   contract. The scoped editorial workspace follows the approved reference in
   notes/design/editorial-workspace-reference.png without restyling that page.

   Reading order
     1. tokens      design decisions as custom properties
     2. reset       predictable box model and form controls
     3. base        element defaults and focus behaviour
     4. layout      page shell, flow, and responsive grids
     5. components  the named parts pages are built from
     6. utilities   single-purpose helpers
     7. pages       page stylesheets extend the system here

   Two rules make the rollout safe:

   * Everything lives in a cascade layer. Unlayered CSS always beats layered
     CSS, so any stylesheet that has not migrated yet keeps overriding the
     system. Properties an old sheet does not declare can still change, so each page
     needs visual review when this file is added. Migration is incremental
     and reversible, one page at a time.

   * Page stylesheets extend `@layer pages` and are allowed to compose, not to
     redefine. A component that needs different values in two places takes a
     custom property (`--button-radius`), not a competing selector.

   Browser baseline: Cascade Layers, `:has()`, and `clamp()` are required, which
   matches what the billing-cadence toggle already required. Colour is authored
   in OKLCH with a hex fallback declared first, so a browser without OKLCH
   support keeps the exact sRGB brand value.

   Colour changes are measured, not eyeballed. Every text/background pair used
   by a component is checked at WCAG AA (4.5:1 for text, 3:1 for focus rings and
   other non-text indicators) by tests/test_design_system.py. When you add a
   pair, add it there.

   Type is a system-font stack on purpose. The homepage proved the design works
   without a webfont, and the whole site drops three render-blocking Google
   Fonts requests when the last Fraunces/DM Sans caller is migrated.
   ========================================================================== */

@layer tokens, reset, base, layout, components, utilities, pages;

@layer tokens {
  :root {
    color-scheme: light;

    /* --- palette -------------------------------------------------------
       Tier one. Raw values with no meaning attached. Components use the
       semantic names below unless they are authoring a new component. */

    --paper: #fffdfb;
    --paper: oklch(99.5% 0.0034 67.8);
    --paper-warm: #fff9ec;
    --paper-warm: oklch(98.32% 0.0183 86.1);
    --white: #fff;
    --white: oklch(100% 0 0);

    /* Brand plum: the one conversion family. */
    --plum-50: #f4effa;
    --plum-50: oklch(95.92% 0.0155 306.4);
    --plum-100: #efe8f5;
    --plum-100: oklch(94.02% 0.0188 309.8);
    --plum-200: #e2dce7;
    --plum-200: oklch(90.24% 0.0161 310.1);
    --plum-250: #e7dfee;
    --plum-250: oklch(91.44% 0.0219 309.5);
    --plum-300: #eee6f2;
    --plum-300: oklch(93.47% 0.0181 314.7);
    --plum-500: #963e75;
    --plum-500: oklch(49.99% 0.1348 344.6);
    --plum-600: #693ba5;
    --plum-600: oklch(46.39% 0.1638 300);
    --plum-700: #532985;
    --plum-700: oklch(38.83% 0.1468 300.6);
    --plum-800: #422c59;
    --plum-800: oklch(34.1% 0.08 305.1);
    --plum-900: #32253e;
    --plum-900: oklch(29.12% 0.0475 307.5);

    /* Reading text that is not the heading colour. */
    --ink-soft: #66596c;
    --ink-soft: oklch(48.34% 0.0339 315.2);
    --ink-faint: #6f6076;
    --ink-faint: oklch(51.13% 0.0387 315.1);

    /* Clay: the warm emphasis and the stage colour. */
    --clay-300: #f1a48e;
    --clay-300: oklch(78.84% 0.0972 36.6);
    --clay-500: #bc443b;
    --clay-500: oklch(55.13% 0.1565 27.6);
    --clay-700: #682b29;
    --clay-700: oklch(37.46% 0.0883 24.2);
    --clay-800: #9b3d2c;
    --clay-800: oklch(48.61% 0.1296 32.3);
    --rose-100: #ffe1db;
    --rose-100: oklch(93.27% 0.0343 31.2);
    --rose-200: #f7d6d1;
    --rose-200: oklch(90.23% 0.0377 28);
    --rose-300: #f3d7e2;
    --rose-300: oklch(90.54% 0.0341 352.1);
    --rose-700: #8a4f45;
    --rose-700: oklch(49.42% 0.0817 30.5);
    --rose-800: #884969;
    --rose-800: oklch(49.17% 0.0945 349.4);

    /* Amber: the action colour on dark panels and the closing band. */
    --amber-050: #fdf1d6;
    --amber-050: oklch(96.06% 0.0376 86.9);
    --amber-200: #f9df9c;
    --amber-200: oklch(90.98% 0.0894 89.2);
    --amber-300: #f3c66b;
    --amber-300: oklch(84.79% 0.1208 83.4);
    --amber-400: #f3bd51;
    --amber-400: oklch(82.77% 0.1378 81.9);
    --amber-800: #715014;
    --amber-800: oklch(45.6% 0.0855 77.7);
    --amber-900: #7d5210;
    --amber-900: oklch(47.53% 0.0951 71.7);
    --sand-200: #f9e6ab;
    --sand-200: oklch(92.64% 0.0782 92.3);
    --sand-700: #776344;
    --sand-700: oklch(51.13% 0.052 78.1);

    /* Sage: growth, readers, anything that succeeded. */
    --sage-050: #e3f0e6;
    --sage-050: oklch(94.26% 0.0191 152.8);
    --sage-100: #dce9d6;
    --sage-100: oklch(91.91% 0.0289 135.6);
    --sage-200: #dcebdd;
    --sage-200: oklch(92.5% 0.0246 147.3);
    --sage-700: #486a4e;
    --sage-700: oklch(48.98% 0.0594 149.3);
    --sage-800: #2c6647;
    --sage-800: oklch(46.22% 0.0798 157.7);

    /* --- semantic colour ------------------------------------------------
       Tier two. This is what components and pages read. A dark surface
       re-points these rather than restyling its children. */

    --page: var(--paper);
    --page-alt: #f2edf7;
    --page-alt: oklch(95.28% 0.0143 308.3);
    --page-warm: var(--paper-warm);

    --surface: var(--white);
    --surface-sunken: var(--plum-50);
    --surface-warm: var(--paper-warm);
    --surface-wash: var(--plum-100);
    --surface-night: var(--plum-800);
    --surface-brand: var(--plum-600);

    --text: var(--plum-900);
    --text-muted: var(--ink-soft);
    --text-faint: var(--ink-faint);
    --text-on-brand: var(--white);
    --text-on-brand-muted: #e6d9f2;
    --text-on-brand-muted: oklch(90.32% 0.0364 308.8);
    --text-on-night: #ddd0e7;
    --text-on-night: oklch(87.5% 0.0342 310.7);
    --text-on-night-muted: #c1a9ce;
    --text-on-night-muted: oklch(76.75% 0.0582 313.7);
    /* Text on the amber band and the amber button. The homepage's own values
       measured 3.6:1 and 4.0:1 there, so the muted pair is darkened until it
       clears AA. */
    --text-on-amber: #4c3529;
    --text-on-amber: oklch(35.2% 0.0389 48.6);
    --text-on-amber-muted: #684226;
    --text-on-amber-muted: oklch(41.67% 0.0672 56);

    --border: var(--plum-200);
    --border-soft: var(--plum-300);
    --border-input: #c9bbae;
    --border-night: #786187;
    --border-night: oklch(52.94% 0.0643 311.7);

    --brand: var(--plum-600);
    --brand-deep: var(--plum-700);
    --brand-wash: var(--plum-100);
    --brand-ink: #563078;
    --brand-ink: oklch(39.27% 0.1209 305.9);
    --brand-ring: #d9c9ec;
    --brand-ring: oklch(85.99% 0.0507 306);

    --accent-clay: var(--clay-300);
    --accent-clay-ink: var(--clay-700);
    --accent-amber: var(--amber-300);
    --accent-amber-deep: var(--amber-400);
    --accent-amber-ink: var(--amber-800);
    --accent-sand: var(--sand-200);
    --accent-sand-ink: var(--sand-700);
    --accent-rose: var(--rose-200);
    --accent-rose-ink: var(--rose-700);
    --accent-sage: var(--sage-100);
    --accent-sage-deep: var(--sage-200);
    --accent-sage-ink: var(--sage-700);

    --danger: var(--clay-800);
    --danger-wash: var(--rose-100);
    --success: var(--sage-800);
    --success-wash: var(--sage-050);
    --warning: var(--amber-900);
    --warning-wash: var(--amber-050);

    /* Focus is a two-value decision, not one: a warm ring dark enough for pale
       surfaces measures 1.7:1 on brand purple, so dark surfaces re-point it.
       The amber closing band uses brand purple instead of the warm ring. */
    --focus: #b3641a;
    --focus: oklch(58.25% 0.13 57.4);
    --focus-on-dark: #ffd479;
    --focus-on-dark: oklch(88.84% 0.1199 84.7);
    --focus-width: 3px;
    --focus-offset: 3px;

    /* --- type ----------------------------------------------------------
       Display is Georgia: a system serif with a real italic, which is where
       the brand voice lives. Everything else is the platform UI font, so no
       page pays for a font download. */

    --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
      Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
      "Liberation Mono", monospace;

    --text-2xs: 0.6875rem; /* 11px  mono labels, table meta */
    --text-xs: 0.75rem; /* 12px  eyebrow, price note */
    --text-sm: 0.8125rem; /* 13px  micro copy, small print */
    --text-md: 0.875rem; /* 14px  nav, buttons, form labels */
    --text-ui: 0.9375rem; /* 15px  dense application body */
    --text-body: clamp(1rem, 0.979rem + 0.09vw, 1.0625rem); /* 16 → 17px */
    --text-lg: clamp(1.0625rem, 1.021rem + 0.19vw, 1.125rem); /* 17 → 18px */
    --text-xl: 1.25rem; /* 20px */
    --text-2xl: 1.5rem; /* 24px */
    --text-3xl: clamp(1.375rem, 1.25rem + 0.56vw, 1.75rem); /* 22 → 28px */
    --text-4xl: clamp(2rem, 1.583rem + 1.85vw, 3.25rem); /* 32 → 52px */
    --text-5xl: clamp(2.5rem, 1.979rem + 2.31vw, 4.0625rem); /* 40 → 65px */
    --text-6xl: clamp(3.75rem, 3.208rem + 2.41vw, 5.375rem); /* 60 → 86px */
    --text-price: clamp(2.5rem, 2.333rem + 0.74vw, 3rem); /* 40 → 48px */

    --leading-display: 1.02;
    --leading-heading: 1.1;
    --leading-body: 1.6;
    --leading-ui: 1.5;
    --leading-label: 1.2;

    --tracking-display: -0.035em;
    --tracking-heading: -0.018em;
    --tracking-label: 0.13em;
    --tracking-tight: -0.01em;

    --weight-display: 500;
    --weight-strong: 700;

    /* --- space ---------------------------------------------------------
       A 4px base with a fluid section rhythm. Use the scale instead of
       inventing one-off paddings; that is what keeps unrelated pages
       looking related. */

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.375rem;
    --space-6: 1.75rem;
    --space-7: 2.5rem;
    --space-8: 3.5rem;
    --space-9: 5rem;
    --section-y: clamp(3.75rem, 3.125rem + 2.78vw, 5.625rem); /* 60 → 90px */
    --gutter: clamp(1.25rem, 0.833rem + 1.85vw, 2.5rem); /* 20 → 40px */

    --shell-max: 77.5rem; /* 1240px marketing */
    --shell-narrow: 65rem; /* 1040px application */
    --reading-max: 47.5rem; /* 760px */

    /* --- radius --------------------------------------------------------
       The pill is the strongest shape signal in the brand; controls get it,
       containers get a soft rectangle. */

    --radius-xs: 0.25rem;
    --radius-sm: 0.4375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1.125rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999px;
    --radius-control: var(--radius-pill);
    --radius-card: var(--radius-lg);

    /* --- elevation -----------------------------------------------------
       Soft and plum-tinted. The old hard offset slab shadow is gone with the
       old brand. */

    --shadow-xs: 0 1px 2px rgb(50 37 62 / 5%);
    --shadow-sm: 0 0.5rem 1.25rem rgb(60 33 74 / 6%);
    --shadow-md: 0 0.75rem 2rem rgb(102 53 129 / 8%);
    --shadow-lg: 0 1.125rem 2.5rem rgb(102 53 129 / 14%);
    --shadow-brand: 0 0.75rem 2rem rgb(102 53 129 / 15%);

    /* --- motion --------------------------------------------------------
       Short, decisive, and off by default for anyone who asks. */

    --ease: cubic-bezier(0.2, 0.8, 0.25, 1);
    --duration-fast: 140ms;
    --duration: 180ms;
    --duration-slow: 260ms;

    --z-header: 20;
    --z-overlay: 40;
    --z-dialog: 60;
    --z-toast: 80;
  }

  /* Dark and brand scopes re-point the semantic tokens, so every descendant
     (including focus rings and borders) follows without a special case. */
  .surface-night,
  .is-night {
    color-scheme: dark;
    --surface: rgb(255 255 255 / 7%);
    --surface-sunken: rgb(0 0 0 / 18%);
    --text: var(--text-on-night);
    --text-muted: var(--text-on-night-muted);
    --text-faint: var(--text-on-night-muted);
    --border: var(--border-night);
    --border-soft: var(--border-night);
    --focus: var(--focus-on-dark);
  }

  .surface-brand,
  .is-brand {
    --surface: rgb(255 255 255 / 12%);
    --surface-sunken: rgb(0 0 0 / 12%);
    --text: var(--text-on-brand);
    --text-muted: var(--text-on-brand-muted);
    --text-faint: var(--text-on-brand-muted);
    --border: rgb(255 255 255 / 28%);
    --border-soft: rgb(255 255 255 / 18%);
    --focus: var(--focus-on-dark);
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  :where(img, svg, video, canvas) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  :where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
  }

  :where(button) {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  :where(summary) {
    cursor: pointer;
  }

  :where(summary)::marker,
  :where(summary)::-webkit-details-marker {
    content: "";
    display: none;
  }

  :where(fieldset) {
    margin: 0;
    padding: 0;
    border: 0;
  }

  :where([hidden]) {
    display: none !important;
  }
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: 6rem;
  }

  body {
    margin: 0;
    color: var(--text);
    background: var(--page);
    font-family: var(--sans);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1,
  h2,
  h3,
  h4 {
    margin: 0;
    color: inherit;
    font-family: var(--serif);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-heading);
    line-height: var(--leading-heading);
  }

  h1 {
    font-size: var(--text-5xl);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
  }

  h2 {
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-display);
    line-height: 1.08;
  }

  h3 {
    font-size: var(--text-3xl);
  }

  h4 {
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-tight);
  }

  p {
    margin: 0;
  }

  /* The italic line is the brand's voice: it carries the promise, not the
     label, so it takes the accent colour rather than the ink colour. */
  h1 em {
    color: var(--clay-500);
    font-weight: 400;
  }

  h2 em {
    color: var(--plum-500);
    font-weight: 400;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  a:hover {
    color: var(--brand-deep);
  }

  button {
    font: inherit;
  }

  strong,
  b {
    font-weight: var(--weight-strong);
  }

  small {
    font-size: var(--text-sm);
    line-height: var(--leading-label);
  }

  code,
  kbd,
  samp {
    font-family: var(--mono);
    font-size: 0.9em;
  }

  hr {
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--border);
  }

  ::placeholder {
    color: var(--text-faint);
    opacity: 1;
  }

  ::selection {
    color: var(--text);
    background: var(--brand-ring);
  }

  :where(a, button, summary, input, select, textarea):focus-visible {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: var(--focus-offset);
  }

  :where(dialog) {
    color: var(--text);
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer layout {
  /* The page shell. Every page has exactly one, and it owns the gutter. The
     max-width includes the gutter on purpose, so the text block keeps the
     same measure at every viewport above the maximum. */
  .shell,
  .shell-narrow,
  .shell-reading {
    inline-size: 100%;
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .shell {
    max-inline-size: var(--shell-max);
  }

  .shell-narrow {
    max-inline-size: 65rem;
  }

  .shell-reading {
    max-inline-size: 47.5rem;
  }

  .section {
    padding-block: var(--section-y);
  }

  .section-tight {
    padding-block: var(--space-8);
  }

  .section-flush-top {
    padding-block-start: 0;
  }

  .section-alt {
    background: var(--page-alt);
  }

  /* Vertical rhythm by composition instead of per-element margins. */
  .stack {
    display: grid;
    gap: var(--stack-gap, var(--space-4));
    align-content: start;
  }

  .stack-tight {
    --stack-gap: var(--space-3);
  }

  .stack-loose {
    --stack-gap: var(--space-7);
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-4));
    align-items: center;
  }

  /* Two-up and three-up compositions that collapse without a breakpoint
     ladder, using the container's own width as the input. */
  .duo,
  .trio {
    display: grid;
    gap: var(--grid-gap, var(--space-5));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    align-items: start;
  }

  .duo {
    --grid-gap: var(--space-8);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  }

  .rows {
    display: grid;
    gap: var(--space-4);
  }

  .space-between {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
  }
}

@layer components {
  /* --- site header ------------------------------------------------------
     The public header: wordmark, a short link list, one call to action. It
     stays one row at every width; links drop out in priority order instead of
     wrapping, because a wrapped pill reads as a broken button. */

  .site-header {
    background: var(--page);
  }

  .site-nav {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    min-block-size: 6rem;
  }

  .site-nav .wordmark {
    margin-inline-end: auto;
  }

  .site-nav-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    font-size: var(--text-md);
    font-weight: var(--weight-strong);
    white-space: nowrap;
  }

  .site-nav .button {
    white-space: nowrap;
  }

  @media (max-width: 52rem) {
    .site-nav-link-optional {
      display: none;
    }
  }

  @media (max-width: 40rem) {
    .site-nav {
      gap: var(--space-4);
      min-block-size: 4.875rem;
    }

    .site-nav-link {
      display: none;
    }

    .site-nav .button {
      min-block-size: 2.5rem;
      padding: 0.7rem 1rem;
      font-size: var(--text-sm);
    }
  }

  /* --- footer ----------------------------------------------------------- */

  .site-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
    align-items: center;
    padding-block: var(--space-6);
    color: var(--text-faint);
    font-size: var(--text-xs);
  }

  .site-footer p {
    margin: 0;
  }

  .site-footer .wordmark {
    font-size: 2rem;
  }

  .site-footer a:hover {
    color: var(--brand-deep);
  }

  /* --- billing cadence --------------------------------------------------
     The monthly/annual choice is an attribute contract, not a class: any
     element carrying `data-billing-cadence` is filtered by the checked radio.
     Both the homepage and the signup page depend on these two selectors. */

  body:has(#billing-annual:checked) [data-billing-cadence="monthly"],
  body:has(#billing-monthly:checked) [data-billing-cadence="annual"] {
    display: none;
  }

  /* --- identity --------------------------------------------------------- */

  .wordmark {
    color: inherit;
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: var(--weight-strong);
    letter-spacing: -0.05em;
    line-height: 1;
  }

  .wordmark:hover {
    color: inherit;
  }

  .wordmark span {
    color: var(--brand);
  }

  .wordmark-lg {
    font-size: clamp(2.25rem, 1.726rem + 2.33vw, 2.875rem);
    letter-spacing: -0.065em;
  }

  .skip-link {
    position: fixed;
    z-index: var(--z-toast);
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--text-on-brand);
    border-radius: var(--radius-sm);
    background: var(--brand);
    transform: translateY(-150%);
  }

  .skip-link:focus {
    color: var(--text-on-brand);
    transform: translateY(0);
  }

  /* --- typography helpers ---------------------------------------------- */

  .eyebrow {
    display: flex;
    gap: 0.6em;
    align-items: center;
    margin: 0;
    color: var(--eyebrow-color, var(--text-muted));
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-label);
    line-height: var(--leading-label);
    text-transform: uppercase;
  }

  /* A dot inside the eyebrow is the "this is a live label" marker. It is
     opt-in by markup, so a bare eyebrow stays plain. */
  .eyebrow > span {
    inline-size: 0.44em;
    block-size: 0.44em;
    border-radius: 50%;
    background: var(--brand);
  }

  .lede {
    max-inline-size: 36rem;
    color: var(--text-muted);
    font-size: var(--text-lg);
    line-height: var(--leading-body);
  }

  .micro {
    color: var(--text-faint);
    font-size: var(--text-sm);
    line-height: var(--leading-label);
  }

  .micro strong {
    color: var(--text);
  }

  .label {
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .text-link {
    color: inherit;
    border-block-end: 1px solid currentColor;
    padding-block-end: 2px;
    font-weight: var(--weight-strong);
  }

  .text-link:hover {
    color: var(--brand-deep);
  }

  /* --- buttons ----------------------------------------------------------
     One control, one shape. Density comes from the size modifiers, colour
     from the variant modifiers. */

  .button,
  .button-primary {
    display: inline-flex;
    gap: 0.65em;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    padding: 0.75rem 1.4rem;
    color: var(--text-on-brand);
    border: 1px solid var(--brand);
    border-radius: var(--radius-control);
    background: var(--brand);
    font-size: var(--text-md);
    font-weight: var(--weight-strong);
    line-height: var(--leading-label);
    text-align: center;
    transition:
      background var(--duration) var(--ease),
      border-color var(--duration) var(--ease),
      transform var(--duration) var(--ease),
      box-shadow var(--duration) var(--ease);
  }

  .button:hover,
  .button-primary:hover {
    color: var(--text-on-brand);
    border-color: var(--brand-deep);
    background: var(--brand-deep);
    transform: translateY(-2px);
  }

  .button-lg,
  .button-primary.button-lg {
    min-block-size: 3.25rem;
    padding: 1.05rem 1.6rem;
    font-size: var(--text-ui);
  }

  .button-sm,
  .button-primary.button-sm {
    min-block-size: 2.25rem;
    padding: 0.5rem 0.9rem;
    font-size: var(--text-sm);
  }

  .button-secondary {
    color: var(--brand-ink);
    border-color: transparent;
    background: var(--brand-wash);
  }

  .button-secondary:hover {
    color: var(--brand-ink);
    border-color: transparent;
    background: var(--brand-ring);
  }

  .button-quiet {
    color: inherit;
    border-color: transparent;
    background: none;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
  }

  .button-quiet:hover {
    color: var(--brand-deep);
    border-color: transparent;
    background: none;
    transform: none;
  }

  .button-outline {
    color: var(--text);
    border-color: var(--border);
    background: var(--surface);
  }

  .button-outline:hover {
    color: var(--text);
    border-color: var(--text-muted);
    background: var(--surface);
  }

  /* On a dark or brand panel the action flips to amber; the surrounding
     `.surface-night` / `.surface-brand` scope has already re-pointed the
     focus ring for it. */
  .surface-night .button:not(.button-quiet, .button-outline),
  .surface-brand .button:not(.button-quiet, .button-outline),
  .button-on-dark {
    color: var(--text-on-amber);
    border-color: var(--accent-amber);
    background: var(--accent-amber);
  }

  .surface-night .button:not(.button-quiet, .button-outline):hover,
  .surface-brand .button:not(.button-quiet, .button-outline):hover,
  .button-on-dark:hover {
    color: var(--text-on-amber);
    border-color: var(--amber-200);
    background: var(--amber-200);
  }

  .button-inverse {
    color: var(--brand);
    border-color: var(--white);
    background: var(--white);
  }

  .button-inverse:hover {
    color: var(--brand-deep);
    border-color: var(--white);
    background: var(--white);
  }

  .button-danger {
    color: var(--danger);
    border-color: color-mix(in oklab, var(--danger) 35%, transparent);
    background: var(--danger-wash);
  }

  .button-danger:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--danger-wash);
  }

  .button-block {
    inline-size: 100%;
  }

  .button[disabled],
  .button:disabled,
  .button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
  }

  .button[disabled]:hover,
  .button:disabled:hover,
  .button[aria-disabled="true"]:hover {
    transform: none;
  }

  /* --- surfaces --------------------------------------------------------- */

  .panel {
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--surface);
  }

  .panel-outline {
    border: 1px solid var(--border);
  }

  .panel-soft {
    box-shadow: var(--shadow-sm);
  }

  .panel-raised {
    box-shadow: var(--shadow-md);
  }

  .panel-warm {
    background: var(--surface-warm);
    color: var(--text);
  }

  .panel-wash {
    background: var(--surface-sunken);
  }

  .panel-brand {
    color: var(--text-on-brand);
    background: var(--surface-brand);
  }

  .panel-brand h1,
  .panel-brand h2,
  .panel-brand h3 {
    color: var(--text-on-brand);
  }

  .panel-night {
    color: var(--text-on-night);
    background: var(--surface-night);
  }

  .panel-night h1,
  .panel-night h2,
  .panel-night h3 {
    color: var(--text-on-night);
  }

  .panel-night .eyebrow {
    color: var(--text-on-night-muted);
  }

  /* The brand dot disappears on a dark or brand panel, so it follows the
     label colour there instead. */
  .surface-night .eyebrow > span,
  .surface-brand .eyebrow > span,
  .is-night .eyebrow > span,
  .is-brand .eyebrow > span,
  .panel-night .eyebrow > span,
  .panel-brand .eyebrow > span {
    background: currentColor;
  }

  .panel-night .lede {
    color: var(--text-on-night-muted);
  }

  .panel-brand .eyebrow,
  .panel-brand .lede {
    color: var(--text-on-brand-muted);
  }

  .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
  }

  .card-accent {
    border: 0;
    background: var(--accent-sand);
    color: var(--accent-sand-ink);
  }

  .card-accent h3 {
    color: inherit;
  }

  .card-accent p {
    color: inherit;
  }

  .card-clay {
    background: var(--accent-rose);
    color: var(--accent-rose-ink);
  }

  .card-sage {
    background: var(--accent-sage-deep);
    color: var(--accent-sage-ink);
  }

  /* --- section headings ------------------------------------------------- */

  .section-head {
    display: grid;
    gap: var(--space-6);
    align-items: end;
    margin-block-end: var(--space-8);
  }

  @media (min-width: 52rem) {
    .section-head {
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: var(--space-8);
    }

    .section-head > p {
      margin-block-end: 0;
    }
  }

  .section-head h2 {
    margin-block: var(--space-4) 0;
  }

  .section-head > p {
    max-inline-size: 26rem;
    color: var(--text-muted);
  }

  .section-head-center {
    justify-items: center;
    text-align: center;
  }

  .section-head-center > p {
    max-inline-size: 42rem;
  }

  .section-head-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-block-end: var(--space-5);
  }

  .section-head-compact h2 { margin: 0; font-size: var(--text-3xl); font-weight: 500; }
  .section-head-compact p { margin: 0; }
  @media (max-width: 650px) {
    .section-head-compact { align-items: flex-start; flex-direction: column; }
  }

  /* --- steps and facts -------------------------------------------------- */

  .step {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--accent-sand);
    color: var(--accent-sand-ink);
  }

  .step:nth-child(2) {
    background: var(--accent-rose);
    color: var(--accent-rose-ink);
  }

  .step:nth-child(3) {
    background: var(--accent-sage-deep);
    color: var(--accent-sage-ink);
  }

  .step h3 {
    margin: 0;
    color: inherit;
    font-size: var(--text-3xl);
  }

  .step p {
    margin: 0;
    color: inherit;
    font-size: var(--text-body);
  }

  .step-num {
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .fact {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    padding-block: var(--space-5);
    border-block-end: 1px solid var(--border-soft);
  }

  .fact b {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    color: var(--accent-amber-ink);
    border-radius: var(--radius-sm);
    background: var(--amber-200);
    font-size: var(--text-xs);
  }

  .fact:nth-child(2) b {
    color: var(--accent-sage-ink);
    background: var(--accent-sage-deep);
  }

  .fact:nth-child(3) b {
    color: var(--rose-800);
    background: var(--rose-300);
  }

  .fact h3 {
    font-family: var(--sans);
    font-size: var(--text-body);
    font-weight: var(--weight-strong);
    letter-spacing: 0;
  }

  .fact p {
    margin-block: var(--space-1) 0;
    color: var(--text-muted);
    font-size: var(--text-ui);
  }

  /* --- stat ------------------------------------------------------------- */

  .stat {
    color: var(--accent-amber);
    font-family: var(--serif);
    font-size: var(--text-6xl);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-display);
    line-height: 1;
  }

  .stat-label {
    color: var(--text-muted);
    font-size: var(--text-sm);
  }

  /* --- badges and pills ------------------------------------------------- */

  .pill {
    display: inline-flex;
    gap: 0.5em;
    align-items: center;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    line-height: var(--leading-label);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    color: var(--brand-ink);
    border-radius: var(--radius-sm);
    background: var(--brand-wash);
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .badge-sage {
    color: var(--success);
    background: var(--success-wash);
  }

  .badge-amber {
    color: var(--accent-amber-ink);
    background: var(--amber-200);
  }

  .badge-danger {
    color: var(--danger);
    background: var(--danger-wash);
  }

  /* --- notices ---------------------------------------------------------- */

  .notice {
    padding: var(--space-4) var(--space-5);
    color: var(--text);
    border-inline-start: 3px solid var(--brand);
    border-radius: var(--radius-sm);
    background: var(--brand-wash);
    font-size: var(--text-md);
    line-height: var(--leading-ui);
  }

  .notice-success {
    border-color: var(--success);
    background: var(--success-wash);
  }

  .notice-warning {
    border-color: var(--warning);
    background: var(--warning-wash);
  }

  .notice-danger {
    border-color: var(--danger);
    background: var(--danger-wash);
    color: var(--danger);
  }

  /* --- forms ------------------------------------------------------------ */

  .field {
    display: grid;
    gap: var(--space-2);
  }

  .field > label,
  .field-label {
    display: block;
    font-size: var(--text-md);
    font-weight: var(--weight-strong);
  }

  .field > small,
  .field-hint {
    color: var(--text-faint);
    font-size: var(--text-sm);
    line-height: var(--leading-ui);
  }

  .input,
  .field-group input:not([type="radio"], [type="checkbox"], [type="submit"]),
  .field input:not([type="radio"], [type="checkbox"], [type="submit"]),
  .field select,
  .field textarea {
    inline-size: 100%;
    min-inline-size: 0;
    padding: 0.8rem 0.9rem;
    color: var(--text);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: var(--text-body);
    line-height: var(--leading-label);
    transition:
      border-color var(--duration) var(--ease),
      box-shadow var(--duration) var(--ease);
  }

  .field select {
    min-block-size: 2.9rem;
  }

  .input:focus-visible,
  .field-group input:focus-visible,
  .field input:focus-visible,
  .field select:focus-visible,
  .field textarea:focus-visible {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
  }

  .input[aria-invalid="true"],
  .field-group input[aria-invalid="true"],
  .field input[aria-invalid="true"],
  .field select[aria-invalid="true"],
  .field textarea[aria-invalid="true"] {
    border-color: var(--danger);
  }

  .field-error,
  .form-error-summary {
    color: var(--danger);
    font-size: var(--text-sm);
    line-height: var(--leading-ui);
  }

  .field-error {
    margin: 0;
  }

  .form-error-summary {
    padding: var(--space-4) var(--space-5);
    border-inline-start: 3px solid var(--danger);
    border-radius: var(--radius-sm);
    background: var(--danger-wash);
  }

  .checkbox {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    font-size: var(--text-md);
  }

  .checkbox input {
    flex: 0 0 auto;
    inline-size: 1.1rem;
    block-size: 1.1rem;
    margin-block-start: 0.15rem;
    accent-color: var(--brand);
  }

  /* A stable label and explicit checked state for immediate server form actions. */
  .switch {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    min-block-size: 2.75rem;
    padding: var(--space-2) 0;
    color: var(--text);
    border: 0;
    background: transparent;
    font-size: var(--text-sm);
    font-weight: var(--weight-strong);
    cursor: pointer;
  }

  .switch-track {
    position: relative;
    flex: 0 0 auto;
    inline-size: 2.5rem;
    block-size: 1.5rem;
    border: 1px solid var(--text-faint);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
  }

  .switch-track::after {
    position: absolute;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    inline-size: 1rem;
    block-size: 1rem;
    border-radius: var(--radius-pill);
    background: var(--text-faint);
    content: "";
  }

  .switch-success {
    --switch-on: var(--success);
  }

  .switch[aria-checked="true"] .switch-track {
    border-color: var(--switch-on, var(--brand));
    background: var(--switch-on, var(--brand));
  }

  .switch[aria-checked="true"] .switch-track::after {
    inset-inline-start: calc(100% - 1rem - 3px);
    background: var(--text-on-brand);
  }

  .switch-state {
    min-inline-size: 1.5em;
    color: var(--text-muted);
    font-weight: 400;
  }

  /* --- segmented control ------------------------------------------------
     Used for the billing period and any either/or choice. Markup is radios
     plus labels; there is no JavaScript in the control itself. */

  .segmented {
    display: inline-flex;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--plum-250);
  }

  .segmented input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
  }

  .segmented label {
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-md);
    line-height: var(--leading-label);
  }

  .segmented input:checked + label {
    background: var(--surface);
    box-shadow: var(--shadow-xs);
  }

  .segmented input:focus-visible + label {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: 2px;
  }

  /* --- plans ------------------------------------------------------------ */

  .plan {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 0;
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  .plan-featured {
    border: 2px solid var(--brand);
    box-shadow: var(--shadow-brand);
  }

  .plan h3 {
    margin: 0;
    font-size: var(--text-3xl);
  }

  .plan-label {
    color: var(--text-muted);
    font-size: var(--text-xs);
  }

  .plan-desc {
    color: var(--text-muted);
    font-size: var(--text-ui);
  }

  .plan-price {
    margin: 0;
    color: var(--text);
    font-size: var(--text-price);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.1;
  }

  .plan-price span {
    color: var(--text-muted);
    font-size: var(--text-md);
    font-weight: 400;
    letter-spacing: 0;
  }

  .plan-price strong {
    font-weight: 600;
  }

  .plan-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-5) 0 0;
    border-block-start: 1px solid var(--border-soft);
    font-size: var(--text-md);
    line-height: var(--leading-ui);
    list-style: none;
  }

  .plan-list li {
    display: grid;
    grid-template-columns: 1.1em minmax(0, 1fr);
    gap: 0.5em;
  }

  .plan-list li::before {
    color: var(--brand);
    content: "✓";
  }

  .plan-actions {
    display: grid;
    gap: var(--space-2);
    margin-block-start: auto;
    padding-block-start: var(--space-3);
  }

  /* --- benefit strip ---------------------------------------------------- */

  .benefit-strip {
    border-block: 0;
    background: var(--brand-wash);
  }

  .benefit-strip .shell {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    justify-content: space-between;
    padding-block: var(--space-5);
    color: var(--brand-ink);
    font-size: var(--text-sm);
  }

  .benefit-strip span::before {
    color: var(--brand);
    content: "✓";
    margin-inline-end: 0.6em;
  }

  /* --- disclosures ------------------------------------------------------
     Every expandable surface on the site: FAQ entries, account menus,
     "remove this" confirmations. Native details, styled once. */

  .disclosure {
    border-block-start: 1px solid var(--border-soft);
    padding-block: var(--space-5);
  }

  .disclosure:last-of-type {
    border-block-end: 1px solid var(--border-soft);
  }

  .disclosure > summary {
    display: flex;
    gap: var(--space-4);
    align-items: baseline;
    justify-content: space-between;
    font-size: var(--text-body);
    font-weight: 600;
    line-height: var(--leading-ui);
  }

  .disclosure > summary::after {
    color: var(--brand);
    content: "+";
    font-size: var(--text-2xl);
    font-weight: 400;
    line-height: 1;
  }

  .disclosure[open] > summary::after {
    content: "−";
  }

  .disclosure > :not(summary) {
    max-inline-size: 45rem;
    margin-block-start: var(--space-4);
    color: var(--text-muted);
    line-height: var(--leading-body);
  }

  /* --- row lists --------------------------------------------------------
     The dashboard's "what you have been making" list and every other
     title/meta/action row. */

  .row-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .row-list-surface {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }

  .row-list-surface > .row {
    padding: var(--space-5);
  }

  @media (max-width: 650px) {
    .row-list-surface > .row { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  }

  .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-5);
    align-items: center;
    padding-block: var(--space-4);
    border-block-end: 1px solid var(--border-soft);
  }

  .row:last-child {
    border-block-end: 0;
  }

  .row-title {
    font-family: var(--serif);
    font-size: var(--text-xl);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-tight);
  }

  .row-meta {
    color: var(--text-faint);
    font-family: var(--mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* --- panels that carry a label ---------------------------------------- */

  .panel-label {
    color: var(--text-on-night-muted);
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  /* --- final call to action --------------------------------------------- */

  .closing {
    --focus: var(--plum-600);
    display: grid;
    gap: var(--space-4);
    justify-items: center;
    padding-block: var(--space-9);
    color: var(--text-on-amber);
    background: var(--amber-400);
    text-align: center;
  }

  .closing h2 {
    max-inline-size: 42rem;
    margin: 0;
    color: inherit;
    /* The closing promise is the page's second-largest statement, so it takes
       the display size rather than the ordinary section-heading size. */
    font-size: var(--text-5xl);
  }

  .closing h2 em {
    color: var(--clay-500);
  }

  .closing .eyebrow {
    justify-content: center;
    color: var(--text-on-amber-muted);
  }

  .closing .lede {
    max-inline-size: 34rem;
    margin: 0;
    color: var(--text-on-amber-muted);
  }

  .closing .button {
    margin-block-start: var(--space-2);
  }

  .closing .micro {
    margin: 0;
    color: var(--text-on-amber-muted);
  }

  .closing form {
    margin-inline: auto;
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .text-center {
    text-align: center;
  }

  .text-balance {
    text-wrap: balance;
  }

  .full-bleed {
    inline-size: 100%;
  }

  .divider {
    block-size: 1px;
    margin: 0;
    border: 0;
    background: var(--border);
  }
}

@layer pages {
  /* Page stylesheets extend the system here. See static/css/landing.css. */
}

/* Editorial workspace: a scoped companion to the approved public homepage. */
@layer tokens {
  :root {
    --workspace-canvas: var(--paper-warm);
    --workspace-nav: var(--plum-900);
    --workspace-nav-text: var(--paper-warm);
    --workspace-nav-muted: var(--plum-200);
    --workspace-nav-hover: var(--plum-800);
    --workspace-nav-selected: var(--plum-700);
    --workspace-nav-marker: var(--plum-200);
    --workspace-context: var(--sage-050);
    --workspace-context-text: var(--plum-900);
    --control-border: #9b8d9e;
    --control-border: oklch(66.12% 0.0296 320.3);
  }
  .workspace-surface, .account-surface, .product-surface, .operator-surface {
    --radius-control: var(--radius-sm);
    --radius-xl: var(--radius-md);
    --radius-lg: var(--radius-md);
    --border-input: var(--control-border);
  }
}
@layer components {
  .context-band {
    padding: var(--space-5) var(--space-6);
    color: var(--workspace-context-text);
    background: var(--workspace-context);
    border-radius: var(--radius-md);
  }
  .context-band .micro, .context-band .label { color: var(--text-muted); }
  .maintenance-notice {
    position: sticky; top: 0; z-index: 1000;
    padding: var(--space-4) var(--space-5); text-align: center;
    color: var(--warning); background: var(--warning-wash);
    border-bottom: 1px solid var(--border); font-size: var(--text-md);
    font-weight: var(--weight-strong);
  }
  .maintenance-notice span { font-weight: 400; }
  .text-action { display: inline-flex; align-self: start; justify-self: start; color: var(--brand-deep); font-size: var(--text-sm); font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
  .text-action-danger { color: var(--danger); }
  .success-banner { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); padding: var(--space-4); color: var(--success); background: var(--success-wash); border-radius: var(--radius-sm); font-size: var(--text-md); }
  .success-banner.is-error, .form-error { color: var(--danger); background: var(--danger-wash); border-left: 3px solid var(--danger); padding: var(--space-4); border-radius: var(--radius-sm); }

}
@layer tokens {
  .operator-surface {
    color-scheme: dark;
    --surface: var(--surface-night);
    --text: var(--text-on-night);
    --text-muted: var(--text-on-night-muted);
    --text-faint: var(--text-on-night-muted);
    --border: var(--border-night);
    --border-input: var(--text-on-night-muted);
    --focus: var(--focus-on-dark);
  }
}
@layer components {
  .continue-button { display: flex; width: 100%; margin-top: var(--space-1); }
  .workspace-surface input::placeholder, .workspace-surface textarea::placeholder,
  .account-surface input::placeholder, .account-surface textarea::placeholder { color: var(--text-faint); opacity: 1; }
  .operator-surface input, .operator-surface select, .operator-surface textarea { border-color: var(--border-input); }
}
@layer pages {
  .product-surface, .account-surface, .workspace-surface { background: var(--workspace-canvas); font-size: var(--text-ui); }
  .account-surface .signup-panel { border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
  .account-surface .signup-shell { gap: clamp(32px, 6vw, 80px); }
  .account-surface .signup-intro h1 { font-weight: 500; }
  .product-surface .path-card { border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: none; }
  .product-surface .path-card.is-selected, .product-surface .path-card:has(input:checked) { color: var(--text); background: var(--workspace-context); border-color: var(--success); box-shadow: none; }
  .product-surface .path-card.is-selected .path-content > span, .product-surface .path-card:has(input:checked) .path-content > span { color: var(--text-muted); }
  .product-surface .path-card.is-selected .path-number, .product-surface .path-card.is-selected .path-mark { color: var(--success); }
  .product-surface .welcome-concierge { background: var(--workspace-context); border-radius: var(--radius-md); box-shadow: none; }
  .product-surface .legal-copy { max-width: var(--reading-max); }
  .operator-surface .sidebar { background: var(--workspace-nav); }
  .workspace-surface .integration-workspace code,
  .workspace-surface .integration-workspace .integration-card-copy { overflow-wrap: anywhere; }
  .operator-surface .sidebar nav a[aria-current] { color: var(--workspace-nav-text); background: var(--workspace-nav-selected); }
  @media (max-width: 560px) {
    .product-surface .site-footer > span { position: static; }
  }
}