/* ==========================================================================
   Novus website — MOBILE-FIRST layout (P2 rebuild, 2026-07-02)
   Base styles target the phone; larger screens are layered with min-width queries.
   Colour/spacing/type come ONLY from tokens.css role tokens — no raw values.
   ========================================================================== */

@font-face{font-family:"Carlito";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/carlito-latin-400-normal.a29c4a4e.woff2") format("woff2");}
@font-face{font-family:"Carlito";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/carlito-latin-700-normal.af249cfe.woff2") format("woff2");}
:root{--font-sans:"Carlito","Calibri",system-ui,-apple-system,sans-serif;}

*{box-sizing:border-box;}
/* overflow-x:clip, not hidden: the off-canvas .menu is position:fixed and
   translated 100% off-screen, which widens the document at narrow widths
   (8px of horizontal scroll at 320px). `clip` suppresses that without
   creating a scroll container, so position:sticky on .appbar still works. */
html{scroll-behavior:smooth;scroll-padding-top:64px;-webkit-text-size-adjust:100%;
  overflow-x:clip;}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-sans, "Carlito","Calibri",system-ui,sans-serif);
  font-size:var(--text-base);line-height:1.6;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--accent-text);text-underline-offset:2px;}

/* Shared centred column */
.wrap{width:100%;max-width:var(--container,1200px);margin-inline:auto;
  padding-inline:var(--gutter,20px);}
.section{padding-block:clamp(2.5rem,7vw,5rem);}
.band{background:var(--bg-subtle);}       /* alternating ground */
h1,h2,h3{line-height:1.15;color:var(--text);}
h1{font-size:clamp(2rem,8vw,3.5rem);font-weight:var(--weight-bold);letter-spacing:-.01em;}
h2{font-size:clamp(1.5rem,5vw,2.25rem);font-weight:var(--weight-bold);margin:0 0 var(--space-3);}
h3{font-size:clamp(1.15rem,3.5vw,1.4rem);font-weight:var(--weight-bold);}
.eyebrow{font-size:var(--text-sm);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary);font-weight:var(--weight-bold);margin:0 0 var(--space-2);}
.muted{color:var(--text-secondary);}
.lede{font-size:clamp(1rem,2.6vw,1.2rem);color:var(--text-secondary);max-width:62ch;}

/* ---------- App bar / header (mobile-first) ---------- */
/* tokens.css gives .appbar a 1px bottom border; removed on request. The bar
   is sticky over the page ground, so it still reads as a separate layer. */
.appbar{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:0;}
.appbar__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  min-height:56px;}
.brandlink{display:inline-flex;align-items:center;min-height:44px;}
.brandlink img{height:26px;width:auto;}
.appbar__right{display:flex;align-items:center;gap:var(--space-2);}
.iconbtn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;
  color:var(--text);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.iconbtn:hover{border-color:var(--accent);color:var(--accent-text);}
.iconbtn svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.cta-mini{display:none;}            /* header "Talk to us" hidden on phone (in the menu instead) */

/* Mobile menu toggle — pure CSS (checkbox + <label>s), so it works on iOS Safari
   with zero JavaScript. The hidden checkbox holds open/closed state; the burger
   and close controls are <label for="navToggle">, which toggle it natively. */
.nav-toggle-cb{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;}

/* full-screen mobile menu overlay */
.menu{position:fixed;inset:0;z-index:60;background:var(--surface);
  display:flex;flex-direction:column;padding:var(--space-5) var(--gutter);
  transform:translateX(100%);transition:transform .22s ease;visibility:hidden;
  overflow-y:auto;-webkit-overflow-scrolling:touch;}
.menu__backdrop{display:none;}
/* open when the checkbox is checked (primary) — data-open kept as a JS-optional alias */
.nav-toggle-cb:checked ~ .menu,
.menu[data-open="true"]{transform:none;visibility:visible;}
.nav-toggle-cb:checked ~ .menu__backdrop{display:block;position:fixed;inset:0;z-index:55;
  background:transparent;}
body:has(.nav-toggle-cb:checked){overflow:hidden;}
.menu__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);}
.menu__links{display:flex;flex-direction:column;gap:var(--space-1);}
.menu__links a{display:flex;align-items:center;min-height:52px;text-decoration:none;
  color:var(--text);font-size:var(--text-xl);font-weight:var(--weight-medium);
  border-bottom:1px solid var(--border);}
.menu__cta{margin-top:var(--space-5);}
.navlinks{display:none;}             /* desktop inline nav hidden on phone */

/* ---------- Buttons / rows ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:.6rem 1.15rem;border-radius:var(--radius-md);
  font-weight:var(--weight-bold);font-size:var(--text-base);text-decoration:none;
  border:1px solid transparent;cursor:pointer;touch-action:manipulation;
  transition:background .15s,border-color .15s,box-shadow .15s;}
.btn--primary{background:var(--accent);color:var(--text-on-accent);}
.btn--primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-2);}
.btn--secondary{background:transparent;color:var(--accent-text);border-color:var(--border-strong);}
.btn--secondary:hover{background:var(--accent-subtle);border-color:var(--accent);}
.btn--lg{min-height:52px;padding:.8rem 1.5rem;font-size:var(--text-lg);}
.row{display:flex;flex-direction:column;gap:var(--space-3);}      /* stacks on phone */
.row .btn{width:100%;}

/* ---------- Hero (mobile-first: content first, radar de-prioritised) ---------- */
.hero .wrap{display:flex;flex-direction:column;gap:var(--space-4);}
.hero__radar{order:5;max-width:360px;margin-inline:auto;width:100%;}   /* below CTAs on phone */
/* tighten the hero → "Who we are" transition (was double section padding) */
.section.hero{padding-bottom:clamp(1.25rem,3vw,2rem);}
#who{padding-top:clamp(1.5rem,3.5vw,2.5rem);}

/* "Who we are" — story left, journey timeline right (fills the freed space; keeps copy readable) */
.who-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5);}
.who-aside{align-self:start;background:var(--bg-subtle);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--space-5);}
.timeline{list-style:none;margin:var(--space-3) 0 0;padding:0;position:relative;}
.timeline li{position:relative;padding:0 0 var(--space-4) var(--space-5);}
.timeline li:last-child{padding-bottom:0;}
.timeline li::before{content:"";position:absolute;left:5px;top:6px;bottom:-6px;width:2px;background:var(--border);}
.timeline li:last-child::before{display:none;}
.timeline li::after{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle);}
.timeline__when{display:block;font-weight:var(--weight-bold);color:var(--accent-text);font-size:var(--text-sm);}
.timeline__what{display:block;color:var(--text-secondary);}
@media (min-width:900px){
  /* title + eyebrow sit full-width above; the grid starts at the body copy, so the
     journey card aligns with the top of the body text (not the title). */
  .who-grid{grid-template-columns:1.15fr .85fr;gap:var(--space-7);align-items:start;}
  /* nudge down by the first line's leading so the box edge meets the text's visible top */
  .who-aside{margin-top:.35rem;}
}

/* ---------- Hero money-flow map (SVG + CSS, reduced-motion-safe) ---------- */
.hero-map{display:block;width:100%;height:auto;color:var(--accent);}
/* real continents (orthographic Natural Earth) filled subtle blue; oceans transparent */
.hero-map .globe-sphere{stroke:none;}
.hero-map .globe-ring{stroke:var(--accent);stroke-opacity:.30;stroke-width:1.3;}
.hero-map .land{fill:url(#novaLand);}
.hero-map .grid{fill:none;stroke:var(--accent);opacity:.11;stroke-width:.8;}
.hero-map .rail{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:.30;}
.hero-map .flow{fill:none;stroke:var(--accent-text);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:2 13;animation:novaflow 1.5s linear infinite;}
/* Novus-presence markers — ORANGE dots on the operating countries */
.hero-map .node{fill:var(--orange-400);stroke:var(--surface);stroke-width:1.1;}
.hero-map .hub{fill:var(--orange-400);}
.hero-map .hub-core{fill:var(--text-on-accent);}
.hero-map .ring{fill:none;stroke:var(--orange-400);stroke-width:1.4;opacity:.5;
  transform-box:fill-box;transform-origin:center;animation:novapulse 2.8s ease-out infinite;}
.hero-map .ring--hub{stroke-width:1.8;animation-duration:2.2s;}
.hero-map .lbl{fill:var(--text-secondary);font-family:var(--font-sans);font-size:8.5px;font-weight:var(--weight-medium);}
.hero-map .lbl--hub{fill:var(--accent-text);font-size:9.5px;font-weight:var(--weight-bold);}
@keyframes novaflow{to{stroke-dashoffset:-60;}}
@keyframes novapulse{0%{transform:scale(1);opacity:.55;}70%{transform:scale(3);opacity:0;}100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  .hero-map .flow{animation:none;stroke-dasharray:4 7;opacity:.55;}   /* static dotted rails */
  .hero-map .ring{animation:none;opacity:.28;}
}

.hero .row .btn{width:100%;}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  column-gap:var(--space-5);row-gap:var(--space-4);margin-top:var(--space-2);}
/* hero key figures: evenly spread across the full width (2×2 on phones, 4 across ≥600) */
.hero .statrow{grid-template-columns:repeat(2,1fr);}
@media (min-width:600px){ .hero .statrow{grid-template-columns:repeat(4,1fr);} }
.stat{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.stat__value{font-size:clamp(1.6rem,6vw,2.25rem);line-height:1.05;font-weight:var(--weight-bold);
  color:var(--accent-text);white-space:nowrap;}
.stat__label{font-size:var(--text-sm);color:var(--text-secondary);}

/* ---------- Inline icons (from build.py `icon()`) ----------
   The SVGs arrive with no width/height so they must be sized here; left
   alone an <svg> fills its containing block, which is how the arrow beside
   "Explore" once rendered the size of a dinner plate. 1em square tracks
   the surrounding text; -0.125em pulls it onto the x-height baseline.
   Paint attributes stay on the SVG itself so a future icon can opt out. */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex:none;}

/* ---------- Card grids ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);}
.card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);
  padding:var(--space-5);box-shadow:var(--shadow-1);}
.card--link{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:var(--space-2);
  transition:transform .15s,box-shadow .15s,border-color .15s;}
.card--link:hover{transform:translateY(-4px);box-shadow:var(--shadow-3);border-color:var(--accent);}
.card__kicker{font-size:var(--text-sm);color:var(--text-secondary);}
.card__more{margin-top:auto;color:var(--accent-text);font-weight:var(--weight-bold);
  display:inline-flex;align-items:baseline;gap:.35em;}
.card__more .ico{transition:translate .15s ease-out;}
.card--link:hover .card__more .ico,
.card--link:focus-visible .card__more .ico{translate:3px 0;}

/* ---------- Reveal disclosure (e.g. "Meet the leadership team") — native, no JS ---------- */
.reveal>summary{list-style:none;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  padding:.6rem 1.2rem;border:1px solid var(--border-strong);border-radius:var(--radius-md);
  background:transparent;color:var(--accent-text);font-weight:var(--weight-bold);cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s;}
.reveal>summary::-webkit-details-marker{display:none;}
.reveal>summary::after{content:"\25BE";font-size:.85em;transition:transform .15s;}
.reveal[open]>summary::after{transform:rotate(180deg);}
.reveal>summary:hover{background:var(--accent-subtle);border-color:var(--accent);}
.reveal__body{margin-top:var(--space-5);}

/* ---------- Leadership: round-photo grid + pure-CSS :target detail ---------- */
/* Mobile-first: grid of tappable round photos; each opens a full-screen bottom
   sheet via :target (no JS, so it works on iOS Safari). Desktop centres it. */
.lead-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:var(--space-4) var(--space-3);}
.lead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;
  text-decoration:none;color:inherit;padding:var(--space-2);border-radius:var(--radius-lg);
  min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform .15s;}
.lead:hover{transform:translateY(-3px);}
.lead__photo{width:clamp(88px,24vw,128px);aspect-ratio:1;border-radius:50%;object-fit:cover;
  border:2px solid var(--border);background:var(--bg-subtle);
  transition:border-color .15s,box-shadow .15s;}
.lead:hover .lead__photo,.lead:focus-visible .lead__photo{border-color:var(--accent);box-shadow:var(--shadow-2);}
.lead__name{font-weight:var(--weight-bold);line-height:1.2;margin-top:.3rem;}
.lead__role{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.25;}

.lmodal{display:none;}
.lmodal:target{display:flex;position:fixed;inset:0;z-index:70;
  align-items:flex-end;justify-content:center;}     /* bottom sheet on phones */
.lmodal__backdrop{position:absolute;inset:0;background:var(--scrim);border:0;}
.lmodal__panel{position:relative;z-index:1;width:100%;max-width:560px;max-height:92vh;
  overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:var(--space-6) var(--gutter) var(--space-7);box-shadow:var(--shadow-3);}
.lmodal__close{position:absolute;top:var(--space-3);right:var(--space-3);}
.lmodal__photo{width:112px;height:112px;border-radius:50%;object-fit:cover;
  border:2px solid var(--border);background:var(--bg-subtle);margin-bottom:var(--space-3);}
.lmodal__name{margin:0;}
.lmodal__role{color:var(--accent-text);font-weight:var(--weight-medium);margin:.15rem 0 var(--space-3);}
.lmodal__panel p{margin:0 0 var(--space-3);color:var(--text-secondary);}
.lmodal__li{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  color:var(--accent-text);font-weight:var(--weight-bold);text-decoration:none;touch-action:manipulation;}
.lmodal__li:hover{text-decoration:underline;}
body:has(.lmodal:target){overflow:hidden;}
@media (min-width:600px){
  .lmodal:target{align-items:center;padding:var(--gutter);}   /* centred dialog on ≥tablet */
  .lmodal__panel{border-radius:var(--radius-xl);}
}

/* product lockup (from tokens .vlogo language) */
.vlogo{display:flex;align-items:center;gap:.5rem;}
.vlogo .vmark{height:1.7rem;width:1.7rem;flex:0 0 auto;fill:none;stroke:var(--accent-text);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.wm{font-weight:var(--weight-bold);font-size:var(--text-xl);line-height:1;}
.wm .nm{color:var(--blue-400);} .wm .sf{color:var(--accent-text);}
.theme-novaboost .vlogo .vmark{stroke:var(--accent);} .theme-novaboost .wm .sf{color:var(--accent);}

/* ---------- Value-chain journey (Accept → Process → Control → Expand) ----------
   Mobile-first: vertical connected steps with a growing cumulative-value meter.
   Desktop: horizontal rail. Tap a step to expand its detail (native <details>). */
.chain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;counter-reset:none;}
.chain>li{position:relative;}
/* vertical connector joining each step to the previous (mobile) */
.chain>li+li::before{content:"";position:absolute;left:calc(var(--space-4) + 16px);
  top:calc(-1 * var(--space-4));height:var(--space-4);width:2px;background:var(--accent);opacity:.45;}
.chain__step{margin-bottom:var(--space-4);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-1);overflow:hidden;}
.chain__head{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;column-gap:var(--space-3);row-gap:var(--space-2);padding:var(--space-4);
  min-height:56px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.chain__head::-webkit-details-marker{display:none;}
.chain__num{grid-row:1;width:34px;height:34px;border-radius:50%;background:var(--accent);
  color:var(--text-on-accent);display:inline-flex;align-items:center;justify-content:center;
  font-weight:var(--weight-bold);flex:0 0 auto;}
.chain__label{grid-row:1;display:flex;flex-direction:column;gap:.05rem;min-width:0;}
.chain__tag{font-weight:var(--weight-bold);color:var(--text);line-height:1.25;}
.chain__head::after{grid-row:1;content:"+";color:var(--accent-text);font-size:1.35em;line-height:1;}
.chain__step[open] .chain__head::after{content:"–";}
.chain__meter{grid-column:1 / -1;grid-row:2;height:6px;border-radius:var(--radius-pill);
  background:var(--bg-muted);overflow:hidden;}
.chain__meter>span{display:block;height:100%;background:var(--accent);border-radius:inherit;}
.chain__desc{margin:0;padding:0 var(--space-4) var(--space-4);color:var(--text-secondary);}
.chain__cap{margin-top:var(--space-3);color:var(--text-secondary);font-size:var(--text-sm);}
@media (min-width:900px){
  .chain{flex-direction:row;align-items:start;gap:var(--space-3);}
  .chain>li{flex:1;display:flex;}
  .chain>li+li::before{left:calc(-1 * var(--space-3));top:28px;height:2px;width:var(--space-3);}
  .chain__step{margin-bottom:0;width:100%;}
  /* meter reads as a continuous widening value bar across the rail */
}

/* ---------- Platform composition — products built on modular components ----------
   Portfolio products (novabank/pay/store/trust) sit above three modular components
   (novahub/novaware/novaserve); novaai is a band spanning all three (permanent
   interaction). Mobile: novaai band on top of three stacked component cards.
   Desktop: three components in a row + novaai vertical band beside, spanning height.
   Tap teaches composition (JS enhancement; fully legible without JS). */
.compose{margin-top:var(--space-5);}
.compose__row{display:grid;gap:var(--space-3);}
.compose__products{grid-template-columns:1fr 1fr;}
.compose__joiner{display:flex;align-items:center;gap:var(--space-2);color:var(--text-secondary);
  font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.08em;margin:var(--space-4) 0;}
.compose__joiner::before,.compose__joiner::after{content:"";height:1px;flex:1;background:var(--border);}

.cmp-prod-wrap{min-width:0;}
.cmp-prod{font:inherit;text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--border);
  border-top:3px solid var(--accent);border-radius:var(--radius-md);padding:var(--space-3);min-height:44px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  transition:box-shadow .15s,border-color .15s,opacity .15s,transform .15s;}
.cmp-prod::-webkit-details-marker{display:none;}
.cmp-prod::after{content:"+";color:var(--accent-text);font-size:1.3em;line-height:1;flex:0 0 auto;}
.cmp-prod-wrap[open]>.cmp-prod{border-bottom-left-radius:0;border-bottom-right-radius:0;}
.cmp-prod-wrap[open]>.cmp-prod::after{content:"\2013";}   /* – */
.cmp-prod:hover{box-shadow:var(--shadow-2);}
/* inline peek — same reveal language as the value-chain steps / leadership sheets */
.cmp-peek{border:1px solid var(--border);border-top:none;background:var(--surface);
  border-radius:0 0 var(--radius-md) var(--radius-md);padding:var(--space-3);
  display:flex;flex-direction:column;gap:.35rem;}
.cmp-peek__tag{margin:0;color:var(--text);font-size:var(--text-sm);font-weight:var(--weight-medium);}
.cmp-peek__benefit{margin:0;color:var(--text-secondary);font-size:var(--text-sm);}
.cmp-peek__cta{margin-top:.15rem;min-height:44px;display:inline-flex;align-items:center;
  color:var(--accent-text);font-weight:var(--weight-bold);text-decoration:none;touch-action:manipulation;}
.cmp-peek__cta:hover{text-decoration:underline;}

/* the architecture group: 3 component boxes (tap to reveal detail) + novaai band */
.arch{display:grid;grid-template-columns:1fr;gap:var(--space-2);}
.arch-comp-wrap{min-width:0;}
.arch__comp{font:inherit;text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--border);
  border-bottom:3px solid var(--accent);border-radius:var(--radius-md);padding:var(--space-4);min-height:56px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;list-style:none;position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;
  padding-right:calc(var(--space-4) + 1.1em);      /* room for the +/- indicator */
  transition:box-shadow .15s,border-color .15s;}
.arch__comp::-webkit-details-marker{display:none;}
.arch__comp::after{content:"+";color:var(--accent-text);font-size:1.3em;line-height:1;
  position:absolute;top:var(--space-3);right:var(--space-4);}
.arch-comp-wrap[open]>.arch__comp{border-bottom-left-radius:0;border-bottom-right-radius:0;}
.arch-comp-wrap[open]>.arch__comp::after{content:"\2013";}
.arch__comp-tag{font-size:var(--text-sm);color:var(--text);font-weight:var(--weight-medium);}
/* novaai band — its own accent (indigo via theme-novaai). Full-width band that spans /
   sits across all three components; tap to reveal its detail below. */
.arch__ai-wrap{order:-1;min-width:0;}
.arch__ai{position:relative;cursor:pointer;border-radius:var(--radius-md);list-style:none;
  background:var(--accent-panel);border:1.5px solid var(--accent);padding:var(--space-3) var(--space-4);
  display:flex;align-items:center;justify-content:center;gap:var(--space-3);flex-wrap:wrap;min-height:56px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:box-shadow .15s;}
.arch__ai::-webkit-details-marker{display:none;}
.arch__ai::after{content:"+";color:var(--accent);font-weight:var(--weight-bold);font-size:1.2em;
  position:absolute;top:var(--space-3);right:var(--space-4);}
.arch__ai-wrap[open]>.arch__ai::after{content:"\2013";}
.arch__ai-in{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;justify-content:center;}
.arch__ai-note{font-size:var(--text-sm);color:var(--text-secondary);}
.arch__ai-pips{position:absolute;display:flex;left:0;right:0;bottom:-4px;justify-content:space-around;padding:0 22%;}
.arch__ai-pips i{width:8px;height:8px;border-radius:50%;background:var(--accent);
  animation:novapulse2 2s ease-out infinite;}
.arch__ai-pips i:nth-child(2){animation-delay:.5s;} .arch__ai-pips i:nth-child(3){animation-delay:1s;}
@keyframes novapulse2{0%,100%{opacity:.35;transform:scale(1);}50%{opacity:1;transform:scale(1.3);}}
.arch .cmp-peek .caplist{padding:var(--space-3) 0 0;}

/* tap-to-teach: POSITIVE highlight only (no dimming of the rest — avoids the "everything
   looks shaded" effect). Selected/related boxes get an accent ring + soft accent wash. */
.cmp-prod.sel,.arch__comp.sel,.arch__ai.sel,
.cmp-prod.lit,.arch__comp.lit,.arch__ai.lit{border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-subtle), var(--shadow-2);}
.stack__cap{margin-top:var(--space-3);color:var(--text-secondary);font-size:var(--text-sm);}

/* Generic disclosure card — tap reveals detail/examples (Industries, Service-as-Software).
   Native <details>; same reveal language as the value-chain steps. */
.discard{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);
  box-shadow:var(--shadow-1);overflow:hidden;}
.discard>summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--space-3);padding:var(--space-4);min-height:56px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.discard>summary::-webkit-details-marker{display:none;}
.discard>summary::after{content:"+";color:var(--accent-text);font-size:1.3em;line-height:1;flex:0 0 auto;}
.discard[open]>summary::after{content:"\2013";}
.discard>summary>span{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.discard__t{display:block;font-weight:var(--weight-bold);color:var(--text);line-height:1.2;}
.discard__sub{display:block;font-size:var(--text-sm);color:var(--text-secondary);line-height:1.3;}
.discard__body{padding:0 var(--space-4) var(--space-4);}
.discard__body .caplist{padding:0;margin:0;}

@media (min-width:600px){ .compose__products{grid-template-columns:repeat(4,1fr);} }
@media (min-width:900px){
  /* three components in a row; novaai as a full-width band beneath them (spans all three,
     and can expand its detail cleanly downward — a narrow vertical band could not). */
  .arch{grid-template-columns:repeat(3,1fr);align-items:start;}
  .arch-comp-wrap{grid-row:1;}
  .arch__ai-wrap{order:0;grid-column:1 / -1;grid-row:2;}
  .arch__ai-pips{left:0;right:0;top:-4px;bottom:auto;padding:0 30%;}
}
@media (prefers-reduced-motion:reduce){ .arch__ai-pips i{animation:none;opacity:.6;} }

/* ---------- Platform page ---------- */
.ppage__head{display:flex;flex-direction:column;gap:var(--space-3);}
/* Product key statement — a borderless pull-statement (accent rule + large quote), NOT a box.
   The eyebrow sits above; the line reads as a headline statement, not a floating panel. */
.hero-panel{background:none;border:0;border-left:3px solid var(--accent);
  border-radius:0;padding:var(--space-2) 0 var(--space-2) var(--space-4);}
.hero-panel .eyebrow{color:var(--accent-text);}
.hero-panel__lead{font-size:clamp(1.25rem,3.4vw,1.6rem);color:var(--text);margin:.3rem 0 0;
  line-height:1.3;font-weight:var(--weight-medium);}
/* Platform-layer cards — branded lockup cards (icon + two-tone wordmark + accent strip).
   Static (informational) so no hover lift. Accent comes from the card's theme class,
   or the default deep-blue accent for novahub/novaware/novaserve. */
.platform-card{border-top:3px solid var(--accent);display:flex;flex-direction:column;gap:var(--space-1);}
.platform-card .vlogo .vmark{height:2rem;width:2rem;}
.platform-card .vlogo .wm{font-size:var(--text-xl);}
.spec-table{width:100%;border-collapse:collapse;margin-top:var(--space-3);}
.spec-table th,.spec-table td{text-align:left;padding:.7rem .5rem;border-bottom:1px solid var(--border);
  vertical-align:top;font-size:var(--text-base);}
.spec-table th{width:40%;color:var(--text-secondary);font-weight:var(--weight-medium);}
.bullets{list-style:none;padding:0;margin:var(--space-2) 0 0;display:flex;flex-direction:column;gap:.5rem;}
.bullets li{display:flex;gap:.5rem;}
.bullets li::before{content:"\203A";color:var(--accent-text);font-weight:var(--weight-bold);flex:0 0 auto;}
.breadcrumb{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-2);}
.breadcrumb a{color:var(--text-secondary);}

/* Native accordion (progressive disclosure — no JS, iOS-safe) */
.acc{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);
  overflow:hidden;}
.acc+.acc{margin-top:var(--space-3);}
.acc>summary{list-style:none;cursor:pointer;padding:var(--space-3) var(--space-4);
  min-height:52px;display:flex;align-items:center;justify-content:space-between;
  font-weight:var(--weight-bold);color:var(--text);touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;}
.acc>summary::-webkit-details-marker{display:none;}
.acc>summary::after{content:"+";font-size:1.35em;line-height:1;color:var(--accent-text);margin-left:var(--space-3);}
.acc[open]>summary::after{content:"–";}
.acc[open]>summary{border-bottom:1px solid var(--border);}
.caplist{list-style:none;margin:0;padding:var(--space-3) var(--space-4);display:grid;
  grid-template-columns:1fr;gap:.6rem;}
.caplist li{position:relative;padding-left:1.4rem;color:var(--text);line-height:1.45;}
.caplist li::before{content:"\203A";position:absolute;left:0;color:var(--accent-text);
  font-weight:var(--weight-bold);}
.acc .spec-table{margin:0;}
.acc .spec-table th,.acc .spec-table td{padding-left:var(--space-4);padding-right:var(--space-4);}
@media (min-width:900px){ .caplist{grid-template-columns:1fr 1fr;gap:.6rem var(--space-5);} }

/* ---------- Footer ---------- */
.foot{background:var(--surface);border-top:1px solid var(--border);}
.foot__cta{display:flex;flex-direction:column;gap:var(--space-3);
  padding-block:var(--space-6);border-bottom:1px solid var(--border);}
.foot__cols{display:grid;grid-template-columns:1fr;gap:var(--space-5);padding-block:var(--space-6);}
.foot h4{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-secondary);margin:0 0 var(--space-2);}
.foot a{display:block;color:var(--text);text-decoration:none;padding-block:6px;min-height:32px;}
.foot a:hover{color:var(--accent-text);}
.foot__legal{font-size:var(--text-sm);color:var(--text-secondary);padding-block:var(--space-4);
  border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;}

/* ============================ TABLET ≥ 600px ============================ */
@media (min-width:600px){
  .row{flex-direction:row;flex-wrap:wrap;}
  .row .btn{width:auto;}
  .grid--2{grid-template-columns:repeat(2,1fr);}
  .grid--3{grid-template-columns:repeat(2,1fr);}
  .foot__cols{grid-template-columns:repeat(2,1fr);}
  .foot__cta{flex-direction:row;align-items:center;justify-content:space-between;}
}

/* ============================ DESKTOP ≥ 900px ============================ */
@media (min-width:900px){
  html{scroll-padding-top:72px;}
  .appbar__inner{min-height:64px;}
  .iconbtn.menu-toggle{display:none;}          /* hamburger hidden on desktop */
  .navlinks{display:flex;align-items:center;gap:var(--space-5);}
  .navlinks a{color:var(--text);text-decoration:none;font-weight:var(--weight-medium);
    min-height:44px;display:inline-flex;align-items:center;}
  .navlinks a:hover{color:var(--accent-text);}
  .cta-mini{display:inline-flex;}
  .menu{display:none;}
  /* hero becomes two-column, radar returns to the side */
  .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:var(--space-6);}
  .hero__radar{align-self:center;}
  .hero__copy{grid-column:1;}
  /* cap the globe so a square SVG doesn't blow the row height and leave a void under the copy */
  .hero__radar{order:0;grid-column:2;max-width:420px;margin-inline:auto;}
  .grid--3{grid-template-columns:repeat(3,1fr);}
  .grid--4{grid-template-columns:repeat(4,1fr);}
  .grid--5{grid-template-columns:repeat(5,1fr);}
  .foot__cols{grid-template-columns:2fr 1fr 1fr 1fr;}
  .ppage__head{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-6);align-items:start;}
}

/* ============================ WIDE ≥ 1200px ============================ */
@media (min-width:1200px){
  .grid--3{gap:var(--space-5);}
}

/* motion + a11y */
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto;}}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm);}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:var(--gutter);top:8px;position:fixed;z-index:80;background:var(--surface);
  padding:.6rem 1rem;border:1px solid var(--accent);border-radius:var(--radius-sm);}