/* ============================================================================
   Credicorp Resource Hubs — shared design system
   learn. / answers. / sectors. / tools. .credicorp.co.uk

   INHERITS THE CANONICAL BASE (marketing + help share one token tree).
   This file is a self-contained STATIC bundle for the generated sites: the
   canonical design tokens (color / type / space / radii / shadow / motion /
   z / layout) are inlined VERBATIM from credicorp.co.uk + help.credicorp.co.uk
   resources/css/tokens/*, then every component is re-derived from those tokens
   in the base deep-neutral skeuo idiom (grey canvas, white cards that lift,
   navy eyebrow, restrained 8/12px corners, navy→green footer keyline).

   To keep parity: when the base token tree changes, re-sync the :root blocks
   below from resources/css/tokens/*. No raw brand hex outside the token blocks.
   ========================================================================== */

/* ---- brand fonts (Montserrat display + Inter body; copied into /assets/fonts
        from the marketing docroot at deploy). Token family stack falls back to
        system fonts if a binary is absent. ---- */
@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 the shared base token tree.
   ========================================================================== */

/* color/navy.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);
}
/* color/green.css */
:root{
  --c-green:#90cb22; --c-green-dark:#5f8a16; --c-accent:var(--c-green);
}
/* color/neutral.css */
:root{
  --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-text:var(--c-ink); --color-text-muted:var(--c-ink-muted); --color-muted:var(--c-ink-subtle);
  --color-surface:var(--c-bg-elevated); --color-surface-alt:var(--c-bg-alt);
  --color-border:#9aa6b8; --color-primary:var(--c-navy); --color-link:var(--c-navy);
}
/* color/semantic.css */
:root{
  --c-success:#16a34a; --c-warn:#d97706; --c-error:#dc2626; --c-info:#2563eb;
  --c-success-text:#166534; --c-warn-text:#92400e; --c-error-text:#b42318;
  --c-warning:var(--c-warn); --c-danger:var(--c-error);
}
/* type/family.css */
:root{
  --font-sans:"Montserrat","Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-serif:"Source Serif 4",ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
/* type/scale.css */
:root{
  --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-md:var(--fs-lg);
  --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);
  --fs-display-3:clamp(2.75rem,2.2rem + 2.4vw,3.5rem);
  --fs-display-2:clamp(3.25rem,2.5rem + 3.2vw,4.5rem);
  --fs-display-1:clamp(3.75rem,2.8rem + 4.2vw,5.5rem);
  --text-xs:var(--fs-xs); --text-sm:var(--fs-sm); --text-base:var(--fs-base); --text-lg:var(--fs-lg);
  --text-xl:var(--fs-xl); --text-2xl:var(--fs-2xl); --text-3xl:var(--fs-3xl); --text-4xl:var(--fs-4xl);
}
/* type/leading.css */
:root{
  --lh-tight:1.15; --lh-normal:1.5; --lh-loose:1.6; --measure-prose:66ch;
}
/* space/scale.css */
:root{
  --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);
  --sp-9:clamp(60px,2.4rem + 8vw,120px);
  --sp-10:160px; --sp-11:208px; --sp-12:256px;
  --s-1:var(--sp-1); --s-2:var(--sp-2); --s-3:var(--sp-3); --s-4:var(--sp-4); --s-5:var(--sp-5);
  --s-6:var(--sp-6); --s-7:var(--sp-7); --s-8:var(--sp-8); --s-9:var(--sp-9);
}
/* radii/scale.css + radii/bevel.css */
:root{
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-full:9999px;
  --radius-sm:var(--r-sm); --radius-md:var(--r-md); --radius-lg:var(--r-lg);
  --skeu-bevel-sm:var(--r-sm); --skeu-bevel:var(--r-md); --skeu-bevel-lg:var(--r-lg); --skeu-bevel-pill:var(--r-full);
}
/* shadow/scale.css */
:root{
  --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);
  --shadow-md:0 1px 2px rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.07);
  --shadow-lg:0 2px 4px rgba(15,23,42,.05),0 8px 20px rgba(15,23,42,.09);
}
/* shadow/skeu.css (self-contained — no Open Props dependency) */
:root{
  --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-pressed:inset 0 2px 4px rgba(15,23,42,.16),inset 0 1px 2px rgba(15,23,42,.10);
  --skeu-shadow-pressed-navy:inset 0 2px 4px rgba(0,0,0,.22),inset 0 1px 2px rgba(0,0,0,.14);
  --skeu-shadow-cta-navy-active:var(--skeu-shadow-pressed-navy);
  --skeu-grad-navy-active:linear-gradient(180deg,var(--c-navy-dark) 0%,var(--c-navy-dark) 100%);
  --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-chrome-hover:0 1px 0 rgba(255,255,255,.55),0 2px 5px rgba(15,23,42,.08),0 10px 22px rgba(15,23,42,.10);
  --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.css */
:root{ --shadow-focus:0 0 0 3px #2b6ca8; --shadow-focus-inverse:0 0 0 3px rgba(255,255,255,.65); }
/* motion/duration.css */
:root{
  --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --dur-fast:120ms; --dur-normal:220ms; --dur-slow:400ms;
}
/* z/layers.css */
:root{ --z-base:1; --z-sticky:100; --z-overlay:500; --z-modal:1000; --z-toast:1500; }
/* layout/breakpoints.css */
:root{
  --bp-phone:390px; --bp-tablet:768px; --bp-laptop:1024px; --bp-wide:1440px;
  --container-narrow:640px; --container-default:960px; --container-wide:1320px; --container-max:1440px;
  --container-gutter:clamp(18px,4vw,34px);
}
/* hub-local layout aliases (kept from the original generator markup contract) */
:root{ --maxw:var(--container-wide); --content:68ch; }

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:1ms; --dur-normal:1ms; --dur-slow:1ms; }
}
/* NON-DESKTOP ambient-depth turn-down — token-level, inherited by every component. */
@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);margin-top:1.4em}
h3{font-size:var(--fs-xl);margin-top:1.2em}
h4{font-size:var(--fs-lg);margin-top:1.1em}
p{margin:0 0 1.05em}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--container-gutter)}
.skip{position:absolute;left:-999px}
.skip:focus{left:var(--sp-2);top:var(--sp-2);background:var(--c-navy);color:var(--c-white);padding:10px 14px;border-radius:var(--r-md);z-index:var(--z-modal);box-shadow:var(--skeu-shadow-float)}
.muted{color:var(--c-ink-subtle)}
hr{border:none;border-top:1px solid var(--c-border);margin:2em 0}

/* ============================================================================
   HEADER — frosted sticky chrome bar (base idiom)
   ========================================================================== */
.site-header{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{display:flex;align-items:center;gap:var(--sp-4);min-height:64px}
.brand{display:flex;align-items:center;gap:var(--sp-3);font-weight:700;color:var(--c-navy);
  text-decoration:none;line-height:1.05;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand img{height:30px;width:auto;display:block}
.brand span{font-size:var(--fs-xs);font-weight:600;color:var(--c-ink-subtle);
  text-transform:uppercase;letter-spacing:.08em}
.nav nav{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.nav nav 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);white-space:nowrap}
.nav nav a:hover{color:var(--c-navy);text-decoration:none}
.nav .cta{min-height:44px;color:var(--c-white);background:var(--skeu-grad-navy);
  border:1px solid var(--c-navy-dark);padding:.5em 1em;border-radius:var(--r-md);
  font-weight:600;box-shadow:var(--skeu-shadow-cta-navy)}
.nav .cta:hover{color:var(--c-white);background:var(--skeu-grad-navy-hover);text-decoration:none}
.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:40px;height:40px;padding:0;cursor:pointer;color:var(--c-navy);
  box-shadow:var(--skeu-shadow-cta-surface)}
.menu-btn svg{display:block}
/* Collapse to the hamburger BEFORE the desktop row gets crushed. Between ~860px and ~1080px the
   brand + 24rem search + up to five links + CTA no longer fit comfortably: the search field
   collapses to an unusable sliver and links wrap mid-word ("How-/to"). Handing over to the mobile
   menu at 1080px keeps a single clean row at every width — full nav ≥1080px, hamburger below. */
@media(max-width:1080px){
  .site-header .hub-search{display:none}        /* hero/page search covers this range */
  .nav{flex-wrap:nowrap}
  .brand{flex:1 1 auto;min-width:0}             /* brand fills the row and may shrink */
  .nav nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:2px;
    background:var(--c-white);padding:14px var(--container-gutter) 20px;border-bottom:1px solid var(--c-border);box-shadow:var(--skeu-shadow-float)}
  .nav nav.open{display:flex}
  .nav nav a{width:100%;padding:11px 12px;white-space:normal}
  .menu-btn{display:inline-flex;flex:0 0 40px;margin-left:var(--sp-3)}  /* pinned right, never shrinks/pushed off */
}

/* ============================================================================
   HERO — full-bleed navy band (base --skeu-grad-navy-band)
   ========================================================================== */
.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);
  padding:var(--sp-8) 0 var(--sp-7);position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:var(--c-white);max-width:20ch}
.hero p{color:color-mix(in srgb,var(--c-white) 86%,transparent);font-size:var(--fs-lg);max-width:62ch;margin-bottom:0}
.eyebrow{display:inline-block;font-weight:600;font-size:var(--fs-sm);letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-navy-light);margin-bottom:var(--sp-3)}
.hero .eyebrow{color:color-mix(in srgb,var(--c-white) 80%,transparent)}

/* ---- breadcrumbs ---- */
.crumbs{font-size:var(--fs-sm);font-weight:500;color:var(--c-ink-subtle);margin:0 0 var(--sp-4);
  display:flex;gap:2px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--c-navy-light);padding:2px 4px;border-radius:var(--r-sm)}
.crumbs a:hover{color:var(--c-navy)}
.crumbs span{margin-inline:var(--sp-1);color:var(--c-border-strong)}
.hero .crumbs{color:color-mix(in srgb,var(--c-white) 70%,transparent)}
.hero .crumbs a{color:color-mix(in srgb,var(--c-white) 82%,transparent)}
.hero .crumbs span{color:color-mix(in srgb,var(--c-white) 45%,transparent)}

/* Landing hero (the one carrying the search) — from tablet up, centre the composition
   to match the help-centre hero and tighten the band->content seam. PHONES keep the
   existing left-aligned hero (the approved mobile design) untouched. Scoped via :has()
   so ARTICLE heroes (which carry .crumbs instead of a search) stay left-aligned. */
@media (min-width: 768px) {
  .hero:has(.hub-search--hero){text-align:center;padding-bottom:var(--sp-6)}
  .hero:has(.hub-search--hero) h1{max-width:24ch;margin-inline:auto}
  .hero:has(.hub-search--hero) p{max-width:54ch;margin-inline:auto}
  .hero:has(.hub-search--hero)+main{padding-top:var(--sp-5)}
}

/* ============================================================================
   LAYOUT
   ========================================================================== */
main{padding:var(--sp-7) 0 var(--sp-3);display:block}
.lede{font-size:var(--fs-lg);color:var(--c-ink-muted);max-width:var(--content)}
.readtime{font-size:var(--fs-sm);color:var(--c-ink-subtle)}
.layout{display:grid;grid-template-columns:1fr;gap:var(--sp-7);align-items:start}
@media(min-width:980px){.layout{grid-template-columns:minmax(0,1fr) 16rem}}
.toc{position:sticky;top:6rem;align-self:start;font-size:var(--fs-sm);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c-white) 94%,transparent),color-mix(in srgb,var(--c-surface-navy-tint) 86%,transparent));
  border:1px solid var(--c-border);border-radius:var(--r-lg);box-shadow:var(--skeu-shadow-raised);padding:var(--sp-4)}
.toc h4{margin:0 0 var(--sp-3);font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-subtle)}
.toc a{display:block;color:var(--c-navy);padding:6px 10px;border-radius:var(--r-md);border:1px solid transparent}
.toc a:hover{color:var(--c-navy);background:var(--skeu-grad-surface-hover);border-color:var(--c-navy-light);text-decoration:none}
@media(max-width:979px){.toc{display:none}}

/* ============================================================================
   PROSE — readable measure, branded headings (base .article__body idiom)
   ========================================================================== */
.prose{max-width:var(--content);color:var(--c-ink-muted);font-size:1.0625rem;line-height:1.75}
.prose>*{max-width:var(--content)}
.prose>:first-child{margin-top:0}
.prose h2{font-size:var(--fs-2xl);color:var(--c-navy);margin:var(--sp-6) 0 var(--sp-4);padding-bottom:var(--sp-2);border-bottom:1px solid var(--c-border)}
.prose h3{font-size:var(--fs-xl);color:var(--c-navy);margin:var(--sp-5) 0 var(--sp-4)}
.prose ul,.prose ol{margin:0 0 var(--sp-4) var(--sp-5);display:grid;gap:var(--sp-2)}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li{margin:0}
.prose a{color:var(--c-navy-light)}
.prose strong{color:var(--c-ink)}
.prose blockquote{margin:1.3em 0;padding:.4em 0 .4em 1.2em;border-left:3px solid var(--c-green);color:var(--c-ink-muted);font-style:italic}
.prose code{font-family:var(--font-mono);font-size:.9em;background:var(--c-surface-navy-tint);border:1px solid var(--c-border);border-radius:4px;padding:.1em .4em;color:var(--c-navy)}
.prose table{width:100%;border-collapse:collapse;background:var(--c-bg-elevated);border:1px solid var(--c-border);
  border-radius:var(--r-lg);box-shadow:var(--skeu-shadow-raised);overflow:hidden;margin:var(--sp-5) 0;font-size:var(--fs-base)}
.prose th,.prose td{text-align:left;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--c-border);vertical-align:top}
.prose th{background:var(--c-surface-navy-tint);color:var(--c-navy);font-weight:700;font-size:var(--fs-sm)}
.prose td{color:var(--c-ink-muted)}
.prose tr:last-child th,.prose tr:last-child td{border-bottom:0}

/* ============================================================================
   CARDS / GRID — white cards lift off the grey canvas
   ========================================================================== */
.grid{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),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);
  display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);box-shadow:var(--skeu-shadow-hover);border-color:var(--c-navy-light);text-decoration:none}
.card .kicker{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--c-navy-light);font-weight:600;margin-bottom:var(--sp-2)}
.card h3{margin:0 0 var(--sp-2);font-size:var(--fs-lg);color:var(--c-navy)}
.card p{color:var(--c-ink-muted);font-size:var(--fs-sm);margin:0}
.card .more{margin-top:var(--sp-3);color:var(--c-navy-light);font-weight:600;font-size:var(--fs-sm)}
.card:hover .more{text-decoration:underline}
.card-ic{width:40px;height:40px;border-radius:var(--r-md);background:var(--c-surface-navy-tint);color:var(--c-navy);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:var(--sp-3)}

/* ============================================================================
   CHIPS / CALLOUTS / KEYFACTS
   ========================================================================== */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-2)}
.chip{font-size:var(--fs-sm);font-weight:600;color:var(--c-navy);background:var(--skeu-grad-surface);
  border:1px solid var(--c-border);padding:.25rem .75rem;border-radius:var(--r-full);box-shadow:var(--skeu-shadow-raised)}
a.chip:hover{border-color:var(--c-navy-light);box-shadow:var(--skeu-shadow-hover);text-decoration:none}
/* author callouts — neutral band with green left-keyline (base .callout) */
.note{background:var(--c-bg-alt);border:1px solid var(--c-border);border-left:3px solid var(--c-green);
  border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin:var(--sp-5) 0;color:var(--c-ink-muted);box-shadow:var(--skeu-shadow-raised)}
.note.gold{background:var(--c-surface-green-tint)}
.note h4{margin:0 0 var(--sp-2);color:var(--c-navy)}
.note>:first-child{margin-top:0}
.note p:last-child{margin:0}
/* key figures (base .figure-table feel, grid form) */
.keyfacts{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));margin:var(--sp-6) 0}
@media(max-width:560px){.keyfacts{grid-template-columns:1fr}}
.keyfacts .kf{background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--skeu-shadow-raised)}
.kf b{display:block;color:var(--c-navy);font-size:var(--fs-2xl);font-weight:700;line-height:1.1}
.kf span{font-size:var(--fs-sm);color:var(--c-ink-subtle)}

/* ============================================================================
   FAQ accordion (native <details>) — base .faq-item idiom
   ========================================================================== */
.faq{display:grid;gap:var(--sp-3);margin:var(--sp-5) 0}
.faq details{background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--r-md);
  box-shadow:var(--skeu-shadow-raised);overflow:hidden}
.faq details[open]{box-shadow:var(--skeu-shadow-raised-lg);border-color:var(--c-navy-light)}
.faq summary{cursor:pointer;padding:var(--sp-4) var(--sp-5);font-weight:600;color:var(--c-navy);
  list-style:none;position:relative;padding-right:3rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:var(--sp-5);top:50%;transform:translateY(-50%);
  font-size:var(--fs-xl);font-weight:400;color:var(--c-navy-light);transition:transform .15s ease}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 var(--sp-5) var(--sp-5);color:var(--c-ink-muted);border-top:1px solid var(--c-border)}
.faq .a>:first-child{margin-top:var(--sp-4)}

/* ============================================================================
   CTA BAND — navy band gradient (base) + skeuo CTA buttons
   ========================================================================== */
.cta-band{background:var(--skeu-grad-navy-band);color:var(--c-white);border-radius:var(--r-lg);
  padding:var(--sp-7);margin:var(--sp-8) 0 var(--sp-3);text-align:center;
  box-shadow:var(--skeu-highlight),var(--skeu-shadow-float)}
.cta-band h2{color:var(--c-white);margin-top:0}
.cta-band p{color:color-mix(in srgb,var(--c-white) 86%,transparent);max-width:54ch;margin-inline:auto}
.btn-row{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-5)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:.7em 1.4em;border:1px solid transparent;border-radius:var(--r-md);font:inherit;font-weight:600;line-height:1.1;
  background:var(--c-white);color:var(--c-navy);box-shadow:var(--skeu-shadow-cta-surface);
  transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--skeu-shadow-cta-surface-hover);text-decoration:none}
.btn.ghost{background:transparent;color:var(--c-white);border:1px solid rgba(255,255,255,.55);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.10);box-shadow:none}

/* ============================================================================
   A–Z GLOSSARY (kept structure; re-tokenised)
   ========================================================================== */
.azbar{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-6)}
.azbar a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--c-border);border-radius:var(--r-md);font-weight:600;color:var(--c-navy);
  background:var(--skeu-grad-surface);box-shadow:var(--skeu-shadow-raised)}
.azbar a:hover{background:var(--skeu-grad-navy);color:var(--c-white);border-color:var(--c-navy-dark);text-decoration:none}
.azbar a.off{color:var(--c-border);background:none;box-shadow:none;border-color:var(--c-border);pointer-events:none}
.az-group{margin-bottom:var(--sp-7)}
.az-group h2{font-size:var(--fs-2xl);color:var(--c-navy);border-bottom:2px solid var(--c-border);padding-bottom:var(--sp-2)}
.deflist{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr))}
.deflist a{display:block;padding:var(--sp-4) var(--sp-5);background:var(--c-bg-elevated);border:1px solid var(--c-border);
  border-radius:var(--r-md);color:var(--c-navy);font-weight:600;box-shadow:var(--skeu-shadow-raised);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.deflist a:hover{transform:translateY(-1px);border-color:var(--c-navy-light);box-shadow:var(--skeu-shadow-hover);text-decoration:none}
.deflist a span{display:block;font-weight:400;color:var(--c-ink-muted);font-size:var(--fs-sm);margin-top:3px}

/* ============================================================================
   CALCULATOR (kept structure; re-tokenised, inset wells)
   ========================================================================== */
.calc{background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:var(--r-lg);
  padding:var(--sp-6);box-shadow:var(--skeu-shadow-raised-lg);margin:var(--sp-5) 0}
.calc .field{margin-bottom:var(--sp-4)}
.calc label{display:block;font-weight:600;color:var(--c-navy);margin-bottom:var(--sp-2);font-size:var(--fs-sm)}
.calc input[type=number],.calc input[type=range],.calc select{width:100%;font:inherit;padding:.7em .85em;
  border:1px solid var(--color-border);border-radius:var(--r-md);background:var(--c-bg-elevated);color:var(--c-ink);box-shadow:var(--skeu-shadow-inset)}
.calc input[type=range]{padding:0;box-shadow:none}
.calc input[type=number]:focus-visible,.calc select:focus-visible{outline:none;border-color:var(--c-navy-light);box-shadow:var(--skeu-shadow-inset),var(--shadow-focus)}
.calc .out{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-top:var(--sp-2)}
.calc .out .o{background:var(--c-surface-navy-tint);border:1px solid var(--c-border);border-radius:var(--r-md);padding:var(--sp-4)}
.calc .out .o b{display:block;font-size:var(--fs-2xl);font-weight:700;color:var(--c-navy);line-height:1.1}
.calc .out .o span{font-size:var(--fs-sm);color:var(--c-ink-subtle)}
.calc .hint{font-size:var(--fs-sm);color:var(--c-ink-subtle);margin-top:2px}

/* ============================================================================
   FOOTER — dark navy band + navy→green keyline (base footer treatment)
   ========================================================================== */
.site-footer{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)}
.site-footer::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--c-navy),var(--c-green));z-index:2}
.site-footer a{color:color-mix(in srgb,var(--c-white) 82%,transparent)}
.site-footer a:hover{color:var(--c-white)}
.foot-grid{display:grid;gap:var(--sp-4) var(--sp-6);grid-template-columns:1.6fr repeat(4,1fr);
  padding-bottom:var(--sp-6);border-bottom:1px solid rgba(255,255,255,.12)}
@media(max-width:1023px){.foot-grid{grid-template-columns:1.4fr repeat(2,1fr)}}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.foot-grid{grid-template-columns:1fr}}
/* Match the help-centre footer seal exactly: the Sectigo badge sits directly on the navy band
   (no card box), 140px wide, subtle radius + hover fade. */
.foot-seal{margin-top:var(--sp-4);display:flex;justify-content:center}
.foot-seal__link{display:inline-flex;line-height:0;border-radius:var(--r-sm)}
.foot-seal__link:focus-visible{outline:2px solid var(--c-green);outline-offset:3px}
.foot-seal img{width:140px;height:auto;max-width:100%;display:block}
@media(prefers-reduced-motion:no-preference){
  .foot-seal__link{transition:opacity var(--dur-fast) var(--ease-out)}
  .foot-seal__link:hover{opacity:.82}
}
.foot-grid h5{color:var(--c-white);font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;margin:0 0 var(--sp-3)}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin:7px 0}
.foot-grid li a{font-size:var(--fs-sm)}
.foot-brand img{height:32px;width:auto;display:block;margin:0 0 var(--sp-4)}
.foot-brand p{color:color-mix(in srgb,var(--c-white) 80%,transparent);font-size:var(--fs-sm);max-width:34ch}
.foot-legal{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--sp-5);padding-top:var(--sp-4);
  color:color-mix(in srgb,var(--c-white) 66%,transparent);font-size:var(--fs-xs)}
.foot-legal p{margin:0 0 .6em;max-width:none}
.foot-legal strong{color:color-mix(in srgb,var(--c-white) 86%,transparent)}
.foot-legal a{color:color-mix(in srgb,var(--c-white) 82%,transparent);text-decoration:underline}

/* ============================================================================
   MISC
   ========================================================================== */
.section{margin:var(--sp-7) 0}
.section>h2:first-child{margin-top:0}
.pagenav{display:flex;justify-content:space-between;gap:var(--sp-4);margin:var(--sp-7) 0 0;flex-wrap:wrap}
.pagenav a{flex:1;min-width:200px;border:1px solid var(--c-border);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);
  color:var(--c-navy);background:var(--c-bg-elevated);box-shadow:var(--skeu-shadow-raised)}
.pagenav a:hover{transform:translateY(-1px);border-color:var(--c-navy-light);box-shadow:var(--skeu-shadow-hover);text-decoration:none}
.pagenav span{display:block;font-size:var(--fs-xs);color:var(--c-ink-subtle);text-transform:uppercase;letter-spacing:.06em}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================================
   SEE ALSO — one quiet line of sibling-hub links in the body (footer carries
   the full estate nav). Understated; sits between the article and the CTA band.
   ========================================================================== */
.seealso{margin:var(--sp-7) 0 0;padding-top:var(--sp-4);border-top:1px solid var(--c-border);
  font-size:var(--fs-sm);color:var(--c-ink-subtle);line-height:1.7}
.seealso span{font-weight:600;color:var(--c-ink-muted);margin-right:var(--sp-2)}
.seealso a{color:var(--c-navy-light);font-weight:600}

/* footer "Credicorp online" sign-in strip — interlinks clients/sso/help/mail/hub */
.foot-signin{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);
  margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.12)}
.foot-signin__label{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c-white) 64%,transparent)}
.foot-signin__links{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}
.foot-signin__links a{font-size:var(--fs-sm)}

/* ============================================================================
   HERO PHOTO LAYER — stock imagery behind the navy band (per-site)
   ========================================================================== */
.hero--photo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.9}
/* navy wash over the photo so white copy always clears AA contrast */
.hero--photo::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(165deg,color-mix(in srgb,var(--c-navy) 86%,transparent) 0%,color-mix(in srgb,var(--c-navy-dark) 92%,transparent) 100%)}
.hero--learn::before{background-image:image-set(url("/assets/stock/hero-1-1200.avif") type("image/avif"),url("/assets/stock/hero-1-1200.webp") type("image/webp"),url("/assets/stock/hero-1.jpg") type("image/jpeg"));background-image:url("/assets/stock/hero-1.jpg")}
.hero--answers::before{background-image:image-set(url("/assets/stock/hero-2-1200.avif") type("image/avif"),url("/assets/stock/hero-2-1200.webp") type("image/webp"),url("/assets/stock/hero-2.jpg") type("image/jpeg"));background-image:url("/assets/stock/hero-2.jpg")}
.hero--sectors::before{background-image:image-set(url("/assets/stock/hero-3-1200.avif") type("image/avif"),url("/assets/stock/hero-3-1200.webp") type("image/webp"),url("/assets/stock/hero-3.jpg") type("image/jpeg"));background-image:url("/assets/stock/hero-3.jpg")}
.hero--tools::before{background-image:image-set(url("/assets/stock/hero-4-1200.avif") type("image/avif"),url("/assets/stock/hero-4-1200.webp") type("image/webp"),url("/assets/stock/hero-4.jpg") type("image/jpeg"));background-image:url("/assets/stock/hero-4.jpg")}
.hero--careers::before{background-image:image-set(url("/assets/stock/hero-1-1200.avif") type("image/avif"),url("/assets/stock/hero-1-1200.webp") type("image/webp"),url("/assets/stock/hero-1.jpg") type("image/jpeg"));background-image:url("/assets/stock/hero-1.jpg")}

/* ============================================================================
   CARD MEDIA — stock thumbnail on listing cards
   ========================================================================== */
.card{padding:0;overflow:hidden}
.card__media{display:block;aspect-ratio:16/9;background:var(--c-surface-navy-tint);overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-normal) var(--ease-out)}
.card:hover .card__media img{transform:scale(1.04)}
.card__body{display:flex;flex-direction:column;flex:1 1 auto;padding:var(--sp-5)}
.card__body .more{margin-top:auto;padding-top:var(--sp-3)}

/* ============================================================================
   SEARCH — header field, hero/page field, typeahead listbox, results
   ========================================================================== */
.hub-search{position:relative;display:flex;align-items:stretch;flex:1 1 auto;min-width:0;max-width:24rem;
  margin-inline:auto;background:var(--c-white);border:1px solid var(--color-border);
  border-radius:var(--r-md);box-shadow:var(--skeu-shadow-inset);overflow:visible}
.hub-search__input{flex:1 1 auto;min-width:0;border:0;background:transparent;padding:.55em 1em;font:inherit;
  color:var(--c-ink);border-radius:var(--r-md);-webkit-appearance:none;appearance:none}
.hub-search__input::-webkit-search-decoration,.hub-search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.hub-search__input:focus{outline:none}
.hub-search:focus-within{border-color:var(--c-navy-light);box-shadow:var(--skeu-shadow-inset),var(--shadow-focus)}
.hub-search__btn{flex:0 0 auto;border:0;margin:4px;padding:.4em 1.1em;border-radius:var(--r-md);font:inherit;
  font-weight:600;color:var(--c-white);background:var(--skeu-grad-navy);box-shadow:var(--skeu-shadow-cta-navy);cursor:pointer}
.hub-search__btn:hover{background:var(--skeu-grad-navy-hover)}
@media(max-width:1080px){.site-header .hub-search{display:none}}  /* header search hidden ≤1080px; hero/page field covers it */

/* hero + page variants — stacked white box, squared to match the help-centre search
   (help-hero__search-field: flex-direction column + r-lg field, full-width r-md submit). */
.hub-search--hero,.hub-search--page{flex-direction:column;align-items:stretch;gap:var(--sp-2);max-width:42rem;margin:var(--sp-5) auto 0;padding:8px;border-radius:var(--r-lg);
  box-shadow:var(--skeu-highlight-strong),var(--skeu-shadow-float);border-color:color-mix(in srgb,var(--c-white) 72%,var(--c-border-strong))}
.hub-search--hero .hub-search__input,.hub-search--page .hub-search__input{font-size:var(--fs-lg);padding:.85em 1.1em}
.hub-search--hero .hub-search__btn,.hub-search--page .hub-search__btn{width:100%;margin:0;border-radius:var(--r-md);min-height:44px;padding:.6em 1.1em}
.hub-search--page{margin-top:0;margin-bottom:var(--sp-5)}

/* typeahead listbox */
.ta-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:var(--z-overlay);
  background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:var(--r-lg);
  box-shadow:var(--skeu-shadow-float);padding:var(--sp-2);max-height:60vh;overflow:auto}
.ta-opt{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);text-decoration:none;color:var(--c-navy)}
.ta-opt:hover,.ta-opt.is-active{background:var(--skeu-grad-surface-hover);text-decoration:none}
.ta-opt__t{font-weight:600;color:var(--c-navy)}
.ta-opt__c{flex:0 0 auto;font-size:var(--fs-xs);font-weight:600;color:var(--c-white);
  background:var(--skeu-grad-navy);border:1px solid var(--c-navy-dark);border-radius:var(--r-full);padding:2px 8px}
.ta-opt--all{justify-content:center;color:var(--c-navy-light);font-weight:600;font-size:var(--fs-sm)}
.ta-opt--all .ta-opt__t{color:var(--c-navy-light)}

/* results page */
.search-status{color:var(--c-ink-muted);margin:0 0 var(--sp-5)}
.card--result .card__body{padding:var(--sp-5)}
/* Estate/network strip — the estate nav links ONLY (no "Credicorp" home mark — the header logo
   covers home — and no Apply CTA — the site header carries it). Token-driven to match the hub
   schema: navy-dark band, restrained white links, brand-green current. Two COMPACT rows: no
   section headers, no divider keyline — kept deliberately short in height. */
.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}
/* Deliberately subtle — a utility strip that sits UNDER the main nav in hierarchy, so ~12.5px, muted
   ink, and a letter-spacing nudge keep it from competing with the site header below it. */
.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}}