/* ==========================================================================
   Clements & Cox — components
   Every rule below reads tier-2 role tokens only. No hex values, no
   --cc-color-core-* references. If you need a new colour, add a role token.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  /* anchor jumps land below the 72px sticky nav, with breathing room */
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--cc-font-family-body);
  font-size: var(--cc-font-text-md-size);
  line-height: var(--cc-font-text-md-lineHeight);
  font-weight: 300;
  color: var(--cc-color-text-body);
  background: var(--cc-color-surface-bg);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--cc-color-accent-solid);
  color: var(--cc-color-core-green-800);
}

:where(a):focus-visible,
:where(button):focus-visible,
:where([tabindex]):focus-visible {
  outline: 2px solid var(--cc-color-action-focus-outer);
  outline-offset: 3px;
  border-radius: var(--cc-space-core-radius-xs);
}

img, canvas, svg { display: block; max-width: 100%; }


/* ------------------------------------------------------------------ layout */

.section {
  background: var(--cc-color-surface-bg);
  padding-block: var(--cc-space-layout-section-block);
  position: relative;
}

.section--subdued { background: var(--cc-color-surface-bg-subdued); }

.section-container {
  width: 100%;
  max-width: var(--cc-space-layout-content-maxWidth);
  margin-inline: auto;
  padding-inline: var(--cc-space-layout-content-margin);
}

.section-header { max-width: 46ch; margin-bottom: var(--cc-space-core-800); }

.label {
  font-family: var(--cc-font-family-body);
  font-size: var(--cc-font-label-size);
  font-weight: var(--cc-font-label-weight);
  letter-spacing: var(--cc-font-label-letterSpacing);
  text-transform: uppercase;
  color: var(--cc-color-text-label);
  margin: 0 0 var(--cc-space-core-200);
}

.heading-xxl, .heading-xl, .heading-lg, .heading-md, .heading-sm {
  font-family: var(--cc-font-family-display);
  color: var(--cc-color-heading-solid);
  margin: 0;
  text-wrap: pretty;
}

.heading-xxl {
  font-size: var(--cc-font-heading-xxl-size);
  font-weight: var(--cc-font-heading-xxl-weight);
  line-height: var(--cc-font-heading-xxl-lineHeight);
  letter-spacing: var(--cc-font-heading-xxl-letterSpacing);
}
.heading-xl {
  font-size: var(--cc-font-heading-xl-size);
  font-weight: var(--cc-font-heading-xl-weight);
  line-height: var(--cc-font-heading-xl-lineHeight);
  letter-spacing: var(--cc-font-heading-xl-letterSpacing);
}
.heading-lg {
  font-size: var(--cc-font-heading-lg-size);
  font-weight: var(--cc-font-heading-lg-weight);
  line-height: var(--cc-font-heading-lg-lineHeight);
  letter-spacing: var(--cc-font-heading-lg-letterSpacing);
}
.heading-md {
  font-size: var(--cc-font-heading-md-size);
  font-weight: var(--cc-font-heading-md-weight);
  line-height: var(--cc-font-heading-md-lineHeight);
  letter-spacing: var(--cc-font-heading-md-letterSpacing);
}
.heading-sm {
  font-size: var(--cc-font-heading-sm-size);
  font-weight: var(--cc-font-heading-sm-weight);
  line-height: var(--cc-font-heading-sm-lineHeight);
}

.text-lead {
  font-size: var(--cc-font-text-lg-size);
  line-height: var(--cc-font-text-lg-lineHeight);
  color: var(--cc-color-text-body);
  margin: var(--cc-space-core-300) 0 0;
  max-width: 60ch;
}


/* ------------------------------------------------------------------ button */

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-core-100);
  height: var(--cc-space-button-height);
  padding-inline: var(--cc-space-core-300);
  border-radius: var(--cc-space-button-radius);
  font-family: var(--cc-font-family-body);
  font-size: var(--cc-font-text-sm-size);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--cc-motion-duration-nav) var(--cc-motion-ease-soft),
              border-color var(--cc-motion-duration-nav) var(--cc-motion-ease-soft),
              transform var(--cc-motion-duration-nav) var(--cc-motion-ease-soft);
}

.button--primary {
  background: var(--cc-color-action-bg-solid);
  color: var(--cc-color-action-text-onSolid);
}
.button--primary:hover { background: var(--cc-color-action-bg-solidHover); }

.button--secondary {
  background: var(--cc-color-action-bg-quiet);
  color: var(--cc-color-action-text-quiet);
  border-color: var(--cc-color-action-border-quiet);
}
.button--secondary:hover { border-color: var(--cc-color-action-text-quiet); }

.button__arrow { transition: transform var(--cc-motion-duration-nav) var(--cc-motion-ease-out); }
.button:hover .button__arrow { transform: translateX(3px); }


/* --------------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--cc-color-surface-bg);
  border-bottom: 1px solid var(--cc-color-surface-border-quiet);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-core-400);
  height: 72px;
  max-width: var(--cc-space-layout-content-maxWidth);
  margin-inline: auto;
  padding-inline: var(--cc-space-layout-content-margin);
}

.nav__logo {
  font-family: var(--cc-font-family-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cc-color-heading-solid);
  text-decoration: none;
  white-space: nowrap;
}
.nav__logo span { color: var(--cc-color-accent-solid); }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--cc-space-core-400);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* below 900px the text links go, but the CTA must survive — a nav with
   nothing actionable on mobile was a bug, not a design decision */
@media (max-width: 899px) {
  .nav__links li { display: none; }
  .nav__links li:last-child { display: block; }
}

.nav__links a {
  font-size: var(--cc-font-text-sm-size);
  font-weight: 400;
  color: var(--cc-color-text-nav);
  text-decoration: none;
  transition: color var(--cc-motion-duration-nav) var(--cc-motion-ease-soft);
}
.nav__links a:hover { color: var(--cc-color-text-navHover); }
/* the nav CTA is a button — it must not inherit the nav link colour */
.nav__links a.button--primary { color: var(--cc-color-action-text-onSolid); }


/* -------------------------------------------------------------------- hero
   The signature move, ported from Stripe:
   two identical <h1>s stacked, the upper one in a blend mode, over a canvas
   ribbon. The source colours are INPUTS TO A BLEND, not intended colours.
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--cc-space-core-1000) var(--cc-space-core-1200);
  isolation: isolate;
}

.hero__ribbon {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* deliberately overflows to the right, like Stripe's wave */
  left: 32%;
  width: 78%;
  /* Two linear fades intersected, not a radial: a radial ellipse never
     reaches zero at the element's corners/edges, which left a visible seam
     where the canvas ends. These ramps hit true transparency at every edge
     the viewer can see — the long left fade is what dissolves the ribbon
     behind the headline; the right edge stays opaque because it bleeds
     off-viewport like Stripe's wave. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 34%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 34%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-composite: intersect;
}
@media (min-width: 900px) { .hero__ribbon { left: 42%; width: 70%; } }
/* Below 900px the text spans the full width, so the ribbon sits behind the
   body copy. Measured: body text drops to ~1.7:1 at full strength; 0.3 keeps
   it above WCAG AA 4.5:1 on every pixel. */
@media (max-width: 899px) { .hero__ribbon { opacity: 0.3; } }

/* Canvas renders at half resolution and is blurred here rather than per
   stroke — one GPU composite instead of twelve filtered draws per frame. */
.hero__ribbon-canvas {
  width: 100%;
  height: 100%;
  filter: blur(9px) saturate(1.2);
}

/* Static fallback shown until the canvas has actually painted. */
.hero__ribbon-static {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 70% 30%, var(--cc-color-core-gold-200), transparent 70%),
    radial-gradient(50% 60% at 85% 65%, var(--cc-color-core-rose-200), transparent 70%),
    radial-gradient(55% 65% at 55% 55%, var(--cc-color-core-green-200), transparent 70%);
  filter: blur(20px);
  opacity: 1;
  transition: opacity var(--cc-motion-duration-md) linear;
}
.hero--drawn .hero__ribbon-static { opacity: 0; }

.hero__grid {
  position: relative;
  z-index: 1;
  max-width: var(--cc-space-layout-content-maxWidth);
  margin-inline: auto;
  padding-inline: var(--cc-space-layout-content-margin);
}

.hero__eyebrow {
  display: flex;
  align-items: baseline;
  gap: var(--cc-space-core-100);
  font-size: var(--cc-font-text-sm-size);
  color: var(--cc-color-text-label);
  margin: 0 0 var(--cc-space-core-400);
}
.hero__eyebrow-label { letter-spacing: 0.04em; }

/* Odometer — per-digit spans that roll. Stripe's eyebrow technique. */
.odometer {
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 500;
  color: var(--cc-color-accent-text);
  overflow: hidden;
  height: 1.2em;
}
.odometer__digit {
  display: block;
  transition: transform var(--cc-motion-duration-slow) var(--cc-motion-ease-out);
}

.hero__title-stack { position: relative; }

.hero__title {
  /* viewport-height driven, clamped — translations cannot break the hero */
  font-family: var(--cc-font-family-display);
  font-size: max(min(5.4lvh, 3.25rem), 1.9rem);
  font-weight: var(--cc-font-heading-xxl-weight);
  line-height: 1.1;
  letter-spacing: var(--cc-font-heading-xl-letterSpacing);
  max-width: 26ch;
  margin: 0;
  text-wrap: balance;
}

/* Lower copy: read normally where there is no ribbon. */
.hero__title--background {
  position: relative;
  color: var(--cc-color-core-gold-600);
  -webkit-user-select: none;
  user-select: none;
}

/* Upper copy: blends against the ribbon + the copy beneath it. */
.hero__title--foreground {
  position: absolute;
  inset: 0;
  z-index: 2;
  mix-blend-mode: hard-light;
  color: rgba(44, 74, 58, 0.92);
}

/* First sentence stays solid so it is legible regardless of the blend. */
.hero__title-main {
  font-style: normal;
  color: var(--cc-color-heading-solid);
}
.hero__title--foreground .hero__title-main { color: var(--cc-color-core-green-800); }

/* The supporting sentence is the part that blends (the headline stays solid).
   It is long verbatim copy, so it is hidden on narrow viewports rather than
   allowed to push the hero to eight lines — the same call Stripe makes. */
.hero__title-copy { color: inherit; display: none; }
@media (min-width: 900px) { .hero__title-copy { display: inline; } }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-core-150);
  margin-top: var(--cc-space-core-600);
}

/* prefers-reduced-motion: ribbon.js paints one still frame and never starts
   the loop. The canvas must stay visible, or reduced-motion users get only the
   blurred static fallback. */


/* ----------------------------------------------------------- lazy-animation
   Every graphic mounts on intersection then fades. This is the entire
   entrance-animation system — no scroll library, no GSAP.
   ------------------------------------------------------------------------- */

.lazy-animation {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--cc-motion-duration-md) var(--cc-motion-ease-soft),
              transform var(--cc-motion-duration-slow) var(--cc-motion-ease-out);
}
.lazy-animation--loaded { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lazy-animation { transition: none; opacity: 1; transform: none; }
}


/* ------------------------------------------------------------- dom-graphic
   Stripe's core idea: product art is REAL DOM, authored at a fixed artboard
   size and CSS-scaled to fit. Crisp at any DPI, recolours itself through
   role tokens, diffable in git, no export pipeline.

   Usage:
     <div class="dom-graphic" role="img" aria-label="..."
          style="--graphic-source-width:520px; --graphic-source-height:400px;
                 --graphic-aspect-ratio:520/400">
       <div class="dom-graphic__content" aria-hidden="true"> ... </div>
     </div>
   ------------------------------------------------------------------------- */

.dom-graphic {
  --graphic-source-width: 0;
  --graphic-source-height: 0;
  --graphic-aspect-ratio: 1/1;
  --graphic-scale: 1;
  --graphic-max-width: 100%;

  position: relative;
  width: 100%;
  max-width: var(--graphic-max-width);
  margin: 0 auto;
  -webkit-user-select: none;
  user-select: none;
  aspect-ratio: var(--graphic-aspect-ratio);
}

.dom-graphic__content {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--graphic-source-width);
  height: var(--graphic-source-height);
  transform: scale(var(--graphic-scale));
  transform-origin: top left;
}

.dom-graphic--card .dom-graphic__content {
  background: var(--cc-color-graphic-fill);
  border-radius: var(--cc-space-core-radius-md);
  box-shadow: var(--cc-color-graphic-shadow);
  outline: 1px solid var(--cc-color-graphic-stroke-quiet);
}

.dom-graphic--flat .dom-graphic__content {
  background: var(--cc-color-graphic-fill);
  border-radius: var(--cc-space-core-radius-md);
  border: 1px solid var(--cc-color-graphic-stroke);
}


/* --------------------------------------------------- dom-graphic: internals
   Shared vocabulary for the little UI mocks. All token-driven, so the same
   markup renders on cream or on green with no changes.
   ------------------------------------------------------------------------- */

.ui-window {
  position: absolute;
  inset: 0;
  border-radius: var(--cc-space-core-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--cc-font-family-body);
}

.ui-window__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding-inline: 10px;
  background: var(--cc-color-graphic-fill-subdued);
  border-bottom: 1px solid var(--cc-color-graphic-stroke-quiet);
  flex: none;
}
.ui-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cc-color-graphic-ink-quiet); }
.ui-window__title {
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-color-graphic-ink-quiet);
}

.ui-body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }

.ui-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--cc-color-graphic-stroke-quiet);
  border-radius: var(--cc-space-core-radius-sm);
  background: var(--cc-color-graphic-fill);
}
.ui-row--accent { border-color: var(--cc-color-graphic-accent); }

.ui-chip {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--cc-space-core-radius-round);
  background: var(--cc-color-accent-quiet);
  color: var(--cc-color-accent-text);
  white-space: nowrap;
}
.ui-chip--quiet {
  background: transparent;
  border: 1px solid var(--cc-color-graphic-stroke);
  color: var(--cc-color-graphic-ink-quiet);
}

.ui-text { font-size: 11px; color: var(--cc-color-graphic-ink); font-weight: 400; }
.ui-text--quiet { color: var(--cc-color-graphic-ink-quiet); font-size: 10px; }

.ui-bar {
  height: 6px;
  border-radius: var(--cc-space-core-radius-round);
  background: var(--cc-color-graphic-stroke-quiet);
  overflow: hidden;
  flex: 1;
}
.ui-bar__fill { height: 100%; background: var(--cc-color-graphic-accent); border-radius: inherit; }

.ui-avatar {
  width: 20px; height: 20px; flex: none;
  border-radius: 50%;
  background: var(--cc-color-graphic-fill-subdued);
  border: 1px solid var(--cc-color-graphic-stroke);
}

.ui-spacer { flex: 1; }


/* ---------------------------------------------------------- capability grid */

.capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--cc-space-layout-gap);
}

.capability-card {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-core-200);
  padding: var(--cc-space-core-400);
  border: 1px solid var(--cc-color-surface-border-quiet);
  border-radius: var(--cc-space-core-radius-md);
  background: var(--cc-color-surface-bg-raised);
  text-decoration: none;
  transition: border-color var(--cc-motion-duration-slow) var(--cc-motion-ease-out),
              transform var(--cc-motion-duration-slow) var(--cc-motion-ease-out),
              box-shadow var(--cc-motion-duration-slow) var(--cc-motion-ease-out);
}
.capability-card:hover {
  border-color: var(--cc-color-accent-solid);
  transform: translateY(-2px);
  box-shadow: var(--cc-shadow-md);
}

.capability-card__num {
  font-family: var(--cc-font-family-mono);
  font-size: var(--cc-font-text-xs-size);
  letter-spacing: 0.1em;
  color: var(--cc-color-accent-text);
}
.capability-card__desc {
  font-size: var(--cc-font-text-sm-size);
  line-height: var(--cc-font-text-sm-lineHeight);
  color: var(--cc-color-text-body);
  margin: 0;
}
.capability-card__cta {
  margin-top: auto;
  padding-top: var(--cc-space-core-200);
  font-size: var(--cc-font-text-sm-size);
  font-weight: 500;
  color: var(--cc-color-heading-solid);
  display: inline-flex;
  align-items: center;   /* arrow sits on the text's optical centre, not the baseline */
  gap: 6px;
}
.capability-card__cta .button__arrow { flex: none; }
.capability-card:hover .capability-card__cta .button__arrow { transform: translateX(3px); }

.capability-card__graphic {
  aspect-ratio: 16/9;
  border-radius: var(--cc-space-core-radius-sm);
  background: var(--cc-color-graphic-fill-subdued);
  border: 1px solid var(--cc-color-graphic-stroke-quiet);
  overflow: hidden;
  position: relative;
}


/* ---------------------------------------------------------------- estate
   The feature graphic. Hovering a pillar lights the matching piece.
   ------------------------------------------------------------------------- */

.estate {
  display: grid;
  gap: var(--cc-space-core-800);
  align-items: center;
}
@media (min-width: 1080px) { .estate { grid-template-columns: 0.85fr 1.15fr; } }

.estate__list { list-style: none; margin: var(--cc-space-core-400) 0 0; padding: 0; }

.estate__item {
  display: flex;
  align-items: flex-start;
  gap: var(--cc-space-core-200);
  padding: var(--cc-space-core-200);
  border-radius: var(--cc-space-core-radius-sm);
  border-left: 2px solid transparent;
  cursor: default;
  transition: background-color var(--cc-motion-duration-nav) var(--cc-motion-ease-soft),
              border-color var(--cc-motion-duration-nav) var(--cc-motion-ease-soft);
}
.estate__item:hover, .estate__item[data-active="true"] {
  background: var(--cc-color-surface-bg-subdued);
  border-left-color: var(--cc-color-accent-solid);
}
.estate__item-num {
  font-family: var(--cc-font-family-mono);
  font-size: var(--cc-font-text-xs-size);
  color: var(--cc-color-accent-text);
  padding-top: 2px;
}
.estate__item-name {
  font-weight: 500;
  color: var(--cc-color-heading-solid);
  font-size: var(--cc-font-text-md-size);
}
.estate__item-desc {
  font-size: var(--cc-font-text-sm-size);
  color: var(--cc-color-text-body);
  margin: 2px 0 0;
}

/* Panels inside the estate graphic dim unless they are the active one.
   They are hover targets in their own right (mirrors the list on the left),
   so they advertise it. */
.estate-panel {
  cursor: pointer;
  transition: opacity var(--cc-motion-duration-slow) var(--cc-motion-ease-out),
              border-color var(--cc-motion-duration-slow) var(--cc-motion-ease-out);
}
.estate-graphic[data-active] .estate-panel { opacity: 0.32; }
.estate-graphic[data-active] .estate-panel[data-panel-active="true"] {
  opacity: 1;
  border-color: var(--cc-color-graphic-accent);
}


/* ----------------------------------------------------------- proof / stats */

.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--cc-space-core-600);
  margin-top: var(--cc-space-core-800);
}

.proof-item { border-top: 1px solid var(--cc-color-surface-border-solid); padding-top: var(--cc-space-core-300); }
.proof-item__value {
  font-family: var(--cc-font-family-display);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cc-color-accent-solid);
  font-variant-numeric: tabular-nums;
}
.proof-item__label {
  font-size: var(--cc-font-text-sm-size);
  color: var(--cc-color-text-body);
  margin: var(--cc-space-core-150) 0 0;
}


/* ---------------------------------------------------------------- steps */

.steps { display: grid; gap: var(--cc-space-core-600); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--cc-space-core-800); } }

.step { border-top: 1px solid var(--cc-color-surface-border-quiet); padding-top: var(--cc-space-core-300); }
.step__num {
  font-family: var(--cc-font-family-mono);
  font-size: var(--cc-font-text-xs-size);
  letter-spacing: 0.12em;
  color: var(--cc-color-accent-text);
  margin-bottom: var(--cc-space-core-200);
}
.step__body { font-size: var(--cc-font-text-sm-size); color: var(--cc-color-text-body); margin: var(--cc-space-core-150) 0 0; }


/* ------------------------------------------------------------------- cta */

.cta-panel {
  border-radius: var(--cc-space-core-radius-lg);
  padding: clamp(var(--cc-space-core-600), 6vw, var(--cc-space-core-1200));
  background: var(--cc-color-surface-bg-subdued);
  border: 1px solid var(--cc-color-surface-border-quiet);
  text-align: center;
}
.cta-panel .heading-lg { max-width: 30ch; margin-inline: auto; }
.cta-panel .text-lead { margin-inline: auto; }
.cta-panel .hero__actions { justify-content: center; }


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

.footer { background: var(--cc-color-surface-bg); padding-block: var(--cc-space-core-800); border-top: 1px solid var(--cc-color-surface-border-quiet); }
.footer__inner {
  max-width: var(--cc-space-layout-content-maxWidth);
  margin-inline: auto;
  padding-inline: var(--cc-space-layout-content-margin);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-core-400);
  align-items: center;
  justify-content: space-between;
}
.footer__links { display: flex; flex-wrap: wrap; gap: var(--cc-space-core-300); list-style: none; margin: 0; padding: 0; }
.footer__links a { font-size: var(--cc-font-text-sm-size); color: var(--cc-color-text-nav); text-decoration: none; }
.footer__links a:hover { color: var(--cc-color-text-navHover); }
.footer__copy { font-size: var(--cc-font-text-xs-size); color: var(--cc-color-text-subdued); margin: 0; }


/* -------------------------------------------------------------- hairline
   Stripe's stats-section border trick: one element, mode-aware blending.
   ------------------------------------------------------------------------- */

.hairline {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: min(var(--cc-space-layout-content-maxWidth), calc(100% - var(--cc-space-layout-content-margin) * 2));
  transform: translateX(-50%);
  border-inline: 1px solid var(--cc-color-surface-border-quiet);
  mix-blend-mode: var(--cc-blend-hairline);
  pointer-events: none;
  z-index: 0;
}
.section > .section-container { position: relative; z-index: 1; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}