:root {
  --sdc-accent: #17658c;
  --sdc-accent-ink: #124f6c;
  --sdc-ink: #12181c;
  --sdc-text: #172026;
  --sdc-muted: #5a656c;
  --sdc-line: #e4e0d8;
  --sdc-line-strong: #cfc9be;
  --sdc-bg: #f5f3ee;
  --sdc-paper: #fbfaf7;
  --sdc-white: #fffcf8;
  --sdc-mist: #f5f3ee;
  --sdc-stage: #12202b;
  --sdc-glow: #8fd4e8;
  --sdc-partner: #12202b;
  --sdc-partner-text: #f4f1ea;
  --sdc-partner-muted: #c5cdc8;
  --sdc-danger: #8d2f2f;
  --sdc-font: "Instrument Sans", "Segoe UI", sans-serif;
  --sdc-display: "Instrument Sans", "Segoe UI", sans-serif;
  --sdc-mono: "IBM Plex Mono", ui-monospace, monospace;
  --header-h: 72px;
  --wrap: 1240px;
  --space: clamp(4.75rem, 8vw, 7.5rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

html.js body {
  opacity: 0;
}

html.i18n-ready body {
  opacity: 1;
  transition: opacity 160ms ease;
}

body {
  margin: 0;
  background: var(--sdc-bg);
  color: var(--sdc-text);
  font-family: var(--sdc-font);
  font-size: 1.0625rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--sdc-ink);
  color: var(--sdc-paper);
}

:focus-visible {
  outline: 2px solid var(--sdc-accent);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  inset-inline-start: 16px;
  top: -48px;
  z-index: 40;
  background: var(--sdc-ink);
  color: var(--sdc-paper);
  padding: 8px 12px;
}

.skip:focus {
  top: 12px;
}

.wrap {
  width: min(var(--wrap), calc(100% - 48px));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  background: rgba(255, 252, 248, 0.92);
  border-bottom: 1px solid var(--sdc-line);
  backdrop-filter: blur(16px);
}

html.is-compact {
  --header-h: 60px;
}

.header-inner,
.header-tools,
.hero-actions,
.lang-switch,
.markets-inline,
.bridge-line,
.network-main,
.network-more,
.footer-base,
.intent-set,
.model-tabs {
  display: flex;
  align-items: center;
}

.header-inner {
  height: 100%;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.brand img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.brand-name {
  font-weight: 650;
  letter-spacing: -0.03em;
}

.nav {
  display: flex;
  gap: 18px;
  font-size: 0.92rem;
}

.nav a {
  color: var(--sdc-muted);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
}

.nav a:hover,
.nav a.is-active {
  color: var(--sdc-ink);
  border-bottom-color: var(--sdc-ink);
}

.header-tools {
  gap: 14px;
}

.lang-switch {
  border: 1px solid var(--sdc-line);
  background: var(--sdc-white);
}

.lang-switch button {
  border: 0;
  background: transparent;
  padding: 6px 9px;
  cursor: pointer;
  color: var(--sdc-muted);
}

.lang-switch button[aria-pressed="true"] {
  background: var(--sdc-ink);
  color: var(--sdc-paper);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.btn-primary {
  background: var(--sdc-ink);
  color: #fff;
}

.btn-primary:hover {
  background: #2c3842;
}

.btn-ghost,
.btn-line {
  border-color: var(--sdc-ink);
  background: transparent;
  color: var(--sdc-ink);
}

.btn-ghost:hover,
.btn-line:hover {
  background: var(--sdc-ink);
  color: #fff;
}

.menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--sdc-line);
  background: var(--sdc-white);
  padding: 0;
  cursor: pointer;
  align-content: center;
  justify-items: center;
  gap: 6px;
}

.menu-btn span {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--sdc-ink);
}

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 19;
  background: var(--sdc-paper);
  padding: 28px 24px 40px;
  overflow: auto;
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1.7rem;
  letter-spacing: -0.04em;
  font-weight: 560;
}

.mobile-nav .btn {
  margin-top: 18px;
  width: fit-content;
  font-size: 1rem;
  letter-spacing: 0;
}

.hero {
  position: relative;
  background: var(--sdc-bg);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
  grid-template-areas: "copy atlas";
  column-gap: 64px;
  align-items: center;
  min-height: calc(100svh - var(--header-h));
  padding: 56px 0 72px;
}

.hero-copy {
  grid-area: copy;
}

.atlas {
  grid-area: atlas;
  background: var(--sdc-stage);
  color: #f3f6f8;
  padding: 22px 22px 16px;
  box-shadow: 0 28px 70px rgba(18, 32, 43, 0.14);
}

.stage-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(243, 246, 248, 0.12);
  color: #f3f6f8;
  font-weight: 620;
  letter-spacing: -0.03em;
}

.stage-top img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.eyebrow,
.idx,
.product-kicker,
.study-note,
.panel-kicker,
figcaption,
.num {
  font-family: var(--sdc-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sdc-accent);
}

.hero .eyebrow {
  font-family: var(--sdc-font);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--sdc-ink);
}

.hero-kicker {
  margin-top: 4px;
  color: var(--sdc-muted);
  font-size: 1rem;
}

h1,
h2,
.statement {
  font-family: var(--sdc-display);
  font-weight: 560;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

h1 {
  max-width: 10em;
  margin-top: 22px;
  font-size: clamp(3.5rem, 5.8vw, 5.7rem);
  color: var(--sdc-ink);
}

.lede {
  max-width: 36rem;
  margin-top: 22px;
  color: var(--sdc-muted);
  font-size: 1.15rem;
  line-height: 1.5;
}

.hero-actions {
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.markets-inline {
  gap: 16px;
  margin-top: 22px;
  color: var(--sdc-muted);
  font-size: 0.92rem;
}

.markets-inline span,
.network-main span,
.network-more span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.flag {
  width: 16px;
  height: 11px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.flag-eg { background: linear-gradient(#ce1126 33%, #fff 33% 66%, #111 66%); }
.flag-sa { background: #006c35; }
.flag-ae { background: linear-gradient(#ef3340 33%, #fff 33% 66%, #009739 66%); box-shadow: inset 5px 0 0 #111, inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.flag-qa { background: linear-gradient(90deg, #8a1538 35%, #fff 35%); }
.flag-kw { background: linear-gradient(#007a3d 33%, #fff 33% 66%, #ce1126 66%); }
.flag-om { background: linear-gradient(#db161b 33%, #fff 33% 66%, #008000 66%); }
.flag-bh { background: linear-gradient(90deg, #fff 28%, #ce1126 28%); }

.atlas svg {
  width: 100%;
  height: auto;
  color: rgba(243, 246, 248, 0.32);
}

.wires {
  stroke: currentColor;
  stroke-width: 1;
}

.pulse {
  stroke: var(--sdc-glow);
  stroke-width: 1.35;
  stroke-dasharray: 3 14;
  animation: flow 16s linear infinite;
}

.nodes circle {
  fill: var(--sdc-glow);
}

.atlas-labels {
  fill: #eef3f6;
  font-family: var(--sdc-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.atlas text {
  dominant-baseline: middle;
}

html[dir="rtl"] .atlas-labels text[text-anchor="start"] {
  text-anchor: end;
}

html[dir="rtl"] .atlas-labels text[text-anchor="end"] {
  text-anchor: start;
}

.atlas figcaption {
  margin-top: 4px;
  text-align: end;
  color: rgba(238, 243, 246, 0.55);
}

@keyframes flow {
  to { stroke-dashoffset: -240; }
}

.bridge {
  background: var(--sdc-white);
  border-block: 1px solid var(--sdc-line);
  padding: 28px 0;
}

.bridge h2 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-weight: 600;
}

.bridge-line {
  gap: 0;
  flex-wrap: wrap;
  margin-top: 14px;
  color: var(--sdc-muted);
  font-family: var(--sdc-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bridge-line li {
  display: flex;
  align-items: center;
}

.bridge-line li:not(:last-child)::after {
  content: "→";
  margin-inline: 12px;
  color: var(--sdc-accent);
}

.band {
  padding-block: var(--space);
  background: transparent;
}

.band + .band,
.band + .partner,
.partner + .band {
  border-top: 1px solid var(--sdc-line);
}

.band-white,
.band-paper,
.band-mist {
  background: transparent;
}

.band-head,
.band-head-wide {
  max-width: 44rem;
  margin-bottom: 48px;
}

h2 {
  margin-top: 12px;
  font-size: clamp(2.4rem, 4.4vw, 3.7rem);
}

.explorer {
  display: grid;
  grid-template-columns: minmax(220px, 0.36fr) minmax(0, 1fr);
  column-gap: 64px;
  align-items: start;
}

.explorer .tab {
  grid-column: 1;
}

.explorer .panel {
  grid-column: 2;
  grid-row: 1 / span 24;
}

.tab {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--sdc-line);
  background: transparent;
  text-align: start;
  padding: 14px 0;
  color: var(--sdc-muted);
  cursor: pointer;
}

.tab[aria-selected="true"] {
  color: var(--sdc-ink);
  font-weight: 620;
  box-shadow: inset 2px 0 0 var(--sdc-ink);
  padding-inline-start: 14px;
}

.panel:not(.is-active) {
  display: none;
}

.panel-kicker {
  margin-bottom: 8px;
}

.panel-problem,
.panel h3 {
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  letter-spacing: -0.035em;
  line-height: 1.15;
  font-weight: 560;
}

.shift {
  width: 1px;
  height: 42px;
  margin: 18px 0;
  background: var(--sdc-accent);
}

.panel p + h3 {
  margin-top: 0;
}

.panel h3 + p,
.columns {
  margin-top: 18px;
  color: var(--sdc-muted);
}

.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  color: var(--sdc-text);
}

.columns h4,
.duty h3,
.models > h3,
.quiet h3,
footer h2 {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sdc-accent);
}

.columns li,
.duty li {
  padding-block: 6px;
  border-bottom: 1px solid var(--sdc-line);
}

.meta,
.caps-line,
.who,
.quiet p,
.study-caption,
.models-note,
.form-note,
.partner-note {
  margin-top: 18px;
  color: var(--sdc-muted);
  font-size: 0.95rem;
}

.learn-path {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  margin-bottom: 22px;
}

.learn-path li {
  display: flex;
  align-items: center;
  font-family: var(--sdc-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.learn-path li:not(:last-child)::after {
  content: "";
  width: 28px;
  height: 1px;
  margin-inline: 10px;
  background: var(--sdc-accent);
}

.practices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
}

.practices article {
  padding: 32px 0;
  border-top: 1px solid var(--sdc-line);
}

.practices h3 {
  margin-top: 10px;
  font-size: clamp(1.8rem, 2.4vw, 2.3rem);
  letter-spacing: -0.04em;
  font-weight: 560;
}

.practices article > p:not(.num):not(.meta) {
  max-width: 36rem;
  margin-top: 12px;
  color: var(--sdc-muted);
}

.product {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
  padding-block: 56px;
  border-top: 1px solid var(--sdc-line);
}

.product-move {
  grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.2fr);
}

.product-logo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
}

.product h3 {
  margin-top: 12px;
  font-size: clamp(3rem, 5vw, 4.6rem);
  letter-spacing: -0.05em;
  line-height: 0.9;
  font-weight: 560;
}

.product-line {
  margin-top: 10px;
  color: var(--sdc-accent);
}

.product-copy > p:not(.meta):not(.caps-line):not(.product-line):not(.product-kicker) {
  max-width: 38rem;
  margin-top: 16px;
}

.product .btn {
  margin-top: 22px;
}

.study {
  position: relative;
  min-height: 420px;
}

.study-note {
  margin-bottom: 12px;
}

.study-main {
  margin-inline-start: 12%;
  border: 1px solid var(--sdc-line-strong);
  background: var(--sdc-white);
  padding: 18px;
  min-height: 280px;
}

.study-bar,
.study-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.study-bar {
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sdc-line);
  font-family: var(--sdc-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.study-row i {
  display: block;
  height: 10px;
  flex: 1;
  background: var(--sdc-mist);
}

.study-row i.short {
  flex: 0.45;
}

.study-chip {
  position: absolute;
  width: 170px;
  border: 1px solid var(--sdc-line-strong);
  background: var(--sdc-paper);
  padding: 12px;
  font-size: 0.75rem;
}

.chip-a { inset-inline-start: 0; bottom: 78px; }
.chip-b { inset-inline-end: 0; top: 86px; }

.study-chip b {
  display: block;
  height: 6px;
  margin-top: 8px;
  background: var(--sdc-accent);
  opacity: 0.45;
}

.chip-b b:last-child {
  width: 60%;
}

.route,
.route ol {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.route li {
  position: relative;
  padding-block: 12px;
  padding-inline-start: 22px;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}

.route li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--sdc-accent);
}

.route li::after {
  content: "";
  position: absolute;
  inset-inline-start: 1px;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sdc-accent);
}

.span-line {
  margin-top: 12px;
  padding-top: 36px;
  border-top: 1px solid var(--sdc-line);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.04em;
  font-weight: 560;
}

.tech-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px 64px;
}

.tech-grid .band-head {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.stack {
  position: relative;
}

.stack ol {
  position: relative;
}

.stack li {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 18px;
  padding-bottom: 22px;
}

.stack li::before {
  content: "";
  grid-row: 1 / span 2;
  width: 1px;
  justify-self: center;
  background: var(--sdc-line-strong);
}

.stack li::after {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sdc-white);
  box-shadow: inset 0 0 0 1.5px var(--sdc-accent);
}

.stack h3 {
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}

.stack p {
  color: var(--sdc-muted);
  font-size: 0.95rem;
}

.stack::after {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sdc-accent);
  animation: descend 8s linear infinite;
}

.tech-notes p {
  padding-block: 14px;
  border-top: 1px solid var(--sdc-line);
  color: var(--sdc-muted);
}

.tech-notes strong {
  display: block;
  margin-bottom: 4px;
  color: var(--sdc-text);
  font-weight: 620;
  letter-spacing: -0.02em;
}

@keyframes descend {
  0% { top: 8px; }
  100% { top: calc(100% - 16px); }
}

.timeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  position: relative;
  padding-top: 18px;
}

.timeline::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 27px;
  height: 1px;
  background: var(--sdc-line-strong);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

.timeline li span {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--sdc-line-strong);
  background: var(--sdc-mist);
  font-family: var(--sdc-mono);
  font-size: 0.72rem;
}

.timeline li.is-on span {
  background: var(--sdc-accent);
  border-color: var(--sdc-accent);
  color: #fff;
}

.timeline h3 {
  margin-top: 16px;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

.timeline p {
  margin-top: 8px;
  color: var(--sdc-muted);
  font-size: 0.92rem;
}

.models {
  margin-top: 72px;
}

.model-tabs {
  flex-wrap: wrap;
  gap: 0 8px;
  margin-top: 18px;
  border-bottom: 1px solid var(--sdc-line);
}

.model-tabs .tab {
  width: auto;
  border: 0;
  box-shadow: none;
  padding: 12px 14px;
}

.model-tabs .tab[aria-selected="true"] {
  box-shadow: inset 0 -2px 0 var(--sdc-accent);
  padding-inline-start: 14px;
}

.model-stage {
  min-height: 3.2rem;
  padding-top: 18px;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.partner {
  background: var(--sdc-partner);
  color: var(--sdc-partner-text);
  padding-block: var(--space);
}

.partner .idx,
.partner .duty h3 {
  color: #8fb8c9;
}

.statement {
  max-width: 12em;
  margin-top: 18px;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
}

.partner-lead {
  max-width: 40rem;
  margin-top: 20px;
  color: var(--sdc-partner-muted);
}

.partner-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin-top: 36px;
  font-family: var(--sdc-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.partner-flow li {
  display: flex;
  align-items: center;
}

.partner-flow li:not(:last-child)::after {
  content: "";
  width: 28px;
  height: 1px;
  margin-inline: 10px;
  background: #8fb8c9;
}

.duty {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 36px;
}

.duty li {
  border-bottom-color: rgba(244, 241, 234, 0.16);
}

.partner-note {
  color: var(--sdc-partner-muted);
}

.partner .btn-primary {
  background: var(--sdc-partner-text);
  color: var(--sdc-partner);
}

.partner .btn-primary:hover {
  background: #fff;
}

.partner .btn-line {
  border-color: rgba(244, 241, 234, 0.35);
  color: var(--sdc-partner-text);
}

.qualify-grid,
.market-layout,
.close-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: 40px 64px;
}

.signals li {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) 1.3fr;
  gap: 18px;
  padding: 16px 0 16px 16px;
  border-bottom: 1px solid var(--sdc-line);
  box-shadow: inset 2px 0 0 transparent;
}

.signals li:first-child {
  border-top: 1px solid var(--sdc-line);
}

.signals h3::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-end: 10px;
  border-radius: 50%;
  background: var(--sdc-accent);
  transform: translateY(-1px);
}

.signals p {
  color: var(--sdc-muted);
}

.quiet {
  grid-column: 2;
}

.network-main,
.network-more {
  flex-wrap: wrap;
  gap: 18px 28px;
}

.network-main {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -0.04em;
  font-weight: 560;
}

.network-main span {
  position: relative;
}

.network-main span:not(:last-child)::after {
  content: "";
  width: 36px;
  height: 1px;
  margin-inline-start: 18px;
  background: var(--sdc-accent);
}

.network-more {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--sdc-line);
  color: var(--sdc-muted);
}

.principles div {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) 1fr;
  gap: 18px;
  padding-block: 16px;
  border-top: 1px solid var(--sdc-line);
}

.principles div:last-child {
  border-bottom: 1px solid var(--sdc-line);
}

.principles dt {
  font-weight: 620;
  letter-spacing: -0.02em;
}

.principles dd {
  margin: 0;
  color: var(--sdc-muted);
}

#why h2 {
  max-width: 12em;
  margin-bottom: 28px;
}

.inquiry,
.inquiry-success {
  background: var(--sdc-white);
  border: 1px solid var(--sdc-line);
  padding: 22px;
}

.inquiry-success {
  grid-column: 2;
}

.intent-set {
  gap: 16px;
  border: 0;
  padding: 0;
  margin-bottom: 8px;
}

.inquiry legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.inquiry label {
  display: block;
  margin-top: 14px;
  margin-bottom: 6px;
  font-size: 0.84rem;
  color: var(--sdc-muted);
}

.intent-set {
  flex-wrap: wrap;
  row-gap: 10px;
}

.intent-set label {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--sdc-text);
}

.inquiry input,
.inquiry select,
.inquiry textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--sdc-line-strong);
  background: transparent;
  padding: 10px 0;
  border-radius: 0;
}

.inquiry input[aria-invalid="true"],
.inquiry textarea[aria-invalid="true"] {
  border-bottom-color: var(--sdc-danger);
}

.field-error {
  color: var(--sdc-danger);
  font-size: 0.84rem;
}

.inquiry .btn {
  margin-top: 18px;
}

.inquiry-success pre {
  white-space: pre-wrap;
  margin: 16px 0;
  font-family: var(--sdc-mono);
  font-size: 0.78rem;
}

.site-footer {
  background: var(--sdc-white);
  border-top: 1px solid var(--sdc-line);
  padding-top: 48px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 0.6fr 0.6fr;
  gap: 28px;
}

.footer-brand img {
  width: min(280px, 100%);
  height: auto;
}

.footer-brand p,
.footer-base {
  color: var(--sdc-muted);
}

.site-footer li {
  padding-block: 5px;
}

.footer-base {
  justify-content: space-between;
  margin-top: 28px;
  padding-block: 16px;
  border-top: 1px solid var(--sdc-line);
}

.close-grid {
  align-items: start;
}

@media (max-width: 1024px) {
  .hero-grid,
  .tech-grid,
  .product,
  .product-move,
  .qualify-grid,
  .market-layout,
  .close-grid,
  .duty,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    grid-template-areas:
      "copy"
      "atlas";
    min-height: 0;
    padding-top: 36px;
  }

  .atlas {
    max-width: 460px;
  }

  .timeline {
    grid-template-columns: 1fr;
    gap: 0;
    padding-inline-start: 8px;
  }

  .timeline::before {
    inset-inline-start: 21px;
    inset-inline-end: auto;
    top: 0;
    bottom: 0;
    width: 1px;
    height: auto;
    transform: scaleY(var(--p, 0));
    transform-origin: top center;
  }

  .timeline li {
    padding: 0 0 26px 48px;
  }

  .quiet,
  .inquiry-success {
    grid-column: auto;
  }

  .study {
    min-height: 360px;
  }
}

.trust-line {
  margin-top: 16px;
  font-weight: 620;
}

.chain li,
.plain li,
.compare li {
  padding: 11px 0;
  border-bottom: 1px solid var(--sdc-line);
}

.chain li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 12px;
  align-items: baseline;
}

.chain span {
  color: var(--sdc-accent);
  font-family: var(--sdc-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.compare-line {
  display: none;
}

.compare-before,
.compare-after {
  padding: 32px 28px 12px;
}

.compare-before {
  border: 1px solid var(--sdc-line);
}

.compare-after {
  background: var(--sdc-stage);
  color: #f3f6f8;
}

.compare-after h3 {
  color: #fff;
}

.compare-after li {
  border-bottom-color: rgba(243, 246, 248, 0.16);
}

.compare h3 {
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  font-weight: 560;
}

.compare-line {
  position: relative;
  min-height: 100%;
}

.compare-line::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--sdc-accent);
}

@media (max-width: 1180px) {
  .nav,
  .header-cta {
    display: none;
  }

  .menu-btn {
    display: grid;
  }
}

@media (max-width: 860px) {
  .nav,
  .header-cta {
    display: none;
  }

  .menu-btn {
    display: grid;
  }

  .wrap {
    width: min(var(--wrap), calc(100% - 32px));
  }

  h1 {
    font-size: clamp(2.5rem, 11vw, 3.4rem);
  }

  .explorer,
  .columns,
  .practices,
  .principles div,
  .signals li {
    grid-template-columns: 1fr;
  }

  .explorer {
    display: flex;
    flex-direction: column;
  }

  .explorer .panel {
    grid-column: auto;
    grid-row: auto;
    padding: 8px 0 22px;
  }

  .signals li {
    padding-inline-start: 0;
  }
}

@media (max-width: 480px) {
  .chip-b { display: none; }
  .study-main { margin-inline-start: 0; }
  .network-main { font-size: 1.45rem; }
  .network-main span:not(:last-child)::after { display: none; }
}

html[dir="rtl"] .tab[aria-selected="true"] {
  box-shadow: inset -2px 0 0 var(--sdc-accent);
}

html[dir="rtl"] .model-tabs .tab[aria-selected="true"] {
  box-shadow: inset 0 -2px 0 var(--sdc-accent);
}

@media (min-width: 1025px) {
  html[dir="rtl"] .timeline::before {
    transform-origin: right center;
  }
}

html[dir="rtl"] .bridge-line li:not(:last-child)::after {
  content: "←";
}

html[lang="ar"] {
  --sdc-font: "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
  --sdc-display: "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
}

html[lang="ar"] body {
  line-height: 1.75;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] .statement,
html[lang="ar"] .panel-problem,
html[lang="ar"] .panel h3,
html[lang="ar"] .product h3 {
  letter-spacing: 0;
  line-height: 1.25;
}

html[lang="ar"] .eyebrow,
html[lang="ar"] .idx,
html[lang="ar"] .bridge h2,
html[lang="ar"] .bridge-line,
html[lang="ar"] .atlas-labels,
html[lang="ar"] .learn-path li,
html[lang="ar"] .partner-flow,
html[lang="ar"] .columns h4,
html[lang="ar"] .duty h3,
html[lang="ar"] .models > h3,
html[lang="ar"] .quiet h3,
html[lang="ar"] footer h2,
html[lang="ar"] .study-bar,
html[lang="ar"] .num,
html[lang="ar"] .product-kicker,
html[lang="ar"] .study-note,
html[lang="ar"] .panel-kicker,
html[lang="ar"] figcaption {
  letter-spacing: 0;
  text-transform: none;
}

.spot {
  max-width: 36rem;
  margin-top: 18px;
  color: var(--sdc-text);
  font-weight: 560;
}

.text-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--sdc-accent);
  font-weight: 620;
  border-bottom: 1px solid var(--sdc-accent);
}

.help-grid,
.next-grid,
.ready-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  gap: 36px 64px;
  align-items: start;
}

.help-grid + .wrap {
  margin-top: 56px;
}

.practices article:last-child {
  grid-column: 1 / -1;
}

.panel > p {
  max-width: 40rem;
}

.panel details {
  margin-top: 18px;
}

.panel summary,
.faq summary,
.depth summary {
  cursor: pointer;
  font-weight: 620;
}

.panel summary {
  color: var(--sdc-accent);
}

.depth {
  border-top: 1px solid var(--sdc-line);
}

.depth summary {
  padding: 18px 0;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  list-style: none;
}

.depth summary::-webkit-details-marker {
  display: none;
}

.depth .tech-grid {
  padding-bottom: 12px;
}

.estimate {
  max-width: 44rem;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--sdc-line);
}

.estimate h3 {
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  font-weight: 560;
}

.estimate p,
.ready-note {
  margin-top: 12px;
  color: var(--sdc-muted);
}

.ready-grid fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.ready-grid legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.ready-grid label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--sdc-line);
}

.ready-note:not([hidden]) {
  color: var(--sdc-accent-ink);
  font-weight: 620;
}

.ready-grid .btn {
  margin-top: 18px;
}

.faq details {
  border-top: 1px solid var(--sdc-line);
}

.faq details:last-child {
  border-bottom: 1px solid var(--sdc-line);
}

.faq summary {
  padding: 16px 0;
  letter-spacing: -0.02em;
}

.faq details p {
  margin: 0 0 16px;
  max-width: 42rem;
  color: var(--sdc-muted);
}

.roles div {
  display: grid;
  grid-template-columns: minmax(140px, 0.45fr) 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--sdc-line);
}

.roles dt {
  font-weight: 620;
}

.roles dd {
  margin: 0;
  color: var(--sdc-muted);
}

.form-lead,
.step-label {
  margin-top: 18px;
  font-weight: 620;
  letter-spacing: -0.02em;
}

.step-label {
  color: var(--sdc-accent);
  font-size: 0.92rem;
}

@media (max-width: 1024px) {
  .help-grid,
  .next-grid,
  .ready-grid,
  .roles div,
  .compare,
  .chain li {
    grid-template-columns: 1fr;
  }

  .compare-line {
    min-height: 28px;
  }

  .compare-line::before {
    inset-inline: 0;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pulse,
  .stack::after {
    animation: none;
  }
  .reveal {
    transform: none;
  }
}

.kit-hero {
  padding: 72px 0 28px;
}

.kit-hero h1 {
  max-width: 12em;
  color: var(--sdc-ink);
}

.kit-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  margin-top: 36px;
}

.kit-flow li {
  display: flex;
  align-items: center;
  font-weight: 620;
  letter-spacing: -0.02em;
}

.kit-flow li:not(:last-child)::after {
  content: "";
  width: 28px;
  height: 1px;
  margin-inline: 12px;
  background: var(--sdc-ink);
}

.kit-kpi {
  max-width: 40rem;
  margin-top: 28px;
  color: var(--sdc-muted);
}

.kit-offers,
.kit-asks,
.kit-objections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
}

.kit-asks {
  grid-template-columns: 1fr 1fr 1fr;
}

.kit-offers article,
.kit-asks > div,
.kit-objections article {
  padding: 28px 0;
  border-top: 1px solid var(--sdc-line);
}

.kit-offers h3,
.kit-asks h3,
.kit-objections h3,
.kit-split h3 {
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  font-weight: 620;
}

.kit-offers p,
.kit-objections p,
.kit-case p {
  margin-top: 10px;
  color: var(--sdc-muted);
}

.kit-split {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  gap: 36px 64px;
  align-items: start;
}

.kit-split h3 {
  margin-top: 28px;
}

.kit-split h3:first-child {
  margin-top: 0;
}

.kit-script {
  padding: 28px 0;
  border-top: 1px solid var(--sdc-line);
}

.kit-script header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.kit-script h3 {
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.kit-script p {
  max-width: 46rem;
  margin-top: 14px;
  font-size: 1.15rem;
  line-height: 1.55;
}

.kit-case {
  padding: 36px 0;
  border-top: 1px solid var(--sdc-line);
}

.kit-case h3 {
  margin-top: 8px;
  font-size: clamp(2rem, 3vw, 2.8rem);
  letter-spacing: -0.04em;
  font-weight: 560;
}

.kit-when li {
  padding: 14px 0;
  border-bottom: 1px solid var(--sdc-line);
  font-size: 1.15rem;
}

.kit-rule {
  background: var(--sdc-stage);
  color: #f3f6f8;
  padding-block: var(--space);
}

.kit-rule .idx,
.kit-rule h2,
.kit-rule p {
  color: #f3f6f8;
}

.kit-rule h2 {
  max-width: 14em;
}

.kit-rule p {
  max-width: 38rem;
  margin-top: 16px;
}

.kit-instead {
  font-size: 1.25rem;
  font-weight: 560;
}

.kit-submit .inquiry h3 {
  margin-top: 26px;
  margin-bottom: 4px;
}

.kit-submit .inquiry h3:first-child {
  margin-top: 0;
}

.kit-submit .inquiry-success {
  grid-column: 2;
}

@media (max-width: 900px) {
  .kit-offers,
  .kit-asks,
  .kit-objections,
  .kit-split {
    grid-template-columns: 1fr;
  }

  .kit-submit .inquiry-success {
    grid-column: auto;
  }
}
