/* EDII site shell + design system, 2026-10. Load after any Bootstrap CSS. Header/footer markup:
   tools/shell/*.htm via tools/apply-shell.js. 1 tokens · 2 base · 3 header · 4 footer · 5 grammar
   (body.site-page) · 6 .prose · 7 legacy skin · 8 responsive · 9 motion/print */

/* ============ 1. Fonts (self-hosted) + tokens ============ */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/edii/bricolage-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/edii/bricolage-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/edii/figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/edii/figtree-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/edii/spline-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/edii/spline-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
    --ink: #0B1B2E; --ink-2: #112741; --ink-3: #183459;
    --board: #1E56C8; --board-deep: #0C2650; --screen: var(--board-deep);
    --leaf: #7FB1FF; --chalk: #F5F7FB; --white: #FFFFFF;
    --yellow: #D9A733; --marker: #FFD97A; --redpen: #C24B33;
    --warn: #E58A76; --live: #3FBF7F; --wa: #0E7360;
    --t-ink: #182538; --t-mut: #5A6880; --t-chalk: #EAF0F9; --t-dim: #9DAFC9;
    --line-l: #DFE4EC; --line-d: rgba(234,240,249,.10);
    --wrap: 1200px; --r: 16px; --gut: 32px;
    --disp: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
    --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ============ 2. Base: every page ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { font-family: var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--disp); }
[id] { scroll-margin-top: 88px; }
:where(:focus-visible) { outline: 2px solid var(--board); outline-offset: 3px; }
.sr-only, .edii-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
a.skip { position: absolute; left: 16px; top: -80px; z-index: 1100; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 12px; font: 600 17px/1.65 var(--body); text-decoration: none; }
a.skip:focus { top: 12px; color: #fff; text-decoration: none; }

/* ============ 3. Header ============ scoped under .site-nav/.site-foot so page CSS cannot reach in;
   white at rest, 92% + blur once scrolled */
.site-nav { position: sticky; top: 0; z-index: 1030; height: 72px; margin: 0; padding: 0; background: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 160ms ease-out; color: var(--t-ink); font: 400 17px/1.65 var(--body); letter-spacing: normal; text-align: left; }
.site-nav.scrolled { background: rgba(255,255,255,.92); border-bottom-color: var(--line-l); }
.site-nav .site-nav-in { width: min(var(--wrap), 100% - 2 * var(--gut)); max-width: none; height: 72px; margin: 0 auto; padding: 0; display: flex; align-items: center; gap: 28px; }
:is(.site-nav, .site-foot) .site-brand, :is(.site-nav, .site-foot) .site-brand:hover { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; }
:is(.site-nav, .site-foot) .site-brand img { display: block; width: 36px; height: 36px; border-radius: 9px; }
:is(.site-nav, .site-foot) .site-brand b { font: 800 22px/1 var(--disp); letter-spacing: -.02em; }
.site-nav .site-links { display: flex; align-items: center; gap: 28px; margin: 0 0 0 12px; padding: 0; }
.site-nav .site-links > a, .site-nav .dd-btn, .site-nav .site-login { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0; font: 600 14.5px/1 var(--body); letter-spacing: normal; text-transform: none; color: var(--t-ink); background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; text-decoration: none; }
.site-nav .site-links > a:hover, .site-nav .dd-btn:hover, .site-nav .site-login:hover, .site-nav .dd.open .dd-btn, .site-nav .site-links > a[aria-current="page"], .site-nav .dd-btn.current { color: var(--board); text-decoration: none; }
.site-nav .dd { position: relative; }
.site-nav .dd-btn::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 160ms ease-out; }
.site-nav .dd.open .dd-btn::after { transform: translateY(1px) rotate(-135deg); }
.site-nav .dd-panel { display: none; position: absolute; top: calc(100% + 14px); left: -14px; width: 340px; margin: 0; background: #fff; border: 1px solid var(--line-l); border-radius: 16px; box-shadow: 0 12px 32px rgba(11,27,46,.14); padding: 8px; z-index: 50; }
.site-nav .dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.site-nav .dd.open .dd-panel { display: block; }
html:not(.dd-ready) .site-nav .dd:hover .dd-panel, html:not(.dd-ready) .site-nav .dd:focus-within .dd-panel { display: block; }
.site-nav .dd-panel a { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 8px 12px; border-radius: 10px; color: var(--t-ink); text-decoration: none; }
.site-nav .dd-panel a:hover, .site-nav .dd-panel a:focus-visible, .site-nav .dd-panel a[aria-current="page"] { background: var(--chalk); color: var(--t-ink); text-decoration: none; }
.site-nav .dd-ic { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--marker); color: var(--ink); font: 800 12.5px/30px var(--disp); text-align: center; flex: none; }
.site-nav .dd-panel b { display: block; font: 700 14.5px/1.2 var(--body); }
.site-nav .dd-panel small { display: block; font-size: 12px; line-height: 1.3; color: var(--t-mut); margin-top: 2px; }
.site-nav .site-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.site-nav .site-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin: 0; padding: 10px 18px; font: 600 14px/1.1 var(--body); letter-spacing: normal; white-space: nowrap; background: var(--board); color: #fff; border: 1.5px solid transparent; border-radius: 12px; cursor: pointer; text-decoration: none; transition: transform 160ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out; }
.site-nav .site-cta:hover { color: #fff; text-decoration: none; transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.site-nav :focus-visible, .site-foot :focus-visible, a.wa-float:focus-visible { outline: 2px solid var(--board); outline-offset: 3px; }
.site-nav .site-cta:focus-visible { outline-color: var(--ink); }
.site-nav .burger { display: none; position: relative; margin: 0; }
.site-nav .burger > summary { list-style: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid rgba(11,27,46,.18); border-radius: 12px; background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; cursor: pointer; }
.site-nav .burger > summary::-webkit-details-marker { display: none; }
.site-nav .burger > summary i { width: 20px; height: 2px; background: var(--ink); display: block; transition: transform 160ms ease-out, opacity 160ms ease-out; }
.site-nav .burger[open] > summary i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav .burger[open] > summary i:nth-child(2) { opacity: 0; }
.site-nav .burger[open] > summary i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.site-nav .burger-panel { position: fixed; top: 84px; left: 14px; right: 14px; max-height: calc(100vh - 100px); overflow: auto; margin: 0; background: var(--ink); border-radius: 18px; box-shadow: 0 12px 32px rgba(11,27,46,.14); padding: 10px; z-index: 60; }
.site-nav .burger-panel a { display: block; margin: 0; color: #fff; font: 700 17px/1.2 var(--body); padding: 13px 16px; border-radius: 12px; text-decoration: none; }
.site-nav .burger-panel a:hover, .site-nav .burger-panel a[aria-current="page"] { background: rgba(255,255,255,.12); color: var(--marker); text-decoration: none; }
.site-nav .burger-panel :focus-visible { outline-color: var(--leaf); }

/* ============ 4. Footer + WhatsApp float ============ */
.site-foot { background: var(--ink); color: var(--t-chalk); margin: 0; padding: 64px 0 104px; font: 400 17px/1.65 var(--body); letter-spacing: normal; text-align: left; }
.site-foot .site-foot-in { width: min(var(--wrap), 100% - 2 * var(--gut)); max-width: none; margin: 0 auto; padding: 0; }
.site-foot .site-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; margin: 0 0 40px; }
.site-foot .site-brand, .site-foot .site-brand:hover { display: flex; width: fit-content; color: #fff; }
.site-foot .site-foot-blurb { font-size: 15px; line-height: 1.65; color: var(--t-dim); margin: 16px 0; max-width: 32em; }
.site-foot .site-foot-contact { margin: 0; }
.site-foot .site-foot-contact a { color: #fff; font-weight: 600; display: inline-block; padding: 10px 0; text-decoration: none; }
.site-foot h3 { font: 600 13px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--t-dim); margin: 6px 0 8px; }
.site-foot ul { margin: 0; padding: 0; list-style: none; }
.site-foot li { margin: 0; padding: 0; }
.site-foot ul a { display: inline-block; padding: 11px 0; color: var(--t-chalk); font-size: 14.5px; line-height: 1.5; text-decoration: none; }
.site-foot .foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 0; font: 400 10.5px/1.6 var(--mono); color: rgba(255,255,255,.72); }
.site-foot .foot-legal a { color: inherit; display: inline-block; padding: 12px 0; text-decoration: none; }
.site-foot .foot-legal .copy { margin-right: auto; }
.site-foot .site-foot-contact a:hover, .site-foot ul:not(.askai-row) a:hover, .site-foot .foot-legal a:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.site-foot .site-foot-contact a:hover { color: #fff; }
.site-foot :focus-visible { outline-color: var(--leaf); }
a.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 1020; height: 56px; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 0 22px 0 18px; background: var(--wa); color: #fff; border-radius: 999px; font: 600 15px/1 var(--body); box-shadow: 0 12px 32px rgba(11,27,46,.2); transition: transform 160ms ease-out; text-decoration: none; }
a.wa-float:hover { color: #fff; text-decoration: none; transform: translateY(-1px); }
a.wa-float svg { width: 22px; height: 22px; fill: #fff; }
/* hidden over the page's first block and while the menu is open */
html.js:not(.past-hero) a.wa-float, html.menu-open a.wa-float, html:has(.burger[open]) a.wa-float { display: none; }

/* ============ 5. Page grammar: body.site-page only ============ */
.site-page { margin: 0; background: var(--white); color: var(--t-ink); font: 400 17px/1.65 var(--body); overflow-x: clip; }
:where(.site-page) img { display: block; max-width: 100%; height: auto; }
:where(.site-page) a { color: var(--board); text-decoration: none; }
:where(.site-page) a:hover { text-decoration: underline; text-underline-offset: 3px; }
:where(.site-page) p { margin: 0; text-wrap: pretty; }
:where(.site-page) ul { margin: 0; padding: 0; list-style: none; }
:where(.site-page) :is(h1, h2, h3) { margin: 0; color: var(--ink); text-wrap: balance; }
/* pages that still load Bootstrap 5.2 (blog posts, try-ai, re/unsubscribe): its .btn:focus-visible (0,2,0) sets outline:0
   and paints a ring + hover colours from --bs-btn-* vars. Restate our ring at the same specificity (later wins; the
   colour rules just below still apply) and give those vars our values. Pages without Bootstrap never read the vars. */
:where(.site-page) .btn:focus-visible { outline: 2px solid var(--board); outline-offset: 3px; }
:where(.site-page) .btn { --bs-btn-focus-box-shadow: none; }
:where(.site-page) .btn-hero { --bs-btn-focus-box-shadow: 5px 5px 0 var(--ink); }
:where(.site-page) .btn-card { --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: var(--line-l); --bs-btn-hover-color: var(--t-ink); }
:where(.site-page) .btn-hero:focus-visible, :where(.site-page) .btn-primary:focus-visible, :where(.site-page) .tile.accent:focus-visible { outline-color: var(--ink); }
:where(.site-page) .navy :focus-visible, :where(.site-page) .cta-card :focus-visible, :where(.site-page) .screen :focus-visible { outline-color: var(--leaf); }

/* layout + bands */
:where(.site-page) .wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
:where(.site-page) .band { padding: 80px 0; border-top: 1px solid var(--line-l); }
:where(.site-page) .band.chalk { background: var(--chalk); }
:where(.site-page) .band-head { margin-bottom: 36px; max-width: 720px; }

/* type */
:where(.site-page) .h1 { font-size: clamp(2.25rem, 4.9vw, 4.25rem); line-height: .95; letter-spacing: -.035em; font-weight: 800; }
:where(.site-page) .h2 { font-size: clamp(2.1rem, 4vw, 3.5rem); line-height: .98; letter-spacing: -.03em; font-weight: 800; max-width: 720px; }
:where(.site-page) .h-card { font-size: 24px; line-height: 1.1; letter-spacing: -.02em; font-weight: 700; }
:where(.site-page) .lead { font-size: 19px; line-height: 1.5; color: var(--t-mut); max-width: 30em; }
:where(.site-page) .lead b { color: var(--t-ink); font-weight: 700; }
:where(.site-page) .card-body { font-size: 15px; line-height: 1.55; color: var(--t-mut); }
:where(.site-page) .eyebrow { font: 500 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-mut); display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
:where(.site-page) .eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; }
:where(.site-page) .navy .eyebrow { color: var(--yellow); }
:where(.site-page) .pill { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--chalk); border: 1px solid var(--line-l); padding: 7px 14px; border-radius: 999px; margin: 0 0 26px; }
:where(.site-page) .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--board); }
mark.mk { display: inline-block; background: var(--marker); color: var(--ink); padding: 0 .18em; border-radius: 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:where(.site-page) .micro { font: 400 11px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t-mut); margin: 14px 0 0; }
:where(.site-page) .micro a { color: var(--t-ink); text-decoration: underline; text-underline-offset: 3px; }
:where(.site-page) :is(.navy, .cta-card) .micro { color: rgba(255,255,255,.62); }
:where(.site-page) :is(.navy, .cta-card) .micro a { color: #fff; }

/* buttons */
:where(.site-page) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; font: 600 16px/1.1 var(--body); padding: 14px 24px; border-radius: 12px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: transform 160ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out; }
:where(.site-page) .btn:hover { text-decoration: none; }
:where(.site-page) .btn-primary { background: var(--board); color: #fff; }
:where(.site-page) .btn-primary:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
:where(.site-page) .btn-hero { background: var(--board); color: #fff; border-color: var(--ink); box-shadow: 5px 5px 0 var(--ink); }
:where(.site-page) .btn-hero:hover { transform: translate(-1px,-1px); box-shadow: 7px 7px 0 var(--ink); }
:where(.site-page) .btn-hero svg { width: 18px; height: 18px; fill: #fff; flex: none; }
:where(.site-page) .btn-ghost { background: transparent; color: var(--t-ink); border-color: var(--ink); }
:where(.site-page) .btn-ghost:hover { background: var(--chalk); }
:where(.site-page) :is(.navy, .cta-card) .btn-ghost, :where(.site-page) .cta-card .btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
:where(.site-page) :is(.navy, .cta-card) .btn-ghost:hover, :where(.site-page) .cta-card .btn-light:hover { background: rgba(255,255,255,.08); }
:where(.site-page) .cta-card .btn-primary { background: var(--marker); color: var(--ink); }
:where(.site-page) .btn-card { background: #fff; color: var(--t-ink); border: 1.5px solid var(--line-l); padding: 12px 20px; font-size: 15px; align-self: flex-start; min-height: 44px; }
:where(.site-page) .btn-card:hover { border-color: var(--ink); background: var(--marker); transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
html.menu-open .btn-hero, html:has(.burger[open]) .btn-hero { box-shadow: none; }

/* flat cards */
:where(.site-page) .card { background: #fff; border: 1px solid var(--line-l); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 14px; transition: border-color 160ms ease-out, transform 160ms ease-out; }
:where(.site-page) .card:hover { border-color: var(--ink); transform: translateY(-2px); }
:where(.site-page) .band:not(.chalk) .card { background: var(--chalk); }
:where(.site-page) .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
:where(.site-page) .title-row { display: flex; align-items: center; gap: 12px; }

/* .screen chrome around real captures */
:where(.site-page) .screen { background: var(--screen); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 9px); color: var(--t-chalk); overflow: hidden; min-width: 0; }
:where(.site-page) .screen-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font: 500 10px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); border-bottom: 1px solid rgba(255,255,255,.08); }
:where(.site-page) .screen-bar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); flex: none; }
:where(.site-page) .screen-bar .tag { margin-left: auto; color: rgba(255,255,255,.6); text-transform: none; letter-spacing: .02em; }
:where(.site-page) .shot { padding: 12px; }
:where(.site-page) .shot-crop { height: 200px; overflow: hidden; border-radius: 6px; background: #fff; }
:where(.site-page) .shot-crop img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* hairline grid */
:where(.site-page) .hair { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-l); border: 1px solid var(--line-l); border-radius: 16px; overflow: hidden; }
:where(.site-page) .hair-3 { grid-template-columns: repeat(3, 1fr); }
:where(.site-page) .tile { background: #fff; padding: 24px; min-height: 140px; display: flex; flex-direction: column; }
:where(.site-page) .band:not(.chalk) .tile { background: var(--chalk); }
:where(.site-page) .tile .n { font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--t-mut); }
:where(.site-page) .tile h3 { font-size: 19px; line-height: 1.1; letter-spacing: -.02em; font-weight: 800; margin: 10px 0 8px; }
:where(.site-page) .tile .ex { font-size: 13.5px; color: var(--t-mut); line-height: 1.5; }
:where(.site-page) .tile.accent { background: var(--marker); color: var(--ink); justify-content: flex-end; }
:where(.site-page) .tile.accent .n { color: var(--ink); }
:where(.site-page) .tile.accent h3 { font-size: 22px; margin: 0; }
:where(.site-page) .tile.accent:hover { background: #FFE39A; text-decoration: none; }
:where(.site-page) .hair :focus-visible { outline-offset: -4px; }

/* navy band (max once a page) + band foot */
:where(.site-page) .navy { background: var(--ink); color: var(--t-chalk); border-top: 0; }
:where(.site-page) .navy .h2 { color: #fff; }
:where(.site-page) .band-foot { margin-top: 28px; font: 400 11px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t-mut); display: flex; flex-wrap: wrap; gap: 4px 22px; }
:where(.site-page) .band-foot a { color: var(--t-ink); padding: 12px 0; margin: -12px 0; }
:where(.site-page) .band-foot a b { font-weight: 500; }
:where(.site-page) .navy .band-foot { border-top: 1px solid var(--line-d); padding-top: 22px; color: var(--t-dim); }
:where(.site-page) .navy .band-foot a { color: #fff; }

/* inset CTA card (navy, radius 28) */
:where(.site-page) .cta-wrap { padding: 80px 0; border-top: 1px solid var(--line-l); }
:where(.site-page) .cta-card { position: relative; background: var(--ink); color: var(--t-chalk); border-radius: 28px; padding: 72px 56px; overflow: hidden; }
:where(.site-page) .cta-card::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 35px); pointer-events: none; }
:where(.site-page) .cta-card > * { position: relative; }
:where(.site-page) .cta-card h2 { font-size: clamp(2.2rem, 4.4vw, 3.75rem); line-height: .95; letter-spacing: -.035em; font-weight: 800; color: #fff; max-width: 720px; }
:where(.site-page) .cta-card h2 span { color: var(--yellow); }
:where(.site-page) .cta-sub { font-size: 18px; line-height: 1.55; color: var(--t-dim); max-width: 640px; margin: 20px 0 0; }
:where(.site-page) .cta-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 32px; }
:where(.site-page) .cta-btns .micro { margin: 0; }

/* ============ 6. Long-form: <article class="prose"> ============ */
:where(.site-page) .prose { max-width: 760px; margin-inline: auto; font-size: 17px; line-height: 1.7; color: var(--t-ink); }
:where(.site-page) .prose :is(h2, h3) { margin: 2em 0 .6em; letter-spacing: -.02em; line-height: 1.15; font-weight: 800; }
:where(.site-page) .prose h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
:where(.site-page) .prose h3 { font-size: 1.3rem; font-weight: 700; }
:where(.site-page) .prose :is(p, ul, ol, table, blockquote, figure) { margin: 0 0 1.15em; }
:where(.site-page) .prose :is(ul, ol) { padding-left: 1.4em; list-style: revert; }
:where(.site-page) .prose li { margin: 0 0 .45em; }
:where(.site-page) .prose a { text-decoration: underline; text-underline-offset: 3px; }
:where(.site-page) .prose img { border-radius: 12px; border: 1px solid var(--line-l); }
:where(.site-page) .prose blockquote { border-left: 3px solid var(--marker); padding: 4px 0 4px 18px; color: var(--t-mut); }
:where(.site-page) .prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
:where(.site-page) .prose :is(th, td) { border-bottom: 1px solid var(--line-l); padding: 10px 12px; text-align: left; vertical-align: top; }
:where(.site-page) .prose th { font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t-mut); }
:where(.site-page) .prose code { font: 400 .9em var(--mono); background: var(--chalk); padding: .1em .35em; border-radius: 6px; }

/* ============ 7. Legacy skin (pages without .site-page) ============ Bootstrap 5.2 + old --edii-* tokens
   mapped onto ours: colour, radius, type only */
:root {
    --bs-primary: #1E56C8; --bs-primary-rgb: 30, 86, 200;
    --bs-dark-rgb: 11, 27, 46; --bs-light-rgb: 245, 247, 251;
    --bs-link-color: #1E56C8; --bs-link-hover-color: #0C2650;
    --bs-body-font-family: var(--body); --bs-font-sans-serif: var(--body); --bs-body-color: #182538;
    --bs-border-color: #DFE4EC; --bs-border-radius: 12px; --bs-border-radius-lg: 16px; --bs-border-radius-xl: 16px;
    --edii-primary: var(--board); --edii-primary-dark: var(--board-deep); --edii-primary-light: var(--leaf);
    --edii-primary-subtle: var(--chalk); --edii-primary-rgb: 30, 86, 200; --edii-accent: var(--leaf);
    --edii-gradient-primary: var(--board); --edii-dark: var(--ink); --edii-light: var(--chalk); --edii-secondary: var(--t-mut);
    --edii-font-sans-serif: var(--body); --edii-heading-font: var(--disp); --edii-body: var(--body); --edii-disp: var(--disp); --edii-mono: var(--mono);
    --edii-border-radius: 12px; --edii-border-radius-lg: 16px; --edii-border-radius-xl: 28px;
    --edii-shadow-sm: none; --edii-shadow: 0 0 0 1px var(--line-l); --edii-shadow-lg: 0 12px 32px rgba(11,27,46,.14);
}
:where(body:not(.site-page)) .btn { --bs-btn-font-family: var(--body); --bs-btn-font-weight: 600; --bs-btn-border-radius: 12px; }
:where(body:not(.site-page)) :is(.btn-lg, .btn-sm) { --bs-btn-border-radius: 12px; }
:where(body:not(.site-page)) :is(.btn.rounded-pill, .btn-rounded) { border-radius: 12px !important; }
:where(body:not(.site-page)) .btn-primary { --bs-btn-bg: var(--board); --bs-btn-border-color: var(--board); --bs-btn-hover-bg: var(--board); --bs-btn-hover-border-color: var(--ink); --bs-btn-active-bg: var(--board-deep); --bs-btn-active-border-color: var(--board-deep); background: var(--board); border-color: var(--board); color: #fff; }
:where(body:not(.site-page)) .btn-primary:hover { background: var(--board); color: #fff; transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
:where(body:not(.site-page)) .btn-outline-primary { --bs-btn-color: var(--board); --bs-btn-border-color: var(--board); --bs-btn-hover-bg: var(--board); --bs-btn-hover-border-color: var(--board); --bs-btn-active-bg: var(--board-deep); }
:where(body:not(.site-page)) .btn-dark { --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-hover-bg: var(--ink-2); }
:where(body:not(.site-page)) .btn-light { --bs-btn-color: var(--ink); --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-hover-bg: var(--chalk); }
:where(body:not(.site-page)) .text-muted { color: var(--t-mut) !important; }
:where(body:not(.site-page)) .lead { font-weight: 400; }
:where(body:not(.site-page)) :is(.display-1, .display-2, .display-3, .display-4, .display-5, .display-6) { font-family: var(--disp); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
:where(body:not(.site-page)) .badge { --bs-badge-font-weight: 600; --bs-badge-border-radius: 999px; font-family: var(--body); }
:where(body:not(.site-page)) .card { --bs-card-border-color: var(--line-l); --bs-card-border-radius: 16px; --bs-card-inner-border-radius: 15px; border: 1px solid var(--line-l); border-radius: 16px; box-shadow: none; }
/* gradient text -> the marker (reads on light and dark) */
:where(body:not(.site-page)) :is([class*="text-gradient"], .gradient-text) { background: var(--marker); color: var(--ink); -webkit-text-fill-color: var(--ink); -webkit-background-clip: border-box; background-clip: border-box; padding: 0 .18em; border-radius: 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ============ 8. Responsive ============ */
@media (max-width: 1390px) { :where(.site-page) .lead { font-size: 18px; } }
@media (max-width: 1080px) {
    .site-foot .site-foot-grid { grid-template-columns: 1fr 1fr; }
    .site-nav .site-links { gap: 22px; margin-left: 0; }
}
@media (min-width: 901px) and (max-width: 1080px) { :where(.site-page) .pill { letter-spacing: .06em; } }
@media (max-width: 900px) {
    .site-nav .site-links, .site-nav .site-login { display: none; }
    .site-nav .burger { display: block; }
    .site-nav .site-nav-in { gap: 16px; }
    .site-nav .site-right { gap: 12px; }
    :where(.site-page) .hair:not(.hair-3) { grid-template-columns: 1fr 1fr; }
    :where(.site-page) .card { padding: 18px; }
    :where(.site-page) .cta-card { padding: 56px 32px; }
    :where(.site-page) :is(.band, .cta-wrap) { padding: 56px 0; }
}
@media (max-width: 768px) {
    :root { --gut: 20px; }
    html:not(.js) a.wa-float { display: none; }
}
@media (max-width: 700px) { :where(.site-page) .h2 { font-size: 34px; } }
@media (max-width: 640px) {
    :where(.site-page) :is(.card-grid, .hair-3) { grid-template-columns: 1fr; }
    :where(.site-page) .shot-crop { height: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) {
    :root { --gut: 16px; }
    :where(.site-page) .pill { font-size: 10px; letter-spacing: .06em; padding: 6px 10px; gap: 8px; white-space: nowrap; }
    .site-nav .site-cta { padding: 10px 14px; }
    :where(.site-page) :is(.hair, .hair:not(.hair-3), .hair-3) { grid-template-columns: 1fr; }
    .site-foot .site-foot-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
    .site-foot .site-foot-grid > :first-child { grid-column: 1 / -1; }
    :where(.site-page) .band-foot { letter-spacing: .04em; flex-direction: column; gap: 6px; }
    :where(.site-page) .cta-card { padding: 44px 20px; border-radius: 20px; }
    :where(.site-page) .cta-btns .btn { width: 100%; }
    a.wa-float { right: 16px; bottom: 16px; }
}
@media (max-width: 379px) {
    :where(.site-page) .pill { white-space: normal; max-width: 100%; font-size: clamp(9px, 2.85vw, 10px); letter-spacing: .02em; }
    :where(.site-page) .h1 { font-size: min(2.25rem, 10.5vw); }
}

/* ============ 9. Motion + print ============ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* print: no header, float or footer link grid; the legal line prints as ink on white; dark blocks keep their
   background even with "Background graphics" off, or their light text would print white on white */
@media print {
    a.skip, .site-nav, a.wa-float, .site-foot-grid { display: none !important; }
    .site-foot { background: none; color: var(--t-ink); padding: 16px 0 0; border-top: 1px solid var(--line-l); }
    .site-foot .foot-legal { color: var(--t-mut); }
    :where(.site-page) :is(.navy, .cta-card, .screen) { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}