/*
 * Stratamize core — shared primitives for the marketing site AND the dashboard.
 * ---------------------------------------------------------------------------
 * Load order:  fonts/dm-sans.css  ->  dist/stratamize-tokens.css  ->  [vendor css]
 *              ->  css/stratamize-core.css  ->  page or application styles
 *
 * Rules of this file (enforced by tools/brand-lint.mjs):
 *   - every colour / space / radius / shadow / font / duration is var(--stz-*); no literals.
 *   - component-local custom properties use the --_private prefix; --stz-* is reserved for the spine.
 *   - only transform / opacity / clip-path / filter / background-position animate, and only inside
 *     @media (prefers-reduced-motion: no-preference).
 *   - base element styles are wrapped in :where() (specificity 0) so page-specific styles
 *     keep priority on marketing pages, while the dashboard (no vendor base) gets them as-is.
 *
 * Sections:  1 base  2 motifs  3 buttons  4 tags & badges  5 cards  6 forms  7 decor
 *            8 focus  9 utilities  10 motion
 */

/* ── 1. Base ─────────────────────────────────────────────────────────────── */

:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(body) {
  margin: 0;
  background-color: var(--stz-surface-canvas);
  color: var(--stz-text-muted);
  font-family: var(--stz-font-body);
  font-size: var(--stz-size-body);
  font-weight: var(--stz-weight-regular);
  line-height: var(--stz-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 var(--stz-heading-gap);
  color: var(--stz-text);
  font-family: var(--stz-font-display);
  font-weight: var(--stz-weight-medium);
  letter-spacing: var(--stz-tracking-heading);
}
:where(h1) { font-size: var(--stz-size-h1); line-height: var(--stz-leading-display); letter-spacing: var(--stz-tracking-h1); }
:where(h2) { font-size: var(--stz-size-h2); line-height: var(--stz-leading-display); letter-spacing: var(--stz-tracking-h2); }
:where(h3) { font-size: var(--stz-size-h3); line-height: var(--stz-lh-h3); }
:where(h4) { font-size: var(--stz-size-h4); line-height: var(--stz-lh-h4); }
:where(h5) { font-size: var(--stz-size-h5); line-height: var(--stz-lh-h5); }
:where(h6) { font-size: var(--stz-size-h6); line-height: var(--stz-lh-h6); }

:where(p) { margin: 0 0 var(--stz-paragraph-gap); }

:where(a) {
  color: var(--stz-link);
  text-decoration: none;
}
:where(a:hover) { color: var(--stz-link-hover); }

:where(strong, b) { color: var(--stz-text); font-weight: var(--stz-weight-medium); }

:where(img, svg, video) { max-width: 100%; }

::selection {
  background-color: var(--stz-surface-brand);
  color: var(--stz-on-surface-brand);
}

/* ── 2. Motifs ───────────────────────────────────────────────────────────── */

/* The crimson "_" dash before a heading: 20x4 bar, 10px gap, sitting on the text baseline.
   Use the class on the heading, or drop an empty <span class="stz-dash"> in front of the words. */
.stz-dash-heading::before,
.stz-dash {
  content: "";
  display: inline-block;
  width: var(--stz-dash-w);
  height: var(--stz-dash-h);
  margin-right: var(--stz-dash-gap);
  background-color: var(--stz-dash-color);
  vertical-align: baseline;
}
.stz-dash-heading--on-brand::before { background-color: var(--stz-on-surface-brand); }

/* Huge outlined numerals (01 / 02 / 03). Decorative: always aria-hidden="true". */
.stz-numeral-outline {
  display: inline-block;
  color: transparent;
  font-family: var(--stz-font-display);
  font-size: var(--stz-size-numeral);
  font-weight: var(--stz-weight-medium);
  line-height: var(--stz-leading-numeral);
  letter-spacing: var(--stz-tracking-display);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: var(--stz-numeral-stroke-width) var(--stz-numeral-stroke);
  user-select: none;
}
.stz-numeral-outline--sm {
  font-size: var(--stz-size-h1);
  font-weight: var(--stz-weight-bold);
  line-height: var(--stz-leading-display);
  letter-spacing: var(--stz-tracking-tight);
}
.stz-numeral-outline--soft { opacity: 0.5; }
.stz-numeral-outline--on-brand { -webkit-text-stroke-color: var(--stz-on-surface-brand); }
.stz-numeral-outline--neutral { -webkit-text-stroke-color: var(--stz-text); }

/* Overline / eyebrow label (uppercase, tracked). */
.stz-overline {
  display: inline-block;
  font-family: var(--stz-font-display);
  font-size: var(--stz-size-small);
  font-weight: var(--stz-weight-medium);
  line-height: var(--stz-lh-label);
  letter-spacing: var(--stz-tracking-overline);
  text-transform: uppercase;
}
.stz-overline--wide { letter-spacing: var(--stz-tracking-overline-wide); }

.stz-lead {
  font-size: var(--stz-size-lead);
  line-height: var(--stz-lh-lead);
}

/* Underlined action link: uppercase, 1px currentColor rule. */
.stz-link-underline {
  display: inline-block;
  border-bottom: var(--stz-border-width-hairline) solid currentColor;
  color: var(--stz-text);
  font-family: var(--stz-font-display);
  font-size: var(--stz-size-small);
  font-weight: var(--stz-weight-medium);
  line-height: var(--stz-lh-label);
  text-transform: uppercase;
}
.stz-link-underline:hover { color: var(--stz-link-hover); }

/* ── 3. Buttons ──────────────────────────────────────────────────────────── */
/* Anatomy: <a|button class="stz-btn stz-btn--primary">
              <span class="stz-btn__label">Text</span><i class="stz-btn__arrow ..." aria-hidden="true"></i>
            </a>
   Sizes: --sm --lg --xl (default = medium).  Shapes: --pill, --square.  Extras: --shadow, --reveal, --block, --icon. */

.stz-btn {
  --_pad: var(--stz-btn-pad-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--stz-space-1);
  padding: var(--_pad);
  border: var(--stz-border-width-strong) solid transparent;
  border-radius: var(--stz-radius-control);
  background-color: transparent;
  color: var(--stz-text);
  font-family: var(--stz-font-display);
  font-size: var(--stz-size-btn-md);
  font-weight: var(--stz-weight-medium);
  line-height: var(--stz-lh-btn-md);
  letter-spacing: var(--stz-tracking-ui);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.stz-btn:hover { text-decoration: none; }

.stz-btn--sm { --_pad: var(--stz-btn-pad-sm); font-size: var(--stz-size-btn-sm); line-height: var(--stz-lh-btn-sm); }
.stz-btn--lg { --_pad: var(--stz-btn-pad-lg); font-size: var(--stz-size-btn-lg); line-height: var(--stz-lh-btn-lg); }
.stz-btn--xl { --_pad: var(--stz-btn-pad-xl); font-size: var(--stz-size-btn-xl); line-height: var(--stz-lh-btn-xl); }

.stz-btn--pill { --_pad: var(--stz-btn-pad-md-pill); border-radius: var(--stz-radius-pill); }
.stz-btn--pill.stz-btn--sm { --_pad: var(--stz-btn-pad-sm-pill); }
.stz-btn--pill.stz-btn--lg { --_pad: var(--stz-btn-pad-lg-pill); }
.stz-btn--pill.stz-btn--xl { --_pad: var(--stz-btn-pad-xl-pill); }
.stz-btn--square { border-radius: var(--stz-radius-none); }
.stz-btn--block { display: flex; width: 100%; }
.stz-btn--normal-case { text-transform: none; letter-spacing: var(--stz-tracking-normal); }

/* Icon-only button: needs aria-label. Square touch target; add --pill for a circle. */
.stz-btn--icon {
  --_pad: 0;
  width: var(--stz-control-h-md);
  height: var(--stz-control-h-md);
  flex: none;
}
.stz-btn--icon.stz-btn--sm { width: var(--stz-control-h-sm); height: var(--stz-control-h-sm); }
.stz-btn--icon.stz-btn--lg { width: var(--stz-control-h-lg); height: var(--stz-control-h-lg); }
.stz-btn--icon.stz-btn--pill { border-radius: var(--stz-radius-round); }

/* Variants */
.stz-btn--primary {
  border-color: var(--stz-action-primary-border);
  background-color: var(--stz-action-primary);
  color: var(--stz-on-action-primary);
}
.stz-btn--primary:hover { border-color: var(--stz-action-primary-hover); background-color: var(--stz-action-primary-hover); color: var(--stz-on-action-primary); }
.stz-btn--primary:active { border-color: var(--stz-action-primary-active); background-color: var(--stz-action-primary-active); }

/* Dark button: #2b2b2f in both themes. Always carries a text label (fill is ~1.2:1 on dark). */
.stz-btn--dark {
  border-color: var(--stz-action-neutral);
  background-color: var(--stz-action-neutral);
  color: var(--stz-on-action-neutral);
}
.stz-btn--dark:hover,
.stz-btn--dark:active { border-color: var(--stz-action-neutral-hover); background-color: var(--stz-action-neutral-hover); color: var(--stz-on-action-neutral); }

/* Inverse neutral: white on dark, ink on light. */
.stz-btn--secondary {
  border-color: var(--stz-action-secondary);
  background-color: var(--stz-action-secondary);
  color: var(--stz-on-action-secondary);
}
.stz-btn--secondary:hover,
.stz-btn--secondary:active { border-color: var(--stz-action-secondary-hover); background-color: var(--stz-action-secondary-hover); color: var(--stz-on-action-secondary); }

/* Outline button: hairline ring, fills on hover. */
.stz-btn--outline {
  border-width: var(--stz-border-width-hairline);
  border-color: var(--stz-action-ghost-border);
  color: var(--stz-text);
}
.stz-btn--outline:hover,
.stz-btn--outline:active { border-color: var(--stz-action-ghost-hover); background-color: var(--stz-action-ghost-hover); color: var(--stz-on-action-ghost-hover); }

.stz-btn--ghost { color: var(--stz-text); }
.stz-btn--ghost:hover,
.stz-btn--ghost:active { background-color: var(--stz-accent-subtle); color: var(--stz-text); }

/* Destructive actions are an OUTLINE danger button — never the crimson primary. */
.stz-btn--danger {
  border-width: var(--stz-border-width-hairline);
  border-color: var(--stz-status-danger);
  color: var(--stz-status-danger);
}
.stz-btn--danger:hover,
.stz-btn--danger:active { background-color: var(--stz-status-danger); color: var(--stz-on-status-danger); }

/* Link button: 2px underline, no box. */
.stz-btn--link {
  --_pad: 0 0 var(--stz-space-1);
  border-width: 0 0 var(--stz-border-width-strong);
  border-color: currentColor;
  border-radius: var(--stz-radius-none);
  letter-spacing: var(--stz-tracking-normal);
}
.stz-btn--link:hover { color: var(--stz-link-hover); }

/* On a crimson field the primary pill is separated by its shadow. */
.stz-btn--shadow { box-shadow: var(--stz-shadow-btn); }
.stz-btn--shadow:hover { box-shadow: var(--stz-shadow-btn-hover); }

.stz-btn:disabled,
.stz-btn[aria-disabled="true"],
.stz-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Hover arrow reveal: label slides left, arrow slides in. */
.stz-btn__label,
.stz-btn__arrow { display: inline-block; }
.stz-btn--reveal .stz-btn__arrow {
  margin-left: calc(var(--stz-btn-arrow-shift) * -2);
  opacity: 0;
}
.stz-btn--reveal:hover .stz-btn__label,
.stz-btn--reveal:focus-visible .stz-btn__label { transform: translateX(calc(var(--stz-btn-arrow-shift) * -1)); }
.stz-btn--reveal:hover .stz-btn__arrow,
.stz-btn--reveal:focus-visible .stz-btn__arrow { opacity: 1; transform: translateX(var(--stz-btn-arrow-shift)); }

/* ── 4. Tags & badges ────────────────────────────────────────────────────── */

/* The "POPULAR" label: crimson, 2px radius, uppercase. */
.stz-tag {
  display: inline-block;
  padding: 0 var(--stz-space-4);
  border-radius: var(--stz-radius-tag);
  background-color: var(--stz-surface-brand);
  color: var(--stz-on-surface-brand);
  font-family: var(--stz-font-display);
  font-size: var(--stz-size-label);
  font-weight: var(--stz-weight-medium);
  line-height: var(--stz-lh-body);
  text-transform: uppercase;
  white-space: nowrap;
}
.stz-tag--neutral { background-color: var(--stz-action-neutral); color: var(--stz-on-action-neutral); }
.stz-tag--outline {
  border: var(--stz-border-width-hairline) solid var(--stz-border-default);
  background-color: transparent;
  color: var(--stz-text);
}
.stz-tag--sm { padding: 0 var(--stz-space-2); font-size: var(--stz-size-micro); line-height: var(--stz-lh-label); }

/* Status badge: subtle wash + status text (gated >= 4.5:1). Always pair colour with a word. */
.stz-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--stz-space-1);
  padding: 0 var(--stz-space-2);
  border-radius: var(--stz-radius-pill);
  background-color: var(--stz-status-neutral-subtle);
  color: var(--stz-status-neutral);
  font-family: var(--stz-font-display);
  font-size: var(--stz-size-caption);
  font-weight: var(--stz-weight-medium);
  line-height: var(--stz-lh-label);
  white-space: nowrap;
}
.stz-badge--success { background-color: var(--stz-status-success-subtle); color: var(--stz-status-success); }
.stz-badge--info    { background-color: var(--stz-status-info-subtle);    color: var(--stz-status-info); }
.stz-badge--warning { background-color: var(--stz-status-warning-subtle); color: var(--stz-status-warning); }
.stz-badge--danger  { background-color: var(--stz-status-danger-subtle);  color: var(--stz-status-danger); }
.stz-badge--brand   { background-color: var(--stz-surface-brand);         color: var(--stz-on-surface-brand); }
.stz-badge--solid.stz-badge--success { background-color: var(--stz-status-success); color: var(--stz-on-status-success); }
.stz-badge--solid.stz-badge--info    { background-color: var(--stz-status-info);    color: var(--stz-on-status-info); }
.stz-badge--solid.stz-badge--warning { background-color: var(--stz-status-warning); color: var(--stz-on-status-warning); }
.stz-badge--solid.stz-badge--danger  { background-color: var(--stz-status-danger);  color: var(--stz-on-status-danger); }
.stz-badge__dot {
  flex: none;
  width: var(--stz-space-2);
  height: var(--stz-space-2);
  border-radius: var(--stz-radius-round);
  background-color: currentColor;
}

/* ── 5. Cards ────────────────────────────────────────────────────────────── */
/* Pricing / testimonial card: hairline border, 6px radius, generous padding. */

.stz-card {
  position: relative;
  padding: var(--stz-space-8);
  border: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
  border-radius: var(--stz-radius-card);
  background-color: var(--stz-surface-panel);
  color: var(--stz-text-muted);
}
.stz-card--flush { background-color: transparent; }
.stz-card--canvas { background-color: var(--stz-surface-canvas); }
/* Crimson text is barred on raised surfaces: use --stz-text there. */
.stz-card--raised { background-color: var(--stz-surface-raised); box-shadow: var(--stz-shadow-card); }
.stz-card--feature { background-color: var(--stz-surface-canvas); box-shadow: var(--stz-shadow-feature); }
.stz-card--compact { padding: var(--stz-space-5); }

/* The crimson stat card ("35 international speakers"). Everything inside uses on-surface-brand. */
.stz-card--brand {
  --_focus-ring: var(--stz-focus-ring-on-brand);
  border-color: transparent;
  border-radius: var(--stz-radius-media);
  background-color: var(--stz-surface-brand);
  color: var(--stz-on-surface-brand);
}
.stz-card--brand :where(h1, h2, h3, h4, h5, h6, a, strong) { color: var(--stz-on-surface-brand); }

.stz-card__tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
.stz-card__eyebrow {
  display: block;
  color: var(--stz-text-muted);
  font-family: var(--stz-font-display);
  font-size: var(--stz-size-body-sm);
  font-weight: var(--stz-weight-medium);
  line-height: var(--stz-lh-label);
  text-transform: uppercase;
}
.stz-card__title {
  margin: 0 0 var(--stz-space-2);
  color: var(--stz-text);
  font-family: var(--stz-font-display);
  font-size: var(--stz-size-title);
  font-weight: var(--stz-weight-medium);
  line-height: var(--stz-lh-body);
  letter-spacing: var(--stz-tracking-normal);
}
.stz-card__icon { color: var(--stz-accent-decor); font-size: var(--stz-pictogram); line-height: 1; }

/* Hairline list rows inside cards (pricing features). */
.stz-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.stz-list > li {
  padding: var(--stz-space-2) 0;
  border-bottom: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
}
.stz-list > li:last-child { border-bottom: 0; }
.stz-list strong,
.stz-list b { color: var(--stz-text); font-weight: var(--stz-weight-regular); }

/* ── 6. Forms ────────────────────────────────────────────────────────────── */

.stz-field {
  display: grid;
  gap: var(--stz-space-1);
  margin-bottom: var(--stz-space-4);
}
.stz-label {
  color: var(--stz-text);
  font-family: var(--stz-font-display);
  font-size: var(--stz-size-label);
  font-weight: var(--stz-weight-medium);
  line-height: var(--stz-lh-label);
}
.stz-hint {
  color: var(--stz-text-muted);
  font-size: var(--stz-size-caption);
  line-height: var(--stz-lh-label);
}
.stz-error-text {
  color: var(--stz-status-danger);
  font-size: var(--stz-size-caption);
  line-height: var(--stz-lh-label);
}

/* Control borders use border-control (>= 3:1); the W10 hairline is decoration only. */
.stz-input,
.stz-select,
.stz-textarea {
  display: block;
  width: 100%;
  min-height: var(--stz-control-h-md);
  margin: 0;
  padding: var(--stz-input-pad);
  border: var(--stz-border-width-hairline) solid var(--stz-border-control);
  border-radius: var(--stz-radius-control);
  background-color: transparent;
  color: var(--stz-text);
  font-family: var(--stz-font-body);
  font-size: var(--stz-size-small);
  line-height: var(--stz-lh-label);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.stz-input::placeholder,
.stz-textarea::placeholder { color: var(--stz-text-muted); opacity: 1; }
.stz-input:hover,
.stz-select:hover,
.stz-textarea:hover { border-color: var(--stz-text-muted); }
.stz-input[aria-invalid="true"],
.stz-select[aria-invalid="true"],
.stz-textarea[aria-invalid="true"],
.stz-input.is-invalid,
.stz-select.is-invalid,
.stz-textarea.is-invalid { border-color: var(--stz-status-danger); }
.stz-input:disabled,
.stz-select:disabled,
.stz-textarea:disabled {
  background-color: var(--stz-surface-sunken);
  opacity: 0.6;
  cursor: not-allowed;
}
.stz-input--sm,
.stz-select.stz-input--sm { min-height: var(--stz-control-h-sm); padding: var(--stz-input-pad-sm); }
.stz-input--lg { min-height: var(--stz-control-h-lg); }
.stz-input--filled { background-color: var(--stz-surface-sunken); }

/* Chevron drawn with two gradients so it follows the text colour token. */
.stz-select {
  padding-right: var(--stz-space-10);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--stz-text-muted) 50%),
    linear-gradient(135deg, var(--stz-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - var(--stz-space-5)) 50%,
    calc(100% - var(--stz-space-4)) 50%;
  background-size: var(--stz-space-1) var(--stz-space-1);
  background-repeat: no-repeat;
  cursor: pointer;
}
.stz-select option { background-color: var(--stz-surface-panel); color: var(--stz-text); }

.stz-textarea {
  min-height: calc(var(--stz-control-h-lg) * 2);
  resize: vertical;
}

/* Input with an attached square button on the right. */
.stz-input-group { position: relative; display: block; }
.stz-input-group > .stz-input { padding-right: var(--stz-space-12); }
.stz-input-group > .stz-btn {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border-radius: 0 var(--stz-radius-control) var(--stz-radius-control) 0;
}

/* Checkbox + radio: <label class="stz-check-label"><input type="checkbox" class="stz-check"> Text</label> */
.stz-check-label {
  display: inline-flex;
  align-items: center;
  gap: var(--stz-space-2);
  min-height: var(--stz-touch-target-min);
  color: var(--stz-text);
  font-size: var(--stz-size-small);
  line-height: var(--stz-lh-label);
  cursor: pointer;
}
.stz-check {
  display: inline-grid;
  flex: none;
  place-content: center;
  width: var(--stz-icon-sm);
  height: var(--stz-icon-sm);
  margin: 0;
  border: var(--stz-border-width-hairline) solid var(--stz-border-control);
  border-radius: var(--stz-radius-control);
  background-color: transparent;
  vertical-align: middle;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.stz-check::before {
  content: "";
  width: calc(var(--stz-space-1) + 1px);
  height: calc(var(--stz-space-2) - 1px);
  margin-top: -2px;
  border: solid var(--stz-on-action-primary);
  border-width: 0 var(--stz-border-width-strong) var(--stz-border-width-strong) 0;
  transform: rotate(45deg) scale(0);
}
.stz-check:checked { border-color: var(--stz-action-primary); background-color: var(--stz-action-primary); }
.stz-check:checked::before { transform: rotate(45deg) scale(1); }
.stz-check[type="radio"] { border-radius: var(--stz-radius-round); }
.stz-check[type="radio"]::before {
  width: var(--stz-space-2);
  height: var(--stz-space-2);
  margin: 0;
  border: 0;
  border-radius: var(--stz-radius-round);
  background-color: var(--stz-on-action-primary);
  transform: scale(0);
}
.stz-check[type="radio"]:checked::before { transform: scale(1); }
.stz-check:disabled { opacity: 0.5; cursor: not-allowed; }

/* Switch: <input type="checkbox" role="switch" class="stz-switch"> */
.stz-switch {
  position: relative;
  flex: none;
  width: var(--stz-touch-target);
  height: var(--stz-touch-target-min);
  margin: 0;
  border: var(--stz-border-width-hairline) solid var(--stz-border-control);
  border-radius: var(--stz-radius-pill);
  background-color: var(--stz-surface-sunken);
  vertical-align: middle;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.stz-switch::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: calc(var(--stz-touch-target-min) - 8px);
  height: calc(var(--stz-touch-target-min) - 8px);
  border-radius: var(--stz-radius-round);
  background-color: var(--stz-text-muted);
  transform: translate(0, -50%);
}
.stz-switch:checked { border-color: var(--stz-action-primary); background-color: var(--stz-action-primary); }
.stz-switch:checked::before {
  background-color: var(--stz-on-action-primary);
  transform: translate(calc(var(--stz-touch-target) - var(--stz-touch-target-min)), -50%);
}
.stz-switch:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── 7. Decor ────────────────────────────────────────────────────────────── */

/* Crimson quarter-ring that fades along its sweep.
   Markup: <section class="stz-arc-host">
             <span class="stz-arc-layer" aria-hidden="true"><span class="stz-arc stz-arc--tr"></span></span>
           The layer clips the ring to the section without clipping the section's own content
           (e.g. the rotating badge that overlaps the previous section).
   Placements: --tr (about / footer), --br (packages), --bl (experts / schedule). */
.stz-arc-host {
  position: relative;
  isolation: isolate;
}
.stz-arc-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.stz-arc {
  --_r: var(--stz-arc-radius);
  --_band: var(--stz-arc-band);
  --_from: 180deg;
  position: absolute;
  width: calc(var(--_r) * 2);
  height: calc(var(--_r) * 2);
  border-radius: var(--stz-radius-round);
  background-image: conic-gradient(from var(--_from), var(--stz-arc-color) 0deg, var(--stz-arc-color) 22deg, transparent 88deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - var(--_band) - 1px), var(--stz-arc-color) calc(100% - var(--_band)), var(--stz-arc-color) calc(100% - 1px), transparent 100%);
  mask-image: radial-gradient(closest-side, transparent calc(100% - var(--_band) - 1px), var(--stz-arc-color) calc(100% - var(--_band)), var(--stz-arc-color) calc(100% - 1px), transparent 100%);
  pointer-events: none;
}
/* centre on the top-right corner, visible quadrant sweeps from bottom (solid) to left (clear) */
.stz-arc--tr { top: calc(var(--_r) * -1); right: calc(var(--_r) * -1); --_from: 180deg; }
/* same sweep, the ring's lowest point sitting a band above the bottom-right corner */
.stz-arc--br { right: calc(var(--_r) * -1); bottom: calc(var(--stz-arc-band) + var(--stz-space-7)); --_from: 180deg; }
/* centre on the left edge near the bottom, sweeps from top (solid) to right (clear) */
.stz-arc--bl { left: calc(var(--_r) * -1); bottom: calc(var(--_band) - var(--_r)); --_from: 0deg; }
/* centre on the bottom edge, just in from the left; fades in from the top towards the right
   (a horizontal section accent). Pair with --sm. */
.stz-arc--bottom {
  bottom: calc(var(--_r) * -1);
  left: calc(var(--stz-arc-band) + var(--stz-space-6) - var(--_r));
  background-image: conic-gradient(from 0deg, transparent 0deg, var(--stz-arc-color) 66deg, var(--stz-arc-color) 90deg, transparent 90deg);
}
.stz-arc--sm { --_r: calc(var(--stz-arc-radius) * 0.62); --_band: var(--stz-arc-band-sm); }
@media (max-width: 991px) { .stz-arc--hide-md, .stz-arc-layer--hide-md { display: none; } }
@media (max-width: 767px) { .stz-arc--hide-sm, .stz-arc-layer--hide-sm { display: none; } }

/* Faint vertical rules over a crimson field. */
.stz-rules {
  background-image: repeating-linear-gradient(90deg,
    transparent 0,
    transparent calc(var(--stz-rules-spacing) - 1px),
    var(--stz-rules-color) calc(var(--stz-rules-spacing) - 1px),
    var(--stz-rules-color) var(--stz-rules-spacing));
}

/* Rotating circular text badge. Markup: an inline <svg viewBox="0 0 162 162"> with a <textPath>.
   Decorative: aria-hidden="true". Spins only when the viewer allows motion. */
.stz-rotating-badge {
  display: inline-block;
  width: var(--stz-orbit-badge);
  height: var(--stz-orbit-badge);
  color: var(--stz-text);
}
.stz-rotating-badge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.stz-rotating-badge text {
  fill: currentColor;
  font-family: var(--stz-font-display);
  font-size: var(--stz-size-caption);
  font-weight: var(--stz-weight-medium);
  letter-spacing: var(--stz-tracking-overline-wide);
  text-transform: uppercase;
}
.stz-rotating-badge .stz-rotating-badge__dot { fill: var(--stz-accent-decor); }

/* Divider */
.stz-divider {
  height: 0;
  margin: var(--stz-space-6) 0;
  border: 0;
  border-top: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
}
.stz-divider--strong { border-top-color: var(--stz-border-default); }
.stz-divider--vertical {
  align-self: stretch;
  width: 0;
  height: auto;
  margin: 0 var(--stz-space-6);
  border-top: 0;
  border-left: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
}

/* Round icon disc (speaker-details contact icons) and avatars */
.stz-icon-disc {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--stz-avatar-sm);
  height: var(--stz-avatar-sm);
  border-radius: var(--stz-radius-round);
  background-color: var(--stz-surface-inverse);
  color: var(--stz-on-surface-inverse);
  box-shadow: var(--stz-shadow-sm);
}
.stz-icon-disc--brand { background-color: var(--stz-surface-brand); color: var(--stz-on-surface-brand); }
.stz-icon-disc--subtle { background-color: var(--stz-accent-subtle); color: var(--stz-accent-text); box-shadow: none; }

.stz-avatar {
  display: inline-block;
  flex: none;
  width: var(--stz-avatar-md);
  height: var(--stz-avatar-md);
  border-radius: var(--stz-radius-round);
  object-fit: cover;
}
.stz-avatar--sm { width: var(--stz-avatar-sm); height: var(--stz-avatar-sm); }
.stz-avatar--lg { width: var(--stz-avatar-lg); height: var(--stz-avatar-lg); }

/* ── 8. Focus ────────────────────────────────────────────────────────────── */
/* Solid ring, >= 3:1 everywhere: accent-text tint on dark, crimson on light, white inside crimson
   fields. A brand surface sets --_focus-ring so every control inside it flips to the white ring. */

:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--_focus-ring, var(--stz-focus-ring));
  outline-offset: var(--stz-focus-offset);
}
.stz-input:focus-visible,
.stz-select:focus-visible,
.stz-textarea:focus-visible { outline-offset: var(--stz-focus-width); }
.stz-check:focus-visible,
.stz-switch:focus-visible { outline-offset: var(--stz-focus-width); }

.stz-surface-brand,
.stz-on-brand,
[data-surface="brand"] { --_focus-ring: var(--stz-focus-ring-on-brand); }

/* ── 9. Utilities ────────────────────────────────────────────────────────── */

/* Interim wordmark (NOT an approved mark). Inline the SVG from assets/logo so it follows the
   surface: letters = currentColor, the dash = crimson (or on-brand white on a crimson field). */
.stz-wordmark {
  display: block;
  width: auto;
  height: calc(var(--stz-logo-h) * 0.75);
  color: var(--stz-text);
}
.stz-wordmark path { fill: currentColor; }
.stz-wordmark .stz-wordmark__dash { fill: var(--stz-dash-color); }
.stz-wordmark--lg { height: var(--stz-logo-h); }
.stz-on-brand .stz-wordmark .stz-wordmark__dash,
.stz-surface-brand .stz-wordmark .stz-wordmark__dash { fill: var(--stz-on-surface-brand); }

.stz-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.stz-sr-only-focusable:focus,
.stz-sr-only-focusable:focus-within {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* Skip link: hidden until focused. */
.stz-skip-link {
  position: absolute;
  top: var(--stz-space-2);
  left: var(--stz-space-2);
  z-index: var(--stz-z-toast);
  padding: var(--stz-space-2) var(--stz-space-4);
  border-radius: var(--stz-radius-control);
  background-color: var(--stz-surface-inverse);
  color: var(--stz-on-surface-inverse);
  font-family: var(--stz-font-display);
  font-weight: var(--stz-weight-medium);
  transform: translateY(-200%);
}
.stz-skip-link:focus { color: var(--stz-on-surface-inverse); transform: none; }

/* Surfaces: each sets its one legal foreground */
.stz-surface-canvas { background-color: var(--stz-surface-canvas); color: var(--stz-text-muted); }
.stz-surface-panel  { background-color: var(--stz-surface-panel);  color: var(--stz-text-muted); }
.stz-surface-raised { background-color: var(--stz-surface-raised); color: var(--stz-text); }
.stz-surface-sunken { background-color: var(--stz-surface-sunken); color: var(--stz-text-muted); }
.stz-surface-shell  { background-color: var(--stz-surface-shell);  color: var(--stz-on-surface-shell); }
.stz-surface-inverse { background-color: var(--stz-surface-inverse); color: var(--stz-on-surface-inverse); }
.stz-surface-brand  { background-color: var(--stz-surface-brand);  color: var(--stz-on-surface-brand); }

/* Text roles */
.stz-text        { color: var(--stz-text); }
.stz-text-muted  { color: var(--stz-text-muted); }
.stz-text-subtle { color: var(--stz-text-subtle); } /* large text / decoration only */
.stz-text-accent { color: var(--stz-accent-text); } /* never on surface-raised */
.stz-text-on-brand { color: var(--stz-on-surface-brand); }
.stz-text-success { color: var(--stz-status-success); }
.stz-text-warning { color: var(--stz-status-warning); }
.stz-text-danger  { color: var(--stz-status-danger); }
.stz-text-info    { color: var(--stz-status-info); }
.stz-icon-accent { color: var(--stz-accent-decor); }

.stz-hairline-top    { border-top: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.stz-hairline-bottom { border-bottom: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.stz-hairline-start  { border-left: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }

/* "[Sample]" marker for placeholder copy and imagery (rule 7). */
.stz-sample {
  display: inline-block;
  padding: 0 var(--stz-space-1);
  border: var(--stz-border-width-hairline) dashed var(--stz-border-default);
  border-radius: var(--stz-radius-tag);
  color: var(--stz-text-muted);
  font-family: var(--stz-font-utility);
  font-size: var(--stz-size-nano);
  font-weight: var(--stz-weight-regular);
  line-height: var(--stz-lh-label);
  letter-spacing: var(--stz-tracking-normal);
  text-transform: uppercase;
  vertical-align: middle;
}
.stz-on-brand .stz-sample,
.stz-surface-brand .stz-sample { border-color: var(--stz-on-surface-brand); color: var(--stz-on-surface-brand); }

/* ── 10. Motion ──────────────────────────────────────────────────────────── */
/* Keyframes animate transform/opacity only. Every transition/animation lives behind no-preference;
   ambient loops (float, spin) additionally pause with .stz-motion-paused on any ancestor. */

@keyframes stz-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes stz-float {
  from { transform: translateY(0); }
  to { transform: translateY(var(--stz-space-6)); }
}
@keyframes stz-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .stz-btn {
    transition-property: var(--stz-motion-properties);
    transition-duration: var(--stz-duration-standard);
    transition-timing-function: var(--stz-ease-in-out);
  }
  .stz-btn--shadow {
    transition-property: transform;
    transition-duration: var(--stz-duration-standard);
    transition-timing-function: var(--stz-ease-lift);
  }
  .stz-btn--shadow:hover { transform: translate3d(0, var(--stz-btn-lift), 0); }

  .stz-btn__label,
  .stz-btn__arrow {
    transition-property: transform, opacity;
    transition-duration: var(--stz-duration-slide), var(--stz-duration-toggle);
    transition-timing-function: var(--stz-ease-in-out);
  }

  .stz-check::before,
  .stz-switch::before {
    transition-property: transform;
    transition-duration: var(--stz-duration-fast);
    transition-timing-function: var(--stz-ease-in-out);
  }

  .stz-card--interactive {
    transition-property: transform;
    transition-duration: var(--stz-duration-shadow);
    transition-timing-function: var(--stz-ease-standard);
  }
  .stz-card--interactive:hover { transform: translate3d(0, var(--stz-btn-lift), 0); }

  .stz-transition {
    transition-property: var(--stz-motion-properties);
    transition-duration: var(--stz-duration-standard);
    transition-timing-function: var(--stz-ease-in-out);
  }
  .stz-lift {
    transition-property: transform;
    transition-duration: var(--stz-duration-standard);
    transition-timing-function: var(--stz-ease-lift);
  }
  .stz-lift:hover { transform: translate3d(0, var(--stz-btn-lift), 0); }

  .stz-rotating-badge svg { animation: stz-rotate var(--stz-duration-rotation) var(--stz-ease-linear) infinite; }
  .stz-spin { animation: stz-rotate var(--stz-duration-rotation) var(--stz-ease-linear) infinite; }
  .stz-float { animation: stz-float var(--stz-duration-ambient) var(--stz-ease-linear) var(--stz-duration-slide) infinite alternate; }
  .stz-fade-in { animation: stz-fade-in var(--stz-duration-slow) var(--stz-ease-out-quad) both; }

  /* Scroll reveal: needs <html class="stz-js"> and a script that adds .is-visible. */
  .stz-js .stz-reveal {
    transition-property: opacity, transform;
    transition-duration: var(--stz-duration-slow);
    transition-timing-function: var(--stz-ease-out-quad);
  }
  .stz-js .stz-reveal:not(.is-visible) { opacity: 0; transform: translateY(var(--stz-space-6)); }
}

/* A user-facing "pause motion" control toggles this class (WCAG 2.2.2). */
.stz-motion-paused .stz-rotating-badge svg,
.stz-motion-paused .stz-spin,
.stz-motion-paused .stz-float { animation-play-state: paused; }

/* Original inline Stratamize icons inherit the surrounding type size. */
.stz-glyph { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.125em; }