:root {
  --ink: #050505;
  --muted: #5f5f64;
  --line: #e8e8ea;
  --soft: #f4f4f5;
  --paper: #ffffff;
  --font-display: "Satoshi", "Geist", sans-serif;
  --cyan: #ffffff;
  --rose: #111111;
  --ember: #5c5c5c;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  color: var(--ink);
  background: #ffffff;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: #fff;
  filter: grayscale(1);
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  color: #fff;
  background: #111;
}

.hero-shell {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 35%, #fff 0, rgba(255, 255, 255, 0.96) 38%, rgba(246, 246, 247, 0.84) 72%, #fff 100%),
    var(--paper);
  box-shadow: none;
}

.navbar {
  width: min(776px, calc(100% - 42px));
  min-height: 72px;
  margin-top: 30px;
  padding: 10px 16px 10px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px);
}

.brand,
.nav-links,
.nav-cta {
  display: flex;
  align-items: center;
}

.brand {
  gap: 12px;
  font-size: 1.25rem;
  font-weight: 680;
  white-space: nowrap;
}

.brand-logo {
  width: 154px;
  height: auto;
  display: block;
}

.nav-links {
  gap: clamp(26px, 3.25vw, 58px);
  font-size: 1rem;
  font-weight: 540;
}

.nav-links a,
.footer-links a,
.status-link,
.text-link {
  transition: opacity 180ms ease, color 180ms ease;
}

.nav-links a:hover,
.footer-links a:hover,
.status-link:hover,
.text-link:hover {
  opacity: 0.58;
}

.nav-cta {
  justify-self: end;
  min-height: 46px;
  padding: 0 27px;
  justify-content: center;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 1rem;
  font-weight: 650;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 8px 20px rgba(0, 0, 0, 0.16);
  white-space: nowrap;
}

.hero-content {
  width: min(1080px, calc(100% - 34px));
  margin-top: 30px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gateway-visual {
  width: 420px;
  max-width: 100%;
  display: grid;
  place-items: center;
  position: relative;
}

.gateway-image {
  width: 100%;
  height: auto;
  display: block;
  filter: none;
}

.eyebrow {
  margin: 12px 0 25px;
  color: #77777f;
  font-size: 0.96rem;
  font-weight: 650;
  letter-spacing: 0.22em;
}

h1 {
  width: 100%;
  max-width: 1080px;
  margin: 0;
  font-size: 5.25rem;
  line-height: 1.015;
  letter-spacing: 0;
  font-weight: 700;
  font-family: var(--font-display);
}

h1 span {
  display: block;
  white-space: nowrap;
}

.subhead {
  max-width: 680px;
  margin: 24px 0 0;
  color: #626267;
  font-size: 1.25rem;
  line-height: 1.42;
  font-weight: 430;
}

.hero-actions {
  margin-top: 34px;
  display: flex;
  justify-content: center;
  gap: 24px;
}

.button {
  min-width: 206px;
  min-height: 59px;
  padding: 0 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 1.06rem;
  font-weight: 620;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button:hover,
.nav-cta:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: #000;
  color: #fff;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.button-secondary {
  background: #ededee;
  color: #242428;
}

.trusted {
  width: 100%;
  margin-top: clamp(52px, 5.6vh, 70px);
  margin-bottom: clamp(34px, 4.5vh, 54px);
  text-align: center;
}

.trusted > p {
  margin: 0 0 17px;
  color: #8a8a91;
  font-size: 1.08rem;
  font-weight: 520;
}

.logo-row {
  min-height: 96px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.5);
}

.logo-item {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-left: 1px solid var(--line);
  font-size: 1.38rem;
  font-weight: 650;
  white-space: nowrap;
}

.partner-logo {
  width: 26px;
  height: 26px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}

.partner-logo-wide {
  width: min(128px, 78%);
  height: 34px;
}

.partner-logo + span {
  line-height: 1;
}

.logo-item:first-child {
  border-left: 0;
}

.logo-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  position: relative;
}

.hex {
  border: 3px solid #070707;
  border-radius: 9px;
  transform: rotate(45deg);
}

.hex::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 3px solid #070707;
  border-radius: 7px;
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  border: 3px solid #070707;
}

.cloud::before {
  left: 2px;
  right: 2px;
  bottom: 7px;
  height: 15px;
  border-top: 0;
  border-radius: 0 0 14px 14px;
}

.cloud::after {
  left: 6px;
  top: 5px;
  width: 22px;
  height: 18px;
  border-bottom-color: transparent;
  border-radius: 18px 18px 10px 6px;
}

.cloud {
  border-bottom: 3px solid #070707;
  border-radius: 18px;
}

.square {
  border: 3px solid #070707;
  border-radius: 10px;
}

.data::before {
  content: "";
  position: absolute;
  inset: 5px 2px 5px 10px;
  border: 8px solid #070707;
  border-left-width: 0;
  border-radius: 0 3px 3px 0;
}

.data::after {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 14px;
  height: 8px;
  background: #070707;
  box-shadow: 0 -9px 0 -3px #070707, 0 9px 0 -3px #070707;
}

.bars::before {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 5px;
  width: 7px;
  height: 11px;
  background: #070707;
  box-shadow: 11px -6px 0 #070707, 22px -13px 0 #070707;
  transform: skewY(-18deg);
}

.section-wrap {
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
}

.protocol-strip {
  width: 100%;
  overflow: hidden;
  color: #fff;
  background: #0a0a0a;
  border-top: 1px solid #080808;
  border-bottom: 1px solid #080808;
}

.protocol-track {
  width: max-content;
  min-height: 54px;
  display: flex;
  align-items: center;
  animation: protocol-move 30s linear infinite;
}

.protocol-track span {
  padding: 0 28px;
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.14em;
}

.protocol-track i {
  width: 8px;
  height: 8px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #fff;
}

@keyframes protocol-move {
  to { transform: translateX(-50%); }
}

.models-section {
  padding: 145px 0 0;
  background: #fff;
}

.models-heading,
.pricing-heading,
.use-cases-intro {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12%;
  align-items: end;
}

.models-heading h2,
.integration-copy h2,
.pricing-heading h2,
.use-cases-intro h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 4.2rem;
  line-height: 1.03;
  letter-spacing: 0;
  font-weight: 700;
}

.models-summary {
  padding-bottom: 7px;
}

.models-summary > strong {
  display: block;
  font-family: var(--font-display);
  font-size: 4.8rem;
  line-height: 0.9;
  font-weight: 700;
}

.models-summary p {
  max-width: 390px;
  margin: 22px 0;
  color: #777;
  line-height: 1.55;
}

.model-directory {
  counter-reset: model-card;
  width: min(1380px, calc(100% - 64px));
  margin: 90px auto 0;
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
}

.model-row {
  counter-increment: model-card;
  min-height: 112px;
  display: grid;
  grid-template-columns: 42px 54px minmax(260px, 1fr) 145px 180px 92px;
  align-items: center;
  gap: 22px;
  border-top: 1px solid #dedede;
}

.model-row::before {
  content: "0" counter(model-card);
  position: absolute;
  right: 30px;
  top: 62px;
  color: #f0f0f0;
  font-family: var(--font-display);
  font-size: 6.5rem;
  line-height: 1;
  font-weight: 700;
  pointer-events: none;
}

.model-row > * { position: relative; z-index: 1; }
.model-row:hover::before { color: #191919; }

.model-row:first-child { border-top: 0; }
.model-row:hover { background: #f7f7f7; }
.model-index { color: #aaa; font-size: 0.68rem; }
.model-monogram { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #bcbcbc; font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; }
.model-name strong, .model-name small { display: block; }
.model-name strong { margin-bottom: 6px; font-size: 1rem; font-weight: 620; }
.model-name small, .model-context, .model-price { color: #868686; font-size: 0.72rem; }
.model-badge { padding: 6px 8px; border: 1px solid #bbb; font-size: 0.58rem; font-style: normal; font-weight: 650; text-align: center; }

.section-kicker {
  margin: 0 0 24px;
  color: #77777f;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.18em;
}

.story-section {
  padding: 160px 0 130px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), #f0f0f1 50%, transparent calc(50% + 1px)),
    #fff;
}

.integration-section {
  padding: 145px 0;
  color: #fff;
  background: #090909;
}

.integration-layout {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 10%;
  align-items: center;
}

.integration-layout > * { min-width: 0; }

.integration-copy .section-kicker { color: #777; }
.integration-copy h2 { font-size: 3.9rem; }
.integration-copy > p:not(.section-kicker) { max-width: 510px; margin: 30px 0 42px; color: #969696; font-size: 1.02rem; line-height: 1.68; }
.integration-points { display: grid; border-top: 1px solid #2c2c2c; }
.integration-points span { min-height: 54px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid #2c2c2c; color: #cacaca; font-size: 0.78rem; }
.integration-points strong { color: #606060; font-size: 0.64rem; font-weight: 570; }

.code-window { width: 100%; max-width: 100%; border: 1px solid #363636; background: #111; box-shadow: 18px 18px 0 #202020; }
.code-window-bar { min-height: 48px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #363636; color: #838383; font-size: 0.64rem; }
.code-window pre { margin: 0; padding: 38px; overflow-x: auto; }
.code-window code { color: #f2f2f2; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.78rem; line-height: 1.9; }
.code-window mark { padding: 3px 4px; color: #111; background: #fff; }
.code-muted { color: #777; }
.code-result { min-height: 56px; padding: 0 18px; display: flex; align-items: center; gap: 14px; border-top: 1px solid #363636; color: #8d8d8d; font-size: 0.65rem; }
.code-result i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.5); }
.code-result strong { margin-left: auto; color: #fff; font-weight: 580; }

.pricing-section {
  padding: 150px 0;
  background: #f4f4f4;
}

.pricing-heading { align-items: start; }
.pricing-heading h2 { line-height: 1.12; }
.pricing-heading > p { max-width: 470px; margin: 48px 0 0; color: #747474; font-size: 1.02rem; line-height: 1.65; }
.pricing-comparison { width: min(1240px, calc(100% - 64px)); margin: 88px auto 0; border-top: 1px solid #111; border-bottom: 1px solid #111; background: #fff; }
.pricing-table-head,
.pricing-line { display: grid; grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(130px, 0.7fr)); align-items: center; gap: 24px; }
.pricing-table-head { min-height: 48px; padding: 0 24px; color: #999; background: #fafafa; font-size: 0.62rem; text-transform: uppercase; }
.pricing-line { min-height: 88px; padding: 0 24px; border-top: 1px solid #e2e2e2; }
.pricing-line strong { font-size: 0.9rem; font-weight: 620; }
.pricing-line span { color: #808080; font-size: 0.85rem; }
.pricing-line span:nth-child(2) { text-decoration: line-through; }
.pricing-line i { width: fit-content; padding: 7px 9px; color: #fff; background: #111; font-size: 0.65rem; font-style: normal; font-weight: 650; }
.pricing-note { min-height: 66px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-top: 1px solid #111; color: #858585; font-size: 0.68rem; }
.pricing-note a { color: #111; font-size: 0.78rem; font-weight: 620; }

.story-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(380px, 0.75fr);
  gap: 12%;
  align-items: start;
}

.story-heading h2,
.faq-intro h2,
.footer-cta h2 {
  margin: 0;
  letter-spacing: 0;
  font-weight: 700;
  font-family: var(--font-display);
}

.story-heading h2 {
  max-width: 710px;
  font-size: 4.2rem;
  line-height: 1.04;
}

.story-index {
  margin-top: 70px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid #dedee1;
  color: #9a9aa0;
  font-size: 0.68rem;
  line-height: 1.45;
  font-weight: 560;
  text-transform: uppercase;
}

.story-index span:last-child { text-align: right; }

.story-copy {
  padding-top: 46px;
  color: #69696f;
  font-size: 1.06rem;
  line-height: 1.7;
}

.story-copy > p {
  margin: 0 0 24px;
}

.story-copy .story-lead {
  color: #171719;
  font-size: 1.32rem;
  line-height: 1.5;
  font-weight: 520;
}

.story-principle {
  margin-top: 42px;
  padding: 24px 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.story-principle span {
  color: #8b8b91;
  font-size: 0.84rem;
}

.story-principle strong {
  color: #111;
  font-size: 1rem;
  font-weight: 600;
}

.access-flow {
  width: min(1380px, calc(100% - 64px));
  margin: 110px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #111;
  box-shadow: 12px 12px 0 #111;
}

.flow-item {
  min-height: 250px;
  padding: 42px 44px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-left: 1px solid #111;
}

.flow-item:first-child {
  border-left: 0;
}

.flow-number {
  margin-bottom: auto;
  color: #d3d3d6;
  font-size: 3.8rem;
  line-height: 1;
  font-weight: 620;
}

.provider-stack {
  margin-bottom: auto;
  display: grid;
  gap: 7px;
}

.provider-stack span {
  width: min(100%, 250px);
  min-height: 34px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #d9d9dc;
  background: #fafafa;
  color: #7b7b81;
  font-size: 0.68rem;
  font-weight: 590;
  text-transform: uppercase;
}

.provider-stack span:nth-child(2) { margin-left: 17px; }
.provider-stack span:nth-child(3) { margin-left: 34px; }

.provider-stack i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #111;
  box-shadow: none;
}

.flow-item strong {
  margin-bottom: 10px;
  font-size: 1.2rem;
  font-weight: 600;
}

.flow-item p {
  max-width: 310px;
  margin: 0;
  color: #77777d;
  line-height: 1.5;
}

.flow-center {
  color: #fff;
  background: #0a0a0a;
}

.flow-center p { color: #888; }

.route-stage {
  width: 100%;
  height: 92px;
  margin-bottom: auto;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.flow-gate {
  width: 64px;
  height: 64px;
  margin-bottom: auto;
  position: relative;
  z-index: 2;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 9px #0a0a0a, inset 0 0 0 11px #fff;
}

.flow-gate::before,
.flow-gate::after {
  content: "";
  position: absolute;
  background: #fff;
}

.route-line {
  width: 42%;
  height: 1px;
  position: absolute;
  left: 0;
  top: 50%;
  transform-origin: right center;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9));
}

.route-a { transform: rotate(17deg); }
.route-c { transform: rotate(-17deg); }

.route-pulse {
  width: 6px;
  height: 6px;
  position: absolute;
  left: 4%;
  top: calc(50% - 3px);
  z-index: 3;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.75);
  animation: route-request 2.8s ease-in-out infinite;
}

@keyframes route-request {
  0% { left: 4%; opacity: 0; }
  12% { opacity: 1; }
  62% { left: 49%; opacity: 1; }
  100% { left: 92%; opacity: 0; }
}

.saving-mark {
  margin-bottom: auto;
  display: flex;
  align-items: flex-end;
  color: #111;
}

.saving-mark span {
  margin: 0 10px 10px 0;
  padding: 5px 7px;
  color: #fff;
  background: #111;
  font-size: 0.58rem;
  font-weight: 700;
}

.saving-mark strong {
  margin: 0;
  font-size: 5.5rem;
  line-height: 0.8;
  font-weight: 700;
  font-family: var(--font-display);
}

.saving-mark i {
  margin-left: 5px;
  color: #777;
  font-size: 2rem;
  line-height: 1;
  font-style: normal;
  font-weight: 700;
}

.flow-gate::before {
  width: 92px;
  height: 2px;
  left: -16px;
  top: 29px;
}

.flow-gate::after {
  width: 2px;
  height: 92px;
  left: 29px;
  top: -16px;
}

.uptime-section {
  min-height: 720px;
  padding: 130px 0;
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #080808;
}

.uptime-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to right, transparent, #000 38%, #000);
}

.uptime-glow {
  width: 680px;
  height: 680px;
  position: absolute;
  right: -170px;
  top: 15px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  box-shadow: 0 0 140px rgba(255, 255, 255, 0.04), inset 0 0 140px rgba(255, 255, 255, 0.025);
}

.uptime-glow::before,
.uptime-glow::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

.uptime-glow::before { inset: 95px; }
.uptime-glow::after { inset: 210px; }

.uptime-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 10%;
  align-items: center;
  position: relative;
  z-index: 1;
}

.status-label {
  width: fit-content;
  margin-bottom: 68px;
  padding: 8px 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #e4e4e4;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.78rem;
  font-weight: 550;
}

.status-label span,
.footer-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}

.uptime-copy .section-kicker { color: #747a77; }

.uptime-copy h2 {
  margin: 0;
  font-size: 4.5rem;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 600;
  font-family: var(--font-display);
}

.uptime-copy h2 span { color: #fff; }

.uptime-copy > p:not(.section-kicker) {
  max-width: 500px;
  margin: 30px 0;
  color: #9c9f9d;
  font-size: 1.08rem;
  line-height: 1.65;
}

.status-link,
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.94rem;
  font-weight: 590;
}

.uptime-visual {
  min-height: 470px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(13, 13, 13, 0.82);
  backdrop-filter: blur(12px);
}

.uptime-visual::before {
  content: "STATUS / 001";
  position: absolute;
  right: -25px;
  top: 120px;
  color: rgba(255,255,255,0.035);
  font-size: 5rem;
  line-height: 1;
  font-weight: 700;
  transform: rotate(90deg);
}

.network-orbit {
  width: 230px;
  height: 230px;
  margin: 18px auto 0;
  display: grid;
  place-items: center;
  position: relative;
}

.orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.orbit-one { inset: 20px; }
.orbit-two { inset: 0; border-style: dashed; animation: orbit-spin 24s linear infinite; }

.orbit-core {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  z-index: 2;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #111;
  box-shadow: 0 0 45px rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
  font-weight: 680;
}

.network-orbit .node {
  width: 9px;
  height: 9px;
  position: absolute;
  border: 2px solid #080808;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
}

.node-a { top: 16px; left: 64px; }
.node-b { top: 80px; right: 4px; }
.node-c { bottom: 20px; right: 54px; }
.node-d { bottom: 48px; left: 18px; }

@keyframes orbit-spin { to { transform: rotate(360deg); } }

.uptime-meta,
.uptime-days {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.uptime-meta span,
.uptime-days {
  color: #808481;
  font-size: 0.78rem;
}

.uptime-meta strong {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 590;
}

.uptime-bars {
  height: 68px;
  margin: auto 0 18px;
  display: grid;
  grid-template-columns: repeat(30, minmax(3px, 1fr));
  align-items: end;
  gap: 7px;
}

.uptime-bars i {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(to top, #777, #fff);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
}

.uptime-bars i:nth-child(3n) { height: 94%; }
.uptime-bars i:nth-child(4n) { height: 97%; }
.uptime-bars i:nth-child(7n) { height: 91%; }

.use-cases-section {
  padding: 150px 0 0;
  background: #fff;
}

.use-cases-intro { align-items: start; }
.use-cases-intro > p:last-child { max-width: 470px; margin: 50px 0 0; color: #777; font-size: 1.04rem; line-height: 1.65; }
.use-case-list { width: min(1380px, calc(100% - 64px)); margin: 95px auto 0; border-top: 1px solid #111; }
.use-case-list article { min-height: 220px; padding: 42px 0; display: grid; grid-template-columns: 54px minmax(310px, 1.1fr) minmax(280px, 0.9fr) 150px; align-items: center; gap: 6%; border-bottom: 1px solid #d7d7d7; }
.case-number { color: #aaa; font-size: 0.68rem; }
.use-case-list small { color: #8a8a8a; font-size: 0.64rem; font-weight: 620; letter-spacing: 0.12em; }
.use-case-list h3 { max-width: 520px; margin: 14px 0 0; font-family: var(--font-display); font-size: 2rem; line-height: 1.08; letter-spacing: 0; font-weight: 700; }
.use-case-list article > p { max-width: 410px; margin: 0; color: #777; line-height: 1.65; }
.case-stat { color: #858585; font-size: 0.72rem; text-align: right; }
.case-stat strong { display: block; margin-bottom: 5px; color: #111; font-family: var(--font-display); font-size: 2.3rem; line-height: 1; font-weight: 700; }

.faq-section {
  padding: 150px 0;
  position: relative;
  background:
    linear-gradient(90deg, #111 0 10px, transparent 10px),
    #f7f7f8;
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(480px, 1fr);
  gap: 12%;
  align-items: start;
}

.faq-intro {
  position: sticky;
  top: 50px;
}

.faq-intro h2 {
  font-size: 3.7rem;
  line-height: 1.04;
}

.faq-intro > p:not(.section-kicker) {
  max-width: 430px;
  margin: 28px 0;
  color: #74747a;
  font-size: 1.05rem;
  line-height: 1.6;
}

.text-link { color: #111; }

.faq-list {
  border-top: 1px solid #dcdcdf;
}

.faq-list details {
  border-bottom: 1px solid #dcdcdf;
}

.faq-list summary {
  min-height: 94px;
  padding: 28px 58px 28px 0;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-size: 1.16rem;
  font-weight: 590;
  transition: padding-left 180ms ease, color 180ms ease;
}

.faq-list summary:hover {
  padding-left: 12px;
  color: #555;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::before,
.faq-list summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 18px;
  height: 2px;
  background: #111;
}

.faq-list summary::after {
  transform: rotate(90deg);
  transition: transform 180ms ease;
}

.faq-list details[open] summary::after { transform: rotate(0); }

.faq-list details p {
  max-width: 680px;
  margin: -8px 58px 30px 0;
  color: #6c6c72;
  line-height: 1.65;
}

.site-footer {
  color: #fff;
  background: #080808;
}

.footer-cta {
  padding: 110px 0;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 48px;
  border-bottom: 1px solid #272727;
}

.footer-cta .section-kicker { color: #717171; }

.footer-cta h2 {
  font-size: 4.2rem;
  line-height: 1.03;
}

.footer-button {
  min-width: 220px;
  color: #080808;
  background: #fff;
}

.footer-main {
  padding: 78px 0 90px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12%;
}

.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  font-size: 1.35rem;
}

.footer-brand > span { display: block; }
.footer-brand-logo { width: 194px; height: auto; display: block; }

.footer-brand small { display: block; }
.footer-brand small { margin-top: 8px; color: #767676; font-size: 0.88rem; font-weight: 430; }

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.footer-links div { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.footer-links strong { margin-bottom: 8px; color: #717171; font-size: 0.75rem; font-weight: 560; text-transform: uppercase; }
.footer-links a { color: #c8c8c8; font-size: 0.9rem; }

.footer-bottom {
  padding: 25px 0 32px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #272727;
  color: #696969;
  font-size: 0.78rem;
}

.footer-status { display: flex; align-items: center; gap: 9px; color: #929292; }
.footer-status i { display: block; width: 6px; height: 6px; }

.footer-wordmark {
  width: 100%;
  height: 210px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  color: #fff;
  font-size: 13rem;
  line-height: 0.82;
  font-weight: 700;
  font-family: var(--font-display);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .protocol-track,
  .route-pulse,
  .orbit-two { animation: none; }
}

@media (max-width: 1050px) {
  .story-layout,
  .uptime-layout,
  .faq-layout {
    gap: 7%;
  }

  .story-heading h2 { font-size: 3.5rem; }
  .models-heading h2,
  .pricing-heading h2,
  .use-cases-intro h2 { font-size: 3.5rem; }
  .integration-copy h2 { font-size: 3.3rem; }
  .uptime-copy h2 { font-size: 3.8rem; }
  .faq-intro h2 { font-size: 3.1rem; }
  .footer-cta h2 { font-size: 3.5rem; }

  .flow-item { padding: 36px 28px; }
  .model-row { grid-template-columns: 36px 48px minmax(220px, 1fr) 120px 150px 80px; gap: 16px; }
  .integration-layout { gap: 6%; }
  .use-case-list article { gap: 4%; }
  .uptime-bars { gap: 5px; }
  .footer-wordmark { height: 170px; font-size: 10rem; }
}

@media (max-width: 820px) {
  body {
    padding: 0;
  }

  .hero-shell {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .navbar {
    width: calc(100% - 24px);
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 10px 12px 10px 16px;
  }

  .nav-links {
    display: none;
  }

  .hero-content {
    width: calc(100% - 32px);
    margin-top: 30px;
  }

  .gateway-visual {
    width: min(390px, 92vw);
  }

  .eyebrow {
    font-size: 0.86rem;
  }

  h1 {
    max-width: 100%;
    font-size: 3rem;
    line-height: 1.04;
  }

  h1 span {
    white-space: normal;
  }

  .subhead {
    font-size: 1.08rem;
  }

  .hero-actions {
    width: min(100%, 430px);
    gap: 12px;
  }

  .button {
    min-width: 0;
    flex: 1;
    padding: 0 16px;
  }

  .logo-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logo-item {
    min-height: 76px;
    border-top: 1px solid var(--line);
    font-size: 1.02rem;
  }

  .logo-item:nth-child(odd) {
    border-left: 0;
  }

  .section-wrap,
  .access-flow {
    width: calc(100% - 40px);
  }

  .model-directory,
  .use-case-list,
  .pricing-comparison {
    width: calc(100% - 40px);
  }

  .models-section,
  .integration-section,
  .pricing-section,
  .use-cases-section {
    padding-top: 100px;
  }

  .models-heading,
  .pricing-heading,
  .use-cases-intro,
  .integration-layout {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .models-summary > strong { font-size: 4rem; }
  .model-directory { margin-top: 70px; }
  .model-row { grid-template-columns: 34px 46px minmax(190px, 1fr) 145px 76px; }
  .model-context { display: none; }

  .integration-section { padding-bottom: 100px; }
  .code-window { box-shadow: none; }

  .pricing-heading > p,
  .use-cases-intro > p:last-child { margin-top: 0; }
  .pricing-comparison { margin-top: 70px; overflow-x: auto; }
  .pricing-table-head,
  .pricing-line { min-width: 700px; }

  .model-pricing-card {
    width: calc(100% - 40px);
    margin-top: 70px;
    box-shadow: 9px 9px 0 #d8d8d8;
  }

  .model-pricing-top,
  .pricing-note {
    padding-left: 20px;
    padding-right: 20px;
  }

  .use-case-list { margin-top: 70px; }
  .use-case-list article { grid-template-columns: 40px 1fr; gap: 24px; }
  .use-case-list article > p,
  .case-stat { grid-column: 2; }
  .case-stat { text-align: left; }

  .story-section,
  .faq-section {
    padding: 100px 0;
  }

  .story-section { background: #fff; }

  .story-layout,
  .uptime-layout,
  .faq-layout,
  .footer-main {
    grid-template-columns: 1fr;
  }

  .story-layout,
  .faq-layout {
    gap: 58px;
  }

  .story-heading h2,
  .footer-cta h2 {
    font-size: 3.2rem;
  }

  .story-copy {
    padding-top: 0;
  }

  .access-flow {
    margin-top: 80px;
    grid-template-columns: 1fr;
  }

  .flow-item {
    min-height: 215px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .flow-item:first-child { border-top: 0; }

  .uptime-section {
    min-height: 0;
    padding: 100px 0;
  }

  .uptime-layout { gap: 70px; }
  .status-label { margin-bottom: 50px; }
  .uptime-visual { padding: 28px; }

  .faq-intro { position: static; }
  .faq-intro h2 { font-size: 3.2rem; }

  .footer-cta {
    padding: 90px 0;
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-main { gap: 70px; }
  .footer-wordmark { height: 120px; font-size: 7rem; }
}

@media (max-width: 520px) {
  .navbar {
    min-height: 62px;
  }

  .nav-cta {
    min-height: 40px;
    padding: 0 13px;
    font-size: 0.84rem;
  }

  .brand {
    font-size: 1rem;
  }

  .brand-logo { width: 132px; }
  .footer-brand-logo { width: 172px; }

  .gateway-visual {
    width: min(270px, 72vw);
  }

  .eyebrow {
    margin-bottom: 20px;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
  }

  h1 {
    font-size: 2.35rem;
    line-height: 1.05;
  }

  .subhead {
    margin-top: 22px;
    font-size: 1rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .logo-row {
    grid-template-columns: 1fr;
  }

  .logo-item {
    border-left: 0;
  }

  .section-wrap,
  .access-flow {
    width: calc(100% - 32px);
  }

  .model-directory,
  .use-case-list,
  .pricing-comparison {
    width: calc(100% - 32px);
  }

  .story-section,
  .faq-section,
  .uptime-section {
    padding: 78px 0;
  }

  .section-kicker {
    margin-bottom: 18px;
    font-size: 0.7rem;
  }

  .story-heading h2,
  .faq-intro h2,
  .footer-cta h2 {
    font-size: 2.45rem;
    line-height: 1.06;
  }

  .models-heading h2,
  .integration-copy h2,
  .pricing-heading h2,
  .use-cases-intro h2 {
    font-size: 2.45rem;
    line-height: 1.06;
  }

  .pricing-heading h2 { line-height: 1.14; }

  .models-summary > strong { font-size: 3.4rem; }
  .model-row { min-height: 142px; padding: 22px 0; grid-template-columns: 42px 1fr; gap: 10px 14px; }
  .model-row .model-index,
  .model-context,
  .model-badge { display: none; }
  .model-price { grid-column: 2; }

  .code-window pre { padding: 24px 18px; }
  .code-window code { font-size: 0.68rem; }
  .code-result { flex-wrap: wrap; padding: 12px 16px; }

  .use-case-list article { min-height: 0; padding: 34px 0; }
  .use-case-list h3 { font-size: 1.65rem; }
  .case-stat strong { font-size: 2rem; }

  .story-copy .story-lead {
    font-size: 1.16rem;
  }

  .story-principle {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .access-flow { margin-top: 60px; }
  .flow-item { padding: 30px 24px; }
  .flow-number { font-size: 3.1rem; }
  .provider-stack span { width: 220px; }
  .saving-mark strong { font-size: 4.8rem; }

  .uptime-copy h2 { font-size: 3.2rem; }
  .uptime-copy > p:not(.section-kicker) { font-size: 1rem; }
  .uptime-visual { padding: 22px 18px; }
  .uptime-visual::before { display: none; }
  .network-orbit { width: 205px; height: 205px; }
  .uptime-bars { height: 140px; gap: 3px; }

  .faq-list summary {
    min-height: 82px;
    padding-right: 42px;
    font-size: 1.02rem;
  }

  .faq-list details p { margin-right: 28px; }

  .footer-cta { padding: 76px 0; }
  .footer-button { width: 100%; }
  .footer-main { padding: 60px 0; }
  .footer-links { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .footer-bottom { flex-direction: column; gap: 18px; }
  .footer-wordmark { height: 72px; font-size: 4.1rem; }
}

@media (max-width: 390px) {
  h1 {
    font-size: 2.12rem;
  }
}

/* Refined trust, routing, model, and pricing systems */
.trusted {
  margin-top: 58px;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: 260px 1fr;
  border-top: 1px solid #242424;
  border-bottom: 1px solid #242424;
  color: #fff;
  background: #0a0a0a;
  text-align: left;
}

.trusted > p {
  min-height: 108px;
  margin: 0;
  padding: 0 30px;
  display: flex;
  align-items: center;
  border-right: 1px solid #292929;
  color: #888;
  font-size: 0.72rem;
  line-height: 1.45;
  font-weight: 520;
}

.logo-row {
  min-height: 108px;
  border: 0;
  color: #fff;
  background: #0a0a0a;
}

.logo-item {
  gap: 11px;
  border-left-color: #292929;
  font-size: 0.92rem;
  font-weight: 560;
}

.partner-logo {
  width: 25px;
  height: 25px;
}

.partner-logo-wide {
  width: min(126px, 76%);
  height: 32px;
}

.logo-icon {
  width: 25px;
  height: 25px;
  filter: invert(1);
}

.model-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #111;
  background: #fff;
}

.model-row {
  min-height: 248px;
  padding: 32px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: 18px;
  position: relative;
  border-top: 1px solid #d8d8d8;
  border-left: 1px solid #d8d8d8;
  transition: color 180ms ease, background 180ms ease;
}

.model-row:nth-child(-n + 2) { border-top: 0; }
.model-row:nth-child(odd) { border-left: 0; }
.model-row:hover { color: #fff; background: #0a0a0a; }
.model-row .model-monogram { grid-column: 1; grid-row: 1; }
.model-name { grid-column: 2; grid-row: 1; align-self: center; }
.model-context { grid-column: 2; grid-row: 3; }
.model-price { grid-column: 3; grid-row: 3; }
.model-row .model-index { grid-column: 1; grid-row: 3; align-self: end; }
.model-badge { grid-column: 3; grid-row: 1; }
.model-row:hover .model-name small,
.model-row:hover > span,
.model-row:hover .model-index { color: #909090; }
.model-row:hover .model-monogram,
.model-row:hover i { border-color: #555; }

.access-flow {
  min-height: 330px;
  border: 0;
  box-shadow: none;
  color: #fff;
  background: #0a0a0a;
}

.flow-item {
  min-height: 330px;
  padding: 42px;
  border-left-color: #303030;
  background: transparent;
}

.flow-center { background: #141414; }
.flow-item p, .flow-center p { color: #898989; }
.provider-stack span { border-color: #3a3a3a; color: #8f8f8f; background: transparent; }
.provider-stack i { background: #fff; }
.saving-mark { color: #fff; }
.saving-mark span { color: #111; background: #fff; }
.saving-mark i { color: #888; }

.model-pricing-card {
  width: min(1320px, calc(100% - 64px));
  margin: 82px auto 0;
  overflow: hidden;
  border: 1px solid #303030;
  border-radius: 16px;
  color: #f2f2f2;
  background: #111113;
  box-shadow: 18px 18px 0 #d8d8d8;
}

.model-pricing-top {
  min-height: 72px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #353535;
}

.model-pricing-top h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1;
  font-weight: 720;
}

.model-pricing-top span {
  color: #8a8a93;
  font-size: 0.88rem;
  font-weight: 650;
}

.model-pricing-scroll {
  width: 100%;
  overflow-x: auto;
}

.model-pricing-table {
  width: 100%;
  min-width: 1060px;
  border-collapse: collapse;
  font-size: 0.98rem;
}

.model-pricing-table th,
.model-pricing-table td {
  height: 68px;
  padding: 0 28px;
  border-bottom: 1px solid #343434;
  white-space: nowrap;
  text-align: right;
}

.model-pricing-table th:first-child,
.model-pricing-table td:first-child {
  min-width: 260px;
  text-align: left;
}

.model-pricing-table th {
  height: 52px;
  color: #9a9aa2;
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.model-pricing-table td {
  color: #dddddf;
  font-size: 1rem;
  font-weight: 560;
}

.model-pricing-table td:first-child {
  color: #f7f7f8;
  font-weight: 720;
}

.model-pricing-table td:nth-child(6) {
  color: #777782;
}

.model-pricing-table td:last-child {
  color: #3dd79d;
  font-weight: 780;
}

.model-pricing-table tbody tr:hover {
  background: #171719;
}

.model-pricing-table tbody tr:last-child td {
  border-bottom: 0;
}

.pricing-note {
  min-height: 62px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid #353535;
  color: #87878f;
  background: #0d0d0f;
  font-size: 0.78rem;
}

.pricing-note a {
  color: #fff;
  font-size: 0.86rem;
  font-weight: 720;
}

@media (max-width: 820px) {
  .trusted { grid-template-columns: 1fr; }
  .trusted > p { min-height: 68px; justify-content: center; border-right: 0; border-bottom: 1px solid #292929; text-align: center; }
  .logo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-item { min-height: 78px; border-top-color: #292929; }
  .logo-item:nth-child(odd) { border-left: 0; }
  .logo-item:last-child { grid-column: 1 / -1; }

  .model-directory { grid-template-columns: 1fr; }
  .model-row,
  .model-row:nth-child(-n + 2),
  .model-row:nth-child(odd) { border-top: 1px solid #d8d8d8; border-left: 0; }
  .model-row:first-child { border-top: 0; }

  .access-flow { grid-template-columns: 1fr; }
  .flow-item { min-height: 245px; border-left: 0; border-top: 1px solid #303030; }
  .flow-item:first-child { border-top: 0; }
}

@media (max-width: 520px) {
  .trusted { margin-top: 48px; }
  .logo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-item { min-height: 72px; padding: 0 8px; font-size: 0.78rem; }
  .logo-item:last-child { grid-column: 1 / -1; }

  .model-row {
    min-height: 205px;
    padding: 24px 20px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto;
  }
  .model-row .model-index { display: block; grid-column: 1; grid-row: 3; }
  .model-context { display: block; grid-column: 2; grid-row: 3; }
  .model-price { grid-column: 2; grid-row: 2; align-self: end; }
  .model-badge { display: block; grid-column: 3; grid-row: 1; }
  .model-row .model-monogram { width: 38px; height: 38px; }

  .flow-item { min-height: 230px; padding: 30px 24px; }
  .pricing-comparison { box-shadow: 7px 7px 0 #d8d8d8; }
  .model-pricing-card { width: calc(100% - 24px); border-radius: 12px; box-shadow: 7px 7px 0 #d8d8d8; }
  .model-pricing-top { min-height: 66px; }
  .model-pricing-top h3 { font-size: 1.08rem; }
  .model-pricing-top span { font-size: 0.76rem; }
  .model-pricing-table { min-width: 980px; }
  .model-pricing-table th,
  .model-pricing-table td { height: 60px; padding: 0 20px; font-size: 0.9rem; }
  .pricing-note { min-height: 68px; align-items: flex-start; justify-content: center; flex-direction: column; gap: 8px; }
}

/* Editorial routing cards */
.access-flow {
  min-height: 0;
  padding: 18px;
  gap: 18px;
  border-radius: 52px;
  color: #111;
  background: #ededeb;
}

.flow-item,
.flow-center {
  min-height: 540px;
  padding: 72px 46px;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 38px;
  color: #111;
  background: #fff;
  text-align: center;
  isolation: isolate;
  transition: translate 500ms var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.flow-item:hover { translate: 0 -6px; }

.flow-item::before,
.flow-item::after {
  content: "";
  width: 255px;
  height: 330px;
  position: absolute;
  z-index: 0;
  border: 52px solid #1b1b1a;
  border-radius: 82px;
  pointer-events: none;
}

.flow-item:nth-child(1)::before { left: -242px; top: -248px; transform: rotate(-8deg); }
.flow-item:nth-child(1)::after { right: -242px; bottom: -250px; transform: rotate(8deg); }
.flow-item:nth-child(2)::before { right: -240px; top: -250px; transform: rotate(10deg); }
.flow-item:nth-child(2)::after { left: -240px; bottom: -250px; transform: rotate(-10deg); }
.flow-item:nth-child(3)::before { left: -242px; top: -250px; transform: rotate(-10deg); }
.flow-item:nth-child(3)::after { right: -240px; bottom: -250px; transform: rotate(10deg); }

.flow-item > * { position: relative; z-index: 1; }

.provider-stack {
  width: min(100%, 232px);
  margin: 0 0 38px;
}

.provider-stack span {
  width: calc(100% - 30px);
  min-height: 38px;
  border-color: #bdbdbd;
  color: #646464;
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.64rem;
}

.provider-stack span:nth-child(2) { margin-left: 15px; }
.provider-stack span:nth-child(3) { margin-left: 30px; }
.provider-stack i { background: #111; }

.route-stage {
  width: 232px;
  height: 112px;
  margin: 0 0 38px;
}

.flow-gate {
  margin: 0;
  border-color: #111;
  box-shadow: inset 0 0 0 9px #fff, inset 0 0 0 11px #111;
}

.flow-gate::before,
.flow-gate::after { background: #111; }
.route-line { background: linear-gradient(90deg, transparent, rgba(17, 17, 17, 0.9)); }
.route-pulse { background: #111; box-shadow: 0 0 12px rgba(0, 0, 0, 0.3); }

.saving-mark {
  margin: 0 0 38px;
  color: #111;
}

.saving-mark span { color: #fff; background: #111; }
.saving-mark i { color: #777; }

.flow-item > strong {
  max-width: 290px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.05;
  font-weight: 700;
}

.flow-item p,
.flow-center p {
  max-width: 280px;
  color: #717171;
  font-size: 0.9rem;
  line-height: 1.58;
}

@media (max-width: 1050px) {
  .flow-item,
  .flow-center { min-height: 500px; padding: 62px 30px; }
  .flow-item::before,
  .flow-item::after { width: 220px; height: 300px; border-width: 46px; }
}

@media (max-width: 820px) {
  .access-flow { padding: 14px; gap: 14px; border-radius: 40px; }
  .flow-item,
  .flow-center { min-height: 490px; border-radius: 30px; border-top: 0; }
}

@media (max-width: 520px) {
  .access-flow { width: calc(100% - 24px); padding: 10px; gap: 10px; border-radius: 34px; }
  .flow-item,
  .flow-center { min-height: 460px; padding: 58px 28px; border-radius: 26px; }
  .flow-item::before,
  .flow-item::after { width: 190px; height: 270px; border-width: 40px; border-radius: 68px; }
  .flow-item:nth-child(1)::before { left: -205px; top: -212px; }
  .flow-item:nth-child(1)::after { right: -205px; bottom: -214px; }
  .flow-item:nth-child(2)::before { right: -205px; top: -214px; }
  .flow-item:nth-child(2)::after { left: -205px; bottom: -214px; }
  .flow-item:nth-child(3)::before { left: -205px; top: -214px; }
  .flow-item:nth-child(3)::after { right: -205px; bottom: -214px; }
  .flow-item > strong { font-size: 1.6rem; }
}

/* Typographic model data posters */
.model-directory {
  gap: 14px;
  border: 0;
  background: #fff;
}

.model-row,
.model-row:nth-child(-n + 2),
.model-row:nth-child(odd) {
  min-height: 360px;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 0;
  color: #111;
  background: #e9e9e7;
  isolation: isolate;
}

.model-row::before { display: none; }
.model-row:hover { color: #111; background: #e9e9e7; }

.model-word-field {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  overflow: hidden;
  padding: 10px 12px;
  color: #181818;
  background: #e9e9e7;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.54rem;
  line-height: 1.18;
  font-weight: 650;
  text-align: justify;
  text-transform: uppercase;
  word-spacing: 2px;
  transition: transform 1000ms var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.model-word-field span { opacity: 0.9; }
.model-word-field .tone-1 { color: #555; opacity: 0.72; }
.model-word-field .tone-2 { color: #8a8a8a; opacity: 0.62; }
.model-word-field .tone-3 { color: #b2b2b2; opacity: 0.58; }
.model-word-field .wide { letter-spacing: 0.08em; }

.model-negative-glyph {
  position: absolute !important;
  inset: 0;
  z-index: 1 !important;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #f8f8f7;
  font-family: var(--font-display);
  font-size: 18rem;
  line-height: 0.75;
  font-weight: 900;
  pointer-events: none;
  transform: scaleX(0.9);
  transition: transform 1100ms var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.model-row:hover .model-word-field { transform: scale(1.018) translateY(-3px); }
.model-row:hover .model-negative-glyph { transform: scaleX(0.9) scale(1.035); }

.model-name,
.model-badge,
.model-context,
.model-price {
  position: absolute !important;
  z-index: 2 !important;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
}

.model-name {
  top: 22px;
  left: 22px;
  padding: 11px 13px;
  border: 1px solid #bdbdbd;
}

.model-name strong { margin-bottom: 4px; font-size: 0.9rem; }
.model-name small { color: #777; font-size: 0.64rem; }

.model-badge {
  top: 22px;
  right: 22px;
  min-width: 78px;
  padding: 8px 10px;
  border-color: #aaa;
  color: #111;
}

.model-context,
.model-price {
  bottom: 22px;
  padding: 8px 10px;
  border: 1px solid #bdbdbd;
  color: #555;
  font-size: 0.66rem;
}

.model-context { left: 22px; }
.model-price { right: 22px; }
.model-index,
.model-monogram { display: none; }

@media (max-width: 820px) {
  .model-directory { gap: 12px; }
  .model-row,
  .model-row:nth-child(-n + 2),
  .model-row:nth-child(odd) { min-height: 340px; border: 0; }
  .model-negative-glyph { font-size: 16rem; }
}

@media (max-width: 520px) {
  .model-row,
  .model-row:nth-child(-n + 2),
  .model-row:nth-child(odd) { min-height: 310px; padding: 0; }
  .model-word-field { font-size: 0.48rem; line-height: 1.16; word-spacing: 1px; }
  .model-negative-glyph { font-size: 13rem; }
  .model-name { top: 14px; left: 14px; }
  .model-badge { top: 14px; right: 14px; }
  .model-context { left: 14px; bottom: 14px; }
  .model-price { right: 14px; bottom: 14px; }
}