/* ==========================================================================
   TextEnvoy Block Theme — Semantic Editorial & Accessibility Stylesheet
   WCAG 2.2 AA target tokens · Zero page-builder bloat ·rem/clamp fluid scale
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  font-size-adjust: from-font;
  text-align: start;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Typography best practices (no text-wrap: balance on boxed elements) */
h1,
h2 {
  font-size-adjust: none;
}

h1:not([class*="badge"]):not(.te-boxed-heading),
h2:not([class*="badge"]):not(.te-boxed-heading),
h3:not([class*="badge"]):not(.te-boxed-heading) {
  text-wrap: balance;
}

/* Avoid text-wrap: balance inside containers with visible backgrounds, borders, or shadows */
:where(
  .te-ledger-box,
  .te-schematic-card,
  .te-commercial-banner,
  .te-form-card,
  .te-sidebar-card,
  .te-planned-callout,
  .te-snapshot-card,
  .te-cost-layer-card,
  .te-checklist-card
) :is(h1, h2, h3, h4) {
  text-wrap: wrap;
}

p,
li,
dd,
figcaption {
  text-wrap: pretty;
}

.te-prose-measure {
  max-inline-size: 66ch;
}

code,
.te-mono {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.9em;
}

/* Canonical visually-hidden utility (keeps element in accessibility tree) */
.te-visually-hidden,
.screen-reader-text {
  position: absolute;
  clip-path: inset(50%);
  overflow: hidden;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

/* Skip to main content link — unobscured & high contrast */
.te-skip-link {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background-color: var(--wp--preset--color--action-blue);
  color: var(--wp--preset--color--surface-white);
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: 0.375rem;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.15s ease;
}

.te-skip-link:focus,
.te-skip-link:focus-visible,
.skip-link.screen-reader-text:focus {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 9999;
  inline-size: auto;
  block-size: auto;
  clip-path: none;
  margin: 0;
  padding: 0.75rem 1.25rem;
  background-color: var(--wp--preset--color--action-blue);
  color: var(--wp--preset--color--surface-white);
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: 0.375rem;
  text-decoration: none;
  transform: translateY(0);
  outline: 3px solid var(--wp--preset--color--accent-cyan);
  outline-offset: 2px;
}

/* Global Visible Focus States (WCAG 2.2 Focus Appearance & Not Obscured) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--action-blue);
  outline-offset: 3px;
}

.te-dark-surface :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.te-header :where(a, button, [tabindex]):focus-visible,
.te-footer :where(a, button, [tabindex]):focus-visible,
.te-mobile-dialog :where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-cyan);
  outline-offset: 3px;
}

/* Dark panels inside light bands need a light ring to keep 3:1 against the panel (WCAG 1.4.11).
   Skins set --te-focus-on-dark to their own dark-ground focus colour. */
:is(.te-sequence, .te-price-platform) :is(a, button, [tabindex]):focus-visible {
  outline-color: var(--te-focus-on-dark, var(--wp--preset--color--accent-cyan));
}

/* ==========================================================================
   Global Header & Native <dialog> Mobile Navigation
   ========================================================================== */
.te-header {
  background-color: var(--wp--preset--color--near-navy);
  color: var(--wp--preset--color--surface-white);
  border-block-end: 1px solid var(--wp--custom--color--navy-line);
  padding-block: 0.875rem;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.te-header-inner {
  max-inline-size: 80rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.te-brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.te-brand-logo {
  display: block;
  inline-size: 11.5rem; /* 184px desktop */
  block-size: auto;
}

@media (max-width: 1023px) {
  .te-brand-logo {
    inline-size: 10rem; /* 160px minimum per Brand Kit v2 audit */
  }
}

.te-desktop-nav-wrap {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-inline-start: auto;
}

/* WordPress gives this wrapper flow layout, whose block-gap top margin
   pushed the CTA 10px below the logo and nav. The flex gap spaces them. */
.te-header .te-desktop-nav-wrap > * {
  margin-block: 0;
}

.te-header .wp-block-navigation ul,
.te-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.te-header .wp-block-navigation a,
.te-nav-list a {
  color: var(--wp--preset--color--mist-text);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding-block: 0.5rem;
  display: inline-block;
}

.te-header .wp-block-navigation a:hover,
.te-header .wp-block-navigation a[aria-current="page"],
.te-nav-list a:hover,
.te-nav-list a[aria-current="page"] {
  color: var(--wp--preset--color--surface-white);
  text-decoration: underline;
  text-underline-offset: 0.35rem;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--wp--preset--color--accent-cyan);
}

.te-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 2.875rem;
  padding: 0.75rem 1.375rem;
  border-radius: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.te-btn-primary,
.wp-block-button.is-style-te-primary .wp-block-button__link {
  background-color: var(--wp--preset--color--action-blue);
  color: var(--wp--preset--color--surface-white) !important;
  border-color: var(--wp--preset--color--action-blue);
}

.te-btn-primary:hover,
.wp-block-button.is-style-te-primary .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--envoy-blue);
  border-color: var(--wp--preset--color--envoy-blue);
  color: var(--wp--preset--color--surface-white) !important;
}

.te-btn-secondary-dark,
.wp-block-button.is-style-te-secondary-dark .wp-block-button__link {
  background-color: var(--wp--custom--color--navy-raised);
  color: var(--wp--preset--color--surface-white) !important;
  border: 1px solid var(--wp--custom--color--navy-control);
}

.te-btn-secondary-dark:hover,
.wp-block-button.is-style-te-secondary-dark .wp-block-button__link:hover {
  background-color: var(--wp--custom--color--navy-hover);
  border-color: var(--wp--preset--color--accent-cyan);
  color: var(--wp--preset--color--surface-white) !important;
}

/* Mobile Menu Trigger & Native <dialog> Modal */
.te-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 2.75rem;
  min-inline-size: 5.5rem;
  padding: 0.5rem 0.875rem;
  background-color: var(--wp--custom--color--navy-raised);
  color: var(--wp--preset--color--surface-white);
  border: 1px solid var(--wp--custom--color--navy-control);
  border-radius: 0.375rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 1023px) {
  .te-desktop-nav-wrap {
    display: none;
  }
  .te-menu-toggle {
    display: inline-flex;
  }
}

.te-mobile-dialog {
  margin: 0;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  border-inline-start: 1px solid var(--wp--custom--color--navy-border);
  inline-size: min(22rem, 88vw);
  max-inline-size: 100%;
  block-size: 100svh;
  max-block-size: 100svh;
  background-color: var(--wp--preset--color--near-navy);
  color: var(--wp--preset--color--surface-white);
  overflow-y: auto;
}

.te-mobile-dialog::backdrop {
  background-color: rgba(4, 14, 30, 0.72);
}

.te-mobile-dialog-inner {
  padding: 1.25rem 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-block-size: 100%;
}

.te-mobile-dialog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--wp--custom--color--navy-line);
}

.te-dialog-close {
  min-block-size: 2.75rem;
  min-inline-size: 5rem;
  padding: 0.5rem 0.875rem;
  background-color: var(--wp--custom--color--navy-raised);
  color: var(--wp--preset--color--surface-white);
  border: 1px solid var(--wp--custom--color--navy-control);
  border-radius: 0.375rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.te-mobile-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.te-mobile-nav-links a {
  display: flex;
  align-items: center;
  min-block-size: 3rem;
  padding: 0.625rem 0.75rem;
  color: var(--wp--preset--color--surface-white);
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 600;
  border-radius: 0.375rem;
}

.te-mobile-nav-links a:hover,
.te-mobile-nav-links a[aria-current="page"] {
  background-color: var(--wp--custom--color--navy-raised);
  color: var(--wp--preset--color--accent-cyan);
}

/* ==========================================================================
   Section Layout Primitives & Editorial Rhythm
   ========================================================================== */
.te-band {
  padding-block: clamp(3rem, 6vw, 5.25rem);
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.te-band-hero {
  background-color: var(--wp--preset--color--near-navy);
  color: var(--wp--preset--color--surface-white);
  padding-block: clamp(2.75rem, 6vw, 4.75rem);
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.te-band-mist {
  background-color: var(--wp--preset--color--surface-mist);
  border-block: 1px solid var(--wp--preset--color--border-subtle);
}

.te-band-white {
  background-color: var(--wp--preset--color--surface-white);
}

.te-band-cta-dark {
  background-color: var(--wp--preset--color--near-navy);
  color: var(--wp--preset--color--surface-white);
  border-block-start: 1px solid var(--wp--custom--color--navy-line);
}

.te-container {
  max-inline-size: 75rem;
  margin-inline: auto;
}

.te-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--action-blue);
  margin-block-end: 0.75rem;
}

.te-dark-surface .te-eyebrow {
  background-color: var(--wp--custom--color--navy-raised);
  border: 1px solid var(--wp--custom--color--navy-border);
  color: var(--wp--preset--color--mist-text);
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
}

.te-eyebrow-dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background-color: var(--wp--preset--color--accent-cyan);
  flex-shrink: 0;
}

/* Hero 7/5 Asymmetric Split */
.te-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (max-width: 1023px) {
  .te-hero-grid {
    grid-template-columns: 1fr;
  }
}

.te-hero-title {
  color: var(--wp--preset--color--surface-white) !important;
  margin-block: 0.5rem 1.125rem;
}

.te-hero-lead {
  color: var(--wp--preset--color--mist-text);
  font-size: clamp(1.0625rem, 1.2vw + 0.75rem, 1.2rem);
  line-height: 1.6;
  max-inline-size: 62ch;
  margin-block: 0 1.75rem;
}

.te-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  align-items: center;
}

@media (max-width: 599px) {
  .te-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .te-cta-row .te-btn,
  .te-cta-row .wp-block-button,
  .te-cta-row .wp-block-button__link {
    inline-size: 100%;
    text-align: center;
    justify-content: center;
  }
}

.te-hero-facts {
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.25rem 0 0;
  border-block-start: 1px solid var(--wp--custom--color--navy-line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 899px) {
  .te-hero-facts {
    grid-template-columns: 1fr;
    gap: 0.625rem;
  }
}

.te-hero-facts li {
  color: var(--wp--preset--color--mist-text);
  font-size: 0.875rem;
  line-height: 1.45;
  padding-inline-start: 1rem;
  position: relative;
}

.te-hero-facts li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.5em;
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: 50%;
  background-color: var(--wp--preset--color--accent-cyan);
}

/* Operating Model Snapshot Card in Hero */
.te-snapshot-card {
  background-color: var(--wp--preset--color--navy-elevated);
  border: 1px solid var(--wp--custom--color--navy-border);
  border-radius: 0.625rem;
  padding: 1.5rem;
}

.te-snapshot-heading {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--accent-cyan);
  margin: 0 0 1rem;
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--wp--custom--color--navy-line);
}

.te-snapshot-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.te-snapshot-item {
  background-color: var(--wp--custom--color--navy-hover);
  border: 1px solid var(--wp--custom--color--navy-border);
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
}

.te-snapshot-item--highlight {
  background-color: var(--wp--preset--color--action-blue);
  border-color: var(--wp--preset--color--accent-cyan);
}

.te-snapshot-item strong {
  display: block;
  color: var(--wp--preset--color--surface-white);
  font-size: 0.9375rem;
  margin-block-end: 0.2rem;
}

.te-snapshot-item span {
  display: block;
  color: var(--wp--preset--color--mist-text);
  font-size: 0.84375rem;
  line-height: 1.45;
}

.te-snapshot-item--highlight span {
  color: var(--wp--preset--color--surface-white);
}

/* ==========================================================================
   Qualification Ledger (2-Column Editorial Split)
   ========================================================================== */
.te-split-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

@media (max-width: 899px) {
  .te-split-2col {
    grid-template-columns: 1fr;
  }
}

.te-ledger-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.te-ledger-box {
  background-color: var(--wp--preset--color--surface-mist);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-inline-start: 4px solid var(--wp--preset--color--action-blue);
  border-radius: 0.5rem;
  padding: 1.375rem 1.5rem;
}

.te-ledger-box--exclude {
  background-color: var(--wp--preset--color--surface-white);
  border-inline-start-color: var(--wp--preset--color--ink-muted);
}

.te-ledger-box h3 {
  font-size: 1.0625rem;
  margin: 0 0 0.75rem;
  color: var(--wp--preset--color--text-navy);
}

.te-ledger-box ul {
  margin: 0;
  padding-inline-start: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--wp--preset--color--near-navy);
  font-size: 0.9375rem;
}

.te-ledger-box--exclude ul {
  color: var(--wp--preset--color--ink-muted);
}

/* ==========================================================================
   5-Stage End-to-End Message Flow Pipeline (Horizontal -> Vertical Mobile)
   ========================================================================== */
.te-flow-figure {
  margin: 1.75rem 0 0;
}

.te-flow-pipeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
}

.te-flow-step {
  background-color: var(--wp--preset--color--surface-white);
  border: 1.5px solid var(--wp--custom--color--border-strong);
  border-radius: 0.5rem;
  padding: 1.125rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.te-flow-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  inset-inline-end: -1.05rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--wp--preset--color--action-blue);
  font-weight: 700;
  font-size: 1.125rem;
}

.te-flow-step--core {
  background-color: var(--wp--preset--color--text-navy);
  border-color: var(--wp--preset--color--text-navy);
  color: var(--wp--preset--color--surface-white);
}

.te-flow-step-num {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--wp--preset--color--action-blue);
}

.te-flow-step--core .te-flow-step-num {
  color: var(--wp--preset--color--accent-cyan);
}

.te-flow-step strong {
  font-size: 0.96875rem;
  color: var(--wp--preset--color--text-navy);
}

.te-flow-step--core strong {
  color: var(--wp--preset--color--surface-white);
}

.te-flow-step span {
  font-size: 0.84375rem;
  color: var(--wp--preset--color--ink-muted);
  line-height: 1.45;
}

.te-flow-step--core span {
  color: var(--wp--preset--color--mist-text);
}

@media (max-width: 959px) {
  .te-flow-pipeline {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .te-flow-step:not(:last-child)::after {
    content: "↓";
    inset-inline-end: auto;
    inset-inline-start: 1.5rem;
    inset-block-start: auto;
    inset-block-end: -1.35rem;
    transform: none;
  }
}

.te-flow-caption {
  margin-block-start: 1.25rem;
  padding: 1rem 1.25rem;
  background-color: var(--wp--preset--color--surface-white);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 0.5rem;
  font-size: 0.90625rem;
  color: var(--wp--preset--color--near-navy);
}

/* ==========================================================================
   Numbered Editorial Hairline Rows (Three Principal Buying Reasons)
   ========================================================================== */
.te-pillar-list {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  border-block-start: 1px solid var(--wp--preset--color--border-subtle);
}

.te-pillar-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 1.5rem;
  padding-block: 1.75rem;
  border-block-end: 1px solid var(--wp--preset--color--border-subtle);
  align-items: baseline;
}

@media (max-width: 859px) {
  .te-pillar-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

.te-pillar-num {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--wp--preset--color--action-blue);
}

.te-pillar-row h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--wp--preset--color--text-navy);
}

.te-pillar-row p {
  margin: 0;
  color: var(--wp--preset--color--ink-muted);
  font-size: 0.96875rem;
}

/* ==========================================================================
   Labeled Illustrative Workflow Schematics + hidden="until-found" Tabs
   ========================================================================== */
.te-workflow-explorer {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: 1.75rem;
  margin-block-start: 1.75rem;
  align-items: start;
}

@media (max-width: 959px) {
  .te-workflow-explorer {
    grid-template-columns: 1fr;
  }
}

.te-workflow-tabs {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.te-workflow-tab-btn {
  text-align: start;
  padding: 0.9375rem 1.125rem;
  min-block-size: 3.25rem;
  background-color: var(--wp--preset--color--surface-white);
  color: var(--wp--preset--color--text-navy);
  border: 1px solid var(--wp--custom--color--border-strong);
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.te-workflow-tab-btn:hover {
  border-color: var(--wp--preset--color--action-blue);
}

.te-workflow-tab-btn[aria-expanded="true"] {
  background-color: var(--wp--preset--color--text-navy);
  color: var(--wp--preset--color--surface-white);
  border-color: var(--wp--preset--color--text-navy);
}

/* NOTE per modern-web-guidance `search-hidden-content`:
   Do NOT set display/border/padding directly on [hidden="until-found"];
   style the nested .te-schematic-card child instead! */
.te-schematic-card {
  background-color: var(--wp--preset--color--surface-white);
  border: 1.5px solid var(--wp--custom--color--border-strong);
  border-radius: 0.625rem;
  overflow: hidden;
}

.te-schematic-banner {
  background-color: var(--wp--preset--color--surface-mist);
  border-block-end: 1px solid var(--wp--preset--color--border-subtle);
  padding: 0.625rem 1.25rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.75rem;
  color: var(--wp--preset--color--ink-muted);
  letter-spacing: 0.04em;
}

.te-schematic-body {
  padding: 1.375rem 1.5rem;
}

.te-schematic-body h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1875rem;
  color: var(--wp--preset--color--text-navy);
}

.te-schematic-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block: 1rem;
  padding: 1rem;
  background-color: var(--wp--preset--color--surface-mist);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 0.5rem;
}

@media (max-width: 639px) {
  .te-schematic-meta {
    grid-template-columns: 1fr;
  }
}

.te-schematic-caption {
  margin: 0.875rem 0 0;
  font-size: 0.875rem;
  color: var(--wp--preset--color--ink-muted);
}

.te-planned-callout {
  background-color: var(--wp--preset--color--surface-mist);
  border: 1.5px solid var(--wp--preset--color--action-blue);
  border-radius: 0.625rem;
  padding: 1.5rem;
}

.te-planned-badge {
  display: inline-block;
  background-color: var(--wp--preset--color--text-navy);
  color: var(--wp--preset--color--surface-white);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 0.25rem;
  margin-block-end: 0.75rem;
}

/* ==========================================================================
   Responsive Accessible Data Tables (`responsive-table` @container pattern)
   ========================================================================== */
.te-table-wrapper {
  overflow-x: auto;
  max-inline-size: 100%;
  container-type: inline-size;
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 0.5rem;
  background-color: var(--wp--preset--color--surface-white);
}

.te-table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
}

.te-table caption {
  text-align: start;
  padding: 0.875rem 1.125rem;
  font-weight: 700;
  color: var(--wp--preset--color--text-navy);
  background-color: var(--wp--preset--color--surface-mist);
  border-block-end: 1px solid var(--wp--preset--color--border-subtle);
}

.te-table thead {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}

.te-table thead th {
  background-color: var(--wp--preset--color--text-navy);
  color: var(--wp--preset--color--surface-white);
  text-align: start;
  padding: 0.875rem 1.125rem;
  font-weight: 600;
  font-size: 0.875rem;
}

.te-table tbody th,
.te-table tbody td {
  padding: 0.9375rem 1.125rem;
  border-block-end: 1px solid var(--wp--preset--color--border-subtle);
  vertical-align: top;
  text-align: start;
}

.te-table tbody tr:last-child th,
.te-table tbody tr:last-child td {
  border-block-end: 0;
}

.te-table tbody th {
  position: sticky;
  inset-inline-start: 0;
  background-color: var(--wp--preset--color--surface-mist);
  color: var(--wp--preset--color--text-navy);
  font-weight: 700;
}

@container (width < 600px) {
  .te-table,
  .te-table thead,
  .te-table tbody,
  .te-table tr,
  .te-table th,
  .te-table td {
    display: block;
  }

  .te-table thead {
    /* MANDATORY: Hide column header from layout and screen readers when labels are injected */
    display: none;
  }

  .te-table tbody tr {
    border-block-end: 2px solid var(--wp--custom--color--border-strong);
    padding-block-end: 0.5rem;
  }

  .te-table tbody th {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background-color: var(--wp--custom--color--surface-tint);
    border-block-end: 1px solid var(--wp--preset--color--border-subtle);
  }

  .te-table tbody td {
    padding-block: 0.625rem;
  }

  .te-table tbody td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: var(--wp--preset--color--text-navy);
    display: block;
    margin-block-end: 0.2rem;
    font-size: 0.8125rem;
  }
}

/* ==========================================================================
   Contained Dark Commercial Banner & FAQ Disclosures (<details>)
   ========================================================================== */
.te-commercial-banner {
  background-color: var(--wp--preset--color--text-navy);
  color: var(--wp--preset--color--surface-white);
  border-radius: 0.75rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) auto;
  gap: 2rem;
  align-items: center;
}

@media (max-width: 859px) {
  .te-commercial-banner {
    grid-template-columns: 1fr;
  }
}

.te-commercial-banner h2 {
  color: var(--wp--preset--color--surface-white) !important;
  margin-block: 0.375rem 0.75rem;
}

.te-commercial-banner p {
  color: var(--wp--preset--color--mist-text);
  margin-block: 0 0.75rem;
}

.te-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

@media (max-width: 899px) {
  .te-faq-layout {
    grid-template-columns: 1fr;
  }
}

.te-faq-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.te-faq-item,
.wp-block-details {
  background-color: var(--wp--preset--color--surface-mist);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 0.5rem;
  padding: 0;
}

.te-faq-item summary,
.wp-block-details summary {
  list-style: none;
  cursor: pointer;
  min-block-size: 3.25rem;
  padding: 0.9375rem 1.25rem;
  font-weight: 700;
  color: var(--wp--preset--color--text-navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.te-faq-item summary::-webkit-details-marker,
.wp-block-details summary::-webkit-details-marker {
  display: none;
}

.te-faq-item summary::after,
.wp-block-details summary::after {
  content: "+";
  font-family: var(--wp--preset--font-family--mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--wp--preset--color--action-blue);
  flex-shrink: 0;
}

.te-faq-item[open] summary::after,
.wp-block-details[open] summary::after {
  content: "−";
}

.te-faq-answer,
.wp-block-details > *:not(summary) {
  padding: 0 1.25rem 1.125rem;
  margin: 0;
  color: var(--wp--preset--color--near-navy);
  font-size: 0.96875rem;
}

/* ==========================================================================
   Inquiry Form (`validate-input-after-interaction` + `forms` best practices)
   ========================================================================== */
.te-inquiry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

@media (max-width: 959px) {
  .te-inquiry-grid {
    grid-template-columns: 1fr;
  }
}

.te-form-card {
  background-color: var(--wp--preset--color--surface-white);
  border: 1px solid var(--wp--custom--color--border-strong);
  border-radius: 0.625rem;
  padding: clamp(1.375rem, 3vw, 2.25rem);
}

.te-sidebar-card {
  background-color: var(--wp--preset--color--surface-mist);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 0.625rem;
  padding: 1.5rem;
}

.te-form-group {
  margin-block-end: 1.5rem;
}

.te-form-label {
  display: block;
  font-weight: 600;
  color: var(--wp--preset--color--text-navy);
  font-size: 0.96875rem;
  margin-block-end: 0.25rem; /* Gestalt proximity: closer to input than adjacent group */
}

.te-req-mark {
  color: var(--wp--custom--color--danger);
  margin-inline-start: 0.15rem;
}

/* Hints placed ABOVE inputs so autocomplete/mobile keyboards never cover them */
.te-field-hint {
  display: block;
  color: var(--wp--preset--color--ink-muted);
  font-size: 0.84375rem;
  line-height: 1.45;
  margin-block-end: 0.375rem;
}

.te-input,
.te-select,
.te-textarea {
  inline-size: 100%;
  font-family: inherit;
  font-size: 1rem; /* >=16px prevents iOS zoom */
  line-height: 1.45;
  color: var(--wp--preset--color--near-navy);
  background-color: var(--wp--preset--color--surface-white);
  border: 1.5px solid var(--wp--custom--color--border-input);
  border-radius: 0.375rem;
  padding: 0.75rem 0.875rem;
  min-block-size: 3rem; /* >=48px tap target */
}

@media (pointer: coarse) {
  .te-input,
  .te-select {
    min-block-size: 3.25rem; /* 52px coarse pointer target */
  }
}

.te-textarea {
  min-block-size: 7rem;
  resize: vertical;
}

.te-fieldset {
  border: 1.5px solid var(--wp--custom--color--border-strong);
  border-radius: 0.5rem;
  padding: 1rem 1.125rem;
  margin: 0 0 1.5rem;
}

.te-fieldset legend {
  font-weight: 600;
  color: var(--wp--preset--color--text-navy);
  padding-inline: 0.375rem;
  font-size: 0.96875rem;
}

.te-radio-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block-start: 0.5rem;
}

.te-radio-option {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-block-size: 2.75rem;
  padding-block: 0.375rem;
  cursor: pointer;
  color: var(--wp--preset--color--near-navy);
  font-size: 0.9375rem;
}

.te-radio-option input[type="radio"] {
  accent-color: var(--wp--preset--color--action-blue);
  inline-size: 1.1875rem;
  block-size: 1.1875rem;
  margin-block-start: 0.15rem;
  flex-shrink: 0;
}

.te-field-error {
  display: none;
  color: var(--wp--custom--color--danger);
  font-size: 0.875rem;
  font-weight: 600;
  margin-block-start: 0.375rem;
}

/* Deferred validation state (:user-invalid + fallback + server-invalid) */
.te-input:user-invalid,
.te-select:user-invalid,
.te-textarea:user-invalid,
.te-input.user-invalid-fallback,
.te-select.user-invalid-fallback,
.te-textarea.user-invalid-fallback,
.te-input[data-server-invalid="true"],
.te-select[data-server-invalid="true"],
.te-textarea[data-server-invalid="true"] {
  border-color: var(--wp--custom--color--danger);
  background-color: var(--wp--custom--color--danger-surface);
}

.te-input:user-invalid ~ .te-field-error,
.te-select:user-invalid ~ .te-field-error,
.te-textarea:user-invalid ~ .te-field-error,
.te-input.user-invalid-fallback ~ .te-field-error,
.te-select.user-invalid-fallback ~ .te-field-error,
.te-textarea.user-invalid-fallback ~ .te-field-error,
.te-field-error--visible {
  display: block;
}

.te-alert {
  border-radius: 0.5rem;
  padding: 1.125rem 1.25rem;
  margin-block-end: 1.5rem;
  font-size: 0.9375rem;
}

.te-alert--error {
  background-color: var(--wp--custom--color--danger-surface);
  border: 1.5px solid var(--wp--custom--color--danger);
  color: var(--wp--custom--color--danger-ink);
}

.te-alert--success {
  background-color: var(--wp--custom--color--success-surface);
  border: 1.5px solid var(--wp--custom--color--success-border);
  color: var(--wp--custom--color--success-ink);
}

.te-alert--notice {
  background-color: var(--wp--custom--color--warning-surface);
  border: 1.5px solid var(--wp--custom--color--warning-border);
  color: var(--wp--custom--color--warning-ink);
}

.te-honeypot-wrap {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

.te-privacy-note {
  font-size: 0.84375rem;
  color: var(--wp--preset--color--ink-muted);
  background-color: var(--wp--preset--color--surface-mist);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 0.375rem;
  padding: 0.875rem 1rem;
  margin-block-end: 1.25rem;
}

/* ==========================================================================
   Global Footer & Private Placeholder Banner
   ========================================================================== */
/* The root block gap would otherwise leave a white strip between the closing band and the footer. */
.wp-site-blocks > footer.wp-block-template-part {
  margin-block-start: 0;
}

.te-footer {
  background-color: var(--wp--preset--color--near-navy);
  color: var(--wp--preset--color--mist-text);
  border-block-start: 1px solid var(--wp--custom--color--navy-line);
  padding-block: 3rem 1.75rem;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

/* Brand and scope, Explore, Contact: one row on desktop; brand above two columns on tablets; stacked on phones. */
.te-footer-inner {
  max-inline-size: 75rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 2.25rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.te-footer-logo {
  display: block;
  inline-size: 21.25rem; /* 340px, the Brand Kit v2 minimum for a legible tagline */
  max-inline-size: 100%;
  block-size: auto;
}

.te-footer-about {
  margin: 1rem 0 0;
  max-inline-size: 34rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.te-footer-scope {
  margin: 0.75rem 0 0;
  max-inline-size: 34rem;
  color: var(--wp--custom--color--label-on-dark);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.te-footer-heading {
  margin: 0.375rem 0 1rem;
  color: var(--wp--custom--color--label-on-dark);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.te-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.te-footer-links a {
  display: inline-flex;
  align-items: center;
  column-gap: 0.375rem;
  min-block-size: 1.5rem; /* WCAG 2.5.8 target size, whatever padding a skin adds */
  color: var(--wp--preset--color--mist-text);
  text-decoration: none;
  font-size: 0.90625rem;
}

.te-footer-links a:hover {
  color: var(--wp--preset--color--surface-white);
  text-decoration: underline;
}

/* Contact channels: a fixed label column so the values line up. */
.te-footer-contact {
  margin-block-start: 0.625rem;
  font-style: normal;
}

.te-footer-channel {
  flex: none;
  inline-size: 5rem;
  color: var(--wp--custom--color--label-on-dark);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.te-footer-links a:hover .te-footer-channel {
  color: inherit;
}

.te-footer-address {
  margin: 1rem 0 0;
  color: var(--wp--custom--color--label-on-dark);
  font-size: 0.84375rem;
  line-height: 1.55;
}

@media (max-width: 1023px) {
  .te-footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .te-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 599px) {
  .te-footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  nav.te-footer-col .te-footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The company line and, once published, the legal links. Hidden when neither has anything to show. */
.te-footer-bottom {
  max-inline-size: 75rem;
  margin: 1.5rem auto 0;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--wp--custom--color--navy-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1.5rem;
  font-size: 0.84375rem;
  color: var(--wp--custom--color--label-on-dark);
}

.te-footer-bottom:not(:has(*)) {
  display: none;
}

.te-footer-bottom .te-legal-links-list {
  margin: 0;
}

/* Company footer line and /company/ identity card, rendered by textenvoy-core once the identity is complete. */
.te-footer-entity {
  margin: 0;
  color: var(--wp--preset--color--mist-text);
}
.te-footer-entity a {
  color: inherit;
  text-underline-offset: 0.2em;
}

.te-footer-entity a:hover {
  color: var(--wp--preset--color--surface-white);
}

.te-identity-card {
  max-inline-size: 42rem;
  margin: 1rem 0 1.25rem;
  padding: 0.25rem 1.5rem;
  background-color: var(--wp--preset--color--surface-mist);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 0.5rem;
}

.te-identity-card > div {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  padding-block: 0.875rem;
}

.te-identity-card > div + div {
  border-block-start: 1px solid var(--wp--preset--color--border-subtle);
}

.te-identity-card dt {
  color: var(--wp--preset--color--text-navy);
  font-weight: 700;
}

.te-identity-card dd {
  margin: 0;
  color: var(--wp--preset--color--near-navy);
  overflow-wrap: anywhere;
}

@media (max-width: 599px) {
  .te-identity-card > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

.te-staging-gate-banner {
  background-color: var(--wp--custom--color--warning-surface);
  border: 1.5px dashed var(--wp--custom--color--warning-border);
  border-radius: 0.5rem;
  padding: 1.25rem;
  color: var(--wp--custom--color--warning-ink);
  font-size: 0.90625rem;
}

/* ==========================================================================
   Subpage Editorial Components (Platform, Deployment, Pricing, Company)
   ========================================================================== */
.te-page-hero-note {
  color: var(--wp--custom--color--label-on-dark);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-block: 1.125rem 0;
  max-inline-size: 64ch;
}

.te-chapter-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}

.te-chapter-split--reverse {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

@media (max-width: 1023px) {
  .te-chapter-split,
  .te-chapter-split--reverse {
    grid-template-columns: 1fr;
  }
}

.te-scope-note {
  margin-block-start: 1rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--wp--preset--color--border-subtle);
  font-size: 0.875rem;
  color: var(--wp--preset--color--ink-muted);
}

.te-scope-note strong {
  color: var(--wp--preset--color--text-navy);
}

.te-surface-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-block-start: 1.5rem;
}

@media (max-width: 767px) {
  .te-surface-pair {
    grid-template-columns: 1fr;
  }
}

.te-checklist-grid {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.125rem;
}

@media (max-width: 767px) {
  .te-checklist-grid {
    grid-template-columns: 1fr;
  }
}

.te-checklist-card {
  background-color: var(--wp--preset--color--surface-white);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 0.5rem;
  padding: 1.125rem 1.25rem;
}

.te-checklist-card strong {
  display: block;
  color: var(--wp--preset--color--text-navy);
  margin-block-end: 0.25rem;
}

.te-step-sequence {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.te-step-item {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.125rem 1.25rem;
  background-color: var(--wp--preset--color--surface-mist);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 0.5rem;
  align-items: baseline;
}

@media (max-width: 639px) {
  .te-step-item {
    grid-template-columns: 1fr;
    gap: 0.375rem;
  }
}

.te-step-badge {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--wp--preset--color--action-blue);
}

.te-cost-layers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-block-start: 1.5rem;
}

@media (max-width: 859px) {
  .te-cost-layers-grid {
    grid-template-columns: 1fr;
  }
}

.te-cost-layer-card {
  background-color: var(--wp--preset--color--surface-mist);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-block-start: 4px solid var(--wp--preset--color--action-blue);
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.te-cost-layer-card--supplier {
  background-color: var(--wp--preset--color--surface-white);
  border-block-start-color: var(--wp--preset--color--ink-muted);
}

.te-legal-links-list {
  list-style: none;
  margin: 0.875rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.te-legal-links-list a {
  color: var(--wp--custom--color--label-on-dark);
  font-size: 0.84375rem;
  text-decoration: none;
}

.te-legal-links-list a:hover {
  color: var(--wp--preset--color--surface-white);
  text-decoration: underline;
}

/* Launch presentation: explicit type hierarchy and lightweight HTML diagrams. */
.te-band h2, .te-band-cta-dark h2 { font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.16; letter-spacing: -.035em; margin-block: .5rem 1.25rem; }
h1.wp-block-heading { font-size: clamp(2.15rem, 4.6vw, 3.75rem); line-height: 1.08; letter-spacing: -.045em; }
.te-hero-title { max-inline-size: 15ch; }
.te-hero-lead { max-inline-size: 47ch; font-size: 1.125rem; }
.te-hero-grid { align-items: center; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: clamp(2rem,5vw,5rem); }
.te-band-hero { padding-block: clamp(3rem,6vw,6rem); }
.te-hero-facts { margin-block-start: 3.5rem; padding-block-start: 1.5rem; }
.te-network-art { margin: 0; padding: clamp(1.25rem,3vw,2rem); border: 1px solid var(--wp--custom--color--navy-border); border-radius: 1rem; background: radial-gradient(ellipse at 50% 45%, var(--wp--custom--color--navy-hover) 0%, var(--wp--preset--color--navy-elevated) 58%, var(--wp--preset--color--navy-elevated) 100%); box-shadow: 0 24px 60px #020d2033; }
.te-art-topline { display:flex; justify-content:space-between; gap:1rem; color:var(--wp--custom--color--label-on-dark); font: .75rem/1.5 var(--wp--preset--font-family--mono); letter-spacing:.08em; margin-block-end:1.75rem; }
.te-network-endpoint { display:flex; align-items:center; gap:1rem; padding:.75rem; }
.te-network-endpoint small, .te-network-core small { display:block; color:var(--wp--custom--color--label-on-dark); font: .75rem/1.5 var(--wp--preset--font-family--mono); letter-spacing:.08em; }
.te-network-endpoint strong { display:block; color:var(--wp--preset--color--surface-white); font-size:.95rem; font-weight:500; }
.te-node-icon { display:grid; place-items:center; width:2.5rem; height:2.5rem; border:1px solid var(--wp--custom--color--navy-control); border-radius:.5rem; color:var(--wp--preset--color--accent-cyan); font-size:1.4rem; flex-shrink:0; }
.te-network-wire { height:3.4rem; border-inline-start:1px solid var(--wp--preset--color--accent-cyan); margin-inline-start:2rem; display:flex; align-items:center; position:relative; }
.te-network-wire::after { content:''; width:7px; height:7px; border-right:1px solid var(--wp--preset--color--accent-cyan); border-bottom:1px solid var(--wp--preset--color--accent-cyan); transform:rotate(45deg); position:absolute; bottom:1px; left:-4px; }
.te-network-wire span { margin-inline-start:1rem; color:var(--wp--custom--color--label-on-dark); font: .75rem var(--wp--preset--font-family--mono); letter-spacing:.08em; }
.te-network-core { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:1rem; border:1px solid var(--wp--custom--color--navy-control); border-radius:.75rem; padding:1.25rem; background:var(--wp--custom--color--navy-hover); box-shadow:0 0 35px #0873fb15; }
.te-core-symbol { display:grid; place-items:center; width:3rem; height:3rem; background:var(--wp--preset--color--action-blue); color:var(--wp--preset--color--surface-white); border-radius:.6rem; font-weight:800; letter-spacing:-.08em; }
.te-network-core strong { color:var(--wp--preset--color--surface-white); font-size:1.55rem; line-height:1.25; display:block; letter-spacing:-.04em; }
.te-network-core strong span { display:block; font-size:.8rem; font-weight:400; color:var(--wp--preset--color--mist-text); letter-spacing:0; }
.te-core-tag { margin-inline-start:auto; color:var(--wp--preset--color--mist-text); font-size:.75rem; border:1px solid var(--wp--custom--color--navy-control); border-radius:1rem; padding:.25rem .5rem; }
.te-network-art figcaption { color:var(--wp--custom--color--label-on-dark); font-size:.75rem; padding-block-start:1.25rem; border-top:1px solid var(--wp--custom--color--navy-border); margin-block-start:1.25rem; }
.te-architecture { margin:2.5rem 0 0; background:var(--wp--preset--color--surface-white); border:1px solid var(--wp--preset--color--border-subtle); border-radius:1rem; padding:clamp(1.25rem,3vw,2.5rem); }
.te-architecture-label { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; color:var(--wp--preset--color--ink-muted); font: .75rem var(--wp--preset--font-family--mono); letter-spacing:.05em; border-bottom:1px solid var(--wp--preset--color--border-subtle); padding-bottom:1rem; }
.te-architecture-label span { letter-spacing:0; font-family:var(--wp--preset--font-family--sans); }
.te-architecture-path { display:grid; grid-template-columns:1fr 2rem 1.3fr 2rem 1fr; gap:1rem; align-items:center; padding-block:2rem; }
.te-arch-number { color:var(--wp--preset--color--action-blue); font: .75rem/1.5 var(--wp--preset--font-family--mono); letter-spacing:.04em; }
.te-architecture h3 { font-size:1.15rem; line-height:1.3; margin:.6rem 0; }
.te-architecture p { font-size:.9rem; color:var(--wp--preset--color--ink-muted); margin:.5rem 0 0; }
.te-arch-arrow { color:var(--wp--preset--color--action-blue); font-size:1.6rem; text-align:center; }
.te-arch-switch { background:var(--wp--preset--color--near-navy); color:var(--wp--preset--color--surface-white); padding:1.5rem; border-radius:.65rem; }
.te-arch-switch h3 { color:var(--wp--preset--color--surface-white); }
.te-arch-switch .te-arch-number { color:var(--wp--preset--color--accent-cyan); }
.te-arch-switch ul { padding:0; margin:1rem 0 0; list-style:none; display:grid; gap:.5rem; font-size:.82rem; color:var(--wp--preset--color--mist-text); }
.te-arch-switch li { border-top:1px solid var(--wp--custom--color--navy-border); padding-top:.5rem; }
.te-receipt-path { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; padding:.85rem 0; border-block:1px dashed var(--wp--custom--color--label-on-dark); color:var(--wp--preset--color--action-blue); font-size:.8rem; }
.te-receipt-note { margin-inline-start:auto; color:var(--wp--preset--color--ink-muted); }
.te-control-planes { display:grid; grid-template-columns:1fr 1fr; gap:2rem; padding-block:1.5rem; }
.te-control-planes strong { display:block; margin-top:.4rem; font-size:.95rem; }
.te-architecture figcaption { font-size:.8rem; color:var(--wp--preset--color--ink-muted); border-top:1px solid var(--wp--preset--color--border-subtle); padding-top:1rem; }
@media (max-width: 1023px) { .te-hero-grid { grid-template-columns:1fr; } .te-hero-title { max-inline-size:19ch; } .te-network-art { max-inline-size:38rem; width:100%; } }
@media (max-width: 700px) { .te-architecture-path { grid-template-columns:1fr; gap:.75rem; } .te-arch-arrow { transform:rotate(90deg); justify-self:start; margin-inline-start:1rem; } .te-control-planes { grid-template-columns:1fr; gap:1.25rem; } .te-receipt-note { margin-inline-start:0; } .te-art-topline { font-size:.75rem; } .te-core-tag { margin-inline-start:0; } }

/* Visual workflow explorer; all walkthroughs remain readable without JavaScript. */
.te-workflow-tabs[hidden] { display:none; }
.te-workflow-visual { grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); gap:2rem; }
.te-workflow-visual .te-workflow-tab-btn { display:flex; align-items:flex-start; gap:1rem; padding:1.2rem; border-color:transparent; background:transparent; line-height:1.4; }
.te-workflow-visual .te-workflow-tab-btn small { display:block; font-size:.8rem; font-weight:400; color:var(--wp--preset--color--ink-muted); margin-top:.3rem; }
.te-wf-tab-number { font: .75rem/1.8 var(--wp--preset--font-family--mono); color:var(--wp--preset--color--action-blue); }
.te-workflow-visual .te-workflow-tab-btn:hover { background:var(--wp--custom--color--surface-tint); }
.te-workflow-visual .te-workflow-tab-btn[aria-expanded="true"] { background:var(--wp--preset--color--near-navy); color:var(--wp--preset--color--surface-white); box-shadow:inset 3px 0 var(--wp--preset--color--accent-cyan); }
.te-workflow-visual .te-workflow-tab-btn[aria-expanded="true"] small { color:var(--wp--preset--color--mist-text); }
.te-workflow-visual .te-workflow-tab-btn[aria-expanded="true"] .te-wf-tab-number { color:var(--wp--preset--color--accent-cyan); }
.te-workflow-visual .te-workflow-tab-btn[aria-expanded="true"]:focus-visible { outline-color:var(--wp--preset--color--action-blue); }
.te-workflow-panels { min-width:0; }
.te-workflow-visual .te-schematic-card { border:1px solid var(--wp--custom--color--border-strong); box-shadow:0 12px 32px #071B3708; margin-bottom:1rem; }
.te-wf-disclosure { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; padding:1rem 1.5rem; border-bottom:1px solid var(--wp--preset--color--border-subtle); font: .75rem/1.5 var(--wp--preset--font-family--mono); color:var(--wp--preset--color--ink-muted); letter-spacing:.03em; }
.te-wf-disclosure span { font-family:var(--wp--preset--font-family--sans); font-size:.75rem; letter-spacing:0; }
.te-workflow-visual .te-schematic-body { padding:clamp(1.1rem,3vw,2rem); }
.te-workflow-visual .te-schematic-body h3 { font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.25; letter-spacing:-.025em; }
.te-wf-intro { color:var(--wp--preset--color--ink-muted); font-size:.95rem; margin:.75rem 0 1.5rem; }
.te-workflow-canvas { padding:clamp(1rem,2.5vw,1.5rem); background:var(--wp--preset--color--surface-mist); border:1px solid var(--wp--preset--color--border-subtle); border-radius:.6rem; }
.te-workflow-node { display:flex; flex-direction:column; gap:.3rem; background:var(--wp--preset--color--surface-white); padding:1rem 1.25rem; border:1px solid var(--wp--custom--color--border-strong); border-radius:.5rem; }
.te-wf-label { color:var(--wp--preset--color--ink-muted); font: .75rem/1.5 var(--wp--preset--font-family--mono); letter-spacing:.04em; }
.te-workflow-node strong { font-size:1rem; line-height:1.35; color:var(--wp--preset--color--text-navy); }
.te-workflow-node > span:last-child { color:var(--wp--preset--color--ink-muted); font-size:.8rem; }
.te-workflow-node--core { background:var(--wp--preset--color--near-navy); border-color:var(--wp--preset--color--near-navy); }
.te-workflow-node--core strong { color:var(--wp--preset--color--surface-white); }
.te-workflow-node--core .te-wf-label { color:var(--wp--preset--color--accent-cyan); }
.te-workflow-node--core > span:last-child { color:var(--wp--preset--color--mist-text); }
.te-wf-connector { color:var(--wp--preset--color--action-blue); margin-inline-start:1.5rem; line-height:1.5; font-size:1.25rem; }
.te-wf-sheet-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; padding-bottom:1rem; border-bottom:1px solid var(--wp--preset--color--border-subtle); }
.te-wf-chip { color:var(--wp--preset--color--ink-muted); background:var(--wp--custom--color--surface-tint); padding:.25rem .5rem; border-radius:.25rem; font-size:.75rem; }
.te-wf-definition { margin:0; }
.te-wf-definition > div { display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--wp--preset--color--border-subtle); font-size:.875rem; }
.te-wf-definition dt { color:var(--wp--preset--color--ink-muted); }
.te-wf-definition dd { margin:0; color:var(--wp--preset--color--text-navy); font-weight:600; }
.te-wf-note { font-size:.8rem; color:var(--wp--preset--color--action-blue); margin:1rem 0 0; }
.te-wf-timeline { list-style:none; margin:0; padding:0; }
.te-wf-timeline li { display:grid; grid-template-columns:2rem minmax(0,1fr); gap:1rem; padding:1.25rem 0; position:relative; }
.te-wf-timeline li:not(:last-child)::after { content:''; position:absolute; inset-inline-start:.95rem; top:3.4rem; bottom:-.8rem; width:1px; background:var(--wp--custom--color--border-strong); }
.te-wf-step { display:grid; place-items:center; width:2rem; height:2rem; border:1px solid var(--wp--custom--color--border-strong); border-radius:50%; color:var(--wp--preset--color--action-blue); background:var(--wp--preset--color--surface-white); font: .75rem var(--wp--preset--font-family--mono); }
.te-wf-timeline strong { color:var(--wp--preset--color--text-navy); font-size:.95rem; }
.te-wf-timeline p { margin:.3rem 0 .6rem; color:var(--wp--preset--color--ink-muted); font-size:.84rem; }
.te-wf-status { display:inline-block; padding:.25rem .5rem; background:var(--wp--custom--color--surface-tint); color:var(--wp--custom--color--ink-blue); font: .75rem/1.6 var(--wp--preset--font-family--mono); border-radius:.25rem; }
.te-wf-status--receipt { background:var(--wp--custom--color--success-surface); color:var(--wp--custom--color--success-ink); }
@media(max-width:959px) { .te-workflow-visual { grid-template-columns:1fr; } .te-workflow-visual .te-workflow-tabs { display:grid; grid-template-columns:1fr 1fr; } .te-workflow-visual .te-workflow-tabs[hidden] { display:none; } }
@media(max-width:520px) { .te-workflow-visual .te-workflow-tabs { grid-template-columns:1fr; gap:.25rem; } .te-workflow-visual .te-workflow-tab-btn { padding:.9rem 1rem; } .te-wf-definition > div { grid-template-columns:1fr; gap:.25rem; } }

/* Commercial clarity: responsibility layers and transparent cost structure. */
.te-benefit-link { display:inline-block; min-block-size:1.5rem; margin-top:.8rem; font-size:.88rem; font-weight:600; text-underline-offset:.25em; }
.te-ownership-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; margin-top:2rem; }
.te-owner-card { display:flex; flex-direction:column; border:1px solid var(--wp--preset--color--border-subtle); border-radius:.65rem; padding:1.5rem; background:var(--wp--preset--color--surface-mist); }
.te-owner-card h3 { font-size:1.5rem; margin:.75rem 0; letter-spacing:-.025em; }
.te-owner-card p, .te-owner-card li { font-size:.9rem; color:var(--wp--preset--color--ink-muted); }
.te-owner-card ul { padding-left:1.1rem; margin:1rem 0 1.5rem; }
.te-owner-card li + li { margin-top:.6rem; }
.te-owner-foot { display:block; margin-top:auto; padding-top:1rem; border-top:1px solid var(--wp--custom--color--border-strong); font-size:.75rem; color:var(--wp--preset--color--ink-muted); }
.te-owner-card--platform { background:var(--wp--preset--color--near-navy); border-color:var(--wp--preset--color--near-navy); }
.te-owner-card--platform h3 { color:var(--wp--preset--color--surface-white); }
.te-owner-card--platform .te-wf-label { color:var(--wp--preset--color--accent-cyan); }
.te-owner-card--platform p, .te-owner-card--platform li, .te-owner-card--platform .te-owner-foot { color:var(--wp--preset--color--mist-text); }
.te-owner-card--platform .te-owner-foot { border-color:var(--wp--custom--color--navy-border); }
.te-readiness-strip { display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; margin-top:1.5rem; border-block:1px solid var(--wp--preset--color--border-subtle); padding:1.2rem 0; font-size:.85rem; color:var(--wp--preset--color--ink-muted); }
.te-readiness-strip strong { color:var(--wp--preset--color--text-navy); }
.te-pricing-model { display:grid; grid-template-columns:minmax(0,1fr) 2rem minmax(0,1fr); gap:1.25rem; align-items:stretch; margin-top:2rem; }
.te-price-platform, .te-price-supplier { border-radius:.75rem; padding:clamp(1.5rem,3vw,2.5rem); }
.te-price-platform { background:var(--wp--preset--color--near-navy); color:var(--wp--preset--color--mist-text); }
.te-price-supplier { background:var(--wp--preset--color--surface-mist); border:1px solid var(--wp--preset--color--border-subtle); color:var(--wp--preset--color--ink-muted); }
.te-price-label { font: .75rem/1.5 var(--wp--preset--font-family--mono); letter-spacing:.06em; }
.te-price-platform .te-price-label { color:var(--wp--preset--color--accent-cyan); }
.te-pricing-model h3 { margin:1rem 0 .5rem; font-size:1.7rem; letter-spacing:-.035em; }
.te-price-platform h3 { color:var(--wp--preset--color--surface-white); }
.te-price-unit { font-size:1.1rem; font-weight:600; margin:0 0 1.5rem; }
.te-pricing-model ul { padding-left:1.1rem; font-size:.9rem; margin:1.5rem 0; }
.te-pricing-model li + li { margin-top:.65rem; }
.te-price-divider { align-self:center; color:var(--wp--preset--color--ink-muted); font-size:1.8rem; text-align:center; }
.te-commercial-note { color:var(--wp--preset--color--ink-muted); font-size:.84rem; max-width:90ch; margin-top:1.5rem; }
.te-inquiry-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; margin:2rem 0 0; padding:0; list-style:none; }
.te-inquiry-steps li { border-top:2px solid var(--wp--custom--color--border-strong); padding-top:1rem; }
.te-inquiry-steps span { display:block; color:var(--wp--preset--color--action-blue); font:.75rem var(--wp--preset--font-family--mono); margin-bottom:.8rem; }
.te-inquiry-steps strong { display:block; color:var(--wp--preset--color--text-navy); }
.te-inquiry-steps p { font-size:.9rem; color:var(--wp--preset--color--ink-muted); }
@media(max-width:800px) { .te-ownership-grid, .te-inquiry-steps, .te-pricing-model { grid-template-columns:1fr; } .te-price-divider { line-height:1; } }

/* Navigation resilience and consistent subpage readability. */
html.te-menu-open { overflow:hidden; }
.te-footer-links a[aria-current="page"] { color:var(--wp--preset--color--surface-white); text-decoration:underline; text-underline-offset:.3em; }
.te-band-hero > .te-container > .te-hero-title { max-inline-size:24ch; }
.te-band-hero > .te-container > .te-hero-lead { max-inline-size:65ch; }
/* No-JS nav fallback: full links instead of the Menu button. While theme-ui.js is still loading (te-ui-pending, set
   in <head>) the header already shows its scripted layout, so it doesn't paint tall and then collapse. */
@media(max-width:1023px) {
  html:not(.te-ui-pending) .te-header:not(.te-nav-ready) .te-menu-toggle { display:none; }
  html:not(.te-ui-pending) .te-header:not(.te-nav-ready) .te-header-inner { flex-wrap:wrap; }
  html:not(.te-ui-pending) .te-header:not(.te-nav-ready) .te-desktop-nav-wrap { display:flex; flex-wrap:wrap; width:100%; margin:0; gap:1rem; }
  html:not(.te-ui-pending) .te-header:not(.te-nav-ready) .wp-block-navigation ul { flex-wrap:wrap; gap:.5rem 1.25rem; }
}

/* ==========================================================================
   Technical depth (theme 1.5.0): hero figures, message anatomy, receipt
   states, sizing illustration and SMS segment calculator
   ========================================================================== */

/* Subpage hero with a figure column; extra figure height goes to the last row. */
.te-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: repeat(5, auto) 1fr;
  column-gap: clamp(2rem, 4vw, 3.5rem);
}

.te-hero-split > * {
  grid-column: 1;
}

.te-hero-split > .te-eyebrow {
  justify-self: start;
}

.te-hero-split > .te-hero-figure {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
}

@media (max-width: 1023px) {
  .te-hero-split {
    display: block;
  }
  .te-hero-split > .te-hero-figure {
    margin-block-start: 2.5rem;
    max-inline-size: 38rem;
  }
}

.te-hero-figure {
  margin: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--wp--custom--color--navy-border);
  border-radius: 1rem;
  background-color: var(--wp--preset--color--navy-elevated);
  color: var(--wp--preset--color--mist-text);
  font-size: 0.875rem;
  line-height: 1.45;
}

.te-hero-figure .te-art-topline {
  margin-block-end: 1rem;
}

.te-hero-figure small {
  display: block;
  color: var(--wp--custom--color--label-on-dark);
  font: 0.75rem/1.5 var(--wp--preset--font-family--mono);
  letter-spacing: 0.08em;
}

.te-hero-figure strong {
  color: var(--wp--preset--color--surface-white);
  font-weight: 600;
}

.te-hero-figure figcaption {
  margin-block-start: 1.25rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--wp--custom--color--navy-border);
  color: var(--wp--custom--color--label-on-dark);
  font-size: 0.75rem;
}

.te-portal-map ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.te-portal-map li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.875rem;
  align-items: center;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--wp--custom--color--navy-border);
  border-radius: 0.625rem;
  background-color: var(--wp--custom--color--navy-raised);
}

.te-portal-num {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 1px solid var(--wp--custom--color--navy-control);
  border-radius: 0.5rem;
  color: var(--wp--preset--color--accent-cyan);
  font: 0.75rem var(--wp--preset--font-family--mono);
}

.te-portal-map li strong,
.te-portal-map li span:not(.te-portal-num) {
  display: block;
}

.te-portal-map li span:not(.te-portal-num) {
  font-size: 0.8125rem;
}

.te-topo-edge {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px dashed var(--wp--custom--color--navy-control);
  border-radius: 0.625rem;
  color: var(--wp--preset--color--surface-white);
}

.te-topo-edge code {
  color: var(--wp--preset--color--accent-cyan);
  font-size: 0.75rem;
}

.te-topo-boundary {
  position: relative;
  margin-block: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--wp--custom--color--navy-control);
  border-radius: 0.75rem;
  background-color: var(--wp--custom--color--navy-hover);
}

.te-topo-boundary::before,
.te-topo-boundary::after {
  content: "";
  position: absolute;
  inset-inline-start: 2rem;
  block-size: 1.5rem;
  border-inline-start: 1px solid var(--wp--preset--color--accent-cyan);
}

.te-topo-boundary::before {
  inset-block-end: 100%;
}

.te-topo-boundary::after {
  inset-block-start: 100%;
}

.te-topo-boundary ul {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.te-topo-boundary li {
  padding: 0.625rem 0.5rem;
  border: 1px solid var(--wp--custom--color--navy-border);
  border-radius: 0.5rem;
  background-color: var(--wp--preset--color--near-navy);
  color: var(--wp--preset--color--surface-white);
  font-size: 0.8125rem;
  text-align: center;
}

.te-topo-ops {
  margin-block-start: 0.875rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px dashed var(--wp--custom--color--navy-border);
}

@media (max-width: 479px) {
  .te-topo-boundary ul {
    grid-template-columns: 1fr;
  }
}

.te-cost-equation {
  display: grid;
  gap: 0.75rem;
}

.te-cost-equation .te-art-topline {
  margin-block-end: 0.25rem;
}

.te-cost-term {
  padding: 1rem 1.125rem;
  border: 1px solid var(--wp--custom--color--navy-control);
  border-radius: 0.75rem;
  background-color: var(--wp--custom--color--navy-hover);
}

.te-cost-term--supplier {
  border-style: dashed;
  background-color: transparent;
}

.te-cost-term strong {
  display: block;
  margin-block: 0.125rem 0.25rem;
  font-size: 1.125rem;
}

.te-cost-op {
  justify-self: center;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--wp--custom--color--navy-control);
  border-radius: 50%;
  color: var(--wp--preset--color--accent-cyan);
  font-weight: 600;
}

.te-cost-equation figcaption {
  margin-block-start: 0.5rem;
}

.te-focus-panel .te-art-topline {
  margin-block-end: 0.75rem;
}

.te-focus-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.te-focus-list li {
  position: relative;
  padding-inline-start: 1.75rem;
  color: var(--wp--preset--color--surface-white);
  font-size: 0.9375rem;
}

.te-focus-list li::before {
  content: "✓";
  content: "✓" / "";
  position: absolute;
  inset-inline-start: 0;
  color: var(--wp--preset--color--accent-cyan);
  font-weight: 700;
}

.te-focus-list--no li {
  color: var(--wp--preset--color--mist-text);
}

.te-focus-list--no li::before {
  content: "✕";
  content: "✕" / "";
  color: var(--wp--custom--color--label-on-dark);
}

/* Anatomy of a message: three SMPP lifelines on a six-column grid. */
.te-sequence {
  margin: 2.5rem 0 1.5rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--wp--custom--color--navy-border);
  border-radius: 1rem;
  background-color: var(--wp--preset--color--near-navy);
  color: var(--wp--preset--color--mist-text);
}

.te-seq-head,
.te-seq-steps > li {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.te-seq-actor {
  grid-column: span 2;
  margin-inline: 0.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--wp--custom--color--navy-border);
  border-radius: 0.75rem;
  background-color: var(--wp--preset--color--navy-elevated);
  text-align: center;
}

.te-seq-actor--core {
  border-color: var(--wp--custom--color--navy-control);
  background-color: var(--wp--custom--color--navy-hover);
}

.te-seq-actor small {
  display: block;
  color: var(--wp--custom--color--label-on-dark);
  font: 0.75rem/1.5 var(--wp--preset--font-family--mono);
  letter-spacing: 0.08em;
}

.te-seq-actor strong {
  display: block;
  color: var(--wp--preset--color--surface-white);
  font-size: 1.0625rem;
}

.te-seq-actor span {
  display: block;
  font-size: 0.8125rem;
}

.te-seq-steps {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0.25rem;
  background-image:
    linear-gradient(var(--wp--custom--color--navy-control), var(--wp--custom--color--navy-control)),
    linear-gradient(var(--wp--custom--color--navy-control), var(--wp--custom--color--navy-control)),
    linear-gradient(var(--wp--custom--color--navy-control), var(--wp--custom--color--navy-control));
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: calc(100% / 6) 0, 50% 0, calc(500% / 6) 0;
}

.te-seq-steps > li {
  margin-block: 1rem;
}

.te-seq-arrow {
  position: relative;
  padding-block-end: 0.5rem;
  text-align: center;
}

/* The line is a pseudo-element so it can be drawn with a transform. */
.te-seq-arrow::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  border-block-end: 1.5px solid var(--wp--preset--color--accent-cyan);
  transform-origin: left center;
}

.te-seq-msg--resp .te-seq-arrow::before {
  border-block-end-style: dashed;
}

.te-seq-msg--b-a .te-seq-arrow::before,
.te-seq-msg--c-b .te-seq-arrow::before {
  transform-origin: right center;
}

.te-seq-msg--a-b .te-seq-arrow,
.te-seq-msg--b-a .te-seq-arrow {
  grid-column: 2 / 4;
}

.te-seq-msg--b-c .te-seq-arrow,
.te-seq-msg--c-b .te-seq-arrow {
  grid-column: 4 / 6;
}

.te-seq-arrow::after {
  content: "";
  position: absolute;
  inset-block-end: -5px;
  inline-size: 8px;
  block-size: 8px;
  border-block-start: 1.5px solid var(--wp--preset--color--accent-cyan);
  border-inline-end: 1.5px solid var(--wp--preset--color--accent-cyan);
}

.te-seq-msg--a-b .te-seq-arrow::after,
.te-seq-msg--b-c .te-seq-arrow::after {
  right: 1px;
  transform: rotate(45deg);
}

.te-seq-msg--b-a .te-seq-arrow::after,
.te-seq-msg--c-b .te-seq-arrow::after {
  left: 1px;
  transform: rotate(-135deg);
}

.te-seq-arrow code {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--wp--custom--color--navy-border);
  border-radius: 0.375rem;
  background-color: var(--wp--custom--color--navy-raised);
  color: var(--wp--preset--color--surface-white);
  font-size: 0.8125rem;
}

.te-seq-text {
  display: block;
  margin-block-start: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.te-seq-box {
  grid-column: 3 / 5;
  margin-inline: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--wp--custom--color--navy-control);
  border-radius: 0.625rem;
  background-color: var(--wp--custom--color--navy-hover);
  text-align: center;
}

.te-seq-box strong {
  color: var(--wp--preset--color--surface-white);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Arrows show direction visually; the route text carries it for screen readers and small screens. */
.te-seq-route {
  position: absolute;
  clip-path: inset(50%);
  overflow: hidden;
  inline-size: 1px;
  block-size: 1px;
  white-space: nowrap;
}

.te-sequence figcaption {
  margin-block-start: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--wp--custom--color--navy-border);
  color: var(--wp--custom--color--label-on-dark);
  font-size: 0.8125rem;
}

@media (max-width: 759px) {
  .te-seq-head {
    display: none;
  }
  .te-seq-steps {
    padding: 0;
    background: none;
  }
  .te-seq-steps > li {
    display: block;
    margin: 0;
    padding-block: 0.875rem;
    border-block-end: 1px solid var(--wp--custom--color--navy-border);
  }
  .te-seq-arrow,
  .te-seq-msg--resp .te-seq-arrow,
  .te-seq-box {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: start;
  }
  .te-seq-arrow::before,
  .te-seq-arrow::after {
    display: none;
  }
  .te-seq-route {
    position: static;
    clip-path: none;
    overflow: visible;
    inline-size: auto;
    block-size: auto;
    white-space: normal;
    display: block;
    margin-block-end: 0.375rem;
    color: var(--wp--custom--color--label-on-dark);
    font: 0.75rem/1.5 var(--wp--preset--font-family--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .te-sequence figcaption {
    border-block-start: 0;
    padding-block-start: 0.25rem;
  }
}

/* Switch acceptance vs. supplier receipt states (inside the dark Platform banner). */
.te-dlr-states {
  margin-block-start: 1.75rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--wp--custom--color--navy-border);
}

.te-dlr-states-title {
  margin: 0 0 1rem;
  color: var(--wp--preset--color--surface-white);
  font-weight: 600;
}

.te-dlr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1rem;
}

.te-dlr-col {
  padding: 1rem;
  border: 1px solid var(--wp--custom--color--navy-border);
  border-radius: 0.75rem;
  background-color: var(--wp--preset--color--near-navy);
}

.te-dlr-col .te-wf-label {
  color: var(--wp--custom--color--label-on-dark);
}

.te-dlr-col ul {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.625rem 1rem;
}

.te-dlr-col:last-child ul {
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.te-dlr-col li {
  display: grid;
  gap: 0.125rem;
  color: var(--wp--preset--color--mist-text);
  font-size: 0.875rem;
}

.te-dlr-col code {
  color: var(--wp--preset--color--accent-cyan);
  font-size: 0.8125rem;
}

.te-dlr-note {
  margin: 0.75rem 0 0;
  color: var(--wp--custom--color--label-on-dark);
  font-size: 0.8125rem;
}

@media (max-width: 759px) {
  .te-dlr-grid {
    grid-template-columns: 1fr;
  }
}

/* Same volume, different peak (Deployment sizing). */
.te-load-profile {
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}

.te-load-chart {
  padding: 1rem;
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 0.75rem;
  background-color: var(--wp--preset--color--surface-white);
}

.te-load-chart svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  margin-block-start: 0.75rem;
  overflow: visible;
}

.te-load-area {
  fill: var(--wp--custom--color--surface-tint);
  stroke: var(--wp--preset--color--action-blue);
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.te-load-peak {
  stroke: var(--wp--custom--color--ink-blue);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.te-load-axis {
  stroke: var(--wp--custom--color--border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.te-load-axis-labels {
  display: flex;
  justify-content: space-between;
  margin-block-start: 0.375rem;
  color: var(--wp--preset--color--ink-muted);
  font: 0.75rem var(--wp--preset--font-family--mono);
}

.te-load-profile figcaption {
  grid-column: 1 / -1;
  color: var(--wp--preset--color--ink-muted);
  font-size: 0.875rem;
}

/* SMS segment calculator (Pricing). */
.te-segcalc {
  margin-block-start: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1.25rem 2.5rem;
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 0.75rem;
  background-color: var(--wp--preset--color--surface-white);
}

.te-segcalc-head,
.te-segcalc-note {
  grid-column: 1 / -1;
}

.te-segcalc-head h3 {
  margin: 0.25rem 0 0.5rem;
}

.te-segcalc-head p {
  margin: 0;
  max-inline-size: 64ch;
  color: var(--wp--preset--color--ink-muted);
}

.te-segcalc-tool {
  grid-column: 1;
}

.te-segcalc-ref {
  grid-column: 2;
  align-self: start;
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.te-segcalc-samples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: 1rem;
}

.te-segcalc-samples button {
  min-block-size: 2.25rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--wp--custom--color--border-strong);
  border-radius: 999px;
  background-color: var(--wp--preset--color--surface-mist);
  color: var(--wp--preset--color--text-navy);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.te-segcalc-samples button:hover {
  border-color: var(--wp--preset--color--action-blue);
}

.te-segcalc-samples button[aria-pressed="true"] {
  border-color: var(--wp--preset--color--text-navy);
  background-color: var(--wp--preset--color--text-navy);
  color: var(--wp--preset--color--surface-white);
}

.te-segcalc-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 0;
}

.te-segcalc-stats div {
  position: relative;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background-color: var(--wp--preset--color--surface-mist);
}

.te-segcalc-stats dt {
  color: var(--wp--preset--color--ink-muted);
  font: 0.75rem/1.4 var(--wp--preset--font-family--mono);
  letter-spacing: 0.04em;
}

.te-segcalc-stats dd {
  margin: 0.125rem 0 0;
  color: var(--wp--preset--color--text-navy);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.te-segcalc-bar {
  display: flex;
  gap: 4px;
  margin-block-start: 0.75rem;
}

.te-segcalc-bar span {
  position: relative;
  flex: 1;
  block-size: 0.5rem;
  overflow: hidden;
  border-radius: 2px;
  background-color: var(--wp--custom--color--surface-tint);
}

.te-segcalc-bar i {
  position: absolute;
  inset: 0;
  background-color: var(--wp--preset--color--action-blue);
  transform-origin: left center;
  transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease-out);
}

.te-segcalc-trigger {
  margin: 0.75rem 0 0;
  color: var(--wp--custom--color--ink-blue);
  font-size: 0.875rem;
}

.te-segcalc-ref caption {
  padding-block-end: 0.5rem;
  color: var(--wp--preset--color--ink-muted);
  font: 0.75rem var(--wp--preset--font-family--mono);
  letter-spacing: 0.04em;
  text-align: start;
}

.te-segcalc-ref th,
.te-segcalc-ref td {
  padding: 0.625rem 0.5rem;
  border-block-end: 1px solid var(--wp--preset--color--border-subtle);
  text-align: start;
  vertical-align: top;
}

.te-segcalc-ref thead th {
  color: var(--wp--preset--color--ink-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.te-segcalc-ref td {
  color: var(--wp--preset--color--text-navy);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.te-segcalc-note {
  margin: 0;
  color: var(--wp--preset--color--ink-muted);
  font-size: 0.875rem;
}

@media (max-width: 859px) {
  .te-segcalc {
    grid-template-columns: 1fr;
  }
  .te-segcalc-tool,
  .te-segcalc-ref {
    grid-column: 1;
  }
  .te-segcalc-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Capability ticker and live page diagnostics (theme 1.8.0)
   Shared by every skin. The ticker is a static wrapped list until the motion
   layer clones its track; the diagnostics panel stays hidden until
   theme-ui.js has measured the page.
   ========================================================================== */
.wp-block-post-content > .te-ticker {
  margin-block-start: 0;
}

.te-ticker {
  display: flex;
  align-items: stretch;
  min-block-size: 2.75rem;
  background-color: var(--wp--preset--color--navy-elevated);
  color: var(--wp--preset--color--mist-text);
  border-block: 1px solid var(--wp--custom--color--navy-line);
}

.te-ticker-viewport {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  padding-block: 0.75rem;
}

.te-ticker-track {
  list-style: none;
  margin: 0;
  padding: 0 clamp(1rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.78125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.te-ticker-track li {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
}

.te-ticker-track li::before {
  content: "";
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: 50%;
  background-color: var(--wp--preset--color--accent-cyan);
  flex-shrink: 0;
}

/* The clone and the pause control exist only while the loop can run. */
.te-ticker-belt > .te-ticker-track[aria-hidden="true"],
.te-ticker-toggle {
  display: none;
}

.te-ticker-icon {
  inline-size: 0.625rem;
  block-size: 0.75rem;
  border-inline: 3px solid currentColor;
}

.te-ticker-toggle[aria-pressed="true"] .te-ticker-icon {
  border: 0;
  background-color: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.te-ticker-toggle {
  flex: none;
  place-items: center;
  inline-size: 3rem;
  padding: 0;
  background-color: var(--wp--custom--color--navy-raised);
  color: var(--wp--preset--color--surface-white);
  border: 0;
  border-inline-start: 1px solid var(--wp--custom--color--navy-line);
  cursor: pointer;
}

.te-ticker-toggle:hover {
  background-color: var(--wp--custom--color--navy-hover);
}

.te-ticker-toggle:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-cyan);
  outline-offset: -6px;
}

/* One-row measurement strip: label, six metrics, and the method behind a disclosure. */
.te-diagnostics {
  max-inline-size: 75rem;
  margin: 2.5rem auto 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem 1.5rem;
  padding: 0.75rem 1.125rem;
  background-color: var(--wp--preset--color--navy-elevated);
  border: 1px solid var(--wp--custom--color--navy-border);
  border-radius: 0.625rem;
}

.te-diagnostics[hidden] {
  display: none;
}

.te-diag-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--wp--preset--color--surface-white);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.te-diag-title::before {
  content: "";
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background-color: var(--wp--preset--color--accent-cyan);
}

.te-diag-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
}

.te-diag-grid > div {
  padding-inline: 1rem;
  border-inline-start: 1px solid var(--wp--custom--color--navy-line);
}

.te-diag-grid dt {
  color: var(--wp--custom--color--label-on-dark);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.te-diag-grid dd {
  margin: 0.125rem 0 0;
  color: var(--wp--preset--color--surface-white);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.te-diag-more {
  grid-column: 1 / -1;
  padding-block-start: 0.5rem;
  border-block-start: 1px solid var(--wp--custom--color--navy-line);
}

.te-diag-more summary {
  inline-size: fit-content;
  color: var(--wp--custom--color--label-on-dark);
  font-size: 0.8125rem;
  cursor: pointer;
}

.te-diag-more summary:hover {
  color: var(--wp--preset--color--surface-white);
}

.te-diag-note {
  margin: 0.5rem 0 0.25rem;
  max-inline-size: 75ch;
  color: var(--wp--custom--color--label-on-dark);
  font-size: 0.8125rem;
}

@media (max-width: 1099px) {
  .te-diagnostics {
    grid-template-columns: minmax(0, 1fr);
  }

  .te-diag-grid > div:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

@media (max-width: 899px) {
  .te-diag-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0.75rem;
  }

  .te-diag-grid > div {
    padding-inline: 0.625rem;
  }

  .te-diag-grid dt {
    letter-spacing: 0.02em;
  }

  .te-diag-grid > div:nth-child(3n + 1) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

/* ==========================================================================
   Motion (theme 1.6.0)
   Each effect explains the product. Effects animate transform, opacity
   or clip-path only. Anything that starts on its own
   finishes within 5 seconds (WCAG 2.2.2), so no pause control is needed.
   Everything is scoped to .te-motion, which is never set for visitors who
   prefer reduced motion (or in the editor).
   ========================================================================== */

@keyframes te-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes te-flash {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Hero figures are complete in the first paint: content above the fold never starts hidden, so moving between
   pages doesn't flash empty figure cards. Only the loops below run, once the figure is on screen. */

/* Home hero: one message travels customer → switch → supplier each time the figure comes into view (4.9s). */
@keyframes te-packet-down {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  6%,
  30% {
    opacity: 1;
  }
  34%,
  100% {
    opacity: 0;
    transform: translateY(calc(3.4rem - 6px));
  }
}

@keyframes te-core-pulse {
  0%,
  30% {
    opacity: 0;
    transform: scale(1);
  }
  36% {
    opacity: 0.9;
  }
  58%,
  100% {
    opacity: 0;
    transform: scale(1.025);
  }
}

.te-motion .te-network-art.is-playing .te-network-wire::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -3.5px;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--accent-cyan);
  box-shadow: 0 0 0 3px rgb(6 191 241 / 0.2);
  animation: te-packet-down 3.6s var(--wp--custom--motion--ease-in-out) both;
}

.te-motion .te-network-art.is-playing .te-network-core + .te-network-wire::before {
  animation-delay: 1.3s;
}

.te-motion .te-network-art.is-playing .te-network-core::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--wp--preset--color--accent-cyan);
  border-radius: inherit;
  pointer-events: none;
  animation: te-core-pulse 3.6s ease-out both;
}

/* Deployment hero: a message crosses into the instance, then out to the supplier, three times each time the figure
   comes into view (4.2s). Packets move by transform and opacity, so the compositor runs them without repainting.
   Both are positioned against .te-topo-boundary, like the connector lines they ride. */
@keyframes te-topo-packet {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  20%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(1.5rem);
  }
}

.te-motion .te-topology.is-playing .te-topo-boundary > small::before,
.te-motion .te-topology.is-playing .te-topo-ops::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(2rem + var(--te-topo-line, 1px) / 2 - var(--te-topo-dot, 6px) / 2);
  inline-size: var(--te-topo-dot, 6px);
  block-size: var(--te-topo-dot, 6px);
  border-radius: 50%;
  background-color: var(--wp--preset--color--accent-cyan);
  animation: te-topo-packet 1.2s var(--wp--custom--motion--ease-in-out) 3 both;
}

.te-motion .te-topology.is-playing .te-topo-boundary > small::before {
  inset-block-start: calc(-1.5rem - var(--te-topo-dot, 6px) / 2);
}

.te-motion .te-topology.is-playing .te-topo-ops::after {
  inset-block-start: calc(100% - var(--te-topo-dot, 6px) / 2);
  animation-delay: 0.6s;
}

/* Anatomy of a message: each SMPP exchange is drawn in order, with a packet riding the line. */
.te-seq-packet {
  display: none;
}

.te-motion .te-sequence.te-seq-staged .te-seq-steps > li > * {
  opacity: 0;
  transform: translateY(6px);
}

.te-motion .te-sequence.te-seq-staged .te-seq-arrow::before {
  transform: scaleX(0);
}

.te-motion .te-sequence.te-seq-staged .te-seq-arrow::after {
  opacity: 0;
}

.te-motion .te-sequence.te-seq-staged.is-playing .te-seq-steps > li > * {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--wp--custom--motion--base) var(--wp--custom--motion--ease-out),
    transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease-out);
  transition-delay: calc(var(--te-i, 0) * var(--wp--custom--motion--step));
}

.te-motion .te-sequence.te-seq-staged.is-playing .te-seq-arrow::before {
  transform: scaleX(1);
  transition: transform var(--wp--custom--motion--step) var(--wp--custom--motion--ease-in-out);
  transition-delay: calc(var(--te-i, 0) * var(--wp--custom--motion--step));
}

.te-motion .te-sequence.te-seq-staged.is-playing .te-seq-arrow::after {
  opacity: 1;
  transition: opacity var(--wp--custom--motion--fast) linear;
  transition-delay: calc((var(--te-i, 0) + 1) * var(--wp--custom--motion--step));
}

@keyframes te-packet-ltr {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  8%,
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(calc(100% - 6px));
  }
}

@keyframes te-packet-rtl {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  8%,
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(calc(-100% + 6px));
  }
}

.te-motion .te-sequence.te-seq-staged.is-playing .te-seq-packet {
  display: block;
  position: absolute;
  inset-inline: 0;
  inset-block-end: -2.25px;
  block-size: 6px;
  pointer-events: none;
  animation: te-packet-ltr var(--wp--custom--motion--step) var(--wp--custom--motion--ease-in-out) both;
  animation-delay: calc(var(--te-i, 0) * var(--wp--custom--motion--step));
}

.te-motion .te-sequence.te-seq-staged.is-playing :is(.te-seq-msg--b-a, .te-seq-msg--c-b) .te-seq-packet {
  animation-name: te-packet-rtl;
}

.te-seq-packet::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--accent-cyan);
  box-shadow: 0 0 0 3px rgb(6 191 241 / 0.22);
}

:is(.te-seq-msg--b-a, .te-seq-msg--c-b) .te-seq-packet::before {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.te-seq-controls {
  display: flex;
  justify-content: flex-end;
  margin-block-start: 0.5rem;
}

.te-seq-replay {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 2.25rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--wp--custom--color--navy-control);
  border-radius: 999px;
  background-color: transparent;
  color: var(--wp--preset--color--mist-text);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color var(--wp--custom--motion--fast) ease, color var(--wp--custom--motion--fast) ease;
}

.te-seq-replay:hover {
  border-color: var(--wp--preset--color--accent-cyan);
  color: var(--wp--preset--color--surface-white);
}

.te-seq-replay svg {
  transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease-out);
}

.te-seq-replay:hover svg {
  transform: rotate(-180deg);
}

@media (max-width: 759px) {
  .te-motion .te-sequence.te-seq-staged.is-playing .te-seq-packet {
    display: none;
  }
}

/* Sections below the fold rise in once as they enter the viewport (classes added by theme-ui.js). */
.te-motion .te-reveal {
  opacity: 0;
  transform: translateY(16px);
}

.te-motion .te-reveal.is-in-view {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--wp--custom--motion--slow) var(--wp--custom--motion--ease-out),
    transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease-out);
  transition-delay: calc(var(--te-i, 0) * 90ms);
}

/* Sizing charts are plotted left to right across the day, then the peak line appears. */
.te-motion .te-load-profile.te-reveal svg {
  clip-path: inset(0 100% 0 0);
}

.te-motion .te-load-profile.te-reveal .te-load-peak {
  opacity: 0;
}

.te-motion .te-load-profile.te-reveal.is-in-view svg {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--wp--custom--motion--ease-in-out) 0.25s;
}

.te-motion .te-load-profile.te-reveal.is-in-view .te-load-chart--burst svg {
  transition-delay: 0.4s;
}

.te-motion .te-load-profile.te-reveal.is-in-view .te-load-peak {
  opacity: 1;
  transition: opacity var(--wp--custom--motion--base) linear 1.45s;
}

/* Workflow walkthrough panels ease in when selected. */
.te-motion .te-workflow-panel:not([hidden]) {
  animation: te-rise var(--wp--custom--motion--base) var(--wp--custom--motion--ease-out);
}

/* Segment calculator: changed encoding or part count is acknowledged with a brief outline. */
.te-motion .te-segcalc-stats div.is-changed::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--wp--preset--color--action-blue);
  pointer-events: none;
  animation: te-flash 0.9s ease-out both;
}

/* Navigation underline grows from the left instead of appearing abruptly. */
.te-motion .te-header .wp-block-navigation a {
  position: relative;
}

.te-motion .te-header .wp-block-navigation a:is(:hover, [aria-current="page"]) {
  text-decoration: none;
}

.te-motion .te-header .wp-block-navigation a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0.2rem;
  block-size: 2px;
  background-color: var(--wp--preset--color--accent-cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease-out);
}

.te-motion .te-header .wp-block-navigation a:is(:hover, :focus-visible, [aria-current="page"])::after {
  transform: scaleX(1);
}

/* Buttons acknowledge a press. */
.te-motion :is(.wp-element-button, .te-btn) {
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.te-motion :is(.wp-element-button, .te-btn):active {
  transform: translateY(1px);
}

/* Capability ticker: loops only while on screen and unpaused. It runs longer
   than 5 seconds, so it carries a pause control (WCAG 2.2.2). */
@keyframes te-ticker {
  to {
    transform: translateX(-50%);
  }
}

.te-motion .te-ticker.is-animated .te-ticker-belt {
  display: flex;
  inline-size: max-content;
  animation: te-ticker 52s linear infinite paused;
  will-change: transform;
}

.te-motion .te-ticker.is-animated.is-playing:not(.is-paused) .te-ticker-belt {
  animation-play-state: running;
}

/* One row from first paint whenever the loop will run: the static list used to
   wrap until the script started the loop, then collapse and shift the page. */
.te-motion .te-ticker-track {
  flex-wrap: nowrap;
}

.te-motion .te-ticker.is-animated .te-ticker-track {
  padding-inline: 0 1.5rem;
}

.te-motion .te-ticker-belt > .te-ticker-track[aria-hidden="true"] {
  display: flex;
}

.te-motion .te-ticker-toggle {
  display: grid;
}

/* Home hero: a breeze of faint message outlines settles around the connection model (theme 1.11.0). theme-ui.js
   places them (--x, --y, --size, final strength --o) clear of the text, the figure and the facts row. With motion
   they drift in from the customer side and settle within 5 seconds, so no pause control is needed (WCAG 2.2.2);
   without motion they are simply there. Phones and tablets (stacked hero) stay clear. */
@keyframes te-breeze-settle {
  from {
    opacity: 0;
    transform: translate(-2.25rem, 0.875rem);
  }
}

.te-has-breeze {
  position: relative;
  isolation: isolate;
}

.te-has-breeze > .te-container {
  position: relative;
  z-index: 1;
  margin-block-start: 0;
}

.te-breeze {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.te-breeze-msg {
  position: absolute;
  inset-block-start: var(--y);
  inset-inline-start: var(--x);
  inline-size: var(--size);
  block-size: calc(var(--size) * 0.8);
  color: var(--wp--preset--color--accent-cyan);
  opacity: calc(var(--o) * var(--te-breeze-strength, 1));
}

.te-breeze-msg svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.te-motion .te-breeze.is-settling .te-breeze-msg {
  animation: te-breeze-settle var(--d) var(--wp--custom--motion--ease-out) var(--w) both;
}

@media (max-width: 1023px) {
  .te-breeze {
    display: none;
  }
}

/* High-contrast modes draw their own palette; the decorative outlines would only add noise. */
@media (forced-colors: active) {
  .te-breeze {
    display: none;
  }
}

/* ==========================================================================
   Staff-portal screenshots (theme 1.10.0): real captures with synthetic data.
   .te-shot frames a screenshot on Platform; .te-shot-card is a Home
   walkthrough panel. The label bar replaces the "Illustration" disclosure.
   ========================================================================== */

.te-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 0.875rem;
  background-color: var(--wp--preset--color--surface-white);
  box-shadow: 0 1px 2px rgb(7 27 55 / 0.06), 0 18px 40px rgb(7 27 55 / 0.12);
}

.te-shot-label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0.625rem 1rem;
  border-block-end: 1px solid var(--wp--preset--color--border-subtle);
  background-color: var(--wp--preset--color--surface-mist);
  color: var(--wp--preset--color--ink-muted);
  font: 0.75rem/1.5 var(--wp--preset--font-family--mono);
  letter-spacing: 0.04em;
}

.te-shot-label strong {
  color: var(--wp--preset--color--text-navy);
  font-weight: 700;
}

.te-shot-image {
  margin: 0;
}

.te-shot-image img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.te-shot-image figcaption {
  margin: 0;
  padding: 0.875rem 1rem 1rem;
  text-align: start;
  color: var(--wp--preset--color--ink-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.te-shot-card > .te-shot-label {
  padding: 1rem 1.5rem;
}

.te-shot-card .te-shot-image {
  margin-block: 1.25rem 1rem;
}

.te-shot-card .te-shot-image img {
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 0.625rem;
  box-shadow: 0 12px 28px rgb(7 27 55 / 0.1);
}

.te-shot-card .te-shot-image figcaption {
  padding: 0.75rem 0 0;
}

/* Printing never waits for a scroll: show every staged element in its final state. */
@media print {
  .te-motion .te-reveal,
  .te-motion .te-sequence.te-seq-staged .te-seq-steps > li > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .te-motion .te-sequence.te-seq-staged .te-seq-arrow::before {
    transform: none !important;
  }
  .te-motion .te-sequence.te-seq-staged .te-seq-arrow::after,
  .te-motion .te-load-profile.te-reveal .te-load-peak {
    opacity: 1 !important;
  }
  .te-motion .te-load-profile.te-reveal svg {
    clip-path: none !important;
  }
  .te-seq-controls,
  .te-breeze {
    display: none;
  }
}