/* ============================================================================
   Credicorp for Developers — dev.credicorp.co.uk
   REBUILT on the Credicorp Resource-Hub / Help-Centre design system.

   The canonical design tokens (color / type / space / radii / shadow / motion)
   are inlined VERBATIM from build-files/subhubs/assets/hub.css (which in turn
   mirrors credicorp.co.uk + help.credicorp.co.uk resources/css/tokens/*). Every
   developer-docs component below (sidebar, code blocks, method badges, API
   tables, language tabs, callouts, status rows, pagers) is then re-derived from
   those tokens in the shared deep-neutral skeuo idiom: grey canvas, white cards
   that lift, navy headings, green keyline, navy→green footer band.

   To keep parity with the estate: when hub.css token blocks change, re-sync the
   :root blocks below. The legacy dev component classes are preserved 1:1 (no
   page markup changes) via the COMPAT ALIAS layer — old --navy/--soft/--line/etc
   now resolve to the canonical --c-* tokens, so every existing page adopts the
   hub look without being re-authored.
   ========================================================================== */

/* ---- brand fonts (Montserrat display + Inter body) ---- */
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/montserrat-400.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/montserrat-600.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/montserrat-700.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Inter-Regular.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/Inter-Medium.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/Inter-SemiBold.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/Inter-Bold.woff2) format("woff2")}

/* ============================================================================
   CANONICAL DESIGN TOKENS — inlined verbatim from hub.css
   ========================================================================== */
:root{
  --c-navy:#003366; --c-navy-2:#16325c; --c-navy-dark:#002244; --c-navy-light:#2b6ca8;
  --c-blue:var(--c-navy-light);
  --c-brand:var(--c-navy); --c-brand-dark:var(--c-navy-dark); --c-brand-light:var(--c-navy-light);
  --c-green:#90cb22; --c-green-dark:#5f8a16; --c-accent:var(--c-green);
  --c-ink:#111827; --c-ink-muted:#374151; --c-ink-subtle:#6b7280;
  --c-border:#e5e7eb; --c-white:#ffffff;
  --c-bg:#f5f7fa; --c-bg-alt:#eef1f6; --c-bg-elevated:#ffffff;
  --c-surface-navy-tint:#eef3f8; --c-surface-green-tint:#f4f9e9;
  --c-border-strong:#8a8a8a;
  --c-muted:var(--c-ink-subtle); --c-text-secondary:var(--c-ink-muted); --c-surface-muted:var(--c-bg-alt);
  --c-text:var(--c-ink); --c-text-muted:var(--c-ink-muted); --c-text-subtle:var(--c-ink-subtle);
  --color-border:#9aa6b8; --color-primary:var(--c-navy); --color-link:var(--c-navy);
  --c-success:#16a34a; --c-warn:#d97706; --c-error:#dc2626; --c-info:#2563eb;
  --c-success-text:#166534; --c-warn-text:#92400e; --c-error-text:#b42318;
  --font-sans:"Montserrat","Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --fs-xs:0.75rem; --fs-sm:0.875rem; --fs-base:1rem; --fs-lg:1.125rem;
  --fs-xl:clamp(1.25rem,1.18rem + 0.35vw,1.4rem);
  --fs-2xl:clamp(1.5rem,1.38rem + 0.6vw,1.75rem);
  --fs-3xl:clamp(1.75rem,1.55rem + 1vw,2.125rem);
  --fs-4xl:clamp(2.125rem,1.7rem + 2.1vw,2.75rem);
  --lh-tight:1.15; --lh-normal:1.5; --lh-loose:1.6;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:clamp(20px,1.1rem + 1.1vw,28px);
  --sp-6:clamp(26px,1.3rem + 2vw,40px);
  --sp-7:clamp(34px,1.4rem + 3.4vw,60px);
  --sp-8:clamp(44px,1.8rem + 5vw,80px);
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-full:9999px;
  --shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 2px 8px rgba(15,23,42,.06);
  --skeu-highlight:inset 0 1px 0 rgba(255,255,255,.6);
  --skeu-highlight-strong:inset 0 1px 0 rgba(255,255,255,.8);
  --skeu-shadow-raised:var(--skeu-highlight),0 1px 2px rgba(15,23,42,.05),0 4px 12px rgba(15,23,42,.05);
  --skeu-shadow-raised-lg:var(--skeu-highlight),0 2px 4px rgba(15,23,42,.05),0 10px 22px rgba(15,23,42,.07);
  --skeu-shadow-hover:var(--skeu-highlight-strong),0 2px 6px rgba(15,23,42,.06),0 12px 26px rgba(15,23,42,.08);
  --skeu-shadow-inset:inset 0 1px 3px rgba(15,23,42,.10),inset 0 1px 2px rgba(15,23,42,.06),inset 0 0 0 1px rgba(15,23,42,.02);
  --skeu-grad-navy:linear-gradient(180deg,color-mix(in srgb,var(--c-navy) 84%,#fff) 0%,var(--c-navy) 46%,var(--c-navy-dark) 100%);
  --skeu-grad-navy-hover:linear-gradient(180deg,color-mix(in srgb,var(--c-navy) 92%,#fff) 0%,var(--c-navy-dark) 100%);
  --skeu-shadow-cta-navy:inset 0 1px 0 rgba(255,255,255,.20),0 1px 2px rgba(15,23,42,.10),0 2px 6px rgba(15,23,42,.09);
  --skeu-shadow-cta-navy-hover:inset 0 1px 0 rgba(255,255,255,.24),0 2px 4px rgba(15,23,42,.12),0 6px 14px rgba(15,23,42,.11);
  --skeu-grad-surface:linear-gradient(180deg,var(--c-white) 0%,color-mix(in srgb,var(--c-surface-navy-tint) 60%,var(--c-white)) 100%);
  --skeu-grad-surface-hover:linear-gradient(180deg,var(--c-surface-navy-tint) 0%,color-mix(in srgb,var(--c-surface-navy-tint) 70%,var(--c-navy)) 100%);
  --skeu-shadow-cta-surface:var(--skeu-highlight-strong),0 1px 2px rgba(15,23,42,.08),0 2px 6px rgba(15,23,42,.07);
  --skeu-shadow-cta-surface-hover:inset 0 1px 0 rgba(255,255,255,.85),0 2px 4px rgba(15,23,42,.10),0 6px 14px rgba(15,23,42,.09);
  --skeu-shadow-chrome:0 1px 0 rgba(255,255,255,.55),0 1px 3px rgba(15,23,42,.06),0 6px 14px rgba(15,23,42,.07);
  --skeu-shadow-float:0 2px 8px rgba(15,23,42,.07),0 14px 30px rgba(15,23,42,.10);
  --skeu-grad-navy-band:linear-gradient(160deg,color-mix(in srgb,var(--c-navy) 88%,#fff) 0%,var(--c-navy) 60%,var(--c-navy-dark) 100%);
  --shadow-focus:0 0 0 3px #2b6ca8;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:120ms; --dur-normal:220ms;
  --z-sticky:100; --z-overlay:500;
  --container-wide:1320px; --container-gutter:clamp(18px,4vw,34px);

  /* ---- COMPAT ALIAS LAYER — legacy dev.css variables now resolve to canonical tokens
          so every existing page picks up the hub design with no markup changes ---- */
  --navy:var(--c-navy); --navy-2:var(--c-navy-2); --navy-3:var(--c-navy-dark); --navy-hi:var(--c-navy-light);
  --ink:var(--c-ink); --soft:var(--c-ink-muted); --muted:var(--c-ink-subtle);
  --line:var(--c-border); --line-2:var(--c-bg-alt);
  --paper:var(--c-bg-elevated); --bg:var(--c-bg);
  --green:var(--c-green); --green-2:var(--c-green-dark); --green-bg:var(--c-surface-green-tint); --accent:var(--c-green);
  --code:#0a1b30; --code-ink:#cfe0f5; --code-grn:#a7d98a; --code-blu:#82b6ff;
  --r:var(--r-lg); --maxw:var(--container-wide);
  --font:var(--font-sans); --mono:var(--font-mono);
  --sh:var(--skeu-shadow-raised); --sh-lg:var(--skeu-shadow-raised-lg);
}
@media(prefers-reduced-motion:reduce){:root{--dur-fast:1ms;--dur-normal:1ms}}
@media(max-width:1023.98px){
  :root{
    --skeu-shadow-raised:var(--skeu-highlight),0 1px 2px rgba(15,23,42,.04),0 2px 6px rgba(15,23,42,.04);
    --skeu-shadow-raised-lg:var(--skeu-highlight),0 1px 3px rgba(15,23,42,.05),0 3px 8px rgba(15,23,42,.05);
    --skeu-shadow-hover:var(--skeu-highlight-strong),0 1px 3px rgba(15,23,42,.05),0 4px 10px rgba(15,23,42,.06);
    --skeu-shadow-float:0 1px 4px rgba(15,23,42,.06),0 6px 16px rgba(15,23,42,.07);
    --skeu-shadow-chrome:0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(15,23,42,.05),0 3px 8px rgba(15,23,42,.05);
  }
}

/* ============================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;font-family:var(--font-sans);color:var(--c-ink);background:var(--c-bg);
  font-size:var(--fs-base);line-height:var(--lh-loose);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-navy-light);text-decoration:none}
a:hover{color:var(--c-navy);text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-sans);color:var(--c-navy);line-height:var(--lh-tight);letter-spacing:0;margin:0 0 .5em;font-weight:700}
h1{font-size:var(--fs-3xl)} h2{font-size:var(--fs-2xl)} h3{font-size:var(--fs-xl)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--container-gutter)}
.eyebrow{display:inline-block;font-weight:600;font-size:var(--fs-sm);letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-navy-light)}

/* ============================================================================
   HEADER — frosted sticky chrome bar (hub idiom)
   ========================================================================== */
.nav{position:sticky;top:0;z-index:var(--z-sticky);
  background:color-mix(in srgb,var(--c-white) 94%,transparent);
  -webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--c-border);box-shadow:var(--skeu-shadow-chrome)}
.nav__in{display:flex;align-items:center;gap:var(--sp-4);min-height:64px}
.nav__logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--c-navy);text-decoration:none;flex:0 0 auto}
.nav__logo:hover{text-decoration:none}
.nav__logo-img{height:30px;width:auto;display:block}
.nav__logo-sfx{color:var(--c-ink-subtle);font-weight:600;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;
  border-left:1px solid var(--c-border);padding-left:10px;line-height:1.05}
.nav__menu{display:flex;align-items:center;gap:var(--sp-4);margin-left:auto;min-width:0}
.nav__links{display:flex;align-items:center;gap:2px}
.nav__links a{display:inline-flex;align-items:center;min-height:44px;color:var(--c-ink-muted);
  font-weight:600;font-size:var(--fs-sm);padding:.5em .7em;border-radius:var(--r-md)}
.nav__links a:hover{color:var(--c-navy);text-decoration:none;background:color-mix(in srgb,var(--c-surface-navy-tint) 70%,transparent)}
.nav__links a.is-active{color:var(--c-navy)}
.nav__cta{display:flex;gap:var(--sp-2);align-items:center}
/* hamburger — hidden on desktop, shown on mobile */
.menu-btn{display:none;margin-left:auto;align-items:center;justify-content:center;
  background:var(--skeu-grad-surface);border:1px solid var(--c-border-strong);border-radius:var(--r-md);
  width:42px;height:42px;padding:0;cursor:pointer;color:var(--c-navy);box-shadow:var(--skeu-shadow-cta-surface);flex:0 0 auto}
.menu-btn svg{display:block}

/* footer logo variant */
.nav__logo--foot .nav__logo-img{height:33px}
.nav__logo-sfx--foot{color:color-mix(in srgb,var(--c-white) 70%,transparent);border-left-color:rgba(255,255,255,.28)}

/* ============================================================================
   BUTTONS — skeuo CTA (hub idiom)
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:.6em 1.15em;border:1px solid transparent;border-radius:var(--r-md);font:inherit;font-weight:600;
  line-height:1.1;font-size:var(--fs-sm);cursor:pointer;
  transition:transform var(--dur-fast) ease,box-shadow var(--dur-fast) ease,background var(--dur-fast) ease}
.btn--p{color:var(--c-white);background:var(--skeu-grad-navy);border-color:var(--c-navy-dark);box-shadow:var(--skeu-shadow-cta-navy)}
.btn--p:hover{color:var(--c-white);background:var(--skeu-grad-navy-hover);box-shadow:var(--skeu-shadow-cta-navy-hover);text-decoration:none;transform:translateY(-1px)}
.btn--g{background:var(--skeu-grad-surface);color:var(--c-navy);border-color:var(--c-border);box-shadow:var(--skeu-shadow-cta-surface)}
.btn--g:hover{box-shadow:var(--skeu-shadow-cta-surface-hover);text-decoration:none;transform:translateY(-1px);border-color:var(--c-navy-light)}
.btn--w{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5)}
.btn--w:hover{background:rgba(255,255,255,.2);text-decoration:none;color:#fff}

/* ============================================================================
   HERO — full-bleed navy band (hub --skeu-grad-navy-band). Used by index.html.
   ========================================================================== */
.hero{background:var(--skeu-grad-navy-band);color:#eaf2fb;border-bottom:1px solid var(--c-navy-dark);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18);position:relative;overflow:hidden}
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-block:var(--sp-8)}
.hero .eyebrow{color:color-mix(in srgb,var(--c-white) 80%,transparent)}
.hero h1{color:#fff;font-size:var(--fs-4xl);font-weight:700;margin:14px 0 0;max-width:18ch}
.hero p.lead{font-size:var(--fs-lg);color:color-mix(in srgb,var(--c-white) 86%,transparent);margin:18px 0 28px;max-width:34em}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .trust{margin-top:26px;display:flex;gap:22px;flex-wrap:wrap;color:color-mix(in srgb,var(--c-white) 72%,transparent);font-size:var(--fs-sm)}
.hero .trust b{color:#fff}

/* hero code card (the homepage curl sample) */
.code{background:var(--code);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);
  box-shadow:var(--skeu-shadow-float);overflow:hidden;font-family:var(--mono);font-size:13.5px}
.code__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.5);font-size:12px}
.code__bar .d{width:11px;height:11px;border-radius:50%}.code__bar .d1{background:#ff5f57}.code__bar .d2{background:#febc2e}.code__bar .d3{background:#28c840}
.code pre{margin:0;padding:18px;color:var(--code-ink);overflow-x:auto;line-height:1.7}
.code .k{color:#ff9d6b}.code .s{color:var(--code-grn)}.code .p{color:var(--code-blu)}.code .c{color:#6b8299}

/* ============================================================================
   SECTIONS / CARDS / GRIDS (homepage + marketing-style sections)
   ========================================================================== */
section{padding:var(--sp-8) 0}
.sec-head{max-width:720px;margin:0 0 var(--sp-6)}
.sec-head h2{font-size:var(--fs-3xl);font-weight:700;margin:10px 0 0;color:var(--c-navy)}
.sec-head p{color:var(--c-ink-muted);font-size:var(--fs-lg);margin:14px 0 0}
.tracks,.grid3{display:grid;gap:var(--sp-5)}
.tracks{grid-template-columns:repeat(3,1fr)}.grid3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--sp-5);
  box-shadow:var(--skeu-shadow-raised);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.card:hover{box-shadow:var(--skeu-shadow-hover);transform:translateY(-3px);border-color:var(--c-navy-light)}
.card .ic{width:46px;height:46px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  color:var(--c-navy);background:var(--c-surface-navy-tint);margin-bottom:16px}
.card h3{font-size:var(--fs-lg);color:var(--c-navy);margin-bottom:9px}
.card p{color:var(--c-ink-muted);margin:0 0 14px;font-size:var(--fs-sm)}
.card ul{margin:0;padding-left:18px;color:var(--c-ink-muted);font-size:var(--fs-sm)}.card ul li{margin:5px 0}
.card .more{font-weight:600;color:var(--c-navy-light);font-size:var(--fs-sm);display:inline-flex;gap:6px;align-items:center}
.card:hover .more{text-decoration:underline}
.alt{background:var(--c-bg-alt);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border)}

/* products grid */
.prod{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.prod .card{padding:22px}.prod .ic{width:40px;height:40px;margin-bottom:13px}
.prod .tag{display:inline-block;margin-top:10px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--c-green-dark);background:var(--c-surface-green-tint);padding:3px 9px;border-radius:var(--r-full);border:1px solid color-mix(in srgb,var(--c-green) 30%,var(--c-border))}
.prod .tag--soon{color:#9a6a12;background:#fdf1d8;border-color:#f0dcab}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.step{background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:24px;position:relative;box-shadow:var(--skeu-shadow-raised)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:24px;width:34px;height:34px;border-radius:50%;
  background:var(--skeu-grad-navy);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:var(--skeu-shadow-cta-navy)}
.step h3{margin:10px 0 8px;font-size:var(--fs-lg);color:var(--c-navy)}.step p{color:var(--c-ink-muted);margin:0;font-size:var(--fs-sm)}

/* partner tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.tier{background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:28px;box-shadow:var(--skeu-shadow-raised)}
.tier--feat{border:2px solid var(--c-navy);box-shadow:var(--skeu-shadow-raised-lg);position:relative}
.tier--feat::after{content:"Most popular";position:absolute;top:-12px;right:20px;background:var(--skeu-grad-navy);color:#fff;font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:var(--r-full);box-shadow:var(--skeu-shadow-cta-navy)}
.tier h3{color:var(--c-navy);font-size:1.25rem}.tier .who{color:var(--c-ink-subtle);font-size:.88rem;margin:4px 0 16px}
.tier ul{margin:0 0 20px;padding-left:18px;color:var(--c-ink-muted);font-size:.93rem}.tier ul li{margin:7px 0}

/* why strip */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.why .w{background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:22px;box-shadow:var(--skeu-shadow-raised)}
.why .w b{display:block;font-size:var(--fs-2xl);color:var(--c-navy);font-weight:700}
.why .w span{color:var(--c-ink-muted);font-size:.9rem}

/* CTA band — navy band gradient (hub idiom) */
.band{background:var(--skeu-grad-navy-band);color:#fff;border-radius:var(--r-lg);padding:var(--sp-7);text-align:center;
  box-shadow:var(--skeu-highlight),var(--skeu-shadow-float)}
.band h2{font-size:var(--fs-3xl);font-weight:700;color:#fff;margin-top:0}.band p{color:rgba(255,255,255,.86);margin:14px auto 26px;max-width:46em}
.band .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ============================================================================
   FOOTER — dark navy band + navy→green keyline (hub footer treatment)
   ========================================================================== */
.foot{position:relative;background:var(--skeu-grad-navy-band);
  color:color-mix(in srgb,var(--c-white) 82%,transparent);
  border-top:1px solid var(--c-navy-dark);box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  margin-top:var(--sp-8);padding:var(--sp-7) 0 var(--sp-6);font-size:var(--fs-sm)}
.foot::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--c-navy),var(--c-green));z-index:2}
.foot__cols{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--sp-4) var(--sp-6);padding-bottom:var(--sp-6);border-bottom:1px solid rgba(255,255,255,.12)}
.foot h4{color:#fff;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px}
.foot a{display:block;color:color-mix(in srgb,var(--c-white) 82%,transparent);margin:8px 0}
.foot a:hover{color:#fff}
.foot__cols>div:first-child p{color:color-mix(in srgb,var(--c-white) 80%,transparent);max-width:34ch}
.foot__legal{margin-top:var(--sp-5);padding-top:var(--sp-4);font-size:var(--fs-xs);line-height:1.7;color:color-mix(in srgb,var(--c-white) 66%,transparent)}
.foot__legal strong{color:color-mix(in srgb,var(--c-white) 86%,transparent)}
.foot__legal p{margin:0 0 .6em}

@media(max-width:920px){
  .hero__in{grid-template-columns:1fr;gap:34px}
  .tracks,.grid3,.prod,.steps,.tiers,.why,.foot__cols{grid-template-columns:1fr 1fr}
  /* hamburger-driven dropdown: full-width panel under the bar, stacks links + CTAs */
  .menu-btn{display:inline-flex}
  .nav__menu{display:none;position:absolute;top:64px;left:0;right:0;margin-left:0;
    flex-direction:column;align-items:stretch;gap:var(--sp-2);
    background:var(--c-white);padding:14px var(--container-gutter) 20px;
    border-bottom:1px solid var(--c-border);box-shadow:var(--skeu-shadow-float)}
  .nav__menu.is-open{display:flex}
  .nav__links{flex-direction:column;align-items:stretch;gap:2px}
  .nav__links a{width:100%;padding:11px 12px}
  .nav__cta{flex-direction:column;align-items:stretch;gap:var(--sp-2);width:100%;
    margin-top:var(--sp-2);padding-top:var(--sp-3);border-top:1px solid var(--c-border)}
  .nav__cta .btn{width:100%;padding:.7em 1.1em;font-size:var(--fs-sm)}
}
@media(max-width:600px){
  .tracks,.grid3,.prod,.steps,.tiers,.why,.foot__cols{grid-template-columns:1fr}
  .band{padding:36px 22px}
}

/* ============================================================================
   DOCUMENTATION — sidebar + content (re-derived in hub idiom)
   ========================================================================== */
.docs{display:grid;grid-template-columns:248px minmax(0,1fr);gap:44px;align-items:start;padding-block:var(--sp-6) var(--sp-8)}
.docs__main{min-width:0}

.doc-head{margin:0 0 28px;padding-bottom:22px;border-bottom:1px solid var(--c-border)}
.doc-head .eyebrow{margin-bottom:8px;display:block}
.doc-head h1{font-size:var(--fs-3xl);font-weight:700;color:var(--c-navy)}
.doc-head p.lead{color:var(--c-ink-muted);font-size:var(--fs-lg);margin:14px 0 0;max-width:46em}

/* breadcrumbs (hub .crumbs idiom) */
.crumbs{display:flex;flex-wrap:wrap;gap:2px;align-items:center;font-size:var(--fs-sm);font-weight:500;color:var(--c-ink-subtle);margin:0 0 var(--sp-4)}
.crumbs a{color:var(--c-navy-light);font-weight:500;padding:2px 4px;border-radius:var(--r-sm)}
.crumbs a:hover{color:var(--c-navy);text-decoration:none}
.crumbs span.sep,.crumbs span{margin-inline:var(--sp-1);color:var(--c-border-strong)}

/* sidebar nav */
.sidebar{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 104px);overflow-y:auto;font-size:var(--fs-sm);padding-right:6px}
.sidebar h5{font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--c-ink-subtle);margin:22px 0 8px;padding:0 10px}
.sidebar h5:first-child{margin-top:0}
.sidebar a{display:block;color:var(--c-ink-muted);font-weight:500;padding:6px 10px;border-radius:var(--r-md);line-height:1.4;margin:1px 0;border:1px solid transparent}
.sidebar a:hover{background:var(--skeu-grad-surface-hover);color:var(--c-navy);text-decoration:none;border-color:var(--c-navy-light)}
.sidebar a.is-active{background:var(--c-surface-green-tint);color:var(--c-green-dark);font-weight:600;border-color:color-mix(in srgb,var(--c-green) 35%,var(--c-border))}
.sidebar a.is-active:hover{background:var(--c-surface-green-tint);border-color:color-mix(in srgb,var(--c-green) 45%,var(--c-border))}

/* prose / doc body (hub .prose idiom) */
.prose{color:var(--c-ink-muted);max-width:48em;font-size:1.0625rem;line-height:1.75}
.prose h2{font-size:var(--fs-2xl);font-weight:700;color:var(--c-navy);margin:var(--sp-6) 0 var(--sp-4);padding-bottom:var(--sp-2);border-bottom:1px solid var(--c-border);scroll-margin-top:84px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--fs-xl);font-weight:700;color:var(--c-navy);margin:var(--sp-5) 0 var(--sp-4);scroll-margin-top:84px}
.prose h4{font-size:var(--fs-lg);font-weight:700;color:var(--c-ink);margin:24px 0 8px}
.prose p{margin:0 0 16px;color:var(--c-ink-muted)}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;color:var(--c-ink-muted)}
.prose li{margin:7px 0}
.prose li::marker{color:var(--c-ink-subtle)}
.prose strong{color:var(--c-ink);font-weight:650}
.prose a{color:var(--c-navy-light);font-weight:600}
.prose hr{border:0;border-top:1px solid var(--c-border);margin:36px 0}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--c-surface-navy-tint);color:var(--c-navy);padding:.1em .4em;border-radius:4px;border:1px solid var(--c-border)}
.prose pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}

/* inline endpoint heading (method + path) */
.endpoint{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--c-bg-elevated);border:1px solid var(--c-border);
  border-radius:var(--r-md);padding:14px 16px;margin:0 0 18px;box-shadow:var(--skeu-shadow-raised);font-family:var(--mono);font-size:.95rem}
.endpoint .path{color:var(--c-navy);font-weight:600;word-break:break-all}

/* method badges */
.method{display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;
  font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-sm);line-height:1;border:1px solid transparent;min-width:54px}
.method--get{color:var(--c-green-dark);background:var(--c-surface-green-tint);border-color:#bce6cd}
.method--post{color:var(--c-navy-light);background:var(--c-surface-navy-tint);border-color:#c9ddf5}
.method--put{color:#9a6a12;background:#fdf1d8;border-color:#f0dcab}
.method--patch{color:#7a5a14;background:#fbf0d4;border-color:#eed9a4}
.method--del{color:#b03636;background:#fdeaea;border-color:#f3c9c9}

/* API reference tables (hub .prose table idiom) */
.api-table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.92rem;border:1px solid var(--c-border);
  border-radius:var(--r-lg);overflow:hidden;background:var(--c-bg-elevated);box-shadow:var(--skeu-shadow-raised)}
.api-table thead th{text-align:left;background:var(--c-surface-navy-tint);color:var(--c-navy);font-weight:700;font-size:.78rem;
  letter-spacing:.04em;text-transform:uppercase;padding:11px 14px;border-bottom:1px solid var(--c-border)}
.api-table td{padding:12px 14px;border-bottom:1px solid var(--c-border);color:var(--c-ink-muted);vertical-align:top}
.api-table tr:last-child td{border-bottom:0}
.api-table td:first-child{white-space:nowrap}
.api-table code{font-family:var(--mono);font-size:.86em;background:var(--c-surface-navy-tint);color:var(--c-navy);padding:2px 6px;border-radius:4px;border:1px solid var(--c-border)}
.api-table .type{font-family:var(--mono);font-size:.84em;color:var(--c-green-dark)}
.api-table .req{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#b03636;background:#fdeaea;padding:2px 7px;border-radius:var(--r-full);border:1px solid #f3c9c9}
.api-table .opt{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c-ink-subtle);background:var(--c-bg-alt);padding:2px 7px;border-radius:var(--r-full);border:1px solid var(--c-border)}
.api-table--zebra tbody tr:nth-child(even){background:color-mix(in srgb,var(--c-surface-navy-tint) 50%,var(--c-white))}

/* code block (standalone, dark navy) */
.codeblock{background:var(--code);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);box-shadow:var(--skeu-shadow-float);overflow:hidden;margin:0 0 22px;font-family:var(--mono);font-size:13.5px}
.codeblock__bar{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.5);font-size:12px}
.codeblock__bar .dot{width:11px;height:11px;border-radius:50%}
.codeblock__bar .d1{background:#ff5f57}.codeblock__bar .d2{background:#febc2e}.codeblock__bar .d3{background:#28c840}
.codeblock__lang{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.codeblock pre{margin:0;padding:16px 18px;color:var(--code-ink);overflow-x:auto;line-height:1.7}
.codeblock .k{color:#ff9d6b}.codeblock .s{color:var(--code-grn)}.codeblock .p{color:var(--code-blu)}
.codeblock .c{color:#6b8299}.codeblock .n{color:#e6b35a}.codeblock .b{color:#c99af0}

/* code tabs */
.tabs{margin:0 0 22px}
.tabs__bar{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--c-border)}
.tabs__btn{appearance:none;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--font-sans);font-weight:600;font-size:.88rem;color:var(--c-ink-muted);padding:9px 14px;margin-bottom:-1px;transition:.14s}
.tabs__btn:hover{color:var(--c-navy)}
.tabs__btn.is-active{color:var(--c-navy);border-bottom-color:var(--c-green)}
.tabs__panel{display:none}.tabs__panel.is-active{display:block}
.tabs__panel .codeblock{border-top-left-radius:0;border-top-right-radius:0;margin-top:0}

/* callouts / notes (hub .note idiom) */
.callout{display:flex;gap:13px;border:1px solid var(--c-border);border-left-width:3px;border-radius:var(--r-md);background:var(--c-bg-alt);padding:15px 18px;margin:0 0 22px;box-shadow:var(--skeu-shadow-raised)}
.callout__ic{flex:0 0 auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.callout__bd{min-width:0}
.callout__bd p{margin:0 0 6px;color:var(--c-ink-muted);font-size:.94rem}
.callout__bd p:last-child{margin-bottom:0}
.callout strong{color:var(--c-ink)}
.callout--note{border-left-color:var(--c-navy-light)}.callout--note .callout__ic{color:var(--c-navy-light)}
.callout--tip{border-left-color:var(--c-green);background:var(--c-surface-green-tint)}.callout--tip .callout__ic{color:var(--c-green-dark)}
.callout--warn{border-left-color:#d9a008;background:#fdf6e3}.callout--warn .callout__ic{color:#9a6a12}
.callout--danger{border-left-color:#d9534f;background:#fdeaea}.callout--danger .callout__ic{color:#b03636}

/* status / HTTP pills */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-weight:700;font-size:.78rem;padding:3px 10px;border-radius:var(--r-full);border:1px solid transparent}
.pill--2{color:var(--c-green-dark);background:var(--c-surface-green-tint);border-color:#bce6cd}
.pill--4{color:#9a6a12;background:#fdf1d8;border-color:#f0dcab}
.pill--5{color:#b03636;background:#fdeaea;border-color:#f3c9c9}
.pill--dot{width:8px;height:8px;border-radius:50%;padding:0;min-width:0}

/* operational status rows */
.status-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:var(--r-md);padding:15px 18px;margin:0 0 10px;box-shadow:var(--skeu-shadow-raised)}
.status-row .svc{font-weight:600;color:var(--c-navy)}
.status-row .state{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--c-green-dark)}
.status-row .state i{width:9px;height:9px;border-radius:50%;background:var(--c-green);display:inline-block}
.status-row .state--degraded{color:#9a6a12}.status-row .state--degraded i{background:#d9a008}
.status-row .state--down{color:#b03636}.status-row .state--down i{background:#d9534f}

/* next / prev pager (hub .pagenav idiom) */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:48px 0 0;padding-top:28px;border-top:1px solid var(--c-border)}
.pager a{display:block;border:1px solid var(--c-border);border-radius:var(--r-md);padding:16px 18px;background:var(--c-bg-elevated);box-shadow:var(--skeu-shadow-raised);transition:.14s}
.pager a:hover{border-color:var(--c-navy-light);box-shadow:var(--skeu-shadow-hover);text-decoration:none;transform:translateY(-1px)}
.pager .dir{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-subtle)}
.pager .ttl{display:block;margin-top:5px;font-weight:600;color:var(--c-navy)}
.pager a.next{text-align:right}

/* resource / link cards */
.linkcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 8px}
.linkcard{display:block;background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:22px;box-shadow:var(--skeu-shadow-raised);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.linkcard:hover{box-shadow:var(--skeu-shadow-hover);transform:translateY(-3px);border-color:var(--c-navy-light);text-decoration:none}
.linkcard .ic{width:40px;height:40px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:var(--c-navy);background:var(--c-surface-navy-tint);margin-bottom:13px}
.linkcard h3{font-size:var(--fs-lg);color:var(--c-navy);margin:0 0 7px}
.linkcard p{color:var(--c-ink-muted);font-size:.92rem;margin:0}

/* definition / key-value list */
.kv{display:grid;grid-template-columns:max-content 1fr;gap:8px 22px;margin:0 0 22px;font-size:.94rem}
.kv dt{font-family:var(--mono);font-size:.86rem;color:var(--c-navy);font-weight:600}
.kv dd{margin:0;color:var(--c-ink-muted)}

/* mobile docs nav toggle */
.docnav-toggle{display:none;align-items:center;gap:8px;width:100%;background:var(--skeu-grad-surface);border:1px solid var(--c-border-strong);border-radius:var(--r-md);padding:11px 14px;font-weight:600;color:var(--c-navy);box-shadow:var(--skeu-shadow-cta-surface);margin:0 0 18px;cursor:pointer}

@media(max-width:920px){
  .docs{grid-template-columns:1fr;gap:0}
  /* wide reference/comparison tables scroll within their column instead of pushing the page */
  .api-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sidebar{position:static;max-height:none;overflow:visible;display:none;margin:0 0 22px;border:1px solid var(--c-border);border-radius:var(--r-lg);padding:14px;background:var(--c-bg-elevated);box-shadow:var(--skeu-shadow-raised)}
  .sidebar.is-open{display:block}
  .docnav-toggle{display:flex}
  .linkcards{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .linkcards{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr}
  .pager a.next{text-align:left}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dd{margin:0 0 10px}
}
/* ============================================================
   Cross-estate network strip (shared with the resource hubs).
   Navy band above the white dev nav — TIER 1 = products, TIER 2 =
   the resource/support network (Dev self-marks green). Pure HTML/CSS,
   no JS, so it passes the strict dev CSP unchanged.
   ============================================================ */
.estate-bar{background:var(--c-navy-dark);border-bottom:1px solid rgba(255,255,255,.10)}
/* stack the two rows tightly; tiny block padding keeps the strip low-profile under the main nav */
.estate-bar__inner{display:flex;flex-direction:column;align-items:stretch;gap:.18rem;padding-block:.34rem;min-width:0}
.estate-bar__link{color:color-mix(in srgb,var(--c-white) 66%,transparent);text-decoration:none;
  font-size:.78rem;font-weight:500;letter-spacing:.005em;line-height:1.4;white-space:nowrap}
.estate-bar__link:hover,.estate-bar__link:focus-visible{color:var(--c-white);text-decoration:underline}
.estate-bar__link--current{color:var(--c-green);font-weight:600}
/* Row 1 (products) may wrap on very narrow desktop; row 2 (network) stays on ONE line — all seven
   resource-hub links sit together for fast site-swapping, and never fold into a tall stack. */
.estate-bar__row{display:flex;align-items:center;gap:1.25rem;min-width:0}
.estate-bar__row--products{flex-wrap:wrap;row-gap:.15rem}
.estate-bar__row--network{flex-wrap:nowrap;white-space:nowrap}
@media(max-width:720px){
  /* on phones the single-line row 2 scrolls sideways rather than wrapping into a tall block */
  .estate-bar__inner{gap:.12rem}
  .estate-bar__row{gap:1.05rem}
  .estate-bar__row--network{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .estate-bar__row--network::-webkit-scrollbar{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== Request API access form (ITEM-15) — on-brand form controls, token-driven ===== */
.reqform{background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:var(--r-lg);
  padding:clamp(20px,4vw,34px);box-shadow:var(--skeu-shadow-raised);max-width:640px;margin:0 auto}
.reqform .fld{margin-bottom:18px}
.reqform label{display:block;font-weight:600;color:var(--c-navy);font-size:var(--fs-sm);margin-bottom:7px}
.reqform label .req-star{color:var(--c-error,#b03636);margin-left:2px}
.reqform input[type=text],.reqform input[type=email],.reqform textarea,.reqform select{
  width:100%;box-sizing:border-box;font-family:var(--font-sans,inherit);font-size:var(--fs-base);
  color:var(--c-ink);background:var(--c-bg);border:1px solid var(--c-border-strong,var(--c-border));
  border-radius:var(--r-md);padding:11px 13px;transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
.reqform textarea{min-height:120px;resize:vertical;line-height:var(--lh-normal,1.5)}
.reqform input:focus,.reqform textarea:focus,.reqform select:focus{outline:none;
  border-color:var(--c-navy-light);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-navy-light) 22%,transparent)}
.reqform .hint{color:var(--c-ink-subtle);font-size:var(--fs-xs);margin-top:6px}
.reqform fieldset{border:0;margin:0;padding:0}
.reqform fieldset legend{font-weight:600;color:var(--c-navy);font-size:var(--fs-sm);margin-bottom:9px;padding:0}
.reqform .scopes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.reqform .scope{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--c-border);
  border-radius:var(--r-md);padding:11px 13px;background:var(--c-bg);cursor:pointer;transition:border-color var(--dur-fast) ease,background var(--dur-fast) ease}
.reqform .scope:hover{border-color:var(--c-navy-light)}
.reqform .scope input{margin-top:2px;flex:0 0 auto}
.reqform .scope .scope-t{font-weight:600;color:var(--c-navy);font-size:var(--fs-sm);display:block}
.reqform .scope .scope-d{color:var(--c-ink-muted);font-size:var(--fs-xs);display:block;margin-top:2px}
.reqform .form-actions{margin-top:22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.reqform .form-actions .btn{width:auto}
.reqform .consent{display:flex;gap:9px;align-items:flex-start;font-size:var(--fs-sm);color:var(--c-ink-muted)}
.reqform .consent input{margin-top:3px;flex:0 0 auto}
.reqform .consent a{color:var(--c-navy-light)}
/* Feedback states */
.reqform .form-msg{border-radius:var(--r-md);padding:12px 14px;font-size:var(--fs-sm);margin-bottom:18px;display:none}
.reqform .form-msg.is-error{display:block;background:#fdeaea;border:1px solid #f3c9c9;color:var(--c-error-text,#8a2b2b)}
.reqform.is-invalid input:invalid,.reqform.is-invalid textarea:invalid{border-color:#d98a8a}
.reqform .field-err{color:var(--c-error,#b03636);font-size:var(--fs-xs);margin-top:6px;display:none}
.reqform .field-err.show{display:block}
/* Success panel (swaps in place of the form after a successful submit) */
.req-success{display:none;background:var(--c-surface-green-tint,#eef7f0);border:1px solid var(--c-green,#2e7d4f);
  border-radius:var(--r-lg);padding:clamp(22px,4vw,36px);max-width:640px;margin:0 auto;text-align:center}
.req-success.show{display:block}
.req-success .tick{width:52px;height:52px;border-radius:var(--r-full,999px);display:inline-flex;align-items:center;
  justify-content:center;background:var(--c-green,#2e7d4f);color:#fff;margin-bottom:14px}
.req-success h2{color:var(--c-navy);font-size:var(--fs-2xl);margin:0 0 8px}
.req-success p{color:var(--c-ink-muted);margin:0 auto 8px;max-width:44em}
.req-success .ref{font-family:var(--font-mono,monospace);font-weight:700;color:var(--c-navy)}
.reqform button[disabled]{opacity:.6;cursor:progress}