/* ============================================================================
   css/npdeck.css — Animated hub deck (homepage POINT B band).
   SLICE B: restyled for the LIVE dark-navy homepage. Structure, card count,
   links, JS behavior, autoplay, slider, +25% height (288px) and i18n keys are
   UNCHANGED from 59dbc8a — this is color/contrast/icon polish only.

   All selectors prefixed .npdeck-* / #npdeck-* (collision guard vs the OFW
   bundle .deck-card). Palette vars scoped to #npdeck-band; nothing leaks.

   Dark-context rules:
     • Cards INVERT to cream (#FAF7F0) + navy text → pop off the navy page.
     • Lead (Blueprints) card stays navy + 1.5px gold border + gold outer glow.
     • Side cards: scale(.88) + brightness(.93), still solid (opacity ≥ .9).
     • 288px height distributed via flex column, CTA anchored to the bottom.
     • Icons: navy tiles + gold line-SVG (injected by js/npdeck.js per data-v).
     • Band background transparent — deck sits natively on the navy page.
   ============================================================================ */

#npdeck-band{
  --nd-navy:#0C1830; --nd-navy2:#152442; --nd-navy3:#1C2E52;
  --nd-gold:#D9A93C; --nd-gold-hi:#EBC15E; --nd-gold-deep:#B78A24; --nd-gold-soft:#F5E7C4;
  --nd-cream:#FAF7F0; --nd-ink:#18202F; --nd-muted:#5C6579; --nd-line:#E8E1D1;
  --nd-sh-md:0 2px 4px rgba(0,0,0,.18),0 12px 30px rgba(0,0,0,.28);
  --nd-sh-lg:0 8px 18px rgba(0,0,0,.30),0 26px 52px rgba(0,0,0,.42);
  --nd-sh-gold:0 8px 24px rgba(217,169,60,.38),0 2px 6px rgba(183,138,36,.25);
  --nd-r-lg:22px;

  position:relative;
  z-index:5;
  width:100%;
  max-width:100%;
  background:transparent;                  /* sit natively on the navy page */
  padding:clamp(20px,5vw,34px) 0 clamp(10px,3vw,18px);
  /* SLICE I: fill the screen below the 69px sticky header so the short deck no
     longer leaves the hero peeking; center the carousel vertically. svh avoids
     the mobile-chrome height jump; the vh line is the fallback for old engines. */
  min-height:calc(100vh - 69px);           /* fallback */
  min-height:calc(100svh - 69px);
  min-height:var(--np-avail, calc(100svh - 69px));   /* device-true (JS) */
  min-height:calc(100dvh - var(--np-header, 69px));   /* SLICE K native dynamic viewport */
  display:flex;
  flex-direction:column;
  justify-content:center;
  font-family:'Figtree',system-ui,sans-serif;
}

/* ── carousel track (self-contained horizontal scroll; never widens page) ──
   SLICE D big cards: width = min(442px, 88vw). Centering pad = 50vw - halfCard,
   floored at 4.5vw so the ≥8px side-card peek survives at 360px (gap trimmed to
   12px). max() picks 4.5vw on phones (card = 88vw) and 50vw-221px on wide
   screens (card = 442px). Works full-width at every breakpoint. */
#npdeck-carousel{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:26px max(calc(50vw - 221px), 10vw) 16px;   /* 221 = half of 442; 10vw = (100-80)/2 centers the 80vw phone card */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  max-width:100%;
}
#npdeck-carousel::-webkit-scrollbar{display:none}

.npdeck-card{
  scroll-snap-align:center;
  flex:none;
  width:min(442px, 80vw);                  /* ×1.6 of 276 → 442 on wide screens; 80vw on phones keeps a ≥8px side-card peek despite the .88 scale */
  min-height:461px;                        /* ×1.6 of 288px */
  display:flex;
  flex-direction:column;                   /* vertical balance: CTA anchored bottom */
  background:var(--nd-cream);              /* INVERT → cream card pops off navy */
  border:1px solid rgba(232,225,209,.9);
  border-radius:28px;
  padding:30px 30px 32px;                   /* SLICE W — tighter uniform padding for filled cards */
  box-shadow:var(--nd-sh-md);
  transform:scale(.88);
  opacity:.92;                             /* side cards stay solid, never ghosts */
  filter:brightness(.93);
  transition:transform .35s cubic-bezier(.22,.8,.3,1),opacity .35s,box-shadow .35s,filter .35s;
  text-align:left;
  position:relative;
  overflow:hidden;
  color:var(--nd-ink);
}
.npdeck-card.npdeck-active{
  transform:scale(1);
  opacity:1;
  filter:none;
  box-shadow:var(--nd-sh-lg);
  animation:npdeck-floaty 3.4s ease-in-out infinite;
}
@keyframes npdeck-floaty{0%,100%{translate:0 0}50%{translate:0 -5px}}
.npdeck-card.npdeck-active::after{
  content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(217,169,60,.16),transparent);
  animation:npdeck-sheen 3.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes npdeck-sheen{0%,55%,100%{left:-80%}25%{left:120%}}
.npdeck-card:focus-visible{outline:3px solid var(--nd-gold);outline-offset:3px}

/* icon tile: navy with a gold line icon (SVG injected by js/npdeck.js) */
.npdeck-ci{
  width:70px;height:70px;border-radius:24px;flex:none;   /* SLICE W — uniform 70px tile on all 4 cards */
  background:linear-gradient(150deg,var(--nd-navy3),var(--nd-navy));
  border:1px solid rgba(217,169,60,.35);
  display:grid;place-items:center;font-size:0;   /* hides emoji fallback once SVG is injected */
  color:var(--nd-gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);margin-bottom:0;
}
/* SLICE W — shared TOP ROW: icon tile left, gold action pill right */
.npdeck-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.npdeck-ci svg{width:45px;height:45px;display:block}   /* ~×1.6 of 28 */
.npdeck-ci img.npdeck-np{width:62px;height:62px;object-fit:contain;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}   /* SLICE S->T 78; SLICE (tile 70) logo->62 to fit 70px tile w/ slim margin */
.npdeck-feat{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.npdeck-feat li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.3;color:var(--nd-muted)}
.npdeck-feat li::before{content:'\2713';position:absolute;left:0;top:-1px;color:var(--nd-gold-deep);font-weight:800;font-size:15px}
.npdeck-card.npdeck-navy .npdeck-feat li{color:rgba(255,255,255,.85)}
.npdeck-card.npdeck-navy .npdeck-feat li::before{color:var(--nd-gold-hi)}
.npdeck-feat-food::before{content:'\1F373';font-size:12px;top:0}   /* SLICE W — food-only line, distinct marker */
.npdeck-dash{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;line-height:1.3;color:var(--nd-gold-hi);cursor:pointer;text-decoration:none;border-bottom:1px solid rgba(235,193,94,.42);padding-bottom:2px;align-self:flex-start;margin-top:14px}
.npdeck-dash:hover,.npdeck-dash:focus-visible{color:#fff;border-bottom-color:#fff}
.npdeck-card :is(h2,h3,.npdeck-title){font-family:'Figtree',sans-serif;font-size:23px;font-weight:800;letter-spacing:-.01em;line-height:1.2;margin:0;color:var(--nd-ink)}   /* ×1.35 */
/* bold hook line between title and sub — per-card theme (ink on cream, gold on navy) */
.npdeck-sub{font-weight:600}   /* subtitle: reuses the card's existing p sub-style (17px muted, white-75 on navy via [data-v] p); +weight pairs it under the title */
.npdeck-hook{font-size:16px;font-weight:800;line-height:1.32;margin:11px 0 0;color:var(--nd-ink)}
.npdeck-card.npdeck-navy .npdeck-hook{color:var(--nd-gold-hi)}
.npdeck-card p{font-size:17px;color:var(--nd-muted);margin-top:7px;line-height:1.45}   /* sub — shipped size kept */
.npdeck-go{
  display:inline-flex;align-items:center;gap:6px;flex:none;   /* SLICE W — top-row pill */
  background:linear-gradient(135deg,var(--nd-gold-hi),var(--nd-gold) 55%,var(--nd-gold-deep));
  color:var(--nd-navy);font-weight:800;font-size:14px;padding:9px 16px;border-radius:999px;
  box-shadow:var(--nd-sh-gold),inset 0 1px 0 rgba(255,255,255,.45);white-space:nowrap;
}
.npdeck-badge{
  display:inline-flex;align-items:center;vertical-align:middle;margin-left:9px;transform:translateY(-2px);
  background:linear-gradient(135deg,var(--nd-gold-hi),var(--nd-gold));color:var(--nd-navy);
  font-size:11px;font-weight:800;letter-spacing:.5px;border-radius:999px;padding:3px 10px;
}
/* SOON marker (Courses RAG offering) — gold-OUTLINE variant of the badge (not the
   filled FREE style), smaller caps; honesty marker for the not-yet-purchasable course */
.npdeck-badge--soon{
  background:none;border:1px solid var(--nd-gold);color:var(--nd-gold-deep);
  font-size:9px;letter-spacing:.6px;padding:2px 8px;
}
/* Courses card — two stacked title+subtitle offerings. Card-scoped h3 size-down so
   two headings fit gracefully; the badge is a SIBLING of the h3 (never a child of a
   data-i18n node — that pattern gets textContent-wiped by the i18n apply()). */
.npdeck-card[data-v="courses"] :is(h2,h3,.npdeck-title){font-size:19px}
.npdeck-offer + .npdeck-offer{margin-top:11px}
.npdeck-offer .npdeck-sub{font-size:14px;margin-top:2px}
.npdeck-offer-row{display:flex;align-items:center;flex-wrap:wrap;gap:2px 0}
.npdeck-offer-row .npdeck-badge--soon{transform:none}   /* sit on the text baseline in the flex row (incl. when wrapped) */

/* ── lead (navy) card: gold border + soft gold glow to separate from page ── */
.npdeck-card.npdeck-navy{
  background:radial-gradient(130% 160% at 90% -20%,var(--nd-navy3),var(--nd-navy2) 55%,var(--nd-navy));
  border:1.5px solid var(--nd-gold);
  color:#fff;
}
.npdeck-card.npdeck-navy.npdeck-active{
  box-shadow:var(--nd-sh-lg),0 0 0 1px rgba(217,169,60,.4),0 0 30px rgba(217,169,60,.28);
}
.npdeck-card.npdeck-navy:not(.npdeck-active){
  box-shadow:var(--nd-sh-md),0 0 18px rgba(217,169,60,.18);
}
.npdeck-card.npdeck-navy :is(h2,h3,.npdeck-title){color:#fff}
.npdeck-card.npdeck-navy p{color:rgba(255,255,255,.75)}
.npdeck-card.npdeck-navy .npdeck-ci{background:rgba(217,169,60,.16);border-color:rgba(217,169,60,.36)}   /* SLICE T border -20%; tile size now shared 70px base */
/* Courses + Blueprints tiles hold a full transparent brand logo → FRAMELESS: no fill, no border, no rounded box; logo floats on the card */
.npdeck-card[data-v="courses"] .npdeck-ci,
.npdeck-card[data-v="blueprints"] .npdeck-ci,
.npdeck-card[data-v="feasibility"] .npdeck-ci,
.npdeck-card[data-v="matthew"] .npdeck-ci,
.npdeck-card[data-v="supplier"] .npdeck-ci,
.npdeck-card[data-v="contribute"] .npdeck-ci{background:transparent;box-shadow:none;border:0;border-radius:0}
/* Blueprints NP mark uses the padding-trimmed np-mark-tight.png; size it to match the ZAM crest's footprint on Courses */
.npdeck-card[data-v="blueprints"] .npdeck-np{width:66px;height:66px}
/* Feasibility DAMES mark (full wordmark, trimmed) → frameless + sized to match the ZAM/Blueprints footprint */
.npdeck-card[data-v="feasibility"] .npdeck-np{width:66px;height:66px}
/* Matthew logo (full wordmark, trimmed) → frameless + sized to match the ZAM/Blueprints footprint */
.npdeck-card[data-v="matthew"] .npdeck-np{width:66px;height:66px}
/* WDRICH neon logo on both supplier cards → frameless + sized to match */
.npdeck-card[data-v="supplier"] .npdeck-np,
.npdeck-card[data-v="contribute"] .npdeck-np{width:66px;height:66px}
/* Matthew card: NAVY background (its white wordmark is invisible on cream) — same navy gradient +
   gold border as the Blueprints lead card; all text flipped to light for contrast on navy */
.npdeck-card[data-v="matthew"],
.npdeck-card[data-v="supplier"],
.npdeck-card[data-v="contribute"]{background:radial-gradient(130% 160% at 90% -20%,var(--nd-navy3),var(--nd-navy2) 55%,var(--nd-navy));border:1.5px solid var(--nd-gold);color:#fff}
.npdeck-card[data-v="matthew"] :is(h2,h3,.npdeck-title),
.npdeck-card[data-v="supplier"] :is(h2,h3,.npdeck-title),
.npdeck-card[data-v="contribute"] :is(h2,h3,.npdeck-title){color:#fff}
.npdeck-card[data-v="matthew"] .npdeck-hook,
.npdeck-card[data-v="supplier"] .npdeck-hook,
.npdeck-card[data-v="contribute"] .npdeck-hook{color:var(--nd-gold-hi)}
.npdeck-card[data-v="matthew"] p,
.npdeck-card[data-v="supplier"] p,
.npdeck-card[data-v="contribute"] p{color:rgba(255,255,255,.75)}
.npdeck-card[data-v="matthew"] .npdeck-feat li,
.npdeck-card[data-v="supplier"] .npdeck-feat li,
.npdeck-card[data-v="contribute"] .npdeck-feat li{color:rgba(255,255,255,.85)}
.npdeck-card[data-v="matthew"] .npdeck-feat li::before,
.npdeck-card[data-v="supplier"] .npdeck-feat li::before,
.npdeck-card[data-v="contribute"] .npdeck-feat li::before{color:var(--nd-gold-hi)}
/* Matthew COOL-MATTE skin (crest palette) — overrides the shared navy/gold above for
   THIS card only; supplier/contribute keep the NP navy/gold. Own --mx2-* token set. */
.npdeck-card[data-v="matthew"]{
  --mx2-gold:#C2B183; --mx2-pale:#D8CBA0; --mx2-deep:#8D8471; --mx2-ink:#1A1E22;
  background:radial-gradient(130% 160% at 90% -20%,#2C2F33,#24282C 55%,#1B1E21);
  border-color:var(--mx2-gold);
}
.npdeck-card[data-v="matthew"] .npdeck-hook{color:var(--mx2-pale)}
.npdeck-card[data-v="matthew"] p{color:rgba(232,231,225,.72)}
.npdeck-card[data-v="matthew"] .npdeck-feat li{color:rgba(232,231,225,.85)}
.npdeck-card[data-v="matthew"] .npdeck-feat li::before{color:var(--mx2-gold)}
.npdeck-card[data-v="matthew"] .npdeck-go{background:linear-gradient(135deg,var(--mx2-pale),var(--mx2-gold) 55%,var(--mx2-deep));color:var(--mx2-ink)}

/* ── Matthew LITE card (→ /lite) — CREAM w/ navy text (Lite palette). Additive, data-v scoped;
   default .npdeck-card is already cream so this only sets exact Lite colours + the LITE lockup +
   a bottom-anchored navy CTA. Logo = the existing Matthew crest (inline SVG, self-contained) since
   no matthew-lite-mark.png was supplied. Every text ≥4.5:1 on the cream (see below). */
.npdeck-card[data-v="lite"]{background:#FFFCF5;border:1.5px solid #C9D4E6;color:#1F3354}
.npdeck-card[data-v="lite"] .npdeck-top{justify-content:flex-start;gap:12px}   /* crest + LITE = one lockup */
.npdeck-card[data-v="lite"] .npdeck-ci{background:transparent;box-shadow:none;border:0;border-radius:0;width:auto;height:70px}
.npdeck-card[data-v="lite"] .npdeck-lite-tag{font-family:'Figtree',sans-serif;font-weight:800;font-size:20px;letter-spacing:.14em;color:#47679C}   /* darkened from spec #5A7AA6 (4.31:1) → #47679C (5.6:1) to clear the ≥4.5 rule */
.npdeck-card[data-v="lite"] :is(h2,h3,.npdeck-title){color:#1F3354}
.npdeck-card[data-v="lite"] .npdeck-sub{color:#2F4A72}
.npdeck-card[data-v="lite"] .npdeck-hook{color:#1F3354;background:rgba(47,74,114,.08);border-left:3px solid #47679C;border-radius:0 8px 8px 0;padding:9px 12px;margin-top:13px}   /* light-navy hook band (Lite feel) */
.npdeck-card[data-v="lite"] .npdeck-litedesc{font-size:16px;line-height:1.45;color:#2F4A72;margin-top:11px}
.npdeck-card[data-v="lite"] .npdeck-lite-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:#1F3354;color:#FFFCF5;font-weight:800;font-size:15px;line-height:1;padding:14px 22px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 10px rgba(31,51,84,.28)}   /* bottom-anchored, 44px+ tap; cream-on-navy ≈12.5:1 */

/* ── gold slider (decorative; aria-hidden) — dark track ──
   SLICE D: slider track + swipe hint HIDDEN (markup + position-tracking JS stay;
   updateActive() still writes width/left to these hidden nodes — harmless). */
.npdeck-track-wrap{display:none}
.npdeck-track{position:relative;width:180px;height:5px;border-radius:999px;background:rgba(255,255,255,.22)}
.npdeck-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--nd-gold-deep),var(--nd-gold));width:0%;transition:width .15s linear}
.npdeck-thumb{position:absolute;top:50%;translate:-50% -50%;width:17px;height:17px;border-radius:50%;background:#fff;border:2.5px solid var(--nd-gold);box-shadow:0 2px 8px rgba(0,0,0,.35);left:0%;transition:left .15s linear}
.npdeck-hint{display:none}   /* SLICE D: swipe hint hidden */

/* ── 3-circle quick-action row — SLICE D: HIDDEN (markup + links stay) ── */
.npdeck-circles{display:none}
.npdeck-circ{display:flex;flex-direction:column;align-items:center;gap:8px;width:76px;min-height:44px}
.npdeck-c{
  width:64px;height:64px;border-radius:50%;
  background:var(--nd-cream);border:1.5px solid rgba(232,225,209,.85);
  display:grid;place-items:center;font-size:0;color:var(--nd-navy);
  box-shadow:var(--nd-sh-md);transition:transform .15s;
  animation:npdeck-pop .5s cubic-bezier(.34,1.4,.5,1) both;
}
.npdeck-c svg{width:26px;height:26px;display:block}
.npdeck-circ:nth-child(2) .npdeck-c{animation-delay:.08s}
.npdeck-circ:nth-child(3) .npdeck-c{animation-delay:.16s}
@keyframes npdeck-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.npdeck-circ:active .npdeck-c{transform:scale(.9)}
.npdeck-circ span{font-size:11px;font-weight:700;color:rgba(255,255,255,.9);text-align:center;line-height:1.3}
.npdeck-c.npdeck-gold{border-color:var(--nd-gold);box-shadow:var(--nd-sh-md),0 0 14px rgba(217,169,60,.3)}
.npdeck-circ:focus-visible{outline:3px solid var(--nd-gold);outline-offset:3px;border-radius:14px}

/* ── reduced motion: static deck, no autoplay/float/sheen/pop (scoped) ── */
@media (prefers-reduced-motion:reduce){
  #npdeck-band *{transition:none!important;animation:none!important}
}

/* SLICE J: pause deck float/sheen when off-screen or during active scroll (scroll smoothness) */
#npdeck-band:not(.npdeck-inview) .npdeck-card.npdeck-active,
#npdeck-band.npdeck-scrolling .npdeck-card.npdeck-active{animation:none}
#npdeck-band:not(.npdeck-inview) .npdeck-card.npdeck-active::after,
#npdeck-band.npdeck-scrolling .npdeck-card.npdeck-active::after{animation:none;opacity:0}

/* Card title = the card's link, stretched over the whole card (SEO, Oct 2026: short link text, card stays one tap
   target). The "Includes … dashboard" line sits above it so it keeps its own link. */
.npdeck-card{cursor:pointer}
.npdeck-title{display:block;text-decoration:none}
a.npdeck-title::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.npdeck-dash{position:relative;z-index:2}
a.npdeck-title:focus-visible{outline:none}
.npdeck-card:has(a.npdeck-title:focus-visible){outline:3px solid var(--nd-gold);outline-offset:3px}