/* ============================================================
   PortfolioIQ site kit - shared design system for subpages.
   Matches home_v3_draft.html exactly (vars, buttons, nav,
   announce bar, footer, modal) + subpage components.
   ============================================================ */
:root {
  --bg:        #edf1f8;
  --bg-soft:   #f6f8fc;
  --white:     #ffffff;
  --ink:       #0b1424;
  --body:      #46536a;
  --muted:     #7b8698;
  --accent:    #4353e9;
  --accent-deep:#2f3fd4;
  --accent-soft:#e7eafd;
  --line:      #e2e8f2;
  --green:     #16a34a;
  --red:       #dc2626;
  --btn:       #0b1220;
  --radius:    16px;
  --shadow-card: 0 1px 2px rgba(11,20,36,.04), 0 12px 32px -12px rgba(11,20,36,.10);
  --shadow-float: 0 24px 64px -24px rgba(11,20,36,.28);
  --bar-h: 42px;
  --font-display: 'Schibsted Grotesk', sans-serif;
  --font-body: 'Instrument Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-body);
  background:#fff;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img { display:block; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1200px; margin:0 auto; padding:0 32px; }
h1,h2,h3 { font-family:var(--font-display); letter-spacing:-0.025em; }

.kicker {
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px;
}

/* ---------- reveal-on-scroll ---------- */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; }
.reveal.d3 { transition-delay:.24s; } .reveal.d4 { transition-delay:.32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

/* ---------- buttons (veto components) ---------- */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-size:15px; font-weight:600;
  padding:14px 26px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-dark {
  background:var(--btn); color:#fff;
  box-shadow:0 8px 24px -10px rgba(11,18,32,.45);
}
.btn-dark:hover { transform:translateY(-2px); box-shadow:0 14px 32px -10px rgba(11,18,32,.5); }
.btn-outline { background:var(--white); color:var(--ink); border-color:var(--line); }
.btn-outline:hover { border-color:var(--ink); transform:translateY(-2px); }
.btn-cta {
  display:inline-flex; align-items:center; gap:12px;
  background:var(--btn); color:#fff;
  border-radius:999px; padding:8px 8px 8px 24px;
  font-size:15px; font-weight:500; white-space:nowrap;
  border:1px solid var(--btn);
  transition:background .2s ease, transform .18s ease, box-shadow .2s ease;
}
.btn-cta .circ {
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:999px;
  background:#fff; color:var(--btn);
}
.btn-cta .circ svg { width:17px; height:17px; }
.btn-cta:hover { background:#1a2438; transform:translateY(-1px); box-shadow:0 12px 30px -12px rgba(11,18,32,.55); }
.link-cta {
  display:inline-flex; align-items:center; gap:7px;
  font-size:15px; font-weight:500; color:var(--ink);
  padding-bottom:2px; border-bottom:1px solid rgba(11,20,36,.18);
  transition:color .18s ease, border-color .18s ease;
}
.link-cta:hover { color:var(--accent); border-color:var(--accent); }
.navpill {
  display:inline-flex; align-items:center;
  background:var(--btn); color:#fff;
  font-size:14px; font-weight:500; padding:11px 22px; border-radius:999px;
  white-space:nowrap;
  transition:background .2s ease;
}
.navpill:hover { background:#1a2438; }

/* ---------- announcement bar ---------- */
.announce {
  position:fixed; top:0; left:0; right:0; z-index:110;
  height:var(--bar-h);
  background:#0b0d12;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:0 20px;
  transition:transform .3s ease, opacity .3s ease;
}
.announce p { color:rgba(255,255,255,.85); font-size:13.5px; font-weight:500; }
.announce a {
  color:#fff; font-size:13.5px; font-weight:700;
  display:inline-flex; align-items:center; gap:6px;
  border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:1px;
  transition:border-color .15s;
  white-space:nowrap;
}
.announce a:hover { border-color:#fff; }
.announce .a-short { display:none; }
@media (max-width: 700px) {
  .announce { gap:8px; }
  .announce p, .announce a { font-size:12px; }
  .announce .a-long { display:none; }
  .announce .a-short { display:inline; }
}

/* ---------- nav (borderless -> pill card on scroll) ---------- */
nav {
  position:fixed; top:var(--bar-h); left:0; right:0; z-index:100;
  padding:0 24px;
  transition:top .3s ease;
}
nav.scrolled { top:0; }
.nav-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid transparent; border-radius:16px;
  background:transparent; box-shadow:none;
  padding:16px 8px;
  transition:all .3s ease;
}
nav.scrolled .nav-inner {
  margin-top:12px;
  border-color:rgba(0,0,0,.05);
  background:rgba(250,251,254,.95);
  padding:12px 20px;
  box-shadow:0 8px 30px -12px rgba(12,12,20,.18);
  -webkit-backdrop-filter:saturate(1.3) blur(8px); backdrop-filter:saturate(1.3) blur(8px);
}
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo img { width:30px; height:30px; border-radius:8px; }
.nav-logo span {
  font-family:'Poppins', var(--font-body), sans-serif;
  font-weight:700; font-size:19px; letter-spacing:-0.015em; color:#000;
}
.nav-cta { margin-left:auto; display:flex; align-items:center; }
@media (max-width: 480px) {
  nav { padding:0 12px; }
  .nav-inner { padding:12px 6px; }
  nav.scrolled .nav-inner { padding:9px 12px; }
  .nav-logo span { font-size:16.5px; }
  .nav-logo img { width:26px; height:26px; }
  .navpill { font-size:13px; padding:9px 15px; }
  .navburger { width:34px; height:34px; margin-left:6px; }
}


/* ---------- burger menu (nav dropdown: Products / Learn) ---------- */
.navburger {
  display:grid; place-items:center;
  width:38px; height:38px; margin-left:10px;
  border:0; border-radius:10px;
  background:transparent; color:var(--ink); cursor:pointer;
  transition:background .2s;
}
.navburger:hover { background:rgba(11,20,36,.07); }
.navburger svg { width:18px; height:18px; }
.navmenu {
  max-width:540px; margin:6px 0 0 auto;
  background:rgba(250,251,254,.98);
  border:1px solid rgba(0,0,0,.06); border-radius:16px;
  box-shadow:0 24px 60px -24px rgba(12,12,20,.28);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.navmenu.open { opacity:1; transform:none; pointer-events:auto; }
.navmenu-in { display:grid; grid-template-columns:1fr 1fr; gap:8px 36px; padding:22px 26px; }
.nm-h {
  font-family:'Poppins', var(--font-body), sans-serif;
  font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--muted); margin-bottom:10px;
}
.navmenu a { display:flex; align-items:center; white-space:nowrap; font-size:14.5px; font-weight:500; color:var(--body); padding:6px 0; }
.navmenu a .pill-new { margin-left:8px; }
.navmenu a:hover { color:var(--ink); }

.pill-new {
  display:inline-block; vertical-align:1px; margin-left:6px;
  font-family:'Poppins', var(--font-body), sans-serif;
  font-size:8.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  background:var(--accent-soft); color:var(--accent-deep);
  padding:2px 7px; border-radius:99px;
}
.ft-cols .pill-new {
  background:rgba(99,113,240,.22); color:#aab6ff;
  margin-left:8px; vertical-align:1.5px;
}


/* ---------- sections ---------- */
section { position:relative; }
.section-pad { padding:96px 0; }
.section-white { background:var(--white); }
.section-soft { background:var(--bg-soft); }
.split-head {
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px;
  align-items:start; margin-bottom:44px;
}
.split-head h2 {
  font-size:clamp(1.8rem, 2.9vw, 2.4rem); font-weight:700; line-height:1.12;
  letter-spacing:-0.025em;
}
.split-head h2 .h-accent { color:var(--accent); }
.split-big { font-size:18px; line-height:1.6; color:var(--body); margin-top:8px; }
/* balanced copy-left / checklist-card-right section */
.side-by { display:grid; grid-template-columns:1.02fr .98fr; gap:64px; align-items:center; }
.side-by h2 {
  font-size:clamp(1.8rem, 2.9vw, 2.4rem); font-weight:700; line-height:1.12;
  letter-spacing:-0.025em; margin-bottom:16px;
}
.side-by .side-big { font-size:17px; line-height:1.65; color:var(--body); }
.check-card {
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:30px 32px; box-shadow:var(--shadow-card);
}
.section-white .check-card { background:var(--bg-soft); border-color:transparent; box-shadow:none; }

/* ---------- page hero (subpages) ---------- */
.page-hero {
  position:relative; overflow:hidden;
  padding:calc(var(--bar-h) + 150px) 0 96px;
  background:linear-gradient(180deg, #eef2f9 0%, #ffffff 100%);
}
/* full-bleed hero render: subject right, text over the empty sky left */
.ph-bg { position:absolute; inset:0; }
.ph-bg img { width:100%; height:100%; object-fit:cover; object-position:right center; }
/* melt the render's bottom into the white section below */
.page-hero::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:80px; z-index:1;
  background:linear-gradient(0deg, #fff, transparent);
  pointer-events:none;
}
.page-hero .wrap { position:relative; z-index:2; }
.page-hero h1 {
  font-size:clamp(2.2rem, 3.9vw, 3.3rem); font-weight:700; line-height:1.08;
  letter-spacing:-0.03em; max-width:800px; margin-bottom:22px;
}
.page-hero h1 .h-accent { color:var(--accent); }
.page-hero .lede {
  font-family:'Poppins', var(--font-body), sans-serif;
  font-size:17px; font-weight:400; line-height:1.65; color:var(--body);
  max-width:620px; margin-bottom:34px;
}
.page-hero .hero-ctas { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }


/* ---------- tiles (flat soft-blue, approved language) ---------- */
.tile-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:52px; }
.tile-grid.cols-4 { grid-template-columns:repeat(4, 1fr); }
.tile {
  background:var(--bg-soft); border-radius:14px;
  padding:28px 24px;
  transition:background .2s ease;
}
.tile:hover { background:#eef2f9; }
.tile .icon { color:var(--accent); margin-bottom:18px; }
.tile .icon svg { width:26px; height:26px; display:block; }
.tile h3 { font-size:15.5px; font-weight:700; margin-bottom:8px; }
.tile p { font-size:13.8px; line-height:1.58; color:var(--body); }

/* ---------- numbered steps ---------- */
.steps { display:flex; flex-direction:column; margin-top:44px; }
.step {
  display:grid; grid-template-columns:72px 300px 1fr; gap:28px;
  align-items:baseline;
  padding:24px 4px; border-top:1px solid var(--line);
}
.step:last-child { border-bottom:1px solid var(--line); }
.step .num { font-family:var(--font-mono); font-size:13px; color:var(--accent); }
.step h3 { font-size:17px; font-weight:700; }
.step p { font-size:14.5px; line-height:1.6; color:var(--body); }

/* ---------- checklist ---------- */
.checklist { list-style:none; display:grid; gap:12px; }
.checklist li {
  display:flex; align-items:center; gap:12px;
  font-size:15.5px; font-weight:500; color:var(--ink);
}
.checklist .check {
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.checklist .check svg { width:12px; height:12px; }

/* ---------- fine-print note (regulatory-modest) ---------- */
.note {
  margin-top:40px; padding:20px 24px;
  background:var(--bg-soft); border-radius:14px;
  font-size:13.5px; line-height:1.6; color:var(--muted);
}

/* ---------- closing cta band ---------- */
.cta-band {
  background:
    radial-gradient(700px 380px at 85% 110%, rgba(67,83,233,.12), transparent 60%),
    linear-gradient(120deg, #eef2f9 0%, #e9eef8 100%);
  padding:88px 0;
}
.cta-band h2 {
  font-size:clamp(1.8rem, 3vw, 2.5rem); font-weight:700; line-height:1.15;
  max-width:640px; margin-bottom:14px;
}
.cta-band .cta-sub {
  font-family:'Poppins', var(--font-body), sans-serif;
  font-size:16px; color:var(--body); margin-bottom:30px;
}

/* ---------- footer (dark, veto structure) ---------- */
footer { background:#0b0d12; color:#fff; padding:64px 0 36px; }
.ft-in { display:grid; grid-template-columns:1.1fr 2.35fr; gap:56px; }
.ft-logo { display:inline-flex; align-items:center; gap:10px; margin-bottom:16px; }
.ft-logo img { width:28px; height:28px; border-radius:7px; }
.ft-logo span {
  font-family:'Poppins', var(--font-body), sans-serif;
  font-weight:700; font-size:18px; letter-spacing:-0.015em; color:#fff;
}
.ft-brand p { font-size:14px; line-height:1.6; color:rgba(255,255,255,.55); max-width:34ch; }
.ft-cols { display:grid; grid-template-columns:1.25fr 1fr .9fr 1.3fr; gap:24px; }
.ft-h {
  font-family:'Poppins', var(--font-body), sans-serif;
  font-size:12.5px; font-weight:600; letter-spacing:.02em;
  color:rgba(255,255,255,.45); margin-bottom:14px;
}
.ft-cols ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
.ft-cols a { font-size:14px; color:rgba(255,255,255,.72); transition:color .18s; }
.ft-cols a:hover { color:#fff; }
.ft-bottom {
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:48px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
}
.ft-bottom small { font-size:12px; color:rgba(255,255,255,.38); }
.ft-bottom a { color:rgba(255,255,255,.6); text-decoration:underline; transition:color .18s; }
.ft-bottom a:hover { color:#fff; }
.ft-cols a[href^="mailto"] { white-space:nowrap; }


/* ---------- contact modal (veto component) ---------- */
.modal-scrim {
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(11,13,18,.5);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  opacity:0; pointer-events:none; transition:opacity .32s ease;
}
.modal-scrim.open { opacity:1; pointer-events:auto; }
.modal {
  width:100%; max-width:452px; max-height:calc(100vh - 48px); overflow-y:auto;
  background:#fff; border-radius:22px;
  box-shadow:0 44px 100px -34px rgba(12,12,20,.55);
  transform:translateY(16px) scale(.965); opacity:0;
  transition:transform .4s ease, opacity .32s ease;
  position:relative;
}
.modal-scrim.open .modal { transform:none; opacity:1; }
.modal-close {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:999px; border:none;
  background:rgba(255,255,255,.9); color:var(--ink);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 4px 14px -5px rgba(12,12,20,.45);
  transition:background .2s, transform .2s;
}
.modal-close:hover { background:#fff; transform:scale(1.07); }
.modal-close svg { width:16px; height:16px; }
.modal-banner {
  position:relative; height:148px;
  background:#e3ecf8 url('modal_banner.webp') center 44% / cover no-repeat;
}
.modal-banner::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(255,255,255,.92) 100%);
}
.modal-body { padding:16px 30px 30px; }
.modal-body h3 { font-size:24px; font-weight:700; letter-spacing:-.02em; margin-bottom:7px; }
.modal-body .msub { font-size:14.5px; line-height:1.5; color:var(--body); margin-bottom:22px; }
.mrow { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mfield { margin-bottom:13px; }
.mfield label {
  display:block; font-size:11.5px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.mfield input, .mfield textarea {
  width:100%; font:inherit; font-size:14.5px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:11px;
  padding:11px 13px; transition:border-color .2s, box-shadow .2s;
}
.mfield textarea { resize:vertical; min-height:82px; }
.mfield input:focus, .mfield textarea:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(67,83,233,.14);
}
.msend {
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--btn); color:#fff; border:0; border-radius:999px;
  padding:13px; font:inherit; font-size:15px; font-weight:600; cursor:pointer;
  transition:background .2s;
}
.msend:hover { background:#1a2438; }
.msend:disabled { opacity:.6; cursor:default; }
.msend svg { width:16px; height:16px; }
.merr { display:none; margin-top:12px; font-size:13px; color:var(--red); }
.merr a { text-decoration:underline; }
.msuccess { display:none; text-align:center; padding:26px 0 14px; }
.msuccess .ok {
  width:48px; height:48px; margin:0 auto 16px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center;
}
.msuccess .ok svg { width:22px; height:22px; }
.msuccess h3 { font-size:20px; font-weight:700; margin-bottom:6px; }
.msuccess p { font-size:14px; color:var(--body); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .section-pad { padding:64px 0; }
  .split-head { grid-template-columns:1fr; gap:16px; margin-bottom:32px; }
  .side-by { grid-template-columns:1fr; gap:32px; }
  .split-big { font-size:16px; }
  .tile-grid, .tile-grid.cols-4 { grid-template-columns:repeat(2,1fr); }
  .step { grid-template-columns:48px 1fr; gap:12px 18px; }
  .step p { grid-column:2; }
  .ft-in { grid-template-columns:1fr; gap:34px; }
  .ft-cols { grid-template-columns:1fr 1fr; }
  .page-hero { padding:calc(var(--bar-h) + 120px) 0 56px; }
  .ph-bg::before { content:""; position:absolute; inset:0; z-index:1; background:rgba(244,248,253,.55); }
}
@media (max-width: 640px) {
  .wrap { padding:0 20px; }
  .section-pad { padding:48px 0; }
  .tile-grid, .tile-grid.cols-4 { grid-template-columns:1fr; }
  .mrow { grid-template-columns:1fr; }
  .cta-band { padding:64px 0; }
}