*,
*::before,
*::after {
  box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
nav ul,
footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
:root {
  --color-bg: #ffffff;
  --color-surface: #d6edfd;
  --color-border: #9fa0a2;
  --color-border-brand: #acdbfb;
  --color-text: #2b2d31;
  --color-text-muted: #525357;
  --color-text-soft: #5b6570;
  --color-text-hint: #8a94a0;
  --color-text-on-dark: #a8bacb;
  --color-text-inverse: #ffffff;
  --color-ink: #0b1b2b; 
  --color-on-ink: #ffffff; 
  --color-on-ink-soft: #a8bacb; 
  --color-on-ink-muted: #9fb3c6; 
  --color-on-ink-link: #7cc8fa; 
  --color-on-ink-hint: #7a8fa6;
  --color-brand: #27a5f7; 
  --color-brand-strong: #1d6493;
  --color-brand-deep: #134262; 
  --color-brand-soft: #acdbfb; 
  --color-brand-contrast: #ffffff;
  --color-accent: #de26a5;
  --color-accent-text: #a21b78; 
  --color-accent-text-hover: #831661;
  --color-link: #1d6493; 
  --color-link-hover: #134262;
  --color-focus: #30a6f5;
  --color-focus-ring: #1d6493;
  --color-status-amber: #e8a33d;
  --color-brand-navy: #0f2438;
  --color-brand-navy-lift: #153252;
  --color-surface-subtle: #f7fafc;
  --color-surface-muted: #f2f6fa; 
  --color-border-faint: #eef2f6; 
  --color-border-subtle: #e6ebf0; 
  --color-border-muted: #e1e8ef;
  --color-tint-accent: #eaf6fe;
  --color-tint-accent-border: #cfe9fc;
  --color-status-green: #28a96b;
  --color-status-green-text: #1e7a4e;
  --color-status-green-bg: #eaf8f0;
  --color-status-green-border: #c8e9d8;
  --color-status-amber-bg: #fff8ec;
  --color-status-amber-border: #f5e2be;
  --color-status-amber-text: #6b5426;
  --color-text-inverse-muted: #9fb3c6;
  --font-sans: "Inter", "Noto Sans Thai", "Noto Sans Khmer", "Noto Sans Arabic",
    "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-heading: "Quicksand", "Inter", "Noto Sans Thai", "Noto Sans Khmer",
    "Noto Sans Arabic", "Quicksand Fallback", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Geist", "Quicksand", "Noto Sans Thai", "Noto Sans Khmer",
    "Noto Sans Arabic", "Geist Fallback", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --text-xs: 0.75rem; 
  --text-sm: 0.875rem;
  --text-md: 0.9375rem; 
  --text-base: 1rem; 
  --text-lead: 1.0625rem; 
  --text-lg: 1.25rem; 
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.625rem, 4.4vw, 2.625rem); 
  --text-3xl: clamp(2.125rem, 5.8vw, 3.5rem);
  --leading-tight: 1.06;
  --leading-heading: 1.12;
  --leading-normal: 1.6; 
  --leading-prose: 1.625;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600; 
  --weight-bold: 700;
  --space-1: 0.25rem; 
  --space-2: 0.5rem; 
  --space-3: 0.75rem; 
  --space-4: 1rem; 
  --space-5: 1.5rem; 
  --space-6: 2rem; 
  --space-7: 3rem; 
  --space-8: 4rem;
  --space-section: 4rem;
  --space-section-loose: 7rem;
  --measure: 44.160156em;
  --measure-intro: 34rem;
  --container-max: 77.5rem;
  --container-gutter: 1rem;
  --band-gutter: max(clamp(20px, 5vw, 48px), (100% - var(--container-max, 77.5rem)) / 2);
  --space-band: clamp(56px, 8vw, 96px);
  --header-height: 117px;
  --radius-sm: 12px; 
  --radius-md: 16px; 
  --radius-lg: 32px;
  --radius-pill: 999px;
  --radius-full: 9999px; 
  --radius-image: 32px;
  --radius-bg-large: 18px;
  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-2:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-3:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-btn-primary-hover:
    0 0 0 4px rgb(39 165 247 / 28%), 0 10px 24px -8px rgb(39 165 247 / 60%);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --reveal-index: 0;
}
:root:lang(th),
:root:lang(km) {
  --leading-tight: 1.35; 
  --leading-heading: 1.35; 
}
@media (min-width: 1024px) {
  :root {
    --space-section-loose: 9rem; 
    --container-gutter: 1.5rem;
  }
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter-latin-normal.3100e775e8616cd2.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter-latin-ext-normal.34b9c504cab7a73e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter-latin-italic.7291b5970da22374.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter-latin-ext-italic.71254244ccb1ec21.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/quicksand-latin-normal.2add7d60b1cd2ab8.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/quicksand-latin-ext-normal.b5a37861949c4489.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/geist-latin-normal.80f8feffeaed87e4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/geist-latin-ext-normal.8a612f0a79f9d97e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter-vietnamese-normal.935ab355938e6cd9.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
    U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter-vietnamese-italic.d102ea2c86a59e30.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
    U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/quicksand-vietnamese-normal.602d23d1e2cb8d41.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
    U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/geist-vietnamese-normal.7d710690219caa60.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
    U+0329, U+1EA0-1EF9;
}
@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/noto-sans-thai-thai-normal.1f5a173641bbcb3c.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter-cyrillic-normal.e1dea13a93c69f52.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter-cyrillic-italic.cd3d9beabd6f8b1f.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/geist-cyrillic-normal.03763a2038402517.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Noto Sans Khmer";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/noto-sans-khmer-khmer-normal.6e2ed78d19ae99ae.woff2") format("woff2");
  unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/noto-sans-arabic-arabic-normal.ce85091f020920b6.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0897-08E1, U+08E3-08FF, U+200C-200E, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FEFF;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Liberation Sans");
  unicode-range: U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301,
    U+0303-0304, U+0308-0309, U+0323, U+0329, U+0400-045F, U+0490-0491,
    U+04B0-04B1, U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113,
    U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF,
    U+FEFF, U+FFFD;
  size-adjust: 107.5%;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("Liberation Sans");
  unicode-range: U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301,
    U+0303-0304, U+0308-0309, U+0323, U+0329, U+0400-045F, U+0490-0491,
    U+04B0-04B1, U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113,
    U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF,
    U+FEFF, U+FFFD;
  size-adjust: 107%;
}
@font-face {
  font-family: "Quicksand Fallback";
  src: local("Arial"), local("Liberation Sans");
  unicode-range: U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301,
    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1D00-1DBF, U+1E00-1EFF,
    U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
  size-adjust: 103.7%;
}
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}
body {
  background-color: var(--color-bg, #ffffff);
  color: var(--color-text, #2b2d31);
  font-family: var(--font-sans, sans-serif);
  font-size: var(--text-base, 1rem);
  font-weight: var(--weight-normal, 400);
  line-height: var(--leading-normal, 1.6);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
main > section,
main > article {
  padding-block: var(--space-band, clamp(56px, 8vw, 96px));
  padding-inline: var(--band-gutter, clamp(20px, 5vw, 48px));
}
.page-not-found main {
  padding-block: var(--space-section, 4rem);
  padding-inline: clamp(20px, 5vw, 48px);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--weight-bold, 700);
  line-height: var(--leading-heading, 1.12);
  margin-block: var(--space-6, 2rem) 0;
  max-width: 40ch;
  text-wrap: balance;
}
h1 {
  font-size: var(--text-3xl, 2.125rem); 
  font-weight: var(--weight-semibold, 600);
  line-height: var(--leading-tight, 1.06);
  letter-spacing: -0.03em;
  color: var(--color-brand-navy, #0f2438);
  margin-block-start: 0;
}
h2 {
  font-size: var(--text-2xl, 1.625rem); 
}
h3 {
  font-size: clamp(1.1875rem, 3.2vw, 1.875rem); 
}
h4,
h5,
h6 {
  font-size: var(--text-base, 1rem);
}
p,
ul,
ol,
dl,
blockquote {
  max-width: var(--measure, 44.160156em);
  margin-block: var(--space-4, 1rem) 0;
}
li + li {
  margin-block-start: var(--space-1, 0.25rem);
}
a {
  color: var(--color-link, #1d6493);
  text-underline-offset: 0.15em;
  transition: color var(--transition-base, 0.3s ease-in-out);
}
a:hover {
  color: var(--color-link-hover, #134262);
}
:focus-visible {
  outline: 2px solid var(--color-focus, #30a6f5);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-focus-ring, #1d6493);
}
hr {
  border: 0;
  border-block-start: 1px solid var(--color-border, #9fa0a2);
  margin-block: var(--space-6, 2rem);
}
code,
pre,
kbd,
samp {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm, 0.875rem);
}
table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  border-block-end: 1px solid var(--color-border, #9fa0a2);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  text-align: start;
}
header,
footer {
  padding: var(--space-5, 1.5rem) var(--container-gutter, 1rem);
}
footer {
  border-block-start: 1px solid var(--color-border-brand, #acdbfb);
  color: var(--color-text-muted, #525357);
  font-size: var(--text-sm, 0.875rem);
  margin-block-start: var(--space-section, 4rem);
}
.container {
  width: 100%;
  max-width: var(--container-max, 77.5rem);
  margin-inline: auto;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  box-sizing: border-box;
  min-height: 40px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-sans, sans-serif);
  font-size: var(--text-base, 1rem);
  font-weight: var(--weight-semibold, 600);
  line-height: var(--leading-normal, 1.6);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition-base, 0.3s ease-in-out),
    border-color var(--transition-base, 0.3s ease-in-out),
    color var(--transition-base, 0.3s ease-in-out);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}
.btn-primary {
  background-color: var(--color-brand, #27a5f7);
  border-color: var(--color-brand, #27a5f7);
  color: var(--color-brand-contrast, #ffffff);
}
.btn-primary:hover {
  color: var(--color-brand-contrast, #ffffff);
  box-shadow: var(--shadow-btn-primary-hover, 0 10px 24px -8px rgb(39 165 247 / 60%));
}
.btn-secondary {
  background-color: var(--color-brand-soft, #acdbfb);
  border-color: var(--color-brand-soft, #acdbfb);
  color: var(--color-text, #2b2d31);
}
.btn-secondary:hover {
  background-color: var(--color-brand, #27a5f7);
  border-color: var(--color-brand, #27a5f7);
  color: var(--color-text, #2b2d31);
}
.btn-outline {
  background-color: var(--color-bg, #ffffff);
  border-color: var(--color-text, #2b2d31);
  color: var(--color-text, #2b2d31);
}
.btn-outline:hover {
  border-color: var(--color-brand-strong, #1d6493);
  color: var(--color-brand-strong, #1d6493);
}
.btn-link {
  background-color: transparent;
  border-color: transparent;
  padding-inline: var(--space-2, 0.5rem);
  color: var(--color-brand-strong, #1d6493);
  font-weight: var(--weight-bold, 700);
}
.btn-link:hover {
  color: var(--color-link-hover, #134262);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.card {
  background-color: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border-subtle, #e6ebf0);
  border-radius: var(--radius-md, 16px);
  padding: var(--space-6, 2rem);
  box-shadow: var(--shadow-1, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
  transition:
    box-shadow var(--transition-base, 0.3s ease-in-out),
    border-color var(--transition-base, 0.3s ease-in-out);
}
.card:hover {
  box-shadow: var(--shadow-2, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  border-color: var(--color-tint-accent-border, #cfe9fc);
}
.stats-callout {
  background-color: var(--color-surface, #d6edfd);
  border-radius: var(--radius-md, 16px);
  padding: var(--space-5, 1.5rem) var(--space-6, 2rem);
  margin-block-start: var(--space-5, 1.5rem);
  max-width: max-content;
  color: var(--color-brand-strong, #1d6493);
  font-family: var(--font-heading, sans-serif);
  font-size: var(--text-xl, 1.5rem);
  font-weight: var(--weight-bold, 700);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-heading, 1.12);
}
.tile-accent {
  display: inline-block;
  width: 1.5rem; 
  height: 0.375rem; 
  border-radius: var(--radius-sm, 12px);
  background-color: var(--color-border, #9fa0a2);
  opacity: 0.3;
  transition:
    background-color var(--transition-base, 0.3s ease-in-out),
    opacity var(--transition-base, 0.3s ease-in-out);
}
.tile-accent--lit {
  background-color: var(--color-brand, #27a5f7);
  opacity: 1;
}
.tile-accent--attention {
  background-color: var(--color-status-amber, #e8a33d);
  opacity: 1;
}
.card:hover .tile-accent,
.card:focus-within .tile-accent {
  background-color: var(--color-brand, #27a5f7);
  opacity: 1;
}
.stats-band {
  background-color: var(--color-brand-navy, #0f2438);
}
.stats-band-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6, 2rem);
  text-align: center;
}
@media (min-width: 1024px) {
  .stats-band-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.stats-band-grid .stat-num {
  margin-block: 0;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: var(--text-2xl, 2.5rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-text-inverse, #ffffff);
}
.stats-band-grid > div:last-child .stat-num {
  color: var(--color-brand, #27a5f7);
}
.stats-band-grid p:not(.stat-num) {
  margin-block: var(--space-2, 0.5rem) 0;
  max-width: none;
  color: var(--color-text-inverse-muted, #9fb3c6);
}
.news-tag {
  display: inline-flex;
  align-items: center;
  margin-block: 0;
  padding: 0.3125rem var(--space-4, 1rem);
  border: 1px solid var(--color-border-brand, #acdbfb);
  border-radius: var(--radius-pill, 999px);
  background-color: var(--color-surface, #d6edfd);
  color: var(--color-brand-strong, #1d6493);
  font-family: var(--font-sans, sans-serif);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
}
.integration-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  margin-block-start: auto;
}
.integration-slot {
  padding: 0.25rem 0.75rem;
  border: 1px dashed var(--color-border, #9fa0a2);
  border-radius: var(--radius-pill, 999px);
  background-color: var(--color-surface-subtle, #f7fafc);
  color: var(--color-text-muted, #525357);
  font-size: var(--text-xs, 0.75rem);
}
.integration-slot-logo {
  display: inline-flex;
  align-items: center;
  padding-block: 0.125rem;
  border-style: solid;
  border-color: var(--color-border-subtle, #e6ebf0);
}
.integration-slot-logo img {
  width: auto;
  height: 1.25rem;
  object-fit: contain;
}
.integrations-note {
  grid-column: 1 / -1;
  margin-block: 0;
  color: var(--color-text-hint, #8a94a0);
  font-size: var(--text-sm, 0.875rem);
}
.eyebrow {
  margin-block: 0;
  color: var(--color-brand, #27a5f7);
  font-family: var(--font-sans, sans-serif);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold, 600);
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.eyebrow + h2,
.eyebrow + h1 {
  margin-block-start: 0.875rem;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem; 
  margin-block: 0 var(--space-4, 1rem);
  font-size: 0.8125rem; 
  font-weight: var(--weight-medium, 500);
}
.breadcrumb a,
.breadcrumb-divider {
  color: var(--color-text-muted, #525357);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--color-link-hover, #134262);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.breadcrumb [aria-current="page"] {
  color: var(--color-text, #2b2d31);
}
.prose {
  max-width: var(--measure, 44.160156em);
  color: var(--color-text, #2b2d31);
  font-family: var(--font-sans, sans-serif);
  font-size: var(--text-base, 1rem);
  line-height: var(--leading-prose, 1.625);
}
.prose > * {
  margin-block: var(--space-4, 1rem) 0;
}
.prose > :first-child {
  margin-block-start: 0;
}
.prose h2 {
  max-width: var(--measure, 44.160156em);
  margin-block-start: var(--space-7, 3rem);
  color: var(--color-brand-strong, #1d6493);
  font-size: var(--text-xl, 1.5rem);
}
.prose ul,
.prose ol {
  padding-inline-start: var(--space-5, 1.5rem);
}
.prose li + li {
  margin-block-start: var(--space-2, 0.5rem);
}
.prose a {
  color: var(--color-link, #1d6493);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.prose img {
  border-radius: var(--radius-md, 16px);
}
.date {
  color: var(--color-text-muted, #525357);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
}
.excerpt {
  color: var(--color-text-muted, #525357);
  font-size: var(--text-base, 1rem);
  line-height: var(--leading-prose, 1.625);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: var(--space-2, 0.5rem);
  inset-inline-start: var(--space-2, 0.5rem);
  z-index: 100;
  transform: translateY(-200%);
  padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
  background-color: var(--color-brand-deep, #134262);
  color: var(--color-text-inverse, #ffffff); 
  border-radius: var(--radius-pill, 999px);
  font-weight: var(--weight-semibold, 600);
  text-decoration: none;
  transition: transform var(--transition-base, 0.3s ease-in-out);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}
#closing-cta {
  margin-block-start: var(--space-section, 4rem);
  max-width: min(var(--container-max, 77.5rem), 100% - 2 * clamp(20px, 5vw, 48px));
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 6vw, 64px) clamp(28px, 5vw, 56px);
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    var(--color-brand-navy, #0f2438) 0%,
    var(--color-brand-navy-lift, #153252) 100%
  );
  color: var(--color-text-inverse, #ffffff);
  text-align: center;
}
#closing-cta::before {
  content: "";
  position: absolute;
  top: -160px;
  inset-inline-start: 50%;
  margin-inline-start: -300px;
  width: 600px;
  height: 460px;
  background: radial-gradient(
    ellipse at center,
    rgb(39 165 247 / 24%) 0%,
    rgb(39 165 247 / 0%) 68%
  );
  pointer-events: none;
}
#closing-cta > * {
  position: relative;
}
#closing-cta h2 {
  max-width: none;
  margin-block-start: 0;
  color: var(--color-text-inverse, #ffffff);
}
.page-product #closing-cta h2 {
  font-size: clamp(1.4375rem, 3.8vw, 2.25rem); 
  line-height: 1.14;
}
.product-hero[data-product='property-management-system'] ~ #closing-cta h2,
.product-hero[data-product='booking-engine'] ~ #closing-cta h2 {
  font-size: var(--text-2xl, clamp(1.625rem, 4.4vw, 2.625rem));
  line-height: var(--leading-heading, 1.12);
}
.page-service #closing-cta h2 {
  font-size: clamp(1.4375rem, 3.6vw, 2.125rem); 
  line-height: 1.14;
}
.page-service-index #closing-cta h2 {
  font-size: clamp(1.5rem, 4vw, 2.375rem); 
  font-weight: var(--weight-semibold, 600);
  letter-spacing: -0.026em;
}
.page-product #closing-cta p,
.page-service #closing-cta p {
  font-size: var(--text-lead, 1.0625rem);
  max-width: 30em;
}
#closing-cta p {
  max-width: 32em;
  margin-inline: auto;
  margin-block-start: var(--space-4, 1rem);
  color: var(--color-text-on-dark, #a8bacb);
  font-size: 1.125rem; 
  line-height: var(--leading-normal, 1.6);
}
.closing-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px; 
  margin-block-start: var(--space-6, 2rem);
}
#closing-cta .btn-primary,
#closing-cta .btn-outline {
  padding: 16px 34px; 
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-base, 1rem);
}
#closing-cta .btn-primary {
  background-color: var(--color-brand, #27a5f7);
  color: var(--color-text-inverse, #ffffff);
  box-shadow: 0 8px 24px rgb(39 165 247 / 34%);
}
#closing-cta .btn-primary:hover {
  box-shadow: 0 14px 32px rgb(39 165 247 / 42%);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  #closing-cta .btn-primary:hover {
    transform: translateY(-2px);
  }
}
#closing-cta .btn-outline {
  background-color: rgb(255 255 255 / 7%);
  border-color: rgb(255 255 255 / 20%);
  color: var(--color-text-inverse, #ffffff);
}
#closing-cta .btn-outline:hover {
  background-color: rgb(255 255 255 / 13%);
  color: var(--color-text-inverse, #ffffff);
}
.product-icon {
  display: block;
  width: 100%;
  height: 100%;
}
body > header {
  position: sticky;
  top: 0;
  padding: 0;
  z-index: 40;
  background-color: var(--color-bg, #ffffff);
  background-color: rgb(255 255 255 / 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--color-border-subtle, #e6ebf0);
}
body > header > nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 0.75rem) 22px;
  padding: 10px clamp(20px, 5vw, 48px);
}
body > header > nav > a.btn-primary {
  background-color: var(--color-brand-navy, #0f2438);
  border-color: var(--color-brand-navy, #0f2438);
  padding: 10px 20px;
  font-size: 0.9375rem;
  line-height: 1.4;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
body > header > nav > a.btn-primary:hover,
body > header > nav > a.btn-primary:focus-visible {
  background-color: var(--color-brand-navy, #0f2438);
  border-color: var(--color-brand-navy, #0f2438);
  color: var(--color-text-inverse, #ffffff); 
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgb(15 36 56 / 22%);
}
.nav-home {
  display: flex;
  align-items: center;
  color: var(--color-brand-strong, #1d6493);
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--weight-bold, 700);
  font-size: 1.875rem;
  line-height: 1.1;
  text-decoration: none;
  transform-origin: left center;
  transition: transform 0.5s ease-in-out, color 0.3s ease-in-out;
}
.nav-home:hover,
.nav-home:focus-visible {
  color: var(--color-link-hover, #134262);
  transform: rotate(1deg) scale(1.05);
}
.nav-home img {
  display: block;
  height: clamp(34px, 7vw, 44px);
  width: calc(clamp(34px, 7vw, 44px) * 977 / 323);
}
.nav-toggle + .nav-group,
body > header > nav > .nav-lang,
body > header > nav > a.nav-login {
  margin-inline-start: auto;
}
body > header > nav > .nav-lang ~ a.nav-login,
body > header > nav > a.nav-login + a.btn-primary {
  margin-inline-start: -6px;
}
.nav-lang {
  position: relative;
  flex: none;
}
.nav-lang > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 4px 11px;
  border-radius: 999px;
  background-color: var(--color-surface-muted, #f2f6fa);
  border: 1px solid var(--color-border-muted, #e1e8ef);
  color: var(--color-brand-navy, #0f2438);
  font-family: var(--font-sans, sans-serif);
  font-size: 0.75rem; 
  font-weight: var(--weight-semibold, 600);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.nav-lang > summary::-webkit-details-marker {
  display: none;
}
.nav-lang > summary::after {
  content: "";
  position: static;
  flex: none;
  width: 0;
  height: 0;
  border-inline: 3px solid transparent;
  border-block-start: 4px solid currentcolor;
  transition: transform 0.2s ease-in-out;
}
.nav-lang[open] > summary::after {
  transform: rotate(180deg);
}
.nav-lang > summary:hover,
.nav-lang > summary:focus-visible {
  color: var(--color-brand-strong, #1d6493);
}
.nav-lang-label {
  display: none;
}
.nav-lang-name {
  white-space: nowrap;
}
.nav-lang-list {
  position: absolute;
  z-index: 60;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  min-width: 100%;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 12px;
  background-color: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border-muted, #e1e8ef);
  box-shadow: 0 12px 28px rgb(15 36 56 / 12%);
}
.nav-lang-alt {
  display: block;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.8125rem; 
  font-weight: var(--weight-medium, 500);
  line-height: 1.5;
  text-decoration: none;
  color: var(--color-text-hint, #8a94a0);
  transition:
    color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
}
.nav-lang-alt:hover,
.nav-lang-alt:focus-visible {
  background-color: var(--color-surface-muted, #f2f6fa);
  color: var(--color-brand-strong, #1d6493);
}
.nav-lang-alt.is-current {
  background-color: var(--color-surface-muted, #f2f6fa);
  color: var(--color-brand-navy, #0f2438);
  font-weight: var(--weight-semibold, 600);
}
.nav-toggle {
  display: none;
}
@media (max-width: 1279px) {
  body > header > nav {
    justify-content: space-between;
  }
  .nav-toggle {
    display: block;
  }
  .nav-toggle > summary.nav-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    -webkit-appearance: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border-muted, #e1e8ef);
    border-radius: 11px;
    background-color: var(--color-bg, #ffffff);
    color: var(--color-brand-navy, #0f2438);
  }
  .nav-toggle-icon,
  .nav-toggle-icon::before,
  .nav-toggle-icon::after {
    background-color: currentColor;
    width: 20px;
    height: 2px;
    transition: transform var(--transition-base, 0.3s ease-in-out),
      opacity var(--transition-base, 0.3s ease-in-out);
  }
  .nav-toggle-icon {
    position: relative;
    display: block;
  }
  .nav-toggle-icon::before,
  .nav-toggle-icon::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
  }
  .nav-toggle-icon::before {
    top: -6px;
  }
  .nav-toggle-icon::after {
    top: 6px;
  }
  .nav-toggle[open] > summary.nav-toggle-btn .nav-toggle-icon {
    background-color: transparent;
  }
  .nav-toggle[open] > summary.nav-toggle-btn .nav-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
  }
  .nav-toggle[open] > summary.nav-toggle-btn .nav-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }
  .nav-toggle ~ .nav-group,
  .nav-toggle ~ a.nav-link,
  .nav-toggle ~ a.nav-login,
  .nav-toggle ~ .nav-lang,
  .nav-toggle ~ a.btn {
    display: none;
  }
  .nav-toggle[open] ~ .nav-group,
  .nav-toggle[open] ~ a.nav-link,
  .nav-toggle[open] ~ a.nav-login,
  .nav-toggle[open] ~ a.btn {
    display: block;
    flex-basis: 100%;
    width: 100%;
  }
  .nav-toggle[open] ~ .nav-lang {
    display: block;
    flex-basis: 100%;
    width: 100%;
    padding: 20px 0 4px; 
  }
  .nav-toggle[open] ~ .nav-lang > summary {
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    font-size: 0.8125rem; 
  }
  .nav-lang-label {
    display: inline;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.75rem; 
    font-weight: var(--weight-semibold, 600);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-soft, #5b6570);
  }
  .nav-lang-list {
    position: static;
    inset: auto;
    min-width: 0;
    margin-block-start: 8px;
    box-shadow: none;
  }
  .nav-lang-alt {
    padding: 10px 14px;
    font-size: 0.8125rem; 
  }
}
body > header > nav a.nav-link,
body > header > nav a.nav-login,
body > header > nav summary {
  color: var(--color-text-soft, #5b6570);
  font-family: var(--font-sans, sans-serif);
  font-weight: var(--weight-medium, 500);
  font-size: 0.9375rem; 
  text-decoration: none;
  position: relative;
  border-radius: var(--radius-sm, 12px);
  padding: var(--space-2, 0.5rem) 0;
  transition: color 0.3s ease-in-out;
}
body > header > nav a.nav-link::after,
body > header > nav a.nav-login::after,
body > header > nav .nav-group > summary::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-brand, #27a5f7);
  transition: width 0.3s ease-in-out;
}
body > header > nav a.nav-link:hover,
body > header > nav a.nav-login:hover,
body > header > nav .nav-group > summary:hover,
body > header > nav a.nav-link:focus-visible,
body > header > nav a.nav-login:focus-visible,
body > header > nav .nav-group > summary:focus-visible,
body > header > nav .nav-group[open] > summary {
  color: var(--color-link-hover, #134262);
}
body > header > nav a.nav-link:hover::after,
body > header > nav a.nav-login:hover::after,
body > header > nav .nav-group > summary:hover::after,
body > header > nav a.nav-link:focus-visible::after,
body > header > nav a.nav-login:focus-visible::after,
body > header > nav .nav-group > summary:focus-visible::after,
body > header > nav .nav-group[open] > summary::after {
  width: 100%;
}
.nav-group > summary {
  list-style: none;
  cursor: pointer;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  min-height: 44px;
}
.nav-toggle > summary.nav-toggle-btn::-webkit-details-marker,
.nav-group > summary::-webkit-details-marker {
  display: none;
}
.nav-group > summary::before {
  content: "";
  order: 1;
  width: 6px;
  height: 6px;
  border: 2px solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform var(--transition-base, 0.3s ease-in-out);
}
.nav-group[open] > summary::before {
  transform: rotate(225deg);
}
.nav-group[open] > ul {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--space-1, 0.25rem);
  padding: 22px calc(max(0px, (100% - 1240px) / 2) + clamp(20px, 5vw, 48px))
    26px;
  max-width: none;
  background-color: var(--color-bg, #ffffff);
  border-block-end: 1px solid var(--color-border-subtle, #e6ebf0);
  box-shadow: 0 18px 40px -24px rgb(15 36 56 / 28%);
  animation: nav-dropdown-in 0.2s ease-out;
}
.nav-group[open] > ul li + li {
  margin-block-start: 0;
}
@keyframes nav-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@media (max-width: 1279px) {
  .nav-toggle + .nav-group,
  body > header > nav > .nav-lang,
  body > header > nav > .nav-lang ~ a.nav-login,
  body > header > nav > a.nav-login + a.btn-primary,
  body > header > nav > a.nav-login {
    margin-inline-start: 0;
  }
  .nav-group[open] > ul {
    position: static;
    border-block-end: none;
    border-inline-start: 2px solid var(--color-border-brand, #acdbfb);
    box-shadow: none;
    padding: 0 0 0 var(--space-4, 1rem);
  }
}
.nav-group > ul a {
  display: block;
  color: var(--color-brand-navy, #0f2438);
  font-weight: var(--weight-semibold, 600);
  font-size: 0.9375rem; 
  text-decoration: none;
  border-radius: 11px; 
  padding: 13px 15px; 
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
    transform 0.3s ease-in-out;
}
.nav-group > ul a:hover,
.nav-group > ul a:focus-visible {
  background-color: var(--color-surface-subtle, #f7fafc);
  border-color: var(--color-tint-accent-border, #cfe9fc);
  transform: translateY(-1px);
}
.nav-group[open] > ul.nav-panel-grid {
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
}
.nav-group[open] > ul.nav-panel-grid--services {
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.nav-group[open] > ul > li {
  display: grid;
}
.nav-group > ul a.nav-card {
  display: flex;
  border: 1px solid transparent;
}
.nav-group > ul.nav-panel-grid--products a.nav-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  align-content: start;
  gap: 13px; 
}
.nav-group > ul.nav-panel-grid--services a.nav-card {
  align-items: flex-start;
  flex-direction: column;
  gap: 3px; 
}
.nav-card-badge {
  flex: none;
  display: inline-flex;
  width: var(--space-6, 2rem); 
  height: var(--space-6, 2rem);
}
.nav-card-text {
  min-width: 0;
}
.nav-card-name {
  display: block;
  font-family: var(--font-display, var(--font-heading, sans-serif));
}
.nav-card-desc {
  display: block;
  margin-block-start: 2px;
  font-size: 0.8125rem; 
  font-weight: var(--weight-normal, 400);
  color: var(--color-text-hint, #8a94a0);
  text-wrap: balance;
}
.nav-group[open] > ul.nav-panel-grid--packages {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.nav-group > ul.nav-panel-grid--packages li:not(.nav-panel-foot) > a.nav-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  align-content: start;
  gap: 13px; 
}
.nav-card-meter {
  display: grid;
  grid-template-columns: repeat(4, 7px);
  gap: 3px;
  flex: none;
  margin-block-start: 10px;
}
.nav-card-meter i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--color-border-subtle, #e6ebf0);
  display: block;
}
.nav-card-meter i.on {
  background: var(--color-brand, #27a5f7);
}
.nav-panel-foot {
  grid-column: 1 / -1;
  margin-block-start: var(--space-2, 0.5rem);
  padding-block-start: var(--space-2, 0.5rem);
  border-block-start: 1px solid var(--color-border-subtle, #e6ebf0);
}
.nav-panel-foot .nav-card-text {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 0.5rem);
}
@media (max-width: 1279px) {
  .nav-group[open] > ul.nav-panel-grid--packages {
    grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
  }
  .nav-panel-foot .nav-card-text {
    display: block;
  }
}
body > footer {
  background-color: var(--color-surface-subtle, #f7fafc);
  border-block-start: 1px solid var(--color-border-subtle, #e6ebf0);
  padding: clamp(37px, 8vw, 64px) clamp(20px, 5vw, 48px) clamp(23px, 8vw, 40px);
}
body > footer > .container {
  padding-inline: 0;
}
.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 40px;
}
.footer-column > p,
.footer-col-heading {
  font-weight: var(--weight-semibold, 600);
  font-size: 0.8125rem; 
  letter-spacing: 0.02em;
  color: var(--color-brand-navy, #0f2438);
  margin-block-end: var(--space-4, 1rem);
  max-width: none;
}
.footer-column a {
  color: var(--color-text-soft, #5b6570);
  font-size: var(--text-sm, 0.875rem); 
  text-decoration: none;
}
.footer-column li {
  line-height: 1.2;
}
.footer-column li + li {
  margin-block-start: 10px;
}
.footer-column a:hover,
.footer-column a:focus-visible {
  color: var(--color-link-hover, #134262);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.footer-legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  margin-block-start: 48px;
  padding-block-start: var(--space-5, 1.5rem);
  border-block-start: 1px solid var(--color-border-muted, #e1e8ef);
  font-size: 0.8125rem; 
  color: var(--color-text-hint, #8a94a0);
}
.footer-legal > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.footer-legal li + li {
  margin-block-start: 0;
}
.footer-legal a {
  color: inherit;
  text-decoration: none;
}
.footer-legal a:hover,
.footer-legal a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.footer-legal > p {
  margin-block: 0;
}
.footer-brand,
p.footer-blurb,
p.footer-certified,
p.footer-support-note {
  font: unset;
  color: unset;
}
p.footer-support-note {
  color: var(--color-text-hint, #8a94a0);
  margin-block: 10px 0;
}
.footer-home {
  display: block;
}
.footer-home img {
  display: block;
  height: clamp(34px, 7.44vw, 52px);
  width: auto;
}
p.footer-blurb {
  max-width: 26em;
  line-height: 1.6;
  margin-block-start: 20px; 
}
.footer-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 20px;
}
.footer-certs li,
.footer-certs li + li {
  margin-block-start: 0;
}
li.footer-certified {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 8px;
  background-color: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border-muted, #e1e8ef);
  font-size: 0.8125rem; 
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand-navy, #0f2438);
  white-space: nowrap;
}
.footer-cert-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background-color: var(--color-tint-accent, #eaf6fe);
  color: var(--color-brand-strong, #1d6493);
  font-size: 0.6875rem; 
  font-weight: var(--weight-bold, 700);
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 22px;
}
.footer-social li {
  margin-block-start: 0;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px; 
  background-color: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border-muted, #e1e8ef);
  font-size: 0.75rem; 
  font-weight: var(--weight-semibold, 600);
  color: var(--color-text-soft, #5b6570);
  text-decoration: none;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  border-color: var(--color-brand, #27a5f7);
  color: var(--color-brand-strong, #1d6493);
}
@media (min-width: 768px) {
  .footer-legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6, 2rem);
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .btn {
    transition:
      background-color var(--transition-base, 0.3s ease-in-out),
      border-color var(--transition-base, 0.3s ease-in-out),
      color var(--transition-base, 0.3s ease-in-out),
      transform 0.2s ease-out;
  }
  .btn:hover {
    transform: translateY(-1px);
  }
  .btn:active {
    transform: translateY(0);
  }
  .card {
    transition:
      box-shadow var(--transition-base, 0.3s ease-in-out),
      transform 0.2s ease-out;
  }
  .card:hover {
    transform: translateY(-2px);
  }
}
.card {
  border: 1px solid rgba(29, 100, 147, 0.12);
}
.btn-primary {
  box-shadow: 0 8px 18px -10px rgba(19, 66, 98, 0.72);
}
@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--space-6, 2rem)));
  }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal] {
      animation: reveal-rise 550ms cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-timeline: view();
      animation-range: entry calc(var(--reveal-index, 0) * 3%) entry 45%;
    }
  }
}
.marquee {
  display: flex;
  overflow: hidden;
  flex-wrap: nowrap;
  gap: var(--space-6, 2rem);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}
.marquee-track {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee-track {
    animation: marquee-scroll 60s linear infinite;
  }
  .marquee:hover .marquee-track,
  .marquee:focus-within .marquee-track {
    animation-play-state: paused;
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee {
    flex-wrap: wrap;
    justify-content: center;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee .marquee-track[aria-hidden='true'] {
    display: none;
  }
  .marquee .marquee-track:not([aria-hidden]) {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
}
.carousel {
  position: relative;
}
.carousel-track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: 3px;
}
.carousel-track > * {
  scroll-snap-align: start;
}
@media (prefers-reduced-motion: no-preference) {
  .carousel-track {
    scroll-behavior: smooth;
  }
}
.page-homepage h1,
.page-homepage h2,
.page-homepage h3,
.page-homepage .product-name,
.page-homepage .area-name,
.page-homepage .testimonial-featured-mark,
.page-homepage .testimonial-featured-quote {
  font-family: var(--font-display, var(--font-heading, sans-serif));
}
.page-homepage h2 {
  font-weight: var(--weight-semibold, 600);
  letter-spacing: -0.025em;
  color: var(--color-brand-navy, #0f2438);
}
.page-homepage h3 {
  font-weight: var(--weight-semibold, 600);
  letter-spacing: -0.015em;
  color: var(--color-brand-navy, #0f2438);
}
.page-homepage .xd-spotlight h3 {
  color: var(--color-text-inverse, #ffffff);
}
.page-homepage main {
  max-width: none;
  padding-inline: 0;
  padding-block: 0;
}
.page-homepage main > section {
  padding-block: clamp(56px, 8vw, 96px);
}
.page-homepage main > section h2 {
  line-height: 1.12;
  margin-block-start: 14px;
}
.page-homepage main > section .eyebrow,
.page-homepage main > section h2,
.page-homepage main > section h2 + p {
  max-width: var(--measure-intro, 34rem);
}
.page-homepage main > section h2 + p {
  font-size: var(--text-lead, 1.0625rem);
  line-height: 1.6;
  color: var(--color-text-soft, #5b6570);
}
.page-homepage .archipelago-stats .stat-num {
  margin-block: 0;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: var(--text-2xl, 2.5rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-text-inverse, #ffffff);
}
.page-homepage .card {
  box-shadow: none;
  border: 1px solid var(--color-border-subtle, #e6ebf0);
  transition:
    transform var(--transition-base, 0.3s ease-in-out),
    box-shadow var(--transition-base, 0.3s ease-in-out),
    border-color var(--transition-base, 0.3s ease-in-out);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .page-homepage .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    border-color: var(--color-tint-accent-border, #cfe9fc);
  }
}
.page-homepage #platform {
  position: relative;
  overflow: hidden;
  background-color: var(--color-ink, #0b1b2b);
  color: var(--color-on-ink-soft, #a8bacb);
  border-bottom: 1px solid var(--color-border-faint, #eef2f6);
}
.page-homepage #trust-marquee {
  background-color: var(--color-bg, #ffffff);
  border-bottom: 1px solid var(--color-border-faint, #eef2f6);
}
.page-homepage #platform h1 {
  max-width: 26ch;
  font-size: clamp(2.375rem, 6.5vw, 3.875rem); 
  line-height: 1.05;
  letter-spacing: -0.032em;
  color: var(--color-on-ink, #ffffff);
}
.page-homepage .platform-grid {
  display: grid;
  gap: var(--space-6, 2rem);
  align-items: center;
  position: relative;
  z-index: 1;
  padding-block-end: 84vw;
}
@media (min-width: 1024px) {
  .page-homepage .platform-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8, 4rem);
    padding-block-end: 0;
  }
  .page-homepage .platform-copy {
    grid-column: 1;
    grid-row: 1;
  }
}
.page-homepage .platform-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-start: 34px;
}
.page-homepage .platform-ctas .btn {
  min-height: 0;
  padding: 15px 30px;
  font-size: var(--text-base, 1rem);
}
.page-homepage .platform-ctas .btn-primary {
  background-color: var(--color-brand, #27a5f7);
  border-color: var(--color-brand, #27a5f7);
  color: var(--color-brand-contrast, #ffffff);
  box-shadow: 0 6px 18px rgb(39 165 247 / 28%);
}
.page-homepage .platform-ctas .btn-primary:hover {
  box-shadow: var(--shadow-btn-primary-hover, 0 10px 24px -8px rgb(39 165 247 / 60%));
}
.page-homepage .platform-ctas .btn-outline {
  background-color: transparent;
  border-color: #2c5b7e;
  color: var(--color-on-ink-link, #7cc8fa);
}
.page-homepage .platform-trust-note {
  margin-block-start: var(--space-5, 1.5rem);
  color: var(--color-on-ink-muted, #9fb3c6);
  font-size: var(--text-sm, 0.875rem);
}
.page-homepage .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem; 
  margin-block: 0 var(--space-5, 1.5rem);
  padding: 0.375rem 0.9375rem; 
  border-radius: var(--radius-full, 9999px);
  background-color: transparent;
  border: 1px solid rgb(124 200 250 / 35%);
  color: var(--color-on-ink-link, #7cc8fa);
  font-family: var(--font-sans, sans-serif);
  font-size: 0.8125rem; 
  font-weight: var(--weight-semibold, 600);
}
.page-homepage .hero-badge::before {
  flex-shrink: 0;
  content: "";
  width: 0.375rem; 
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-brand, #27a5f7);
}
@media (prefers-reduced-motion: no-preference) {
  .page-homepage .hero-badge::before {
    animation: one-system-pulse 2.6s ease-in-out infinite;
  }
}
.page-homepage #trust-marquee {
  padding-block: 0 var(--space-7, 3rem);
}
.page-homepage #trust-marquee h2 {
  font-family: var(--font-sans, sans-serif);
  font-size: 0.8125rem; 
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-muted, #525357);
  text-align: center;
  max-width: none;
  margin-block: 0 var(--space-5, 1.5rem);
}
.page-homepage .marquee-track {
  align-items: center;
  gap: var(--space-6, 2rem);
  list-style: none;
  padding: 0;
  max-width: none;
  margin-block: 0;
}
.page-homepage .marquee-track li {
  margin-block-start: 0;
}
.page-homepage .marquee-track img {
  height: 40px;
  width: auto;
  object-fit: contain;
}
.page-homepage #products {
  padding-block-end: var(--space-8, 4rem);
}
.page-homepage .product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5, 1.5rem);
  margin-block-start: var(--space-6, 2rem);
}
@media (min-width: 560px) {
  .page-homepage .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .page-homepage .product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6, 2rem);
  }
}
.page-homepage .product-grid > .card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  color: inherit;
  text-decoration: none;
}
.page-homepage .product-grid > .card:nth-child(1),
.page-homepage .news-cards > .card:nth-child(1) {
  --reveal-index: 0;
}
.page-homepage .product-grid > .card:nth-child(2),
.page-homepage .news-cards > .card:nth-child(2) {
  --reveal-index: 1;
}
.page-homepage .product-grid > .card:nth-child(3),
.page-homepage .news-cards > .card:nth-child(3) {
  --reveal-index: 2;
}
.page-homepage .product-grid > .card:nth-child(4),
.page-homepage .news-cards > .card:nth-child(4) {
  --reveal-index: 3;
}
.page-homepage .product-grid > .card:nth-child(5),
.page-homepage .news-cards > .card:nth-child(5) {
  --reveal-index: 4;
}
.page-homepage .product-grid > .card:nth-child(6),
.page-homepage .news-cards > .card:nth-child(6) {
  --reveal-index: 5;
}
.page-homepage .product-grid > .card:nth-child(7),
.page-homepage .news-cards > .card:nth-child(7) {
  --reveal-index: 6;
}
.page-homepage .product-grid > .card:nth-child(8),
.page-homepage .news-cards > .card:nth-child(8) {
  --reveal-index: 7;
}
.page-homepage .product-abbr {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
}
.page-homepage .product-name {
  font-size: var(--text-lg, 1.25rem);
  font-weight: var(--weight-semibold, 600);
}
.page-homepage .product-short {
  margin-block-start: calc(var(--space-2, 0.5rem) * -1);
  color: var(--color-text-muted, #525357);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
}
.page-homepage .product-line {
  color: var(--color-text-muted, #525357);
  font-size: var(--text-sm, 0.875rem);
}
.page-homepage .xd-spotlight {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6, 2rem);
  align-items: center;
  margin-block-start: var(--space-7, 3rem);
  padding: var(--space-6, 2rem);
  border-radius: var(--radius-md, 16px);
  border-inline-start: 12px solid var(--color-accent, #de26a5);
  background: var(--color-brand-navy, #0f2438);
  color: var(--color-text-inverse, #ffffff);
}
@media (min-width: 1024px) {
  .page-homepage .xd-spotlight {
    grid-template-columns: 3fr 2fr;
    padding: var(--space-7, 3rem);
  }
}
.page-homepage .xd-spotlight .eyebrow {
  color: var(--color-brand-soft, #acdbfb);
}
.page-homepage .xd-spotlight-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-block-start: var(--space-5, 1.5rem);
  padding: var(--space-2, 0.5rem) var(--space-5, 1.5rem);
  border-radius: var(--radius-pill, 999px);
  background-color: var(--color-bg, #ffffff);
  color: var(--color-brand-deep, #134262);
  font-weight: var(--weight-semibold, 600);
  text-decoration: none;
}
.page-homepage .xd-spotlight-cta:hover {
  background-color: var(--color-brand-soft, #acdbfb);
}
.page-homepage .xd-spotlight-preview {
  padding: var(--space-5, 1.5rem);
}
.page-homepage .xd-preview-badge {
  display: inline-block;
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-pill, 999px);
  background-color: var(--color-brand, #27a5f7);
  color: var(--color-text, #2b2d31);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
  text-transform: uppercase;
}
.page-homepage #archipelago,
.page-homepage #integration,
.page-homepage #testimonials,
.page-homepage #news {
  background-color: var(--color-surface-subtle, #f7fafc);
  border-block: 1px solid var(--color-border-faint, #eef2f6);
}
.page-homepage #products,
.page-homepage #support-features {
  background-color: var(--color-bg, #ffffff);
}
.page-homepage .archipelago-grid {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-6, 2rem);
}
@media (min-width: 1024px) {
  .page-homepage .archipelago-grid {
    flex-direction: row;
    gap: var(--space-8, 4rem);
  }
  .page-homepage .archipelago-grid > * {
    flex: 1 1 0;
    min-width: 0;
  }
}
.page-homepage .archipelago-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5, 1.5rem);
  margin-block-start: var(--space-6, 2rem);
}
.page-homepage .archipelago-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-7, 3rem);
  border-radius: var(--radius-image, 32px);
  background-color: var(--color-brand-navy, #0f2438);
}
.page-homepage .archipelago-panel img {
  max-width: min(20rem, 100%);
  margin-inline: auto;
}
.page-homepage .archipelago-stats p:not(.stat-num) {
  color: var(--color-text-inverse-muted, #9fb3c6);
}
.page-homepage .areas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5, 1.5rem);
  margin-block-start: var(--space-8, 4rem);
}
@media (min-width: 1024px) {
  .page-homepage .areas-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.page-homepage .area-card {
  padding: var(--space-5, 1.5rem);
  border-radius: var(--radius-md, 16px);
  background-color: var(--color-bg, #ffffff);
}
.page-homepage .area-name {
  margin-block: 0 var(--space-2, 0.5rem);
  font-weight: var(--weight-semibold, 600); 
}
.page-homepage #stats-band {
  padding-block: 4.75rem;
}
.page-homepage .stats-band-grid .stat-num {
  font-size: clamp(1.625rem, 4.4vw, 2.875rem);
  letter-spacing: -0.02em;
}
.page-homepage .stats-band-grid p:not(.stat-num) {
  font-size: 0.9375rem;
}
@media (min-width: 1024px) {
  .page-homepage .stats-band-grid {
    gap: var(--space-7, 3rem);
    text-align: start;
  }
}
.page-homepage .support-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6, 2rem);
}
@media (min-width: 1024px) {
  .page-homepage .support-features-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8, 4rem);
  }
}
.page-homepage .support-feature-list {
  display: grid;
  gap: 0.875rem;
}
.page-homepage .support-feature-row {
  display: flex;
  gap: var(--space-4, 1rem);
  padding: 1.375rem var(--space-5, 1.5rem);
  border: 1px solid var(--color-border-subtle, #e6ebf0);
  border-radius: var(--radius-sm, 12px);
  background-color: var(--color-surface-subtle, #f7fafc);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.page-homepage .support-feature-row > p {
  margin: 0;
}
.page-homepage .support-feature-label {
  min-width: 4.875rem;
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand-strong, #1d6493);
}
.page-homepage .integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: var(--space-5, 1.5rem);
  margin-block-start: 44px;
}
.page-homepage .integration-card {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 28px;
}
.page-homepage .integration-card h3 {
  margin-block: 0;
  font-size: var(--text-lead, 1.0625rem);
  line-height: 1.3;
}
.page-homepage .integration-card p {
  margin-block: var(--space-2, 0.5rem) 18px;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.55;
  color: var(--color-text-soft, #5b6570);
}
.page-homepage .integrations-note {
  margin-block-start: 26px;
}
.page-homepage #testimonials h2 {
  color: var(--color-brand-navy, #0f2438);
  text-align: center;
  max-width: none;
}
.page-homepage .testimonial-featured {
  margin: var(--space-6, 2rem) 0 0;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-md, 16px);
  border-inline-start: 12px solid var(--color-accent, #de26a5);
  background-color: var(--color-brand-navy, #0f2438);
  color: var(--color-text-inverse, #ffffff);
  max-width: none;
}
.page-homepage .testimonial-featured-mark {
  margin-block: 0;
  font-size: 2.125rem;
  line-height: 1;
  color: var(--color-brand, #27a5f7);
}
.page-homepage .testimonial-featured-quote {
  margin: var(--space-3, 0.75rem) 0 0;
  max-width: 30em;
  font-size: clamp(1.25rem, 2.8vw, 1.8125rem);
  font-weight: var(--weight-medium, 500);
  letter-spacing: -0.018em;
  line-height: 1.38;
  text-wrap: pretty;
}
.page-homepage .testimonial-featured-byline {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  margin-block-start: var(--space-6, 2rem);
  padding: 0;
  border-block-start: 0;
}
.page-homepage .testimonial-featured-byline img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full, 9999px);
  object-fit: cover;
}
.page-homepage .testimonial-featured-byline cite {
  display: block;
  font-style: normal;
  font-weight: var(--weight-semibold, 600);
  color: var(--color-text-inverse, #ffffff);
}
.page-homepage .testimonial-featured-byline p {
  margin: 0.125rem 0 0;
  max-width: none;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-inverse-muted, #9fb3c6);
}
.page-homepage .testimonial-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: var(--space-5, 1.5rem);
  margin-block-start: var(--space-6, 2rem);
}
@media (min-width: 1024px) {
  .page-homepage .testimonial-grid {
    grid-auto-columns: calc((100% - 2 * var(--space-5, 1.5rem)) / 3);
  }
}
.page-homepage .testimonial-grid blockquote {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  max-width: none;
  margin-block: 0;
}
.page-homepage .testimonial-grid img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full, 9999px);
  object-fit: cover;
}
.page-homepage .testimonial-grid p {
  margin-block: 0;
  max-width: none;
}
.page-homepage .testimonial-grid cite {
  color: var(--color-text-muted, #525357);
  font-size: var(--text-sm, 0.875rem);
  font-style: normal;
}
.page-homepage .carousel-nav {
  display: flex;
  gap: var(--space-3, 0.75rem);
  justify-content: flex-end;
  margin-block-start: var(--space-4, 1rem);
}
.page-homepage .carousel-nav button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(29, 100, 147, 0.24);
  border-radius: 50%;
  background: #fff;
  color: var(--color-brand-strong, #1d6493);
}
.page-homepage .carousel-nav button::before {
  content: '\2190';
}
.page-homepage .carousel-nav .carousel-next::before {
  content: '\2192';
}
.page-homepage .carousel-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}
.page-homepage .news-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5, 1.5rem);
}
.page-homepage #news h2 {
  margin-block: 0;
}
.page-homepage .news-all {
  flex: none;
  color: var(--color-brand-strong, #1d6493);
  font-size: var(--text-md, 0.9375rem);
  font-weight: var(--weight-semibold, 600);
  text-decoration: none;
}
.page-homepage .news-all::after {
  content: " \2192";
}
.page-homepage .news-cards {
  display: grid;
  gap: var(--space-5, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  list-style: none;
  padding: 0;
  max-width: none;
  margin-block: 36px 0;
}
.page-homepage .news-cards a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.page-homepage .news-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}
.page-homepage .news-cards h3 {
  margin-block: var(--space-4, 1rem) 0;
  font-size: var(--text-lead, 1.0625rem);
  line-height: 1.32;
}
.page-homepage .news-cards p {
  margin-block: var(--space-3, 0.75rem) 0;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.55;
  color: var(--color-text-soft, #5b6570);
}
.page-homepage .news-published {
  color: var(--color-text-hint, #8a94a0);
  font-size: 13px;
}
.page-homepage .final-cta-panel {
  border-inline-start: 12px solid var(--color-accent, #de26a5);
  border-radius: 18px;
  padding: 64px 56px;
  text-align: center;
  background: linear-gradient(
    135deg,
    var(--color-brand-navy, #0f2438) 0%,
    var(--color-brand-navy-lift, #153252) 100%
  );
  color: var(--color-text-inverse, #ffffff);
  position: relative;
  overflow: hidden;
}
.page-homepage .final-cta-panel::before {
  content: "";
  position: absolute;
  top: -160px;
  inset-inline-start: 50%;
  margin-inline-start: -300px;
  width: 600px;
  height: 460px;
  background: radial-gradient(
    ellipse at center,
    rgb(39 165 247 / 24%) 0%,
    rgb(39 165 247 / 0%) 68%
  );
  pointer-events: none;
}
.page-homepage .final-cta-panel > * {
  position: relative;
}
.page-homepage .final-cta-panel > p {
  margin-inline: auto;
  max-width: 32em;
  font-size: 1.125rem; 
  line-height: 1.6;
  color: var(--color-text-on-dark, #a8bacb);
}
.page-homepage #final-cta h2 {
  max-width: none;
  margin-block-start: 0;
  color: var(--color-text-inverse, #ffffff);
}
.page-homepage .final-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-block-start: var(--space-6, 2rem);
}
.page-homepage .final-cta-panel .btn:not(.btn-outline) {
  padding: 16px 34px;
  background-color: var(--color-brand, #27a5f7);
  color: var(--color-text-inverse, #ffffff);
  font-size: var(--text-base, 1rem);
  box-shadow: 0 8px 24px rgb(39 165 247 / 34%);
}
.page-homepage .final-cta-panel .btn:not(.btn-outline):hover {
  background-color: var(--color-brand-soft, #acdbfb); 
  border-color: var(--color-brand-soft, #acdbfb);
  color: var(--color-brand-deep, #134262);
}
.page-homepage .final-cta-panel .btn-outline {
  padding: 16px 34px;
  background-color: rgb(255 255 255 / 7%);
  border-color: rgb(255 255 255 / 20%);
  color: var(--color-text-inverse, #ffffff);
  font-size: var(--text-base, 1rem);
}
.page-homepage .final-cta-panel .btn-outline:hover {
  background-color: var(--color-text-inverse, #ffffff);
  color: var(--color-brand-deep, #134262);
}
@media (min-width: 1024px) {
  .page-homepage #final-cta .container {
    text-align: center;
  }
  .page-homepage #final-cta p {
    margin-inline: auto;
  }
  .page-homepage .final-cta-buttons {
    justify-content: center;
  }
}
.page-homepage #platform {
  --globe-sea-1: #123651;
  --globe-sea-2: #0e2b44;
  --globe-sea-3: #0a1e31;
  --globe-land: #1a4463;
  --globe-land-edge: #4e9bce;
  --globe-border: #0b2338;
  --globe-graticule: #3e7fae;
  --globe-halo: var(--color-brand, #27a5f7);
  --globe-atmosphere: #7cc8fa;
  --globe-night: #03101e;
  --globe-marker: var(--color-brand, #27a5f7);
  --globe-bloom: var(--color-brand, #27a5f7);
  --globe-office: var(--color-accent, #de26a5);
  --globe-office-glow: var(--color-accent, #de26a5);
  --globe-data-center: #ffffff;
  --globe-arc: var(--color-brand, #27a5f7);
  --globe-pulse: #7cc8fa;
  --globe-office-arc: var(--color-accent, #de26a5);
  --globe-office-pulse: #ffc7ee;
  --globe-rim: var(--color-brand, #27a5f7);
  --globe-label: #d6e2ed;
  --globe-label-site: #ffffff;
  --globe-label-halo: var(--color-ink, #0b1b2b);
  --globe-mote: #a0d7ff;
  --globe-scrim: var(--color-ink, #0b1b2b);
  --globe-halo-placeholder: rgb(39 165 247 / 16%);
}
.page-homepage .client-globe {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-homepage .client-globe-canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: 1;
}
.page-homepage .client-globe-sphere {
  position: absolute;
  inline-size: 124%;
  aspect-ratio: 1;
  inset-inline: 50% auto;
  translate: -50%;
  inset-block-end: 0;
  margin-block-end: -40.3%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%,
      var(--globe-sea-1, #123651) 0%,
      var(--globe-sea-2, #0e2b44) 62%,
      var(--globe-sea-3, #0a1e31) 100%);
  box-shadow: 0 0 0 1px rgb(39 165 247 / 35%);
}
.page-homepage .client-globe-sphere::after {
  content: "";
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side,
      transparent 68%,
      var(--globe-halo-placeholder, rgb(39 165 247 / 16%)) 74%,
      transparent 100%);
}
.page-homepage .client-globe[data-globe-ready] .client-globe-sphere::after {
  background: none;
}
@media (min-width: 1024px) {
  .page-homepage .client-globe-sphere {
    inline-size: auto;
    block-size: 120%;
    inset-block: -4% auto;
    inset-inline: 72% auto;
  }
}
.page-homepage .client-globe-note {
  margin-block-start: var(--space-3, 0.75rem);
  color: var(--color-on-ink-hint, #7a8fa6);
  font-size: 0.8125rem;
}
.page-homepage .platform-stat-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6, 2rem);
  margin-block: var(--space-5, 1.5rem) 0;
  padding-block-start: var(--space-5, 1.5rem);
  border-block-start: 1px solid rgb(255 255 255 / 14%);
}
.page-homepage .platform-stat { min-inline-size: 12ch; }
.page-homepage .platform-stat-num {
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--color-on-ink, #ffffff);
}
.page-homepage .platform-stat-label {
  margin: 0;
  color: var(--color-on-ink-muted, #9fb3c6);
  font-size: 0.875rem;
}
.page-homepage [data-globe-stats-static] .platform-stat[hidden] { display: block !important; }
.page-homepage .platform-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5, 1.5rem);
  margin-block: var(--space-4, 1rem) 0;
  padding: 0;
  list-style: none;
  color: var(--color-on-ink-muted, #9fb3c6);
  font-size: 0.8125rem;
}
.page-homepage .platform-legend li::before {
  content: "";
  display: inline-block;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  margin-inline-end: 8px;
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 25%);
}
.page-homepage .platform-legend-0::before { background: var(--globe-data-center, #ffffff); }
.page-homepage .platform-legend-1::before { background: var(--globe-office, #de26a5); }
.page-homepage .platform-legend-2::before { background: var(--globe-marker, #27a5f7); }
.page-product h1,
.page-product h2,
.page-product h3,
.page-product .one-system-node-name,
.page-product .one-system-module-abbr {
  font-family: var(--font-display, var(--font-heading, sans-serif));
}
.page-product h2 {
  font-weight: var(--weight-semibold, 600);
  letter-spacing: -0.025em;
  color: var(--color-brand-navy, #0f2438);
}
.page-product h3 {
  font-weight: var(--weight-semibold, 600);
  letter-spacing: -0.015em;
  color: var(--color-brand-navy, #0f2438);
}
.page-product main {
  --product-gutter: clamp(1.25rem, 5vw, 3rem); 
}
.page-product main > section {
  padding-inline: var(--product-gutter, 1.25rem);
}
.page-product main > section > .container {
  padding-inline: 0;
}
#what-it-replaces,
#one-system,
#capabilities,
#faq {
  padding-block: clamp(3.5rem, 8vw, 6rem); 
}
#what-it-does {
  padding-block: clamp(3rem, 7vw, 5.5rem); 
}
#departments,
#integrations,
#benefits {
  padding-block: clamp(3.5rem, 8vw, 6rem); 
  background-color: var(--color-surface-subtle, #f7fafc);
  border-block: 1px solid var(--color-border-faint, #eef2f6);
}
#connected {
  padding-block: clamp(3.5rem, 8vw, 5.75rem); 
}
#related {
  padding-block: clamp(3.5rem, 8vw, 5.75rem); 
  background-color: var(--color-surface-subtle, #f7fafc);
  border-block-start: 1px solid var(--color-border-faint, #eef2f6);
}
.page-product main {
  max-width: none;
  padding-inline: 0;
  padding-block-start: 0;
  padding-block-end: clamp(3.5rem, 8vw, 6rem);
}
.product-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.375rem) clamp(3.0625rem, 8vw, 5.25rem);
  background: linear-gradient(
    180deg,
    var(--color-surface-subtle, #f7fafc) 0%,
    var(--color-bg, #ffffff) 100%
  );
  border-block-end: 1px solid var(--color-border-faint, #eef2f6);
}
.product-hero::before {
  content: "";
  position: absolute;
  top: -200px;
  inset-inline-end: -140px;
  width: 660px;
  height: 660px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(39 165 247 / 13%) 0%,
    rgb(39 165 247 / 0%) 68%
  );
  pointer-events: none;
}
.product-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
  gap: 3.75rem; 
  align-items: center;
}
.product-hero img {
  width: 100%;
  border-radius: var(--radius-image, 32px);
}
.product-hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.125rem); 
  line-height: 1.07;
  letter-spacing: -0.032em;
}
.product-hero[data-product='property-management-system'] h1 {
  font-size: clamp(2.125rem, 5.8vw, 3.5rem); 
  line-height: 1.06;
}
.product-hero[data-product='booking-engine'] h1 {
  font-size: clamp(2.125rem, 5.6vw, 3.375rem); 
  line-height: 1.06;
}
.product-hero-copy > p {
  max-width: 31em;
  color: var(--color-text-soft, #5b6570);
  font-size: 1.1875rem;
  line-height: var(--leading-normal, 1.6);
}
.product-hero .stats-callout:empty {
  display: none;
}
.product-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  margin-block-start: var(--space-5, 1.5rem);
}
.page-product .product-hero-actions .btn-primary {
  background-color: var(--color-brand, #27a5f7);
  border-color: var(--color-brand, #27a5f7);
  color: var(--color-brand-contrast, #ffffff);
  box-shadow: 0 6px 18px rgb(39 165 247 / 28%);
}
.page-product .product-hero-actions .btn-primary:hover {
  box-shadow: var(--shadow-btn-primary-hover, 0 10px 24px -8px rgb(39 165 247 / 60%));
}
.product-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 18px clamp(18px, 4vw, 40px); 
  margin-block-start: var(--space-5, 1.5rem);
}
.product-hero-stats .stat-num {
  margin-block: 0;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.25rem, 3.2vw, 1.875rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand-navy, #0f2438);
}
.product-hero-stats .stat-label {
  margin-block: var(--space-1, 0.25rem) 0;
  color: var(--color-text-hint, #8a94a0);
  font-size: var(--text-sm, 0.875rem);
}
.product-hero-badge-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  margin-block-end: var(--space-2, 0.5rem);
}
.product-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm, 12px);
  background-color: var(--color-tint-accent, #eaf6fe);
  color: var(--color-brand-strong, #1d6493);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
}
.product-hero-placeholder {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md, 16px);
  background-color: var(--color-bg, #ffffff);
  box-shadow: var(--shadow-2, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}
.placeholder-titlebar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background-color: var(--color-surface-subtle, #f7fafc);
  border-block-end: 1px solid var(--color-border-subtle, #e6ebf0);
}
.placeholder-dots {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-inline-end: 32px;
  border-radius: 50%;
  background-color: #e0e6ec;
  box-shadow:
    16px 0 0 #e0e6ec,
    32px 0 0 #e0e6ec;
}
.placeholder-titlebar-title {
  overflow: hidden;
  color: var(--color-text-muted, #525357);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.placeholder-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 0.75rem);
  min-height: 14rem;
  padding: var(--space-6, 2rem);
  background: repeating-linear-gradient(
    45deg,
    #fafcfd,
    #fafcfd 12px,
    #f4f8fb 12px,
    #f4f8fb 24px
  );
  color: var(--color-text-muted, #525357);
  font-size: var(--text-sm, 0.875rem);
  text-align: center;
}
.placeholder-screen-label {
  font-weight: var(--weight-bold, 700);
}
.placeholder-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: 0.375rem 0.875rem; 
  border-radius: var(--radius-pill, 999px);
  background-color: rgba(48, 166, 245, 0.14);
  border: 1px solid rgba(48, 166, 245, 0.3);
  color: var(--color-text-inverse-muted, #9fb3c6);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.04em;
}
.placeholder-badge-dot {
  flex-shrink: 0;
  width: 0.3125rem; 
  height: 0.3125rem;
  border-radius: 50%;
  background-color: var(--color-brand, #27a5f7);
}
.placeholder-caption {
  margin-block: 0;
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
  color: var(--color-text-muted, #525357);
  font-size: var(--text-sm, 0.875rem);
  text-align: center;
}
.product-feature-strip {
  grid-column: 1 / -1;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
.product-hero-note {
  max-width: 34em;
  margin-block-start: var(--space-5, 1.5rem);
}
.product-hero-note .placeholder-badge {
  color: var(--color-brand-strong, #1d6493);
}
.product-hero-note > p:last-child {
  margin-block: var(--space-3, 0.75rem) 0;
  color: var(--color-text-soft, #5b6570);
  font-size: 0.8125rem;
  line-height: var(--leading-normal, 1.6);
}
.product-feature-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.product-feature-row:nth-child(even) .product-feature-art {
  order: -1;
}
.product-feature-art > svg {
  display: block;
  width: 100%;
  height: auto;
}
.product-feature-copy > h3 {
  margin-block: 0;
  font-size: clamp(1.3125rem, 3.2vw, 1.75rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.product-feature-copy > p {
  max-width: 34em;
  margin-block: var(--space-3, 0.75rem) 0;
  color: var(--color-text-soft, #5b6570);
  font-size: var(--text-lead, 1.0625rem);
  line-height: var(--leading-normal, 1.6);
}
.capabilities-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px; 
}
.capabilities-header-copy {
  max-width: 30em;
}
.capabilities-aside {
  margin-block: 0;
  font-size: var(--text-md, 0.9375rem);
  color: var(--color-text-hint, #8a94a0);
}
.capability-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px; 
  margin-block-start: var(--space-6, 2rem); 
}
.capability-tabs label {
  padding: 10px 17px; 
  border: 1px solid var(--color-border-muted, #e1e8ef);
  border-radius: var(--radius-full, 9999px);
  background-color: var(--color-bg, #ffffff);
  color: var(--color-text-soft, #5b6570);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}
.capability-tabs input:checked + label {
  background-color: var(--color-brand-navy, #0f2438);
  border-color: var(--color-brand-navy, #0f2438);
  color: var(--color-text-inverse, #ffffff);
}
.capability-tabs input:focus-visible + label {
  outline: 2px solid var(--color-focus, #30a6f5);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-focus-ring, #1d6493);
}
.capability-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
  gap: clamp(1.75rem, 4vw, 3.25rem); 
  align-items: center;
  margin-block-start: var(--space-6, 2rem); 
  padding: clamp(1.75rem, 4vw, 2.75rem); 
  border-radius: var(--radius-md, 16px);
  background-color: var(--color-surface-subtle, #f7fafc);
  border: 1px solid var(--color-border-subtle, #e6ebf0);
}
#capabilities:has(input:checked) .capability-panel {
  display: none;
}
#capabilities:has(#cap-0:checked) #cap-panel-0,
#capabilities:has(#cap-1:checked) #cap-panel-1,
#capabilities:has(#cap-2:checked) #cap-panel-2,
#capabilities:has(#cap-3:checked) #cap-panel-3,
#capabilities:has(#cap-4:checked) #cap-panel-4,
#capabilities:has(#cap-5:checked) #cap-panel-5,
#capabilities:has(#cap-6:checked) #cap-panel-6,
#capabilities:has(#cap-7:checked) #cap-panel-7,
#capabilities:has(#cap-8:checked) #cap-panel-8,
#capabilities:has(#cap-9:checked) #cap-panel-9,
#capabilities:has(#cap-10:checked) #cap-panel-10,
#capabilities:has(#cap-11:checked) #cap-panel-11 {
  display: grid;
}
.capability-rule {
  display: block;
  width: 24px;
  height: 6px;
  border-radius: var(--radius-full, 9999px);
  background-color: var(--color-brand, #27a5f7);
}
.capability-panel-copy h3 {
  margin-block-start: 18px; 
  font-size: clamp(1.3125rem, 3vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.capability-panel-copy > p {
  margin-block-start: 14px; 
  max-width: none; 
  font-size: var(--text-lead, 1.0625rem);
  line-height: var(--leading-normal, 1.6);
  color: var(--color-text-soft, #5b6570);
}
.capability-points {
  display: grid;
  gap: 10px; 
  list-style: none;
  margin-block-start: 22px; 
  max-width: none;
  padding-inline-start: 0;
  font-size: var(--text-md, 0.9375rem);
  line-height: 1.5;
  color: var(--color-text-soft, #5b6570);
}
.capability-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-block-start: 0;
}
.capability-points li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-block-start: var(--space-2, 0.5rem);
  border-radius: 50%;
  background-color: var(--color-brand, #27a5f7);
}
.capability-plate {
  width: 100%;
  height: auto;
  aspect-ratio: 411 / 350;
}
.benefits-intro {
  max-width: var(--measure-intro, 34rem);
}
.benefits-intro > h2 {
  margin-block-start: 0;
}
#benefits .section-lede {
  max-width: none;
  margin-block: var(--space-4, 1rem) 0;
  color: var(--color-text-soft, #5b6570);
  font-size: var(--text-lead, 1.0625rem);
  line-height: var(--leading-normal, 1.6);
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.25rem), 1fr)); 
  gap: 18px; 
  margin-block-start: 40px; 
}
#benefits article {
  display: flex;
  flex-direction: column;
  gap: 10px; 
  padding: 26px 26px 28px; 
  border-radius: 14px; 
  box-shadow: 0 1px 2px rgb(15 36 56 / 4%); 
}
#benefits article:hover {
  box-shadow: 0 1px 2px rgb(15 36 56 / 4%);
  border-color: var(--color-border-subtle, #e6ebf0);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  #benefits article:hover {
    transform: none;
  }
}
.benefit-num {
  color: var(--color-brand, #27a5f7);
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: 0.8125rem; 
  font-weight: var(--weight-bold, 700);
}
#benefits article h3 {
  margin-block: 0;
  font-size: 1.125rem; 
  line-height: 1.28; 
  letter-spacing: -0.012em;
}
#benefits article > p {
  margin-block: 0;
  max-width: none; 
  color: var(--color-text-soft, #5b6570);
  font-size: var(--text-md, 0.9375rem);
  line-height: var(--leading-normal, 1.6);
}
#benefits article img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md, 16px);
}
#what-it-replaces .replaces-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5, 1.5rem);
  margin-block-start: 2.75rem;
  align-items: stretch;
}
#what-it-replaces > .container > h2,
#what-it-replaces > .container > p {
  max-width: 36rem;
}
.replaces-column {
  background-color: var(--color-surface-subtle, #f7fafc);
  border: 1px solid var(--color-border-subtle, #e6ebf0);
  border-radius: var(--radius-md, 16px);
  padding: 2.125rem 2.25rem;
}
.replaces-column h3 {
  margin-block: 0;
  font-size: 1.125rem;
  letter-spacing: normal;
  color: var(--color-brand-navy, #0f2438);
}
.replaces-column ul {
  list-style: none;
  padding-inline-start: 0;
  margin-block: 1.375rem 0;
  display: grid;
  gap: var(--space-3, 0.75rem);
}
.replaces-column li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
  margin-block-start: 0;
  padding-block-end: var(--space-3, 0.75rem);
  border-block-end: 1px solid var(--color-border-subtle, #e6ebf0);
  font-size: var(--text-md, 0.9375rem);
  line-height: 1.5;
  color: var(--color-text-soft, #5b6570);
}
.replaces-column li::before {
  content: '\00B7';
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-block-start: 1px;
  border-radius: 50%;
  background: var(--color-border-subtle, #e6ebf0);
  color: var(--color-text-hint, #8a94a0);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
}
.replaces-column > p:last-child {
  margin-block: 1.25rem 0;
  color: var(--color-text-hint, #8a94a0);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.55;
}
.replaces-column-after {
  background-color: var(--color-brand-navy, #0f2438);
  border: 0;
  color: var(--color-text-inverse, #ffffff);
}
.replaces-column-after h3 {
  color: var(--color-text-inverse, #ffffff);
}
.replaces-column-after li {
  border-block-end-color: rgba(255, 255, 255, 0.12);
  color: #d6e2ed;
}
.replaces-column-after > p:last-child {
  color: var(--color-text-inverse-muted, #9fb3c6);
}
.replaces-column-after li::before {
  content: '\2713';
  background: var(--color-brand, #27a5f7);
  color: var(--color-text-inverse, #ffffff);
  font-size: 0.6875rem;
}
#integrations article h3 {
  margin-block: 0;
}
.departments-intro {
  max-width: 34em;
}
.departments-intro h2 {
  margin-block-start: 14px; 
}
.departments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px; 
  margin-block-start: 44px; 
}
#departments article {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 30px; 
  border-radius: 14px; 
  box-shadow: 0 1px 2px rgb(15 36 56 / 4%); 
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
#departments article:hover {
  box-shadow: 0 18px 36px -16px rgb(15 36 56 / 20%);
  border-color: var(--color-tint-accent-border, #cfe9fc);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  #departments article:hover {
    transform: translateY(-4px);
  }
}
.department-abbr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px; 
  height: 34px;
  border-radius: 9px; 
  background-color: var(--color-tint-accent, #eaf6fe);
  color: var(--color-brand-strong, #1d6493);
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
}
#departments article h3 {
  margin-block: var(--space-4, 1rem) 0;
  font-size: 18px; 
}
#departments article p {
  margin-block: var(--space-2, 0.5rem) 0;
  font-size: var(--text-md, 0.9375rem);
  line-height: 1.55; 
  color: var(--color-text-soft, #5b6570);
}
#departments article ul {
  display: grid;
  gap: 9px; 
  list-style: none;
  margin-block: 18px 0; 
  padding-inline-start: 0;
  padding-block-start: var(--space-4, 1rem);
  border-block-start: 1px solid #f0f4f8;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.5;
  color: var(--color-text-soft, #5b6570);
}
#departments article li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-block-start: 0;
}
#departments article li::before {
  content: "";
  flex: none;
  width: 5px; 
  height: 5px;
  margin-block-start: var(--space-2, 0.5rem);
  border-radius: 50%;
  background-color: var(--color-brand, #27a5f7);
}
#integrations {
  display: block;
}
.integrations-intro {
  max-width: 36rem;
}
.integrations-intro .eyebrow,
.faq-intro .eyebrow {
  margin-block-end: 0;
}
.integrations-intro h2,
.faq-intro h2 {
  margin-block: 0.875rem 0; 
}
.integrations-intro > p:last-child,
.faq-intro > p:last-child {
  font-size: var(--text-lead, 1.0625rem);
  color: var(--color-text-soft, #5b6570);
}
.integrations-intro > p:last-child {
  line-height: var(--leading-normal, 1.6);
}
.integrations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 20px; 
  margin-block-start: 44px; 
}
#integrations article {
  padding: 26px 26px 28px;
  border-radius: 14px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
#integrations article:hover {
  box-shadow: none;
  border-color: var(--color-border-subtle, #e6ebf0);
}
#integrations article h3 {
  margin-block: 0;
  font-size: var(--text-lead, 1.0625rem);
  letter-spacing: normal;
}
#integrations article > p {
  margin-block: var(--space-2, 0.5rem) 0;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.55;
  color: var(--color-text-soft, #5b6570);
}
#integrations .integration-slots {
  margin-block-start: 18px;
}
#integrations .integration-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px; 
  padding: 0 14px; 
  border-radius: 8px;
  background: repeating-linear-gradient(
    45deg,
    #fafcfd,
    #fafcfd 8px,
    #f2f7fb 8px,
    #f2f7fb 16px
  );
  border: 1px dashed #dce7f1; 
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-medium, 500);
  color: #98a2ae;
}
#integrations .integration-slot-logo {
  background: #fafcfd; 
  border-style: solid;
}
#integrations .integrations-note {
  margin-block-start: 26px; 
}
#faq > .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.faq-intro h2 {
  font-size: clamp(1.5rem, 4vw, 2.375rem);
  line-height: 1.14;
}
.faq-intro > p:last-child {
  line-height: 1.65;
}
.faq-list {
  display: flex;
  flex-direction: column;
}
.faq-item {
  padding-block: 22px; 
  border-block-end: 1px solid var(--color-border-subtle, #e6ebf0);
}
.faq-item h3 {
  margin-block: 0;
  font-size: var(--text-base, 1rem);
  letter-spacing: normal;
}
.faq-item p {
  margin-block: 9px 0;
  font-size: var(--text-md, 0.9375rem);
  line-height: var(--leading-normal, 1.6);
  color: var(--color-text-soft, #5b6570);
}
#connected > .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
  gap: clamp(2.25rem, 5vw, 4rem); 
  align-items: center;
}
#connected .connected-copy > p:not(.eyebrow) {
  max-width: 30em;
  margin-block-start: var(--space-4, 1rem);
  color: var(--color-text-soft, #5b6570);
  font-size: var(--text-lead, 1.0625rem);
  line-height: 1.65; 
}
#connected .connected-copy > h2 {
  margin-block-start: 0;
  font-size: clamp(1.5rem, 4vw, 2.375rem);
}
.connected-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px; 
  margin-block-start: 28px; 
}
.connected-links a {
  padding: 14px 28px;
  border: 1px solid #d8e1e9; 
  border-radius: var(--radius-full, 9999px);
  color: var(--color-brand-navy, #0f2438);
  font-size: var(--text-md, 0.9375rem);
  font-weight: var(--weight-semibold, 600);
  text-decoration: none;
  transition: border-color 0.18s ease;
}
.connected-links a:hover {
  border-color: var(--color-brand, #27a5f7);
  color: var(--color-brand-navy, #0f2438);
}
.connected-sync {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); 
  gap: 14px; 
  list-style: none;
  margin-block: 0;
  max-width: none;
  padding-inline-start: 0;
}
.connected-sync li {
  margin-block-start: 0;
  padding: 20px 20px 22px; 
  border-radius: var(--radius-sm, 12px);
  background-color: var(--color-surface-subtle, #f7fafc);
  border: 1px solid var(--color-border-subtle, #e6ebf0);
}
.connected-sync-abbr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding-inline: 9px; 
  border-radius: 7px; 
  background-color: var(--color-tint-accent, #eaf6fe);
  color: var(--color-brand-strong, #1d6493);
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: 0.6875rem; 
  font-weight: var(--weight-bold, 700);
}
.connected-sync-name {
  display: block;
  margin-block-start: var(--space-3, 0.75rem); 
  color: var(--color-brand-navy, #0f2438);
  font-size: var(--text-md, 0.9375rem);
  font-weight: var(--weight-semibold, 600);
  line-height: 1.45; 
}
.related-intro {
  max-width: var(--measure-intro, 34rem);
}
#related > .container > .related-intro > h2 {
  margin-block: 0;
}
#related > .container > .related-intro > .related-lead {
  max-width: none;
  margin-block: var(--space-4, 1rem) 0;
  color: var(--color-text-soft, #5b6570);
  font-size: var(--text-lead, 1.0625rem);
  line-height: var(--leading-normal, 1.6);
}
.related-list {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 20px; 
  margin-block-start: 40px; 
  padding: 0;
  list-style: none;
}
.related-list li {
  margin-block-start: 0;
  display: grid;
}
#related > .related-intro > .eyebrow {
  color: var(--color-brand, #27a5f7);
}
.related-list a {
  display: flex;
  flex-direction: column;
  gap: 10px; 
  height: 100%;
  padding: 26px 24px 28px; 
  border-radius: 14px; 
  text-decoration: none;
}
.related-list a .product-hero-badge {
  width: 34px;
  height: 34px;
  border-radius: 9px; 
  font-family: var(--font-display, var(--font-heading, sans-serif));
}
.related-name {
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: var(--text-lead, 1.0625rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand-navy, #0f2438);
}
.related-line {
  color: var(--color-text-soft, #5b6570);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-normal, 400);
  line-height: 1.55; 
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  #related .related-list a:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -16px rgb(15 36 56 / 20%);
    border-color: var(--color-tint-accent-border, #cfe9fc);
  }
}
#share-line {
  padding-block: 0 clamp(3rem, 7vw, 5.5rem);
}
#what-it-does:has(+ #share-line) {
  padding-block-end: 0;
}
#share-line > .container {
  margin-block-start: var(--space-6, 2rem); 
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5, 1.5rem);
  padding: var(--space-6, 2rem);
  border-radius: var(--radius-md, 16px);
  background-color: var(--color-surface-subtle, #f7fafc);
  border: 1px solid var(--color-border-subtle, #e6ebf0);
}
#share-line p {
  margin-block: 0;
  max-width: 44em;
  color: var(--color-text-soft, #5b6570);
  font-size: var(--text-md, 0.9375rem);
  line-height: 1.55;
}
#share-line a {
  flex-shrink: 0;
  color: var(--color-brand-strong, #1d6493);
  font-weight: var(--weight-bold, 700);
  text-decoration: none;
}
#share-line a:hover {
  color: var(--color-brand-deep, #134262);
  text-decoration: underline;
}
.capability-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px; 
  margin-block-start: var(--space-5, 1.5rem); 
  padding: 22px 26px; 
  border-radius: var(--radius-sm, 12px);
  background-color: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border-subtle, #e6ebf0);
}
.capability-share p {
  margin-block: 0;
  max-width: 44em;
  font-size: var(--text-md, 0.9375rem);
  line-height: 1.55; 
  color: var(--color-text-soft, #5b6570);
}
.capability-share a {
  flex: none;
  font-size: var(--text-md, 0.9375rem);
  font-weight: var(--weight-semibold, 600);
  text-decoration: none;
}
.capability-share a:hover {
  text-decoration: underline;
}
#share-line a::after,
.capability-share a::after {
  content: "\2192";
  margin-inline-start: var(--space-2, 0.5rem);
}
.page-product #closing-cta {
  max-width: min(var(--container-max, 77.5rem), 100% - 2 * var(--product-gutter, 1.25rem));
  margin-inline: auto;
  margin-block-start: clamp(3.5rem, 8vw, 6rem);
}
#share-line + #closing-cta {
  margin-block-start: 0;
}
#what-it-does > .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 20px;
}
#what-it-does > .container > .section-intro {
  grid-column: 1 / -1;
  max-width: 34em;
  margin-block: 0;
}
#what-it-does > .container > .section-intro > h2 {
  margin-block: 0;
  max-width: none;
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.14;
}
#what-it-does article {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
#what-it-does article h3 {
  margin-block: 0;
  font-size: 17px;
}
#what-it-does article > p {
  margin-block: 0;
  font-size: 15px;
  color: var(--color-text-muted, #525357);
  line-height: var(--leading-prose, 1.625);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  #what-it-does article:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -16px rgba(15, 36, 56, 0.18);
  }
}
.placeholder-titlebar-title {
  font-weight: var(--weight-medium, 500);
  color: var(--color-text-hint, #8a94a0);
}
.placeholder-screen-label {
  font-weight: var(--weight-semibold, 600);
  color: var(--color-text-soft, #5b6570);
}
.product-hero-placeholder .placeholder-screen-label {
  font-size: var(--text-md, 0.9375rem);
}
.placeholder-caption {
  font-size: 0.8125rem;
  color: var(--color-text-hint, #8a94a0);
}
.page-product .one-system-diagram-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}
.page-product .one-system-diagram {
  position: relative;
  width: 900px;
  height: 440px;
  margin: var(--space-7, 3rem) auto 0;
}
@media (max-width: 960px) {
  .page-product .one-system-diagram {
    zoom: 0.66;
  }
}
.page-product .one-system-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.page-product .one-system-connectors-tall {
  display: none;
}
.page-product .one-system-connector-base {
  fill: none;
  stroke: var(--color-border-subtle, #e6ebf0);
  stroke-width: 1.5px;
}
.page-product .one-system-connector-dash {
  fill: none;
  stroke: var(--color-brand, #27a5f7);
  stroke-width: 2.5px;
  stroke-dasharray: 5 12;
  stroke-linecap: round;
}
@media (prefers-reduced-motion: no-preference) {
  .page-product .one-system-dash-1,
  .page-product .one-system-dash-2,
  .page-product .one-system-dash-3,
  .page-product .one-system-dash-4 {
    animation: one-system-dash 1.9s linear infinite;
  }
  .page-product .one-system-dash-2 {
    animation-delay: -0.5s;
  }
  .page-product .one-system-dash-3 {
    animation-delay: -0.95s;
  }
  .page-product .one-system-dash-4 {
    animation-delay: -1.4s;
  }
}
@keyframes one-system-dash {
  to {
    stroke-dashoffset: -68;
  }
}
.page-product .one-system-event {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-full, 9999px);
  background-color: var(--color-bg, #ffffff);
  border: 1px solid var(--color-tint-accent-border, #cfe9fc);
  box-shadow:
    0 4px 12px -6px rgba(15, 36, 56, 0.3),
    0 0 14px 2px rgba(48, 166, 245, 0.25);
  font-size: 0.625rem;
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand-strong, #1d6493);
  white-space: nowrap;
  offset-rotate: 0deg;
  offset-distance: 45%;
  offset-anchor: 50% 50%;
  pointer-events: none;
}
.page-product .one-system-event span {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-brand, #27a5f7);
}
.page-product .one-system-event-0 {
  offset-path: path('M222 104 C320 104 330 190 366 206');
}
.page-product .one-system-event-1 {
  offset-path: path('M222 336 C320 336 330 250 366 234');
}
.page-product .one-system-event-2 {
  offset-path: path('M678 104 C580 104 570 190 534 206');
}
.page-product .one-system-event-3 {
  offset-path: path('M678 336 C580 336 570 250 534 234');
}
@media (prefers-reduced-motion: no-preference) {
  .page-product .one-system-event {
    animation: one-system-event 3.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  }
  .page-product .one-system-event-1 {
    animation-delay: -0.85s;
  }
  .page-product .one-system-event-2 {
    animation-delay: -1.7s;
  }
  .page-product .one-system-event-3 {
    animation-delay: -2.55s;
  }
}
@keyframes one-system-event {
  0% {
    offset-distance: 15%;
    opacity: 0%;
  }
  25% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  100% {
    offset-distance: 75%;
    opacity: 0%;
  }
}
.page-product .one-system-glow,
.page-product .one-system-glow-rim {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.page-product .one-system-glow {
  inset-inline-start: 290px;
  top: 60px;
  width: 320px;
  height: 320px;
  background: radial-gradient(
    circle,
    rgba(48, 166, 245, 0.3) 0%,
    rgba(48, 166, 245, 0.16) 42%,
    rgba(48, 166, 245, 0) 70%
  );
  filter: blur(14px);
}
.page-product .one-system-glow-rim {
  inset-inline-start: 345px;
  top: 115px;
  width: 210px;
  height: 210px;
  background: radial-gradient(
    circle,
    rgba(48, 166, 245, 0) 58%,
    rgba(48, 166, 245, 0.34) 76%,
    rgba(48, 166, 245, 0.06) 88%,
    rgba(48, 166, 245, 0) 96%
  );
  filter: blur(2px);
}
@media (prefers-reduced-motion: no-preference) {
  .page-product .one-system-glow {
    animation: one-system-glow 3.4s ease-in-out infinite;
  }
  .page-product .one-system-glow-rim {
    animation: one-system-glow-rim 3.4s ease-in-out infinite;
  }
}
@keyframes one-system-glow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.09);
    opacity: 0.95;
  }
}
@keyframes one-system-glow-rim {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.035);
    opacity: 1;
  }
}
.page-product .one-system-flow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-product .one-system-diagram--live .one-system-flow-canvas {
  visibility: visible;
}
.page-product .one-system-diagram--live .one-system-connector-dash {
  visibility: hidden;
}
.page-product .one-system-node,
.page-product .one-system-module,
.page-product .one-system-event,
.page-product .one-system-ticker {
  z-index: 1;
}
.page-product .one-system-node {
  position: absolute;
  inset-inline-start: 360px;
  top: 130px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 30%,
    var(--color-brand-strong, #1d6493),
    #0b1b2b
  );
  box-shadow:
    0 0 0 10px rgba(48, 166, 245, 0.07),
    0 22px 46px -18px rgba(15, 36, 56, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-inverse, #ffffff);
}
@media (prefers-reduced-motion: no-preference) {
  .page-product .one-system-node {
    animation: one-system-float 7s ease-in-out infinite;
  }
}
@keyframes one-system-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
.page-product .one-system-node-name {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: var(--weight-semibold, 600);
  color: var(--color-text-inverse, #ffffff);
}
.page-product .one-system-node-sub {
  margin: 0.4375rem 0 0;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9fd5fa;
  max-width: 124px;
  line-height: 1.35;
}
.page-product .one-system-node-live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin: var(--space-3, 0.75rem) 0 0;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full, 9999px);
  background-color: rgba(48, 166, 245, 0.16);
  border: 1px solid rgba(48, 166, 245, 0.32);
  font-size: 0.625rem;
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.06em;
  color: #9fd5fa;
}
.page-product .one-system-node-live span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-brand, #27a5f7);
}
@media (prefers-reduced-motion: no-preference) {
  .page-product .one-system-node-live span {
    animation: one-system-pulse 1.8s ease-in-out infinite;
  }
}
@keyframes one-system-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.page-product .one-system-module {
  position: absolute;
  width: 222px;
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
  border-radius: var(--radius-sm, 12px);
  background-color: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border-muted, #e1e8ef);
  box-shadow: 0 8px 22px -14px rgba(15, 36, 56, 0.24);
  transition:
    transform var(--transition-base, 0.3s ease-in-out),
    box-shadow var(--transition-base, 0.3s ease-in-out),
    border-color var(--transition-base, 0.3s ease-in-out);
}
.page-product .one-system-module-0 {
  inset-inline-start: 0;
  top: 60px;
}
.page-product .one-system-module-1 {
  inset-inline-start: 0;
  top: 292px;
}
.page-product .one-system-module-2 {
  inset-inline-end: 0;
  top: 60px;
}
.page-product .one-system-module-3 {
  inset-inline-end: 0;
  top: 292px;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .page-product .one-system-module-0:hover,
  .page-product .one-system-module-1:hover {
    animation: none;
    transform: translateX(-4px);
    box-shadow: 0 14px 30px -14px rgba(15, 36, 56, 0.3);
    border-color: var(--color-tint-accent-border, #cfe9fc);
  }
  .page-product .one-system-module-2:hover,
  .page-product .one-system-module-3:hover {
    animation: none;
    transform: translateX(4px);
    box-shadow: 0 14px 30px -14px rgba(15, 36, 56, 0.3);
    border-color: var(--color-tint-accent-border, #cfe9fc);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .page-product .one-system-module {
    animation: one-system-float 6.4s ease-in-out infinite;
  }
  .page-product .one-system-module-1 {
    animation-delay: -1.6s;
  }
  .page-product .one-system-module-2 {
    animation-delay: -3.2s;
  }
  .page-product .one-system-module-3 {
    animation-delay: -4.8s;
  }
}
.page-product .one-system-module-abbr {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background-color: var(--color-tint-accent, #eaf6fe);
  color: var(--color-brand-strong, #1d6493);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
}
.page-product .one-system-module-text {
  min-width: 0;
}
.page-product .one-system-module-label {
  display: block;
  font-size: 0.9375rem; 
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand-navy, #0f2438);
}
.page-product .one-system-module-sub {
  display: block;
  margin-block-start: 0.125rem;
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #525357);
}
.page-product .one-system-ticker {
  position: absolute;
  inset-inline-start: 50%;
  bottom: -0.25rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin: 0;
  padding: 0.4375rem 1rem;
  border-radius: var(--radius-full, 9999px);
  background-color: var(--color-surface-subtle, #f7fafc);
  border: 1px solid var(--color-border-muted, #e1e8ef);
  max-width: none;
}
.page-product .one-system-ticker-dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-brand, #27a5f7);
}
.page-product .one-system-ticker-lines {
  display: grid;
  justify-items: center;
  row-gap: 0.125rem;
}
.page-product .one-system-ticker-line {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-medium, 500);
  color: var(--color-text-muted, #525357);
  white-space: nowrap;
  text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .page-product .one-system-ticker-dot {
    animation: one-system-pulse 1.8s ease-in-out infinite;
  }
  .page-product .one-system-ticker-line {
    grid-area: 1 / 1;
    animation: one-system-ticker 10.2s linear infinite;
  }
  .page-product .one-system-ticker-line:nth-child(2) {
    animation-delay: -6.8s;
  }
  .page-product .one-system-ticker-line:nth-child(3) {
    animation-delay: -3.4s;
  }
}
@keyframes one-system-ticker {
  0% {
    opacity: 0%;
  }
  3% {
    opacity: 1;
  }
  29% {
    opacity: 1;
  }
  33% {
    opacity: 0%;
  }
  100% {
    opacity: 0%;
  }
}
@media (max-width: 680px) {
  .page-product .one-system-diagram {
    width: 330px;
    height: 580px;
    zoom: 1;
  }
  .page-product .one-system-connectors-wide {
    display: none;
  }
  .page-product .one-system-connectors-tall {
    display: block;
  }
  .page-product .one-system-glow {
    inset-inline-start: 25px;
    top: 125px;
    width: 280px;
    height: 280px;
  }
  .page-product .one-system-glow-rim {
    inset-inline-start: 73px;
    top: 173px;
    width: 184px;
    height: 184px;
  }
  .page-product .one-system-node {
    inset-inline-start: 87px;
    top: 187px;
    width: 156px;
    height: 156px;
  }
  .page-product .one-system-module {
    width: 152px;
    flex-direction: column;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.6875rem 0.5rem 0.75rem;
    text-align: center;
  }
  .page-product .one-system-module-abbr {
    width: 26px;
    height: 26px;
    font-size: 0.6875rem;
  }
  .page-product .one-system-module-label {
    font-size: 0.8125rem;
  }
  .page-product .one-system-module-sub {
    font-size: 0.6875rem;
  }
  .page-product .one-system-module-0,
  .page-product .one-system-module-1 {
    top: 0;
  }
  .page-product .one-system-module-2,
  .page-product .one-system-module-3 {
    top: 452px;
    inset-inline-end: auto;
  }
  .page-product .one-system-module-1,
  .page-product .one-system-module-3 {
    inset-inline-start: 178px;
  }
  .page-product .one-system-event-0 {
    offset-path: path('M76 82 C76 150 90 172 110 205');
  }
  .page-product .one-system-event-1 {
    offset-path: path('M254 82 C254 150 240 172 220 205');
  }
  .page-product .one-system-event-2 {
    offset-path: path('M76 448 C76 380 90 358 110 325');
  }
  .page-product .one-system-event-3 {
    offset-path: path('M254 448 C254 380 240 358 220 325');
  }
}
.page-product .included-not-integrated {
  margin-block-start: var(--space-8, 4rem);
  padding: var(--space-6, 2rem);
  border-radius: var(--radius-md, 16px);
  background-color: var(--color-surface-subtle, #f7fafc);
  border: 1px solid var(--color-border-subtle, #e6ebf0);
}
.page-product .included-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4, 1rem);
  list-style: none;
  padding: 0;
  max-width: none;
  margin-block: var(--space-5, 1.5rem) 0;
}
@media (min-width: 1024px) {
  .page-product .included-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}
.page-product .included-grid li {
  margin-block-start: 0;
}
.page-service h1,
.page-service h2,
.page-service h3,
.page-service-index h1,
.page-service-index h2,
.page-service-index h3 {
  font-family: var(--font-display, var(--font-heading, sans-serif));
}
.page-service h2,
.page-service h3,
.page-service-index h3 {
  font-weight: var(--weight-semibold, 600);
  letter-spacing: -0.015em;
  color: var(--color-brand-navy, #0f2438);
}
.page-service h2 {
  letter-spacing: -0.025em;
}
.service-list {
  margin-block-start: var(--space-section, 4rem);
}
.page-service main,
.page-service-index main {
  max-width: none;
  padding-inline: 0;
  padding-block-start: 0;
}
.page-service #hero,
.page-service-index #hero {
  max-width: none;
}
.service-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 6vw, 4.75rem) clamp(2.75rem, 6vw, 4.5rem);
  background: linear-gradient(
    180deg,
    var(--color-surface-subtle, #f7fafc) 0%,
    var(--color-bg, #ffffff) 100%
  );
  border-block-end: 1px solid var(--color-border-faint, #eef2f6);
}
.page-service-index .service-hero {
  padding-block-start: clamp(3rem, 7vw, 5.25rem);
}
.service-hero::before {
  content: "";
  position: absolute;
  top: -200px;
  inset-inline-end: -140px;
  width: 660px;
  height: 660px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(39 165 247 / 13%) 0%,
    rgb(39 165 247 / 0%) 68%
  );
  pointer-events: none;
}
.service-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
  gap: 3.75rem; 
  align-items: center;
}
.service-hero-copy {
  min-inline-size: 0;
}
.service-hero img {
  width: 100%;
  border-radius: var(--radius-image, 32px);
}
.service-hero h1 {
  margin-block: 1.125rem 0;
  max-width: 15em;
  font-size: clamp(2rem, 5.2vw, 3.125rem);
  line-height: 1.07;
  letter-spacing: -0.032em;
}
.page-service-index .service-hero h1 {
  max-width: 16em;
  font-size: clamp(2.125rem, 5.6vw, 3.375rem);
  line-height: 1.06;
}
.service-hero p:not(.eyebrow) {
  margin-block: 1.25rem 0;
  max-width: 34em;
  font-size: 1.1875rem; 
  line-height: 1.6;
  color: var(--color-text-soft, #5b6570);
}
.service-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  margin-block-start: var(--space-6, 2rem);
}
.page-service .service-hero-actions .btn-primary {
  background-color: var(--color-brand, #27a5f7);
  border-color: var(--color-brand, #27a5f7);
  color: var(--color-brand-contrast, #ffffff);
  box-shadow: 0 6px 18px rgb(39 165 247 / 28%);
}
.page-service .service-hero-actions .btn-primary:hover {
  box-shadow: var(--shadow-btn-primary-hover, 0 10px 24px -8px rgb(39 165 247 / 60%));
}
.service-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
  gap: 1.25rem; 
}
.service-list .card {
  display: flex;
  flex-direction: column;
  padding-block-end: 2.125rem; 
  border-color: var(--color-border-subtle, #e6ebf0);
}
.service-list .card h3 {
  margin-block: 1.125rem 0;
  font-size: var(--text-lg, 1.25rem);
  line-height: 1.2;
}
.service-list .card h3 a {
  text-decoration: none;
}
.service-list .card h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.service-list .card p {
  margin-block: 0.625rem 0;
  font-size: var(--text-md, 0.9375rem); 
  line-height: 1.6;
  color: var(--color-text-soft, #5b6570);
}
.service-abbr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: start;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5625rem; 
  background-color: var(--color-tint-accent, #eaf6fe);
  color: var(--color-brand-strong, #1d6493);
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
}
.service-card-cta {
  margin-block-start: 1.25rem; 
  color: var(--color-brand-strong, #1d6493);
  font-size: var(--text-md, 0.9375rem); 
  font-weight: var(--weight-semibold, 600);
}
.service-list .card .tile-accent {
  margin-block-start: 1.25rem;
}
.service-other-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(2rem, 4vw, 2.75rem); 
  background-color: var(--color-surface-subtle, #f7fafc);
  border: 1px solid var(--color-border-subtle, #e6ebf0);
  border-radius: var(--radius-md, 16px);
}
.service-other-intro h2 {
  margin-block: 0;
  font-size: clamp(1.3125rem, 3.2vw, 1.75rem);
  font-weight: var(--weight-semibold, 600);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--color-brand-navy, #0f2438);
}
.service-other-intro p {
  margin-block: var(--space-3, 0.75rem) 0;
  font-size: var(--text-base, 1rem); 
  line-height: 1.6;
  color: var(--color-text-soft, #5b6570);
}
.service-other-list {
  display: grid;
  gap: 0.875rem; 
}
.service-other-item {
  padding: 1.375rem 1.5rem; 
  background-color: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border-muted, #e1e8ef);
  border-radius: var(--radius-sm, 12px);
}
.service-other-item-name {
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: var(--text-base, 1rem); 
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand-navy, #0f2438);
}
.service-other-item-body {
  margin-block-start: 0.4375rem; 
  font-size: var(--text-md, 0.9375rem); 
  line-height: 1.55;
  color: var(--color-text-soft, #5b6570);
}
#engagement {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 1.25rem; 
}
#engagement > h2 {
  grid-column: 1 / -1;
  margin-block: 0;
  max-width: 16em;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.14;
}
#engagement .card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.75rem 1.875rem; 
  border-radius: 0.875rem; 
  border-color: var(--color-border-subtle, #e6ebf0);
  box-shadow: none;
}
#engagement .card h3 {
  margin-block: 0;
  font-size: var(--text-lead, 1.0625rem);
  line-height: 1.3;
}
#engagement .card p {
  margin-block: 0.5625rem 0; 
  font-size: var(--text-md, 0.9375rem); 
  line-height: 1.6;
  color: var(--color-text-soft, #5b6570);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  #engagement .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -16px rgb(15 36 56 / 18%);
    border-color: var(--color-tint-accent-border, #cfe9fc);
  }
  .service-list .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -16px rgb(15 36 56 / 20%);
    border-color: var(--color-tint-accent-border, #cfe9fc);
  }
}
.page-service-index #services {
  padding-block: clamp(52px, 6vw, 80px);
}
.page-service-index #other-services {
  padding-block: 0 clamp(60px, 7vw, 92px);
}
.page-service-index #closing-cta {
  margin-block: 0 clamp(60px, 8vw, 96px);
}
#news-hero {
  background-color: var(--color-surface-subtle, #f7fafc);
  background-image: linear-gradient(
    180deg,
    var(--color-surface-subtle, #f7fafc) 0%,
    var(--color-bg, #ffffff) 100%
  );
  border-block-end: 1px solid var(--color-border-faint, #eef2f6);
}
#news-hero h1 {
  font-size: clamp(2rem, 5.5vw, 3.25rem); 
  line-height: 1.08;
}
.news-hero-intro {
  max-width: var(--measure-intro, 34rem);
}
.news-hero-intro > :first-child {
  margin-block-start: 0;
}
#news-hero .lede {
  margin-block-start: var(--space-4, 1rem);
  color: var(--color-text-muted, #525357);
  font-size: 1.125rem;
  line-height: var(--leading-normal, 1.6);
}
.news-featured-text h2 {
  font-size: clamp(1.3125rem, 3.6vw, 2.125rem);
  line-height: 1.16;
}
.news-announcements-intro h2,
.news-updates-text h2 {
  font-size: clamp(1.5rem, 4vw, 2.375rem);
  line-height: 1.14;
}
.news-connect-card h3 {
  font-size: 1.625rem;
  line-height: 1.2;
}
.news-featured-text .excerpt,
.news-updates-text .section-lede,
#news-closing-cta .section-lede {
  font-size: var(--text-lead, 1.0625rem);
  line-height: 1.65;
}
.news-row-heading .excerpt,
.news-theme-body {
  font-size: var(--text-md, 0.9375rem);
  line-height: 1.55;
}
.news-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin-block-start: var(--space-7, 3rem);
  overflow: hidden;
  background-color: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border-muted, #e1e8ef);
  border-radius: var(--radius-bg-large, 18px);
  box-shadow: 0 26px 64px -26px rgba(15, 36, 56, 0.28);
}
.news-featured-text {
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.75rem)
    clamp(1.625rem, 4vw, 2.875rem);
}
.news-featured-text > :first-child {
  margin-block-start: 0;
}
.news-featured-text .btn {
  margin-block-start: var(--space-5, 1.5rem);
}
.news-featured-media {
  align-self: stretch;
  min-height: 15rem;
  border-block-start: 1px solid var(--color-border-faint, #eef2f6);
}
.news-featured-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}
@media (min-width: 720px) {
  .news-featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7, 3rem);
  }
  .news-featured-media {
    min-height: 23.75rem; 
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-border-faint, #eef2f6);
  }
}
.news-tag-featured {
  gap: 0.5625rem;
  background-color: var(--color-status-amber-bg, #fff8ec);
  border-color: var(--color-status-amber-border, #f5e2be);
  color: var(--color-status-amber-text, #6b5426);
  font-size: var(--text-sm, 0.875rem);
}
.news-tag-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full, 9999px);
  background-color: var(--color-status-amber, #e8a33d);
  animation: news-tag-pulse 2.6s ease-in-out infinite;
}
@keyframes news-tag-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .news-tag-dot {
    animation: none;
  }
}
.news-announcements-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6, 2rem);
}
.news-announcements-intro {
  max-width: var(--measure-intro, 34rem);
}
.news-announcements-intro > :first-child {
  margin-block-start: 0;
}
.news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5625rem;
}
.news-filter {
  padding: 0.5625rem 1.125rem;
  border: 1px solid #d8e1e9;
  border-radius: var(--radius-pill, 999px);
  background-color: var(--color-bg, #ffffff);
  color: var(--color-text-muted, #525357);
  font-family: inherit;
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  line-height: 1.2;
  cursor: pointer;
  transition: border-color var(--transition-base, 0.3s ease-in-out);
}
.news-filter:hover {
  border-color: var(--color-brand, #27a5f7);
}
.news-filter.is-active {
  background-color: var(--color-brand-navy, #0f2438);
  border-color: var(--color-brand-navy, #0f2438);
  color: var(--color-text-inverse, #ffffff);
}
.news-row-list {
  display: flex;
  flex-direction: column;
  margin-block-start: var(--space-6, 2rem);
  border-block-start: 1px solid var(--color-border-subtle, #e6ebf0);
}
.news-row {
  display: grid;
  grid-template-columns: 150px minmax(24ch, 1fr) 170px 40px;
  gap: var(--space-6, 2rem);
  align-items: center;
  padding-block: var(--space-5, 1.5rem);
  padding-inline: var(--space-2, 0.5rem);
  border-block-end: 1px solid var(--color-border-subtle, #e6ebf0);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--transition-base, 0.3s ease-in-out);
}
.news-row:hover {
  background-color: var(--color-surface-subtle, #f7fafc);
}
.news-row-date {
  color: var(--color-text-muted, #525357);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
}
.news-row-heading h3 {
  margin-block-start: 0;
  max-width: none;
  font-size: 1.1875rem;
  line-height: 1.3;
}
.news-row-heading .excerpt {
  margin-block-start: var(--space-2, 0.5rem);
}
.news-row .news-tag {
  justify-self: start;
}
.news-row::after {
  content: "\2192";
  justify-self: end;
  color: var(--color-brand-strong, #1d6493);
  font-size: var(--text-lg, 1.25rem);
}
.news-row[hidden] {
  display: none;
}
.news-count {
  margin-block-start: var(--space-6, 2rem);
  color: var(--color-text-muted, #525357);
  font-size: var(--text-sm, 0.875rem);
}
@media (max-width: 1023px) {
  .news-row {
    grid-template-columns: 1fr;
    gap: var(--space-2, 0.5rem);
  }
  .news-row::after {
    display: none;
  }
}
#news-updates {
  display: grid;
  gap: var(--space-7, 3rem);
  background-color: var(--color-surface-subtle, #f7fafc);
}
.news-updates-text a {
  display: inline-block;
  margin-block-start: var(--space-4, 1rem);
  font-size: var(--text-md, 0.9375rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand-strong, #1d6493);
  text-decoration: none;
}
.news-updates-text a:hover {
  color: var(--color-brand-deep, #134262);
  text-decoration: underline;
}
.news-updates-text a::after {
  content: "\2192";
  margin-inline-start: var(--space-2, 0.5rem);
}
.news-theme-grid {
  display: grid;
  gap: var(--space-4, 1rem);
  grid-template-columns: 1fr;
}
.news-theme-grid .card h3 {
  font-size: 1.125rem;
  line-height: 1.28;
}
.news-theme-product {
  margin-block: 0;
  color: var(--color-text-muted, #525357);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
@media (min-width: 1024px) {
  #news-updates {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: start;
  }
  .news-theme-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
#news-connect {
  display: grid;
  gap: var(--space-5, 1.5rem);
  grid-template-columns: 1fr;
}
.news-connect-card {
  padding: var(--space-6, 2rem);
  background-color: var(--color-surface-subtle, #f7fafc);
  border: 1px solid var(--color-border-subtle, #e6ebf0);
  border-radius: var(--radius-md, 16px);
}
.news-connect-card > :first-child {
  margin-block-start: 0;
}
.news-connect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  margin-block-start: var(--space-5, 1.5rem);
}
@media (min-width: 1024px) {
  #news-connect {
    grid-template-columns: repeat(2, 1fr);
  }
}
#news-closing-cta {
  max-width: min(var(--container-max, 77.5rem), 100% - 2 * clamp(20px, 5vw, 48px));
  margin-inline: auto;
  margin-block: 0 clamp(3.5rem, 8vw, 6rem);
  padding: clamp(44px, 6vw, 64px) clamp(28px, 5vw, 56px);
  border-radius: var(--radius-bg-large, 18px);
  background-color: var(--color-brand-navy, #0f2438);
  background-image: linear-gradient(
    135deg,
    var(--color-brand-navy, #0f2438) 0%,
    var(--color-brand-navy-lift, #153252) 100%
  );
  color: var(--color-text-inverse, #ffffff);
  text-align: center;
}
#news-closing-cta h2 {
  max-width: none;
  margin-block-start: 0;
  color: var(--color-text-inverse, #ffffff);
}
#news-closing-cta p {
  max-width: var(--measure, 44.160156em);
  margin-inline: auto;
}
#news-closing-cta h2 {
  font-size: clamp(1.5rem, 4vw, 2.375rem);
}
#news-closing-cta .btn-primary {
  margin-block-start: var(--space-5, 1.5rem);
  padding: 16px 34px; 
  border-radius: var(--radius-full, 9999px);
  background-color: var(--color-brand, #27a5f7);
  color: var(--color-text-inverse, #ffffff);
  box-shadow: 0 8px 24px rgb(39 165 247 / 34%);
  font-size: var(--text-base, 1rem);
}
#news-closing-cta .btn-primary:hover {
  box-shadow: 0 14px 32px rgb(39 165 247 / 42%);
}
.page-support h1,
.page-support h2,
.page-support h3 {
  font-family: var(--font-display, var(--font-heading, sans-serif));
}
.page-support h2,
.page-support h3 {
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand-navy, #0f2438);
}
.page-support h2 {
  letter-spacing: -0.025em;
}
.page-support h3 {
  letter-spacing: -0.015em;
}
.page-support .support-hero {
  text-align: center;
}
.page-support .support-hero h1 {
  max-width: 16em;
  margin-inline: auto;
}
.page-support .support-hero > p {
  max-width: var(--measure, 44.160156em);
  margin-inline: auto;
  color: var(--color-text-muted, #525357);
  line-height: var(--leading-prose, 1.625);
}
.page-support .support-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem; 
  margin-block-end: var(--space-5, 1.5rem);
  padding: 0.375rem 0.9375rem; 
  border-radius: var(--radius-full, 9999px);
  background-color: var(--color-status-green-bg, #eaf8f0);
  border: 1px solid var(--color-status-green-border, #c8e9d8);
  color: var(--color-status-green-text, #1e7a4e);
  font-family: var(--font-sans, sans-serif);
  font-size: 0.8125rem; 
  font-weight: var(--weight-semibold, 600);
  text-decoration: none;
}
.page-support .support-hero-badge::before,
.page-support .status-pill::before {
  flex-shrink: 0;
  content: "";
  width: 0.375rem; 
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-status-green, #28a96b);
}
@media (prefers-reduced-motion: no-preference) {
  .page-support .support-hero-badge::before,
  .page-support .status-pill::before {
    animation: support-pulse 2.6s ease-in-out infinite;
  }
}
@keyframes support-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.page-support .support-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3, 0.75rem);
  margin-block-start: var(--space-6, 2rem);
}
.page-support .support-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5, 1.5rem);
  margin-block-start: var(--space-6, 2rem);
}
.page-support .support-channel-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  text-decoration: none;
  color: inherit;
}
.page-support .support-channel-abbr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm, 12px);
  background-color: var(--color-tint-accent, #eaf6fe);
  color: var(--color-brand-strong, #1d6493);
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
}
.page-support h2 {
  font-size: clamp(1.5rem, 4vw, 2.375rem);
  line-height: 1.14;
}
.page-support #support-closing-cta h2 {
  line-height: var(--leading-heading, 1.12);
}
.page-support .support-hero .lede {
  font-size: 1.1875rem;
  line-height: var(--leading-normal, 1.6);
}
.page-support .section-lede {
  font-size: var(--text-lead, 1.0625rem);
  line-height: var(--leading-normal, 1.6);
}
.page-support .support-table-scroll td {
  font-size: var(--text-md, 0.9375rem);
}
.page-support .onboarding-training h3 {
  font-size: 1.75rem;
  line-height: 1.16;
}
.page-support .support-channel-name {
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: var(--text-lg, 1.25rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand-navy, #0f2438);
}
.page-support .support-channel-line {
  color: var(--color-text-muted, #525357);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--leading-prose, 1.625);
}
.page-support .support-channel-meta {
  margin-block-start: var(--space-1, 0.25rem);
  color: var(--color-brand-strong, #1d6493);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
}
.page-support #status {
  background-color: var(--color-surface-subtle, #f7fafc);
}
.page-support .support-status-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6, 2rem);
}
.page-support .support-status-head p {
  color: var(--color-text-muted, #525357);
  line-height: var(--leading-prose, 1.625);
}
.page-support .support-status-cta {
  flex-shrink: 0;
}
.page-support .support-status-cta::after {
  content: "\2192";
  margin-inline-start: var(--space-2, 0.5rem);
}
.page-support .support-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.25rem;
  margin-block-start: var(--space-6, 2rem);
}
.page-support .status-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}
.page-support .status-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
}
.page-support .status-card-head h3 {
  margin-block: 0;
  font-size: var(--text-lead, 1.0625rem);
  line-height: var(--leading-heading, 1.12);
}
.page-support .status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  flex-shrink: 0;
  padding: 0.3125rem 0.75rem; 
  border-radius: var(--radius-full, 9999px);
  background-color: var(--color-status-green-bg, #eaf8f0);
  border: 1px solid var(--color-status-green-border, #c8e9d8);
  color: var(--color-status-green-text, #1e7a4e);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
}
.page-support .status-bars {
  height: 1.625rem; 
  margin-block-start: var(--space-4, 1rem);
  border-radius: 2px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-status-green, #28a96b) 0,
    var(--color-status-green, #28a96b) calc(100% / 45 - 3px),
    transparent calc(100% / 45 - 3px),
    transparent calc(100% / 45)
  );
  opacity: 0.85;
}
.page-support .status-bars-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  margin-block-start: var(--space-2, 0.5rem);
  color: var(--color-text-muted, #525357);
  font-size: var(--text-xs, 0.75rem);
}
.page-support .status-uptime-figure {
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand-navy, #0f2438);
}
.page-support .status-host {
  margin-block: var(--space-3, 0.75rem) 0;
  color: var(--color-text-muted, #525357);
  font-size: var(--text-sm, 0.875rem);
}
.page-support .support-status-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5, 1.5rem);
  margin-block-start: var(--space-5, 1.5rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
  border-radius: var(--radius-md, 16px);
  background-color: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border-subtle, #e6ebf0);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-muted, #525357);
}
.page-support .support-status-footer a {
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand-strong, #1d6493);
  text-decoration: none;
}
.page-support .support-status-footer a:hover {
  color: var(--color-brand-deep, #134262);
  text-decoration: underline;
}
.page-support .support-status-footer-note {
  color: var(--color-text-muted, #525357);
}
.page-support .support-table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin-block-start: var(--space-6, 2rem);
  border-radius: var(--radius-md, 16px);
  border: 1px solid var(--color-border-subtle, #e6ebf0);
}
.page-support .support-table-scroll:focus-visible {
  outline-offset: -2px;
}
.page-support #sla table {
  min-width: 40rem;
}
.page-support #sla th {
  background-color: var(--color-surface-subtle, #f7fafc);
  color: var(--color-text-muted, #525357);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.page-support .sla-level,
.page-support .sla-reply {
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-weight: var(--weight-semibold, 600);
}
.page-support .sla-level {
  color: var(--color-brand-strong, #1d6493);
}
.page-support .sla-reply {
  color: var(--color-brand-navy, #0f2438);
}
.page-support .onboarding-stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5, 1.5rem);
  margin-block-start: var(--space-7, 3rem);
}
.page-support .onboarding-stage {
  padding-block-start: var(--space-4, 1rem);
  border-block-start: 2px solid var(--color-brand, #27a5f7);
}
.page-support .onboarding-stage-step {
  margin-block: 0;
  color: var(--color-text-muted, #525357);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.page-support .onboarding-stage-name {
  margin-block: var(--space-2, 0.5rem) 0;
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: var(--text-lg, 1.25rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand-navy, #0f2438);
}
.page-support .onboarding-stage-body {
  margin-block: var(--space-2, 0.5rem) 0;
  color: var(--color-text-muted, #525357);
  font-size: var(--text-md, 0.9375rem);
  line-height: 1.55;
}
.page-support .onboarding-training {
  margin-block-start: var(--space-7, 3rem);
  padding: var(--space-7, 3rem) var(--space-6, 2rem);
  border-radius: var(--radius-md, 16px);
  background: linear-gradient(180deg, var(--color-brand-navy, #0f2438), #153252);
  color: var(--color-text-inverse-muted, #9fb3c6);
}
.page-support .onboarding-training .eyebrow {
  color: #7cc8fa;
}
.page-support .onboarding-training h3 {
  margin-block: var(--space-2, 0.5rem) 0;
  color: var(--color-text-inverse, #ffffff);
}
.page-support .onboarding-training p:last-child {
  max-width: var(--measure, 44.160156em);
  margin-block: var(--space-3, 0.75rem) 0;
}
.page-support #support-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
  gap: var(--space-8, 4rem);
  align-items: start;
}
.page-support .support-faq-lead h2 {
  margin-block-start: 0;
}
.page-support .support-faq-lead p {
  color: var(--color-text-muted, #525357);
  line-height: var(--leading-prose, 1.625);
}
.page-support .support-faq-panel {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md, 16px);
  border: 1px solid var(--color-border-subtle, #e6ebf0);
  background-color: var(--color-bg, #ffffff);
}
.page-support .support-faq-entry {
  padding: var(--space-5, 1.5rem);
  border-block-end: 1px solid var(--color-border-subtle, #e6ebf0);
}
.page-support .support-faq-entry:last-child {
  border-block-end: none;
}
.page-support .support-faq-entry h3 {
  margin-block: 0;
  font-size: var(--text-lead, 1.0625rem);
}
.page-support .support-faq-entry p {
  margin-block: var(--space-2, 0.5rem) 0;
  color: var(--color-text-muted, #525357);
  font-size: var(--text-md, 0.9375rem);
  line-height: var(--leading-normal, 1.6);
}
.page-support #support-closing-cta {
  background-color: var(--color-brand-deep, #134262);
  color: var(--color-text-inverse, #ffffff);
  text-align: center;
}
.page-support #support-closing-cta h2 {
  max-width: none;
  margin-block-start: 0;
  color: var(--color-text-inverse, #ffffff);
}
.page-support #support-closing-cta p {
  max-width: var(--measure, 44.160156em);
  margin-inline: auto;
}
.page-support .support-closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4, 1rem);
  margin-block-start: var(--space-5, 1.5rem);
}
.page-support #support-closing-cta .btn-primary {
  background-color: var(--color-bg, #ffffff);
  border-color: var(--color-bg, #ffffff);
  color: var(--color-brand-deep, #134262);
}
.page-support #support-closing-cta .btn-primary:hover {
  background-color: var(--color-brand-soft, #acdbfb);
  border-color: var(--color-brand-soft, #acdbfb);
  color: var(--color-brand-deep, #134262);
}
.page-support #support-closing-cta .btn-outline {
  background-color: transparent;
  border-color: var(--color-text-inverse, #ffffff);
  color: var(--color-text-inverse, #ffffff);
}
.page-support #support-closing-cta .btn-outline:hover {
  background-color: var(--color-text-inverse, #ffffff);
  color: var(--color-brand-deep, #134262);
}
.page-package h1,
.page-package h2,
.page-package h3,
.page-package-index h1,
.page-package-index h2,
.page-package-index h3 {
  font-family: var(--font-display, var(--font-heading, sans-serif));
}
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.pkg-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pkg-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 44px;
}
.pkg-strip--lg .pkg-slot {
  width: 52px;
}
.pkg-strip--md .pkg-slot {
  width: 44px;
}
.pkg-strip--sm .pkg-slot {
  width: 26px;
}
.pkg-tile {
  width: 100%;
  aspect-ratio: 1;
  display: block;
}
.pkg-slot-label {
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: 9.5px;
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.045em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-text-hint, #8a94a0);
}
.pkg-strip--sm .pkg-slot-label {
  display: none;
}
.pkg-slot.off .pkg-tile {
  filter: grayscale(1);
  opacity: 0.22;
}
.pkg-slot.off .pkg-slot-label {
  opacity: 0.45;
}
.pkg-slot.lit .pkg-slot-label {
  color: var(--color-text-muted, #525357);
}
.pkg-index-hero,
.pkg-included,
.pkg-compare {
  background: var(--color-bg, #ffffff); 
}
.pkg-hero-lead {
  font-size: var(--text-lead, 1.0625rem);
  color: var(--color-text-muted, #525357);
  max-width: 46ch;
  margin-top: var(--space-4, 1rem);
}
.pkg-index-list {
  background: var(--color-bg, #ffffff);
}
.pkg-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  margin-top: var(--space-7, 3rem);
}
.pkg-row {
  border: 1px solid var(--color-border-subtle, #e6ebf0);
  border-radius: var(--radius-bg-large, 18px);
  background: var(--color-bg, #ffffff);
  box-shadow: var(--shadow-1, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
  padding: var(--space-5, 1.5rem);
  display: grid;
  gap: var(--space-5, 1.5rem);
  grid-template-columns: 1fr;
  transition: box-shadow var(--transition-base, 0.3s cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--transition-base, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}
.pkg-row:hover {
  box-shadow: var(--shadow-2, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1));
  border-color: var(--color-tint-accent-border, #cfe9fc);
}
.pkg-row-copy {
  min-width: 0;
}
.pkg-row-head {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.pkg-row-head h2 {
  font-size: var(--text-xl, 1.5rem);
  line-height: var(--leading-heading, 1.12);
}
.pkg-count {
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: 11.5px;
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--color-brand-strong, #1d6493);
  background: var(--color-tint-accent, #eaf6fe);
  border: 1px solid var(--color-tint-accent-border, #cfe9fc);
  border-radius: var(--radius-pill, 999px);
  padding: 3px 11px;
}
.pkg-row-line {
  color: var(--color-text-muted, #525357);
  margin-top: var(--space-2, 0.5rem);
  max-width: 52ch;
}
.pkg-explore {
  display: inline-block;
  margin-top: var(--space-4, 1rem);
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand-strong, #1d6493);
}
.pkg-hero {
  background: var(--color-surface-subtle, #f7fafc);
  border-bottom: 1px solid var(--color-border-faint, #eef2f6);
}
.pkg-hero-inner {
  display: grid;
  gap: var(--space-6, 2rem);
  grid-template-columns: 1fr;
}
.pkg-hero-copy h1 {
  margin-top: var(--space-3, 0.75rem);
}
.pkg-hero-actions {
  display: flex;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
  margin-top: var(--space-5, 1.5rem);
}
.pkg-hero-panel {
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border-subtle, #e6ebf0);
  border-radius: var(--radius-bg-large, 18px);
  padding: var(--space-5, 1.5rem);
  box-shadow: var(--shadow-1, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
}
.pkg-panel-label {
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: 11.5px;
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-hint, #8a94a0);
  margin-bottom: var(--space-4, 1rem);
}
.pkg-legend {
  display: flex;
  gap: var(--space-4, 1rem);
  flex-wrap: wrap;
  margin-top: var(--space-4, 1rem);
  padding-top: var(--space-3, 0.75rem);
  border-top: 1px solid var(--color-border-faint, #eef2f6);
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-soft, #5b6570);
}
.pkg-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pkg-key {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: inline-block;
}
.pkg-key--in {
  background: var(--color-brand, #27a5f7);
}
.pkg-key--later {
  background: var(--color-border-muted, #e1e8ef);
}
.pkg-sec-intro {
  max-width: var(--measure-intro, 34rem);
}
.pkg-sec-intro h2 {
  margin-top: var(--space-3, 0.75rem);
}
.pkg-sec-intro p {
  color: var(--color-text-muted, #525357);
  font-size: var(--text-lead, 1.0625rem);
  margin-top: var(--space-3, 0.75rem);
}
.pkg-includes-line {
  margin-top: var(--space-4, 1rem);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-soft, #5b6570);
}
.pkg-inc-grid {
  display: grid;
  gap: var(--space-4, 1rem);
  grid-template-columns: 1fr;
  margin-top: var(--space-6, 2rem);
}
.pkg-inc {
  border: 1px solid var(--color-border-subtle, #e6ebf0);
  border-radius: var(--radius-bg-large, 18px);
  padding: var(--space-5, 1.5rem);
  display: flex;
  gap: var(--space-4, 1rem);
  background: var(--color-bg, #ffffff);
  transition: box-shadow var(--transition-base, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}
.pkg-inc:hover {
  box-shadow: var(--shadow-2, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1));
}
.pkg-inc > .pkg-tile {
  width: 44px;
  height: 44px;
  flex: none;
}
.pkg-inc-copy {
  min-width: 0;
}
.pkg-inc-copy h3 {
  font-size: var(--text-base, 1rem);
}
.pkg-inc-copy p {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-muted, #525357);
  margin-top: var(--space-1, 0.25rem);
}
.pkg-inc-link,
.pkg-inc-none {
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  margin-top: var(--space-2, 0.5rem);
  display: inline-block;
}
.pkg-inc-link {
  color: var(--color-brand-strong, #1d6493);
}
.pkg-inc-none {
  color: var(--color-text-hint, #8a94a0);
  font-weight: var(--weight-medium, 500);
}
.pkg-inc--pending {
  border-style: dashed;
  border-color: var(--color-border-muted, #e1e8ef);
  background: var(--color-surface-subtle, #f7fafc);
}
.pkg-replaces {
  background: var(--color-surface-subtle, #f7fafc);
  border-top: 1px solid var(--color-border-faint, #eef2f6);
  border-bottom: 1px solid var(--color-border-faint, #eef2f6);
}
.pkg-repl-cols {
  display: grid;
  gap: var(--space-4, 1rem);
  grid-template-columns: 1fr;
  margin-top: var(--space-6, 2rem);
}
.pkg-repl-col {
  border: 1px solid var(--color-border-subtle, #e6ebf0);
  border-radius: var(--radius-bg-large, 18px);
  padding: var(--space-5, 1.5rem);
  background: var(--color-bg, #ffffff);
}
.pkg-repl-col h3 {
  font-size: var(--text-base, 1rem);
  margin-bottom: var(--space-4, 1rem);
}
.pkg-repl-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}
.pkg-repl-col li {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-muted, #525357);
  padding-inline-start: 20px;
  position: relative;
}
.pkg-repl-col li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 8px;
  height: 1.5px;
  background: var(--color-text-hint, #8a94a0);
}
.pkg-repl-col p {
  margin-top: var(--space-4, 1rem);
  padding-top: var(--space-3, 0.75rem);
  border-top: 1px solid var(--color-border-faint, #eef2f6);
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-soft, #5b6570);
}
.pkg-repl-col.pkg-repl-col-after {
  background: var(--color-brand-navy, #0f2438);
  border-color: var(--color-brand-navy, #0f2438);
  color: var(--color-text-inverse, #ffffff);
}
.pkg-repl-col.pkg-repl-col-after li {
  color: var(--color-text-on-dark, #a8bacb);
}
.pkg-repl-col.pkg-repl-col-after li::before {
  background: var(--color-brand, #27a5f7);
  width: 9px;
  height: 2px;
}
.pkg-repl-col.pkg-repl-col-after p {
  border-top-color: var(--color-brand-deep, #134262);
  color: var(--color-text-on-dark, #a8bacb);
}
.pkg-addable {
  background: var(--color-surface-subtle, #f7fafc);
  border-top: 1px solid var(--color-border-faint, #eef2f6);
  border-bottom: 1px solid var(--color-border-faint, #eef2f6);
}
.pkg-addable-inner {
  display: grid;
  gap: var(--space-5, 1.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
.pkg-addable-copy h3 {
  font-size: var(--text-lg, 1.25rem);
}
.pkg-addable-copy p {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-muted, #525357);
  max-width: 46ch;
  margin-top: var(--space-2, 0.5rem);
}
.pkg-cmp-grid {
  display: grid;
  gap: var(--space-4, 1rem);
  grid-template-columns: 1fr;
  margin-top: var(--space-6, 2rem);
}
.pkg-cmp {
  border: 1px solid var(--color-border-subtle, #e6ebf0);
  border-radius: var(--radius-bg-large, 18px);
  padding: var(--space-5, 1.5rem);
  display: block;
  transition: box-shadow var(--transition-base, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}
.pkg-cmp:hover {
  box-shadow: var(--shadow-2, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1));
}
.pkg-cmp h3 {
  font-size: var(--text-base, 1rem);
  margin-top: var(--space-4, 1rem);
}
.pkg-cmp p {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-muted, #525357);
  margin-top: var(--space-1, 0.25rem);
}
#pkg-cta {
  background: var(--color-brand-navy, #0f2438);
  color: var(--color-text-inverse, #ffffff);
}
#pkg-cta h2 {
  max-width: 20ch;
}
#pkg-cta p {
  color: var(--color-text-on-dark, #a8bacb);
  margin-top: var(--space-4, 1rem);
  max-width: 48ch;
  font-size: var(--text-lead, 1.0625rem);
}
#pkg-cta .closing-cta-buttons {
  justify-content: flex-start;
}
#pkg-cta .btn-primary,
#pkg-cta .btn-outline {
  padding: 16px 34px;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-base, 1rem);
}
#pkg-cta .btn-primary {
  background-color: var(--color-brand, #27a5f7);
  border-color: var(--color-brand, #27a5f7);
  color: var(--color-text-inverse, #ffffff);
  box-shadow: 0 8px 24px rgb(39 165 247 / 34%);
}
#pkg-cta .btn-primary:hover {
  background-color: var(--color-brand, #27a5f7);
  border-color: var(--color-brand, #27a5f7);
  color: var(--color-text-inverse, #ffffff);
  box-shadow: 0 14px 32px rgb(39 165 247 / 42%);
}
#pkg-cta .btn-outline {
  background-color: rgb(255 255 255 / 7%);
  border-color: rgb(255 255 255 / 20%);
  color: var(--color-text-inverse, #ffffff);
}
#pkg-cta .btn-outline:hover {
  background-color: rgb(255 255 255 / 13%);
  color: var(--color-text-inverse, #ffffff);
}
@media (min-width: 1024px) {
  .pkg-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--space-5, 1.5rem) var(--space-6, 2rem);
  }
  .pkg-row > .pkg-strip {
    justify-self: end;
  }
  .pkg-hero-inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--space-8, 4rem);
  }
  .pkg-inc-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .pkg-repl-cols {
    grid-template-columns: 1fr 1fr;
  }
  .pkg-addable-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .pkg-cmp-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.finder {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-block: var(--space-8, 4rem);
  background: linear-gradient(180deg, var(--color-brand-navy, #0f2438), var(--color-brand-navy-lift, #153252));
  border-block: 1px solid rgb(255 255 255 / 8%);
}
.finder-in {
  position: relative;
  display: grid;
  gap: 34px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .finder-in {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: start;
  }
}
.finder-intro h2 {
  color: var(--color-text-inverse, #ffffff);
}
.finder-intro p {
  color: var(--color-text-on-dark, #a8bacb);
}
.finder-note-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.finder-note-list li {
  font-size: 13.5px;
  color: var(--color-text-inverse-muted, #9fb3c6);
  padding-inline-start: 22px;
  position: relative;
}
.finder-note-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--color-brand, #27a5f7), var(--color-accent, #de26a5));
}
.finder-panel {
  position: relative;
  background: rgb(255 255 255 / 4.5%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--radius-md, 16px);
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / 55%);
  padding: 24px;
  min-height: 360px;
  backdrop-filter: blur(8px);
}
@media (min-width: 640px) {
  .finder-panel {
    padding: 30px;
  }
}
.finder-panel a {
  color: var(--color-brand-soft, #acdbfb);
}
.finder-teaser {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-block: var(--space-8, 4rem);
  padding-inline: var(--band-gutter, clamp(20px, 5vw, 48px));
  background: linear-gradient(135deg, var(--color-brand-navy, #0f2438), var(--color-brand-navy-lift, #153252));
  color: var(--color-text-inverse, #ffffff);
  text-align: start;
}
.ft-glow {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(38% 55% at 18% 30%, rgb(39 165 247 / 35%), transparent 70%),
    radial-gradient(32% 48% at 78% 70%, rgb(222 38 165 / 28%), transparent 70%);
  filter: blur(40px);
  animation: ftBreathe 7s ease-in-out infinite;
}
@keyframes ftBreathe {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ft-glow {
    animation: none;
  }
}
.ft-grid {
  position: relative;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .ft-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}
.ft-eyebrow {
  background: linear-gradient(90deg, #7fd4ff, #ff9fe0);
  color: #ff9fe0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.finder-teaser h2 {
  font-size: clamp(1.6rem, 4vw, 2.35rem);
  line-height: 1.14;
  font-weight: var(--weight-bold, 700);
  max-width: 18ch;
  margin-top: 10px;
  text-wrap: balance;
}
.finder-teaser p {
  color: var(--color-text-on-dark, #a8bacb);
  margin-top: 14px;
  max-width: 44ch;
  font-size: 1.0625rem;
}
.ft-arrow {
  width: 13px;
  height: 13px;
}
.ft-preview {
  position: relative;
  background: rgb(255 255 255 / 5%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--radius-md, 16px);
  padding: 20px;
  backdrop-filter: blur(6px);
}
.ft-preview-label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display, sans-serif);
  font-size: 11px;
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-inverse-muted, #9fb3c6);
}
.btn-gradient {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--color-brand, #27a5f7), var(--color-accent, #de26a5));
  color: var(--color-text-inverse, #ffffff);
  box-shadow:
    0 8px 24px -8px rgb(222 38 165 / 45%),
    0 8px 24px -8px rgb(39 165 247 / 35%);
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease;
}
.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px -8px rgb(222 38 165 / 55%),
    0 12px 28px -8px rgb(39 165 247 / 45%);
  color: var(--color-text-inverse, #ffffff);
}
.ft-cta-actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.finder-stack {
  border-bottom: 1px solid rgb(255 255 255 / 12%);
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.stack-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.stile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 38px;
}
.stile .tile {
  filter: grayscale(1);
  opacity: 0.22;
  border-radius: 24%;
  transition:
    filter 0.35s ease,
    opacity 0.35s ease,
    box-shadow 0.35s ease;
}
.stile .slot-lab {
  color: rgb(255 255 255 / 35%);
  transition: color 0.35s ease;
}
.stile.sug .tile {
  filter: grayscale(0.4);
  opacity: 0.55;
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 35%);
  outline: 1.5px dashed rgb(255 255 255 / 45%);
  outline-offset: 2px;
}
.stile.sug .slot-lab {
  color: var(--color-text-inverse-muted, #9fb3c6);
}
.stile.sel .tile {
  filter: none;
  opacity: 1;
}
.stile.sel .slot-lab {
  color: var(--color-text-inverse, #ffffff);
}
.sug-count {
  font-weight: var(--weight-medium, 500);
  color: var(--color-text-inverse-muted, #9fb3c6);
  font-size: 12px;
}
.finder-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
  min-height: 28px;
}
.finder-count {
  font-family: var(--font-display, sans-serif);
  font-size: 11.5px;
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-inverse-muted, #9fb3c6);
  font-variant-numeric: tabular-nums;
}
.finder-dots {
  display: flex;
  gap: 5px;
}
.finder-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(255 255 255 / 18%);
  display: block;
}
.finder-dots i.done {
  background: var(--color-brand-soft, #acdbfb);
}
.finder-dots i.now {
  background: linear-gradient(135deg, var(--color-brand, #27a5f7), var(--color-accent, #de26a5));
}
.finder-back {
  margin-inline-start: auto;
  font-family: var(--font-display, sans-serif);
  font-size: 13px;
  font-weight: var(--weight-semibold, 600);
  color: var(--color-text-inverse-muted, #9fb3c6);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.finder-back:hover {
  color: var(--color-text-inverse, #ffffff);
  background: rgb(255 255 255 / 8%);
}
.finder-q h3 {
  font-size: 20px;
  font-weight: var(--weight-bold, 700);
  margin: 8px 0 0;
  color: var(--color-text-inverse, #ffffff);
}
.q-note {
  font-size: 13px;
  color: var(--color-text-inverse-muted, #9fb3c6);
  margin: 6px 0 0;
  max-width: 52ch;
}
.opts {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin-top: 18px;
}
@media (min-width: 640px) {
  .opts {
    grid-template-columns: 1fr 1fr;
  }
}
.opt {
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 12px;
  padding-block: 14px;
  padding-inline: 16px 44px;
  background: rgb(255 255 255 / 3.5%);
  cursor: pointer;
  font: inherit;
  text-align: start;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s ease;
}
.opts.go .opt {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.32s ease,
    transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1),
    border-color 0.3s,
    box-shadow 0.3s,
    background 0.3s;
}
.opts.go .opt:nth-child(1) {
  transition-delay: 0ms;
}
.opts.go .opt:nth-child(2) {
  transition-delay: 45ms;
}
.opts.go .opt:nth-child(3) {
  transition-delay: 90ms;
}
.opts.go .opt:nth-child(4) {
  transition-delay: 135ms;
}
.opt:hover {
  border-color: rgb(127 212 255 / 55%);
  background: rgb(255 255 255 / 6.5%);
  box-shadow: 0 8px 20px -12px rgb(39 165 247 / 50%);
}
.opt.picked {
  border-color: transparent;
  background:
    linear-gradient(rgb(255 255 255 / 7%), rgb(255 255 255 / 7%)) padding-box,
    linear-gradient(120deg, var(--color-brand, #27a5f7), var(--color-accent, #de26a5)) border-box;
  box-shadow:
    0 10px 26px -12px rgb(222 38 165 / 40%),
    0 10px 26px -12px rgb(39 165 247 / 40%);
}
.opts.decided .opt {
  pointer-events: none;
}
.opts.decided .opt:not(.picked) {
  opacity: 0.35;
  transform: scale(0.98);
}
.opt-text {
  display: block;
}
.opt-text b {
  display: block;
  font-family: var(--font-display, sans-serif);
  font-weight: var(--weight-semibold, 600);
  font-size: 14.5px;
  color: var(--color-text-inverse, #ffffff);
}
.opt-text span {
  display: block;
  font-size: 13px;
  color: var(--color-text-inverse-muted, #9fb3c6);
  margin-top: 2px;
}
.opt-check {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--color-text-inverse, #ffffff);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.18s ease,
    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.opt.picked .opt-check {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .opt {
    opacity: 1;
    transform: none;
    transition:
      border-color 0.3s,
      box-shadow 0.3s;
  }
  .opts.decided .opt:not(.picked) {
    transform: none;
  }
  .opt-check {
    transition: opacity 0.01ms;
  }
}
.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.ptile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  background: rgb(255 255 255 / 3.5%);
  border: 1px solid rgb(255 255 255 / 14%);
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease;
}
.ptile .tile {
  width: 40px;
  height: 40px;
  border-radius: 24%;
  filter: grayscale(1);
  opacity: 0.35;
  transition:
    filter 0.25s ease,
    opacity 0.25s ease;
}
.ptile-name {
  font-family: var(--font-display, sans-serif);
  font-size: 11px;
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.03em;
  color: var(--color-text-inverse-muted, #9fb3c6);
}
.ptile:hover {
  border-color: rgb(127 212 255 / 55%);
  background: rgb(255 255 255 / 6%);
}
.ptile.sug {
  border-style: dashed;
  border-color: rgb(255 255 255 / 40%);
}
.ptile.on {
  border-color: rgb(255 255 255 / 30%);
  background: rgb(255 255 255 / 5.5%);
}
.ptile.on .tile {
  filter: none;
  opacity: 1;
}
.ptile.on .ptile-name {
  color: var(--color-text-inverse, #ffffff);
}
.ptile .opt-check {
  top: 6px;
  inset-inline-end: 6px;
  width: 15px;
  height: 15px;
}
.ptile.on .opt-check {
  opacity: 1;
  transform: scale(1);
}
.xd-note {
  display: none;
  margin-top: 14px;
  font-size: 13px;
  color: #ffd7f0;
  background: rgb(222 38 165 / 12%);
  border: 1px solid rgb(222 38 165 / 35%);
  border-radius: 12px;
  padding: 10px 14px;
}
.pkg-hint {
  display: none;
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-on-dark, #a8bacb);
  border-inline-start: 3px solid var(--color-accent, #de26a5);
  padding-block: 2px;
  padding-inline: 14px 0;
}
.pkg-hint b {
  color: var(--color-text-inverse, #ffffff);
}
.finder-result .count {
  font-family: var(--font-display, sans-serif);
  font-size: 11.5px;
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7fd4ff;
  background: rgb(127 212 255 / 14%);
  border: 1px solid rgb(127 212 255 / 30%);
  border-radius: var(--radius-pill, 999px);
  padding: 3px 11px;
  font-variant-numeric: tabular-nums;
}
.finder-result h3 {
  font-size: 24px;
  font-weight: var(--weight-bold, 700);
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--color-text-inverse, #ffffff);
}
.finder-actions {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 24px;
}
.finder-actions .btn {
  border: 0;
  cursor: pointer;
  font: inherit;
}
.finder-actions .btn-primary {
  font-family: var(--font-display, sans-serif);
  font-weight: var(--weight-semibold, 600);
  font-size: 14px;
  background: linear-gradient(135deg, var(--color-brand, #27a5f7), var(--color-accent, #de26a5));
  color: var(--color-text-inverse, #ffffff);
  box-shadow:
    0 8px 20px -10px rgb(222 38 165 / 40%),
    0 8px 20px -10px rgb(39 165 247 / 35%);
}
.finder-actions .btn-primary:hover {
  box-shadow:
    0 12px 26px -10px rgb(222 38 165 / 50%),
    0 12px 26px -10px rgb(39 165 247 / 45%);
}
.finder-actions .btn-ghost {
  font-family: var(--font-display, sans-serif);
  font-weight: var(--weight-semibold, 600);
  font-size: 14px;
  border: 1px solid rgb(255 255 255 / 24%);
  color: var(--color-text-inverse, #ffffff);
  background: transparent;
}
.restart {
  font-family: var(--font-display, sans-serif);
  font-size: 13px;
  font-weight: var(--weight-semibold, 600);
  color: var(--color-text-inverse-muted, #9fb3c6);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.restart:hover {
  color: var(--color-text-inverse, #ffffff);
}
.iq {
  display: none;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 12%);
}
.iq.open {
  display: block;
}
.iq-title {
  display: block;
  font-family: var(--font-display, sans-serif);
  font-size: 11.5px;
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-inverse-muted, #9fb3c6);
}
.iq-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin-top: 12px;
}
@media (min-width: 640px) {
  .iq-grid {
    grid-template-columns: 1fr 1fr;
  }
  .iq-full {
    grid-column: 1 / -1;
  }
}
.iq label {
  display: block;
}
.iq label span {
  display: block;
  font-family: var(--font-display, sans-serif);
  font-size: 12px;
  font-weight: var(--weight-semibold, 600);
  color: var(--color-text-inverse-muted, #9fb3c6);
  margin-bottom: 5px;
}
.iq input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--color-text-inverse, #ffffff);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--radius-full, 9999px);
  padding: 10px 16px;
  background: rgb(255 255 255 / 5%);
}
.iq input::placeholder {
  color: var(--color-text-inverse-muted, #9fb3c6);
}
.iq input:focus {
  outline: 2px solid #7fd4ff;
  outline-offset: 1px;
}
.iq-hint {
  font-size: 12.5px;
  color: var(--color-text-inverse-muted, #9fb3c6);
  margin-top: 12px;
  max-width: 52ch;
}
.iq-sent {
  display: none;
  margin-top: 14px;
  font-size: 14px;
  color: #8fe6b8;
  background: rgb(40 169 107 / 14%);
  border: 1px solid rgb(40 169 107 / 35%);
  border-radius: 12px;
  padding: 12px 16px;
}
.iq.sent .iq-sent {
  display: block;
}
.iq.sent .iq-grid,
.iq.sent .iq-send,
.iq.sent .iq-hint,
.iq.sent .turnstile-holder {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .stile .tile {
    transition: none;
  }
  .ptile {
    transition: none;
  }
}
.page-governance h1,
.page-governance h2,
.page-governance-index h1,
.page-governance-index h2,
.page-company h1,
.page-company h2,
.page-company h3,
.page-company-legal h1,
.page-company-legal h3,
.page-news-index h1,
.page-news-index h2,
.page-news-index h3,
.page-news-article h1,
.page-news-article h2 {
  font-family: var(--font-display, var(--font-heading, sans-serif));
}
.page-company h2,
.page-news-index h2 {
  font-weight: var(--weight-semibold, 600);
  letter-spacing: -0.025em;
  color: var(--color-brand-navy, #0f2438);
}
.page-company h3,
.page-news-index h3 {
  font-weight: var(--weight-semibold, 600);
  letter-spacing: -0.015em;
  color: var(--color-brand-navy, #0f2438);
}
.page-company #team h2 + p,
.page-company #governance h2 + p {
  max-width: var(--measure-intro, 34rem);
  color: var(--color-text-soft, #5b6570);
  font-size: var(--text-lead, 1.0625rem);
  line-height: 1.6;
}
.prose p,
.prose ul,
.prose ol,
.prose dl,
.prose blockquote,
.prose figure {
  max-width: var(--measure, 44.160156em);
  margin-block: var(--space-4, 1rem) 0;
}
.prose :first-child {
  margin-block-start: 0;
}
.prose h2,
.prose h3,
.prose h4 {
  max-width: var(--measure, 44.160156em);
  text-wrap: pretty;
}
.prose h3 {
  margin-block-start: var(--space-6, 2rem);
  color: var(--color-brand-strong, #1d6493);
  font-size: var(--text-lg, 1.25rem);
}
.prose h4 {
  margin-block-start: var(--space-5, 1.5rem);
  color: var(--color-text, #2b2d31);
  font-size: var(--text-base, 1rem);
  letter-spacing: 0.02em;
}
.prose ul ul,
.prose ul ol,
.prose ol ul,
.prose ol ol {
  margin-block-start: var(--space-2, 0.5rem);
  padding-inline-start: var(--space-5, 1.5rem);
}
.prose li > p {
  margin-block: 0;
  max-width: none;
}
.prose li > p + p {
  margin-block-start: var(--space-3, 0.75rem);
}
#hero.longform-hero {
  padding-block-end: 0;
}
.page-governance-index #hero.longform-hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.125rem); 
  line-height: 1.07;
  letter-spacing: -0.032em;
}
.page-governance #hero.longform-hero h1 {
  font-size: clamp(1.875rem, 4.6vw, 2.75rem); 
  line-height: 1.08;
}
.page-governance #hero.longform-hero,
.page-governance-index #hero.longform-hero {
  padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(2rem, 4vw, 2.75rem);
  background-color: var(--color-surface-subtle, #f7fafc);
  color: var(--color-text, #2b2d31); 
  border-block-end: 1px solid var(--color-border-subtle, #e6ebf0);
}
.page-governance-index #topics,
.page-governance-index #good-governance-info {
  padding-block: clamp(48px, 6vw, 72px);
}
.page-governance #policy,
.page-company-legal #policy {
  padding-block: clamp(40px, 5vw, 56px) clamp(60px, 7vw, 92px);
}
.page-governance-index #hero.longform-hero {
  padding-block: clamp(2.75rem, 6vw, 4.75rem) clamp(2.5rem, 5vw, 3.75rem);
}
#hero.longform-hero img {
  margin-block-start: var(--space-5, 1.5rem);
  border-radius: var(--radius-bg-large, 18px);
  width: 100%;
  max-height: 26rem;
  object-fit: contain;
}
.hero-shield {
  position: relative;
}
#hero.longform-hero .hero-shield img {
  display: block;
}
.hero-shield-canvas {
  position: absolute;
  inset: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
}
.hero-shield--live .hero-shield-canvas {
  visibility: visible;
}
.hero-shield--live img {
  visibility: hidden;
}
.governance-doc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15.625rem; 
  gap: clamp(2rem, 5vw, 4rem); 
  align-items: start;
}
.governance-doc-content {
  min-width: 0;
  max-width: 44em;
}
.governance-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.8125rem; 
  padding: 1.125rem 1.25rem; 
  background-color: var(--color-status-amber-bg, #fff8ec);
  border: 1px solid var(--color-status-amber-border, #f5e2be);
  border-radius: var(--radius-sm, 12px); 
  color: var(--color-status-amber-text, #6b5426);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--leading-normal, 1.6);
}
.governance-callout p {
  margin: 0;
  max-width: none;
}
.governance-callout::before {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  margin-block-start: 0.0625rem;
  content: "!";
  color: var(--color-status-amber-text, #6b5426);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
  background-color: var(--color-status-amber-border, #f5e2be);
  border-radius: 50%;
}
.governance-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5, 1.5rem);
  padding-block: var(--space-5, 1.5rem);
  margin-block-start: var(--space-5, 1.5rem);
  border-block-end: 1px solid var(--color-border-subtle, #e6ebf0);
  color: var(--color-text-muted, #525357);
  font-size: var(--text-sm, 0.875rem);
}
.governance-meta span span {
  color: var(--color-text, #2b2d31);
}
.governance-section {
  padding-block-start: var(--space-7, 3rem);
}
.governance-section-number {
  color: var(--color-brand, #27a5f7);
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: 0.8125rem; 
  font-weight: var(--weight-semibold, 600);
}
.governance-section h2 {
  margin-block: var(--space-2, 0.5rem) 0;
  max-width: var(--measure, 44.160156em);
  color: var(--color-brand-navy, #0f2438);
  font-size: var(--text-xl, 1.5rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: -0.018em;
  text-wrap: pretty;
}
.governance-section p {
  margin-block: var(--space-3, 0.75rem) 0;
  color: var(--color-text-muted, #525357);
}
.governance-placeholder {
  display: grid;
  gap: var(--space-2, 0.5rem);
  margin-block-start: var(--space-4, 1rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
  background-color: var(--color-surface-subtle, #f7fafc);
  border: 1px dashed var(--color-border-brand, #acdbfb);
  border-radius: var(--radius-sm, 12px);
}
.governance-placeholder-bar {
  height: 0.5625rem;
  background-color: var(--color-tint-accent, #eaf6fe);
  border-radius: 3px;
}
.governance-placeholder-bar-short {
  width: 62%;
}
.governance-contact {
  margin-block-start: 2.75rem; 
  padding: var(--space-5, 1.5rem) 1.625rem; 
  background-color: var(--color-surface-subtle, #f7fafc);
  border: 1px solid var(--color-border-subtle, #e6ebf0);
  border-radius: var(--radius-sm, 12px);
}
.governance-contact h2 {
  margin: 0;
  max-width: none;
  color: var(--color-brand-navy, #0f2438);
  font-size: var(--text-base, 1rem);
  font-weight: var(--weight-semibold, 600);
}
.governance-contact p {
  margin-block: var(--space-2, 0.5rem) 0;
  max-width: none;
  color: var(--color-text-muted, #525357);
  font-size: 0.9375rem;
}
.governance-body {
  margin-top: 0.75rem;
}
.governance-clauses {
  list-style: none;
  margin: 1.15rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.governance-clauses li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 0.7rem;
  align-items: baseline;
}
.governance-clauses:not(.governance-clauses-ordered) li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-brand, #27a5f7);
  transform: translateY(-0.35em);
}
.governance-marker {
  font-size: var(--text-md, 0.9375rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand-strong, #1d6493);
  font-variant-numeric: tabular-nums;
  min-width: 1.6em;
}
.governance-clause-body > :first-child { margin-top: 0; }
.governance-clause-body > :last-child { margin-bottom: 0; }
.governance-clauses-sub {
  margin: 0.7rem 0 0.25rem;
  gap: 0.6rem;
}
.governance-group-heading {
  padding-top: 0.5rem;
}
.governance-group-heading h2 {
  font-size: var(--text-lead, 1.0625rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-soft, #5b6570);
}
.governance-toc {
  position: sticky;
  top: calc(var(--header-height, 117px) + var(--space-4, 1rem));
}
@media (max-width: 900px) {
  .governance-doc-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .governance-toc {
    display: none;
  }
}
.governance-toc-label {
  color: var(--color-text-muted, #525357);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.governance-toc-links {
  display: grid;
  gap: var(--space-3, 0.75rem);
  margin-block-start: var(--space-4, 1rem);
}
.governance-toc-links a {
  color: var(--color-text-muted, #525357);
  font-size: var(--text-sm, 0.875rem);
  text-decoration: none;
}
.governance-toc-links a:hover {
  color: var(--color-link-hover, #134262);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
#hero.hero-dark {
  overflow: hidden;
  background-color: var(--color-brand-navy, #0f2438);
  color: var(--color-text-inverse, #ffffff); 
}
.page-company #hero.hero-dark h1 {
  color: var(--color-text-inverse, #ffffff); 
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4, 1rem);
  margin-block-start: var(--space-6, 2rem);
}
.page-company .stats-band-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); 
  gap: var(--space-7, 3rem); 
}
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr)); 
  gap: var(--space-8, 4rem); 
  align-items: start;
  margin-block-start: var(--space-6, 2rem);
}
.principles-list {
  display: grid;
  gap: var(--space-4, 1rem);
  margin-block-start: var(--space-7, 3rem);
}
.principle {
  display: flex;
  gap: var(--space-4, 1rem);
  align-items: flex-start;
  padding-block-start: var(--space-4, 1rem);
  border-block-start: 1px solid var(--color-border-subtle, #e6ebf0);
}
.principle-n {
  flex: none;
  width: 1.625rem; 
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand, #27a5f7);
}
.milestones-list .milestone:first-child {
  padding-block-start: 0;
}
.milestone {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-5, 1.5rem);
  padding-block: var(--space-5, 1.5rem);
  border-block-end: 1px solid var(--color-border-subtle, #e6ebf0);
}
.milestone-year {
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: var(--text-lead, 1.0625rem); 
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand, #27a5f7);
}
.milestone h3,
.team-card-body h3 {
  margin-block: 0;
  font-size: var(--text-lead, 1.0625rem); 
}
.principle h3,
.cert-card h3 {
  margin-block: 0;
  font-size: var(--text-base, 1rem); 
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); 
  gap: 1.25rem; 
  margin-block-start: var(--space-7, 3rem);
}
.team-card {
  padding: 0;
  overflow: hidden;
}
.team-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.team-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: var(--color-surface, #d6edfd);
  color: var(--color-brand-strong, #1d6493);
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: var(--text-2xl, 2.5rem);
  font-weight: var(--weight-bold, 700);
}
.team-card-body {
  padding: var(--space-5, 1.5rem);
}
.team-role {
  margin-block: var(--space-1, 0.25rem) 0;
  color: var(--color-text-muted, #525357);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
}
.team-card-body p:last-child {
  margin-block: var(--space-3, 0.75rem) 0;
  color: var(--color-text-muted, #525357);
}
.policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); 
  gap: 1.125rem; 
  margin-block-start: var(--space-7, 3rem);
}
.policy-grid .governance-policy-card {
  gap: 0.5625rem; 
  padding: 1.5rem 1.375rem 1.625rem; 
}
.governance-policy-card-abbr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; 
  height: 2rem;
  border-radius: 0.5625rem; 
  background-color: var(--color-tint-accent, #eaf6fe);
  color: var(--color-brand-strong, #1d6493);
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
}
.governance-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr)); 
  gap: var(--space-7, 3rem); 
  align-items: center;
  margin-block-start: var(--space-6, 2rem);
  padding: 2.5rem 2.75rem;
  border-radius: var(--radius-md, 16px);
  background-color: var(--color-brand-navy, #0f2438);
  color: var(--color-text-inverse, #ffffff); 
}
.governance-panel-copy .eyebrow {
  color: #7cc8fa;
}
.governance-panel-copy h3 {
  margin-block: var(--space-2, 0.5rem) 0;
  color: var(--color-text-inverse, #ffffff);
}
.governance-panel-copy p {
  margin-block: var(--space-3, 0.75rem) 0;
  max-width: var(--measure, 44.160156em);
  color: var(--color-text-inverse-muted, #9fb3c6);
}
.governance-panel-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  margin-block-start: var(--space-5, 1.5rem);
}
.governance-panel .btn-primary {
  background-color: var(--color-bg, #ffffff);
  border-color: var(--color-bg, #ffffff);
  color: var(--color-brand-deep, #134262);
}
.governance-panel .btn-primary:hover {
  background-color: var(--color-brand-soft, #acdbfb);
  border-color: var(--color-brand-soft, #acdbfb);
  color: var(--color-brand-deep, #134262);
}
.governance-panel .btn-outline {
  background-color: transparent;
  border-color: var(--color-text-inverse, #ffffff);
  color: var(--color-text-inverse, #ffffff);
}
.governance-panel .btn-outline:hover {
  background-color: var(--color-text-inverse, #ffffff);
  color: var(--color-brand-deep, #134262);
}
.complaint-box {
  padding: 1.625rem 1.75rem; 
  border-radius: var(--radius-sm, 12px); 
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.complaint-box .eyebrow {
  color: #7cc8fa;
}
.complaint-box-phone {
  margin-block: var(--space-2, 0.5rem) 0;
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: var(--text-xl, 1.5rem);
  font-weight: var(--weight-bold, 700);
  color: var(--color-text-inverse, #ffffff);
}
.complaint-box p:last-child {
  margin-block: var(--space-2, 0.5rem) 0;
  color: var(--color-text-inverse-muted, #9fb3c6);
}
.awards-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5, 1.5rem);
  margin-block-start: var(--space-7, 3rem);
  max-width: 56.25rem; 
  margin-inline: auto;
}
@media (min-width: 640px) {
  .awards-grid {
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  }
}
.cert-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4, 1rem);
  text-align: center;
}
.cert-card img,
.cert-mark-placeholder {
  width: 6.5rem;
  aspect-ratio: 1;
}
.cert-mark-placeholder {
  display: grid;
  place-items: center;
  background-color: var(--color-surface, #d6edfd);
  color: var(--color-brand-strong, #1d6493);
  clip-path: polygon(50% 0, 94% 17%, 84% 75%, 50% 100%, 16% 75%, 6% 17%);
}
.cert-mark-placeholder::before {
  content: "\2713";
  font-size: var(--text-2xl, 2.5rem);
  font-weight: var(--weight-bold, 700);
}
.cert-card p {
  margin-block: var(--space-1, 0.25rem) 0;
  color: var(--color-text-muted, #525357);
  font-size: var(--text-sm, 0.875rem);
}
.careers-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr)); 
  gap: 3.5rem; 
  align-items: center;
  padding: 3.5rem;
  border-radius: 1.125rem; 
  background: linear-gradient(
    135deg,
    var(--color-brand-navy, #0f2438) 0%,
    var(--color-brand-navy-lift, #153252) 100%
  );
  color: var(--color-text-inverse, #ffffff); 
}
.careers-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem; 
  margin-block-end: var(--space-4, 1rem);
  padding: 0.375rem 0.9375rem; 
  border-radius: var(--radius-full, 9999px);
  background-color: rgb(39 165 247 / 14%);
  border: 1px solid rgb(39 165 247 / 30%);
  color: #9fd5fa; 
  font-family: var(--font-sans, sans-serif);
  font-size: 0.8125rem; 
  font-weight: var(--weight-semibold, 600);
}
.careers-badge span {
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-brand, #27a5f7);
}
.careers-copy h2 {
  margin-block: 0;
  color: var(--color-text-inverse, #ffffff); 
}
.careers-copy p {
  margin-block: var(--space-4, 1rem) 0;
  max-width: 34em;
  color: var(--color-text-on-dark, #a8bacb);
  font-size: var(--text-lead, 1.0625rem);
  line-height: 1.6;
}
.careers-copy .btn-primary {
  margin-block-start: 1.625rem; 
  background-color: var(--color-brand, #27a5f7);
  border-color: var(--color-brand, #27a5f7);
  color: var(--color-text-inverse, #ffffff);
}
.careers-panel img {
  border-radius: var(--radius-sm, 12px); 
  border: 1px solid rgb(255 255 255 / 14%);
  width: 100%;
  max-height: 16.25rem; 
  object-fit: cover;
}
#policy > section {
  margin-block-start: var(--space-6, 2rem);
}
.effective-date {
  padding-block-end: var(--space-5, 1.5rem);
  border-block-end: 1px solid var(--color-border-brand, #acdbfb);
  color: var(--color-text-muted, #525357);
  font-size: var(--text-sm, 0.875rem);
}
#contact-card {
  margin-block-start: var(--space-7, 3rem);
  padding: var(--space-5, 1.5rem) var(--space-6, 2rem);
  background-color: var(--color-surface, #d6edfd);
  border-radius: var(--radius-md, 16px);
  max-width: var(--measure, 44.160156em);
}
#contact-card p {
  margin-block: 0;
  font-weight: var(--weight-semibold, 600);
}
#contact-card a {
  display: block;
  margin-block-start: var(--space-2, 0.5rem);
}
#topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr)); 
  gap: 1.25rem; 
}
.governance-policy-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .governance-policy-card:hover {
    transform: translateY(-4px);
  }
  .team-card:hover {
    transform: translateY(-3px);
  }
}
#topics .governance-policy-card {
  padding: 1.875rem 1.875rem 2rem; 
}
.governance-policy-card-name {
  color: var(--color-brand-navy, #0f2438);
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-weight: var(--weight-semibold, 600);
}
#topics .governance-policy-card-name {
  font-size: 1.125rem; 
}
.policy-grid .governance-policy-card-name {
  font-size: var(--text-base, 1rem); 
  line-height: 1.3;
}
.governance-policy-card-body {
  color: var(--color-text-muted, #525357);
}
#topics .governance-policy-card-body {
  margin-block-start: 0.625rem; 
  font-size: 0.9375rem; 
  line-height: var(--leading-normal, 1.6);
}
.policy-grid .governance-policy-card-body {
  font-size: var(--text-sm, 0.875rem); 
  line-height: 1.55;
}
.governance-policy-card-cta {
  margin-block-start: 1.125rem; 
  color: var(--color-brand-strong, #1d6493);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
}
.governance-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); 
  gap: clamp(1.5rem, 4vw, 3rem); 
  padding: clamp(1.875rem, 4vw, 2.5rem); 
  background-color: var(--color-surface-subtle, #f7fafc);
  border: 1px solid var(--color-border-subtle, #e6ebf0);
  border-radius: var(--radius-md, 16px);
}
.governance-info-grid h2 {
  margin: 0;
  max-width: none;
  color: var(--color-brand-navy, #0f2438);
  font-size: var(--text-xl, 1.5rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: -0.02em;
}
.governance-info-grid p {
  margin-block: var(--space-3, 0.75rem) 0;
  max-width: none;
  color: var(--color-text-muted, #525357);
}
.date {
  margin-block: var(--space-4, 1rem) 0;
  color: var(--color-text-muted, #525357);
  font-family: var(--font-sans, sans-serif);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.02em;
}
.excerpt {
  margin-block: var(--space-4, 1rem) 0;
  max-width: var(--measure, 44.160156em);
  color: var(--color-text-muted, #525357);
  font-size: var(--text-base, 1rem);
  line-height: var(--leading-prose, 1.625);
}
#news-article > :first-child {
  margin-block-start: 0;
}
#news-article > img {
  margin-block-start: var(--space-6, 2rem);
  border-radius: var(--radius-bg-large, 18px);
  width: 100%;
  max-height: 26rem;
  object-fit: cover;
}
#news-article > .prose {
  margin-block-start: var(--space-7, 3rem);
}
@media (min-width: 1024px) {
  #news-article > .prose {
    margin-block-start: var(--space-8, 4rem);
  }
}
.page-company #hero.hero-dark .lede {
  font-size: 1.1875rem;
  line-height: var(--leading-normal, 1.6);
}
.page-company .section-lede {
  font-size: var(--text-lead, 1.0625rem);
  line-height: var(--leading-normal, 1.6);
}
.page-company .story-prose {
  font-size: var(--text-lead, 1.0625rem);
  line-height: 1.65;
}
.page-company .milestone > div > p,
.page-company .principle > div > p,
.page-company .team-card-body p:not(.team-role) {
  font-size: var(--text-md, 0.9375rem);
  line-height: 1.55;
}
.page-company #awards h2 {
  font-size: clamp(1.375rem, 3.8vw, 2.25rem);
  line-height: 1.14;
}
.page-company #careers h2 {
  font-size: clamp(1.5rem, 4vw, 2.375rem);
}
.page-form h1 {
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: clamp(2.125rem, 5.6vw, 3.375rem); 
  letter-spacing: -0.032em;
}
#demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-section, 4rem);
}
@media (min-width: 1024px) {
  #demo {
    flex-direction: row;
    align-items: flex-start;
  }
  .demo-intro {
    flex: 1 1 45%;
    min-width: 0;
  }
  .demo-form {
    flex: 1 1 55%;
    min-width: 0;
  }
}
.demo-lead {
  font-size: var(--text-lg, 1.25rem);
  line-height: var(--leading-prose, 1.625);
}
.demo-tagline {
  margin-block-start: var(--space-5, 1.5rem);
  color: var(--color-text-muted, #525357); 
  font-weight: var(--weight-semibold, 600);
}
#countries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  max-width: none;
  margin-block-start: var(--space-5, 1.5rem);
  padding: 0;
  list-style: none;
}
#countries li {
  margin: 0;
  padding: var(--space-1, 0.25rem) var(--space-4, 1rem);
  border: 1px solid var(--color-border-brand, #acdbfb);
  border-radius: var(--radius-full, 9999px);
  background-color: var(--color-surface, #d6edfd);
  color: var(--color-text, #2b2d31); 
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-medium, 500);
}
.demo-form {
  --form-field-bg: #ffffff;
  --form-invalid: #b3261e;
  background-color: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border-muted, #e1e8ef);
  border-radius: var(--radius-lg, 32px);
  box-shadow: var(--shadow-3, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
  padding: var(--space-6, 2rem);
  color: var(--color-text, #2b2d31); 
}
@media (min-width: 1024px) {
  .demo-form {
    padding: var(--space-7, 3rem);
  }
}
.form-legend {
  margin-block: 0 var(--space-5, 1.5rem);
  color: var(--color-text-muted, #525357); 
  font-size: var(--text-sm, 0.875rem);
}
.form-error {
  display: none;
}
.form-js-required {
  margin: var(--space-4, 1rem) 0;
  color: var(--color-text, #2b2d31);
}
.form-error:target {
  display: block;
  margin-block: 0 var(--space-5, 1.5rem);
  border-inline-start: 4px solid var(--form-invalid, #b3261e);
  border-radius: var(--radius-sm, 12px);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background-color: var(--color-bg, #ffffff);
  color: var(--form-invalid, #b3261e); 
  font-weight: var(--weight-semibold, 600);
}
.hp-field {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-field {
  margin-block-start: var(--space-5, 1.5rem);
}
.form-field:first-of-type {
  margin-block-start: 0;
}
.demo-form label {
  display: block;
  margin-block-end: var(--space-2, 0.5rem);
  color: var(--color-text, #2b2d31); 
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  line-height: var(--leading-normal, 1.6);
}
.required-mark {
  margin-inline-start: 0.125em;
  font-weight: var(--weight-bold, 700);
}
.demo-form input,
.demo-form select {
  display: block;
  width: 100%;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  border: 1px solid var(--color-border-muted, #e1e8ef);
  border-radius: var(--radius-full, 9999px);
  background-color: var(--form-field-bg, #ffffff);
  color: var(--color-text, #2b2d31); 
  font-family: var(--font-sans, sans-serif);
  font-size: var(--text-base, 1rem);
  line-height: var(--leading-normal, 1.6);
  transition: border-color var(--transition-base, 0.3s ease-in-out);
}
.demo-form input:hover,
.demo-form select:hover {
  border-color: var(--color-brand-strong, #1d6493);
}
.demo-form input:focus-visible,
.demo-form select:focus-visible {
  border-color: var(--color-brand-strong, #1d6493);
}
.demo-form input:user-invalid,
.demo-form select:user-invalid {
  border-color: var(--form-invalid, #b3261e);
  border-width: 2px;
}
#consent {
  max-width: var(--measure, 44.160156em);
  margin-block-start: var(--space-5, 1.5rem);
  color: var(--color-text-muted, #525357); 
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--leading-prose, 1.625);
}
#consent a {
  color: var(--color-link, #1d6493); 
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
#consent a:hover {
  color: var(--color-link-hover, #134262); 
}
.demo-form .btn {
  margin-block-start: var(--space-6, 2rem);
}
.notfound,
.thanks {
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--space-8, 4rem) var(--space-6, 2rem);
  border-radius: var(--radius-bg-large, 18px);
  background-color: var(--color-surface, #d6edfd);
  text-align: center;
}
.notfound h1,
.notfound p,
.thanks h1,
.thanks p {
  margin-inline: auto;
}
.notfound h1,
.thanks h1 {
  font-family: var(--font-display, var(--font-heading, sans-serif));
}
.notfound .btn,
.thanks .btn {
  margin-block-start: var(--space-5, 1.5rem);
}
.page-customer-login #customer-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5, 1.5rem);
  padding-block: var(--space-8, 4rem);
}
.login-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 28rem;
  padding: var(--space-7, 3rem);
  border: 1px solid var(--color-border-muted, #e1e8ef);
  border-radius: var(--radius-lg, 32px);
  background-color: var(--color-bg, #ffffff);
  box-shadow: var(--shadow-3, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
}
.login-card h1 {
  font-family: var(--font-display, var(--font-heading, sans-serif));
  color: var(--color-brand-navy, #0f2438);
}
.login-subhead {
  margin-block-start: var(--space-3, 0.75rem);
  color: var(--color-text-muted, #525357); 
}
.google-btn {
  width: 100%;
  min-height: 52px;
  margin-block-start: var(--space-6, 2rem);
}
.google-btn-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--color-tint-accent-border, #cfe9fc);
  background-color: var(--color-tint-accent, #eaf6fe);
  color: var(--color-text-muted, #525357); 
  font-family: var(--font-display, var(--font-heading, sans-serif));
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
}
.login-helper {
  margin-block-start: var(--space-4, 1rem);
  color: var(--color-text-muted, #525357); 
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--leading-prose, 1.625);
}
.login-contacts {
  display: grid;
  gap: var(--space-2, 0.5rem);
  margin-block-start: var(--space-5, 1.5rem);
  padding-block-start: var(--space-5, 1.5rem);
  border-block-start: 1px solid var(--color-border-subtle, #e6ebf0);
}
.login-contacts p {
  margin: 0;
  color: var(--color-text-muted, #525357); 
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--leading-prose, 1.625);
}
.login-contacts a {
  color: var(--color-link, #1d6493); 
}
.login-contacts a:hover {
  color: var(--color-link-hover, #134262); 
}
.login-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-5, 1.5rem);
  font-size: var(--text-xs, 0.75rem);
}
.login-footer-links a {
  color: var(--color-text-muted, #525357); 
}
.login-footer-links a:hover {
  color: var(--color-brand-strong, #1d6493);
}
html:lang(th) body[class] :is(h1, h2, h3, h4),
html:lang(km) body[class] :is(h1, h2, h3, h4) {
  line-height: 1.35;
}
html:lang(th) body[class] :is(#awards, #benefits, #closing-cta, #engagement, #governance, #hero, #news-hero, #platform, #support-closing-cta, #team, #what-it-does) :is(h1, h2, h3, h4),
html:lang(km)
  body[class]
  :is(
    #awards,
    #benefits,
    #closing-cta,
    #engagement,
    #governance,
    #hero,
    #news-hero,
    #platform,
    #support-closing-cta,
    #team,
    #what-it-does
  )
  :is(h1, h2, h3, h4) {
  line-height: 1.35;
}
@keyframes marquee-scroll-rtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(100% + var(--space-6, 2rem)));
  }
}
@media (prefers-reduced-motion: no-preference) {
  html[dir="rtl"] .marquee-track {
    animation-name: marquee-scroll-rtl;
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  html[dir="rtl"] .page-homepage .one-system-module-0:hover,
  html[dir="rtl"] .page-homepage .one-system-module-1:hover {
    transform: translateX(4px);
  }
  html[dir="rtl"] .page-homepage .one-system-module-2:hover,
  html[dir="rtl"] .page-homepage .one-system-module-3:hover {
    transform: translateX(-4px);
  }
}
html[dir="rtl"] .page-homepage .one-system-ticker {
  transform: translateX(50%);
}
html[dir="rtl"] .page-homepage .client-globe-sphere {
  translate: 50%;
}