/* ==========================================================================
   bMember: bmember.css. Site components on top of showpiece.css (tokens §1).
   Design: Docs/Design/phase-2-design-showpiece.md (Checkpoint 2 v2).
   Desktop breakpoint (BP) = 1024px, the same as site-motion.js.
   Scene layouts are keyed to .js-gsap; the first screen never is.
   ========================================================================== */

/* ---- fonts: site families (≤ 4 files on first load) ---- */
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url("/assets/fonts/poppins/poppins-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-weight:500;font-style:italic;font-display:swap;src:url("/assets/fonts/fraunces/fraunces-latin-500-italic.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:400;font-style:normal;font-display:swap;src:url("/assets/fonts/manrope/manrope-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:600 700;font-style:normal;font-display:swap;src:url("/assets/fonts/manrope/manrope-latin-600-normal.woff2") format("woff2")}
/* demo brand faces: downloaded only when a demo theme is used (or warmed on chip hover/focus by site.js) */
@font-face{font-family:"Outfit";font-weight:700;font-display:swap;src:url("/assets/fonts/outfit/outfit-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"DM Serif Display";font-weight:400 700;font-display:swap;src:url("/assets/fonts/dm-serif-display/dm-serif-display-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url("/assets/fonts/space-grotesk/space-grotesk-latin-700-normal.woff2") format("woff2")}
/* size-adjusted fallback so the swap to a demo face doesn't jump */
@font-face{font-family:"Demo Fallback";src:local("Arial");size-adjust:104%}

/* ---- demo association themes: [data-theme] on <html> (takeover, gallery) or on any element (panels, brand layer).
        Every role is redeclared, including --sp-bg/--sp-fg, because inherited custom properties are already resolved. ---- */
[data-theme="a"]{ /* Kalahari Vet Circle: teal */
  --sp-ink:#08201F; --sp-paper:#F3F8F7; --sp-surface:#E2EFED; --sp-stage:#0B3B3A;
  --sp-accent:#0F766E; --sp-accent-2:#0B5E58; --sp-accent-text:#0F766E; --sp-accent-dark:#5EEAD4; --sp-on-accent-dark:var(--sp-stage);
  --sp-ink-muted:#3F5553; --sp-paper-muted:#A7CBC7; --sp-glass:rgb(243 248 247 / .62);
  --sp-font-display:"Outfit","Demo Fallback",sans-serif; --sp-display-weight:700;
  --sp-bg:var(--sp-paper); --sp-fg:var(--sp-ink);
}
[data-theme="b"]{ /* Free State Dental Guild: burgundy */
  --sp-ink:#2A0A16; --sp-paper:#FBF5F6; --sp-surface:#F4E4E8; --sp-stage:#3A0D1E;
  --sp-accent:#9F1239; --sp-accent-2:#7F0E2D; --sp-accent-text:#9F1239; --sp-accent-dark:#FDA4AF; --sp-on-accent-dark:var(--sp-stage);
  --sp-ink-muted:#5E4650; --sp-paper-muted:#DDB8C3; --sp-glass:rgb(251 245 246 / .62);
  --sp-font-display:"DM Serif Display","Demo Fallback",serif; --sp-display-weight:400;
  --sp-bg:var(--sp-paper); --sp-fg:var(--sp-ink);
}
[data-theme="c"]{ /* Highveld Engineers Society: ochre */
  --sp-ink:#21180A; --sp-paper:#FBF8F1; --sp-surface:#F2EAD8; --sp-stage:#2A1D06;
  --sp-accent:#A16207; --sp-accent-2:#854D06; --sp-accent-text:#A16207; --sp-accent-dark:#FCD34D; --sp-on-accent-dark:var(--sp-stage);
  --sp-ink-muted:#5A4E3A; --sp-paper-muted:#D6C7A6; --sp-glass:rgb(251 248 241 / .62);
  --sp-font-display:"Space Grotesk","Demo Fallback",sans-serif; --sp-display-weight:700;
  --sp-bg:var(--sp-paper); --sp-fg:var(--sp-ink);
}
.sp-band--dark,[data-theme].sp-band--dark{ --sp-bg:var(--sp-stage); --sp-fg:var(--sp-paper); --sp-accent-text:var(--sp-accent-dark); --sp-ink-muted:var(--sp-paper-muted); --sp-line:var(--sp-line-on-dark); --sp-glass:rgb(0 0 0 / .35); --sp-focus:var(--sp-fg); }
.sp-band--surface{ --sp-bg:var(--sp-surface); }

/* colours follow a theme change smoothly (transitions are killed under reduced motion by showpiece.css §19) */
.sp-band,.hdr,.sp-btn,.site-foot{ transition-property:background-color,color,border-color; transition-duration:.45s; transition-timing-function:var(--sp-ease-ui); }

/* WhatsApp module panel takes the site tokens; trigger stays WhatsApp green */
.wa-widget{ --wa-panel-header-bg:var(--sp-stage); --wa-panel-header-fg:#fff; --wa-body-bg:var(--sp-surface); --wa-bubble-bg:#fff; --wa-bubble-fg:var(--sp-ink); --wa-cta-bg:var(--sp-accent); --wa-cta-fg:#fff; --wa-focus:var(--sp-ink); --wa-radius:var(--sp-r-md); --wa-font:var(--sp-font-text); }
:root.has-takeover .wa-widget{ bottom:calc(20px + env(safe-area-inset-bottom)); }

/* ---- base ---- */
html{ scroll-padding-top:calc(var(--sp-pin-top) + 16px); }
body{ overflow-x:clip; }
a{ color:inherit; text-underline-offset:3px; }
p{ margin:0 0 1em; }
h1,h2,h3,h4{ margin:0; }
.icon{ width:22px; height:22px; flex:none; }
.icon--sm{ width:16px; height:16px; }
.skip-link{ position:absolute; left:16px; top:-80px; z-index:100; padding:12px 18px; border-radius:var(--sp-r-sm); background:var(--sp-ink); color:var(--sp-paper); font-weight:600; }
.skip-link:focus{ top:12px; }
.sp-label{ font-family:var(--sp-font-text); font-weight:700; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; margin:0 0 1.2rem; font:700 var(--sp-fs-label)/1.3 var(--sp-font-text); letter-spacing:.12em; text-transform:uppercase; color:var(--sp-ink-muted); }
.eyebrow::before{ content:""; width:10px; height:10px; border-radius:3px; background:var(--sp-accent); flex:none; }
.sp-band--dark .eyebrow::before{ background:var(--sp-accent-dark); }
.sp-h2 .accent,.sp-display .accent{ font-family:var(--sp-font-accent); font-style:italic; font-weight:500; font-size:1.04em; letter-spacing:-.02em; color:var(--sp-accent-text); }
.lede{ font-size:var(--sp-fs-lede); line-height:1.35; max-width:40ch; color:var(--sp-ink-muted); }
.section-head{ display:grid; gap:1rem; max-width:62rem; margin-bottom:clamp(2rem,4vw,4rem); }
.section-head p{ max-width:56ch; color:var(--sp-ink-muted); font-size:var(--sp-fs-lede); line-height:1.4; margin:0; }

/* buttons: on dark bands the primary uses the light accent with stage text (≥ 3:1 against the stage) */
.sp-btn{ font-family:var(--sp-font-text); text-transform:none; letter-spacing:0; font-size:1rem; font-weight:700; min-height:48px; padding:.85em 1.5em; }
.sp-band--dark .sp-btn:not(.sp-btn--ghost){ background:var(--sp-accent-dark); color:var(--sp-on-accent-dark); }
.sp-band--dark .sp-btn:not(.sp-btn--ghost):hover,.sp-band--dark .sp-btn:not(.sp-btn--ghost):focus-visible{ background:var(--sp-paper); color:var(--sp-stage); }
.sp-btn--ghost{ border-color:currentColor; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }
.text-link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; text-decoration:none; color:var(--sp-accent-text); }
.text-link .icon{ width:18px; height:18px; transition:transform var(--sp-dur-xs) var(--sp-ease-ui); }
.text-link:hover .icon,.text-link:focus-visible .icon{ transform:translateX(4px); }

/* ==========================================================================
   Header: SP-HDR-GLASS, plus the takeover strip
   ========================================================================== */
.hdr{ font-family:var(--sp-font-text); }
.hdr__logo{ display:flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; color:var(--sp-fg); }
.hdr__logo img{ width:128px; height:auto; }
.hdr__brand{ display:none; align-items:center; gap:10px; width:clamp(150px,16vw,260px); font:var(--sp-display-weight) 1.05rem/1.1 var(--sp-font-display); white-space:nowrap; overflow:hidden; }
.hdr__brand > span:last-child{ overflow:hidden; text-overflow:ellipsis; }
.hdr__mark{ display:grid; place-items:center; width:46px; height:38px; padding:0; border-radius:10px; background:var(--sp-stage); color:#fff; font:700 .75rem/1 var(--sp-font-text); position:relative; }
.hdr__mark::after{ content:""; position:absolute; right:-3px; bottom:-3px; width:10px; height:10px; border-radius:3px; background:var(--sp-accent); box-shadow:0 0 0 2px var(--sp-bg); }
.hdr__nav{ display:flex; align-items:center; gap:clamp(12px,2vw,28px); }
.hdr__list{ display:flex; gap:2px; list-style:none; margin:0; padding:0; }
.hdr__link{ display:block; padding:10px 12px; border-radius:var(--sp-r-sm); font-weight:600; font-size:.95rem; text-decoration:none; color:var(--sp-fg); }
.hdr__link:hover,.hdr__link:focus-visible,.hdr__link[aria-current="page"]{ background:var(--sp-surface); }
.hdr__actions{ display:flex; gap:8px; align-items:center; }
.hdr .sp-btn{ min-height:44px; padding:.6em 1.2em; font-size:.95rem; }
.hdr__login{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px; font-weight:600; font-size:.95rem; text-decoration:none; color:var(--sp-fg); border-radius:var(--sp-r-sm); }
.hdr__login:hover,.hdr__login:focus-visible{ background:var(--sp-surface); }
.hdr__toggle{ display:none; width:44px; height:44px; border:1px solid var(--sp-line); border-radius:var(--sp-r-sm); background:transparent; color:var(--sp-fg); cursor:pointer; place-items:center; }
.hdr__toggle .icon-close{ display:none; }
.hdr__toggle[aria-expanded="true"] .icon-open{ display:none; }
.hdr__toggle[aria-expanded="true"] .icon-close{ display:block; }

/* takeover strip: sits under the header bar while a demo association is shown */
.strip{ position:fixed; z-index:39; left:50%; top:calc(var(--sp-pin-top) + 8px); translate:-50% 0; display:none; align-items:center; gap:10px; padding:6px 6px 6px 16px; border-radius:var(--sp-r-pill); background:var(--sp-ink); color:var(--sp-paper); font:600 .875rem/1.2 var(--sp-font-text); box-shadow:0 10px 30px -10px rgb(0 0 0 / .4); }
:root.has-takeover .strip{ display:flex; }
.strip{ transition:transform var(--sp-dur-sm) var(--sp-ease-ui); }
.hdr.is-hidden ~ .strip{ transform:translateY(calc(-100% - var(--sp-pin-top) - 16px)); }
.hdr.is-hidden ~ .strip:focus-within{ transform:none; }
.strip.is-entering{ animation:strip-in var(--sp-dur-sm) var(--sp-ease-out) both; }
@keyframes strip-in{ from{ transform:translateY(-140%); opacity:0; } }
.strip__back{ min-height:36px; padding:0 14px; border:0; border-radius:var(--sp-r-pill); background:var(--sp-paper); color:var(--sp-ink); font:700 .875rem/1 var(--sp-font-text); cursor:pointer; }
.strip__back:hover,.strip__back:focus-visible{ background:var(--sp-accent-dark); }

/* takeover curtain: a diagonal panel moved with transform only (CSS transition, works without GSAP) */
.curtain{ position:fixed; inset:-20vh -40vw; z-index:90; pointer-events:none; background:var(--curtain, var(--sp-stage)); transform:translateX(-120%) skewX(-14deg); visibility:hidden; }
.curtain.is-covering{ visibility:visible; transform:translateX(0) skewX(-14deg); transition:transform .36s cubic-bezier(.65,.05,.36,1); }
.curtain.is-clearing{ visibility:visible; transform:translateX(120%) skewX(-14deg); transition:transform .36s cubic-bezier(.65,.05,.36,1); }
.curtain.is-fade{ inset:0; transform:none; opacity:0; visibility:visible; transition:opacity .125s linear; }
.curtain.is-fade.is-covering{ opacity:1; }

/* page progress rail on the right (SP-RAIL) */
.sp-rail--page{ left:auto; right:clamp(8px,1vw,16px); width:4px; }

/* ==========================================================================
   Home hero: SP-TYPE-MIX + SP-UI-DEMO + brand chips (first screen keyed to nothing but CSS)
   ========================================================================== */
.hero{ padding:calc(var(--sp-pin-top) + clamp(32px,6vw,80px)) 0 clamp(56px,8vw,120px); }
.hero__grid{ display:grid; gap:clamp(32px,5vw,72px); align-items:center; }
.hero__title{ font:var(--sp-display-weight) clamp(2.75rem, 1.2rem + 4.4vw, 6.5rem)/.94 var(--sp-font-display); letter-spacing:-.03em; text-wrap:balance; color:var(--sp-fg); margin:0 0 1.5rem; }
.hero__title .sp-mix__accent{ display:inline; color:var(--sp-accent-dark); font-weight:500; }
:root.has-takeover .hero__title .sp-mix__accent{ font-family:var(--sp-font-display); font-style:normal; font-weight:var(--sp-display-weight); font-size:1em; letter-spacing:-.02em; }
.hero__sub{ font-size:var(--sp-fs-lede); line-height:1.4; max-width:34ch; color:var(--sp-paper-muted); margin-bottom:1.75rem; }
.chips{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 2rem; padding:0; border:0; }
.chips__label{ font-weight:700; font-size:.95rem; margin-right:4px; }
.chip{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:6px 16px 6px 8px; border:1px solid var(--sp-line); border-radius:var(--sp-r-pill); background:transparent; color:var(--sp-fg); font:600 .95rem/1.2 var(--sp-font-text); cursor:pointer; }
.chip:hover,.chip:focus-visible{ border-color:currentColor; }
.chip[aria-pressed="true"]{ background:var(--sp-fg); color:var(--sp-bg); border-color:var(--sp-fg); }
.chip__dot{ width:26px; height:26px; border-radius:8px; flex:none; box-shadow:inset 0 0 0 2px rgb(255 255 255 / .5); }
.chip__dot--a{ background:#0F766E; } .chip__dot--b{ background:#9F1239; } .chip__dot--c{ background:#A16207; } .chip__dot--bm{ background:#002B64; }
.hero__visual{ position:relative; }
.hero__visual .ui{ max-width:560px; margin-inline:auto; }
.sp-band--dark .ui{ box-shadow:0 40px 80px -30px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .22), 0 0 0 8px rgb(255 255 255 / .06); }
.hero__tag{ position:absolute; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; background:#fff; color:#0B1730; box-shadow:0 18px 40px -16px rgb(0 0 0 / .5); font:700 .8rem/1.2 var(--sp-font-text); }
.hero__tag .icon{ width:18px; height:18px; color:var(--sp-accent); }
.hero__tag--a{ left:-6px; bottom:-14px; } .hero__tag--b{ right:-6px; top:34%; }
@media (min-width:1024px){
  .hero{ min-height:100svh; display:grid; align-items:center; }
  .hero__grid{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
  .hero__tag--a{ left:-28px; } .hero__tag--b{ right:-18px; }
}

/* ==========================================================================
   Product UI mocks: modelled on bMember Health's real app shell (bMember-Health
   App-Areas.css / Core\Pages\Dashboard) and /crm-css-design-system: neutral ramp,
   hairline borders, 8/10/12px radii, one accent (the theme's) on actions only,
   tabular figures, semibold not black. aria-hidden; any [data-theme] ancestor re-skins.
   ========================================================================== */
.ui,.xp__plate{
  --u-0:#FFFFFF; --u-50:#F8FAFC; --u-100:#F1F4F8; --u-200:#E4E8EF; --u-300:#CBD3DF;
  --u-500:#5F6B7D; --u-600:#4A5568; --u-900:#0F1B2D; --u-line:rgb(15 27 45 / .10);
  --u-acc:var(--sp-accent); --u-on-acc:#FFFFFF;
  font:400 12.5px/1.4 var(--sp-font-text); color:var(--u-900); text-align:left;
}
.ui span,.xp__plate span{ display:block; }
.ui{ display:grid!important; grid-template-columns:52px minmax(0,1fr); width:100%; background:var(--u-0); border-radius:14px; overflow:hidden; user-select:none;
  box-shadow:0 1px 2px rgb(15 27 45 / .06), 0 24px 60px -24px rgb(0 20 50 / .45), 0 0 0 1px var(--u-line); }
.ui__ico{ width:15px; height:15px; }
/* icon rail (Health: light sidebar, hairline right border, neutral current item) */
.ui__rail{ display:flex!important; flex-direction:column; align-items:center; gap:6px; padding:10px 0; background:var(--u-50); border-right:1px solid var(--u-line); }
.ui__app{ display:grid!important; place-items:center; width:30px; height:30px; margin-bottom:6px; border-radius:8px; background:var(--u-900); color:#fff; font:700 14px/1 var(--sp-font-text); position:relative; }
.ui__app::after{ content:""; position:absolute; right:-2px; bottom:-2px; width:8px; height:8px; border-radius:2px; background:#E31825; box-shadow:0 0 0 2px var(--u-50); }
.ui__nav{ display:grid!important; place-items:center; width:32px; height:32px; border-radius:8px; color:var(--u-500); }
.ui__nav.is-on{ background:var(--u-200); color:var(--u-900); }
.ui__pane{ display:grid!important; grid-template-rows:auto 1fr; min-width:0; }
/* topbar with the organisation switcher (Health .bsd-switch__button) */
.ui__top{ display:flex!important; align-items:center; gap:8px; height:48px; padding:0 12px; border-bottom:1px solid var(--u-line); background:var(--u-0); }
.ui__switch{ display:inline-flex!important; align-items:center; gap:8px; height:34px; padding:0 8px 0 4px; min-width:0; border:1px solid var(--u-line); border-radius:8px; background:var(--u-0); }
.ui__mono{ display:grid!important; place-items:center; flex:none; min-width:24px; height:24px; padding:0 4px; border-radius:6px; background:var(--u-acc); color:var(--u-on-acc); font:700 9px/1 var(--sp-font-text); letter-spacing:.02em; }
.ui__switch-txt{ min-width:0; }
.ui__lead{ font-size:10px; line-height:1.1; color:var(--u-500); }
.ui__org{ font:var(--sp-display-weight) 12.5px/1.2 var(--sp-font-display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:17ch; }
.ui__chev{ width:12px; height:12px; flex:none; color:var(--u-500); transform:rotate(90deg); }
.ui__search{ display:inline-flex!important; align-items:center; gap:6px; margin-left:auto; height:28px; padding:0 10px; border-radius:8px; background:var(--u-100); color:var(--u-500); font-size:11.5px; }
.ui__avatar{ display:grid!important; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; background:var(--u-200); color:var(--u-600); font:700 10px/1 var(--sp-font-text); }
/* page body */
.ui__main{ display:grid!important; gap:12px; padding:14px; align-content:start; background:var(--u-0); }
.ui__hello{ display:flex!important; align-items:center; justify-content:space-between; gap:8px; }
.ui__h{ font:600 15px/1.2 var(--sp-font-text); letter-spacing:-.015em; }
.ui__chip{ display:inline-flex!important; align-items:center; height:22px; padding:0 9px; border-radius:999px; border:1px solid var(--u-line); background:var(--u-100); color:var(--u-600); font:600 10.5px/1 var(--sp-font-text); white-space:nowrap; }
/* KPI tiles (Health .bsd-area-kpi) */
.ui__kpis{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ui__kpis--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.ui__kpi{ padding:10px 12px; border:1px solid var(--u-line); border-radius:10px; background:var(--u-0); min-width:0; }
.ui__kpi-l{ font-size:11px; color:var(--u-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui__kpi-v{ display:block; margin-top:2px; font:600 20px/1.15 var(--sp-font-text); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.ui__kpi-n{ margin-top:2px; font-size:10.5px; color:var(--u-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui__bar{ height:6px; margin:6px 0 4px; border-radius:3px; background:var(--u-100); overflow:hidden; }
.ui__bar i{ display:block; width:64%; height:100%; border-radius:3px; background:var(--u-acc); }
/* panel with list rows (Health .bsd-panel / .bsd-list) */
.ui__panel{ border:1px solid var(--u-line); border-radius:12px; overflow:hidden; background:var(--u-0); }
.ui__panel-h{ padding:9px 12px; border-bottom:1px solid var(--u-line); background:var(--u-50); font:600 11.5px/1.2 var(--sp-font-text); color:var(--u-600); }
.ui__row{ display:flex!important; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--u-line); }
.ui__row:last-child{ border-bottom:0; }
.ui__row-ic{ display:grid!important; place-items:center; flex:none; width:26px; height:26px; border-radius:7px; background:var(--u-100); color:var(--u-600); }
.ui__row-ic .ui__ico{ width:14px; height:14px; }
.ui__row-txt{ flex:1; min-width:0; }
.ui__row-main{ font-weight:600; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui__row-meta{ font-size:10.5px; color:var(--u-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui__btn{ display:inline-flex!important; align-items:center; flex:none; height:26px; padding:0 10px; border-radius:7px; background:var(--u-acc); color:var(--u-on-acc); font:600 11px/1 var(--sp-font-text); }
.ui__badge{ display:inline-flex!important; align-items:center; flex:none; height:20px; padding:0 8px; border-radius:999px; background:var(--u-100); color:var(--u-600); font:600 10.5px/1 var(--sp-font-text); }
.ui__badge--ok{ background:#ECFDF5; color:#047857; }
.ui__badge--warn{ background:#FFFBEB; color:#92400E; }
.ui__badge--info{ background:#EFF6FF; color:#1D4ED8; }
@media (max-width:520px){
  .ui{ grid-template-columns:minmax(0,1fr); }
  .ui__rail,.ui__search{ display:none!important; }
  .ui__kpis--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ==========================================================================
   Brand gallery: SP-PIN-HSCROLL. Phones/RM: swipe row (scroll-snap inside the component)
   ========================================================================== */
.gallery__head{ margin-bottom:clamp(1.5rem,3vw,3rem); }
.gallery .sp-hscroll__track{ display:flex; gap:var(--sp-gap); overflow-x:auto; scroll-snap-type:x mandatory; padding:4px var(--sp-margin) 24px; margin-inline:calc(-1 * var(--sp-margin)); scrollbar-width:none; }
.gallery .sp-hscroll__track::-webkit-scrollbar{ display:none; }
.gallery .sp-hscroll__item{ flex:none; width:min(84vw,520px); scroll-snap-align:center; margin:0; }
.gallery__panel{ margin:0; padding:clamp(16px,2vw,28px); border-radius:var(--sp-r-lg); background:var(--sp-surface); }
.gallery__cap{ margin-top:1rem; }
.gallery__name{ font:var(--sp-display-weight) var(--sp-fs-h3)/1.05 var(--sp-font-display); color:var(--sp-ink); }
.gallery__note{ font-size:.95rem; color:var(--sp-ink-muted); margin:.4rem 0 0; }
.gallery__demo{ display:inline-block; margin-top:.5rem; font:700 .75rem/1 var(--sp-font-text); letter-spacing:.08em; text-transform:uppercase; color:var(--sp-ink-muted); }
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  :root.js-gsap:not([data-motion="off"]) .gallery.sp-hscroll{ display:flex; flex-direction:column; justify-content:safe center; padding-block:clamp(16px,3vh,32px); }
  :root.js-gsap:not([data-motion="off"]) .gallery .sp-hscroll__track{ overflow:visible; scroll-snap-type:none; margin:0; padding:0 var(--sp-margin); width:max-content; gap:clamp(2rem,4vw,5rem); }
  :root.js-gsap:not([data-motion="off"]) .gallery .sp-hscroll__item{ width:min(40vw,560px); margin-top:0; }
  :root.js-gsap:not([data-motion="off"]) .gallery .sp-hscroll__item:nth-child(2){ margin-top:3vh; }
  :root.js-gsap:not([data-motion="off"]) .gallery .gallery__head{ padding-inline:var(--sp-margin); margin-bottom:1.25rem; }
  :root.js-gsap:not([data-motion="off"]) .gallery .gallery__head .sp-h2{ font-size:clamp(2rem,1.2rem + 2vw,3.5rem); }
  :root.js-gsap:not([data-motion="off"]) .gallery .gallery__panel{ padding:16px; }
  :root.js-gsap:not([data-motion="off"]) .gallery .gallery__cap{ margin-top:.6rem; }
}

/* ==========================================================================
   Bridge statement: SP-INK
   ========================================================================== */
.bridge__text{ font:var(--sp-display-weight) var(--sp-fs-display)/.95 var(--sp-font-display); letter-spacing:-.03em; text-wrap:balance; max-width:16ch; margin:0; }

/* ==========================================================================
   The Exploded Platform: SP-WORD-BEHIND + CSS 3D. Default = labelled layer list (phones, RM, no JS).
   ========================================================================== */
.xp{ position:relative; overflow:clip; scroll-margin-top:var(--sp-pin-top); }
.xp__word{ position:absolute; left:50%; top:52%; translate:-50% -50%; margin:0; font:var(--sp-display-weight) var(--sp-fs-mega)/.8 var(--sp-font-display); letter-spacing:-.05em; white-space:nowrap; color:rgb(255 255 255 / .06); pointer-events:none; z-index:0; }
.xp__inner{ position:relative; z-index:1; display:grid; gap:clamp(2rem,4vw,3rem); }
.xp__head .sp-h2{ color:var(--sp-fg); }
.xp__chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.xp__chips .chips__label{ color:var(--sp-paper-muted); }
.xp__list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.xp__layer{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding:16px; border-radius:var(--sp-r-md); background:rgb(255 255 255 / .06); box-shadow:inset 0 0 0 1px var(--sp-line-on-dark); }
.xp__label{ display:flex; align-items:baseline; gap:10px; }
.xp__label h3{ font:var(--sp-display-weight) 1.35rem/1.1 var(--sp-font-display); color:var(--sp-paper); }
.xp__label p{ margin:0; color:var(--sp-paper-muted); font-size:.95rem; }
.xp__num{ font:700 .8rem/1 var(--sp-font-text); color:var(--sp-accent-dark); }
.xp__plate{ display:grid; gap:10px; border-radius:12px; background:#fff; padding:12px; overflow:hidden; }
.xp__layer--brand .xp__plate{ padding:0; }
.xp__close{ font:var(--sp-display-weight) var(--sp-fs-h2)/1 var(--sp-font-display); letter-spacing:-.02em; color:var(--sp-paper); margin:0; }
.xp__close .accent{ font-family:var(--sp-font-accent); font-style:italic; font-weight:500; color:var(--sp-accent-dark); }
/* plate contents */
 .pl-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.pl-badges span{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; background:#ECFDF5; color:#047857; font:600 11px/1 var(--sp-font-text); }
.pl-badges .icon{ width:13px; height:13px; }

@media (min-width:1024px){
  .xp__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  /* pinned 3D stage: one screen below the fixed header */
  :root.js-gsap:not([data-motion="off"]) .xp{ height:calc(100svh - var(--sp-pin-top)); padding-block:clamp(20px,4vh,48px); display:grid; align-content:center; }
  :root.js-gsap:not([data-motion="off"]) .xp__inner{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); grid-template-areas:"head stage" "chips stage" "close stage"; align-items:center; column-gap:clamp(2rem,5vw,6rem); row-gap:1.5rem; }
  :root.js-gsap:not([data-motion="off"]) .xp__head{ grid-area:head; align-self:end; }
  :root.js-gsap:not([data-motion="off"]) .xp__chips{ grid-area:chips; }
  :root.js-gsap:not([data-motion="off"]) .xp__close{ grid-area:close; align-self:start; font-size:clamp(1.8rem,1rem + 2.2vw,3.4rem); }
  :root.js-gsap:not([data-motion="off"]) .xp__stage{ grid-area:stage; perspective:1800px; height:min(62svh,560px); display:grid; place-items:center; }
  :root.js-gsap:not([data-motion="off"]) .xp__list{ position:relative; display:block; width:min(100%,540px); height:400px; transform-style:preserve-3d; }
  :root.js-gsap:not([data-motion="off"]) .xp__layer{ position:absolute; inset:0; display:block; padding:0; background:transparent; box-shadow:none; transform-style:preserve-3d; }
  :root.js-gsap:not([data-motion="off"]) .xp__plate{ position:absolute; box-shadow:0 30px 60px -30px rgb(0 0 0 / .6); }
  /* assembled: the four plates are regions of one dashboard */
  :root.js-gsap:not([data-motion="off"]) .xp__layer--security .xp__plate{ inset:0; padding:0; background:#fff; }
  :root.js-gsap:not([data-motion="off"]) .xp__layer--security .pl-badges{ position:absolute; left:16px; right:16px; bottom:16px; }
  :root.js-gsap:not([data-motion="off"]) .xp__layer--brand .xp__plate{ left:0; right:0; top:0; border-radius:12px 12px 0 0; }
  :root.js-gsap:not([data-motion="off"]) .xp__layer--members .xp__plate{ left:14px; right:14px; top:62px; padding:0; background:transparent; box-shadow:none; overflow:visible; }
  :root.js-gsap:not([data-motion="off"]) .xp__layer--workflow .xp__plate{ left:14px; right:14px; top:196px; padding:0; background:transparent; box-shadow:none; overflow:visible; }
  /* labels float beside their layer; faded in by the timeline */
  :root.js-gsap:not([data-motion="off"]) .xp__label{ position:absolute; right:calc(100% + 24px); top:50%; translate:0 -50%; display:block; width:max-content; max-width:220px; text-align:right; opacity:0; }
  :root.js-gsap:not([data-motion="off"]) .xp__layer--brand .xp__label{ top:24px; }
  :root.js-gsap:not([data-motion="off"]) .xp__label h3{ font-size:1.25rem; }
  :root.js-gsap:not([data-motion="off"]) .xp__label p{ font-size:.85rem; }
  :root.js-gsap:not([data-motion="off"]) .xp__close{ opacity:0; }
}

/* ==========================================================================
   Three roles: SP-VIEW-SWITCH (GSAP Flip in site-motion.js; the switch itself is site.js)
   ========================================================================== */
.views__btns{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:2rem; }
.views__btn{ min-height:44px; padding:0 18px; border:1px solid var(--sp-line); border-radius:var(--sp-r-pill); background:transparent; color:var(--sp-fg); font:700 .95rem/1 var(--sp-font-text); cursor:pointer; }
.views__btn[aria-pressed="true"]{ background:var(--sp-ink); color:var(--sp-paper); border-color:var(--sp-ink); }
.views__btn:hover,.views__btn:focus-visible{ border-color:var(--sp-ink); }
.views__lead{ min-height:3em; color:var(--sp-ink-muted); max-width:60ch; margin:-1rem 0 2rem; }
.views__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-gap); grid-template-columns:repeat(3,minmax(0,1fr)); }
.feat{ display:flex; flex-direction:column; gap:10px; padding:clamp(18px,2vw,26px); border-radius:var(--sp-r-md); background:#fff; box-shadow:inset 0 0 0 1px var(--sp-line); }
.feat__icon{ display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:var(--sp-surface); color:var(--sp-ink); }
.feat__title{ font:var(--sp-display-weight) 1.2rem/1.15 var(--sp-font-display); }
.feat__text{ margin:0; color:var(--sp-ink-muted); font-size:.98rem; }
.feat.is-lead{ box-shadow:inset 0 0 0 2px var(--sp-ink); }
.feat.is-lead .feat__icon{ background:var(--sp-ink); color:var(--sp-paper); }
/* member: their features lead, larger */
.views__list[data-layout="member"] .feat.is-lead{ order:-1; }
.views__list[data-layout="member"] .feat.is-lead:first-of-type{ grid-column:span 2; }
/* administrator: a list */
.views__list[data-layout="admin"]{ grid-template-columns:minmax(0,1fr); gap:10px; }
.views__list[data-layout="admin"] .feat{ display:grid; grid-template-columns:46px minmax(0,14rem) minmax(0,1fr); align-items:center; gap:18px; padding:14px 18px; }
.views__list[data-layout="admin"] .feat.is-lead{ order:-1; }
/* association: bento */
.views__list[data-layout="assoc"]{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.views__list[data-layout="assoc"] .feat.is-lead{ order:-1; grid-column:span 2; background:var(--sp-surface); }
@media (max-width:1023px){
  .views__list,.views__list[data-layout="assoc"]{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .views__list[data-layout="assoc"] .feat.is-lead,.views__list[data-layout="member"] .feat.is-lead:first-of-type{ grid-column:auto; }
}
@media (max-width:640px){
  .views__list,.views__list[data-layout="assoc"]{ grid-template-columns:minmax(0,1fr); }
  .views__list[data-layout="admin"] .feat{ grid-template-columns:46px minmax(0,1fr); }
  .views__list[data-layout="admin"] .feat__text{ grid-column:2; }
}

/* ==========================================================================
   Sectors: SP-CAROUSEL-EDGE + coming-soon panel (workflow §3a)
   ========================================================================== */
.edge{ display:grid; gap:var(--sp-gap); }
.edge__intro{ display:grid; gap:1rem; align-content:start; }
.edge__arrows{ display:flex; gap:8px; }
.edge__arrow{ display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--sp-line); border-radius:var(--sp-r-sm); background:transparent; color:var(--sp-fg); cursor:pointer; }
.edge__arrow:hover,.edge__arrow:focus-visible{ background:var(--sp-fg); color:var(--sp-bg); }
.edge__arrow[disabled]{ opacity:.35; cursor:default; }
.edge__arrow--prev .icon{ transform:rotate(180deg); }
.edge__track{ display:flex; gap:var(--sp-gap); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; list-style:none; margin:0 calc(-1 * var(--sp-margin)) 0 0; padding:4px var(--sp-margin) 8px 2px; }
.edge__track::-webkit-scrollbar{ display:none; }
.edge__track > li{ flex:none; width:min(82vw,380px); scroll-snap-align:start; display:flex; }
@media (min-width:1024px){
  .edge{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); align-items:start; }
  .edge__track{ margin-right:calc(-1 * (100vw - min(100vw - 2 * var(--sp-margin), var(--sp-max))) / 2); }
}
@media (max-width:1023px){ .edge__arrows{ display:none; } }
.sector{ position:relative; display:flex; flex-direction:column; width:100%; min-height:340px; border-radius:var(--sp-r-md); background:#fff; box-shadow:inset 0 0 0 1px var(--sp-line); overflow:hidden; }
.sector__top{ padding:24px 24px 0; }
.sector__status{ display:inline-flex; align-items:center; gap:8px; padding:4px 12px; border-radius:999px; font:700 .78rem/1.5 var(--sp-font-text); margin-bottom:14px; }
.sector__status--on{ background:#DCF5E7; color:#0D5531; }
.sector__status--on::before{ content:""; width:8px; height:8px; border-radius:50%; background:#16A34A; }
.sector__status--soon{ background:#FFF1D6; color:#6B4100; }
.sector__title{ font:var(--sp-display-weight) 1.5rem/1.1 var(--sp-font-display); margin-bottom:8px; }
.sector__line{ margin:0 0 16px; color:var(--sp-ink-muted); }
.sector__rest{ padding:0 24px 24px; margin-top:auto; }
.sector__list{ list-style:none; padding:0; margin:0 0 18px; font-size:.95rem; display:grid; gap:6px; }
.sector__list li{ display:flex; gap:8px; align-items:flex-start; }
.sector__list .icon{ width:18px; height:18px; margin-top:3px; color:#16A34A; }
.sector--live{ box-shadow:inset 0 0 0 2px var(--sp-ink); }
.bd-soon__area{ position:relative; margin-top:auto; padding-top:8px; }
.bd-soon__covered{ opacity:.35; pointer-events:none; }
.bd-soon__panel{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:18px 24px; background:rgb(255 255 255 / .96); border-top:3px solid var(--sp-accent); }
.bd-soon__label{ display:flex; align-items:center; gap:8px; margin:0; font:var(--sp-display-weight) 1.05rem/1.2 var(--sp-font-display); }
.bd-soon__label .icon{ width:18px; height:18px; color:var(--sp-accent-text); }
.bd-soon__note{ font-size:.92rem; margin:0; color:var(--sp-ink-muted); }

/* ==========================================================================
   Security and proof: SP-STAT-GIANT
   ========================================================================== */
.secure{ display:grid; gap:clamp(2rem,4vw,4rem); }
.secure__list{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--sp-line); }
.secure__item{ display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; padding:20px 0; border-bottom:1px solid var(--sp-line); }
.secure__icon{ display:grid; place-items:center; width:48px; height:48px; border-radius:12px; background:var(--sp-surface); color:var(--sp-ink); }
.secure__item h3{ font:var(--sp-display-weight) 1.15rem/1.2 var(--sp-font-display); margin-bottom:4px; }
.secure__item p{ margin:0; color:var(--sp-ink-muted); }
.stats{ display:grid; gap:var(--sp-gap); align-content:start; }
.stat{ padding:clamp(18px,2vw,28px); border-radius:var(--sp-r-md); background:var(--sp-surface); }
.stat__num{ display:block; font:var(--sp-display-weight) var(--sp-fs-h2)/1 var(--sp-font-display); letter-spacing:-.02em; color:var(--sp-ink); font-variant-numeric:tabular-nums; }
.stat--xl .stat__num{ font-size:var(--sp-fs-display); }
.stat__num--todo{ font-size:clamp(1.1rem,.9rem + .6vw,1.5rem)!important; line-height:1.25; letter-spacing:0; color:var(--sp-ink-muted); }
.stat__label{ display:block; margin-top:.6rem; font-weight:700; }
@media (min-width:1024px){ .secure{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } }

/* ==========================================================================
   Talk to us: form + SP-MAGNETIC submit
   ========================================================================== */
.talk{ display:grid; gap:clamp(2rem,4vw,4rem); }
@media (min-width:1024px){ .talk{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; } }
.form{ display:grid; gap:18px; }
.form__grid{ display:grid; gap:18px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field--full{ grid-column:1/-1; }
.field label,.field legend{ font:700 .95rem/1.3 var(--sp-font-text); color:var(--sp-fg); }
.field .optional{ font-weight:400; color:var(--sp-ink-muted); }
.field input,.field textarea{ width:100%; min-height:50px; padding:12px 14px; border:1.5px solid color-mix(in srgb, var(--sp-fg) 30%, transparent); border-radius:var(--sp-r-sm); background:var(--sp-paper); color:var(--sp-ink); font:400 1rem/1.4 var(--sp-font-text); }
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field textarea:focus{ outline:2px solid var(--sp-focus); outline-offset:1px; }
.field [aria-invalid="true"]{ border-color:#B4231B; }
.field__error{ font-size:.875rem; color:#B4231B; margin:0; }
.sp-band--dark .field__error{ color:#FFB4AE; }
.choice{ border:0; margin:0; padding:0; min-width:0; }
.choice legend{ padding:0; margin-bottom:8px; }
.choice__opts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.choice__opt{ display:flex; align-items:center; gap:10px; min-height:50px; padding:10px 14px; border:1.5px solid color-mix(in srgb, var(--sp-fg) 30%, transparent); border-radius:var(--sp-r-sm); font-size:.95rem; line-height:1.35; cursor:pointer; }
.choice__opt input{ width:18px; height:18px; margin:0; accent-color:var(--sp-accent); flex:none; }
.choice__opt:has(input:checked){ border-color:var(--sp-fg); background:color-mix(in srgb, var(--sp-fg) 8%, transparent); }
.choice__opt:has(input:focus-visible){ outline:2px solid var(--sp-focus); outline-offset:2px; }
.choice[aria-invalid="true"] .choice__opt{ border-color:#B4231B; }
.check{ display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; align-items:start; font-size:.95rem; line-height:1.55; }
.check input{ width:22px; height:22px; margin:1px 0 0; accent-color:var(--sp-accent); }
.hp{ position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.form__foot p{ margin:0; font-size:.9rem; color:var(--sp-ink-muted); max-width:30ch; }
.form-status{ margin:0; padding:14px 16px; border-radius:var(--sp-r-sm); }
.form-status:empty{ display:none; }
.form-status--ok{ background:#DCF5E7; color:#0D4F2E; }
.form-status--error{ background:#FDE7E9; color:#8A0E17; }
.sp-mag__btn{ background:var(--sp-accent); color:var(--sp-on-accent); font:700 1.05rem/1.2 var(--sp-font-text); width:clamp(120px,10vw,150px); }
.sp-mag__btn::before{ background:var(--sp-ink); }
.sp-mag__btn[disabled]{ opacity:.6; cursor:progress; }
.contacts{ display:grid; gap:12px; }
.contact{ display:grid; grid-template-columns:48px minmax(0,1fr); gap:14px; align-items:center; padding:16px; border-radius:var(--sp-r-md); background:#fff; box-shadow:inset 0 0 0 1px var(--sp-line); text-decoration:none; color:var(--sp-ink); }
.contact:hover,.contact:focus-visible{ box-shadow:inset 0 0 0 2px var(--sp-ink); }
.contact__icon{ display:grid; place-items:center; width:48px; height:48px; border-radius:12px; background:var(--sp-stage); color:#fff; }
.contact__icon--wa{ background:#128C4A; }
.contact__label{ display:block; font:700 .78rem/1.3 var(--sp-font-text); letter-spacing:.08em; text-transform:uppercase; color:var(--sp-ink-muted); }
.contact__value{ display:block; font-weight:700; word-break:break-word; }
.talk__points{ list-style:none; padding:0; margin:0 0 1.5rem; display:grid; gap:10px; }
.talk__points li{ display:flex; gap:10px; align-items:center; font-weight:600; }
.talk__points .icon{ color:var(--sp-accent-text); }
@media (max-width:640px){ .form__grid,.choice__opts{ grid-template-columns:minmax(0,1fr); } }

/* ==========================================================================
   Footer: SP-FOOTER-CURTAIN
   ========================================================================== */
.site-foot{ background:var(--sp-stage); color:var(--sp-paper-muted); }
.site-foot__inner{ display:grid; gap:clamp(2rem,4vw,3rem); padding-block:clamp(48px,7vw,96px) 32px; }
.site-foot__big{ font:700 var(--sp-fs-h2)/1 "Poppins",system-ui,sans-serif; letter-spacing:-.02em; color:var(--sp-paper); max-width:18ch; margin:0; }
.site-foot__big .accent{ font-family:var(--sp-font-accent); font-style:italic; font-weight:500; color:var(--sp-accent-dark); }
.site-foot__cols{ display:grid; gap:2rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
.site-foot__title{ font:700 .8rem/1.2 var(--sp-font-text); letter-spacing:.12em; text-transform:uppercase; color:var(--sp-paper); margin-bottom:14px; }
.site-foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.site-foot a{ color:var(--sp-paper); text-decoration:none; overflow-wrap:anywhere; }
.site-foot__cols > *{ min-width:0; }
.site-foot a:hover,.site-foot a:focus-visible{ text-decoration:underline; }
.site-foot__bar{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding-top:24px; border-top:1px solid var(--sp-line-on-dark); font-size:.875rem; }
.site-foot__bar p{ margin:0; }
.motion-btn{ min-height:36px; padding:0 14px; border:1px solid var(--sp-line-on-dark); border-radius:var(--sp-r-pill); background:transparent; color:var(--sp-paper); font:600 .85rem/1 var(--sp-font-text); cursor:pointer; }
.motion-btn:hover,.motion-btn:focus-visible{ background:var(--sp-paper); color:var(--sp-stage); }
html:not(.js) .motion-btn{ display:none; }
@media (min-width:1024px){ .site-foot__cols{ grid-template-columns:1.4fr repeat(3,minmax(0,1fr)); } }

/* ==========================================================================
   Inner pages
   ========================================================================== */
.pg-hero{ padding:calc(var(--sp-pin-top) + clamp(40px,7vw,100px)) 0 clamp(48px,7vw,96px); }
.pg-hero__title{ font:var(--sp-display-weight) var(--sp-fs-display)/.92 var(--sp-font-display); letter-spacing:-.03em; text-wrap:balance; margin:0 0 1.25rem; max-width:14ch; }
.pg-hero__title .accent{ font-family:var(--sp-font-accent); font-style:italic; font-weight:500; font-size:1.04em; color:var(--sp-accent-text); }
.pg-hero__lede{ font-size:var(--sp-fs-lede); line-height:1.4; max-width:44ch; color:var(--sp-ink-muted); margin:0; }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 1.5rem; padding:0; font-size:.9rem; color:var(--sp-ink-muted); }
.crumbs li+li::before{ content:"/"; margin-right:8px; }

/* SP-UI-DEMO: window + dock */
.dock-demo{ display:grid; gap:clamp(16px,2vw,24px); }
.window{ border-radius:var(--sp-r-lg); background:var(--sp-stage); padding:clamp(12px,2vw,24px); box-shadow:0 40px 80px -40px rgb(0 0 0 / .5); }
.window__chrome{ display:flex; gap:6px; margin-bottom:12px; }
.window__chrome i{ width:10px; height:10px; border-radius:50%; background:rgb(255 255 255 / .3); }
.window__panel{ display:none; }
.window__panel.is-on{ display:block; animation:panel-in var(--sp-dur-sm) var(--sp-ease-out); }
@keyframes panel-in{ from{ opacity:0; transform:translateY(8px); } }
.dock{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:8px; border-radius:var(--sp-r-md); background:var(--sp-surface); width:fit-content; margin-inline:auto; }
.dock__btn{ display:grid; justify-items:center; gap:4px; min-width:88px; min-height:64px; padding:10px; border:0; border-radius:12px; background:transparent; color:var(--sp-ink); font:600 .8rem/1.2 var(--sp-font-text); cursor:pointer; }
.dock__btn[aria-selected="true"]{ background:var(--sp-ink); color:var(--sp-paper); }
.dock__btn:hover:not([aria-selected="true"]){ background:#fff; }
.panel-cap{ color:var(--sp-paper); margin:1rem 0 0; font-size:.95rem; }
.panel-cap b{ color:#fff; }

/* SP-CHAPTERS (platform, security): stage beside chapter copy */
.ch{ background:var(--sp-bg); }
.sp-ch__items{ display:grid; }
.sp-ch__item{ align-items:center; }
.ch__num{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--sp-accent); color:var(--sp-on-accent); font:700 .9rem/1 var(--sp-font-text); margin-bottom:1rem; }
.sp-band--dark .ch__num{ background:var(--sp-accent-dark); color:var(--sp-on-accent-dark); }
.ch__title{ font:var(--sp-display-weight) var(--sp-fs-h2)/1 var(--sp-font-display); letter-spacing:-.02em; margin-bottom:1rem; }
.ch__list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.ch__list li{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; }
.ch__list .icon{ width:20px; height:20px; margin-top:3px; color:var(--sp-accent-text); }
.ch__list b{ display:block; color:var(--sp-fg); }
.ch__list span{ color:var(--sp-ink-muted); }
.ch__media .ui,.ch__media .xp__plate{ max-width:520px; }

/* SP-SPLIT-WIPE two-word split (sectors) */
.split .sp-wipe__panel{ border-radius:var(--sp-r-lg); min-height:46svh; }
.split .sp-wipe__inner{ height:100%; }
.split__face{ display:flex; flex-direction:column; justify-content:flex-end; gap:1rem; height:100%; min-height:46svh; padding:clamp(20px,3vw,40px); }
.split__face--live{ background:var(--sp-stage); color:var(--sp-paper); }
.split__face--next{ background:var(--sp-surface); color:var(--sp-ink); }
.split__word{ font:var(--sp-display-weight) clamp(3.5rem, 1rem + 7vw, 9.5rem)/.85 var(--sp-font-display); letter-spacing:-.04em; margin:0; }
.split__face--live .split__word .accent{ color:var(--sp-accent-dark); }
.split__face p{ margin:0; max-width:36ch; }
.split__face--live p{ color:var(--sp-paper-muted); }
.split__face--next p{ color:var(--sp-ink-muted); }
.split__face .sp-btn{ align-self:flex-start; }
@media (min-width:768px){ .split .sp-wipe__panels{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  :root.js-gsap:not([data-motion="off"]) .split .sp-stage__sticky{ padding:calc(var(--sp-pin-top) + 16px) var(--sp-margin) 24px; }
  :root.js-gsap:not([data-motion="off"]) .split .sp-wipe__panels{ gap:var(--sp-gap); }
  :root.js-gsap:not([data-motion="off"]) .split .sp-wipe__panel{ min-height:0; height:100%; }
}

/* SP-HOVER-PREVIEW-LIST */
.hlist{ position:relative; }
.hlist__items{ list-style:none; margin:0; padding:0; border-top:1px solid var(--sp-line); }
.hlist__row{ border-bottom:1px solid var(--sp-line); }
.hlist__link{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1rem; padding:clamp(18px,2.4vw,32px) 0; text-decoration:none; color:var(--sp-fg); }
.hlist__name{ font:var(--sp-display-weight) var(--sp-fs-h3)/1.05 var(--sp-font-display); letter-spacing:-.01em; }
.hlist__meta{ display:flex; align-items:center; gap:12px; font-weight:600; color:var(--sp-ink-muted); }
.hlist__link:hover .hlist__name,.hlist__link:focus-visible .hlist__name{ color:var(--sp-accent-text); }
.hlist__preview{ display:none; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  :root.js-gsap:not([data-motion="off"]) .hlist__preview{ display:block; position:fixed; z-index:20; left:0; top:0; width:300px; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.9); }
}

/* SP-REEL-GROW with a live HTML reel (about) */
.reel{ position:relative; border-radius:var(--sp-r-lg); background:var(--sp-stage); padding:clamp(20px,4vw,64px); display:grid; place-items:center; overflow:hidden; aspect-ratio:16/9; min-height:320px; }
.reel .ui{ max-width:560px; }
.reel__pause{ position:absolute; right:16px; bottom:16px; z-index:2; }
.sp-grow__media{ clip-path:none; }
@media (max-width:767px){ .reel{ aspect-ratio:auto; } }

/* prose (privacy), login cards, 404, cards */
.prose{ max-width:72ch; }
.prose h2{ font:var(--sp-display-weight) clamp(1.4rem,1.1rem + 1vw,2rem)/1.15 var(--sp-font-display); margin:2.2em 0 .6em; }
.prose h3{ font:var(--sp-display-weight) 1.15rem/1.25 var(--sp-font-display); margin:1.6em 0 .5em; }
.prose ul{ padding-left:1.2em; }
.prose li{ margin-bottom:.4em; }
.note{ padding:16px 20px; border-left:4px solid var(--sp-accent); background:var(--sp-surface); border-radius:0 var(--sp-r-sm) var(--sp-r-sm) 0; }
.cards{ display:grid; gap:var(--sp-gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); list-style:none; margin:0; padding:0; }
.card{ display:flex; flex-direction:column; gap:10px; padding:clamp(20px,2vw,28px); border-radius:var(--sp-r-md); background:#fff; box-shadow:inset 0 0 0 1px var(--sp-line); text-decoration:none; color:var(--sp-ink); }
a.card:hover,a.card:focus-visible{ box-shadow:inset 0 0 0 2px var(--sp-ink); }
.card h2,.card h3{ font:var(--sp-display-weight) 1.25rem/1.15 var(--sp-font-display); }
.card p{ margin:0; color:var(--sp-ink-muted); }
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); counter-reset:s; }
.steps li{ padding:clamp(20px,2vw,28px); border-radius:var(--sp-r-md); background:var(--sp-surface); counter-increment:s; }
.steps li::before{ content:counter(s); display:inline-grid; place-items:center; width:36px; height:36px; margin-bottom:12px; border-radius:10px; background:var(--sp-ink); color:var(--sp-paper); font:700 .9rem/1 var(--sp-font-text); }
.steps h3{ font:var(--sp-display-weight) 1.15rem/1.2 var(--sp-font-display); margin-bottom:.4rem; }
.steps p{ margin:0; color:var(--sp-ink-muted); }

/* AOS pages: content is visible until site-motion.js sets data-aos (no hidden content without JS) */

/* ---- header and layout below the desktop breakpoint ---- */
@media (max-width:1023px){
  .hdr__toggle{ display:grid; }
  .hdr__nav{ position:absolute; left:0; right:0; top:calc(100% + 8px); display:none; flex-direction:column; align-items:stretch; gap:8px; padding:12px; border-radius:var(--sp-r-md); background:var(--sp-paper); box-shadow:0 20px 40px -20px rgb(0 0 0 / .4), inset 0 0 0 1px var(--sp-line); max-height:calc(100svh - var(--sp-pin-top) - 24px); overflow:auto; }
  .hdr__nav.is-open{ display:flex; }
  .hdr__list{ flex-direction:column; }
  .hdr__link{ padding:14px 12px; font-size:1.05rem; }
  .hdr__actions{ display:grid; grid-template-columns:1fr 1fr; }
  .hdr__actions .sp-btn{ justify-content:center; }
  .strip{ top:auto; bottom:calc(16px + env(safe-area-inset-bottom)); left:auto; right:16px; translate:none; }
  :root.has-takeover .wa-widget{ bottom:calc(76px + env(safe-area-inset-bottom)); }
}

/* closing CTA band (inner pages) */
.cta__inner{ display:grid; gap:1rem; justify-items:start; }
.cta .lede{ color:var(--sp-paper-muted); }
.cta .sp-mag__btn{ background:var(--sp-accent-dark); color:var(--sp-on-accent-dark); }
.cta .sp-mag__btn::before{ background:var(--sp-paper); }
.cta .sp-mag__btn:hover .sp-mag__label,.cta .sp-mag__btn:focus-visible .sp-mag__label{ color:var(--sp-stage); }
.sp-mag__btn:hover .sp-mag__label,.sp-mag__btn:focus-visible .sp-mag__label{ color:#fff; }

/* ==========================================================================
   The Takeover sweep (same-document View Transition, site.js):
   the old site shifts right, the new brand slides in from the left behind a
   slanted edge, and a three-stripe band in the NEW brand's colours rides the
   edge. One-off (never scrubbed); off under reduced motion and with the switch.
   ========================================================================== */
.sweep{ display:none; }
/* Code rain: a full-width curtain of falling code (the real token change), long trail above a bright
   leading edge. The new brand is revealed exactly where the leading edge has passed (top to bottom). */
.sweep.is-on{ display:grid; grid-template-columns:repeat(var(--cols,5),minmax(0,1fr)); column-gap:28px; position:fixed; z-index:95; top:0; left:0; width:100vw; height:90vh; padding:0 28px; overflow:hidden; pointer-events:none; view-transition-name:bm-sweep;
  background:linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--sweep) 88%, transparent) 22%, var(--sweep) 60%, var(--sweep) 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 18%); mask-image:linear-gradient(to bottom, transparent 0%, #000 18%); }
.sweep.is-on::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--rain); box-shadow:0 0 22px 5px var(--rain); }
.sweep__col{ min-width:0; white-space:pre; overflow:hidden; text-overflow:ellipsis; align-self:start;
  font:600 14px/1.75 ui-monospace,"Cascadia Code","SFMono-Regular",Menlo,Consolas,monospace; letter-spacing:0; font-variant-ligatures:none; font-feature-settings:"liga" 0, "calt" 0;
  color:var(--rain); text-shadow:0 0 3px color-mix(in srgb, var(--rain) 55%, transparent); animation:bm-rain 6s linear infinite; }
.sweep__col:nth-child(2n){ color:#FFFFFF; text-shadow:0 0 3px rgb(255 255 255 / .35); animation-duration:7.5s; }
.sweep__col:nth-child(3n){ animation-duration:5.2s; }
@keyframes bm-rain{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
html.is-sweeping::view-transition-group(root){ animation:none; }
html.is-sweeping::view-transition-old(root){ animation:bm-sweep-old 2.4s cubic-bezier(.4,0,.35,1) both; }
html.is-sweeping::view-transition-new(root){ animation:bm-sweep-new 2.4s cubic-bezier(.4,0,.35,1) both; }
html.is-sweeping::view-transition-group(bm-sweep){ animation:bm-sweep-band 2.4s cubic-bezier(.4,0,.35,1) both; }
html.is-sweeping::view-transition-new(bm-sweep){ animation:none; }
@keyframes bm-sweep-old{ from{ filter:none; } to{ filter:brightness(.75); } }
/* reveal edge = the rain's leading edge: band bottom goes 0 → 190vh while the clip edge goes 0 → 190% */
@keyframes bm-sweep-new{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0 0 -90% 0); } }
@keyframes bm-sweep-band{ from{ transform:translateY(-90vh); } to{ transform:translateY(100vh); } }

/* ---- hero visuals (user request: fuller heroes) ---- */
.ui__search--wide{ margin:0; width:100%; height:34px; }
.pg-hero__grid{ display:grid; gap:clamp(32px,5vw,64px); align-items:center; }
.pg-hero__visual .ui{ max-width:600px; margin-inline:auto; }
.pg-hero--visual{ overflow-x:clip; }
@media (min-width:1024px){
  .pg-hero--visual .pg-hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
  .pg-hero--visual .pg-hero__title{ font-size:clamp(3rem,1.6rem + 3.4vw,6rem); }
  .pg-hero__visual{ position:relative; }
  .pg-hero__visual::before{ content:""; position:absolute; inset:8% -12% -10% 12%; z-index:0; border-radius:var(--sp-r-lg); background:var(--sp-surface); }
  .pg-hero__visual .ui{ position:relative; z-index:1; }
}
/* home: console behind, member dashboard in front */
.hero__stack{ display:grid; }
.hero__stack .hero__back{ display:none!important; }
@media (min-width:1024px){
  .hero__stack{ min-height:540px; align-content:center; }
  .hero__stack .hero__back{ display:grid!important; position:absolute; top:0; right:-8%; width:88%; opacity:.92; transform:scale(.92); transform-origin:top right; }
  .hero__stack .hero__front{ position:relative; z-index:1; width:88%; margin:22% 0 0 -6%; max-width:none; }
  .hero__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
}

/* Auto tour on load: the H1 keeps bMember's own faces so nothing in the first screen changes size (no CLS). */
:root.is-tour .hero__title{ font-family:"Poppins",system-ui,sans-serif; font-weight:700; }
:root.is-tour .hero__title .sp-mix__accent{ font-family:var(--sp-font-accent); font-style:italic; font-weight:500; font-size:1.04em; letter-spacing:-.023em; }

/* ==========================================================================
   Brand toggle: two choices (bMember | a demo association that shuffles).
   The selected side fills with a pill that slides in from the other side
   (transform only); the demo name flips in when it shuffles.
   ========================================================================== */
.btoggle{ display:grid; gap:10px; justify-items:start; margin:0 0 2rem; --demo-stage:#0B3B3A; --demo-light:#5EEAD4; }
.btoggle__label{ font:700 .78rem/1 var(--sp-font-text); letter-spacing:.12em; text-transform:uppercase; color:var(--sp-ink-muted); }
.btoggle__track{ display:inline-flex; gap:4px; max-width:100%; padding:5px; border-radius:999px; background:rgb(255 255 255 / .08); box-shadow:inset 0 0 0 1px var(--sp-line), 0 10px 30px -18px rgb(0 0 0 / .6); }
.btoggle__opt{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; gap:10px; min-width:0; min-height:54px; padding:0 20px 0 8px; border:0; border-radius:999px; background:transparent; color:var(--sp-fg); font:700 1rem/1.15 var(--sp-font-text); cursor:pointer; white-space:nowrap; transition:color .35s var(--sp-ease-out); }
.btoggle__opt::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--fill); opacity:0; transform:translateX(var(--from)); transition:transform .5s var(--sp-ease-out), opacity .2s linear; }
.btoggle__opt--bm{ --fill:#FFFFFF; --from:110%; }
.btoggle__opt--demo{ --fill:var(--demo-light); --from:-110%; }
.btoggle__opt[aria-pressed="true"]::before{ opacity:1; transform:none; }
.btoggle__opt--bm[aria-pressed="true"]{ color:#002B64; }
.btoggle__opt--demo[aria-pressed="true"]{ color:var(--demo-stage); }
@media (hover:hover) and (pointer:fine){ .btoggle__opt[aria-pressed="false"]:hover{ background:rgb(255 255 255 / .1); } }
.btoggle__opt:focus-visible{ outline:2px solid var(--sp-focus); outline-offset:3px; }
.btoggle__mark{ display:grid; place-items:center; flex:none; min-width:38px; height:38px; padding:0 6px; border-radius:999px; background:var(--demo-stage); color:#fff; font:700 .72rem/1 var(--sp-font-text); box-shadow:0 0 0 2px rgb(255 255 255 / .35); }
.btoggle__mark--bm{ background:#002B64; position:relative; }
.btoggle__mark--bm::after{ content:""; position:absolute; right:2px; bottom:2px; width:9px; height:9px; border-radius:3px; background:#E31825; }
.btoggle__shuffle{ opacity:.7; }
.btoggle__opt.is-shuffled [data-demo-name],.btoggle__opt.is-shuffled [data-demo-mark]{ animation:bt-shuffle .45s var(--sp-ease-out) both; }
@keyframes bt-shuffle{ from{ opacity:0; transform:translateY(60%); } }
.btoggle__hint{ margin:0; font-size:.9rem; color:var(--sp-ink-muted); }
.sp-band--dark .btoggle__label,.sp-band--dark .btoggle__hint{ color:var(--sp-paper-muted); }
.sp-band:not(.sp-band--dark) .btoggle__track{ background:var(--sp-surface); }
@media (max-width:520px){
  .btoggle__track{ width:100%; }
  .btoggle__opt{ flex:1 1 0; padding:0 12px 0 6px; font-size:.92rem; }
  .btoggle__opt [data-demo-name]{ overflow:hidden; text-overflow:ellipsis; }
  .btoggle__shuffle{ display:none; }
}

/* ---- scroll smoothness ---- */
/* gallery tint: colours follow the centred panel; site-motion.js locks the display font while it runs (no reflow) */
/* moving pieces get their own compositor layers while their scene can run */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  :root.js-gsap:not([data-motion="off"]) .gallery .sp-hscroll__track,
  :root.js-gsap:not([data-motion="off"]) .xp__list,
  :root.js-gsap:not([data-motion="off"]) .xp__layer,
  :root.js-gsap:not([data-motion="off"]) .sp-ch__item{ will-change:transform; }
  :root.js-gsap:not([data-motion="off"]) .xp__plate{ box-shadow:0 18px 36px -24px rgb(0 0 0 / .55); }
}

/* ==========================================================================
   Top brand switch: fixed under the header on every page, always visible.
   Pins and heroes start below header + switch (--sp-pin-top).
   ========================================================================== */
:root{ --sp-switch-h:56px; --sp-pin-top:calc(var(--sp-header-h) + var(--sp-header-gap) + var(--sp-switch-h) + 10px); }
.hdr.is-hidden{ transform:none; }
.strip{ display:none!important; }
.topswitch{ position:fixed; z-index:39; left:50%; top:calc(max(var(--sp-header-gap), env(safe-area-inset-top)) + var(--sp-header-h) + 8px); translate:-50% 0; max-width:calc(100vw - 24px); }
.btoggle--compact{ grid-template-columns:auto auto; align-items:center; gap:10px; margin:0; padding:4px 4px 4px 16px; border-radius:999px; background:var(--sp-paper); box-shadow:0 0 0 1px var(--sp-line), 0 14px 34px -18px rgb(0 20 50 / .55); }
.btoggle--compact .btoggle__label{ color:var(--sp-ink-muted); }
.btoggle--compact .btoggle__track{ padding:3px; background:var(--sp-surface); box-shadow:none; }
.btoggle--compact .btoggle__opt{ min-height:42px; padding:0 16px 0 5px; font-size:.95rem; color:var(--sp-ink); }
.btoggle--compact .btoggle__mark{ min-width:32px; height:32px; font-size:.68rem; }
.btoggle--compact .btoggle__opt--bm{ --fill:#002B64; }
.btoggle--compact .btoggle__opt--demo{ --fill:var(--demo-stage); }
.btoggle--compact .btoggle__opt[aria-pressed="true"]{ color:#FFFFFF; }
.btoggle--compact .btoggle__opt[aria-pressed="true"] .btoggle__mark{ box-shadow:0 0 0 2px rgb(255 255 255 / .6); }
@media (hover:hover) and (pointer:fine){ .btoggle--compact .btoggle__opt[aria-pressed="false"]:hover{ background:var(--sp-paper); } }
@media (max-width:640px){
  :root{ --sp-switch-h:50px; }
  .topswitch{ left:12px; right:12px; translate:none; }
  .btoggle--compact{ grid-template-columns:minmax(0,1fr); padding:3px; }
  .btoggle--compact .btoggle__label{ display:none; }
  .btoggle--compact .btoggle__track{ width:100%; }
  .btoggle--compact .btoggle__opt{ flex:1 1 0; min-height:40px; font-size:.88rem; }
}
:root.has-takeover .wa-widget{ bottom:20px; }

/* four layers: intro line where the switch used to be */
.xp__lede{ margin:1rem 0 0; max-width:38ch; font-size:var(--sp-fs-lede); line-height:1.4; color:var(--sp-paper-muted); }

/* ==========================================================================
   Three roles cards: hover (pointer devices only). Lift uses the independent
   `translate` property, so it never fights GSAP's transform on the same card.
   ========================================================================== */
.feat{ translate:0 0; transition:translate .25s var(--sp-ease-out), box-shadow .25s var(--sp-ease-out), background-color .25s var(--sp-ease-out); }
.feat__icon{ transition:background-color .25s var(--sp-ease-out), color .25s var(--sp-ease-out), transform .25s var(--sp-ease-out); }
@media (hover:hover) and (pointer:fine){
  .feat:hover{ translate:0 -4px; box-shadow:inset 0 0 0 1.5px var(--sp-ink), 0 18px 34px -22px rgb(11 23 48 / .45); background:#fff; }
  .feat:hover .feat__icon{ background:var(--sp-accent); color:var(--sp-on-accent); transform:rotate(-6deg); }
  .feat:hover .feat__title{ color:var(--sp-accent-text); }
}
.feat__title{ transition:color .25s var(--sp-ease-out); }
@media (prefers-reduced-motion:reduce){ .feat:hover{ translate:none; } .feat:hover .feat__icon{ transform:none; } }

/* ==========================================================================
   Dark (blue) bands: a fading dot grid, a soft accent glow and a large outlined
   bMember "pixel" square. Decorative, behind the content, re-themes with the switch.
   ========================================================================== */
.sp-band--dark{ position:relative; isolation:isolate; overflow-x:clip; }
.sp-band--dark::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(48rem 30rem at 88% 8%, color-mix(in srgb, var(--sp-accent-dark) 22%, transparent), transparent 70%),
    radial-gradient(36rem 26rem at 4% 96%, rgb(255 255 255 / .06), transparent 70%),
    radial-gradient(circle at center, rgb(255 255 255 / .16) 1.2px, transparent 1.6px) 0 0 / 28px 28px;
  -webkit-mask-image:linear-gradient(115deg, #000 0%, rgb(0 0 0 / .55) 45%, rgb(0 0 0 / .25) 100%);
          mask-image:linear-gradient(115deg, #000 0%, rgb(0 0 0 / .55) 45%, rgb(0 0 0 / .25) 100%);
}
.sp-band--dark::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  width:clamp(160px,22vw,340px); aspect-ratio:1; left:clamp(-220px,-11vw,-80px); bottom:clamp(-220px,-12vw,-90px);
  border-radius:28%; border:2px solid color-mix(in srgb, var(--sp-accent-dark) 45%, transparent);
  box-shadow:inset 0 0 0 26px color-mix(in srgb, var(--sp-accent-dark) 6%, transparent);
  transform:rotate(12deg);
}
/* the footer's curtain must stay clipped to itself */
.site-foot.sp-band--dark{ overflow:clip; }

/* /security chapter stage: the Security layer, current chapter highlighted */
.sec-plate{ display:grid; gap:6px; width:min(100%,460px); padding:18px; border-radius:16px; background:#fff; box-shadow:0 30px 60px -30px rgb(0 0 0 / .6); }
.sec-plate__icon{ display:grid!important; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--sp-stage); color:#fff; }
.sec-plate__icon .icon{ width:22px; height:22px; }
.sec-plate__title{ margin:6px 0 4px; font:600 15px/1.2 var(--sp-font-text); color:var(--u-900); }
.sec-plate .pl-row{ display:flex!important; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--u-line); border-radius:10px; font-size:13px; color:var(--u-600); }
.sec-plate .pl-row.is-on{ border-color:var(--sp-stage); box-shadow:0 0 0 3px color-mix(in srgb, var(--sp-stage) 15%, transparent); color:var(--u-900); font-weight:600; }
.sec-plate .ui__chip{ height:22px; }
/* /about reel: a bigger dashboard in the frame */
.reel .ui{ max-width:720px; }
@media (min-width:1024px){ .reel{ padding:clamp(32px,5vw,80px) clamp(48px,10vw,160px); } }

/* themed rows inside a mock (login chooser) recompute the accent */
.ui [data-theme],.xp__plate[data-theme]{ --u-acc:var(--sp-accent); }

/* ---- 44px touch targets (Phase 4 audit) ---- */
:root{ --sp-switch-h:60px; }
.btoggle--compact .btoggle__opt{ min-height:44px; }
.text-link{ min-height:44px; }
.site-foot ul a{ display:inline-flex; align-items:center; min-height:44px; }
.site-foot ul{ gap:0; }
.motion-btn{ min-height:44px; }
.site-foot__bar a{ display:inline-flex; align-items:center; min-height:44px; }
@media (max-width:640px){ :root{ --sp-switch-h:54px; } .btoggle--compact .btoggle__opt{ min-height:44px; } }

/* "What is bMember?" answer block (Phase 6): plain text a search engine or AI tool can quote */
.answer__grid{ display:grid; gap:1rem 3rem; }
.answer__q{ margin:0; }
.answer__a .lede{ max-width:none; color:var(--sp-fg); margin:0 0 .75rem; }
.answer__a p{ max-width:62ch; color:var(--sp-ink-muted); margin:0; }
@media (min-width:1024px){ .answer__grid{ grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); align-items:start; } }

/* Security and POPIA (home): text beside the list, no numbers */
.secure__aside{ display:grid; gap:1rem; align-content:start; }
.secure__aside .lede{ margin:0; }