/* ============================================================================
 * OVERLINE — Stanify design system (portable single-file build)
 * Regenerated by scripts/build-bundle.py from the Overline source repo.
 * FONTS: Albert Sans (local + Google Fonts), GT Ultra Median (local; use
 * references/gt-ultra-median-embed.css as a data URI inside Claude Artifacts).
 * See references/ for color, typography, components, and voice.
 * ========================================================================== */

/* --- Fonts (local paths; swap for embed/CDN in Artifacts, see header) ------ */
@font-face { font-family:"Albert Sans"; src:url("./assets/fonts/albert-sans-variable.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Albert Sans"; src:url("./assets/fonts/albert-sans-italic-variable.woff2") format("woff2"); font-weight:100 900; font-style:italic; font-display:swap; }
@font-face { font-family:"GT Ultra Median"; src:url("./assets/fonts/GT-Ultra-Median-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

/* ===== tokens (color / type / space / radius / motion) ===== */
/*
 * Stanify color tokens — transcribed from guideline slides 18–21.
 * Sources: source-materials/brand-guidelines/{18,19,20,21}.png
 * Names use a repository convention; values follow source labels except noted repairs.
 * See docs/brand.md for source reconciliation and gradient limitations.
 * Component spacing, radii, and UI motion are authored below; other effects remain pending.
 */

:root {
  /* Extended palette: 21.png. Only published steps are defined. */

  /* Blue */
  --color-blue-50: #EBFEFF;
  --color-blue-100: #D6F6FD;
  --color-blue-150: #BCE7F6;
  --color-blue-200: #93D2EB;
  --color-blue-300: #72BCDE;
  --color-blue-400: #4FACD6;
  --color-blue-500: #2C9BCE;
  --color-blue-600: #2581AC;
  --color-blue-700: #1D6789;
  --color-blue-800: #164E67;
  --color-blue-900: #0F3445;
  --color-blue-950: #122131;

  /* Green */
  --color-green-50: #E2FECD;
  --color-green-100: #CFFDAC;
  --color-green-200: #C1FC94;
  --color-green-300: #B7FC83;
  --color-green-400: #9DFB56;
  --color-green-500: #6FF807;
  --color-green-600: #4FCF06;
  --color-green-700: #35A505;
  --color-green-800: #247C04;
  --color-green-900: #155302;
  --color-green-950: #0B3201;

  /* Lime */
  --color-lime-50: #F4FFCC;
  --color-lime-100: #ECFEAB;
  --color-lime-200: #E3FE81;
  --color-lime-300: #D9FE56;
  --color-lime-400: #D0FD2C;
  --color-lime-500: #C6FD02;
  --color-lime-600: #A5D302;
  --color-lime-700: #84A901;
  --color-lime-800: #637F01;
  --color-lime-900: #425401;
  --color-lime-950: #283300;

  /* Indigo */
  --color-indigo-50: #DED8FB;
  --color-indigo-100: #C8BDF9;
  --color-indigo-200: #AD9DF6;
  --color-indigo-300: #917CF2;
  --color-indigo-400: #765BEF;
  --color-indigo-500: #5A3AEC;
  --color-indigo-600: #4B30C5;
  --color-indigo-700: #3C279D;
  --color-indigo-800: #2D1D76;
  --color-indigo-900: #1E134F;
  --color-indigo-950: #120C2F;

  /* Magenta */
  --color-magenta-50: #F8D3F5;
  --color-magenta-100: #F3B6EF;
  --color-magenta-200: #ED91E7;
  --color-magenta-300: #E66CDE;
  --color-magenta-400: #E048D6;
  --color-magenta-500: #DA23CE;
  --color-magenta-600: #B61DAC;
  --color-magenta-700: #911789;
  --color-magenta-800: #6D1267;
  --color-magenta-900: #490C45;
  --color-magenta-950: #2C0729;

  /* Red */
  --color-red-50: #FFF5F3;
  --color-red-100: #FCE5E3;
  --color-red-150: #F5CDCA;
  --color-red-200: #EFB3AF;
  --color-red-300: #EA9A94;
  --color-red-400: #E5817A;
  --color-red-500: #E0685F;
  /* Reconciled from 21.png swatch fills; printed labels are erroneous. */
  --color-red-600: #BB574F;
  --color-red-700: #95453F;
  --color-red-800: #703430;
  --color-red-900: #4B2320;
  --color-red-950: #2D1513;

  /* Gray */
  --color-gray-0: #FFFFFF;
  --color-gray-50: #F2F2F2;
  --color-gray-100: #E5E5E5;
  --color-gray-200: #BFBFBF;
  --color-gray-300: #A9A9A9;
  --color-gray-400: #949494;
  --color-gray-500: #7F7F7F;
  --color-gray-600: #696969;
  --color-gray-700: #545454;
  --color-gray-800: #3F3F3F;
  --color-gray-900: #272727;
  --color-gray-1000: #000000;

  /* Primary names: 18.png; scale mappings: 21.png. */
  --color-graphite: var(--color-blue-950);
  --color-jade: var(--color-blue-500);
  --color-phosphorus: var(--color-green-200);
  --color-cesium: var(--color-blue-50);

  /* Secondary names: 19.png. Other secondary hues use scale tokens directly. */
  --color-white: var(--color-gray-0);
  --color-black: var(--color-gray-1000);
  /* Reconciled to the extended scale: secondary lime is Lime 100. */
  --color-secondary-lime: var(--color-lime-100);

  /* Gradient color sequences: 20.png.
   * Directions and stop positions are not specified numerically.
   * These are color lists, not complete CSS background-image values. */
  --gradient-cool-colors: var(--color-indigo-500), var(--color-magenta-500), var(--color-indigo-50);
  --gradient-warm-colors: var(--color-secondary-lime), var(--color-green-600), var(--color-green-800);
  --gradient-green-to-white-colors: var(--color-green-50), var(--color-white);
  --gradient-blue-to-white-colors: var(--color-cesium), var(--color-white);
}

/* Web typography v1 — authored for this project, not a verbatim Figma scale.
 * Font roles: Figma 278:5163 / 278:5191. Rationale: docs/typography.md.
 * Sizes use rem; the browser's root font size remains unchanged.
 */
:root {
  --font-family-brand: "GT Ultra Median", "Albert Sans", sans-serif;
  --font-family-body: "Albert Sans", system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --text-measure-body: 65ch;
  --text-measure-heading: 24ch;

  /* Hero or campaign statement */
  --type-display-family: var(--font-family-brand);
  --type-display-weight: var(--font-weight-regular);
  --type-display-size: 3rem;
  --type-display-line-height: 1.08;
  --type-display-tracking: -0.04em;

  /* Page title */
  --type-h1-family: var(--font-family-brand);
  --type-h1-weight: var(--font-weight-regular);
  --type-h1-size: 2.5rem;
  --type-h1-line-height: 1.125;
  --type-h1-tracking: -0.03em;

  /* Major section */
  --type-h2-family: var(--font-family-brand);
  --type-h2-weight: var(--font-weight-regular);
  --type-h2-size: 2rem;
  --type-h2-line-height: 1.2;
  --type-h2-tracking: -0.03em;

  /* Subsection */
  --type-h3-family: var(--font-family-brand);
  --type-h3-weight: var(--font-weight-regular);
  --type-h3-size: 1.75rem;
  --type-h3-line-height: 1.25;
  --type-h3-tracking: -0.025em;

  /* Small editorial heading */
  --type-h4-family: var(--font-family-brand);
  --type-h4-weight: var(--font-weight-regular);
  --type-h4-size: 1.5rem;
  --type-h4-line-height: 1.33333;
  --type-h4-tracking: -0.02em;

  /* Component heading */
  --type-h5-family: var(--font-family-body);
  --type-h5-weight: var(--font-weight-medium);
  --type-h5-size: 1.25rem;
  --type-h5-line-height: 1.4;
  --type-h5-tracking: 0em;

  /* Nested heading */
  --type-h6-family: var(--font-family-body);
  --type-h6-weight: var(--font-weight-medium);
  --type-h6-size: 1.125rem;
  --type-h6-line-height: 1.33333;
  --type-h6-tracking: 0em;

  /* Introductory paragraph */
  --type-lead-family: var(--font-family-body);
  --type-lead-weight: var(--font-weight-regular);
  --type-lead-size: 1.25rem;
  --type-lead-line-height: 1.5;
  --type-lead-tracking: 0em;

  /* Default paragraph and lists */
  --type-body-family: var(--font-family-body);
  --type-body-weight: var(--font-weight-regular);
  --type-body-size: 1rem;
  --type-body-line-height: 1.5;
  --type-body-tracking: 0em;

  /* Secondary supporting copy */
  --type-body-small-family: var(--font-family-body);
  --type-body-small-weight: var(--font-weight-regular);
  --type-body-small-size: 0.875rem;
  --type-body-small-line-height: 1.42857;
  --type-body-small-tracking: 0em;

  /* Short nonessential annotation */
  --type-caption-family: var(--font-family-body);
  --type-caption-weight: var(--font-weight-regular);
  --type-caption-size: 0.75rem;
  --type-caption-line-height: 1.5;
  --type-caption-tracking: 0em;

  /* Field label or compact action */
  --type-label-family: var(--font-family-body);
  --type-label-weight: var(--font-weight-medium);
  --type-label-size: 0.875rem;
  --type-label-line-height: 1.42857;
  --type-label-tracking: 0em;

  /* Navigation or standard action */
  --type-label-large-family: var(--font-family-body);
  --type-label-large-weight: var(--font-weight-medium);
  --type-label-large-size: 1rem;
  --type-label-large-line-height: 1.5;
  --type-label-large-tracking: 0em;

  /* Short section kicker */
  --type-eyebrow-family: var(--font-family-body);
  --type-eyebrow-weight: var(--font-weight-medium);
  --type-eyebrow-size: 0.75rem;
  --type-eyebrow-line-height: 1.5;
  --type-eyebrow-tracking: 0.1em;
}

/* Larger layouts: a deliberate web breakpoint, not a guideline value. */
@media (min-width: 48rem) {
  :root {
    --type-display-size: 4.5rem;
    --type-h1-size: 3.5rem;
    --type-h2-size: 2.5rem;
    --type-h3-size: 2rem;
  }
}

/* Color roles v1 — authored web decisions; see docs/color.md.
 * Intended for the documented solid surfaces, not arbitrary images/gradients.
 */
:root {
  --surface-default: var(--color-white);
  --surface-soft: var(--color-cesium);
  --surface-accent: var(--color-phosphorus);
  --surface-inverse: var(--color-graphite);
  --text-primary: var(--color-graphite);
  --text-secondary: var(--color-blue-800);
  --text-inverse: var(--color-cesium);
  --link-default: var(--color-blue-700);
  --link-hover: var(--color-blue-800);
  --link-inverse: var(--color-phosphorus);
  --border-subtle: var(--color-gray-100);
  --border-control: var(--color-gray-500);
  --action-primary: var(--color-graphite);
  --action-primary-hover: var(--color-blue-800);
  --action-primary-text: var(--color-white);
  --action-inverse: var(--color-phosphorus);
  --action-inverse-hover: var(--color-green-100);
  --action-inverse-text: var(--color-graphite);
  --focus-ring: var(--color-indigo-500);
  --focus-ring-inverse: var(--color-phosphorus);

  /* Web defaults: left-to-right, evenly spaced stops. Source supplies colors;
   * geometry is an authored starting point, not extracted numeric guidance. */
  --gradient-cool: linear-gradient(90deg, var(--gradient-cool-colors));
  --gradient-warm: linear-gradient(90deg, var(--gradient-warm-colors));
  --gradient-green-to-white: linear-gradient(90deg, var(--gradient-green-to-white-colors));
  --gradient-blue-to-white: linear-gradient(90deg, var(--gradient-blue-to-white-colors));
}

/* Component foundations v1 — authored web decisions, docs/components.md. */
:root {
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --radius-control: .75rem;
  --radius-card: 1.5rem;
  --radius-pill: 9999px;
  --control-height: 3rem;
  --control-height-large: 3.5rem;
  --content-width: 72rem;
  --form-width: 32rem;
  --motion-ui-duration: 150ms;
  --motion-ui-easing: ease-out;
  /* Authored motion from the reviewed homepage, not guideline measurements. */
  --motion-link-duration: 240ms;
  --motion-button-duration: 1100ms;
  --motion-glow-duration: 14s;
  --motion-reveal-duration: 550ms;
  --motion-reveal-offset: 14px;
  --motion-stagger: 70ms;
  --motion-reveal-easing: cubic-bezier(0.2,0.7,0.2,1);
  --effect-border-width: 2px;
  --action-primary-pressed: var(--color-blue-900);
  --action-inverse-pressed: var(--color-green-300);
  --surface-disabled: var(--color-gray-100);
  --text-disabled: var(--color-gray-700);
  --status-error-text: var(--color-red-800);
  --status-error-surface: var(--color-red-50);
  --status-success-text: var(--color-green-800);
  --status-success-surface: var(--color-green-50);
}

/* Layout v1 — proposed web decisions; docs/layout.md. */
:root {
  --space-24: 6rem;
  --space-30: 7.5rem; /* 120px: major section separation */
  --space-40: 10rem; /* 160px: especially spacious section separation */
  --page-gutter: var(--space-5);
  --section-space: var(--space-12);
  --layout-gap: var(--space-6);
  --reading-width: 60ch;
}

/* Stepped responsive rhythm: lengths remain selected scale values. */
@media (min-width:48rem) {
  :root { --page-gutter:var(--space-8); --section-space:var(--space-20); --layout-gap:var(--space-8); }
}
@media (min-width:64rem) {
  :root { --page-gutter:var(--space-12); --section-space:var(--space-24); --layout-gap:var(--space-12); }
}

/* ===== typography atoms ===== */
/* Typography atoms. Global defaults use low specificity; visual roles remain
 * independent of heading semantics. Layout components own spacing and color. */
.type-display {
  font-family: var(--type-display-family);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-line-height);
  letter-spacing: var(--type-display-tracking);
}

:where(h1),
.type-h1 {
  font-family: var(--type-h1-family);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-line-height);
  letter-spacing: var(--type-h1-tracking);
}

:where(h2),
.type-h2 {
  font-family: var(--type-h2-family);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-line-height);
  letter-spacing: var(--type-h2-tracking);
}

:where(h3),
.type-h3 {
  font-family: var(--type-h3-family);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-line-height);
  letter-spacing: var(--type-h3-tracking);
}

:where(h4),
.type-h4 {
  font-family: var(--type-h4-family);
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-line-height);
  letter-spacing: var(--type-h4-tracking);
}

:where(h5),
.type-h5 {
  font-family: var(--type-h5-family);
  font-size: var(--type-h5-size);
  font-weight: var(--type-h5-weight);
  line-height: var(--type-h5-line-height);
  letter-spacing: var(--type-h5-tracking);
}

:where(h6),
.type-h6 {
  font-family: var(--type-h6-family);
  font-size: var(--type-h6-size);
  font-weight: var(--type-h6-weight);
  line-height: var(--type-h6-line-height);
  letter-spacing: var(--type-h6-tracking);
}

.type-lead {
  font-family: var(--type-lead-family);
  font-size: var(--type-lead-size);
  font-weight: var(--type-lead-weight);
  line-height: var(--type-lead-line-height);
  letter-spacing: var(--type-lead-tracking);
}

:where(body, p, li, dd),
.type-body {
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-tracking);
}

.type-body-small {
  font-family: var(--type-body-small-family);
  font-size: var(--type-body-small-size);
  font-weight: var(--type-body-small-weight);
  line-height: var(--type-body-small-line-height);
  letter-spacing: var(--type-body-small-tracking);
}

:where(figcaption),
.type-caption {
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-tracking);
}

.type-label {
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
  letter-spacing: var(--type-label-tracking);
}

.type-label-large {
  font-family: var(--type-label-large-family);
  font-size: var(--type-label-large-size);
  font-weight: var(--type-label-large-weight);
  line-height: var(--type-label-large-line-height);
  letter-spacing: var(--type-label-large-tracking);
}

.type-eyebrow {
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: var(--type-eyebrow-line-height);
  letter-spacing: var(--type-eyebrow-tracking);
}

.type-eyebrow { text-transform: uppercase; }
:where(h1, h2, h3, h4, h5, h6),
.type-display { text-wrap: balance; }
:where(h1, h2, h3, h4, h5, h6, p, li, dd, figcaption) { overflow-wrap: anywhere; }
:where(strong, b) { font-weight: var(--font-weight-bold); }
:where(em, i) { font-style: italic; }
:where(a) { text-underline-offset: 0.18em; }
.type-prose { max-inline-size: var(--text-measure-body); }
.type-heading-measure { max-inline-size: var(--text-measure-heading); }
.type-numeric { font-variant-numeric: tabular-nums; }

/* ===== layout primitives ===== */
/* Portable layout primitives. Logical properties support document direction. */
.layout-container { box-sizing:border-box; width:100%; max-width:calc(var(--content-width) + 2 * var(--page-gutter)); padding-inline:var(--page-gutter); margin-inline:auto; }
.layout-section { padding-block:var(--section-space); }
.layout-stack { display:flex; flex-direction:column; gap:var(--space-6); }
.layout-stack > * { margin-block:0; }
.layout-measure { max-width:var(--reading-width); }
.layout-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--layout-gap); align-items:center; }
.layout-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); }
.layout-split > *, .layout-grid > * { min-width:0; }
.media-frame { margin:0; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-card); background:var(--surface-soft); }
.media-frame > img, .media-frame > video { display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:63.999rem) { .layout-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:47.999rem) { .layout-split, .layout-grid { grid-template-columns:1fr; } }

/* ===== component atoms ===== */
/* Native HTML atoms. No framework, reset, or documentation stylesheet required. */
.button {
  --button-fill: var(--action-primary);
  --button-text: var(--action-primary-text);
  --button-hover: var(--action-primary-hover);
  --button-pressed: var(--action-primary-pressed);
  --button-border: transparent;
  --button-focus: var(--focus-ring);
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--space-2); min-block-size:var(--control-height);
  max-inline-size:100%; padding:var(--space-3) var(--space-6);
  border:1px solid var(--button-border); border-radius:var(--radius-pill);
  background:var(--button-fill); color:var(--button-text);
  font-family:var(--type-label-large-family); font-size:var(--type-label-large-size);
  font-weight:var(--type-label-large-weight); line-height:var(--type-label-large-line-height);
  letter-spacing:var(--type-label-large-tracking); text-align:center;
  text-decoration:none; white-space:normal; overflow-wrap:anywhere;
  cursor:pointer;
  transition:background-color var(--motion-ui-duration) var(--motion-ui-easing), color var(--motion-ui-duration) var(--motion-ui-easing);
}
.button--secondary { --button-fill:transparent; --button-text:var(--text-primary); --button-border:var(--text-primary); --button-hover:var(--color-blue-100); --button-pressed:var(--color-blue-150); }
.button--tertiary { --button-fill:transparent; --button-text:var(--text-primary); --button-hover:var(--color-blue-100); --button-pressed:var(--color-blue-150); }
.button--large { min-block-size:var(--control-height-large); padding:var(--space-4) var(--space-8); }
.button--icon { inline-size:var(--control-height); padding:var(--space-3); flex-shrink:0; }
.button__icon { inline-size:1.25rem; block-size:1.25rem; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.button:hover:not(:disabled):not([aria-disabled="true"]) { background:var(--button-hover); color:var(--button-text); }
.button:active:not(:disabled):not([aria-disabled="true"]) { background:var(--button-pressed); }
.button:focus-visible { outline:3px solid var(--button-focus); outline-offset:3px; }
.button:disabled, .button[aria-disabled="true"] { cursor:not-allowed; background:var(--surface-disabled); color:var(--text-disabled); border-color:var(--surface-disabled); }
.button[aria-busy="true"] { cursor:progress; background:var(--button-fill); color:var(--button-text); border-color:var(--button-border); }
.button[aria-busy="true"]::before { content:""; inline-size:1em; block-size:1em; box-sizing:border-box; border:2px solid currentColor; border-inline-end-color:transparent; border-radius:50%; animation:button-spin .8s linear infinite; flex-shrink:0; }
@keyframes button-spin { to { transform:rotate(360deg); } }
.on-dark { color:var(--text-inverse); background:var(--surface-inverse); }
.on-dark .button { --button-fill:var(--action-inverse); --button-text:var(--action-inverse-text); --button-hover:var(--action-inverse-hover); --button-pressed:var(--action-inverse-pressed); --button-focus:var(--focus-ring-inverse); }
.on-dark .button--secondary { --button-fill:transparent; --button-text:var(--text-inverse); --button-border:var(--text-inverse); --button-hover:var(--color-blue-800); --button-pressed:var(--color-blue-900); }
.on-dark .button--tertiary { --button-fill:transparent; --button-text:var(--text-inverse); --button-hover:var(--color-blue-800); --button-pressed:var(--color-blue-900); }
.text-link { width:fit-content; max-inline-size:100%; color:var(--link-default); text-decoration:underline; text-underline-offset:.2em; }
.text-link--subtle { color:inherit; }
.text-link:hover { color:var(--link-hover); }
.text-link:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.on-dark .text-link { width:fit-content; max-inline-size:100%; color:var(--link-inverse); }
.on-dark .text-link:focus-visible { outline-color:var(--focus-ring-inverse); }
.control {
  box-sizing:border-box; display:block; inline-size:100%; min-inline-size:0;
  min-block-size:var(--control-height); padding:var(--space-3) var(--space-4);
  border:1px solid var(--border-control); border-radius:var(--radius-control);
  background:var(--surface-default); color:var(--text-primary);
  font-family:var(--type-body-family); font-size:var(--type-body-size);
  font-weight:var(--type-body-weight); line-height:var(--type-body-line-height);
}
.control::placeholder { color:var(--text-secondary); opacity:1; }
.control:hover:not(:disabled) { border-color:var(--text-primary); }
.control:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.control[aria-invalid="true"] { border:2px solid var(--status-error-text); }
.control:disabled { background:var(--surface-disabled); color:var(--text-disabled); cursor:not-allowed; }
textarea.control { min-block-size:8rem; resize:vertical; }
select.control { padding-inline-end:var(--space-8); }
.choice { display:flex; align-items:flex-start; gap:var(--space-3); min-block-size:var(--control-height); padding-block:var(--space-3); cursor:pointer; }
.choice input { inline-size:1.25rem; block-size:1.25rem; margin:.125rem 0 0; flex-shrink:0; accent-color:var(--action-primary); }
.choice input:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.badge-status { display:inline-flex; align-self:flex-start; align-items:center; padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill); font-family:var(--type-label-family); font-size:var(--type-label-size); font-weight:var(--type-label-weight); line-height:var(--type-label-line-height); background:var(--surface-soft); color:var(--text-primary); }
.badge-status--success { background:var(--status-success-surface); color:var(--status-success-text); }
.badge-status--error { background:var(--status-error-surface); color:var(--status-error-text); }
@media(prefers-reduced-motion:reduce) { .button { transition:none; } .button[aria-busy="true"]::before { animation:none; } }
@media(forced-colors:active) { .button { border-color:ButtonText; } .button:disabled { border-color:GrayText; color:GrayText; } }

/* ===== molecules ===== */
/* Small compositions built from atoms; spacing comes from shared foundations. */
.action-group { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.stack { display:flex; flex-direction:column; gap:var(--space-6); }
.field { display:flex; flex-direction:column; gap:var(--space-2); }
.field__label { font-family:var(--type-label-family); font-size:var(--type-label-size); font-weight:var(--type-label-weight); line-height:var(--type-label-line-height); }
.field__help, .field__error { margin:0; font-family:var(--type-body-small-family); font-size:var(--type-body-small-size); font-weight:var(--type-body-small-weight); line-height:var(--type-body-small-line-height); }
.field__help { color:var(--text-secondary); }
.field__error { color:var(--status-error-text); }
.field__error[hidden] { display:none; }
.card { box-sizing:border-box; display:flex; flex-direction:column; gap:var(--space-6); padding:var(--space-6); border:1px solid var(--border-subtle); border-radius:var(--radius-card); background:var(--surface-default); color:var(--text-primary); min-inline-size:0; }
.card--soft { background:var(--surface-soft); border-color:transparent; }
.card> :where(h2,h3,h4,p) { margin:0; }
.card>.action-group { margin-block-start:auto; }
.section-intro { display:flex; flex-direction:column; gap:var(--space-4); max-inline-size:var(--text-measure-body); }
.section-intro> :where(h1,h2,h3,p) { margin:0; }
.contact-section { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-12); padding:var(--space-8); border-radius:var(--radius-card); background:var(--surface-soft); }
.contact-section form { inline-size:100%; max-inline-size:var(--form-width); }
@media(max-width:47.999rem) { .contact-section { grid-template-columns:1fr; padding:var(--space-6); gap:var(--space-8); } }

/* Customer attribution: shared with the homepage product sections. */
.testimonial { margin:0; padding-block:var(--space-8); border-top:1px solid var(--border-subtle); display:grid; grid-template-columns:1.7fr 1fr; align-items:center; gap:var(--space-12); }
.testimonial blockquote { margin:0; max-width:60ch; }
.testimonial figcaption { display:flex; align-items:center; gap:var(--space-4); }
.testimonial figcaption > div { display:grid; gap:var(--space-1); }
.testimonial figcaption span { color:var(--text-secondary); }
.testimonial .testimonial-avatar { display:grid; place-items:center; flex:0 0 var(--space-12); height:var(--space-12); border-radius:50%; background:var(--surface-soft); color:var(--text-primary); font-size:var(--type-label-large-size); }
.testimonial-avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
@media(max-width:47.999rem) { .testimonial { grid-template-columns:1fr; gap:var(--space-6); } }

/* Native disclosure: no script required for opening or keyboard operation. */
.disclosure { min-width:0; border-top:1px solid var(--border-subtle); }
.disclosure summary { cursor:pointer; list-style:none; position:relative; padding:var(--space-6) var(--space-8) var(--space-6) 0; }
.disclosure summary::-webkit-details-marker { display:none; }
.disclosure summary::after { content:"+"; position:absolute; right:var(--space-1); top:var(--space-6); color:var(--text-secondary); }
.disclosure[open] summary::after { content:"−"; }
.disclosure summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:var(--space-1); }
.disclosure__body { color:var(--text-secondary); padding:0 var(--space-8) var(--space-6) 0; }
.disclosure__body p { margin:0; }

.card.on-dark { background:var(--surface-inverse); color:var(--text-inverse); border-color:transparent; }

/* ===== link underline sweep ===== */
/* Enter from the left; exit toward the right. Background size avoids layout shifts. */
:is(.text-link, .link-swipe) {
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-size:0% 1px;
  background-position:right calc(100% - var(--link-underline-inset, 0px));
  transition:background-size var(--motion-link-duration) ease;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
:is(.text-link, .link-swipe):is(:hover, :focus-visible) {
  text-decoration:none;
  background-size:100% 1px;
  background-position:left calc(100% - var(--link-underline-inset, 0px));
}
.link-swipe:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
@media(prefers-reduced-motion:reduce) {
  :is(.text-link, .link-swipe) { transition:none; }
}
@media(forced-colors:active) {
  :is(.text-link, .link-swipe):is(:hover, :focus-visible) { text-decoration:underline; text-underline-offset:.2em; }
}

/* ===== button border sweep ===== */
/* Authored hover motion: one finite orbit, using the existing brand palette. */
@property --button-sweep-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.button { position: relative; }
.button::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: var(--effect-border-width);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from var(--button-sweep-angle),
    transparent 0deg 210deg,
    var(--color-magenta-200) 250deg,
    var(--color-jade) 285deg,
    var(--color-phosphorus) 320deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.button:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"])::after {
  animation: button-border-sweep var(--motion-button-duration) ease-in-out both;
}
@keyframes button-border-sweep {
  0% { --button-sweep-angle: 0deg; opacity: 0; }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { --button-sweep-angle: 360deg; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .button:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"])::after {
    animation: none;
    opacity: 1;
  }
}
@media (forced-colors: active) {
  .button::after { display: none; }
}

/* ===== activity glow ===== */
/* Authored web interpretation of the supplied Outer Glow guideline example. */
@property --activity-glow-angle {
  syntax: "<angle>";
  initial-value: 45deg;
  inherits: false;
}
.activity-glow { position:relative; isolation:isolate; }
.activity-glow::before, .activity-glow::after {
  content:"";
  position:absolute;
  inset:-2px;
  padding:var(--effect-border-width);
  border-radius:inherit;
  pointer-events:none;
  background:conic-gradient(from var(--activity-glow-angle),var(--color-cesium),var(--color-phosphorus),var(--color-green-800),var(--color-cesium),var(--color-magenta-200),var(--color-cesium));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:activity-glow-orbit var(--motion-glow-duration) linear infinite;
}
.activity-glow::before { z-index:-1; filter:blur(6px); opacity:0.65; inset:-4px; padding:4px; }
.activity-glow::after { z-index:0; opacity:0.9; }
@keyframes activity-glow-orbit { to { --activity-glow-angle:405deg; } }
@media(prefers-reduced-motion:reduce) { .activity-glow::before, .activity-glow::after { animation:none; } }
@media(forced-colors:active) { .activity-glow::before, .activity-glow::after { display:none; } .activity-glow { outline:1px solid CanvasText; } }

/* ===== scroll reveal ===== */
/* Small, finite arrival: no perpetual movement and no layout shifts. */
.reveal-ready { transition:opacity var(--motion-reveal-duration) ease-out var(--reveal-delay,0ms), translate var(--motion-reveal-duration) var(--motion-reveal-easing) var(--reveal-delay,0ms); }
.reveal-pending { opacity:0; translate:0 var(--motion-reveal-offset); }
@media(prefers-reduced-motion:reduce) { .reveal-ready { transition:none; } .reveal-pending { opacity:1; translate:none; } }
@media print { .reveal-pending { opacity:1; translate:none; } }

/* ===== base resets ===== */
:where(button, input, select, textarea) { font: inherit; }