/* IRAS PR58709 bid microsite: shared design system (v2), carried over from Accenture's proposal template.
   Builders read the template's DESIGN-SYSTEM.md in place (read only) for the token table, every class and hook, and
   the motion rules; its masthead, pilot, logo and disclaimer sections do not apply here. Motion behaviour lives in
   /assets/motion.js (loaded by site.js). Page authors use only these tokens and classes. */
/* Accenture template theme: this :root carries Accenture's proposal colour template as LifeSG-style tokens. The value
   each token had before is kept in its comment. Where the template and LifeSG / SGDS / DSS differ, the standards win:
   status colours, 44 px targets, visible focus and motion stay as the standards require. The text font is Accenture's
   Graphik by local name (never downloaded), then Arial. JetBrains Mono (code and clause chips) is self-hosted below, so
   the browser makes no third-party request. */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-v24-latin.woff2') format('woff2'); } /* variable font, wght 400-800, latin */

:root {
  /* Accenture template palette (tokens.json "palette", "tint", "derived") */
  --acn-navy: #0C3955; --acn-navy-90: #115179; --acn-indigo: #17265A; --acn-sky: #A4D4F2; --acn-sky-20: #EDF6FC;
  --acn-sky-40: #DBEEFA; --acn-blue: #4A9ACC; --acn-blue-40: #B7D7EB; --acn-teal: #229BA3; --acn-orange: #ED6C44;
  --acn-orange-20: #FBE2DA; --acn-grey-95: #F2F2F2; --acn-grey-85: #D9D9D9; --acn-grey-75: #BFBFBF; --acn-ink-75: #404040;
  --acn-sky-ink: #1974AE;    /* kicker on light (AA variant of sky) */
  --acn-blue-ink: #2D74A1; --acn-teal-ink: #1B7A81; --acn-orange-ink: #C83E13; --acn-orange-fill: #D64215;
  --acn-bar: linear-gradient(90deg, #4A9ACC 0%, #229BA3 100%);   /* the template's top bar */
  --line-ui: #8D8D8D;        /* input and control borders, 3.32:1 on white */
  --focus: #0C3955;          /* focus ring on light (12.12:1 on white); was #c3dcfa (1.41:1, failed WCAG 2.4.11) */
  --focus-on-dark: #A4D4F2;  /* focus ring on navy bands (7.67:1) */
  --heading: #0C3955;        /* h1 / h2 (template headlines) */
  --snip: 16px; --snip-sm: 9px;   /* the template's top-right cut corner (snip1Rect, 20.7 % of the short side) */
  --grad-cover: linear-gradient(180deg, #FFFFFF 0%, #EDF6FC 100%);   /* light, cover-like hero */
  /* Brand and action (LifeSG default values in comments) */
  --primary: #0C3955;        /* #1768be: links, eyebrows, service labels, primary buttons */
  --primary-dark: #115179;   /* #0f4f96: hover */
  --primary-deep: #0C3955;   /* #004d9f: header rule, icon ink on tiles, chat pill border */
  --primary-ink: #0C3955;    /* #003874: navy text on white buttons, active chip text */
  --primary-tint: #EDF6FC;   /* #e8f1fb */
  --primary-tint-2: #DBEEFA; /* #c3dcfa (no longer the focus ring) */
  --tile: #EDF6FC;           /* #dce8fd: icon tile */
  --chip-active: #DBEEFA;    /* #cfe1fe */
  --chip-active-line: #0C3955; /* #3c91ec */
  --blue-2: #B7D7EB;         /* #a4c3e4 */
  --blue-3: #4A9ACC;         /* #7eaad9 */
  --sky: #A4D4F2;            /* #a5cdff: eyebrow on dark */
  --mist: #EDF6FC;           /* #cfe1fe: body text on dark */
  --bullet: #A4D4F2;         /* #6cb4ff: bullet dots on dark */
  --live: #6dd0a1;           /* green live dot (status, unchanged) */
  /* Navy and indigo */
  --navy: #0C3955;           /* #011731 */
  --navy-2: #0C3955;         /* #012c5c */
  --navy-3: #115179;         /* #073976 */
  --navy-4: #17265A;         /* #18385d */
  --indigo: #17265A;         /* #3e4889 */
  /* Neutrals */
  --bg: #ffffff;
  --bg-alt: #EDF6FC;         /* #f7f9ff: FAQ band, alternate sections */
  --bg-foot: #F2F2F2;        /* #f9f9f9: footer */
  --panel: #ffffff;
  --masthead: #f3f3f3;       /* SGDS masthead: unchanged (pinned) */
  --announce: #0C3955;       /* #2a2a2a: announcement bar */
  --line: #D9D9D9;           /* #dde1e2: light borders, chips, footer rules */
  --line-2: #BFBFBF;         /* #c7caca: card borders, accordions */
  --line-3: #8D8D8D;         /* #8e8e8e: open accordion */
  --divider: #D9D9D9;        /* #e6eaef */
  --text: #000000;           /* #282828: headings and UI text */
  --text-2: #404040;         /* #393939: body copy */
  --muted: #686868;          /* LifeSG neutral-50 kept: darker than the template's #6E6E6E, so it keeps AA on status tints */
  --faint: #686868;          /* #767676 (fails on the template's light fills) */
  /* Status (text + colour, never colour alone): LifeSG values, UNCHANGED */
  --red: #d23127;
  --red-tint: #fbe9e8;
  --amber: #b45309;
  --amber-tint: #fff4d6;
  --works: #ED6C44;          /* #f5a623: accent orange (illustration only) */
  --green: #1e7f3c;
  --green-tint: #e6f4ea;
  --map-water: #aadaff;
  --map-land: #fff3c3;
  --map-land-2: #eee5c0;
  /* Gradients: the template's only gradient is the top bar; dark bands are flat navy (web adaptation) */
  --grad-hero: linear-gradient(125deg, #0C3955 0%, #0C3955 45%, #17265A 100%);   /* dark band token (chat heads); heroes use --grad-cover */
  --grad-journey: #0C3955;
  --grad-tile: #0C3955;
  /* Flat tiles on dark (no glass) */
  --glass-bg: #115179;
  --glass-line: rgba(164, 212, 242, .35);
  /* Shape: the template has square corners (LifeSG themes set radius per theme: radiusScheme / overrides.radius) */
  --radius: 0px;             /* 12px */
  --radius-md: 0px;          /* 10px */
  --radius-lg: 0px;          /* 14-16px (new token) */
  --radius-sm: 2px;          /* 8px: buttons, inputs */
  --radius-xs: 2px;          /* 4-7px (new token) */
  --radius-pill: 2px;        /* 999px (new token): tags, chips, badges */
  --shadow-xs: none;
  --shadow: 0 1px 2px rgba(12, 57, 85, .06);
  --shadow-hover: 0 8px 24px rgba(12, 57, 85, .12);
  --shadow-lg: 0 18px 48px rgba(12, 57, 85, .18);
  /* Type: Accenture's Graphik by local name only (licensed; nothing is downloaded or hosted), then Arial */
  --font: "Graphik", "Graphik Web", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --fs-hero: clamp(30px, 2.89vw + 18.38px, 60px);      /* cover title 45.56 pt; was clamp(27.2px, 2.93vw + 15.4px, 57.6px) */
  --fs-h2: clamp(26px, .96vw + 22.15px, 36px);         /* master-2 headline 27.34 pt; was clamp(28px, 1.16vw + 23.3px, 40px) */
  --fs-lead: clamp(16px, .23vw + 15.07px, 18.4px);
  --fs-subtitle: clamp(17px, .67vw + 14.3px, 24px);    /* cover subtitle 18.23 pt (hero lead) */
  --fs-xl: 22px;
  --fs-lg: 18.25px;
  --fs-md: 16px;
  --fs-sm: 14.25px;
  --fs-xs: 12.25px;
  --fs-eyebrow: 14px;        /* 12px: template kicker, sentence case */
  /* Layout */
  --maxw: 1344px;
  --gutter: clamp(20px, 2.5vw + 10px, 48px);           /* 20 px at 402 (as measured in mobile-01/02) */
  --header-h: 96px;
  --rule: 6px;               /* 4px: the template's blue-to-teal bar */
  --chrome-h: calc(var(--header-h) + var(--rule) + 28px);
  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur: 600ms;
  --dur-fast: 200ms;
  --stagger: 70ms;
  /* compatibility aliases */
  --purple: var(--primary);
  --teal: var(--primary);
}
@media (max-width: 1100px) { :root { --header-h: 72px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--rule) + 12px); -webkit-text-size-adjust: 100%; }
html.pilot { scroll-padding-top: 16px; --chrome-h: 32px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: var(--primary); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.015em; color: var(--text); }
h1 { font-size: var(--fs-hero); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.03em; }
h3 { font-size: 1.12rem; font-weight: 700; }
@media (max-width: 760px) { h1 { line-height: 1.25; } }
p { margin: 0 0 1em; }
img, svg { max-width: 100%; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: var(--mono); }
.grad { color: var(--primary-tint-2); }
.lead { font-size: var(--fs-lead); line-height: 1.52; }
.h-light { display: block; font-weight: 400; }
.h-bold { display: block; font-weight: 700; }
.on-dark { color: #fff; }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark p, .on-dark .muted { color: var(--mist); }
.link { color: var(--primary); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link:hover { text-decoration-thickness: 2px; }
.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; }

/* Concept strip (in place of a government masthead: this is a proposal concept, not a government website) */
.concept-bar, .pilot-bar { background: var(--masthead); border-bottom: 1px solid #e4e4e4; font-size: 12.5px; line-height: 1.3; color: var(--text); }
.concept-bar .container, .pilot-bar .container { display: flex; gap: 8px; align-items: center; min-height: 28px; white-space: nowrap; }
.concept-bar strong, .pilot-bar strong { color: var(--primary-ink); font-weight: 700; }
.concept-bar .cb-msg, .pilot-bar .pb-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cb-short, .pb-short { display: none; }
.pilot-bar .container { min-height: 32px; gap: 16px; }
.pilot-bar .pb-msg { flex: 1; }
.pilot-bar .pb-links { display: flex; gap: 18px; flex: none; }
.pilot-bar a { color: var(--primary); font-weight: 600; }
@media (max-width: 760px) {
  .concept-bar, .pilot-bar { font-size: 11.5px; }
  .cb-long, .pb-long { display: none; }
  .cb-short, .pb-short { display: inline; }
  .pilot-bar .container { min-height: 30px; gap: 10px; }
  .pilot-bar .pb-links { gap: 12px; }
}

/* Layout */
.container { max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 72px 0; }
.section-tight { padding: 40px 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-navy { background: var(--grad-journey); color: #fff; }
.section-navy h2, .section-navy h3, .section-navy h4 { color: #fff; }
.section-navy .muted, .section-navy p { color: var(--mist); }
.section-head { max-width: 820px; margin-bottom: 36px; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 40px; }
.section-head-row h2 { margin: 0; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .section { padding: 48px 0; } .section-head-row { margin-bottom: 28px; } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Header (injected by site.js): white bar, 96 px on desktop (72 px on mobile), 4 px #004d9f rule */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: var(--rule) solid var(--primary-deep); transition: box-shadow .3s var(--ease); }
html.is-scrolled .site-header { box-shadow: 0 8px 24px rgba(1, 23, 49, .10); }
.site-header .bar { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--navy); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-mark { flex: none; width: 36px; height: 36px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--primary), var(--navy-3)); position: relative; overflow: hidden; }
.brand-mark::after { content: ''; position: absolute; left: 8px; right: 8px; top: 16px; height: 4px; border-radius: 2px; background: #fff; box-shadow: 0 -8px 0 -1px var(--primary-tint-2), 0 8px 0 -1px var(--primary-tint-2); }
.brand small { display: block; font-weight: 500; color: var(--muted); font-size: .72rem; letter-spacing: .01em; }
.nav { display: flex; gap: 6px 32px; margin-left: auto; align-items: center; }
.nav a { position: relative; color: var(--text); padding: 8px 0; font-size: var(--fs-md); font-weight: 400; white-space: nowrap; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease); }
.nav a:hover { color: var(--primary); text-decoration: none; }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.nav a.active { color: var(--primary); font-weight: 600; }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--text); cursor: pointer; padding: 0; font-size: 1.1rem; }
.nav-toggle:hover { background: var(--primary-tint); }
.burger { position: relative; display: block; width: 22px; height: 16px; }
.burger i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease), opacity .2s; }
.burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { top: 7px; } .burger i:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .nav { position: absolute; top: calc(100% + var(--rule)); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 4px var(--gutter) 20px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 18px 32px rgba(1, 23, 49, .12);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; }
  .nav.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav a { padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--divider); }
  .nav a::after { bottom: -1px; }
  .nav a:last-child { border-bottom: 0; }
}

/* Footer (injected). .site-footer is the compact one-line footer; .site-foot-full is the design footer */
.site-footer { border-top: 1px solid var(--line); padding: 24px 0 32px; color: var(--muted); font-size: var(--fs-xs); background: var(--bg-foot); }
.site-footer .container { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.site-footer a { color: var(--text-2); font-weight: 500; }
.site-foot-full { background: var(--bg-foot); border-top: 0; padding: 48px 0 28px; color: var(--text-2); font-size: var(--fs-sm); }
.site-foot-full > .container { display: block; }
.foot-top { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 40px; }
.foot-top p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); flex: 1; min-width: 240px; }
.foot-social { display: flex; gap: 20px; color: var(--muted); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot-cols h4 { font-size: var(--fs-sm); font-weight: 600; color: var(--text); letter-spacing: 0; padding-bottom: 12px; margin: 0 0 10px; border-bottom: 1px solid var(--line); }
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols li { line-height: 28px; }
.foot-cols a, .foot-cols span { color: var(--text-2); font-weight: 400; }
.foot-cols a:hover { color: var(--primary); }
.foot-legal { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text); }
.foot-legal a { color: var(--text); font-weight: 400; margin-right: 18px; }
@media (max-width: 960px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .site-foot-full { padding-top: 36px; } .foot-cols { gap: 28px 20px; } .foot-legal { margin-top: 36px; } }

/* Hero: deep-navy to indigo band with white text (Desktop-01 / mobile-01) */
.page-hero { padding: 68px 0 64px; position: relative; overflow: hidden; color: #fff; background: var(--grad-hero); }
.page-hero > .container { position: relative; }
.page-hero h1, .page-hero h2 { color: #fff; }
.page-hero h1 { margin-bottom: 22px; }
.page-hero .lead { font-size: var(--fs-lead); line-height: 1.52; color: var(--mist); max-width: 640px; }
.page-hero .eyebrow { color: var(--sky); margin-bottom: 24px; }
.page-hero .stat { background: var(--glass-bg); border-color: var(--glass-line); color: #fff; padding: 24px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.page-hero .stat .num { color: #fff; font-size: 40px; letter-spacing: -.02em; }
.page-hero .stat .label { color: var(--mist); }
.page-hero .stat .kicker { color: var(--mist); }
.page-hero .stats { margin-top: 48px; gap: 20px; }
@media (max-width: 760px) { .page-hero { padding: 44px 0 48px; } .page-hero .stats { margin-top: 40px; } }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .15em; line-height: 1.5; text-transform: uppercase; color: var(--primary); margin-bottom: 16px; }
.eyebrow::before { content: none; }
.eyebrow.dot::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3.5px rgba(109, 208, 161, .25); }
.section-navy .eyebrow, .band-journey .eyebrow, .on-dark .eyebrow { color: var(--sky); }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
@media (max-width: 760px) {
  .hero-actions { flex-direction: column; gap: 16px; margin-top: 32px; }
  .hero-actions .btn { width: 100%; }
}

/* Buttons: 48 px, radius 8. White solid with navy text, translucent dark outline, LifeSG primary blue */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 24px; border-radius: var(--radius-sm); border: 1px solid var(--primary); background: #fff; color: var(--primary); font-weight: 600; font-size: var(--fs-md); line-height: 1.25; cursor: pointer; font-family: inherit; min-height: 48px; text-align: center;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .25s var(--ease), transform .15s var(--ease); }
.btn:hover { text-decoration: none; background: var(--primary-tint); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-light { background: #fff; color: var(--primary-ink); border-color: #fff; }
.btn-light:hover { background: #eef4fd; border-color: #eef4fd; }
.btn-outline-light { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .7); }
.btn-danger { border-color: var(--red); color: var(--red); }
.btn-sm { padding: 0 14px; font-size: .875rem; min-height: 36px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn .arrow, .link-arrow .arrow, .btn > span[aria-hidden="true"]:last-child { display: inline-block; transition: transform .3s var(--ease); }
@media (hover: hover) { .btn:hover .arrow, .link-arrow:hover .arrow, .btn:hover > span[aria-hidden="true"]:last-child, a:hover > .arrow { transform: translateX(4px); } }

/* Link with arrow (stat-card links): underline spans text and arrow, arrow nudges on hover */
.link-arrow { display: inline-flex; align-items: center; gap: 10px; color: var(--primary); font-weight: 600; font-size: var(--fs-sm); padding-bottom: 5px; border-bottom: 1px solid currentColor; }
.link-arrow:hover { text-decoration: none; }
.link-arrow:not(:has(.arrow))::after { content: '\2192'; display: inline-block; transition: transform .3s var(--ease); }
@media (hover: hover) { .link-arrow:hover::after { transform: translateX(4px); } }
.glass .link-arrow, .on-dark .link-arrow, .page-hero .link-arrow, .section-navy .link-arrow, .band-journey .link-arrow { color: #fff; border-bottom-color: rgba(255, 255, 255, .55); }

/* Cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; position: relative; box-shadow: var(--shadow-xs);
  transition: transform .3s var(--ease), border-color .2s, box-shadow .3s var(--ease); }
a.card { color: var(--text); display: block; font-weight: 400; }
.card.link:hover, a.card:hover { border-color: var(--primary); text-decoration: none; }
@media (hover: hover) {
  .card.link:hover, a.card:hover, .card[data-detail]:hover, .lift:hover, a.glass:hover, .glass.link:hover, .glass[data-detail]:hover, .journey-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
  .glass.link:hover, a.glass:hover, .glass[data-detail]:hover, .journey-card:hover { border-color: rgba(255, 255, 255, .34); box-shadow: 0 18px 40px rgba(0, 8, 24, .32); }
}
.card h3 { margin-bottom: .4em; }
.card p { color: var(--muted); font-size: .95rem; margin-bottom: 0; }
.card-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--tile); color: var(--primary-deep); margin-bottom: 16px; font-size: 1.2rem; }
.card-icon.navy { background: var(--navy-3); color: #fff; }
.card-icon.amber { background: var(--amber-tint); color: var(--amber); }
.card-icon.green { background: var(--green-tint); color: var(--green); }
.card-icon.red { background: var(--red-tint); color: var(--red); }
.card-glow { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint), var(--shadow); }
.card-navy { background: var(--grad-journey); border-color: transparent; color: #fff; }
.card-navy h3 { color: #fff; } .card-navy p { color: var(--mist); }
.lift { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }

/* Icon tile: light-blue 44 px square, radius 10, blue icon. .solid = gradient tile for dark bands */
.icon-tile { flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); display: inline-grid; place-items: center; background: var(--tile); color: var(--primary-deep); }
.icon-tile svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-tile svg:not([fill]) { fill: none; }
.icon-tile.solid { width: 52px; height: 52px; background: var(--grad-tile); color: #fff; box-shadow: 0 6px 16px rgba(0, 10, 40, .28), inset 0 1px 0 rgba(255, 255, 255, .18); }
.icon-tile.lg { width: 52px; height: 52px; }
.icon-tile.sm { width: 36px; height: 36px; border-radius: var(--radius-sm); }
.icon-tile.sm svg { width: 18px; height: 18px; }

/* Glass card on dark bands (stat cards, journey cards) */
.glass { background: var(--glass-bg); border: 1px solid var(--glass-line); border-radius: var(--radius); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .3s var(--ease), border-color .2s, box-shadow .3s var(--ease); }
.glass h3, .glass h4, .glass strong { color: #fff; }
.glass p, .glass .label, .glass .kicker, .glass .muted { color: var(--mist); }
.stat.glass { padding: 24px; }
.glass .kicker { display: flex; align-items: center; gap: 9px; font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0; text-transform: none; }
.glass .num { color: #fff; font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 2px 0 4px; }
.glass .label { font-size: var(--fs-xs); }
.glass .link-arrow { margin-top: 20px; }

/* Live dot: an empty .live-dot is the green dot with a soft halo and a slow ping; with text it becomes a small label */
.live-dot { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.live-dot::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3.5px rgba(109, 208, 161, .25); }
.live-dot:empty { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3.5px rgba(109, 208, 161, .25); vertical-align: middle; }
.live-dot:empty::before { display: none; }
.live-dot:empty::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--live); opacity: 0; animation: live-ping 2.6s var(--ease) infinite; }
@keyframes live-ping { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.8); opacity: 0; } }

/* Popular-service cards (Desktop-01 row, mobile-01 two-column tiles) */
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 16px; }
.service-card { display: flex; align-items: center; gap: 16px; min-height: 86px; padding: 20px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--primary); font-size: var(--fs-md); font-weight: 500; line-height: 1.45; text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s; }
.service-card:hover { text-decoration: none; border-color: #9db8dc; }
.service-card:active { transform: scale(.98); }
@media (hover: hover) { .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } }
.service-card .icon-tile svg { width: 20px; height: 20px; }
@media (max-width: 1100px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 760px) {
  .service-grid { gap: 16px 12px; }
  .service-card { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; min-height: 0; line-height: 1.6; }
}

/* Journey band and journey cards (Desktop-02 / mobile-02) */
.band-journey { background: var(--grad-journey); color: #fff; padding: 72px 0 112px; position: relative; overflow: hidden; }
.band-journey h2, .band-journey h3 { color: #fff; }
.band-journey p { color: var(--mist); }
.journey-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.journey-card { position: relative; display: flex; flex-direction: column; padding: 32px 24px; border-radius: var(--radius); background: var(--glass-bg); border: 1px solid var(--glass-line); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .3s var(--ease), border-color .2s, box-shadow .3s var(--ease); }
.journey-card .icon-tile { width: 52px; height: 52px; margin-bottom: 22px; background: var(--grad-tile); color: #fff; box-shadow: 0 6px 16px rgba(0, 10, 40, .28), inset 0 1px 0 rgba(255, 255, 255, .18); }
.journey-card .j-num { position: absolute; top: 18px; right: 24px; font-size: 76px; font-weight: 400; line-height: 1; letter-spacing: -.04em; color: #fff; pointer-events: none; }
.journey-card h3 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; margin: 0 0 6px; color: #fff; }
.journey-card p { color: var(--mist); font-size: var(--fs-sm); line-height: 1.4; margin: 0 0 20px; }
.journey-card .btn { margin-top: auto; align-self: flex-start; min-height: 46px; background: #fff; border-color: #fff; color: var(--primary-ink); }
.journey-card .btn:hover { background: #eef4fd; }
.bullets { list-style: none; margin: 0 0 20px; padding: 0; }
.bullets li { position: relative; padding-left: 20px; line-height: 28px; font-size: var(--fs-sm); color: var(--mist); }
.bullets li::before { content: ''; position: absolute; left: 3px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--bullet); }
.bullets a { color: inherit; font-weight: 400; }
.bullets.light li { color: var(--text-2); }
.bullets.light li::before { background: var(--primary); }
@media (max-width: 1100px) { .journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .band-journey { padding: 52px 0 64px; }
  .journey-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
  .journey-card { padding: 28px 22px 32px; }
  .journey-card p { font-size: var(--fs-md); line-height: 1.5; }
  .journey-card .bullets li { font-size: var(--fs-md); line-height: 44px; }
  .journey-card .bullets li::before { top: 20px; }
  .journey-card .btn { align-self: stretch; }
}

/* FAQ band, chips and accordions (Desktop-03) */
.faq-band { background: var(--bg-alt); padding: 88px 0; }
@media (max-width: 760px) { .faq-band { padding: 52px 0; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chip { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: #fff; color: var(--text); font-family: inherit; font-size: 14.5px; font-weight: 500; line-height: 1.2; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, transform .15s var(--ease); }
.chip:hover { border-color: var(--chip-active-line); text-decoration: none; }
.chip:active { transform: scale(.98); }
.chip .count, .chip .c { color: var(--muted); font-weight: 400; }
.chip.active, .chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--chip-active); border-color: var(--chip-active-line); color: var(--primary-ink); }
.chip.active .count, .chip.active .c, .chip[aria-pressed="true"] .count, .chip[aria-pressed="true"] .c, .chip[aria-selected="true"] .count { color: var(--primary-ink); }
@media (max-width: 760px) { .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } }

.acc-list, [data-accordion] { display: grid; gap: 12px; }
.acc-item { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-md); transition: border-color .25s, box-shadow .3s var(--ease); }
.acc-item.open { border-color: var(--line-3); }
.acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 16px 20px; background: none; border: 0; border-radius: var(--radius-md); font-family: inherit; font-size: var(--fs-md); font-weight: 500; line-height: 1.45; color: var(--text); text-align: left; cursor: pointer; }
.acc-head:hover { color: var(--primary); }
.acc-chev, .acc-head .chev { flex: none; width: 20px; height: 20px; color: #5b6775; transition: transform .4s var(--ease); }
.acc-item.open .acc-chev, .acc-item.open .acc-head .chev { transform: rotate(180deg); }
[data-accordion] .acc-body { display: grid; grid-template-rows: 0fr; padding: 0; border: 0; margin: 0; transition: grid-template-rows .45s var(--ease); }
[data-accordion] .acc-item.open > .acc-body { grid-template-rows: 1fr; }
[data-accordion] .acc-inner { min-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s linear .45s; visibility: hidden; }
[data-accordion] .acc-item.open .acc-inner { opacity: 1; transform: none; visibility: visible; transition-delay: .05s, 0s, 0s; }
.acc-inner > .acc-content, [data-accordion] .acc-inner > :first-child { margin-top: 0; }
[data-accordion] .acc-inner { padding: 0 20px; }
[data-accordion] .acc-inner::before { content: ''; display: block; height: 1px; background: var(--divider); margin-bottom: 16px; }
[data-accordion] .acc-inner::after { content: ''; display: block; height: 20px; }
.acc-body { color: var(--text-2); font-size: 15px; line-height: 1.6; }
.acc-body ul { margin: 6px 0 0; padding-left: 20px; }

/* Dark announcement bar (Desktop-01), dismissible via [data-dismiss] */
.announce { background: var(--announce); color: #f3f3f3; font-size: 14px; line-height: 1.45; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.announce .container { display: flex; align-items: center; gap: 12px 16px; min-height: 72px; padding-top: 12px; padding-bottom: 12px; }
.announce p { margin: 0; flex: 1; min-width: 0; color: #f3f3f3; }
.announce strong { color: #fff; font-weight: 700; }
.announce a { color: #fff; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.announce-icon { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #f3f3f3; color: var(--announce); display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: Georgia, serif; line-height: 1; }
.announce [data-dismiss] { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: #fff; font-size: 18px; cursor: pointer; }
.announce [data-dismiss]:hover { background: rgba(255, 255, 255, .12); }
.is-dismissing { opacity: 0 !important; transform: translateY(-6px) !important; pointer-events: none; }
@media (max-width: 760px) { .announce .container { flex-wrap: wrap; align-items: flex-start; min-height: 0; } .announce p { flex-basis: calc(100% - 80px); } }

/* Floating chat launcher: white pill "Need help? Chat with us!" plus a round blue robot avatar */
.chat-launcher { position: fixed; right: 40px; bottom: 40px; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 0; margin: 0; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; text-decoration: none; }
.chat-launcher:hover { text-decoration: none; }
.chat-pill { display: inline-flex; align-items: center; height: 45px; padding: 0 16px; background: #fff; border: 1.5px solid var(--primary-deep); border-radius: var(--radius); color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; box-shadow: 0 10px 26px rgba(1, 23, 49, .14);
  transition: transform .4s var(--ease), opacity .4s var(--ease); }
.chat-avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--primary); display: grid; place-items: center; box-shadow: 0 10px 24px rgba(1, 23, 49, .28); transition: transform .3s var(--ease); }
.chat-avatar svg { width: 64px; height: 64px; display: block; }
.chat-avatar .cl-arm { transform-box: fill-box; transform-origin: 85% 85%; animation: cl-wave 4.8s var(--ease) infinite; }
.chat-launcher { animation: cl-float 5s ease-in-out infinite; }
@media (hover: hover) { .chat-launcher:hover .chat-avatar { transform: scale(1.06); } .chat-launcher:hover .chat-pill { transform: translateX(-3px); } }
.chat-launcher:active .chat-avatar { transform: scale(.96); }
@keyframes cl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes cl-wave { 0%, 62%, 100% { transform: rotate(0); } 68% { transform: rotate(-22deg); } 74% { transform: rotate(8deg); } 80% { transform: rotate(-18deg); } 86% { transform: rotate(0); } }
@media (max-width: 760px) { .chat-launcher { right: 16px; bottom: 16px; } .chat-pill { display: none; } .chat-avatar, .chat-avatar svg { width: 56px; height: 56px; } }

/* Stats (KPI cards as in Accenture's officer dashboard, Figure 2) */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat .kicker { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stat .num { font-size: 2rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--navy); }
.stat .label { color: var(--muted); font-size: .86rem; }
.stat.glass { background: var(--glass-bg); border-color: var(--glass-line); }
.stat.glass .num { color: #fff; font-size: 40px; }
.stat.glass .kicker, .page-hero .stat .kicker { display: flex; align-items: center; gap: 9px; color: var(--mist); font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0; text-transform: none; }
[data-countup] { font-variant-numeric: tabular-nums; }

/* Tags / status labels (text + colour, never colour alone) */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); background: #eef1f5; color: var(--text-2); border: 1px solid var(--line); }
.tag-blue, .tag-purple, .tag-teal { background: var(--primary-tint); color: var(--primary-dark); border-color: var(--primary-tint-2); }
.tag-amber { background: var(--amber-tint); color: #8a4b00; border-color: #f3d48a; }
.tag-red { background: var(--red-tint); color: #a3241c; border-color: #f0b8b4; }
.tag-green { background: var(--green-tint); color: #17612e; border-color: #b7dfc3; }
.tag-navy { background: var(--navy-3); color: #fff; border-color: var(--navy-3); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Callout, lists, refs */
.callout { border: 1px solid var(--primary-tint-2); background: var(--primary-tint); border-radius: var(--radius); padding: 18px 20px; }
.callout strong { color: var(--primary-dark); }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { padding-left: 28px; position: relative; margin-bottom: 10px; color: var(--muted); }
.checks li::before { content: '✓'; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); font-size: .72rem; display: grid; place-items: center; font-weight: 700; }
.checks li strong { color: var(--text); }
.section-navy .checks li { color: var(--mist); } .section-navy .checks li strong { color: #fff; }
.ref { display: inline-block; font-family: var(--mono); font-size: .72rem; color: var(--faint); border: 1px dashed var(--line-2); border-radius: var(--radius-xs); padding: 1px 6px; font-weight: 400; }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overscroll-behavior-x: contain; }
table.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: left; background: #f6f8fb; color: var(--text-2); font-weight: 700; font-size: .78rem; letter-spacing: .02em; }
.table th, .table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tbody tr { transition: background-color .2s; }
.table tbody tr:hover { background: #fafcff; }
.table td a { font-weight: 700; }

/* Diagrams (inline SVG; light canvas, navy and blue strokes). Wide diagrams scroll inside their own frame */
.diagram { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; overflow-x: auto; overscroll-behavior-x: contain; box-shadow: var(--shadow-xs); max-width: 100%; }
.diagram svg { display: block; width: 100%; height: auto; min-width: 760px; font-family: var(--font); }
.diagram-caption { color: var(--faint); font-size: .84rem; margin-top: 10px; }
.diagram [data-detail] { cursor: pointer; }
.diagram [data-detail] rect { transition: stroke .2s, stroke-width .2s; }
.diagram [data-detail]:hover rect, .diagram [data-detail].on rect, .diagram [data-detail]:focus rect { stroke: var(--primary); stroke-width: 2.5; }
.diagram [data-detail]:focus { outline: none; }
.flow-line { stroke-dasharray: 6 6; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }
.pulse { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Hero SVG helpers. .road-dash and .works-glow are inert utilities kept from the template (not used on this site);
   the hero art here is the neutral node-and-layer motif (.hero-net in page-fx.css) with .node-pulse, .orbit, .flow-line. */
.road-dash { animation: road-dash var(--dash-speed, 2.4s) linear infinite; }
.road-dash.rev { animation-direction: reverse; }
@keyframes road-dash { to { stroke-dashoffset: calc(var(--dash-cycle, 48) * -1px); } }
.node-pulse { transform-box: fill-box; transform-origin: center; animation: node-ping 2.6s var(--ease) infinite; }
@keyframes node-ping { 0% { transform: scale(1); opacity: .85; } 75%, 100% { transform: scale(3.2); opacity: 0; } }
.works-glow { transform-box: fill-box; transform-origin: center; animation: works-glow 2.8s ease-in-out infinite; }
@keyframes works-glow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.03); } }
.orbit { transform-box: fill-box; transform-origin: center; animation: orbit 48s linear infinite; }
.orbit.rev { animation-direction: reverse; }
@keyframes orbit { to { transform: rotate(360deg); } }
.hero-art { position: absolute; inset: 0; pointer-events: none; }
.hero-art svg { width: 100%; height: 100%; max-width: none; }

/* Tabs (LifeSG-style underline tabs; motion.js adds a sliding .tab-ink indicator to every .tabs) */
.tabs { position: relative; display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.tab { background: none; border: 0; border-bottom: 3px solid transparent; color: var(--muted); padding: 10px 14px; cursor: pointer; font-weight: 700; font-size: .92rem; font-family: inherit; margin-bottom: -1px; transition: color .2s, border-color .2s; }
.tab:hover { color: var(--primary); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tabs.has-ink .tab.active, .tabs.has-ink .tab[aria-selected="true"] { border-bottom-color: transparent; }
.tab-ink { position: absolute; left: 0; top: 0; width: 100px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); transform-origin: 0 0; pointer-events: none; opacity: 0; z-index: 1; }
.tab-ink.on { opacity: 1; }
.tab-ink.ready { transition: transform .45s var(--ease), opacity .2s; }
.tab .count { display: inline-block; background: #eef1f5; color: var(--text-2); border-radius: var(--radius-pill); font-size: .72rem; padding: 0 7px; margin-left: 6px; }
.tab.active .count { background: var(--primary); color: #fff; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade .35s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Detail drawer (site.js opens it from [data-detail] -> <template id>) */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(1, 23, 49, .42); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); z-index: 80; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(460px, 92vw); background: #fff; border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .4s var(--ease), visibility 0s linear .4s; z-index: 90; padding: 28px; overflow-y: auto; overscroll-behavior: contain; }
.drawer.open { transform: none; transition-delay: 0s; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer .close { position: absolute; top: 14px; right: 14px; }
.drawer h3 { font-size: 1.3rem; margin-top: 8px; }
.drawer p, .drawer li { color: var(--muted); }

/* Journey stepper (navy band, as in Accenture's RWA journey, Figure 2) */
.journey { background: var(--grad-journey); border-radius: var(--radius); padding: 18px 20px; color: #fff; }
.journey-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; position: relative; }
.journey-step { text-align: center; font-size: .8rem; color: var(--mist); position: relative; padding-top: 34px; }
.journey-step::before { content: attr(data-n); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; border: 2px solid #7eaad9; background: var(--navy-2); color: #fff; font-weight: 700; font-size: .75rem; display: grid; place-items: center; }
.journey-step::after { content: ''; position: absolute; top: 12px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 2px; background: #3d5f8f; }
.journey-step:last-child::after { display: none; }
.journey-step.done::before { content: '✓'; background: var(--primary); border-color: var(--primary); }
.journey-step.current::before { background: #fff; color: var(--navy); border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
.journey-step.current { color: #fff; font-weight: 700; }
@media (max-width: 760px) { .journey-steps { grid-auto-flow: row; } .journey-step { text-align: left; padding: 4px 0 4px 38px; } .journey-step::before { left: 13px; top: 2px; } .journey-step::after { display: none; } }

/* Timeline / steps */
.steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; counter-reset: s; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: relative; box-shadow: var(--shadow-xs); }
.step::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: var(--mono); color: var(--primary); font-weight: 700; font-size: .85rem; }
.step h4 { margin: 6px 0 6px; }
.step p { color: var(--muted); font-size: .88rem; margin: 0; }
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: linear-gradient(var(--primary), var(--navy-3)); }
.tl-item { position: relative; margin-bottom: 22px; }
.tl-item::before { content: ''; position: absolute; left: -24px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); }
.tl-item h4 { margin: 0 0 4px; }
.tl-item p { color: var(--muted); margin: 0; font-size: .93rem; }

/* Demo app chrome (/demo pages): left side nav as in Accenture's Figure 2 */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - var(--chrome-h)); background: #fff; }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } .app-side { display: none; } }
.app-side { background: #fff; border-right: 1px solid var(--line); padding: 18px 12px; }
.app-side .side-title { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 16px 10px 6px; font-weight: 700; }
.app-side a { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-2); padding: 8px 10px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; transition: background-color .2s, color .2s; }
.app-side a:hover { background: var(--primary-tint); color: var(--primary); text-decoration: none; }
.app-side a.active { background: var(--primary-tint); color: var(--primary); }
.app-side .badge { background: var(--red); color: #fff; border-radius: var(--radius-pill); font-size: .7rem; padding: 0 7px; font-weight: 700; }
.app-main { padding: 24px 28px 48px; min-width: 0; background: #fff; }
.app-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.app-top h1 { font-size: 1.9rem; margin: 0; line-height: 1.2; }
.crumbs { font-size: .82rem; color: var(--muted); margin-bottom: 8px; }
.crumbs a { font-weight: 600; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-xs); }
.panel-title { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; font-weight: 700; }
.demo-banner { background: var(--masthead); border-bottom: 1px solid var(--line); color: var(--text-2); font-size: .8rem; padding: 6px 0; text-align: center; }
.ai-box { border: 1px solid var(--primary-tint-2); background: linear-gradient(180deg, var(--primary-tint), #fff); border-radius: var(--radius); padding: 16px; }
.ai-box .ai-label { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: var(--primary-dark); letter-spacing: .08em; text-transform: uppercase; }
.confidence { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--green); }
.confidence .dots { letter-spacing: 1px; }
.score-bar { height: 6px; border-radius: var(--radius-xs); background: #e6ebf2; overflow: hidden; }
.score-bar > span { display: block; height: 100%; background: var(--primary); }
.chat { display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: var(--radius-lg); font-size: .94rem; }
.msg.bot { background: #f2f5f9; border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.user { background: var(--primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.map-canvas { background: var(--map-water); border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; }
label { font-size: .85rem; font-weight: 600; color: var(--text-2); }
input, select, textarea { font-family: inherit; font-size: .95rem; background: #fff; border: 1px solid var(--line-ui); color: var(--text); border-radius: var(--radius-sm); padding: 10px 12px; min-height: 44px; transition: border-color .2s, box-shadow .2s; }
input[readonly] { background: #f3f5f8; }
input:focus, select:focus, textarea:focus, input:focus-within, button:focus-visible, a:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--primary); }

/* Login */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 16px; background: var(--grad-hero); }
.login-card { width: min(420px, 100%); background: #fff; border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-lg); }
.login-card h1 { font-size: 2rem; color: var(--navy); }
.login-card form { display: grid; gap: 14px; margin-top: 18px; }
.login-card label { display: grid; gap: 6px; font-size: .85rem; color: var(--muted); }
.login-error { color: var(--red); font-weight: 600; }

/* Toasts (assets/api.js) */
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 120; display: grid; gap: 8px; }
.toast { background: var(--navy); color: #fff; padding: 12px 18px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-weight: 600; font-size: .92rem; transition: opacity .3s, transform .3s var(--ease); animation: toast-in .4s var(--ease); }
.toast-success { background: var(--green); } .toast-error { background: var(--red); }
.toast.out { opacity: 0; transform: translateY(8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* Closed drawer must not cast a shadow strip along the right edge */
.drawer:not(.open) { box-shadow: none; visibility: hidden; }
.drawer.open { visibility: visible; }

/* Disclaimer: inside the footer, or the line site.js appends at the end of a <body data-no-footer> page */
.foot-disclaimer { margin: 20px 0 0; max-width: 1040px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.6; }
.site-disclaimer { background: var(--bg-foot); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); line-height: 1.6; padding: 16px 0 20px; }
.site-disclaimer .container { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 32px; }
.site-disclaimer p { margin: 0; max-width: 1040px; color: var(--muted); }
.site-disclaimer a { flex: none; color: var(--text-2); font-weight: 500; }
html.pilot .site-disclaimer { padding-bottom: 72px; }
@media (max-width: 760px) { .site-disclaimer .container { flex-direction: column; } html.pilot .site-disclaimer { padding-bottom: 88px; } }

/* Chat avatar (not used on this site; motion.js draws an inline SVG avatar), clipped round */
.chat-avatar { overflow: hidden; }
.chat-avatar img { display: block; width: 109.4%; height: 109.4%; max-width: none; margin: -1.56% 0 0 -.52%; animation: cl-nod 6s var(--ease) 2s infinite; }
.chat-pill { animation: pill-in .6s var(--ease) .9s backwards; }
@keyframes cl-nod { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-7deg); } 82% { transform: rotate(5deg); } 88% { transform: rotate(-3deg); } 94% { transform: rotate(0); } }
@keyframes pill-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* ---------- Carousel ([data-carousel], motion.js adds .cr-dots after it) ----------
   At <= 760 px the row becomes a horizontal scroll-snap carousel that bleeds to the screen edge, each card 82 %
   of the content width so the next card peeks (mobile-01). Hero stat rows are carousels by default. */
.cr-dots { display: none; }
@media (max-width: 760px) {
  [data-carousel]:not([data-carousel="off"]), .page-hero .stats:not([data-carousel="off"]) {
    display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important; gap: 16px !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)) !important; padding-inline: var(--gutter) !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  [data-carousel]:not([data-carousel="off"])::-webkit-scrollbar, .page-hero .stats:not([data-carousel="off"])::-webkit-scrollbar { display: none; }
  [data-carousel]:not([data-carousel="off"]) > *, .page-hero .stats:not([data-carousel="off"]) > * { flex: 0 0 82% !important; max-width: none; min-width: 0; scroll-snap-align: start; }
  .cr-dots { display: flex; justify-content: center; margin-top: 20px; color: var(--primary); }
  .cr-dots.on-dark { color: #fff; }
  .cr-dot { position: relative; width: 28px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
  .cr-dot::before, .cr-dot::after { content: ''; position: absolute; top: 50%; left: 50%; height: 8px; margin-top: -4px; border-radius: var(--radius-xs); background: currentColor; }
  .cr-dot::before { width: 8px; margin-left: -4px; opacity: .4; transition: opacity .3s var(--ease); }
  .cr-dot::after { width: 24px; margin-left: -12px; opacity: 0; transform: scaleX(.34); transition: opacity .3s var(--ease), transform .45s var(--ease); }
  .cr-dot.on::before { opacity: 0; }
  .cr-dot.on::after { opacity: 1; transform: none; }
  .cr-dot:focus-visible { outline-offset: -2px; }
}

/* ---------- Motion (hooks driven by motion.js; transform and opacity only) ---------- */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
body { animation: page-in .5s ease-out backwards; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-stagger] { opacity: 1; transform: none; }
.stagger-item { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.stagger-item.in { opacity: 1; transform: none; }
.page-hero :is(.eyebrow, h1, .lead, .hero-actions):not(.reveal), .intro > :not(.reveal) { animation: rise-in .8s var(--ease) backwards; }
.page-hero .eyebrow, .intro > :nth-child(1) { animation-delay: .05s; }
.page-hero h1, .intro > :nth-child(2) { animation-delay: .13s; }
.page-hero .lead, .intro > :nth-child(3) { animation-delay: .21s; }
.page-hero .hero-actions, .intro > :nth-child(4) { animation-delay: .29s; }
.intro > :nth-child(n+5) { animation-delay: .37s; }
[data-parallax] { will-change: translate; }

/* prefers-reduced-motion and ?shot=1 (html.shot, set by site.js): no motion, final states immediately */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .reveal, .stagger-item { opacity: 1 !important; transform: none !important; }
  .flow-line, .pulse, .road-dash, .node-pulse, .works-glow, .orbit, .live-dot::after, .chat-launcher, .cl-arm { animation: none !important; }
}
html.shot { scroll-behavior: auto; }
html.shot *, html.shot *::before, html.shot *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
html.shot .reveal, html.shot .stagger-item { opacity: 1 !important; transform: none !important; }
html.shot :is(.flow-line, .pulse, .road-dash, .node-pulse, .works-glow, .orbit, .chat-launcher, .cl-arm), html.shot .live-dot::after { animation: none !important; }

/* Shared overrides */
/* Glass stat labels stay light on any dark band, not only inside .page-hero */
.glass .label, .stat.glass .label, .section-navy .stat .label, .band-journey .stat .label, .on-dark .stat .label { color: #c9d8ee; }
.glass .kicker, .stat.glass .kicker { color: #a9c6f0; }
/* Card borders follow the design (#c7caca) */
.card:not(.card-navy):not(.glass):not(.journey-card), .service-card, .step { border-color: var(--line-2, #c7caca); }
/* Detail drawers: the close button stays reachable while the drawer scrolls (phones) */
@media (max-width: 760px) { .drawer .close { position: fixed; top: 10px; right: 12px; z-index: 2; background: #fff; box-shadow: var(--shadow); min-width: 44px; min-height: 44px; } }
/* Carousel dots: consistent 44 px tall hit areas everywhere */
.cr-dot, [data-carousel] + .cr-dots button, .cr-dots button { min-height: 44px; }
/* Stat labels at the design's 12.25 px */
.page-hero .stat .label, .stat.glass .label { font-size: 12.25px; }
/* Phones: nothing visible below 12 px */
@media (max-width: 760px) { .tag, .ref, .kicker, small, .muted.small, dl dt { font-size: 12px; } }
/* Tab rows that scroll sideways show a right-edge fade instead of cutting words */
@media (max-width: 760px) { .tabs.is-overflowing { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }

/* Count-up numbers use the design's proportional digits at rest */
[data-countup], .stat .num { font-variant-numeric: normal; }

/* =====================================================================================================================
   Accenture template layer: Accenture's proposal look for every page of this site. It works
   through the tokens above plus the component rules below: white pages, navy headlines, sky-20 surfaces, square corners,
   the top-right cut corner on filled tiles, the 6 px blue-to-teal bar on every header, a light cover-like hero, flat
   navy bands and the template's table format. Standards first: status colours stay LifeSG, the cut corner (clip-path)
   is never put on anything focusable, targets stay 44 px and every ring passes WCAG 2.2 AA.
   ===================================================================================================================== */

/* Type: template headlines (Semibold, navy, tracking near 0); kickers 14 px semibold, sentence case, sky ink */
h1, h2 { color: var(--heading); font-weight: 600; letter-spacing: -.01em; }
.h-light { font-weight: 400; }
.h-bold { font-weight: 700; }
.eyebrow, .eyebrow-sm { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--acn-sky-ink); }
.section-navy .eyebrow, .band-journey .eyebrow, .on-dark .eyebrow { color: var(--acn-sky); }
.section-navy h2, .band-journey h2, .on-dark h2, .card-navy h2, .section-navy h1, .band-journey h1, .on-dark h1 { color: #fff; }

/* Headers: the template's 6 px blue-to-teal bar across the top of every header */
.site-header { border-bottom: 1px solid var(--line); }
.site-header::before, .acn-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--rule); background: var(--acn-bar); pointer-events: none; z-index: 1; }
@media (max-width: 1100px) { .site-header .nav { top: calc(100% + 1px); } }
.nav a.active { color: var(--primary); }
.concept-bar { background: var(--acn-grey-95); border-bottom-color: var(--line); }

/* Brand mark: navy square with the template's top-right cut corner (not focusable: the link around it is not clipped) */
.brand-mark { background: var(--acn-navy); clip-path: polygon(0 0, calc(100% - var(--snip-sm)) 0, 100% var(--snip-sm), 100% 100%, 0 100%); }
.brand-mark::after { box-shadow: 0 -8px 0 -1px var(--acn-sky), 0 8px 0 -1px var(--acn-sky); }

/* Hero: light and cover-like (white to sky-20), navy headline, black lead, sky-ink kicker; flat white stat cards */
.page-hero { background: var(--grad-cover); color: var(--text); border-bottom: 1px solid var(--line);
  --mist: var(--text-2); --sky: var(--acn-sky-ink); --glass-bg: #fff; --glass-line: var(--line-2); }
.page-hero h1, .page-hero h2 { color: var(--heading); }
.page-hero .lead { color: var(--text); }
.page-hero .eyebrow { color: var(--acn-sky-ink); }
.page-hero .btn-light { background: var(--primary); border-color: var(--primary); color: #fff; }
.page-hero .btn-light:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.page-hero .btn-outline-light { background: #fff; border-color: var(--primary); color: var(--primary); -webkit-backdrop-filter: none; backdrop-filter: none; }
.page-hero .btn-outline-light:hover { background: var(--primary-tint); border-color: var(--primary); }
.page-hero .stat, .page-hero .glass { background: #fff; border: 1px solid var(--line-2); color: var(--text); -webkit-backdrop-filter: none; backdrop-filter: none; }
.page-hero .glass h3, .page-hero .glass h4, .page-hero .glass strong { color: var(--text); }
.page-hero .stat .num, .page-hero .glass .num { color: var(--heading); font-weight: 600; }
.page-hero .stat .label, .page-hero .glass .label, .page-hero .glass p { color: var(--text-2); }
.page-hero .stat .kicker, .page-hero .glass .kicker { color: var(--text-2); }
.page-hero .link-arrow, .page-hero .glass .link-arrow { color: var(--primary); border-bottom-color: currentColor; }
.page-hero .cr-dots.on-dark { color: var(--primary); }
.page-hero .ref { background: #fff; } /* opaque under the hero art: #686868 keeps 5.57:1 */
.section-alt p.fig-cap { color: var(--text-2); } /* captions on the tinted bands */
@media (hover: hover) { .page-hero a.glass:hover, .page-hero .glass.link:hover, .page-hero .glass[data-detail]:hover { border-color: var(--primary); box-shadow: var(--shadow-hover); } }

/* Dark bands stay navy (flat, no glass): journey band, navy sections and cards */
.glass, .journey-card, .page-hero .stat { -webkit-backdrop-filter: none; backdrop-filter: none; }
.glass .label, .stat.glass .label, .section-navy .stat .label, .band-journey .stat .label, .on-dark .stat .label { color: var(--mist); }
.glass .kicker, .stat.glass .kicker { color: var(--acn-sky); }
.page-hero .glass .label, .page-hero .stat.glass .label { color: var(--text-2); }
.page-hero .glass .kicker, .page-hero .stat.glass .kicker { color: var(--text-2); }
.journey-card .icon-tile, .band-journey .icon-tile, .section-navy .icon-tile, .card-navy .icon-tile, .icon-tile.solid { background: var(--acn-sky); color: var(--acn-navy); box-shadow: none; }
.btn-light:hover, .journey-card .btn:hover { background: var(--acn-sky-20); border-color: var(--acn-sky-20); }
.btn-outline-light { background: transparent; border-color: var(--acn-sky); -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn-outline-light:hover { background: var(--acn-navy-90); border-color: #fff; }
.journey-step::before { border-color: var(--acn-sky); }
.journey-step::after { background: rgba(164, 212, 242, .5); }
.journey-step.done::before { background: var(--acn-sky); border-color: var(--acn-sky); color: var(--acn-navy); }

/* Cut-corner signature (snip1Rect, top right) on filled, non-focusable tiles and bands. Never on controls or on a box that
   holds one: clip-path would clip their focus ring (WCAG 2.4.7 / 2.4.11 win over the template). */
.icon-tile, .card-icon, .acn-snip { clip-path: polygon(0 0, calc(100% - var(--snip-sm)) 0, 100% var(--snip-sm), 100% 100%, 0 100%); }
:is(.card-navy, .journey, .acn-snip.lg):not(a, button, [tabindex]):not(:has(a[href], button, input, select, textarea, summary, [tabindex])) { clip-path: polygon(0 0, calc(100% - var(--snip)) 0, 100% var(--snip), 100% 100%, 0 100%); }

/* Cards, services, partners: square, #BFBFBF line, navy hover line, flat at rest */
.service-card:hover { border-color: var(--primary); }
.card.link:hover, a.card:hover { border-color: var(--primary); }

/* Chips, tabs, accordions: selected = sky-40 fill + navy line + navy text + weight (never colour alone) */
.chip.active, .chip[aria-pressed="true"], .chip[aria-selected="true"] { font-weight: 600; }
.acc-head:hover { color: var(--primary); }
.acc-chev, .acc-head .chev { color: var(--primary); }
.checks li::before { border-radius: var(--radius-xs); }
.callout { border-left: 4px solid var(--acn-sky); }

/* Tables: the template's table format (navy header row, white semibold text; white cells, #D9D9D9 rules) */
.table th { background: var(--acn-navy); color: #fff; font-weight: 600; letter-spacing: .01em; }
.table th a, .table th button { color: #fff; }
.table tbody tr:hover { background: var(--acn-sky-20); }

/* Inputs: 1 px control line that passes 3:1 (WCAG 1.4.11), square-ish */
input[readonly] { background: var(--acn-grey-95); border-color: #767676; } /* 4.54:1 on white, 4.06:1 on the grey fill */

/* Announcement bar (navy) */
.announce, .announce p { color: #fff; }

/* Sign-in page (/login): the proposal cover. Light page, square card with the bar */
.login-body { background: var(--grad-cover); }
.login-card { position: relative; border-radius: 0; box-shadow: none; border: 1px solid var(--line-2); padding-top: 38px; }
.login-card::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: var(--rule); background: var(--acn-bar); }
.login-card h1 { color: var(--heading); }
.login-card label { color: var(--text-2); }
.login-card input { border-color: var(--line-ui); }

/* Focus: always visible and AA. Navy ring on light surfaces (12.12:1 on white, 11.08:1 on sky-20); sky ring on navy bands
   (7.67:1). Replaces the 1.41:1 ring. Never outline:none on a control. */
:is(.band-journey, .section-navy, .card-navy, .journey, .announce, .on-dark, .chat-head, .table thead, .acn-dark) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--focus-on-dark); }
/* The same 3 px ring on every other keyboard-focusable element (for example scroll containers that Chrome makes focusable
   without a tabindex). Zero specificity, so every rule above still wins. */
:where(*):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:is(.band-journey, .section-navy, .card-navy, .journey, .announce, .on-dark, .chat-head, .table thead, .acn-dark) :focus-visible { outline-color: var(--focus-on-dark); }
/* The hero is light now: on-dark helpers inside it (for example the carousel dots) take the navy ring */
.page-hero .on-dark :is(a, button, [tabindex]):focus-visible { outline-color: var(--focus); }
/* Phones: rows that scroll sideways clip anything drawn outside them, so the ring sits just inside the control there */
@media (max-width: 760px) { :is(.chips, .tabs, [data-carousel], .page-hero .stats) :focus-visible, :is(.chips, .tabs, [data-carousel], .page-hero .stats):focus-visible { outline-offset: -3px; } }

/* ==== Section menu: start ====
   The page's own <nav class="jump chips" aria-label="On this page"> (plain anchor links, the 9 content pages) stays
   on screen. From 1440 px it is a menu down the left side: the sections after it move right only as far as the menu
   needs (from about 1700 px they keep their full width), and the footer pushes it up at the end of the page (site.js;
   the footer also sits above it). Below 1440 px it is a
   bar of the same chips that sticks under the header and scrolls sideways. site.js adds html.jump-nav and .jump-sec
   (the nav's own section) and marks the current section's link aria-current="location"; without site.js the row
   stays where it is. Tokens only, no colours of its own. */
.jump.chips { margin-bottom: 0; }
html.jump-nav {
  --jump-top: calc(var(--header-h) + var(--nav-row-h, 0px) + 1px);          /* bottom of the sticky header (its 1 px line) */
  --jump-w: 224px;                                                           /* side menu width */
  --jump-gap: 32px;                                                          /* side menu to content */
  --jump-r: calc(var(--jump-w) + var(--jump-gap));
  --jump-cw: calc(var(--maxw) + 2 * var(--gutter));                          /* .container width */
  --jump-chip-h: 38px;
  --jump-bar-h: calc(var(--jump-chip-h) + 17px);                             /* chip + 8 px above and below + rule */
}
@media (max-width: 760px) { html.jump-nav { --jump-chip-h: 44px; } }
html.jump-nav .jump-sec nav.jump .chip:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
html.jump-nav .site-footer { position: relative; z-index: 41; }
/* Overview's sticky "Why it is different" column sticks below the header and the bar, not under them */
@media (min-width: 961px) and (max-width: 1439.98px) { html.jump-nav .why-grid > div:first-child { top: calc(var(--jump-top) + var(--jump-bar-h) + 24px); } }
@media (min-width: 1440px) { html.jump-nav .why-grid > div:first-child { top: calc(var(--jump-top) + 24px); } }

@media (min-width: 1440px) {
  html.jump-nav .jump-sec { position: sticky; top: var(--jump-top); z-index: 40; height: 0; margin: 0; padding: 0; border: 0; }
  html.jump-nav .jump-sec > .container { position: static; height: 0; padding: 0; }
  html.jump-nav .jump-sec nav.jump {
    position: absolute; top: 24px; left: calc(max(var(--jump-r), (100% - var(--jump-cw)) / 2) + var(--gutter) - var(--jump-r));
    width: var(--jump-w); max-height: calc(100vh - var(--jump-top) - 48px); overflow-y: auto; overscroll-behavior: contain;
    flex-direction: column; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 12px 8px 8px;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
  html.jump-nav .jump-sec nav.jump::before { content: attr(aria-label); content: attr(aria-label) / ""; flex: none; display: block; margin: 0 4px 6px; padding: 0 8px 10px;
    border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }
  html.jump-nav .jump-sec nav.jump .chip { width: 100%; min-height: 36px; padding: 7px 10px 7px 11px; border: 0; border-left: 3px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background-color: transparent; color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; white-space: normal; text-align: left; }
  html.jump-nav .jump-sec nav.jump .chip:hover { background-color: var(--primary-tint); color: var(--primary); }
  html.jump-nav .jump-sec nav.jump .chip[aria-current="location"] { border-left-color: var(--primary); background-color: var(--primary-tint); color: var(--primary-ink); font-weight: 700; }
  html.jump-nav .jump-sec nav.jump .chip:not([href^="#"]) { margin-top: 8px; padding-top: 11px; border-radius: 0; background-image: linear-gradient(var(--line), var(--line)); background-size: 100% 1px; background-position: top; background-repeat: no-repeat; }
  html.jump-nav .jump-sec nav.jump .chip:focus-visible { outline-offset: -3px; }
  html.jump-nav .jump-sec ~ section { padding-left: clamp(0px, calc(2 * var(--jump-r) + var(--jump-cw) - 100%), var(--jump-r)); }
  html.jump-nav .jump-sec ~ section .container { max-width: var(--jump-cw); }
}

@media (max-width: 1439.98px) {
  html.jump-nav:not(.pilot) { scroll-padding-top: calc(var(--jump-top) + var(--jump-bar-h) + 12px); }
  html.jump-nav .jump-sec { position: sticky; top: var(--jump-top); z-index: 40; margin: 0; padding: 0; background: var(--bg); border-bottom: 1px solid var(--line); }
  html.jump-nav .jump-sec nav.jump { flex-wrap: nowrap; align-items: center; gap: 8px; height: calc(var(--jump-bar-h) - 1px); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  html.jump-nav .jump-sec nav.jump::-webkit-scrollbar { display: none; }
  html.jump-nav .jump-sec nav.jump .chip { min-height: var(--jump-chip-h); scroll-margin-top: calc(-1 * (var(--jump-bar-h) + 12px)); }
  html.jump-nav .jump-sec nav.jump .chip[aria-current="location"] { background-color: var(--chip-active); border-color: var(--chip-active-line); color: var(--primary-ink); font-weight: 600; }
  /* Fade an edge only while more chips are hidden past it (the mask uses opacity only, not colour) */
  html.jump-nav .jump-sec nav.jump.jump-more-r { -webkit-mask-image: linear-gradient(90deg, var(--bg) calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, var(--bg) calc(100% - 40px), transparent); }
  html.jump-nav .jump-sec nav.jump.jump-more-l { -webkit-mask-image: linear-gradient(90deg, transparent, var(--bg) 40px); mask-image: linear-gradient(90deg, transparent, var(--bg) 40px); }
  html.jump-nav .jump-sec nav.jump.jump-more-l.jump-more-r { -webkit-mask-image: linear-gradient(90deg, transparent, var(--bg) 40px, var(--bg) calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, var(--bg) 40px, var(--bg) calc(100% - 40px), transparent); }
}
/* Short screens (landscape phones, high zoom): the bar stays in its place instead of sticking, so the page keeps its room */
@media (max-width: 1439.98px) and (max-height: 500px) {
  html.jump-nav .jump-sec { position: static; }
  html.jump-nav:not(.pilot) { scroll-padding-top: calc(var(--jump-top) + 12px); }
  html.jump-nav .jump-sec nav.jump .chip { scroll-margin-top: 0; }
  html.jump-nav .why-grid > div:first-child { top: calc(var(--jump-top) + 24px); }
}
/* ==== Section menu: end ==== */