/* ==========================================================================
   Смарт Решения — Design System · Components
   --------------------------------------------------------------------------
   Every component from the original React kit, re-expressed as CSS classes so
   the site ships without a runtime. Naming: .sr-<component>[__part][--variant].
   Components read tokens only; they never hard-code a colour.
   ========================================================================== */

/* --------------------------------------------------------------- Icon */
.sr-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.sr-icon--sm { width: 1rem; height: 1rem; }
.sr-icon--md { width: 1.375rem; height: 1.375rem; }
.sr-icon--lg { width: 1.5rem; height: 1.5rem; }

/* --------------------------------------------------------------- Logo */
.sr-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.20em;
  line-height: 1;
  color: var(--text-primary);
  white-space: nowrap;
}
.sr-logo__a { font-weight: var(--weight-semibold); }
.sr-logo__b { font-weight: var(--weight-light); }
.sr-logo__rule {
  width: 1.5em;
  height: 1px;
  background: var(--line-strong);
  flex: 0 0 auto;
}
.sr-logo--md { font-size: 1rem; }
.sr-logo--lg { font-size: 1.375rem; }

.sr-logo--lockup {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.62em;
}
.sr-logo--lockup .sr-logo__words { display: inline-flex; align-items: center; gap: 0.55em; }
.sr-logo--lockup .sr-logo__accent {
  width: 2.6em;
  height: 2px;
  background: var(--line-accent);
}

/* --------------------------------------------------------------- Eyebrow */
.sr-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-text);
  font-size: var(--type-overline-size);
  line-height: var(--type-overline-line);
  letter-spacing: var(--type-overline-track);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
}
.sr-eyebrow__index {
  font-family: var(--font-mono);
  color: var(--text-accent);
  letter-spacing: var(--type-overline-track);
}
.sr-eyebrow__rule { flex: 1; height: 1px; background: var(--line-strong); }

/* --------------------------------------------------------------- Rule */
.sr-rule {
  height: 1px;
  width: 100%;
  background: var(--line-hairline);
  border: 0;
}
.sr-rule--strong { height: var(--rule-thick); background: var(--line-heavy); }
.sr-rule--labelled {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: auto;
  background: none;
}
.sr-rule--labelled .sr-rule__label {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  letter-spacing: var(--type-mono-track);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.sr-rule--labelled .sr-rule__line { flex: 1; height: 1px; background: var(--line-hairline); }

/* --------------------------------------------------------------- Badge */
.sr-badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding-inline: 10px;
  font-family: var(--font-text);
  font-size: var(--type-caption-size);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: transparent;
  border: var(--border-hairline) solid var(--line-strong);
  border-radius: var(--radius-xs);
  white-space: nowrap;
}
.sr-badge--accent {
  color: var(--text-accent);
  background: var(--surface-accent-soft);
  border-color: transparent;
}
.sr-badge--solid {
  color: var(--action-solid-fg);
  background: var(--action-solid-bg);
  border-color: var(--action-solid-bg);
}

/* --------------------------------------------------------------- Tag */
.sr-tag {
  height: 34px;
  padding-inline: 14px;
  font-family: var(--font-text);
  font-size: 0.875rem;
  color: var(--text-primary);
  background: transparent;
  border: var(--border-hairline) solid var(--line-hairline);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition-ui);
}
.sr-tag:hover { background: var(--action-ghost-bg-hover); }
.sr-tag[aria-pressed='true'] {
  color: var(--action-solid-fg);
  background: var(--action-solid-bg);
  border-color: var(--action-solid-bg);
}

/* --------------------------------------------------------------- Button */
.sr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding-inline: 22px;
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  color: var(--action-solid-fg);
  background: var(--action-solid-bg);
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-ui),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.sr-btn:hover { background: var(--action-solid-bg-hover); color: var(--action-solid-fg); transform: translateY(-1px); }
.sr-btn:active { transform: translateY(0); }

.sr-btn--sm { height: 36px; padding-inline: 16px; font-size: 0.875rem; }
.sr-btn--lg { height: 56px; padding-inline: 30px; font-size: 1rem; }
.sr-btn--full { display: flex; width: 100%; }

.sr-btn--accent {
  color: var(--action-accent-fg);
  background: var(--action-accent-bg);
}
.sr-btn--accent:hover {
  color: var(--action-accent-fg);
  background: var(--action-accent-bg-hover);
  box-shadow: var(--glow-accent);
}

.sr-btn--secondary {
  color: var(--text-primary);
  background: transparent;
  border-color: var(--line-strong);
}
.sr-btn--secondary:hover {
  color: var(--text-primary);
  background: var(--action-ghost-bg-hover);
  border-color: var(--line-heavy);
}

/* Ghost keeps the button BOX and drops only the fill. It used to zero out
   height and padding, which turned it into bare text: in a row beside the
   other variants it read as a stray label, and on touch it was a 46x17
   target — well under the 44px minimum. The surface is transparent until
   hover; the metrics stay identical to .sr-btn so variants line up. */
.sr-btn--ghost {
  color: var(--text-primary);
  background: transparent;
  border-color: transparent;
}
.sr-btn--ghost:hover {
  color: var(--text-accent);
  background: var(--action-ghost-bg-hover);
  transform: translateY(-1px);
}

.sr-btn:disabled,
.sr-btn[aria-disabled='true'] {
  color: var(--state-disabled-fg);
  background: var(--state-disabled-bg);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Arrow nudge: the kit's signature micro-interaction. */
.sr-btn__icon { transition: transform var(--dur-base) var(--ease-out); }
.sr-btn:hover:not(:disabled) .sr-btn__icon--right { transform: translateX(3px); }
.sr-btn:hover:not(:disabled) .sr-btn__icon--left { transform: translateX(-3px); }

/* --------------------------------------------------------------- IconButton */
.sr-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--text-primary);
  background: transparent;
  border: var(--border-hairline) solid var(--line-strong);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: var(--transition-ui), transform var(--dur-fast) var(--ease-out);
}
.sr-iconbtn:hover {
  color: var(--action-solid-fg);
  background: var(--action-solid-bg);
  border-color: var(--action-solid-bg);
}
.sr-iconbtn--bare { border-color: transparent; color: var(--text-secondary); }
.sr-iconbtn--bare:hover {
  color: var(--text-primary);
  background: var(--action-ghost-bg-hover);
  border-color: transparent;
}
.sr-iconbtn--sm { width: 36px; height: 36px; }

/* Icon-pair state is derived from the control's own semantic state, not set by
   JS. Two reasons: the icons are <svg>, where the `hidden` IDL property does
   nothing (it is HTMLElement-only), and deriving from the attribute means the
   right icon is painted on the first frame — a returning light-theme visitor
   never sees the dark-theme icon flash. JS only maintains the semantics
   (`data-theme`, `aria-expanded`); CSS maintains the picture. */
[data-icon-moon] { display: none; }
:root[data-theme='light'] [data-icon-sun] { display: none; }
:root[data-theme='light'] [data-icon-moon] { display: inline-block; }

[data-icon-close] { display: none; }
[aria-expanded='true'] [data-icon-menu] { display: none; }
[aria-expanded='true'] [data-icon-close] { display: inline-block; }

/* --------------------------------------------------------------- SectionHeader */
.sr-secthead {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  align-items: flex-start;
}
.sr-secthead__title {
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-track);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  max-width: 22ch;
}
.sr-secthead__title--display {
  font-size: var(--type-display-m-size);
  line-height: var(--type-display-m-line);
  letter-spacing: var(--type-display-m-track);
  font-weight: var(--weight-light);
}
.sr-secthead__lede {
  font-family: var(--font-text);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line);
  letter-spacing: var(--type-body-lg-track);
  color: var(--text-secondary);
  max-width: var(--measure);
}
.sr-secthead--center { align-items: center; text-align: center; }
.sr-secthead--center .sr-secthead__title,
.sr-secthead--center .sr-secthead__lede { margin-inline: auto; }

/* --------------------------------------------------------------- Glass panel */
.sr-glass {
  position: relative;
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  border-radius: var(--radius-lg);
  background: var(--glass-fill);
  border: var(--border-hairline) solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  box-shadow: var(--shadow-glass);
}
.sr-glass--glow { box-shadow: var(--shadow-glass), var(--glow-under); }
/* Top highlight: the single specular line that sells the frosted surface. */
.sr-glass::before {
  content: '';
  position: absolute;
  top: -1px; left: 10%; right: 42%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent);
}

/* --------------------------------------------------------------- Card */
.sr-card {
  display: block;
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  height: 100%;
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--line-hairline);
  border-radius: var(--radius-xs);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.sr-card--flush { border: 0; }
.sr-card--interactive { cursor: pointer; }
.sr-card--interactive:hover {
  background: var(--surface-card-hover);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.sr-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.sr-card__index {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  letter-spacing: var(--type-mono-track);
  color: var(--text-tertiary);
  margin-left: auto;
}
.sr-card__title {
  font-family: var(--font-display);
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line);
  letter-spacing: var(--type-h4-track);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-3);
}
.sr-card__body {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--text-secondary);
}
.sr-card__footer {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-hairline) solid var(--line-hairline);
}
/* Accent hairline that wipes in along the card's top edge on hover. */
.sr-card--interactive::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--rule-thick);
  background: var(--line-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.sr-card--interactive:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------------- FeatureCard */
.sr-feature {
  padding-top: var(--space-6);
  border-top: var(--rule-thick) solid var(--line-heavy);
  transition: border-color var(--dur-base) var(--ease-out);
}
.sr-feature:hover { border-top-color: var(--line-accent); }
.sr-feature__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  color: var(--text-primary);
}
.sr-feature__index {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  letter-spacing: var(--type-mono-track);
  color: var(--text-tertiary);
}
.sr-feature__title {
  font-family: var(--font-display);
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line);
  letter-spacing: var(--type-h4-track);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-3);
}
.sr-feature__body {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--text-secondary);
  max-width: 38ch;
}

/* --------------------------------------------------------------- KpiBlock */
.sr-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* One knob per size variant; the unit is derived from it so the pair always
     stays in proportion. */
  --kpi-size: var(--type-numeral-size);
}
.sr-kpi--sm { --kpi-size: clamp(2rem, 4.4vw, 2.75rem); }
.sr-kpi--lg { --kpi-size: clamp(3rem, 8vw, 5.5rem); }

.sr-kpi__figure { display: flex; align-items: baseline; gap: 6px; }
.sr-kpi__value {
  font-family: var(--font-display);
  font-size: var(--kpi-size);
  line-height: var(--type-numeral-line);
  letter-spacing: var(--type-numeral-track);
  font-weight: var(--weight-light);
  /* Proportional lining figures: tabular widths give a decimal comma a full
     digit slot, which reads as "1 , 2" at display sizes. */
  font-variant-numeric: lining-nums;
  color: var(--text-primary);
}
.sr-kpi__unit {
  font-family: var(--font-display);
  font-size: calc(var(--kpi-size) * 0.42);
  line-height: 1;
  font-weight: var(--weight-light);
  color: var(--text-tertiary);
}
.sr-kpi__label {
  font-size: var(--type-body-sm-size);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.sr-kpi__caption {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  color: var(--text-tertiary);
  max-width: 30ch;
}

/* --------------------------------------------------------------- DataTable */
.sr-table-wrap {
  width: 100%;
  overflow-x: auto;
  /* A wide table scrolls inside its own box — the page never does. */
  -webkit-overflow-scrolling: touch;
}
.sr-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-family: var(--font-text);
}
.sr-table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--space-5);
  font-size: var(--type-caption-size);
  color: var(--text-tertiary);
}
.sr-table th {
  text-align: right;
  padding: 0 20px 20px 0;
  font-size: var(--type-overline-size);
  letter-spacing: var(--type-overline-track);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
  border-bottom: var(--border-hairline) solid var(--line-heavy);
  white-space: nowrap;
}
.sr-table th:first-child,
.sr-table td:first-child { text-align: left; }
.sr-table td {
  text-align: right;
  padding: 20px 20px 20px 0;
  font-size: var(--type-body-sm-size);
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text-secondary);
  border-bottom: var(--border-hairline) solid var(--line-hairline);
  vertical-align: top;
}
.sr-table td:first-child {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  font-variant-numeric: normal;
}
.sr-table--dense th { padding-bottom: 14px; }
.sr-table--dense td { padding-block: 14px; }

/* --------------------------------------------------------------- Timeline */
.sr-timeline { list-style: none; }
.sr-timeline__item {
  display: grid;
  grid-template-columns: 120px 1px minmax(0, 1fr);
  gap: var(--space-7);
  padding-bottom: var(--space-9);
}
.sr-timeline__item:last-child { padding-bottom: 0; }
.sr-timeline__meta { text-align: right; }
.sr-timeline__marker {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  letter-spacing: var(--type-mono-track);
  color: var(--text-accent);
}
.sr-timeline__duration {
  margin-top: var(--space-2);
  font-size: var(--type-caption-size);
  color: var(--text-tertiary);
}
.sr-timeline__line { position: relative; background: var(--line-hairline); }
.sr-timeline__dot {
  position: absolute;
  top: 6px; left: -3px;
  width: 7px; height: 7px;
  background: var(--line-heavy);
}
.sr-timeline__title {
  font-family: var(--font-display);
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line);
  letter-spacing: var(--type-h4-track);
  font-weight: var(--weight-medium);
}
.sr-timeline__desc {
  margin-top: var(--space-3);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--text-secondary);
  max-width: 58ch;
}
/* On narrow screens the rail moves to the left of a single content column. */
@media (max-width: 700px) {
  .sr-timeline__item {
    grid-template-columns: 1px minmax(0, 1fr);
    gap: var(--space-5);
    padding-bottom: var(--space-8);
  }
  .sr-timeline__meta {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .sr-timeline__duration { margin-top: 0; }
  .sr-timeline__line { grid-column: 1; grid-row: 1 / span 2; }
  .sr-timeline__content { grid-column: 2; grid-row: 2; }
}

/* --------------------------------------------------------------- ProcessSteps */
.sr-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.sr-steps__item {
  padding: var(--space-6) var(--space-6) 0 var(--space-6);
  border-top: var(--rule-thick) solid var(--line-heavy);
  border-right: var(--border-hairline) solid var(--line-hairline);
}
.sr-steps__item:first-child { padding-left: 0; }
.sr-steps__item:last-child { border-right: 0; padding-right: 0; }
.sr-steps__marker {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  letter-spacing: var(--type-mono-track);
  color: var(--text-accent);
  margin-bottom: var(--space-5);
}
.sr-steps__title {
  font-family: var(--font-display);
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line);
  letter-spacing: var(--type-h4-track);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-3);
}
.sr-steps__desc {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--text-secondary);
}
@media (max-width: 760px) {
  .sr-steps { grid-template-columns: minmax(0, 1fr); }
  .sr-steps__item {
    padding: var(--space-5) 0 var(--space-6) 0;
    border-right: 0;
  }
  .sr-steps__item:last-child { padding-bottom: 0; }
}

/* --------------------------------------------------------------- PricingCard */
.sr-pricing {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  height: 100%;
  background: transparent;
  border: var(--border-hairline) solid var(--line-hairline);
  border-radius: var(--radius-xs);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.sr-pricing:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.sr-pricing--featured {
  background: var(--glass-fill);
  border: var(--border-hairline) solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  box-shadow: var(--shadow-glass), var(--glow-under);
}
.sr-pricing__name {
  font-family: var(--font-text);
  font-size: var(--type-overline-size);
  letter-spacing: var(--type-overline-track);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
}
.sr-pricing__figure {
  margin-top: var(--space-5);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.sr-pricing__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: var(--weight-light);
  color: var(--text-primary);
}
.sr-pricing__note { font-size: var(--type-caption-size); color: var(--text-tertiary); }
.sr-pricing__desc {
  margin-top: var(--space-5);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--text-secondary);
}
.sr-pricing__features {
  list-style: none;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-hairline) solid var(--line-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.sr-pricing__features li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--type-body-sm-size);
  line-height: 1.5;
  color: var(--text-primary);
}
.sr-pricing__features .sr-icon { color: var(--text-accent); margin-top: 3px; }
.sr-pricing__cta { margin-top: var(--space-7); }

/* --------------------------------------------------------------- TeamCard */
.sr-team { display: flex; flex-direction: column; }
.sr-team__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface-inverse-raised);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-xs);
}
.sr-team__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: grayscale(100%) contrast(1);
  transform: scale(1);
  transition: transform var(--dur-reveal) var(--ease-out),
              filter var(--dur-slow) var(--ease-out);
}
.sr-team:hover .sr-team__photo {
  filter: grayscale(100%) contrast(1.06);
  transform: scale(1.04);
}
/* Reads as a duotone wash rather than a flat grey plate. */
.sr-team__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(5, 7, 14, .55));
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.sr-team:hover .sr-team__frame::after { opacity: 1; }
.sr-team__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hairline) solid var(--line-hairline);
}
.sr-team__name {
  font-family: var(--font-display);
  font-size: var(--type-h3-size);
  line-height: 1.2;
  letter-spacing: var(--type-h3-track);
  font-weight: var(--weight-medium);
}
.sr-team__role {
  font-size: var(--type-overline-size);
  letter-spacing: var(--type-overline-track);
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.sr-team__location {
  margin-top: var(--space-3);
  font-size: var(--type-caption-size);
  color: var(--text-tertiary);
}
.sr-team__creds {
  list-style: none;
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sr-team__creds li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  font-size: var(--type-body-sm-size);
  line-height: 1.5;
  color: var(--text-secondary);
}
.sr-team__creds li::before {
  content: '';
  margin-top: 0.7em;
  height: 1px;
  background: var(--line-strong);
}

/* --------------------------------------------------------------- TabNav */
.sr-tabs {
  display: flex;
  gap: 0;
  border-bottom: var(--border-hairline) solid var(--line-hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
.sr-tabs::-webkit-scrollbar { display: none; }
.sr-tabs__tab {
  padding: 0 28px 16px 0;
  margin-right: 8px;
  margin-bottom: -1px;
  background: none;
  border: 0;
  border-bottom: var(--rule-thick) solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-text);
  font-size: var(--type-body-sm-size);
  color: var(--text-tertiary);
  transition: var(--transition-ui);
}
.sr-tabs__tab:hover { color: var(--text-secondary); }
.sr-tabs__tab[aria-selected='true'] {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  border-bottom-color: var(--line-heavy);
}

/* --------------------------------------------------------------- Form controls */
.sr-field { display: flex; flex-direction: column; gap: var(--space-2); }
.sr-field__label {
  font-family: var(--font-text);
  font-size: var(--type-overline-size);
  letter-spacing: var(--type-overline-track);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}
.sr-field__req { color: var(--text-accent); margin-left: 4px; }
.sr-field__hint {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  color: var(--text-tertiary);
}
.sr-field__error {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  color: var(--negative);
}

.sr-input,
.sr-textarea,
.sr-select {
  width: 100%;
  font-family: var(--font-text);
  font-size: var(--type-body-sm-size);
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-bottom: var(--border-hairline) solid var(--line-strong);
  border-radius: 0;
  outline: none;
  padding: 0 0 12px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.sr-input::placeholder,
.sr-textarea::placeholder { color: var(--text-tertiary); }
.sr-input:focus,
.sr-textarea:focus,
.sr-select:focus { border-bottom-color: var(--line-heavy); }
.sr-input:focus-visible,
.sr-textarea:focus-visible,
.sr-select:focus-visible { outline: none; border-bottom-color: var(--focus-ring); }
.sr-input[aria-invalid='true'],
.sr-textarea[aria-invalid='true'] { border-bottom-color: var(--negative); }
.sr-textarea { resize: vertical; line-height: var(--type-body-sm-line); padding-top: 4px; }

.sr-select-wrap { position: relative; width: 100%; }
.sr-select { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer; }
.sr-select option { color: var(--ink-900); background: var(--white); }
.sr-select-wrap .sr-icon {
  position: absolute;
  right: 2px; top: 2px;
  pointer-events: none;
  color: var(--text-tertiary);
}

.sr-checkbox {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}
.sr-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.sr-checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  background: transparent;
  border: var(--border-hairline) solid var(--line-strong);
  border-radius: var(--radius-xs);
  transition: var(--transition-ui);
}
.sr-checkbox__box .sr-icon {
  width: 12px; height: 12px;
  stroke-width: 2.5;
  color: var(--action-solid-fg);
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-spring);
}
.sr-checkbox input:checked + .sr-checkbox__box {
  background: var(--action-solid-bg);
  border-color: var(--action-solid-bg);
}
.sr-checkbox input:checked + .sr-checkbox__box .sr-icon { opacity: 1; transform: scale(1); }
.sr-checkbox input:focus-visible + .sr-checkbox__box {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.sr-checkbox__label {
  font-size: var(--type-caption-size);
  line-height: 1.5;
  color: var(--text-secondary);
}

.sr-switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-4); cursor: pointer; }
.sr-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.sr-switch__track {
  position: relative;
  width: 42px; height: 22px;
  flex: 0 0 auto;
  background: var(--line-strong);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-base) var(--ease-out);
}
.sr-switch__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: left var(--dur-base) var(--ease-spring);
}
.sr-switch input:checked + .sr-switch__track { background: var(--action-solid-bg); }
.sr-switch input:checked + .sr-switch__track .sr-switch__thumb {
  left: 23px;
  background: var(--action-solid-fg);
}
.sr-switch input:focus-visible + .sr-switch__track {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.sr-switch__label { font-size: var(--type-body-sm-size); color: var(--text-primary); }

.sr-radio { position: relative; display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.sr-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.sr-radio__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  border: var(--border-hairline) solid var(--line-strong);
  border-radius: 50%;
  transition: var(--transition-ui);
}
.sr-radio__dot::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--action-solid-bg);
  transform: scale(0);
  transition: transform var(--dur-base) var(--ease-spring);
}
.sr-radio input:checked + .sr-radio__dot { border-color: var(--action-solid-bg); }
.sr-radio input:checked + .sr-radio__dot::after { transform: scale(1); }
.sr-radio input:focus-visible + .sr-radio__dot { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sr-radio__label { font-size: var(--type-body-sm-size); color: var(--text-primary); }

/* ContactForm layout */
.sr-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
.sr-form__wide { grid-column: 1 / -1; }
.sr-form__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.sr-form__consent { display: flex; flex-direction: column; gap: var(--space-2); }

/* Captcha slot. Empty and hidden until site.js mounts the widget, so a site
   without captcha keys shows no gap where it would have been. */
.sr-form__captcha:not([hidden]) { min-height: 65px; }

/* Honeypot. Moved off-screen rather than display:none or type=hidden, both of
   which bots skip. Must never be reachable by keyboard or screen readers. */
.sr-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media (max-width: 640px) {
  .sr-form { grid-template-columns: minmax(0, 1fr); }
  .sr-form__foot { flex-direction: column; align-items: stretch; }
  .sr-form__foot .sr-btn { width: 100%; }
}
/* Form-level alert. Collapses to nothing while empty so it costs no space. */
.sr-form__alert {
  grid-column: 1 / -1;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--negative);
}
.sr-form__alert:empty { display: none; }

.sr-form__done {
  padding-block: var(--space-8);
  border-top: var(--border-hairline) solid var(--line-hairline);
}
.sr-form__done-title {
  font-family: var(--font-display);
  font-size: var(--type-h3-size);
  letter-spacing: var(--type-h3-track);
  font-weight: var(--weight-medium);
}

/* --------------------------------------------------------------- Navbar */
.sr-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: var(--border-hairline) solid var(--line-hairline);
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.sr-nav[data-scrolled='true'] { background: var(--nav-bg-scrolled); }
.sr-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  gap: var(--space-7);
}
/* min-height, not padding: the logo's own box is 13px tall, which is a
   legitimate size for the mark but far too small to tap. The extra height is
   invisible — the flex centring keeps the mark where it was. */
.sr-nav__brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-primary);
}
.sr-nav__brand:hover { color: var(--text-primary); }
.sr-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  margin-left: auto;
}
.sr-nav__link {
  position: relative;
  font-family: var(--font-text);
  font-size: 0.875rem;
  letter-spacing: -0.002em;
  padding-bottom: 3px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.sr-nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.sr-nav__link:hover { color: var(--text-primary); }
.sr-nav__link:hover::after { transform: scaleX(1); }
.sr-nav__link[aria-current='true'] { color: var(--text-primary); }
.sr-nav__link[aria-current='true']::after { transform: scaleX(1); }
.sr-nav__actions { display: flex; align-items: center; gap: var(--space-3); }
.sr-nav__burger { display: none; }

/* Reading-progress hairline pinned to the navbar's bottom edge. */
.sr-nav__progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  background: var(--line-accent);
  pointer-events: none;
}

.sr-nav__drawer {
  display: none;
  border-top: var(--border-hairline) solid var(--line-hairline);
  background: var(--surface-page);
  padding: var(--space-5) var(--page-margin) var(--space-6);
}
.sr-nav__drawer[data-open='true'] { display: block; }
.sr-nav__drawer-links { display: flex; flex-direction: column; }
.sr-nav__drawer-link {
  display: flex;
  align-items: center;
  /* Drawer rows were 25px tall — a thumb-sized target is 44px. */
  min-height: 48px;
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  padding-block: var(--space-3);
  color: var(--text-primary);
  border-bottom: var(--border-hairline) solid var(--line-hairline);
}
.sr-nav__drawer-cta { margin-top: var(--space-5); }

@media (max-width: 900px) {
  .sr-nav__links,
  .sr-nav__cta { display: none; }
  .sr-nav__burger { display: block; }
  .sr-nav__bar { gap: var(--space-4); }
}
/* At 320px the wordmark + two 44px controls no longer fit the gutter. Tighten
   the controls rather than dropping the theme toggle, which is a primary
   affordance now that dark is the default. */
@media (max-width: 380px) {
  .sr-nav__bar { gap: var(--space-2); }
  .sr-nav__actions { gap: var(--space-1); }
  .sr-iconbtn { width: 40px; height: 40px; }
  .sr-logo { font-size: 0.75rem; gap: 0.5em; }
  .sr-logo__rule { width: 1em; }
}

/* --------------------------------------------------------------- CTASection */
.sr-cta {
  background: var(--surface-inverse);
  padding-block: var(--section-y);
}
.sr-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--block-gap);
  align-items: end;
}
.sr-cta__title {
  font-family: var(--font-display);
  font-size: var(--type-display-m-size);
  line-height: var(--type-display-m-line);
  letter-spacing: var(--type-display-m-track);
  font-weight: var(--weight-light);
  max-width: 20ch;
}
.sr-cta__lede {
  margin-top: var(--space-6);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line);
  color: var(--text-secondary);
  max-width: 48ch;
}
.sr-cta__actions { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.sr-cta__meta {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  letter-spacing: var(--type-mono-track);
  color: var(--text-tertiary);
}
@media (max-width: 1000px) {
  .sr-cta__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; }
}
@media (max-width: 480px) {
  .sr-cta__actions .sr-row { flex-direction: column; align-items: stretch; width: 100%; }
  .sr-cta__actions .sr-btn { width: 100%; }
}

/* --------------------------------------------------------------- Footer */
.sr-footer {
  background: var(--surface-inverse);
  padding-top: var(--space-11);
  padding-bottom: var(--space-8);
  border-top: var(--border-hairline) solid var(--line-hairline);
}
.sr-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  padding-bottom: var(--space-10);
}
.sr-footer__tagline {
  margin-top: var(--space-5);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--text-secondary);
  max-width: 32ch;
}
.sr-footer__contacts { margin-top: var(--space-6); display: flex; flex-direction: column; gap: 0; }
/* Footer links were 25px tall and stacked a few pixels apart — on a phone
   that is a row of near-misses. The min-height enlarges the hit area without
   moving the text: the gap between rows is what shrinks, not the spacing. */
.sr-footer__contacts a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--text-primary);
  font-size: var(--type-body-sm-size);
}
.sr-footer__contacts a:hover { color: var(--text-accent); }
.sr-footer__contacts span { font-size: var(--type-body-sm-size); color: var(--text-secondary); max-width: 30ch; }
.sr-footer__col { display: flex; flex-direction: column; gap: var(--space-1); }
.sr-footer__col-title {
  font-size: var(--type-overline-size);
  letter-spacing: var(--type-overline-track);
  text-transform: uppercase;
  color: var(--text-tertiary);
  /* The column gap dropped to 4px so the taller links do not double the
     footer's height; the heading keeps its own breathing room here. */
  margin-bottom: var(--space-3);
}
.sr-footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: var(--type-body-sm-size);
  color: var(--text-secondary);
}
.sr-footer__col a:hover { color: var(--text-primary); }
/* Materials sits between the link columns and the legal strip: the design
   system and the brand book are references about the site, not sections of
   it, so they read wrong inside a nav column of product links. A horizontal
   strip separates them without giving them a column's worth of weight. */
.sr-footer__materials {
  display: flex;
  flex-wrap: wrap;
  /* center, NOT baseline. The links are inline-flex boxes with their own
     36px height, and a flex box contributes its own baseline — against a
     plain 20px span that put the label 9px below the links instead of on a
     line with them. Centring aligns the boxes, which is what is actually
     wanted here. */
  align-items: center;
  column-gap: var(--space-5);
  row-gap: 0;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-hairline) solid var(--line-hairline);
}
.sr-footer__materials-title {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
/* On a narrow screen the label heads its own line instead of competing with
   the links for width — three items wrapping mid-row is what reads as drift. */
@media (max-width: 560px) {
  .sr-footer__materials-title {
    flex: 1 0 100%;
    min-height: 0;
    margin-bottom: var(--space-2);
  }
}
.sr-footer__materials a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: var(--type-body-sm-size);
  color: var(--text-secondary);
  text-decoration: none;
}
.sr-footer__materials a:hover { color: var(--text-primary); }
.sr-footer__materials a[aria-current='page'] { color: var(--text-primary); cursor: default; }

.sr-footer__legal {
  padding-top: var(--space-6);
  border-top: var(--border-hairline) solid var(--line-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}
/* The legal strip is set in the mono micro-type. The privacy link lives here
   too, so it has to inherit that type rather than the default link styling —
   otherwise it breaks the line with a different family and size. */
.sr-footer__legal span,
.sr-footer__legal a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
}
.sr-footer__legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  transition: var(--transition-ui), text-decoration-color var(--dur-fast) var(--ease-out);
}
.sr-footer__legal a:hover {
  color: var(--text-primary);
  text-decoration-color: currentColor;
}
/* On the privacy page itself the link is the current page: still focusable and
   still a link, but not advertised as somewhere to go. */
.sr-footer__legal a[aria-current='page'] {
  color: var(--text-secondary);
  text-decoration: none;
}
@media (max-width: 900px) {
  .sr-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
    padding-bottom: var(--space-8);
  }
  .sr-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .sr-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------- Lattice */
/* Thin architectural line-work — the system's only decorative graphic. */
.sr-lattice {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--line-hairline) 0 1px, transparent 1px var(--lattice-col, 16.666%)),
    repeating-linear-gradient(to bottom, var(--line-hairline) 0 1px, transparent 1px var(--lattice-row, 33.333%));
  background-position: -1px -1px;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 78%, transparent);
}