/* Complete AVTAX landing options: foundations, then full-page overrides. */
:root {
  color-scheme: light;
  --ink: #142438;
  --muted: #506176;
  --canvas: #f5f7fa;
  --surface: #ffffff;
  --accent: #1262c4;
  --accent-bright: #42baff;
  --line: #d5dfe9;
  --button-bg: #142438;
  --button-ink: #ffffff;
  --font: "Manrope", "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --z-nav: 10;
  --z-studio: 20;
  --z-skip: 30;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button, a { touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .65; }
button, a { transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease); }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
button::-moz-focus-inner { border: 0; }
h1, h2, h3, p, figure, dl { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
svg { display: block; }
.symbol-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon.small { width: 1em; height: 1em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; padding: 12px 20px; background: #fff; color: #142438; border: 2px solid #1262c4; z-index: var(--z-skip); }
.skip-link:focus { top: 10px; }
[hidden] { display: none !important; }
.wrap { width: min(100% - 7rem, 1320px); margin-inline: auto; }
.studio-bar { background: #edf1f4; color: #28394b; min-height: 66px; padding: 10px 26px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid #d3dce3; position: relative; z-index: var(--z-studio); font-size: .75rem; }
.studio-title { display: flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; min-height: 44px; }
.studio-count { font-weight: 500; color: #556575; }
.studio-dot { width: 7px; height: 7px; border: 1.5px solid #44647d; border-radius: 50%; }
.concept-tabs { display: flex; align-items: center; gap: 3px; margin-inline: auto; padding: 3px; border: 1px solid #d0dae2; border-radius: 8px; }
.concept-tabs button { min-height: 40px; padding: 8px 16px; border: 0; background: transparent; color: #42566a; border-radius: 5px; font-weight: 600; white-space: nowrap; }
.concept-tabs button span { opacity: .75; margin-right: 6px; font-size: .7rem; }
.concept-tabs button[aria-selected="true"] { color: #fff; background: #263c51; }
.concept-tabs button:hover:not([aria-selected="true"]) { background: #dfe7ed; color: #142438; }
.studio-actions { display: flex; gap: 10px; }
.studio-action { background: transparent; border: 0; color: #364e63; display: inline-flex; gap: 7px; align-items: center; justify-content: center; min-height: 44px; padding: 6px; white-space: nowrap; }
.studio-action:hover { color: #1262c4; }
.studio-bar :focus-visible, .studio-footer :focus-visible, dialog :focus-visible { outline-color: #1262c4; }
.studio-action .icon { width: 16px; height: 16px; }
.site-shell { background: var(--canvas); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 102px; position: relative; z-index: var(--z-nav); }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 1.6rem; font-weight: 800; letter-spacing: -.035em; min-height: 44px; }
.brand-mark { width: 24px; height: 26px; background: currentColor; clip-path: polygon(39% 0, 61% 0, 100% 100%, 69% 100%, 50% 48%, 30% 100%, 0 100%); display: inline-block; flex-shrink: 0; }
.brand-product { border-left: 1px solid var(--line); margin-left: 10px; padding-left: 17px; font-size: .75rem; font-weight: 500; letter-spacing: 0; color: var(--muted); max-width: 130px; }
.site-nav { display: flex; align-items: center; gap: 32px; font-size: .84rem; font-weight: 500; }
.site-nav a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; }
.site-nav a:hover { color: var(--accent); }
.site-nav .mobile-login { display: none; }
.site-actions { display: flex; align-items: center; gap: 20px; font-size: .84rem; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 24px; min-height: 54px; padding: 15px 23px; background: var(--button-bg); color: var(--button-ink); border: 0; border-radius: 7px; font-size: .9rem; font-weight: 600; line-height: 1.5; }
.button:hover { transform: translateY(-2px); background: var(--accent); color: #fff; }
.button .icon { width: 19px; height: 19px; }
.button-small { min-height: 44px; padding: 10px 17px; gap: 12px; font-size: .78rem; }
.text-button { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 8px 0; background: transparent; color: inherit; min-height: 44px; font-weight: 500; }
.text-button:hover { color: var(--accent); }
.text-link { display: inline-flex; align-items: center; justify-content: flex-start; gap: 12px; font-size: .88rem; font-weight: 600; min-height: 44px; text-underline-offset: 5px; }
.text-link:hover { color: var(--accent); text-decoration: underline; }
.menu-button { display: none; background: transparent; border: 1px solid var(--line); color: inherit; border-radius: 6px; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; }
.concept-panel { outline: none; }
.hero { position: relative; }
.hero-copy { position: relative; z-index: 2; }
.product-context { display: flex; align-items: center; gap: 9px; font-size: .76rem; font-weight: 500; color: var(--muted); margin-bottom: 25px; }
.product-context > span { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
h1 { font-weight: 500; font-size: clamp(3rem, 5.1vw, 4.6rem); line-height: 1.08; letter-spacing: -.04em; }
h1 span { color: var(--accent); }
.hero-description { max-width: 43ch; color: var(--muted); font-size: 1.05rem; line-height: 1.8; margin-top: 27px; }
.hero-actions { margin-top: 32px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero-footnote { color: var(--muted); font-size: .76rem; margin-top: 25px; }
.precision-hero { display: grid; grid-template-columns: 1.02fr 1fr; gap: 5px; align-items: center; min-height: 635px; padding-top: 15px; }
.precision-hero h1 { font-size: clamp(3rem, 4.7vw, 4.2rem); }
.precision-hero .hero-copy { align-self: center; padding-bottom: 10px; }
.scene { position: relative; min-width: 0; isolation: isolate; perspective: 1500px; }
.scene-object { transform-style: preserve-3d; --pointer-x: 0deg; --pointer-y: 0deg; }
.precision-scene { height: 535px; }
.scene-aura { position: absolute; inset: 8% -7% 4%; background: radial-gradient(ellipse at center, #d8e9fa 0, #edf3f9 47%, transparent 72%); z-index: -1; }
.precision-ground { position: absolute; width: 80%; height: 110px; top: 72%; left: 12%; background: radial-gradient(ellipse, #6582a93d, transparent 68%); transform: rotate(-20deg); }
.precision-object { width: 318px; height: 382px; position: absolute; top: 51%; left: 52%; transform: translate(-50%, -50%) rotateX(calc(51deg + var(--pointer-y))) rotateY(calc(-3deg + var(--pointer-x))) rotateZ(-30deg); transition: transform .8s var(--ease); }
.folio-layer { width: 100%; height: 100%; position: absolute; border-radius: 12px; transform-style: preserve-3d; }
.folio-base { background: linear-gradient(135deg, #a9b7c5, #f6f8fa 25%, #8a9bab 65%, #dce4ec); box-shadow: 1px 1px 0 #a7b6c6, 2px 2px 0 #93a1af, 3px 3px 0 #91a0af, 4px 4px 0 #91a0af, 5px 5px 0 #7c8d9e, 6px 6px 0 #596d83, 7px 7px 0 #586b81, 18px 28px 30px #48698629; transform: translateZ(-40px); }
.folio-base::before, .folio-base::after { content: ""; position: absolute; top: 14px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #bac9d7; background: linear-gradient(45deg, #53657b 43%, #d3dce5 44% 52%, #53657b 53%); }
.folio-base::before { left: 14px; }
.folio-base::after { right: 14px; }
.etched-wordmark { position: absolute; left: 24px; bottom: 24px; font-size: 12px; letter-spacing: .12em; font-weight: 800; color: #546981; }
.plate-edge { position: absolute; bottom: 14px; right: 17px; width: 7px; height: 7px; border-radius: 50%; border: 2px solid #a0afbb; background: #677a8c; }
.folio-middle { transform: translateZ(32px); background: linear-gradient(135deg, #cde9ffdc, #a1d6ffb0 48%, #e2f4ffe8); border: 1px solid #f5fcff; box-shadow: 1px 1px 0 #b4d9f5, 2px 2px 0 #87b9dc, 3px 3px 0 #73a9d6, 4px 4px 0 #81b9e1; animation: middle-breathe 9s ease-in-out infinite; }
.middle-circuit { position: absolute; inset: 45px; border: 1px solid #62a6d7; border-radius: 7px; opacity: .7; }
.middle-circuit::after { content: ""; position: absolute; inset: 18px; border: 1px solid #8cbfe3; border-radius: 3px; }
.middle-circuit span { position: absolute; width: 20px; height: 20px; border: 1px solid #4886bd; background: #abd7f6; }
.middle-circuit span:nth-child(1) { left: -10px; top: 30px; }
.middle-circuit span:nth-child(2) { right: -10px; top: 130px; }
.middle-circuit span:nth-child(3) { left: 50%; bottom: -10px; }
.folio-top { background: linear-gradient(130deg, #fff 20%, #e9f0f7); color: #223952; padding: 27px; transform: translateZ(111px); box-shadow: 1px 1px 0 #e9eff5, 2px 2px 0 #c5d2de, 3px 3px 0 #c5d2de, 4px 4px 0 #a2b3c4, 5px 5px 0 #a2b3c4; animation: folio-breathe 9s ease-in-out infinite; }
.invoice-brand { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.mini-mark { width: 12px; height: 13px; background: #1673cc; clip-path: polygon(39% 0, 61% 0, 100% 100%, 69% 100%, 50% 48%, 30% 100%, 0 100%); }
.invoice-number { font-size: 7px; font-weight: 500; color: #61748a; margin-left: auto; }
.invoice-title { font-size: 27px; font-weight: 600; margin-top: 30px; letter-spacing: -.04em; }
.invoice-subtitle { color: #5f7893; font-size: 7px; letter-spacing: .12em; margin-top: 3px; }
.invoice-divider { height: 1px; background: #b8cde0; margin: 19px 0; }
.invoice-line { height: 5px; width: 40%; background: #b9cad9; border-radius: 2px; margin-bottom: 8px; }
.invoice-line.long { width: 66%; background: #7a96b0; }
.invoice-rows { display: grid; gap: 10px; margin-top: 20px; }
.invoice-rows i { height: 4px; background: linear-gradient(to right, #b4cadb 0 47%, transparent 47% 59%, #c6d6e4 59% 71%, transparent 71% 84%, #86b7de 84%); border-radius: 1px; }
.invoice-bottom { display: flex; align-items: center; gap: 25px; margin-top: 24px; font-size: 8px; color: #586d82; }
.invoice-bottom strong { display: block; font-size: 13px; color: #236aab; margin-top: 2px; }
.qr-pattern { width: 37px; height: 37px; flex-shrink: 0; background-color: #253e59; background-image: conic-gradient(#edf4fb 25%, transparent 0 50%, #edf4fb 0 75%, transparent 0); background-size: 7px 7px; border: 3px solid #253e59; outline: 3px solid #edf4fb; }
.folio-connector { position: absolute; left: 141px; bottom: 0; width: 35px; height: 160px; background: linear-gradient(90deg, #0962b8, #4cb6ff 20%, #228fea 70%, #0955a1); transform-origin: bottom; border-radius: 4px; box-shadow: inset 1px 0 #b8e7ff; }
.connector-back { transform: translateZ(-40px) rotateX(-90deg); height: 80px; }
.connector-front { transform: translateZ(32px) rotateX(-90deg); height: 80px; animation: ribbon-breathe 9s ease-in-out infinite; }
.folio-top::after { content: ""; position: absolute; left: 141px; bottom: -1px; width: 35px; height: 17px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, #0962b8, #4cb6ff 20%, #228fea 70%, #0955a1); }
.scene-caption { position: absolute; bottom: 36px; left: 16%; font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.caption-line { width: 27px; height: 1px; background: var(--muted); opacity: .65; }
.scene-interaction { position: absolute; right: 3%; bottom: 5px; font-size: .63rem; color: var(--muted); }
.capability-strip { grid-column: 1 / -1; display: flex; align-items: center; gap: 30px; border-top: 1px solid var(--line); padding: 24px 0 28px; margin-top: 5px; font-size: .76rem; }
.capability-strip > span { display: flex; align-items: center; gap: 10px; }
.capability-strip > span .icon { color: var(--accent); }
.capability-strip > a { margin-left: auto; display: flex; align-items: center; gap: 20px; min-height: 44px; }
.capability-strip > a:hover { color: var(--accent); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--accent); flex-shrink: 0; }
.workflow-section { padding: 90px 0 66px; scroll-margin-top: 10px; }
.precision-workflow { background: #fff; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-bottom: 52px; }
h2 { font-size: clamp(1.8rem, 3.3vw, 2.85rem); letter-spacing: -.035em; font-weight: 500; line-height: 1.2; }
.section-heading p { font-size: .95rem; color: var(--muted); margin-top: 15px; }
.section-heading > .text-link { margin-top: 6px; white-space: nowrap; }
.request-demo { display: grid; grid-template-columns: 1fr 160px 1fr; align-items: center; padding: 28px 0; min-height: 255px; }
.request-content { background: #f1f5f9; padding: 25px 28px; border-radius: 10px; }
.specimen-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .77rem; font-weight: 600; }
.sample-label { color: #576a7e; font-size: .64rem; font-weight: 400; }
pre { margin: 24px 0 14px; font-size: .85rem; line-height: 1.95; white-space: pre-wrap; overflow-wrap: anywhere; }
code { font-family: "Cascadia Code", Consolas, monospace; }
.code-key { color: #314758; }
.code-string { color: #0b5da5; }
.code-muted { color: #617287; }
.request-endpoint { font-size: .62rem; color: #51677d; overflow-wrap: anywhere; }
.flow-bridge { display: flex; align-items: center; justify-content: center; }
.bridge-line { background: #c9d9e7; height: 1px; width: 36px; }
.bridge-token { background: #e0effb; color: #176eb9; width: 58px; height: 64px; display: grid; place-items: center; transform: perspective(300px) rotateY(-22deg) rotateZ(-8deg); border-radius: 6px; box-shadow: 3px 3px 0 #a8cae5; transition: transform .6s var(--ease), background-color .2s; }
.bridge-token .icon { width: 30px; height: 30px; }
.request-demo[data-step="1"] .bridge-token { transform: perspective(300px) rotateY(20deg) rotateZ(0deg); background: #b4deff; }
.request-demo[data-step="2"] .bridge-token { transform: perspective(300px) translateX(14px) rotateY(-8deg); background: #d9ecf7; }
.response-content { padding: 20px 25px 20px 16px; }
.response-heading { font-size: 1.6rem; line-height: 1.3; font-weight: 500; letter-spacing: -.03em; }
.response-content > p { color: var(--muted); font-size: .92rem; line-height: 1.9; max-width: 36ch; margin-top: 17px; min-height: 85px; }
.response-note { display: flex; align-items: center; gap: 8px; margin-top: 21px; font-size: .73rem; color: var(--muted); }
.workflow-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 35px; border-top: 1px solid #cfdae4; }
.step-button { position: relative; border: 0; background: none; padding: 25px 20px 20px 0; text-align: left; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; color: #526477; min-height: 90px; }
.step-button::before { content: ""; position: absolute; top: -1px; height: 3px; left: 0; right: 28px; background: transparent; transition: background-color .2s; }
.step-button[aria-pressed="true"]::before { background: #1262c4; }
.step-button[aria-pressed="true"] { color: #142438; }
.step-button:hover { color: #1262c4; }
.step-button > span { grid-row: span 2; font-size: .8rem; padding-top: 4px; }
.step-button strong { font-weight: 600; font-size: 1rem; }
.step-button small { font-size: .72rem; margin-top: 3px; color: #526477; }
.preview-disclaimer { font-size: .73rem; color: var(--muted); margin-top: 30px; }

body[data-concept="gateway"] { --ink: #f3f6fc; --muted: #a8b7ca; --canvas: #050c18; --surface: #0c1828; --accent: #87d9ff; --line: #2a394d; --button-bg: #93dcff; --button-ink: #071622; --font: "Urbanist", "Segoe UI", sans-serif; color-scheme: dark; }
body[data-concept="gateway"] .button:hover { color: #071622; background: #c1ecff; }
body[data-concept="gateway"] .site-header { min-height: 95px; }
body[data-concept="gateway"] .brand { font-weight: 600; letter-spacing: .045em; }
body[data-concept="gateway"] .brand-product { letter-spacing: 0; }
body[data-concept="gateway"] .button { border-radius: 3px; }
.gateway-hero { min-height: 645px; overflow: hidden; isolation: isolate; }
.gateway-light { position: absolute; width: 65%; height: 95%; right: -4%; top: -10%; background: radial-gradient(ellipse at 60% 50%, #1c3857 0, #0b1725 42%, transparent 69%); z-index: -2; }
.gateway-copy { position: relative; z-index: 2; padding-top: 140px; padding-bottom: 85px; pointer-events: none; }
.gateway-copy .hero-copy { width: 49%; pointer-events: auto; }
.gateway-copy h1 { font-size: clamp(3.6rem, 6.4vw, 5.8rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.05; }
.gateway-copy .product-context { margin-bottom: 20px; color: #b7c7da; }
.gateway-copy .hero-description { max-width: 36ch; color: #bdcadb; font-size: 1.02rem; }
.gateway-copy .hero-actions { gap: 23px; }
.gateway-copy .text-link { font-weight: 500; }
.gateway-scene { position: absolute; width: 65%; height: 585px; top: 0; right: -1%; perspective: 1200px; }
.gateway-floor { position: absolute; width: 105%; height: 210px; bottom: -10px; left: 0; background: radial-gradient(ellipse, #305b8554, #122b4533 38%, transparent 69%); transform: rotate(-6deg); }
.gateway-world { width: 320px; height: 374px; position: absolute; left: 53%; top: 41%; transform: translate(-50%, -50%) rotateX(calc(-8deg + var(--pointer-y))) rotateY(calc(-27deg + var(--pointer-x))) rotateZ(7deg); transition: transform .8s var(--ease); }
.gateway-frame { position: absolute; width: 100%; height: 100%; border: 28px solid #2b3b4e; border-top-color: #718297; border-left-color: #55677e; border-right-color: #1d2f44; border-bottom-color: #233247; box-shadow: inset 0 0 0 2px #addfff, inset 0 0 19px #47b7ff6b; transform-style: preserve-3d; }
.gateway-frame::before { content: ""; position: absolute; inset: -29px; border: 27px solid #25384e; border-top-color: #465d77; border-right-color: #17283a; transform: translateZ(-35px); }
.gateway-frame::after { content: ""; position: absolute; top: -28px; left: -28px; height: 28px; width: calc(100% + 56px); background: linear-gradient(#72859c, #44576e); transform: rotateX(-90deg); transform-origin: top; }
.frame-edge { position: absolute; top: -27px; bottom: -27px; right: -27px; width: 35px; background: linear-gradient(90deg, #25354b, #132236); transform: rotateY(-90deg); transform-origin: right; }
.gate-one { transform: translateZ(135px); }
.gate-two { transform: translateZ(-70px); border-width: 22px; opacity: .8; }
.gate-three { transform: translateZ(-275px); opacity: .55; }
.travelling-invoice { position: absolute; width: 190px; height: 250px; top: 20%; left: 24%; padding: 21px; background: linear-gradient(145deg, #fff, #d3e3f3); color: #1b344e; box-shadow: 2px 2px 0 #97b4cf, 3px 3px 0 #7597b9; transform: translate3d(20px, 38px, 205px) rotateY(-4deg) rotateX(8deg); animation: invoice-transit 13s cubic-bezier(.45, 0, .3, 1) infinite; }
.travelling-invoice > strong { display: block; font-size: 20px; margin-top: 23px; font-weight: 500; }
.travelling-invoice .invoice-brand { font-size: 10px; }
.travelling-invoice .invoice-divider { margin: 14px 0; }
.travelling-invoice .invoice-bottom { gap: 13px; margin-top: 24px; font-size: 7px; }
.travelling-invoice .qr-pattern { width: 27px; height: 27px; background-size: 5px 5px; }
.gateway-track { position: absolute; bottom: -1px; left: 50%; width: 3px; height: 660px; background: linear-gradient(#53baff90, #a9e5ff, transparent); transform-origin: bottom; transform: rotateX(90deg) translateY(120px); }
.gateway-bottom { position: relative; z-index: 2; border-top: 1px solid #233145; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding-block: 24px; font-size: .8rem; color: #b1bfd0; }
.gateway-bottom > div { display: flex; align-items: center; gap: 28px; color: #d6e3f1; }
.gateway-bottom i { background: #5086a8; height: 1px; width: 24px; }
.gateway-workflow { border-top: 1px solid #172638; background: #081220; }
.gateway-workflow h2 { font-weight: 400; font-size: clamp(2rem, 4vw, 3.2rem); }
.button-outline { background: transparent; border: 1px solid #56758f; color: #d0e9fc; }
.journey { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; padding: 0 35px; }
.journey-track { position: absolute; top: 53%; left: 13%; right: 13%; height: 1px; background: #28415a; }
.journey-track > span { position: absolute; top: -1px; height: 3px; width: 10%; background: #80d6ff; border-radius: 2px; transition: left 1s var(--ease); left: 0; }
.journey[data-stage="1"] .journey-track > span { left: 45%; }
.journey[data-stage="2"] .journey-track > span { left: 90%; }
.journey-stage { position: relative; border: 0; background: transparent; padding: 20px 0; color: #aabbce; min-width: 0; }
.mini-portal { width: 140px; height: 167px; display: block; position: relative; margin: 25px auto 45px; border: 14px solid #263b52; border-top-color: #60768e; border-left-color: #465f77; box-shadow: inset 0 0 0 1px #5094be; transform: perspective(650px) rotateY(-22deg) rotateX(5deg); transform-style: preserve-3d; transition: transform .5s var(--ease), border-color .4s; }
.mini-portal::after { content: ""; position: absolute; inset: -14px; border: 14px solid #172b40; transform: translateZ(-24px); }
.mini-document { display: grid; gap: 10px; padding: 25px 13px; position: absolute; top: 15px; left: 18px; width: 74px; height: 101px; background: #d9e7f4; transform: translateZ(-15px); box-shadow: 2px 2px 0 #92b6d3; transition: transform .8s var(--ease); }
.mini-document i { display: block; height: 3px; width: 100%; background: #759abb; }
.mini-document i:first-child { width: 65%; height: 6px; background: #467294; }
.journey-stage[aria-pressed="true"] { color: #eff8ff; }
.journey-stage[aria-pressed="true"] .mini-portal { border-top-color: #8aa8c4; box-shadow: inset 0 0 0 2px #94dfff; transform: perspective(650px) rotateY(-15deg) rotateX(0); }
.journey-stage[aria-pressed="true"] .mini-document { transform: translateZ(35px) translateY(6px); }
.journey-stage:hover .mini-portal { transform: perspective(650px) rotateY(-12deg); }
.journey-label { display: flex; gap: 15px; justify-content: center; align-items: center; font-size: 1rem; }
.journey-label i { font-style: normal; font-size: .68rem; padding: 4px; border-bottom: 1px solid #537898; }
.journey-caption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; border-top: 1px solid #26384d; padding-top: 28px; margin-top: 35px; }
.journey-caption p { color: #c0d3e6; font-size: .95rem; }
.journey-caption > span { font-size: .74rem; color: #a8b7ca; }

body[data-concept="network"] { --ink: #102a43; --muted: #38566e; --canvas: #e0effa; --surface: #f5fbff; --accent: #155bab; --line: #bad2e5; --button-bg: #102f4c; --button-ink: #fff; }
.network-hero { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 60px; min-height: 635px; }
.network-hero h1 { font-weight: 500; font-size: clamp(3.1rem, 4.8vw, 4.4rem); letter-spacing: -.04em; }
.network-hero .hero-description { max-width: 35ch; }
.network-hero .hero-copy { padding-bottom: 10px; grid-column: 2; grid-row: 1; }
.network-hero .hero-actions { gap: 24px; }
.network-scene { height: 545px; grid-column: 1; grid-row: 1; }
.network-ground { position: absolute; inset: 16% -5% 3% -15%; background: radial-gradient(ellipse, #93bad650, #b0d6f025 48%, transparent 66%); }
.network-world { width: 480px; height: 480px; position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%) rotateX(calc(48deg + var(--pointer-y))) rotateY(var(--pointer-x)) rotateZ(-33deg); transition: transform .8s var(--ease); }
.network-connections { position: absolute; width: 100%; height: 100%; overflow: visible; transform: translateZ(0); }
.network-connections > path { stroke: #56a2d9; stroke-width: 12; stroke-linejoin: round; }
.network-connections > .connection-pulse { stroke: #d8f2ff; stroke-width: 4; stroke-dasharray: 24 266; animation: network-transfer 10s linear infinite; }
.network-hub { position: absolute; width: 158px; height: 158px; left: calc(50% - 79px); top: calc(50% - 79px); border-radius: 50%; transform: translateZ(12px); transform-style: preserve-3d; background: linear-gradient(130deg, #c8d5e3, #87a3bc); box-shadow: 2px 2px 0 #c8d9e7, 3px 3px 0 #7895af, 4px 4px 0 #9bb3c8, 5px 5px 0 #9bb3c8, 6px 6px 0 #9bb3c8, 7px 7px 0 #9bb3c8, 8px 8px 0 #7595b0, 9px 9px 0 #678aa8, 10px 10px 0 #7595b0, 12px 12px 0 #86a5be, 15px 20px 20px #52799759; }
.hub-top { position: absolute; inset: 1px; border-radius: 50%; background: linear-gradient(130deg, #fff, #e1edf7); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateZ(14px); box-shadow: 1px 1px 0 #d9e5ef, 2px 2px 0 #a9bfd0, 3px 3px 0 #a9bfd0; }
.hub-top .brand-mark { color: #2c76b4; width: 24px; height: 25px; margin-bottom: 9px; }
.hub-top strong { color: #173d5e; font-size: 20px; letter-spacing: .03em; font-weight: 800; }
.hub-top small { font-size: 7px; color: #4c6b83; margin-top: 4px; }
.network-unit { position: absolute; width: 104px; height: 98px; transform: translateZ(14px); transform-style: preserve-3d; background: #bed3e3; border-radius: 10px; box-shadow: 1px 1px 0 #f1f8ff, 2px 2px 0 #a3bdcf, 3px 3px 0 #a3bdcf, 4px 4px 0 #a3bdcf, 5px 5px 0 #8daac1, 6px 6px 0 #8daac1, 7px 7px 0 #8daac1, 8px 8px 0 #8daac1, 9px 9px 0 #8daac1, 10px 10px 0 #8daac1, 11px 11px 0 #82a0b7, 12px 12px 0 #82a0b7, 14px 17px 18px #58799136; }
.unit-top { position: absolute; inset: 0; border-radius: 9px; background: linear-gradient(130deg, #fff, #dae8f3); transform: translateZ(12px); padding: 17px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #3276ab; box-shadow: 1px 1px 0 #d6e5ef, 2px 2px 0 #abc3d5; }
.unit-top .icon { width: 33px; height: 33px; stroke-width: 1.4; }
.unit-top span { margin-top: 7px; font-size: 7px; letter-spacing: .06em; color: #446b88; }
.unit-top > i { position: absolute; right: 10px; bottom: 10px; width: 3px; height: 3px; border-radius: 50%; background: #358ece; }
.unit-a { left: 54px; top: 48px; }
.unit-b { right: 53px; top: 48px; }
.unit-c { left: 54px; bottom: 45px; }
.unit-d { right: 53px; bottom: 45px; transform: translateZ(64px); animation: module-lift 9s ease-in-out infinite; }
.unit-socket { position: absolute; width: 108px; height: 101px; right: 51px; bottom: 43px; border: 5px solid #77add3; background: #a5cfeac9; border-radius: 11px; box-shadow: inset 4px 4px 0 #5b91b633; }
.network-scene .scene-caption { left: 5%; bottom: 28px; }
.network-scene .scene-interaction { bottom: 0; left: 5%; right: auto; }
.network-bottom { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid #bad2e5; padding: 27px 0; font-size: .8rem; }
.network-bottom > div { display: flex; gap: 55px; }
.network-bottom > a { min-height: 44px; display: flex; align-items: center; gap: 20px; }
.network-bottom > a:hover { color: #155bab; }
.network-workflow { background: #f5fbff; }
.workspace-demo { display: grid; grid-template-columns: 1.15fr 1fr; gap: 70px; align-items: center; }
.workspace-list { align-self: start; }
.workspace-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.workspace-toolbar h3 { font-size: 1.16rem; font-weight: 600; letter-spacing: -.03em; }
.table-scroll { max-width: 100%; }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: .75rem; }
th { font-weight: 500; }
thead th { color: #50677c; font-size: .66rem; padding: 11px 8px; border-bottom: 1px solid #bad2e5; }
tbody td, tbody th { padding: 10px 8px; border-bottom: 1px solid #d1e1ed; }
tbody tr { transition: background-color .2s; }
tbody tr.selected { background: #e2f0fb; }
.unit-select { display: flex; align-items: center; gap: 9px; min-height: 44px; border: 0; color: #173e5d; background: transparent; padding: 8px 0; font-size: inherit; font-weight: 600; text-align: left; }
.unit-select:hover { color: #155bab; }
.unit-select[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.unit-select .icon { width: 17px; height: 17px; color: #46799e; }
.setup-status { display: inline-flex; align-items: center; gap: 6px; }
.setup-status::before { content: ""; width: 5px; height: 5px; border: 1px solid #317bab; border-radius: 50%; }
.workspace-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: .67rem; color: #52697e; margin-top: 13px; }
.unit-detail { display: flex; align-items: center; gap: 30px; }
.detail-module { flex: 0 0 96px; width: 96px; height: 112px; border-radius: 12px; background: linear-gradient(140deg, #fff, #d8e8f4); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: perspective(500px) rotateY(-17deg) rotateX(12deg); box-shadow: 1px 1px #c0d4e4, 2px 2px #bed1e1, 3px 3px #aac3d9, 4px 4px #aac3d9, 5px 5px #aac3d9, 6px 6px #aac3d9, 8px 8px #98b5ca, 17px 25px 25px #407ba72c; color: #317eb8; }
.detail-module .icon { width: 40px; height: 40px; }
.detail-module > span { margin-top: 12px; font-size: .75rem; font-weight: 700; }
.detail-context { font-size: .66rem; color: #4f697f; margin-bottom: 5px; }
.unit-detail h3 { font-size: 1.5rem; letter-spacing: -.03em; font-weight: 500; margin-bottom: 17px; }
.unit-detail dl { font-size: .75rem; }
.unit-detail dl > div { display: flex; justify-content: space-between; gap: 18px; margin: 9px 0; }
.unit-detail dt { color: #4e6a81; }
.unit-detail dd { margin: 0; font-weight: 600; }
.unit-detail p:last-child { font-size: .68rem; color: #4e6a81; max-width: 27ch; line-height: 1.7; margin-top: 20px; }

.studio-footer { background: #edf1f4; color: #233c51; padding: 32px 4%; display: grid; grid-template-columns: 1fr auto; gap: 10px 50px; font-family: "Manrope", "Segoe UI", sans-serif; }
.recommendation { font-size: .8rem; font-weight: 700; }
.studio-footer p { font-size: .75rem; line-height: 1.8; margin-top: 7px; color: #4c6073; max-width: 100ch; }
.next-direction { align-self: center; display: flex; align-items: center; gap: 25px; background: transparent; color: #233c51; border: 1px solid #a8b8c6; padding: 12px 20px; border-radius: 5px; font-size: .78rem; min-height: 44px; }
.next-direction:hover { background: #dce5ec; }
.studio-footer .scope-note { grid-column: 1 / -1; font-size: .67rem; }
dialog { color-scheme: light; background: #f7f9fb; color: #142438; border: 0; border-radius: 12px; padding: 32px; font-family: "Manrope", "Segoe UI", sans-serif; }
dialog::backdrop { background: #071321c9; }
.concept-dialog { width: min(1440px, 94vw); max-height: 90dvh; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; margin-bottom: 30px; }
.dialog-heading h2 { font-size: 1.65rem; font-weight: 600; }
.dialog-heading p { font-size: .8rem; color: #536477; margin-top: 9px; }
.icon-button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #bac9d5; background: transparent; border-radius: 50%; color: #263e52; flex: 0 0 auto; }
.icon-button:hover { background: #e5edf3; }
.reference-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 35px 25px; }
.reference-grid a { display: block; background: #e0e8f0; border-radius: 5px; }
.reference-grid img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 5px; }
.reference-grid a:hover { outline: 2px solid #1262c4; outline-offset: 3px; }
.reference-grid figcaption { display: flex; gap: 12px; justify-content: space-between; margin-top: 11px; font-size: .71rem; color: #4e6277; }
.reference-grid strong { color: #1a364e; font-weight: 600; }
.route-dialog { width: min(480px, calc(100vw - 40px)); padding: 35px; }
.route-dialog > .icon-button { margin-left: auto; margin-bottom: 20px; }
.route-dialog h2 { font-size: 1.8rem; line-height: 1.25; }
.route-dialog p { color: #4a6075; font-size: .9rem; margin-top: 22px; }
.route-dialog .button { margin-top: 28px; background: #142438; color: #fff; }
.route-dialog code { color: #104f8c; font-size: .87em; overflow-wrap: anywhere; }
.noscript-note { padding: 24px; background: #fff; color: #142438; }
.image-error { display: flex; flex-direction: column; justify-content: center; min-height: 190px; padding: 30px; color: #304b62; background: #e2edf5; font-size: .85rem; }
.image-error p { margin-bottom: 12px; }
.image-error button { align-self: start; border: 1px solid #7b96ad; border-radius: 4px; background: #f4f8fb; padding: 10px 18px; min-height: 44px; color: #244863; }

@keyframes folio-breathe { 0%, 100% { transform: translateZ(111px); } 50% { transform: translateZ(127px); } }
@keyframes middle-breathe { 0%, 100% { transform: translateZ(32px); } 50% { transform: translateZ(40px); } }
@keyframes ribbon-breathe { 0%, 100% { transform: translateZ(32px) rotateX(-90deg) scaleY(1); } 50% { transform: translateZ(40px) rotateX(-90deg) scaleY(1.1); } }
@keyframes invoice-transit { 0%, 12% { transform: translate3d(20px, 38px, 205px) rotateY(-4deg) rotateX(8deg); opacity: 1; } 58% { transform: translate3d(0, -2px, -100px) rotateY(1deg) rotateX(-3deg); opacity: 1; } 82% { transform: translate3d(0, -6px, -280px) rotateY(1deg); opacity: .45; } 89% { opacity: 0; } 90% { transform: translate3d(20px, 38px, 205px) rotateY(-4deg) rotateX(8deg); opacity: 0; } 100% { transform: translate3d(20px, 38px, 205px) rotateY(-4deg) rotateX(8deg); opacity: 1; } }
@keyframes network-transfer { to { stroke-dashoffset: -290; } }
@keyframes module-lift { 0%, 100% { transform: translateZ(60px); } 50% { transform: translateZ(81px); } }

@media (min-width: 1550px) { .hero { min-height: 720px; } .precision-scene, .network-scene { transform: scale(1.07); } .gateway-copy { padding-top: 180px; } .gateway-world { transform: translate(-50%, -50%) scale(1.13) rotateX(calc(-8deg + var(--pointer-y))) rotateY(calc(-27deg + var(--pointer-x))) rotateZ(7deg); } }
@media (max-width: 1200px) {
  .wrap { width: calc(100% - 5rem); }
  .studio-bar { flex-wrap: wrap; gap: 4px 20px; padding: 7px 20px; }
  .studio-title { margin-right: auto; }
  .studio-actions { margin-left: auto; }
  .concept-tabs { margin-inline: 0; }
  .studio-action > span { display: none; }
  .studio-action { min-width: 38px; }
  .brand-product { display: none; }
  .site-nav { gap: 22px; }
  .site-actions { gap: 15px; }
  .precision-hero h1 { font-size: clamp(2.8rem, 4.8vw, 3.55rem); }
  .precision-object { width: 285px; height: 357px; }
  .folio-top { padding: 24px; }
  .folio-connector, .folio-top::after { left: 125px; }
  .precision-scene { height: 515px; }
  .scene-caption { left: 8%; }
  .capability-strip { gap: 22px; font-size: .72rem; }
  .hero-actions { gap: 20px; }
  .gateway-copy .hero-copy { width: 50%; }
  .gateway-world { width: 280px; height: 340px; left: 55%; top: 43%; }
  .travelling-invoice { left: 18%; }
  .network-hero { gap: 35px; }
  .network-hero h1 { font-size: clamp(2.9rem, 4.8vw, 3.8rem); }
  .network-world { width: 435px; height: 435px; }
  .network-unit { width: 90px; height: 90px; }
  .unit-a { left: 50px; top: 42px; }
  .unit-b { right: 50px; top: 42px; }
  .unit-c { left: 50px; bottom: 40px; }
  .unit-d { right: 50px; bottom: 40px; }
  .unit-socket { width: 94px; height: 94px; right: 48px; bottom: 38px; }
  .workspace-demo { gap: 35px; }
  .unit-detail { gap: 22px; }
  .request-demo { grid-template-columns: 1fr 105px 1fr; }
}
@media (max-width: 920px) {
  .wrap { width: calc(100% - 3rem); }
  .studio-title { display: none; }
  .studio-bar { justify-content: center; }
  .studio-actions { margin-left: 0; }
  .site-header { min-height: 85px; gap: 18px; }
  .site-nav { font-size: .76rem; gap: 18px; }
  .site-actions { gap: 14px; }
  .hero-description { font-size: .94rem; }
  .hero-actions { gap: 16px; }
  .hero-actions .button { padding: 13px 18px; gap: 16px; }
  .hero-actions .text-link { font-size: .78rem; }
  .precision-hero { min-height: 555px; }
  .precision-hero h1 { font-size: clamp(2.55rem, 4.6vw, 3.1rem); }
  .precision-scene { height: 460px; }
  .precision-object { transform: translate(-50%, -50%) scale(.83) rotateX(calc(51deg + var(--pointer-y))) rotateY(calc(-3deg + var(--pointer-x))) rotateZ(-30deg); left: 56%; }
  .scene-caption { font-size: .62rem; bottom: 42px; }
  .scene-interaction { display: none; }
  .capability-strip > a { display: none; }
  .capability-strip { justify-content: space-between; }
  .section-heading { gap: 24px; }
  .section-heading > .text-link { font-size: .74rem; white-space: normal; }
  .request-demo { grid-template-columns: 1fr 65px 1fr; }
  .request-content { padding: 22px; }
  pre { font-size: .77rem; }
  .response-content { padding: 15px 5px 15px 15px; }
  .response-heading { font-size: 1.3rem; }
  .response-content > p { font-size: .82rem; }
  .bridge-token { width: 45px; height: 57px; flex-shrink: 0; }
  .bridge-line { width: 10px; }
  .gateway-hero { min-height: 590px; }
  .gateway-copy { padding-top: 150px; padding-bottom: 65px; }
  .gateway-copy h1 { font-size: 4.3rem; }
  .gateway-copy .hero-copy { width: 56%; }
  .gateway-scene { right: -9%; width: 65%; }
  .gateway-world { transform: translate(-50%, -50%) scale(.84) rotateX(calc(-8deg + var(--pointer-y))) rotateY(calc(-27deg + var(--pointer-x))) rotateZ(7deg); }
  .gateway-copy .hero-description { max-width: 31ch; font-size: .94rem; }
  .gateway-bottom > div { gap: 18px; }
  .journey { padding-inline: 5px; gap: 10px; }
  .network-hero { min-height: 555px; gap: 25px; }
  .network-hero h1 { font-size: clamp(2.6rem, 4.6vw, 3.2rem); }
  .network-scene { height: 465px; }
  .network-world { transform: translate(-50%, -50%) scale(.82) rotateX(calc(48deg + var(--pointer-y))) rotateY(var(--pointer-x)) rotateZ(-33deg); left: 46%; }
  .network-bottom > div { gap: 35px; }
  .network-bottom { font-size: .72rem; }
  .workspace-demo { gap: 36px; grid-template-columns: 1fr; }
  .unit-detail { display: grid; grid-template-columns: 115px 1fr; max-width: 470px; }
  .unit-detail dl { max-width: 220px; }
  .unit-detail p:last-child { max-width: none; }
}
@media (max-width: 680px) {
  .wrap { width: calc(100% - 2.5rem); }
  .studio-bar { padding: 9px 13px; gap: 5px; display: grid; grid-template-columns: 1fr auto; }
  .studio-title { display: flex; font-size: .69rem; }
  .studio-actions { grid-column: 2; grid-row: 1; gap: 5px; }
  .studio-action { min-width: 44px; }
  .studio-action .icon { width: 18px; height: 18px; }
  .concept-tabs { grid-column: 1 / -1; grid-row: 2; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 2px; gap: 2px; }
  .concept-tabs button { white-space: normal; padding: 9px 5px; font-size: .75rem; min-height: 44px; line-height: 1.4; }
  .concept-tabs button > span { display: none; }
  .site-header, body[data-concept="gateway"] .site-header { min-height: 86px; }
  .brand { font-size: 1.38rem; gap: 6px; }
  .brand-mark { width: 20px; height: 22px; }
  .site-actions { gap: 10px; }
  .site-actions .auth-button.text-button { display: none; }
  .site-actions .button { min-height: 44px; padding: 10px 12px; font-size: .67rem; gap: 8px; }
  .site-actions .button .icon { width: 15px; height: 15px; }
  .menu-button { display: inline-flex; }
  .site-nav { display: none; position: absolute; top: 76px; left: 0; right: 0; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; flex-direction: column; align-items: stretch; gap: 3px; font-size: .88rem; }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 3px 8px; min-height: 44px; }
  .site-nav .mobile-login { display: inline-flex; justify-content: flex-start; padding: 3px 8px; min-height: 44px; }
  .hero-copy { width: 100%; }
  .product-context { font-size: .72rem; margin-bottom: 19px; }
  .precision-hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 25px; }
  .precision-hero .hero-copy { padding-bottom: 0; align-self: stretch; }
  .precision-hero h1 { font-size: clamp(2.6rem, 8.2vw, 3.65rem); line-height: 1.12; letter-spacing: -.04em; }
  .hero-description { font-size: .95rem; line-height: 1.8; margin-top: 21px; max-width: 45ch; }
  .hero-actions { margin-top: 27px; gap: 22px; }
  .hero-actions .button { font-size: .8rem; }
  .hero-actions .text-link { font-size: .8rem; }
  .hero-footnote { font-size: .75rem; margin-top: 20px; }
  .precision-scene { height: 415px; margin-top: 3px; }
  .precision-object { left: 50%; top: 46%; transform: translate(-50%, -50%) scale(.82) rotateX(51deg) rotateY(-3deg) rotateZ(-30deg); }
  .scene-aura { inset: 0 -5%; }
  .precision-ground { top: 63%; }
  .scene-caption { font-size: .63rem; left: 17%; bottom: 20px; }
  .capability-strip { flex-wrap: wrap; justify-content: flex-start; gap: 16px 25px; margin-top: 0; font-size: .75rem; padding-block: 22px; }
  .capability-strip .icon { width: 16px; height: 16px; }
  .workflow-section { padding-block: 60px 48px; }
  .section-heading { flex-direction: column; gap: 16px; margin-bottom: 30px; }
  .section-heading h2 { font-size: 2rem; line-height: 1.25; }
  .section-heading p { font-size: .88rem; margin-top: 13px; }
  .section-heading > .text-link { margin-top: 0; font-size: .8rem; }
  .request-demo { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 0; }
  .request-content { padding: 25px; }
  pre { font-size: .84rem; }
  .flow-bridge { display: none; }
  .response-content { padding: 8px 0; }
  .response-heading { font-size: 1.45rem; }
  .response-content > p { font-size: .9rem; max-width: 45ch; min-height: 70px; }
  .response-note { margin-top: 15px; }
  .workflow-steps { margin-top: 25px; gap: 5px; }
  .step-button { grid-template-columns: 1fr; padding: 19px 2px 10px; gap: 5px; }
  .step-button > span { grid-row: auto; font-size: .7rem; }
  .step-button strong { font-size: .95rem; }
  .step-button small { font-size: .64rem; }
  .step-button::before { right: 8px; }
  .preview-disclaimer { font-size: .75rem; margin-top: 25px; }
  .gateway-hero { min-height: 0; display: flex; flex-direction: column; }
  .gateway-copy { order: 0; padding-top: 25px; padding-bottom: 0; }
  .gateway-copy .hero-copy { width: 100%; }
  .gateway-copy h1 { font-size: clamp(3.5rem, 13vw, 5rem); }
  .gateway-copy .hero-description { font-size: 1rem; max-width: 38ch; }
  .gateway-copy .hero-actions { gap: 22px; }
  .gateway-scene { position: relative; order: 1; width: 100%; height: 435px; top: auto; right: auto; margin-top: 5px; }
  .gateway-world { left: 51%; top: 45%; transform: translate(-50%, -50%) scale(.82) rotateX(-8deg) rotateY(-27deg) rotateZ(7deg); }
  .gateway-light { width: 100%; height: 54%; bottom: 0; top: auto; }
  .gateway-bottom { order: 2; width: calc(100% - 2.5rem); padding-block: 20px; flex-direction: column; align-items: flex-start; gap: 14px; font-size: .76rem; }
  .gateway-bottom > div { gap: 25px; }
  .gateway-bottom > div i { width: 32px; }
  .gateway-workflow .section-heading h2 { font-size: 2.3rem; }
  .journey { gap: 3px; padding-inline: 0; }
  .mini-portal { width: 80px; height: 112px; border-width: 9px; margin: 20px auto 30px; }
  .mini-portal::after { border-width: 9px; inset: -9px; transform: translateZ(-14px); }
  .mini-document { width: 45px; height: 66px; padding: 17px 8px; left: 9px; top: 10px; gap: 5px; }
  .mini-document i { height: 2px; }
  .mini-document i:first-child { height: 3px; }
  .journey-label { display: flex; flex-direction: column; gap: 8px; font-size: .72rem; line-height: 1.45; padding-inline: 2px; }
  .journey-label i { font-size: .63rem; }
  .journey-caption { margin-top: 25px; padding-top: 22px; gap: 12px; }
  .journey-caption p { font-size: .89rem; }
  .journey-caption > span { font-size: .75rem; }
  .network-hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 25px; }
  .network-hero .hero-copy { order: 0; }
  .network-hero h1 { font-size: clamp(2.75rem, 9.4vw, 4rem); }
  .network-hero .hero-description { max-width: 41ch; }
  .network-scene { order: 1; height: 410px; margin-top: 3px; overflow: clip; }
  .scene-object { transition: none; }
  .network-world { left: 49%; top: 49%; transform: translate(-50%, -50%) scale(.75) rotateX(48deg) rotateY(0deg) rotateZ(-33deg); }
  .network-scene .scene-caption { bottom: 18px; left: 13%; }
  .network-bottom { order: 2; flex-wrap: wrap; padding-block: 22px; gap: 17px 28px; }
  .network-bottom > div { gap: 25px; }
  .network-bottom > a { display: none; }
  .workspace-toolbar { gap: 10px; }
  .workspace-toolbar h3 { font-size: 1rem; }
  .workspace-toolbar .button { font-size: .66rem; gap: 6px; padding-inline: 11px; }
  table { font-size: .67rem; }
  thead th { font-size: .6rem; padding-inline: 6px; }
  tbody th, tbody td { padding-inline: 6px; }
  .unit-select { gap: 6px; }
  .unit-select .icon { width: 14px; height: 14px; }
  .unit-detail { gap: 22px; }
  .unit-detail h3 { font-size: 1.4rem; }
  .studio-footer { padding: 28px 20px; grid-template-columns: 1fr; gap: 20px; }
  .next-direction { justify-self: start; }
  .studio-footer .scope-note { grid-column: auto; }
  .reference-grid { grid-template-columns: 1fr; gap: 28px; }
  .concept-dialog { padding: 22px; width: calc(100vw - 20px); max-height: 92dvh; }
  .dialog-heading { gap: 14px; margin-bottom: 25px; }
  .dialog-heading h2 { font-size: 1.3rem; }
  .dialog-heading p { font-size: .74rem; }
  .reference-grid figcaption { font-size: .75rem; flex-wrap: wrap; gap: 4px; }
  .sample-label, .request-endpoint, .workspace-footer, .detail-context, .unit-detail p:last-child, .studio-footer .scope-note { font-size: .75rem; }
}
@media (max-width: 480px) {
  .network-world { transform: translate(-50%, -50%) scale(.55) rotateX(48deg) rotateZ(-33deg); }
  .network-scene { height: 340px; }
}
@media (max-width: 370px) {
  .wrap { width: calc(100% - 2rem); }
  .brand { font-size: 1.2rem; }
  .site-actions { gap: 8px; }
  .site-actions .button { padding: 10px; font-size: .61rem; }
  .site-actions .button .icon { display: none; }
  .precision-hero h1 { font-size: 2.4rem; }
  .hero-actions { gap: 12px; }
  .hero-actions .button { padding-inline: 15px; }
  .hero-actions .text-link { font-size: .72rem; gap: 8px; }
  .precision-object { transform: translate(-50%, -50%) scale(.7) rotateX(51deg) rotateY(-3deg) rotateZ(-30deg); }
  .network-world { transform: translate(-50%, -50%) scale(.46) rotateX(48deg) rotateZ(-33deg); }
  .gateway-world { transform: translate(-50%, -50%) scale(.7) rotateX(-8deg) rotateY(-27deg) rotateZ(7deg); }
  .journey-label { font-size: .66rem; }
  .workspace-toolbar .button .icon { display: none; }
  .unit-detail { grid-template-columns: 88px 1fr; gap: 20px; }
  .detail-module { width: 76px; height: 100px; }
}
@media (pointer: coarse) { .scene-interaction { display: none; } .concept-tabs button, .studio-action { min-height: 44px; } }
body.motion-paused *, body.motion-paused *::before, body.motion-paused *::after { animation-play-state: paused !important; }
.scene.is-offscreen *, .scene.is-offscreen *::before, .scene.is-offscreen *::after { animation-play-state: paused !important; }
body.motion-paused .scene-object { --pointer-x: 0deg !important; --pointer-y: 0deg !important; }
body.motion-paused .scene-object, body.motion-paused .bridge-token, body.motion-paused .mini-portal, body.motion-paused .mini-document, body.motion-paused .journey-track > span { transition: none; }
body.motion-reduced *, body.motion-reduced *::before, body.motion-reduced *::after { animation: none !important; transition-duration: .01ms !important; }
body.motion-reduced .scene-object { --pointer-x: 0deg !important; --pointer-y: 0deg !important; }
html:has(body.motion-reduced), html:has(body.motion-paused) { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .scene-object { --pointer-x: 0deg !important; --pointer-y: 0deg !important; }
}
@media (prefers-contrast: more) {
  :root { --muted: #253d53; --line: #839aae; }
  body[data-concept="gateway"] { --muted: #d2e1f0; --line: #64829b; }
  body[data-concept="network"] { --muted: #173c5d; --line: #7fabc9; }
  .hero-footnote, .scene-caption, .preview-disclaimer, .section-heading p { color: var(--muted); }
}
@media (forced-colors: active) {
  .button, .concept-tabs button[aria-selected="true"], .step-button[aria-pressed="true"] { border: 1px solid ButtonText; }
  .concept-tabs button[aria-selected="true"], .unit-select[aria-pressed="true"] { outline: 2px solid Highlight; }
  .scene { display: none; }
  .hero { display: block; min-height: 0; padding-block: 35px; }
  .gateway-copy { padding: 0; }
  .gateway-copy .hero-copy { width: 100%; }
}

/* Complete landing content. The original homepage's styles are not modified. */
.complete-landing { --section-surface: #fff; --section-alternate: #edf2f7; }
.complete-landing .site-nav { gap: 24px; }
.complete-landing .site-header { min-height: 94px; }
.complete-landing .site-nav .mobile-login { display: none; }
.complete-landing .precision-hero, .complete-landing .network-hero { min-height: 575px; padding-bottom: 10px; }
.complete-landing .gateway-hero { min-height: 600px; }
.complete-landing .gateway-copy { padding-top: 65px; padding-bottom: 45px; }
.complete-landing .gateway-copy h1 { font-size: clamp(3.6rem, 6.1vw, 5.25rem); }
.complete-landing .gateway-copy .hero-description { max-width: 42ch; }
.complete-landing .gateway-copy .hero-footnote { color: var(--muted); }
.complete-landing .gateway-scene { height: 545px; }
.complete-landing .hero-description { max-width: 43ch; }
.complete-landing .hero-footnote { font-size: .78rem; }
.complete-landing .network-hero .hero-description { max-width: 41ch; }
.complete-landing.has-comparison .landing-section { scroll-margin-top: 5.5rem; }
.comparison-bar { position: sticky; top: 0; z-index: 25; background: #eaf0f5; color: #213b53; border-bottom: 1px solid #c8d5e1; padding: 9px 24px; display: flex; align-items: center; justify-content: space-between; gap: 22px; font-family: "Manrope", "Segoe UI", sans-serif; }
.comparison-title { display: flex; flex-direction: column; font-size: .72rem; line-height: 1.5; white-space: nowrap; }
.comparison-title > span { font-weight: 700; }
.comparison-title code { font-size: .65rem; color: #4d6378; }
.option-links { display: flex; align-items: center; gap: 5px; }
.option-links a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; min-height: 44px; border-radius: 5px; color: #37516a; font-size: .76rem; font-weight: 600; }
.option-links a > span { font-size: .65rem; }
.option-links a[aria-current="page"] { background: #1b354e; color: #fff; }
.option-links a:hover:not([aria-current="page"]) { background: #d5e2ed; color: #102a43; }
.comparison-tools { display: flex; align-items: center; gap: 17px; font-size: .69rem; }
.comparison-tools a { display: inline-flex; gap: 5px; align-items: center; min-height: 44px; }
.comparison-tools a:hover { text-decoration: underline; text-underline-offset: 4px; }
.comparison-bar :focus-visible { outline-color: #125fae; }
.assurance-strip { display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid var(--line); padding-block: 23px 27px; font-size: .81rem; }
.assurance-strip > span { display: inline-flex; align-items: center; gap: 10px; }
.assurance-strip > span .icon { color: var(--accent); }
.assurance-strip a { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; color: var(--muted); }
.assurance-strip a:hover { color: var(--accent); }
.landing-section { padding-block: 96px; }
.capabilities-section { background: var(--section-surface); }
.complete-landing .section-heading { margin-bottom: 48px; }
.complete-landing .section-heading p { max-width: 65ch; line-height: 1.75; }
.capabilities-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 65px; border-top: 1px solid var(--line); }
.capability-item { display: flex; align-items: flex-start; gap: 25px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.capability-symbol { flex: 0 0 48px; width: 48px; height: 56px; color: var(--accent); display: grid; place-items: center; }
.capability-symbol .icon { width: 30px; height: 30px; stroke-width: 1.35; }
.capability-item h3 { font-size: 1.26rem; letter-spacing: -.025em; font-weight: 600; line-height: 1.35; }
.capability-item p { color: var(--muted); font-size: .92rem; line-height: 1.85; margin-top: 12px; max-width: 49ch; }
.api-section { background: var(--section-alternate); }
.api-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; row-gap: 55px; align-items: center; }
.section-context { color: var(--muted); font-size: .8rem; margin-bottom: 14px; }
.section-intro { font-size: .95rem; color: var(--muted); margin-top: 17px; line-height: 1.8; }
.api-version-detail { margin-top: 32px; }
.api-version-detail a { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.api-version-detail a:hover { color: var(--accent); }
.api-version-detail a > .icon { width: 16px; height: 16px; margin-left: auto; }
.api-version-detail h3 { font-size: 1.05rem; letter-spacing: -.015em; font-weight: 600; line-height: 1.5; }
.version-tag { width: 33px; height: 33px; display: grid; place-items: center; color: var(--accent); border: 1px solid var(--line); border-radius: 4px; font-size: .65rem; flex-shrink: 0; }
.api-version-detail p { margin-top: 10px; color: var(--muted); font-size: .9rem; line-height: 1.9; }
.api-description code { font-size: .86em; color: var(--ink); overflow-wrap: anywhere; }
.api-reference-link { margin-top: 28px; }
.invoice-code { background: #fff; color: #19344e; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px #0a305510; }
.code-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 22px; border-bottom: 1px solid #dce5ed; }
.code-toolbar > span { display: inline-flex; align-items: center; gap: 9px; font-size: .76rem; font-weight: 600; }
.code-toolbar button { border: 0; background: transparent; padding: 6px 0 6px 12px; min-height: 44px; color: #3b5770; display: flex; gap: 8px; align-items: center; font-size: .72rem; }
.code-toolbar button:hover { color: #1262c4; }
.code-endpoint { font-family: "Cascadia Code", Consolas, monospace; display: flex; align-items: flex-start; gap: 10px; font-size: .69rem; overflow-wrap: anywhere; padding: 19px 24px 0; color: #405f7b; }
.code-endpoint > span { color: #075e9e; font-weight: 700; }
.invoice-code pre { padding: 0 24px 22px; margin: 18px 0 0; font-size: .82rem; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; color: #203b56; }
.code-caption { border-top: 1px solid #dce5ed; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: #526a80; font-size: .67rem; }
.code-caption a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; text-decoration: underline; text-underline-offset: 4px; color: #275b89; }
.developer-capabilities { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; border-top: 1px solid var(--line); padding-top: 35px; }
.developer-capabilities dt { display: flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 600; }
.developer-capabilities dt .icon { color: var(--accent); width: 19px; height: 19px; }
.developer-capabilities dd { font-size: .78rem; margin: 10px 0 0 29px; color: var(--muted); }
.processing-section { background: var(--section-surface); }
.processing-diagram { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; justify-items: center; height: 190px; padding: 15px 0 30px; margin-top: 10px; perspective: 1200px; }
.processing-track { position: absolute; top: 51%; left: 12.5%; right: 12.5%; height: 2px; background: var(--line); }
.processing-track > span { display: block; position: absolute; left: 0; top: -1px; width: 8%; height: 4px; background: var(--accent); border-radius: 2px; transition: left 700ms var(--ease); }
.processing-diagram[data-active-step="1"] .processing-track > span { left: 30.66%; }
.processing-diagram[data-active-step="2"] .processing-track > span { left: 61.33%; }
.processing-diagram[data-active-step="3"] .processing-track > span { left: 92%; }
.process-object { position: relative; width: 92px; height: 106px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; background: linear-gradient(130deg, #fff, #d9e9f5); color: #326c9a; box-shadow: 1px 1px #c0d3e2, 2px 2px #bed1df, 3px 3px #b3c8d9, 4px 4px #99b5cd, 5px 5px #99b5cd, 7px 9px #91afc6; transform: perspective(500px) rotateX(15deg) rotateY(-21deg) rotateZ(-6deg); transition: transform 600ms var(--ease); }
.process-object > span { font-family: Consolas, monospace; font-size: 26px; }
.process-object .icon { width: 30px; height: 30px; }
.process-object small { font-size: 9px; letter-spacing: .02em; }
.processing-diagram[data-active-step="0"] .process-json, .processing-diagram[data-active-step="1"] .process-validate, .processing-diagram[data-active-step="2"] .process-clear, .processing-diagram[data-active-step="3"] .process-pdf { transform: perspective(500px) translateY(-12px) rotateX(5deg) rotateY(-8deg) rotateZ(-2deg); color: #0b60a2; }
.processing-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; list-style: none; padding: 0; margin: 25px 0 0; border-top: 1px solid var(--line); }
.processing-steps li { min-width: 0; }
.process-step-button { border: 0; background: transparent; color: var(--ink); padding: 24px 0 0; min-height: 90px; text-align: left; width: 100%; position: relative; }
.process-step-button::before { content: ""; position: absolute; top: -1px; height: 3px; left: 0; right: 0; background: transparent; transition: background-color .2s; }
.process-step-button[aria-pressed="true"]::before { background: var(--accent); }
.process-step-button:hover .step-title { color: var(--accent); }
.step-number { display: block; font-size: .71rem; color: var(--muted); margin-bottom: 8px; }
.step-title { display: block; font-size: 1.05rem; line-height: 1.4; font-weight: 600; letter-spacing: -.02em; }
.processing-steps p { font-size: .87rem; line-height: 1.85; color: var(--muted); margin-top: 15px; }
.processing-steps strong { font-weight: 600; color: var(--ink); }
.workflow-status { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 35px; font-size: .75rem; color: var(--muted); }
.complete-landing .workflow-play { color: var(--ink); border-color: var(--line); background: transparent; min-height: 48px; font-size: .8rem; gap: 12px; }
.complete-landing .workflow-play:hover { border-color: var(--accent); color: var(--accent); transform: none; }
.plans-section { background: var(--section-alternate); }
.plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.plan { border: 1px solid var(--line); border-radius: 10px; padding: 31px 27px; background: var(--section-surface); display: flex; flex-direction: column; min-width: 0; }
.plan-heading { min-height: 70px; }
.plan-heading > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-heading h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.plan-heading p { color: var(--muted); font-size: .8rem; margin-top: 11px; }
.popular-plan { font-size: .61rem; padding: 4px 7px; border: 1px solid #6e9dc3; border-radius: 4px; color: #bdddff; white-space: nowrap; }
.plan-price { font-size: 3.3rem; line-height: 1.2; letter-spacing: -.035em; font-weight: 500; margin: 28px 0 30px; }
.plan-price > span { font-size: .89rem; font-weight: 400; letter-spacing: 0; margin-left: 5px; color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; gap: 15px; }
.plan li { position: relative; padding-left: 22px; font-size: .83rem; color: var(--muted); line-height: 1.7; }
.plan li::before { content: ""; position: absolute; width: 8px; height: 4px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); left: 1px; top: 8px; }
.plan li strong { font-weight: 600; color: var(--ink); }
.plan .button { margin-top: 35px; justify-content: space-between; padding-inline: 18px; font-size: .83rem; width: 100%; }
.plan .plan-secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.plan .plan-secondary:hover { border-color: var(--accent); color: var(--accent); transform: none; }
.plan-growth { background: #142b42; border-color: #142b42; --ink: #f5f9ff; --muted: #c2d4e4; color: var(--ink); }
.plan-growth .button { background: #abdfff; color: #133048; }
.plan-growth .button:hover { background: #d0edff; color: #133048; }
.capacity-note { margin-top: 30px; display: flex; gap: 14px; align-items: flex-start; font-size: .81rem; color: var(--muted); line-height: 1.8; max-width: 112ch; }
.capacity-note > .icon { margin-top: 4px; width: 20px; height: 20px; color: var(--accent); }
.capacity-note strong { font-weight: 600; color: var(--ink); }
.landing-footer { background: #102538; color: #edf6ff; --muted: #b7cada; --ink: #edf6ff; --accent: #a6dfff; --line: #375064; padding: 76px 0 92px; }
.landing-footer-grid { display: grid; grid-template-columns: 1.7fr .8fr 1fr; gap: 70px; }
.footer-brand { display: inline-block; font-size: 2.25rem; letter-spacing: -.04em; font-weight: 600; min-height: 44px; }
.footer-brand > span { color: #9ddcff; }
.footer-identity > p { font-size: .9rem; line-height: 1.8; color: var(--muted); max-width: 31ch; margin-top: 14px; }
.landing-footer .social-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.social-links a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: #c4d9ea; font-size: .75rem; }
.social-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; }
.footer-column h3 { font-size: .85rem; font-weight: 600; margin-top: 11px; margin-bottom: 16px; }
.footer-column a { color: var(--muted); font-size: .81rem; display: inline-flex; gap: 9px; align-items: center; min-height: 44px; }
.footer-column a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.landing-footer-bottom { border-top: 1px solid var(--line); margin-top: 55px; padding-top: 23px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: .74rem; color: var(--muted); }
.landing-footer-bottom a { display: inline-flex; align-items: center; gap: 15px; min-height: 44px; }
.sales-dialog { width: min(460px, calc(100vw - 36px)); padding: 30px; }
.sales-dialog .icon-button { margin-left: auto; margin-bottom: 24px; }
.sales-dialog h2 { font-size: 1.8rem; line-height: 1.3; }
.sales-dialog p { font-size: .95rem; line-height: 1.8; color: #475f75; margin-top: 19px; }
.sales-dialog > .button { margin-top: 28px; background: #142438; color: #fff; }
.no-script-notice { padding-block: 25px 85px; color: var(--muted); font-size: .85rem; }
body[data-concept="gateway"].complete-landing { --section-surface: #0b1727; --section-alternate: #07101d; }
body[data-concept="gateway"] .capabilities-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
body[data-concept="gateway"] .capability-item { flex-direction: column; gap: 20px; border-bottom: 0; }
body[data-concept="gateway"] .capability-symbol { justify-content: start; width: 44px; height: 50px; }
body[data-concept="gateway"] .capability-item h3 { font-size: 1.19rem; }
body[data-concept="gateway"] .capability-item p { font-size: .94rem; }
body[data-concept="gateway"] .plan-growth { background: #a3dfff; border-color: #a3dfff; --ink: #132c43; --muted: #2b4a64; }
body[data-concept="gateway"] .plan-growth .popular-plan { color: #21405a; border-color: #5e9ec2; }
body[data-concept="gateway"] .plan-growth .button { background: #142b42; color: #fff; }
body[data-concept="gateway"] .plan-growth .button:hover { background: #23455f; color: #fff; }
body[data-concept="gateway"] .landing-footer { background: #040b15; }
body[data-concept="network"].complete-landing { --section-surface: #f5fbff; --section-alternate: #dcecf8; }
body[data-concept="network"] .api-description { grid-column: 2; grid-row: 1; }
body[data-concept="network"] .invoice-code { grid-column: 1; grid-row: 1; }
body[data-concept="network"] .capability-symbol { background: #e1f0fa; border-radius: 8px; box-shadow: 2px 3px 0 #c6deef; }
body[data-concept="network"] .landing-footer { background: #102f47; }
body.motion-paused .processing-diagram *, body.motion-reduced .processing-diagram * { transition: none !important; }
@media (max-width: 1200px) {
  .comparison-bar { gap: 13px; padding-inline: 20px; }
  .comparison-title { font-size: .64rem; }
  .comparison-title code { font-size: .6rem; }
  .option-links a { font-size: .69rem; padding-inline: 10px; }
  .comparison-tools { font-size: .64rem; gap: 12px; }
  .complete-landing .brand-product { display: none; }
  .complete-landing .site-nav { gap: 23px; }
  .api-layout { column-gap: 50px; }
  .capabilities-grid { gap: 0 45px; }
  .plans-grid { gap: 16px; }
  .plan { padding: 29px 22px; }
  .plan-heading > div { flex-wrap: wrap; gap: 7px; }
  .plan-heading { min-height: 90px; }
  .plan-price { font-size: 3rem; }
  .landing-footer-grid { gap: 45px; }
}
@media (max-width: 920px) {
  .comparison-title { display: none; }
  .option-links { gap: 0; }
  .comparison-bar { justify-content: center; gap: 20px; padding-inline: 15px; }
  .comparison-tools { gap: 14px; }
  .comparison-tools a:last-child { display: none; }
  .complete-landing .site-nav { gap: 18px; }
  .complete-landing .site-actions { gap: 14px; }
  .complete-landing .site-header { min-height: 86px; }
  .complete-landing .precision-hero, .complete-landing .network-hero { min-height: 520px; }
  .complete-landing .gateway-copy { padding-top: 70px; }
  .complete-landing .gateway-hero { min-height: 570px; }
  .assurance-strip { font-size: .72rem; gap: 17px; }
  .assurance-strip > a { display: none; }
  .landing-section { padding-block: 75px; }
  .capabilities-grid, body[data-concept="gateway"] .capabilities-grid { grid-template-columns: 1fr 1fr; gap: 0 38px; }
  body[data-concept="gateway"] .capability-item { border-bottom: 1px solid var(--line); }
  .capability-item { gap: 17px; }
  .capability-symbol { flex-basis: 36px; width: 36px; }
  .capability-item h3 { font-size: 1.11rem; }
  .capability-item p { font-size: .87rem; }
  .api-layout { gap: 48px; grid-template-columns: 1fr; align-items: stretch; }
  .api-description { max-width: 70ch; }
  .invoice-code { max-width: none; }
  .invoice-code pre { font-size: .9rem; }
  .developer-capabilities { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  body[data-concept="network"] .api-description, body[data-concept="network"] .invoice-code { grid-column: auto; grid-row: auto; }
  .processing-steps { grid-template-columns: 1fr 1fr; gap: 22px 35px; }
  .processing-steps > li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .plans-grid { grid-template-columns: 1fr; gap: 22px; }
  .plan { padding: 30px; display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 35px; }
  .plan-heading { min-height: 0; grid-column: 1; }
  .plan-price { grid-column: 1; grid-row: 2; margin: 20px 0 30px; }
  .plan ul { grid-column: 2; grid-row: 1 / span 3; border-left: 1px solid var(--line); padding-left: 25px; }
  .plan .button { grid-column: 1; grid-row: 3; margin-top: 0; align-self: end; }
  .plan-growth { --line: #52718a; }
  .landing-footer-grid { grid-template-columns: 1.4fr .7fr 1fr; gap: 25px; }
  .social-links a { font-size: .72rem; }
}
@media (max-width: 680px) {
  .comparison-bar { padding: 6px 9px; display: block; }
  .comparison-tools { display: none; }
  .option-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .option-links a { font-size: .73rem; line-height: 1.4; padding: 7px 5px; min-height: 46px; text-align: center; }
  .option-links a > span { display: none; }
  .complete-landing.has-comparison .landing-section { scroll-margin-top: 4rem; }
  .complete-landing .site-header, body[data-concept="gateway"].complete-landing .site-header { min-height: 84px; }
  .complete-landing .site-nav { gap: 4px; }
  .complete-landing .site-nav .mobile-login { display: inline-flex; }
  .complete-landing .desktop-login { display: none; }
  .complete-landing .site-actions .button { font-size: .74rem; padding-inline: 13px; }
  .complete-landing .site-nav { top: 75px; }
  .complete-landing .precision-hero, .complete-landing .network-hero { min-height: 0; padding-top: 25px; }
  .complete-landing .gateway-copy { padding-top: 25px; padding-bottom: 0; }
  .complete-landing .gateway-copy h1 { font-size: clamp(3.4rem, 13vw, 4.8rem); }
  .complete-landing .gateway-copy .hero-description { font-size: .97rem; line-height: 1.8; }
  .complete-landing .gateway-scene { height: 425px; }
  .complete-landing .hero-footnote { font-size: .76rem; line-height: 1.7; }
  .assurance-strip { flex-wrap: wrap; gap: 17px 22px; font-size: .76rem; justify-content: flex-start; padding-block: 25px; }
  .assurance-strip .icon { width: 18px; height: 18px; }
  .landing-section { padding-block: 60px; }
  .complete-landing .section-heading { margin-bottom: 30px; }
  .complete-landing .section-heading h2 { font-size: 2rem; }
  .capabilities-grid, body[data-concept="gateway"] .capabilities-grid { grid-template-columns: 1fr; gap: 0; }
  .capability-item, body[data-concept="gateway"] .capability-item { flex-direction: row; gap: 18px; padding-block: 27px; }
  .capability-item h3, body[data-concept="gateway"] .capability-item h3 { font-size: 1.2rem; }
  .capability-item p, body[data-concept="gateway"] .capability-item p { font-size: .94rem; line-height: 1.85; }
  .capability-symbol { flex: 0 0 36px; }
  .capability-symbol .icon { width: 27px; height: 27px; }
  .api-layout { gap: 36px; }
  .api-version-detail h3 { font-size: .98rem; }
  .api-version-detail p { font-size: .92rem; }
  .api-version-detail a { gap: 10px; }
  .api-version-detail a > .icon { width: 14px; height: 14px; }
  .version-tag { width: 29px; height: 29px; font-size: .63rem; }
  .code-toolbar { padding: 11px 16px; }
  .code-toolbar > span, .code-toolbar button { font-size: .72rem; }
  .code-endpoint { padding: 18px 17px 0; font-size: .68rem; gap: 8px; }
  .invoice-code pre { padding: 0 17px 20px; font-size: .75rem; line-height: 1.85; }
  .code-caption { padding: 12px 17px; gap: 5px; font-size: .72rem; }
  .code-caption a { min-height: 44px; }
  .developer-capabilities { gap: 27px 20px; padding-top: 28px; }
  .developer-capabilities dt { align-items: flex-start; font-size: .8rem; gap: 8px; line-height: 1.65; }
  .developer-capabilities dd { margin-left: 0; font-size: .79rem; line-height: 1.75; }
  .developer-capabilities dt .icon { width: 17px; height: 17px; margin-top: 4px; }
  .processing-diagram { height: 140px; padding: 12px 0 20px; }
  .process-object { width: 52px; height: 65px; border-radius: 5px; gap: 5px; }
  .process-object > span { font-size: 19px; }
  .process-object > .icon { width: 22px; height: 22px; }
  .process-object > small { font-size: 7px; }
  .processing-steps { gap: 24px 23px; margin-top: 20px; }
  .process-step-button { min-height: 101px; padding-top: 20px; }
  .step-number { font-size: .74rem; line-height: 1.6; }
  .step-title { font-size: 1rem; line-height: 1.45; }
  .processing-steps p { font-size: .87rem; }
  .workflow-status { font-size: .78rem; line-height: 1.8; margin-top: 26px; }
  .plan { display: flex; padding: 29px 24px; }
  .plan-heading { min-height: 0; }
  .plan-heading > div { flex-wrap: nowrap; }
  .plan-price { font-size: 3.2rem; margin: 25px 0 26px; }
  .plan-heading p { font-size: .88rem; }
  .plan ul { border: 0; padding-left: 0; }
  .plan li { font-size: .88rem; }
  .plan .button { margin-top: 30px; align-self: auto; font-size: .9rem; min-height: 52px; }
  .popular-plan { font-size: .66rem; }
  .capacity-note { font-size: .84rem; gap: 12px; }
  .landing-footer { padding: 55px 0 88px; }
  .landing-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 22px; }
  .footer-identity { grid-column: 1 / -1; }
  .footer-brand { font-size: 2.3rem; }
  .footer-identity > p { font-size: .98rem; max-width: 35ch; }
  .landing-footer .social-links { gap: 20px; margin-top: 20px; }
  .social-links a { font-size: .79rem; }
  .footer-column h3 { font-size: .9rem; margin-bottom: 10px; }
  .footer-column a { font-size: .84rem; }
  .landing-footer-bottom { align-items: flex-start; flex-direction: column; gap: 10px; font-size: .78rem; margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .complete-landing .processing-diagram * { transition: none !important; }
}
@media (forced-colors: active) {
  .processing-diagram { display: none; }
  .plan-growth, .option-links a[aria-current="page"] { border: 2px solid CanvasText; }
}
.copy-feedback { padding: 15px 22px; color: #38516a; font-size: .8rem; background: #e4edf5; }
.api-version-primary { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.api-version-primary h3 { color: var(--accent); }
.api-version-detail .version-tag .icon { width: 16px; height: 16px; }
.request-tabs { display: flex; gap: 7px; padding: 12px 20px 0; }
.request-tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #516c84; padding: 8px 13px; min-height: 44px; font-size: .78rem; }
.request-tabs button[aria-selected="true"] { color: #154d7a; border-color: #176caf; font-weight: 700; }
.request-tabs button:hover { color: #1262c4; background: #eef5fb; }
.invoice-code .request-headers { background: #edf4fa; margin: 18px 20px; padding: 14px 16px; border-radius: 5px; font-size: .69rem; line-height: 1.9; color: #34546d; }
.invoice-code .v2-json-example { max-height: 350px; overflow: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.request-code-panel { outline-offset: -3px; }
.request-example-note { padding: 12px 22px 19px; font-size: .69rem; color: #526a80; line-height: 1.8; }
.developer-capabilities code, .processing-steps code { overflow-wrap: anywhere; font-size: .86em; }
.v2-integration-details { grid-column: 1 / -1; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: -15px; }
.v2-integration-details > summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; list-style: none; min-height: 64px; padding-block: 17px; font-size: .94rem; font-weight: 600; cursor: pointer; }
.v2-integration-details > summary::-webkit-details-marker { display: none; }
.v2-integration-details > summary .icon { width: 20px; height: 20px; transition: transform .2s; }
.v2-integration-details[open] > summary .icon { transform: rotate(45deg); }
.v2-integration-details > summary:hover { color: var(--accent); }
.v2-integration-details > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.v2-details-content { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 55px; padding: 14px 0 30px; }
.v2-details-content h3 { font-size: 1rem; font-weight: 600; line-height: 1.5; margin-bottom: 12px; }
.v2-details-content p { font-size: .86rem; line-height: 1.9; color: var(--muted); }
.v2-details-content code { font-size: .87em; color: var(--ink); overflow-wrap: anywhere; }
.v2-endpoints { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 13px; border-top: 1px solid var(--line); padding-top: 22px; }
.v2-endpoints p > strong { display: inline-block; min-width: 150px; color: var(--ink); font-weight: 600; }
.sales-dialog > .text-link { margin-top: 18px; color: #205e8f; font-size: .84rem; }
@media (max-width: 680px) {
  .request-tabs { padding-inline: 14px; }
  .invoice-code .request-headers { margin-inline: 14px; padding-inline: 12px; font-size: .63rem; }
  .invoice-code .v2-json-example { max-height: 320px; }
  .request-example-note { font-size: .74rem; padding-inline: 17px; }
  .v2-details-content { grid-template-columns: 1fr; gap: 25px; }
  .v2-details-content p { font-size: .9rem; }
  .v2-endpoints p > strong { display: block; margin-bottom: 6px; }
}