/* =============================================================
   WealthWisers AI Labs, shared CASE-PAGE SHELL
   -------------------------------------------------------------
   One header, one closing CTA, and one footer for the
   walkthrough pages under /demo/cases/*. This is the single
   shared shell those pages inherit; future case pages load this
   same file and get the same chrome for free.

   It is deliberately self-contained and namespaced (.wwc-*),
   NOT site.css, because the captured product pages it sits on
   already define .btn, .section, .eyebrow, .footer, .wrap, .tier
   and their own :root tokens (a green --accent, a different
   --ink). Importing the site token system would recolour the
   captured content. So the brand values below are copied from
   colors_and_type.css and scoped to the shell roots only; the
   brand fonts are pulled in per page with a <link>. Nothing here
   leaks into the case content.
   ============================================================= */

/* Brand tokens, scoped to the shell roots so they never override
   the captured page's own :root variables. */
.wwc-header, .wwc-cta, .wwc-foot {
  --wwc-teal-900:#0f3d39; --wwc-teal-800:#115e59; --wwc-teal-700:#0f766e;
  --wwc-teal-600:#0d9488; --wwc-teal-50:#f0fdfa;
  --wwc-amber-400:#fbbf24; --wwc-amber-200:#fde68a;
  --wwc-ink:#0f172a; --wwc-slate-800:#1e293b; --wwc-slate-700:#334155;
  --wwc-slate-500:#64748b; --wwc-slate-300:#cbd5e1; --wwc-slate-200:#e2e8f0;
  --wwc-slate-100:#f1f5f9; --wwc-surface:#f8fafc; --wwc-surface-darker:#082f2b;
  --wwc-grad:linear-gradient(135deg,#0f3d39 0%,#115e59 45%,#0d9488 100%);
  --wwc-serif:'Spectral',Georgia,'Times New Roman',serif;
  --wwc-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wwc-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --wwc-ease:cubic-bezier(0.22,1,0.36,1); --wwc-dur:220ms; --wwc-dur-fast:140ms;
  --wwc-shadow-md:0 6px 20px -6px rgba(15,23,42,0.12),0 2px 6px -2px rgba(15,23,42,0.06);
}

/* shared inner width, aligns with the case .page (max 1180) */
.wwc-wrap{max-width:1180px;margin:0 auto;padding:0 40px;}
@media (max-width:880px){ .wwc-wrap{padding:0 24px;} }

/* ---------- buttons ---------- */
.wwc-btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--wwc-sans);
  font-weight:600;font-size:17px;line-height:1;white-space:nowrap;text-decoration:none;
  padding:15px 26px;border-radius:6px;border:1.5px solid transparent;cursor:pointer;
  transition:background var(--wwc-dur) var(--wwc-ease),border-color var(--wwc-dur) var(--wwc-ease),
             box-shadow var(--wwc-dur) var(--wwc-ease),transform var(--wwc-dur-fast) var(--wwc-ease);
}
.wwc-btn svg{width:18px;height:18px;flex:none;}
.wwc-btn-primary{background:var(--wwc-teal-600);color:#fff;}
.wwc-btn-primary:hover{background:var(--wwc-teal-700);box-shadow:var(--wwc-shadow-md);transform:translateY(-1px);}
.wwc-btn-secondary{background:transparent;color:var(--wwc-teal-800);border-color:var(--wwc-slate-300);}
.wwc-btn-secondary:hover{border-color:var(--wwc-teal-600);color:var(--wwc-teal-900);}
.wwc-btn-ondark{background:var(--wwc-amber-400);color:#3a2503;}
.wwc-btn-ondark:hover{background:var(--wwc-amber-200);box-shadow:var(--wwc-shadow-md);transform:translateY(-1px);}
.wwc-btn-ondark-ghost{background:transparent;color:#f0fdfa;border-color:rgba(240,253,250,0.32);}
.wwc-btn-ondark-ghost:hover{border-color:rgba(240,253,250,0.7);}
.wwc-btn-lg{font-size:18px;padding:17px 30px;}

/* ---------- logo lockup ---------- */
.wwc-logo{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none;}
.wwc-logo img{width:38px;height:38px;flex:none;display:block;}
.wwc-logo .wwc-wm{display:flex;flex-direction:column;line-height:1;gap:5px;}
.wwc-logo .wwc-name{font-family:var(--wwc-serif);font-weight:600;font-size:20px;letter-spacing:-0.01em;color:var(--wwc-ink);white-space:nowrap;}
.wwc-logo .wwc-name i{font-style:normal;color:var(--wwc-teal-700);}
.wwc-logo .wwc-tag{font-family:var(--wwc-mono);font-size:11px;letter-spacing:0.02em;color:var(--wwc-slate-500);white-space:nowrap;}

/* ---------- header ---------- */
.wwc-header{
  position:sticky;top:0;z-index:50;background:rgba(248,250,252,0.88);
  backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color var(--wwc-dur),box-shadow var(--wwc-dur);
}
.wwc-header.scrolled{border-bottom-color:var(--wwc-slate-200);box-shadow:0 1px 0 rgba(15,23,42,0.02);}
.wwc-nav{display:flex;align-items:center;justify-content:space-between;gap:28px;height:78px;}
.wwc-nav-links{display:flex;align-items:center;gap:24px;flex-wrap:nowrap;}
.wwc-nav-links a{font-family:var(--wwc-sans);font-size:15.5px;font-weight:500;color:var(--wwc-slate-700);text-decoration:none;white-space:nowrap;transition:color var(--wwc-dur);}
.wwc-nav-links a:hover{color:var(--wwc-teal-800);}
.wwc-nav-cta{display:flex;align-items:center;gap:14px;flex:none;}
.wwc-nav-cta .wwc-btn{font-size:15.5px;padding:12px 18px;}
.wwc-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--wwc-ink);}
.wwc-menu-btn svg{width:26px;height:26px;}
@media (max-width:1320px){ .wwc-nav-cta .wwc-btn-secondary{display:none;} }
@media (max-width:980px){ .wwc-nav-links,.wwc-nav-cta .wwc-btn{display:none;} .wwc-menu-btn{display:block;} }
.wwc-mobile{display:none;flex-direction:column;gap:4px;padding:12px 24px 28px;border-bottom:1px solid var(--wwc-slate-200);background:var(--wwc-surface);}
.wwc-mobile.open{display:flex;}
.wwc-mobile a{font-family:var(--wwc-sans);padding:14px 4px;font-size:18px;font-weight:500;color:var(--wwc-slate-800);text-decoration:none;border-bottom:1px solid var(--wwc-slate-100);}
.wwc-mobile .wwc-btn{margin-top:16px;justify-content:center;}

/* ---------- closing CTA (teal) ---------- */
.wwc-cta{background:var(--wwc-grad);color:#fff;position:relative;overflow:hidden;padding:96px 0;}
.wwc-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 460px at 15% 120%,rgba(251,191,36,0.18),transparent 55%);pointer-events:none;}
.wwc-cta .wwc-wrap{position:relative;max-width:780px;}
.wwc-eyebrow{font-family:var(--wwc-mono);font-weight:500;font-size:14px;letter-spacing:0.14em;text-transform:uppercase;color:var(--wwc-amber-400);display:inline-flex;align-items:flex-start;gap:12px;margin-bottom:22px;}
.wwc-eyebrow .wwc-rule{width:28px;height:2px;background:var(--wwc-amber-400);display:inline-block;flex:none;margin-top:9px;}
.wwc-cta h2{font-family:var(--wwc-serif);font-weight:600;font-size:clamp(30px,3.4vw,44px);line-height:1.12;letter-spacing:-0.02em;color:#fff;margin:0;text-wrap:balance;}
.wwc-cta p{font-family:var(--wwc-sans);font-size:19px;line-height:1.7;color:#cfe7e2;margin:22px 0 0;max-width:54ch;}
.wwc-cta-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px;}

/* ---------- footer (teal-dark) ---------- */
.wwc-foot{background:var(--wwc-surface-darker);color:#9ec7c0;padding:72px 0 56px;}
.wwc-foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(153,246,228,0.12);}
.wwc-foot-col h5{font-family:var(--wwc-mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:#6fa39b;margin:0 0 18px;font-weight:500;}
.wwc-foot-col p,.wwc-foot-col a{font-family:var(--wwc-sans);font-size:16px;line-height:1.7;color:#bcd8d2;text-decoration:none;}
.wwc-foot-col a{display:block;}
.wwc-foot-col a:hover{color:#fff;}
.wwc-foot-brand .wwc-logo{margin-bottom:2px;}
.wwc-foot-brand .wwc-name{color:#f0fdfa;}
.wwc-foot-brand .wwc-name i{color:var(--wwc-amber-400);}
.wwc-foot-brand .wwc-tag{color:#8fbdb5;}
.wwc-foot-brand>p{margin-top:20px;font-size:16px;line-height:1.7;color:#9ec7c0;max-width:42ch;}
.wwc-disc{margin-top:36px;font-family:var(--wwc-sans);font-size:13.5px;line-height:1.7;color:#6c9a92;}
.wwc-disc b{color:#9ec7c0;font-weight:600;}
.wwc-foot-legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:32px;font-family:var(--wwc-mono);font-size:12.5px;letter-spacing:0.04em;color:#5e8a82;}
@media (max-width:820px){ .wwc-foot-top{grid-template-columns:1fr;gap:36px;} .wwc-cta{padding:72px 0;} }

/* Honour reduced motion (the captured pages may not). */
@media (prefers-reduced-motion:reduce){
  .wwc-btn,.wwc-header{transition:none;}
}