:root { --blue:#1f5493; --blue-dark:#12365f; --blue-light:#e9eef6; --cyan:#42c5d4; --green:#16845b; --ink:#17202d; --muted:#5d6878; --line:#cfd9e7; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--white); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; margin:0; }
a { color:inherit; }
.skip-link { background:var(--blue-dark); color:var(--white); left:1rem; padding:.75rem 1rem; position:fixed; top:-4rem; z-index:20; }
.skip-link:focus { top:1rem; }
.site-header { align-items:center; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); display:flex; height:72px; justify-content:space-between; padding:0 clamp(1.25rem,5vw,5rem); position:sticky; top:0; z-index:10; }
.brand { align-items:center; display:flex; font-size:1.05rem; font-weight:800; gap:.7rem; text-decoration:none; }
.brand-mark { align-items:center; background:var(--blue); color:var(--white); display:flex; font-family:Georgia,serif; font-size:1.2rem; height:32px; justify-content:center; width:32px; }
#site-nav { display:flex; gap:2rem; }
#site-nav a { font-size:.9rem; font-weight:700; text-decoration:none; }
.menu-button { background:transparent; border:1px solid var(--line); display:none; font:inherit; padding:.55rem .75rem; }
.hero { background-image:url("assets/api-lifecycle.png"); background-position:right center; background-repeat:no-repeat; background-size:62% auto; display:flex; min-height:min(720px,calc(100vh - 72px)); padding:clamp(5rem,10vh,8rem) clamp(1.25rem,7vw,7rem); }
.hero-copy { align-self:center; max-width:530px; position:relative; z-index:1; }
.eyebrow { color:var(--blue); font-size:.75rem; font-weight:850; letter-spacing:0; margin:0 0 1.25rem; text-transform:uppercase; }
h1,h2 { font-family:Georgia,"Times New Roman",serif; font-weight:500; letter-spacing:0; }
h1 { color:var(--blue-dark); font-size:clamp(4rem,8vw,7rem); line-height:.88; margin:0; }
.lead { color:var(--ink); font-size:clamp(1.2rem,2vw,1.65rem); line-height:1.45; max-width:500px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin:2rem 0 3rem; }
.button { align-items:center; border:1px solid var(--blue); display:inline-flex; font-size:.9rem; font-weight:800; justify-content:center; min-height:46px; padding:.75rem 1.2rem; text-decoration:none; }
.button.primary { background:var(--blue); color:var(--white); }.button.secondary { background:var(--white); color:var(--blue); }.button.light { border-color:var(--white); color:var(--white); }
.hero-proof { display:flex; gap:0; margin:0; }
.hero-proof div { border-left:2px solid var(--blue); padding:0 1rem; }.hero-proof div:first-child { padding-left:.75rem; }
.hero-proof dt { font-size:.8rem; font-weight:800; }.hero-proof dd { color:var(--muted); font-size:.72rem; margin:.25rem 0 0; }
.band { padding:clamp(4.5rem,9vw,8rem) clamp(1.25rem,7vw,7rem); }
.section-heading { max-width:780px; }.section-heading h2 { font-size:clamp(2.5rem,5vw,4.7rem); line-height:1; margin:0 0 1.25rem; }.section-heading>p:last-child { color:var(--muted); font-size:1.1rem; line-height:1.6; }
.intro-band { align-items:start; display:grid; gap:5rem; grid-template-columns:minmax(0,1fr) minmax(300px,.7fr); }.intro-copy { border-left:3px solid var(--cyan); color:var(--muted); font-size:1.12rem; line-height:1.75; padding-left:2rem; }
.workflow-band { background:var(--blue-light); }.workflow { display:grid; gap:0; grid-template-columns:repeat(5,minmax(0,1fr)); list-style:none; margin:4rem 0 0; padding:0; }.workflow li { border-left:1px solid #aebed3; min-height:220px; padding:0 1.5rem; }.workflow li:first-child { padding-left:0; border-left:0; }.workflow span { color:var(--blue); font-size:.75rem; font-weight:900; }.workflow h3 { font-size:1.35rem; margin:2.5rem 0 .75rem; }.workflow p { color:var(--muted); line-height:1.6; }
.planes-band { background:var(--blue-dark); color:var(--white); }.planes-band .eyebrow { color:var(--cyan); }.plane-grid { display:grid; gap:1px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:4rem; }.plane-grid article { border-top:1px solid rgba(255,255,255,.35); padding:2rem 4rem 2rem 0; }.plane-grid article+article { border-left:1px solid rgba(255,255,255,.35); padding-left:4rem; }.plane-grid header { align-items:baseline; display:flex; gap:1rem; }.plane-grid header span { color:var(--cyan); font-weight:800; }.plane-grid h3 { font-size:2rem; margin:0; }.plane-grid p,.plane-grid li { color:#dce7f3; line-height:1.7; }.architecture-note { border-top:1px solid rgba(255,255,255,.35); margin:2rem 0 0; padding-top:2rem; }
.gateway-table { border-top:2px solid var(--blue); margin-top:3rem; }.table-row { border-bottom:1px solid var(--line); display:grid; gap:2rem; grid-template-columns:.7fr 1fr 1fr; padding:1.25rem 0; }.table-row span { color:var(--muted); }.table-head { color:var(--blue); font-size:.78rem; font-weight:850; text-transform:uppercase; }
.outcomes-band { background:#f7f9fc; }.outcomes { display:grid; gap:3rem; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:3rem; }.outcomes div { border-top:3px solid var(--blue); padding-top:1.5rem; }.outcomes strong { font-size:1.15rem; }.outcomes p { color:var(--muted); line-height:1.65; }
.closing { background:var(--blue); color:var(--white); padding:clamp(5rem,9vw,8rem) clamp(1.25rem,7vw,7rem); }.closing .eyebrow { color:#bcecf1; }.closing h2 { font-size:clamp(2.6rem,5vw,5rem); line-height:1; max-width:900px; }
footer { align-items:center; display:grid; gap:2rem; grid-template-columns:1fr auto 1fr; padding:2rem clamp(1.25rem,7vw,7rem); }footer>span { justify-self:end; }footer p { color:var(--muted); }footer>span a { color:var(--blue); font-weight:800; }
@media (max-width:900px) { .hero { background-position:120% center; background-size:72% auto; }.hero-copy { background:rgba(255,255,255,.94); max-width:470px; padding:1.5rem 1.5rem 1.5rem 0; }.workflow { grid-template-columns:repeat(2,1fr); row-gap:2rem; }.workflow li:first-child { padding-left:1.5rem; border-left:1px solid #aebed3; }.outcomes { grid-template-columns:1fr; }.intro-band { gap:2rem; grid-template-columns:1fr; } }
@media (max-width:680px) { .site-header { height:64px; }.menu-button { display:block; }#site-nav { background:var(--white); border-bottom:1px solid var(--line); display:none; flex-direction:column; gap:0; left:0; padding:1rem 1.25rem; position:absolute; right:0; top:64px; }#site-nav.open { display:flex; }#site-nav a { padding:.8rem 0; }.hero { background-position:58% 100%; background-size:auto 58%; min-height:760px; padding-top:3.5rem; }.hero-copy { align-self:flex-start; background:rgba(255,255,255,.94); padding:0 0 1rem; }.hero-proof { flex-wrap:wrap; row-gap:1rem; }.workflow { grid-template-columns:1fr; }.workflow li { min-height:auto; padding-bottom:1.5rem; }.workflow h3 { margin-top:.75rem; }.plane-grid { grid-template-columns:1fr; }.plane-grid article,.plane-grid article+article { border-left:0; padding:2rem 0; }.table-row { gap:.6rem; grid-template-columns:1fr; }.table-head { display:none; }.table-row span::before { color:var(--blue); content:attr(data-label); display:block; font-size:.7rem; font-weight:800; }.outcomes { gap:1.5rem; }footer { grid-template-columns:1fr; }footer>span { justify-self:start; } }