/* ── Smart Portfolio V2 — component CSS ──────────────────────────────────
   Loaded for __SP_V2 users only via server-side injection in
   injectGaWithSpV2(). Requires Prop-AI DS tokens (styles.css) to resolve
   var() references. Scoped entirely to .sp-v2-view and #ppDetailMain so
   V1 users are completely unaffected.
   ════════════════════════════════════════════════════════════════════════ */

/* Full-page view: white canvas so index.html dark-body gradient cannot bleed */
#ppDetailMain{background:var(--white)}

.sp-v2-view{background:var(--white);min-height:100%;color:var(--black-500);font-family:var(--font-sans);
  /* ── Exact-value component tokens (one token per distinct literal) ── */
  /* Font sub-tokens (compact density, below DS scale) */
  --v2-text-8:8px;--v2-text-9:9px;
  --v2-text-10:10px;--v2-text-12:12px;
  --v2-text-14:14px;--v2-text-15:15px;
  --v2-text-17:17px;--v2-text-18:18px;
  --v2-fmv-size:52px;
  /* R2/R4 token aliases (line-22 :root values from Portfolio Premium.dc.html) */
  --surface-2:var(--grey-100);   /* line-22 #F5F5F5; grey-100 resolves identically */
  --accent-deep:#003C9A;         /* line-22 value; NOT --blue-700 (#0035A3) */
  /* Black alpha */
  --v2-bk-07:rgba(0,0,0,.07);--v2-bk-08:rgba(0,0,0,.08);
  --v2-bk-12:rgba(0,0,0,.12);--v2-bk-15:rgba(0,0,0,.15);
  --v2-bk-45:rgba(0,0,0,.45);
  /* Navy overlay — line-22 gradient values */
  --v2-nv-25:rgba(0,10,34,.25);--v2-nv-85:rgba(0,10,34,.85);
  /* Blue alpha (0,94,227) */
  --v2-bl-03:rgba(0,94,227,.03);--v2-bl-04:rgba(0,94,227,.04);
  --v2-bl-05:rgba(0,94,227,.05);--v2-bl-06:rgba(0,94,227,.06);
  --v2-bl-07:rgba(0,94,227,.07);--v2-bl-08:rgba(0,94,227,.08);
  --v2-bl-10:rgba(0,94,227,.1);--v2-bl-12:rgba(0,94,227,.12);
  --v2-bl-14:rgba(0,94,227,.14);--v2-bl-15:rgba(0,94,227,.15);
  --v2-bl-18:rgba(0,94,227,.18);--v2-bl-20:rgba(0,94,227,.2);
  --v2-bl-30:rgba(0,94,227,.3);--v2-bl-35:rgba(0,94,227,.35);
  --v2-bl-50:rgba(0,94,227,.5);--v2-bl-60:rgba(0,94,227,.6);
  /* Grey alpha (136,139,141) */
  --v2-gy-06:rgba(136,139,141,.06);--v2-gy-14:rgba(136,139,141,.14);
  --v2-gy-16:rgba(136,139,141,.16);--v2-gy-18:rgba(136,139,141,.18);
  /* Purple alpha (167,139,250) */
  --v2-pu-06:rgba(167,139,250,.06);--v2-pu-18:rgba(167,139,250,.18);
  /* Dark-red text (180,40,40) */
  --v2-rd-70:rgba(180,40,40,.7);
  /* Delete red — line-22 red rgb(255,63,53) */
  --v2-dc-04:rgba(255,63,53,.04);--v2-dc-12:rgba(255,63,53,.12);
  /* Amber alpha — line-22 amber rgb(255,149,2) */
  --v2-am-06:rgba(255,149,2,.06);--v2-am-18:rgba(255,149,2,.18);
  /* Orange alpha (255,149,2) */
  --v2-or-06:rgba(255,149,2,.06);--v2-or-08:rgba(255,149,2,.08);
  --v2-or-20:rgba(255,149,2,.2);--v2-or-22:rgba(255,149,2,.22);
  --v2-or-35:rgba(255,149,2,.35);
  /* White overlay */
  --v2-wh-78:rgba(255,255,255,.78);
  /* Red alpha (255,63,53) */
  --v2-re-05:rgba(255,63,53,.05);--v2-re-06:rgba(255,63,53,.06);
  --v2-re-16:rgba(255,63,53,.16);--v2-re-18:rgba(255,63,53,.18);
  /* Green alpha (73,170,37) */
  --v2-gn-04:rgba(73,170,37,.04);--v2-gn-05:rgba(73,170,37,.05);
  --v2-gn-06:rgba(73,170,37,.06);--v2-gn-07:rgba(73,170,37,.07);
  --v2-gn-08:rgba(73,170,37,.08);--v2-gn-12:rgba(73,170,37,.12);
  --v2-gn-18:rgba(73,170,37,.18);--v2-gn-20:rgba(73,170,37,.2);
  --v2-gn-22:rgba(73,170,37,.22);--v2-gn-25:rgba(73,170,37,.25);
  --v2-gn-50:rgba(73,170,37,.5);--v2-gn-70:rgba(73,170,37,.7);
  /* Line-22 semantic tokens (conformance layer — surface-3/green-soft/green-border/amber-soft/amber-border) */
  --surface-3:#ECECEC;
  --green-soft:rgba(73,170,37,.09);--green-border:rgba(73,170,37,.28);
  --amber-soft:rgba(255,149,2,.10);--amber-border:rgba(255,149,2,.28);
  /* Brand */
  --v2-whatsapp:#25D366;--v2-whatsapp-hov:#1fb854;
  --v2-furnish-text:#7C72B6;--v2-mortgage-text:#B45309;}


/* ── Top nav ────────────────────────────────────────────────────────── */
.sp-v2-topnav{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--white);position:sticky;top:0;z-index:30}
.sp-v2-back{display:flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;font-size:var(--caption-size);font-weight:600;color:var(--blue-500);font-family:inherit;padding:6px 10px;border-radius:var(--radius-tag);transition:background var(--dur-fast)}
.sp-v2-back:hover{background:var(--v2-bl-06)}
.sp-v2-refresh-btn{display:flex;align-items:center;gap:5px;background:var(--v2-bl-05);border:1px solid var(--v2-bl-14);border-radius:var(--radius-tag);padding:5px 10px;font-size:var(--v2-text-10);font-weight:700;color:var(--blue-500);cursor:pointer;font-family:inherit;transition:background var(--dur-fast)}
.sp-v2-refresh-btn:hover{background:var(--v2-bl-10)}
.sp-v2-refresh-btn:disabled{opacity:.4;cursor:default}
.sp-v2-close-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-tag);width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:var(--v2-text-12);color:var(--grey-500);transition:background var(--dur-fast)}
.sp-v2-close-btn:hover{background:var(--grey-100)}

/* ── FMV card ───────────────────────────────────────────────────────── */
.sp-v2-fmv-card{padding:18px 20px 12px;border-bottom:1px solid var(--border)}

/* ── Change strip ───────────────────────────────────────────────────── */
.sp-v2-change-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:1px;background:var(--border);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sp-v2-cm{padding:12px 16px;background:var(--white)}
.sp-v2-cm-val{font-size:var(--v2-text-15);font-weight:800;margin-bottom:2px}
.sp-v2-cm-val.pos{color:var(--green-500)}
.sp-v2-cm-val.neg{color:var(--red-500)}
.sp-v2-cm-val.blue{color:var(--blue-500)}
.sp-v2-cm-lbl{font-size:var(--v2-text-9);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--grey-500)}
.sp-v2-add-btn{font-size:var(--v2-text-9);font-weight:700;background:var(--v2-bl-05);border:1px solid var(--v2-bl-15);border-radius:var(--radius-badge);padding:3px 8px;cursor:pointer;color:var(--blue-500);font-family:inherit;margin-bottom:3px;display:block}
.sp-v2-add-btn-g{background:var(--v2-gn-05);border-color:var(--v2-gn-18);color:var(--green-500)}

/* ── Sticky section nav (E3) ────────────────────────────────────────── */
.sp-v2-sect-nav{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;border-bottom:2px solid var(--border);background:var(--white);position:sticky;top:49px;z-index:20}
.sp-v2-sect-nav::-webkit-scrollbar{display:none}
.sp-v2-nav-link{flex-shrink:0;padding:11px 16px;font-size:var(--v2-text-12);font-weight:600;color:var(--grey-500);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color var(--dur-base),border-color var(--dur-base);white-space:nowrap}
.sp-v2-nav-link:hover,.sp-v2-nav-link.active{color:var(--blue-500);border-bottom-color:var(--blue-500)}

/* ── Section cards ──────────────────────────────────────────────────── */
.sp-v2-sect{padding:20px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-card);margin:12px 16px 0}
.sp-v2-sect-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:8px}
.sp-v2-sect-label{font-size:var(--label-size);font-weight:var(--fw-semibold);letter-spacing:var(--label-tracking);text-transform:var(--label-transform);color:var(--label-color)}

/* ── Period tabs (trend chart) ──────────────────────────────────────── */
.sp-v2-period-tabs{display:flex;gap:2px;background:var(--grey-100);border:1px solid var(--border);border-radius:var(--radius-badge);padding:2px}
.sp-v2-ptab{font-size:var(--v2-text-10);font-weight:700;padding:3px 8px;border-radius:var(--radius-badge);border:none;background:transparent;color:var(--grey-500);cursor:pointer;font-family:inherit;transition:background var(--dur-fast),color var(--dur-fast)}
.sp-v2-ptab.active{background:var(--white);color:var(--blue-500);box-shadow:0 1px 4px var(--v2-bk-08)}

/* ── Transaction expand ─────────────────────────────────────────────── */
.sp-v2-expand-btn{width:100%;padding:9px 12px;background:var(--grey-100);border:1px solid var(--border);border-radius:var(--radius-tag);font-size:var(--v2-text-10);font-weight:700;color:var(--grey-500);cursor:pointer;font-family:inherit;margin-top:8px;transition:background var(--dur-fast);display:flex;align-items:center;justify-content:center;gap:5px}
.sp-v2-expand-btn:hover{background:var(--border)}

/* ── Toggle switch (receive_private_offers) ─────────────────────────── */
.sp-v2-toggle{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}
.sp-v2-toggle input{opacity:0;width:0;height:0;position:absolute}
.sp-v2-toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--border);border-radius:var(--radius-pill);transition:background var(--dur-slow)}
.sp-v2-toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;bottom:3px;background:var(--white);border-radius:50%;transition:transform var(--dur-slow);box-shadow:0 1px 3px var(--v2-bk-15)}
.sp-v2-toggle input:checked+.sp-v2-toggle-slider{background:var(--green-500)}
.sp-v2-toggle input:checked+.sp-v2-toggle-slider::before{transform:translateX(16px)}

/* ── Skeleton pulsing loader ────────────────────────────────────────── */
.sp-v2-skel{display:inline-block;width:40px;height:14px;border-radius:var(--radius-badge);background:var(--v2-bk-07);animation:pm2-skel-pulse 1.4s ease-in-out infinite;vertical-align:middle}
@keyframes pm2-skel-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── Chart: light-mode SVG color overrides ──────────────────────────── */
/* Comp scatter chart — override hardcoded dark-mode colors */
.sp-v2-view #pm2ChartSvgWrap > div{background:transparent!important;border-color:var(--border)!important}
.sp-v2-view #pm2ChartSvgWrap svg text{fill:rgba(0,0,0,.45)!important}
.sp-v2-view #pm2ChartSvgWrap svg line{stroke:rgba(0,0,0,.09)!important}
.sp-v2-view #pm2ChartSvgWrap svg line[stroke="#4ade80"]{stroke:var(--green-500)!important;opacity:1!important}
.sp-v2-view #pm2ChartSvgWrap circle[fill="rgba(255,255,255,.18)"]{fill:rgba(0,0,0,.13)!important}
.sp-v2-view #pm2ChartSvgWrap circle[stroke="rgba(255,255,255,.06)"]{stroke:rgba(0,0,0,.08)!important}
.sp-v2-view #pm2ChartSvgWrap > div > div{color:var(--grey-500)!important}
/* Axis text */
.sp-v2-view #pmPropTrendChartWrap text{fill:var(--v2-bk-45)!important}
/* Grid lines (horizontal rules) */
.sp-v2-view #pmPropTrendChartWrap line:not([id]){stroke:var(--v2-bk-07)!important}
/* Crosshair line */
.sp-v2-view #pp-trend-vline{stroke:var(--v2-bk-12)!important}
/* My Valuation: dark-green → DS green */
.sp-v2-view polyline[stroke="#4ade80"]{stroke:var(--green-500)!important}
.sp-v2-view circle[fill="#4ade80"]{fill:var(--green-500)!important}
.sp-v2-view circle[fill="rgba(74,222,128,.5)"]{fill:var(--v2-gn-50)!important}
.sp-v2-view stop[stop-color="#4ade80"]{stop-color:var(--green-500)!important}
/* Market PSF: legacy blue → DS blue */
.sp-v2-view polyline[stroke="#4b8dff"]{stroke:var(--blue-500)!important}
.sp-v2-view circle[fill="#4b8dff"]{fill:var(--blue-500)!important}
.sp-v2-view circle[fill="rgba(75,141,255,.35)"]{fill:var(--v2-bl-35)!important}
/* Community: amber → DS orange */
.sp-v2-view polyline[stroke="#f59e0b"]{stroke:var(--orange-500)!important}
.sp-v2-view circle[fill="#f59e0b"]{fill:var(--orange-500)!important}
.sp-v2-view circle[fill="rgba(245,158,11,.35)"]{fill:var(--v2-or-35)!important}
/* Dot stroke ring: near-black → white */
.sp-v2-view circle[stroke="#0d1b2a"]{stroke:var(--white)!important}
/* Trend badge V2 colours */
.sp-v2-view .pm2-trend-badge{background:var(--v2-gn-08);color:var(--green-500);border:1px solid var(--v2-gn-20)}
.sp-v2-view .pm2-trend-badge.dn{background:var(--v2-re-06);color:var(--red-500);border-color:var(--v2-re-18)}
/* pm2-legend-btn active state adapts to light theme */
.sp-v2-view .pm2-legend-btn.active.val{background:var(--v2-gn-06)!important;border-color:var(--v2-gn-25)!important;color:var(--green-500)!important}
.sp-v2-view .pm2-legend-btn.active.psf{background:var(--v2-bl-06)!important;border-color:var(--v2-bl-20)!important;color:var(--blue-500)!important}
.sp-v2-view .pm2-legend-btn.active.comm{background:var(--v2-or-06)!important;border-color:var(--v2-or-20)!important;color:var(--orange-500)!important}
/* sell metric pill colours — keyed by data-smcolor (set by JS MutationObserver in V2 render path;
   [style*="color:#hex"] selectors never fire because browsers normalise hex→rgb before writing
   the style attribute, so the attribute value is always rgb(…) not #… ) */
.sp-v2-view #pm2AbsorptionVal[data-smcolor="green"],
.sp-v2-view #pm2BuyerDemandVal[data-smcolor="green"],
.sp-v2-view #pm2SupplyLevelVal[data-smcolor="green"]{color:var(--green-500)!important}
.sp-v2-view #pm2AbsorptionVal[data-smcolor="amber"],
.sp-v2-view #pm2BuyerDemandVal[data-smcolor="amber"],
.sp-v2-view #pm2SupplyLevelVal[data-smcolor="amber"]{color:var(--orange-500)!important}
.sp-v2-view #pm2AbsorptionVal[data-smcolor="red"],
.sp-v2-view #pm2BuyerDemandVal[data-smcolor="red"],
.sp-v2-view #pm2SupplyLevelVal[data-smcolor="red"]{color:var(--red-500)!important}
/* trend badge in badge col recolour */
.sp-v2-view .pm2-trend-badge.yoy,.sp-v2-view .pm2-trend-badge.mom{background:var(--v2-gn-07);color:var(--green-500);border:1px solid var(--v2-gn-18)}
.sp-v2-view .pm2-trend-badge.yoy.dn,.sp-v2-view .pm2-trend-badge.mom.dn{background:var(--v2-re-05);color:var(--red-500);border-color:var(--v2-re-16)}
/* advisor button — PropAI blue (not WA green) */
.sp-v2-view .pm-advisor-wa-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;background:var(--blue-500);border:none;border-radius:var(--radius-button);color:var(--white);font-size:var(--caption-size);font-weight:700;cursor:pointer;font-family:inherit;margin-bottom:6px;transition:filter .15s}
.sp-v2-view .pm-advisor-wa-btn:hover{filter:brightness(1.1)}
.sp-v2-view .pm-btn-primary{padding:10px;background:var(--v2-bl-07);border:1px solid var(--v2-bl-18);border-radius:var(--radius-button);color:var(--blue-500);font-size:var(--label-size);font-weight:700;cursor:pointer;font-family:inherit;width:100%}

/* ── Advanced Market Insights — V2 light-mode overrides ──────────────────── */
/* pm2-sect sections are defined with a dark background in index.html;
   override everything inside #pm2AdvMetricsWrap for the V2 white context.   */
#ppDetailMain .pm2-sect{background:var(--grey-100)!important;border-color:var(--border)!important}
#ppDetailMain .pm2-sect-title{color:var(--black-500)!important}

/* ── Property rail — V2 light theme (PG6) ───────────────────────────────
   sp-v2.css is only injected for __SP_V2 users (injectGaWithSpV2), so these
   rules never reach V1. An additional .v2-rail class is set by JS on the
   <aside> element only when isV2, giving a second layer of isolation.
   ─────────────────────────────────────────────────────────────────────── */
.v2-rail{background:var(--white);border-right:1px solid var(--border)}
.v2-rail .pp-detail-rail-hdr{color:var(--grey-500)}

/* Cards */
.v2-rail .pp-rail-card{background:var(--white);border-color:var(--border)}
.v2-rail .pp-rail-card:hover{background:var(--v2-bl-05);border-color:var(--v2-bl-14)}
.v2-rail .pp-rail-card.active{background:var(--v2-bl-08);border-color:var(--v2-bl-30)}

/* Card text */
.v2-rail .pp-rail-name{color:var(--black-500)}
.v2-rail .pp-rail-sub,.v2-rail .pp-rail-unit{color:var(--grey-500)}
.v2-rail .pp-rail-meta{color:var(--grey-500)}
.v2-rail .pp-rail-val{color:var(--blue-500)}

/* Gain badges */
.v2-rail .pp-rail-gain.up{color:var(--green-500)}
.v2-rail .pp-rail-gain.dn{color:var(--red-500)}
.v2-rail .pp-rail-gain.none{color:var(--grey-500)}

/* Type badge */
.v2-rail .pp-rail-typebadge{background:var(--v2-bl-06);color:var(--blue-500);border-color:var(--v2-bl-18)}

/* Search input */
.v2-rail .pp-rail-search{background:var(--white);border-color:var(--border);color:var(--black-500)}
.v2-rail .pp-rail-search::placeholder{color:var(--grey-400)}
.v2-rail .pp-rail-search:focus{border-color:var(--v2-bl-30)}

/* Add Property button (inline style overrides class on Manage Billing only;
   Add Property uses class only so CSS handles it) */
.v2-rail .pp-rail-add{background:var(--v2-bl-06);border-color:var(--v2-bl-18);color:var(--blue-500)}
.v2-rail .pp-rail-add:hover{background:var(--v2-bl-10)}


/* ══════════════════════════════════════════════════════════════════════════
   S1.3a — Smart Portfolio V2 Home Shell
   All rules scoped to #portfolioPage.spv2-home to leave V1 untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Light-mode DS tokens (cascade to all spv2h-* descendants) ─────────── */
#portfolioPage.spv2-home {
  --white: #FFFFFF;
  --surface-2: #F5F5F5;
  --surface-3: #ECECEC;
  --border: #ECECEC;
  --hairline: #F5F5F5;
  --text: #262626;
  --text-2: #3A3A3A;
  --text-3: #888B8D;
  --accent: #005EE3;
  --accent-text: #005EE3;
  --accent-deep: #003C9A;
  --accent-soft: #F0F5FF;
  --accent-border: rgba(0,94,227,.22);
  --green: #49AA25;
  --green-soft: rgba(73,170,37,.09);
  --red: #FF3F35;
  --red-soft: rgba(255,63,53,.07);
  --shadow-card: 0 12px 40px rgba(0,20,70,.06);
  --shadow-float: 0 18px 50px rgba(0,20,70,.12);
  --shadow-cta: 0 4px 14px rgba(0,94,227,.26);
  background: var(--surface-2);
}

/* ── Body background flip (V2 only — sp-v2.css not loaded for V1 users) ── */
/* smart-portfolio.html sets html,body{background:var(--bg-gradient)} dark.  */
/* Override body so the dark gradient doesn't bleed into the 22px gutters    */
/* either side of #portfolioPage, and behind the page when content is short. */
body.portfolio-fullpage {
  background: #F5F5F5;
}

/* ── Page structure overrides ───────────────────────────────────────────── */
#portfolioPage.spv2-home .pp-header { display: none; }
#portfolioPage.spv2-home #ppDashboard { display: block !important; margin: 0; }
#portfolioPage.spv2-home .pp-overview-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

/* Collapse the 18px grid gap so hero starts flush below the nav */
#portfolioPage.spv2-home { gap: 0; }

/* Nav: edge-to-edge dark bar, flush to viewport top.
   ROOT CAUSES fixed (third attempt — diagnose first):
   1. GAP AT TOP: .app-shell has padding-top:22px (desktop) / 16px (mobile).
      margin-top:-22px escapes it; position:sticky;top:0 then sticks flush.
   2. WHITE IN PROPERTY VIEW: previous fix added #ppTopNav.v2{background:white}
      (specificity 2,2,0) which beat the dark rule (2,1,0). Removed — dark
      gradient now wins in both home and property view. .v2 class still exists
      on the element (V1 needs it) but no spv2-home rule reacts to it.
   3. HORIZONTAL GUTTERS: same .app-shell padding. margin:-22px escapes
      left+right; width:calc(100%+44px) restores full edge-to-edge span,
      matching .spv2h-hero exactly.
   SPECIFICITY: body.portfolio-fullpage(0,1,1) #portfolioPage(1,0,0)
   .spv2-home(0,1,0) #ppTopNav(1,0,0) = (2,2,1) >> .pp-topnav.v2 (0,0,2,0).
   V1 safe: spv2-home is only set when __SP_V2 is active. */
body.portfolio-fullpage #portfolioPage.spv2-home #ppTopNav {
  background: linear-gradient(rgba(6,16,26,.97), rgba(10,22,35,.97));
  /* Escape .app-shell padding-top and padding-left/right (desktop: 22px) */
  margin: -22px -22px 0;
  width: calc(100% + 44px);
  border-radius: 0;
  top: 0;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Mobile: app-shell padding shrinks to 16px at ≤900px */
@media (max-width: 900px) {
  body.portfolio-fullpage #portfolioPage.spv2-home #ppTopNav {
    margin: -16px -16px 0;
    width: calc(100% + 32px);
  }
}

/* Landing page: identical dark edge-to-edge nav as portfolio/home.
   Prepended directly to <body> (no .app-shell wrapper) so no margin escapes needed. */
body.sp-v2-landing-page #ppTopNav {
  background: linear-gradient(rgba(6,16,26,.97), rgba(10,22,35,.97));
  border-radius: 0;
  width: 100%;
  margin: 0;
  top: 0;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 200;
}

/* Rail light treatment (mirrors .v2-rail, no JS class needed) */
#portfolioPage.spv2-home .pp-detail-rail,
#portfolioPage.spv2-home #ppDetailRail {
  background: var(--white);
  border-right: 1px solid var(--border);
}
#portfolioPage.spv2-home .pp-rail-card { background: var(--white); border-color: var(--border); }
#portfolioPage.spv2-home .pp-rail-card:hover { background: var(--surface-2); }
#portfolioPage.spv2-home .pp-rail-card.active { background: var(--accent-soft); border-color: var(--accent-border); }
#portfolioPage.spv2-home .pp-rail-name { color: var(--text); }
#portfolioPage.spv2-home .pp-rail-sub,
#portfolioPage.spv2-home .pp-rail-unit,
#portfolioPage.spv2-home .pp-rail-meta { color: var(--text-3); }
#portfolioPage.spv2-home .pp-rail-val { color: var(--accent); }
#portfolioPage.spv2-home .pp-rail-gain.up { color: var(--green); }
#portfolioPage.spv2-home .pp-rail-gain.dn { color: var(--red); }
#portfolioPage.spv2-home .pp-rail-gain.none { color: var(--text-3); }
#portfolioPage.spv2-home .pp-rail-typebadge { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
#portfolioPage.spv2-home .pp-rail-search { background: var(--white); border-color: var(--border); color: var(--text); }
#portfolioPage.spv2-home .pp-rail-search::placeholder { color: var(--text-3); }
#portfolioPage.spv2-home .pp-rail-add { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); }
#portfolioPage.spv2-home .pp-detail-rail-hdr { color: var(--text); }
#portfolioPage.spv2-home .pp-rail-sort-btn { color: var(--text-3); }

/* ── Loading skeleton ──────────────────────────────────────────────────── */
@keyframes spv2h-skel-pulse { 0%,100%{opacity:.35} 50%{opacity:.12} }
.spv2h-skel {
  display: block;
  border-radius: 6px;
  background: rgba(255,255,255,.22);
  animation: spv2h-skel-pulse 1.5s ease-in-out infinite;
}
.spv2h-loading-hero { min-height: 260px; }

/* ── Cover hero ─────────────────────────────────────────────────────────── */
.spv2h-hero {
  position: relative;
  background: #001340;
  overflow: hidden;
  /* Full-bleed: escape the 22px side padding of the portfolio container */
  width: calc(100% + 44px);
  margin-left: -22px;
}
.spv2h-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .52;
}
.spv2h-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(0,10,34,.48) 0%,rgba(0,10,34,.82) 68%,rgba(0,10,34,.96) 100%);
}
.spv2h-hero-inner {
  position: relative;
  max-width: 1340px;
  margin: 0 auto;
  padding: 56px 24px 96px;
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
}
@keyframes spv2hRise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.spv2h-hero-left { animation: spv2hRise .55s cubic-bezier(.4,0,.2,1); }
.spv2h-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #97CDFC;
  margin-bottom: 18px;
}
.spv2h-hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #49AA25;
  flex-shrink: 0;
  animation: pulse 2.2s ease-in-out infinite;
}
.spv2h-hero-label { font-size: 15px; font-weight: 300; letter-spacing: .04em; color: rgba(255,255,255,.72); }
.spv2h-hero-value {
  font-size: clamp(56px,7vw,84px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.spv2h-hero-sub-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.spv2h-gain-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.spv2h-gain-pill.up { color: #7CE36A; background: rgba(73,170,37,.18); border: 1px solid rgba(124,227,106,.32); }
.spv2h-gain-pill.dn { color: #ff7171; background: rgba(255,63,53,.18); border: 1px solid rgba(255,63,53,.32); }
.spv2h-hero-count { font-size: 13px; color: rgba(255,255,255,.62); }

/* Hero chart card */
.spv2h-hero-chart-card {
  flex: 0 1 400px;
  min-width: 280px;
  background: rgba(10,20,45,.55);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 18px 20px 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: spv2hRise .65s cubic-bezier(.4,0,.2,1);
}
.spv2h-hero-chart-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.spv2h-hero-chart-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #97CDFC;
}
.spv2h-hero-chart-body { height: 100px; cursor: pointer; }
.spv2h-hero-chart-empty { font-size: 11px; color: rgba(255,255,255,.4); text-align: center; padding-top: 28px; }
.spv2h-hero-chart-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  cursor: pointer;
}
.spv2h-hero-chart-range { font-size: 11px; color: rgba(255,255,255,.48); }
.spv2h-hero-chart-expand { font-size: 11.5px; font-weight: 600; color: #97CDFC; white-space: nowrap; }

/* ── KPI overlap card ───────────────────────────────────────────────────── */
.spv2h-kpi-card {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-float);
  margin: -52px 24px 0;
  position: relative;
  z-index: 5;
  overflow: hidden;
}
.spv2h-kpi-cell {
  padding: 22px 26px;
  border-right: 1px solid var(--hairline);
}
.spv2h-kpi-cell:last-child { border-right: none; }
.spv2h-kpi-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.spv2h-kpi-val {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 8px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.spv2h-kpi-sub { font-size: 11.5px; color: var(--text-3); margin-top: 5px; }

/* ── Personal / Corporate entity toggle ─────────────────────────────────── */
.spv2h-entity-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.spv2h-entity-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  background: #eaeef4;
  border-radius: 999px;
  padding: 3px;
}
.spv2h-entity-desc {
  flex: 1;
  font-size: 12px;
  color: var(--text-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spv2h-alerts-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}
.spv2h-alerts-btn:hover { background: var(--surface-2); }
.spv2h-alerts-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  display: inline-block;
}
.spv2h-entity-btn {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  font-family: inherit;
  white-space: nowrap;
}
.spv2h-entity-btn.active {
  background: #005EE3;
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,94,227,.25);
}
.spv2h-entity-btn:hover:not(.active) {
  color: #1a1a2e;
}

/* ── Tier badges (PRO / STAFF) ───────────────────────────────────────────── */
.spv2h-tier-badge {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px;
  letter-spacing: .06em; vertical-align: middle;
  margin-left: 6px; line-height: 1.3;
}
.spv2h-tier-pro  { background: var(--v2-bl-08); border: 1px solid var(--v2-bl-25); color: var(--blue-500); }
.spv2h-tier-staff{ background: rgba(139,92,246,.09); border: 1px solid rgba(139,92,246,.25); color: #7c3aed; }

/* ── Secondary metrics row ──────────────────────────────────────────────── */
.spv2h-sec-row {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  padding: 16px 26px;
  font-size: 12.5px;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.spv2h-sec-val { color: var(--text); font-weight: 600; }
.spv2h-sec-val.warn { color: var(--red); }
.spv2h-sec-link { color: var(--accent-text); font-weight: 600; text-decoration: none; margin-left: 4px; cursor: pointer; }
.spv2h-sec-link:hover { text-decoration: underline; }
.spv2h-sec-right { margin-left: auto; }

/* ── Portfolio filter pills ─────────────────────────────────────────────── */
.spv2h-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 20px 28px 0;
}
.spv2h-pill {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--white);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.spv2h-pill:hover { background: var(--surface-3); }
.spv2h-pill.active { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-border); }
.spv2h-pill-count {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
}
.spv2h-pill.active .spv2h-pill-count { background: var(--accent); color: #fff; }
.spv2h-pill-count.quiet { background: var(--surface-3); color: var(--text-3); }
.spv2h-pill.dashed { background: transparent; border-style: dashed; color: var(--text-3); }
.spv2h-pill.dashed:hover { background: var(--surface-2); }
.spv2h-pill-icon {
  font-size: 12px;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 7px;
  font-family: inherit;
  line-height: 1;
  transition: background .12s, color .12s;
}
.spv2h-pill-icon:hover { background: var(--surface-3); color: var(--text); }
.spv2h-pill-icon.del:hover { background: var(--red-soft); color: var(--red); }

/* Pill group — pill + icon buttons side by side */
.spv2h-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.spv2h-pill-group .spv2h-pill-icon {
  opacity: 0;
  transition: opacity .15s, background .12s, color .12s;
}
.spv2h-pill-group:hover .spv2h-pill-icon { opacity: 1; }

/* Inline rename / delete confirm row */
.spv2h-pill-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.spv2h-del-label {
  font-size: 12px;
  color: var(--text-2);
}
.spv2h-rename-inp {
  font-size: 13px;
  font-family: inherit;
  padding: 5px 12px;
  border: 1.5px solid var(--accent-border);
  border-radius: 999px;
  outline: none;
  width: 150px;
  color: var(--text);
  background: var(--white);
  transition: border-color .15s;
}
.spv2h-rename-inp:focus { border-color: var(--accent); }

/* ── Grid section header ────────────────────────────────────────────────── */
.spv2h-grid-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 22px 28px 14px;
}
.spv2h-grid-hdr-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 8px;
}
.spv2h-grid-hdr-title {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
  line-height: 1.1;
}
.spv2h-grid-hdr-count { font-weight: 600; color: var(--text); }
.spv2h-grid-hdr-sub { font-size: 12.5px; color: var(--text-3); margin-top: 6px; }

/* Add Property button */
.spv2h-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 10px;
  border: none;
  box-shadow: var(--shadow-cta);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: filter .12s;
}
.spv2h-add-btn:hover { filter: brightness(1.08); }

/* ── Search + sort controls ─────────────────────────────────────────────── */
.spv2h-grid-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 28px 14px;
}
.spv2h-search {
  min-width: 140px;
  max-width: 200px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  padding: 7px 12px;
  outline: none;
  transition: border-color .12s;
}
.spv2h-search:focus { border-color: var(--accent-border); }
.spv2h-search::placeholder { color: var(--text-3); }
.spv2h-sort-row { display: flex; gap: 5px; flex-wrap: wrap; }
.spv2h-sort-btn {
  font-size: 10px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-3);
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.spv2h-sort-btn.active { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-text); }

/* ── Property grid ──────────────────────────────────────────────────────── */
.spv2h-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  gap: 18px;
  padding: 0 28px 24px;
}

/* Property card */
.spv2h-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s;
}
.spv2h-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.spv2h-card-photo {
  height: 172px;
  position: relative;
  overflow: hidden;
  background: #001340;
}
.spv2h-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.spv2h-card:hover .spv2h-card-img { transform: scale(1.06); }
.spv2h-card-img-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,#001340 0%,#002070 60%);
}
.spv2h-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(0,10,34,0) 28%,rgba(0,10,34,.76) 100%);
}
.spv2h-card-status {
  position: absolute;
  top: 13px;
  left: 14px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(10,20,45,.6);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.spv2h-card-status.rented { color: #7CE36A; border-color: rgba(124,227,106,.35); }
.spv2h-card-status.vacant { color: #facc15; border-color: rgba(250,204,21,.32); }
.spv2h-card-title-block { position: absolute; left: 14px; right: 14px; bottom: 12px; }
.spv2h-card-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spv2h-card-meta { font-size: 11.5px; color: rgba(255,255,255,.72); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spv2h-card-body {
  padding: 16px 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.spv2h-card-fmv-label { font-size: 9.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--text-3); }
.spv2h-card-fmv { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--accent-deep); margin-top: 4px; font-variant-numeric: tabular-nums; }
.spv2h-card-stats { display: flex; gap: 16px; text-align: right; flex-shrink: 0; }
.spv2h-card-stat-lbl { font-size: 10px; color: var(--text-3); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.spv2h-card-stat-val { font-size: 14px; font-weight: 600; color: var(--text); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* Pills row (pills + manage controls) */
.spv2h-pills-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Inline pill input (new portfolio / rename) — light theme override */
.spv2h-pills-row .pm-ptab-input {
  color: #1a1a2e;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 140px;
}
.spv2h-pills-row .pm-ptab-ok {
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  background: #005EE3;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}
.spv2h-pills-row .pm-ptab-cancel {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #d1d5db;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  font-family: inherit;
}
.spv2h-pills-row .pm-ptab-inline,
.spv2h-pills-row .pm-ptab-del-confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* V2 manage controls (Rename / Delete) — light theme */
.spv2h-manage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.spv2h-manage-btn {
  padding: 4px 11px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.spv2h-manage-btn:hover { background: var(--surface-2); }
.spv2h-manage-btn.del { color: #ef4444; border-color: rgba(239,68,68,.25); }
.spv2h-manage-btn.del:hover { background: rgba(239,68,68,.07); }
.spv2h-manage-btn.save { background: var(--accent); color: #fff; border-color: var(--accent); }
.spv2h-manage-btn.save:hover { background: #0048b3; border-color: #0048b3; }

/* Add-another row */
.spv2h-add-row { padding: 4px 28px 32px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spv2h-refresh-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.spv2h-refresh-all-btn:hover { background: var(--surface-2); color: var(--text); }
.spv2h-refresh-all-btn:disabled { opacity: .45; cursor: not-allowed; }
.spv2h-add-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px dashed var(--accent-border);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: filter .12s;
}
.spv2h-add-btn-secondary:hover { filter: brightness(1.05); }

/* Empty search state */
.spv2h-empty-search { padding: 12px 28px 24px; color: var(--text-3); font-size: 13px; }

/* ── Big chart modal (S1.3a) ────────────────────────────────────────────── */
@keyframes spv2hFadeIn { from { opacity:0; } to { opacity:1; } }
.spv2h-big-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--scrim, rgba(16,24,42,.55));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: spv2hFadeIn .16s ease;
}
.spv2h-big-box {
  width: 100%;
  max-width: 920px;
  max-height: 90vh;
  overflow: auto;
  background: var(--white, #fff);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,10,40,.4);
  animation: spv2hRise .28s cubic-bezier(.4,0,.2,1);
  /* Force light-mode tokens — this box sits on a white surface inside a dark page,
     so all inherited dark-theme vars (--text:#f5f8fc, --green:#4ade80, etc.) would
     produce near-white text on white. Override them explicitly here. */
  --text:        #0A1024;
  --text-2:      #4A6080;
  --text-3:      #7A90A8;
  --accent-text: #005EE3;
  --accent:      #005EE3;
  --accent-deep: #003DB0;
  --green:       #16A34A;
  --red:         #DC2626;
  --hairline:    rgba(0,0,0,.08);
  --surface-2:   #F7F8FA;
  --surface-3:   #EEF0F4;
  --border:      rgba(0,0,0,.1);
  --white:       #fff;
  color: var(--text);
}
.spv2h-big-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px 26px 18px;
  border-bottom: 1px solid var(--hairline);
}
.spv2h-big-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.spv2h-big-val {
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.spv2h-big-periods {
  display: flex;
  gap: 4px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}
.spv2h-big-period {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  padding: 5px 14px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.spv2h-big-period.active { background: var(--white, #fff); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.spv2h-big-close {
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.spv2h-big-chart-wrap { padding: 20px 26px 4px; }
.spv2h-big-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  padding: 6px 26px 22px;
}
.spv2h-big-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.spv2h-big-legend-line { width: 14px; height: 2.5px; background: var(--accent); border-radius: 2px; display: inline-block; }
.spv2h-big-legend-dot  { width: 10px; height: 10px; border-radius: 50%; background: var(--green); display: inline-block; }
.spv2h-big-legend-hint { margin-left: auto; font-size: 11.5px; color: var(--text-3); }
.spv2h-big-activity { border-top: 1px solid var(--hairline); padding: 16px 26px 22px; }
.spv2h-big-activity-lbl {
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 10px;
}
.spv2h-big-ev-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--hairline);
}
.spv2h-big-ev-row:last-child { border-bottom: none; }
.spv2h-big-ev-dot  { width:9px; height:9px; border-radius:50%; flex-shrink:0; display:inline-block; }
.spv2h-big-ev-date { font-size:12px; color:var(--text-3); width:80px; flex-shrink:0; font-variant-numeric:tabular-nums; }
.spv2h-big-ev-title{ font-size:13.5px; color:var(--text); font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spv2h-big-ev-amt  { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ── Hero image shimmer (while loading) ──────────────────────────────────── */
.sp-v2-hero-skel {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--grey-100) 25%, #e8e8e8 50%, var(--grey-100) 75%);
  background-size: 200% 100%;
  animation: sp-v2-shimmer 1.4s infinite;
}
@keyframes sp-v2-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .spv2h-kpi-card { grid-template-columns: repeat(2,1fr); }
  .spv2h-kpi-cell:nth-child(2) { border-right: none; }
  .spv2h-kpi-cell:nth-child(3) { border-top: 1px solid var(--hairline); }
}
@media (max-width:900px) {
  .spv2h-hero-inner { padding: 40px 20px 76px; }
  .spv2h-kpi-card { margin-left: 16px; margin-right: 16px; }
  .spv2h-grid { padding: 0 16px 20px; gap: 14px; }
  .spv2h-pills { padding: 16px 16px 0; }
  .spv2h-grid-hdr { padding: 16px 16px 12px; }
  .spv2h-grid-controls { padding: 0 16px 10px; }
  .spv2h-sec-row { padding: 12px 20px; gap: 14px; }
  .spv2h-add-row { padding: 4px 16px 24px; }
}
@media (max-width:600px) {
  .spv2h-kpi-card { grid-template-columns: 1fr; margin-top: -32px; }
  .spv2h-kpi-cell { border-right: none !important; border-bottom: 1px solid var(--hairline); }
  .spv2h-kpi-cell:last-child { border-bottom: none; }
  .spv2h-kpi-val { font-size: 21px; }
  .spv2h-grid { grid-template-columns: 1fr; }
  .spv2h-grid-hdr-title { font-size: 24px; }
  .spv2h-hero-chart-card { flex-basis: 100%; min-width: 0; }
  .spv2h-sec-right { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Smart Portfolio V2 — Landing Page  (S1.4)
   All selectors scoped to .sp-v2-landing-page on <body>.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Base reset for landing body ─────────────────────────────────────────── */
body.sp-v2-landing-page {
  margin: 0; padding: 0;
  background: #F7F8FA !important;
  background-color: #F7F8FA !important;
  background-image: none !important;
  font-family: 'Inter', system-ui, sans-serif;
  color: #131416; line-height: 1.6; overflow-x: hidden;
}
body.sp-v2-landing-page * { box-sizing: border-box; }
/* Nuke the DDI dark orb/grid overlays — they inject via <body> children but must not appear on the landing */
body.sp-v2-landing-page .bg-grid,
body.sp-v2-landing-page .orb { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SMART PORTFOLIO LANDING V2 — Design System CSS 2026
   Sections 2-12 per reference: Smart_Portfolio_Landing_-_for_Replit.html
   ═══════════════════════════════════════════════════════════════════════════ */

/* Newsreader — injected via <link> in _portRenderLandingV2 for reliability */

/* Dark orb/grid suppression — kept from V1 (Trap 1) */
body.sp-v2-landing-page .bg-grid,
body.sp-v2-landing-page .orb { display: none !important; }

/* ── Design tokens scoped to landing body ─────────────────────────────────── */
body.sp-v2-landing-page {
  --ink:  #050A16;
  --ink-2: #0A1024;
  --bg: #FFFFFF;
  --section-alt: #F5F7FA;
  --text: #1A2233;
  --text-2: #586173;
  --text-3: #8A93A6;
  --border: #E4E8F0;
  --hairline: #E4E8F0;
  --accent: #005EE3;
  --accent-deep: #0035A3;
  --accent-soft: #F7FAFF;
  --accent-text: #005EE3;
  --green: #1F9D57;
  --green-soft: #F0FAF4;
  --amber: #C77700;
  --amber-soft: #FFF8E1;
  --surface: #FFFFFF;
  --surface-2: #F5F7FA;
  --shadow-card: 0 12px 40px rgba(0,20,70,0.06);
  --shadow-float: 0 18px 50px rgba(0,20,70,0.14);
  --shadow-cta: 0 4px 14px rgba(0,94,227,0.28);

  font-family: 'Inter', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  overflow-x: hidden;
}

/* ── Typography ────────────────────────────────────────────────────────────── */
body.sp-v2-landing-page .sp2-serif {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  letter-spacing: -0.02em;
}
body.sp-v2-landing-page .sp2-serif-i {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
body.sp-v2-landing-page h1.sp2-serif,
body.sp-v2-landing-page h2.sp2-serif,
body.sp-v2-landing-page h3.sp2-serif { font-style: normal; }

/* ── Nav (UNCHANGED — identical to V1 styling) ─────────────────────────────── */
.splp-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.07);
  display: flex; align-items: center; gap: 0;
  padding: 0 24px; height: 60px;
}
.splp-nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: 32px; flex-shrink: 0; }
.splp-nav-logo img { height: 28px; width: auto; }
.splp-nav-links { display: flex; align-items: center; gap: 4px; flex: 1; overflow: hidden; }
.splp-nav-link {
  font-size: 13px; font-weight: 600; color: #5E6470; text-decoration: none;
  padding: 7px 12px; border-radius: 8px; white-space: nowrap;
  transition: background .15s, color .15s; display: inline-flex; align-items: center; gap: 6px;
}
.splp-nav-link:hover { color: #131416; background: #F0F2F5; }
.splp-nav-link.active { color: #005EE3; font-weight: 600; }
.splp-nav-right { display: flex; align-items: center; gap: 8px; margin-left: 16px; flex-shrink: 0; }
.splp-nav-login {
  font-size: 13px; font-weight: 600; color: #5E6470; text-decoration: none;
  padding: 7px 12px; border-radius: 8px; transition: background .15s, color .15s;
}
.splp-nav-login:hover { color: #131416; background: #F0F2F5; }
.splp-nav-cta {
  font-size: 13px; font-weight: 700; color: #fff; background: #005EE3;
  border: none; border-radius: 9px; padding: 8px 16px; cursor: pointer;
  font-family: inherit; transition: background .15s; white-space: nowrap;
}
.splp-nav-cta:hover { background: #0050C8; }
.splp-nav-login { display: inline-flex; align-items: center; }
.splp-nav-soon { cursor: pointer; opacity: .85; }
.splp-nav-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(0,94,227,.1); color: #005EE3; padding: 2px 6px; border-radius: 5px;
}
.splp-nav-dropdown-wrap { position: relative; cursor: pointer; }
.splp-nav-dd {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  background: #fff; border: 1px solid #E8EAED; border-radius: 10px; min-width: 150px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; z-index: 200;
}
.splp-nav-dd-item {
  display: block; font-size: 13px; font-weight: 500; color: #374151;
  padding: 9px 14px; border-radius: 7px; text-decoration: none; transition: background .15s;
}
.splp-nav-dd-item:hover { background: #F0F2F5; }

/* ── §2 HERO — dark, centered ──────────────────────────────────────────────── */
#sp2top {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  text-align: center;
}
#sp2top .sp2-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .4; pointer-events: none;
}
#sp2top .sp2-hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 70% 0%, rgba(0,60,160,.35) 0%, rgba(5,10,22,0) 55%),
              linear-gradient(180deg, rgba(5,10,22,.55) 0%, rgba(5,10,22,.82) 55%, var(--ink) 100%);
  pointer-events: none;
}
#sp2top .sp2-hero-inner {
  position: relative;
  max-width: 1200px; margin: 0 auto;
  padding: 60px 20px 0;
}
.sp2-hero-tabs {
  display: inline-flex;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 11px; padding: 3px;
  margin-bottom: 26px;
  animation: sp2Rise .5s cubic-bezier(.4,0,.2,1);
}
.sp2-hero-tab {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 13px; font-weight: 600;
  padding: 9px 22px; border-radius: 9px;
  border: none; cursor: pointer;
  white-space: nowrap;
  transition: all .18s cubic-bezier(.4,0,.2,1);
  background: transparent; color: #C7D4EA;
}
.sp2-hero-tab.active {
  background: #005EE3; color: #fff;
  box-shadow: 0 4px 14px rgba(0,94,227,.45);
}
.sp2-hero-h1 {
  font-size: clamp(44px, 6.2vw, 88px);
  line-height: .98;
  color: #fff;
  animation: sp2Rise .55s cubic-bezier(.4,0,.2,1);
  margin: 0 0 22px;
}
.sp2-hero-sub {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  margin: 0 auto 30px;
  max-width: 600px;
  font-weight: 300;
  animation: sp2Rise .6s cubic-bezier(.4,0,.2,1);
}
.sp2-hero-cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; background: #005EE3; color: #fff;
  font-weight: 700; font-size: 16px; font-family: inherit;
  padding: 16px 30px; border-radius: 12px; border: none; cursor: pointer;
  box-shadow: 0 10px 34px rgba(0,60,180,.6); white-space: nowrap;
  animation: sp2Rise .65s cubic-bezier(.4,0,.2,1);
  transition: transform .18s, box-shadow .18s;
  text-decoration: none;
}
.sp2-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,60,180,.7); }
.sp2-hero-cta-sub {
  font-size: 12.5px; color: rgba(255,255,255,.6);
  margin: 14px 0 40px;
  animation: sp2Rise .7s cubic-bezier(.4,0,.2,1);
}

/* Browser chrome + dashboard capture */
.sp2-browwrap {
  position: relative;
  border-radius: 16px; overflow: hidden;
  background: #0B1220;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 40px 100px rgba(0,10,40,.55), 0 8px 30px rgba(0,10,40,.4);
  max-width: 940px; margin: 0 auto;
  animation: sp2Rise .75s cubic-bezier(.4,0,.2,1);
}
.sp2-browbar {
  height: 38px; display: flex; align-items: center;
  gap: 7px; padding: 0 14px;
  background: #0F1626;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sp2-browdot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.sp2-browurl {
  flex: 1; text-align: center;
  font-size: 11px; color: #6B7A93; font-weight: 500;
}
.sp2-browlive {
  display: flex; align-items: center; gap: 5px; flex: none;
}
.sp2-browlive-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #7CE36A;
  animation: sp2LivePulse 2.2s ease-in-out infinite;
}
.sp2-browlive-txt { font-size: 10px; font-weight: 600; color: #7CE36A; }
.sp2-browport {
  height: clamp(420px, 58vw, 680px);
  overflow: hidden; background: #0A0E18;
}
.sp2-browport img {
  width: 100%; display: block;
  object-fit: cover; object-position: top;
}
.sp2-hero-caption {
  font-size: 12px; color: rgba(255,255,255,.5);
  padding: 16px 20px 44px;
  text-align: center;
}

/* ── §3 TRUST STRIP ─────────────────────────────────────────────────────────── */
#sp2trust {
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
#sp2trust .sp2-trust-inner {
  max-width: 700px; margin: 0 auto;
  padding: 36px 20px;
  display: flex; justify-content: center; gap: 64px;
  flex-wrap: wrap;
}
.sp2-trust-item { text-align: center; }
.sp2-trust-val {
  font-size: 28px; font-weight: 700; color: var(--text);
  letter-spacing: -.02em;
}
.sp2-trust-label { font-size: 13px; color: var(--text-3); margin-top: 4px; }

/* ── §4 VALUE — tabbed section ──────────────────────────────────────────────── */
#sp2value {
  max-width: 1200px; margin: 0 auto;
  padding: 88px 20px;
}
.sp2-val-header {
  display: flex; justify-content: space-between;
  align-items: flex-end; gap: 24px; flex-wrap: wrap;
  margin-bottom: 48px;
}
.sp2-val-tabs {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 4px;
  flex-wrap: wrap; gap: 2px;
}
.sp2-val-tab {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 13px; font-weight: 600;
  padding: 9px 18px; border-radius: 9px; border: none; cursor: pointer;
  white-space: nowrap;
  transition: all .18s cubic-bezier(.4,0,.2,1);
  background: transparent; color: var(--text-2);
}
.sp2-val-tab.active {
  background: var(--accent); color: #fff;
  box-shadow: var(--shadow-cta);
}
.sp2-val-block { display: none; }
.sp2-val-block.active { display: block; }
.sp2-val-block-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.sp2-val-num {
  font-size: 15px; color: var(--accent-text); font-variant-numeric: tabular-nums;
}
.sp2-val-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 16px;
}
.sp2-val-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px;
  box-shadow: var(--shadow-card);
}
.sp2-val-card-kicker {
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
.sp2-val-card-title {
  font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px;
}
.sp2-val-card-desc { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.sp2-val-alert {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 18px; box-shadow: var(--shadow-card);
  border-left-width: 4px;
}
.sp2-val-alert-left { display: flex; align-items: center; gap: 12px; flex: 1; }
.sp2-val-alert-icon { font-size: 16px; flex: none; }
.sp2-val-alert-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
}
.sp2-val-alert-text { font-size: 14px; color: var(--text); font-weight: 500; margin-top: 2px; }
.sp2-val-alert-cta {
  font-size: 13px; font-weight: 700; color: var(--accent-text);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 14px;
  background: none; cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: background .15s;
}
.sp2-val-alert-cta:hover { background: var(--accent-soft); }

/* ── §5 ACT — pull quote + outcomes + insights ──────────────────────────────── */
#sp2act {
  background: var(--section-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
#sp2act .sp2-act-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 96px 20px;
}
.sp2-act-text { max-width: 800px; margin-bottom: 48px; }
.sp2-act-cols {
  display: flex; gap: 56px; flex-wrap: wrap; align-items: flex-start;
}
.sp2-act-left { flex: 1 1 340px; min-width: 280px; }
.sp2-act-pull {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.3; color: var(--text);
  margin-bottom: 26px;
}
.sp2-outcomes { display: flex; flex-direction: column; gap: 20px; }
.sp2-outcome { display: flex; gap: 14px; align-items: flex-start; }
.sp2-outcome-num {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: var(--accent-soft); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.sp2-outcome-title { font-size: 16px; font-weight: 600; color: var(--text); }
.sp2-outcome-desc { font-size: 14px; line-height: 1.55; color: var(--text-2); margin-top: 3px; }
.sp2-act-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 15px;
  padding: 14px 26px; border-radius: 11px; box-shadow: var(--shadow-cta);
  border: none; cursor: pointer; font-family: inherit; text-decoration: none;
  transition: background .15s;
}
.sp2-act-cta:hover { background: var(--accent-deep); }
.sp2-act-right { flex: 1 1 300px; min-width: 260px; }
.sp2-insights { display: flex; flex-direction: column; gap: 10px; }
.sp2-insight {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px;
  box-shadow: var(--shadow-card);
  border-left-width: 4px;
}
.sp2-insight-icon {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.sp2-insight-body { flex: 1; }
.sp2-insight-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 3px;
}
.sp2-insight-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.sp2-insight-desc { font-size: 12.5px; color: var(--text-2); margin-top: 2px; line-height: 1.4; }
.sp2-insight-cta {
  font-size: 12px; font-weight: 700; color: var(--accent-text);
  border: none; background: none; cursor: pointer; font-family: inherit;
  padding: 4px 0; white-space: nowrap;
}

/* ── §6 HOW — interactive flow ──────────────────────────────────────────────── */
#sp2how {
  max-width: 1200px; margin: 0 auto;
  padding: 96px 20px;
}
.sp2-how-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.sp2-how-card {
  max-width: 820px; margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.sp2-how-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.sp2-how-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; font-size: 13px; font-weight: 600;
  color: var(--text-3); background: transparent;
  border-bottom: 2px solid transparent;
  cursor: default;
  transition: color .15s, background .15s;
}
.sp2-how-tab.active { color: var(--accent-text); background: var(--accent-soft); border-bottom-color: var(--accent); }
.sp2-how-tab.done { color: var(--accent-text); }
.sp2-how-tab-num {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  background: var(--text-3);
}
.sp2-how-tab.active .sp2-how-tab-num,
.sp2-how-tab.done .sp2-how-tab-num { background: var(--accent); }
.sp2-how-body { padding: 28px; min-height: 220px; }

/* Reuse existing splp-* form styles for step cards in #how section */
.sp2-step-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 12px;
}

/* ── §7 BENEFITS GRID ───────────────────────────────────────────────────────── */
#sp2benefits {
  max-width: 1200px; margin: 0 auto;
  padding: 0 20px 96px;
}
.sp2-benefits-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 44px;
}
.sp2-benefit {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 30px 26px;
  box-shadow: var(--shadow-card);
}
.sp2-benefit-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.sp2-benefit-desc { font-size: 14px; line-height: 1.55; color: var(--text-2); }

/* ── §8 ENTERPRISE — corporate only ─────────────────────────────────────────── */
#sp2enterprise {
  max-width: 1200px; margin: 0 auto;
  padding: 0 20px 96px;
}
.sp2-ent-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 24px; box-shadow: var(--shadow-float);
  overflow: hidden; display: flex; flex-wrap: wrap;
}
.sp2-ent-left { flex: 1 1 380px; min-width: 300px; padding: 48px 40px; }
.sp2-ent-check { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; }
.sp2-ent-check-mark { color: var(--green); font-weight: 700; flex: none; }
.sp2-ent-check-text { font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.sp2-ent-btns { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.sp2-ent-btn-demo {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 15px;
  padding: 15px 28px; border-radius: 11px; box-shadow: var(--shadow-cta);
  border: none; cursor: pointer; font-family: inherit; text-decoration: none;
  transition: background .15s;
}
.sp2-ent-btn-demo:hover { background: var(--accent-deep); }
.sp2-ent-btn-price {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent-text); font-weight: 600; font-size: 15px;
  padding: 15px 22px; border-radius: 11px; border: 1px solid var(--border);
  background: none; cursor: pointer; font-family: inherit; text-decoration: none;
  transition: border-color .15s;
}
.sp2-ent-btn-price:hover { border-color: var(--accent); }
.sp2-ent-right {
  flex: 1 1 300px; min-width: 280px;
  background: var(--ink); position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px 40px; color: #fff;
}
.sp2-ent-right img.sp2-ent-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .28; pointer-events: none;
}
.sp2-ent-right-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(0,13,44,.6), rgba(5,10,22,.92));
}
.sp2-ent-right-inner { position: relative; }
.sp2-ent-stat { margin-bottom: 18px; }
.sp2-ent-stat-val {
  font-size: 32px; color: #fff;
}
.sp2-ent-stat-label { font-size: 12.5px; color: rgba(255,255,255,.7); margin-top: 2px; }

/* ── §9 TESTIMONIALS ─────────────────────────────────────────────────────────── */
#sp2testimonials {
  max-width: 1200px; margin: 0 auto;
  padding: 20px 20px 40px;
}
.sp2-test-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.sp2-test-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px;
  box-shadow: var(--shadow-card);
}
.sp2-test-quote {
  font-size: 19px; line-height: 1.45; color: var(--text);
}
.sp2-test-footer {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
}
.sp2-test-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--surface-2); object-fit: cover;
}
.sp2-test-name { font-size: 13px; font-weight: 600; color: var(--text); }
.sp2-test-role { font-size: 12px; color: var(--text-3); }

/* ── §10 FAQ ──────────────────────────────────────────────────────────────────── */
#sp2faq {
  max-width: 900px; margin: 0 auto;
  padding: 20px 20px 60px;
}
.sp2-faq-head { text-align: center; margin-bottom: 28px; }
.sp2-faqs { display: flex; flex-direction: column; gap: 10px; }
details.sp2-faq {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 0 22px;
  box-shadow: var(--shadow-card);
}
details.sp2-faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0;
  font-size: 15.5px; font-weight: 600; color: var(--text);
}
details.sp2-faq summary::-webkit-details-marker { display: none; }
details.sp2-faq .sp2-faq-plus {
  font-size: 20px; color: var(--accent-text); line-height: 1; flex: none;
  transition: transform .2s;
}
details.sp2-faq[open] .sp2-faq-plus { transform: rotate(45deg); }
details.sp2-faq .sp2-faq-answer {
  font-size: 14px; line-height: 1.6; color: var(--text-2);
  padding: 0 0 18px;
}

/* ── §11 FINAL CTA — dark ───────────────────────────────────────────────────── */
#sp2cta {
  max-width: 1200px; margin: 0 auto;
  padding: 0 20px 96px;
}
.sp2-cta-box {
  position: relative; border-radius: 24px; overflow: hidden;
  background: var(--ink-2); padding: 80px 36px; text-align: center;
}
.sp2-cta-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .32; pointer-events: none;
}
.sp2-cta-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(90% 80% at 50% 0%, rgba(0,60,160,.4), rgba(4,8,22,0) 55%),
              linear-gradient(180deg, rgba(0,18,55,.55), rgba(4,8,22,.92));
  pointer-events: none;
}
.sp2-cta-inner {
  position: relative; max-width: 660px; margin: 0 auto;
}
.sp2-cta-logomark { width: 42px; height: 42px; margin: 0 auto 22px; display: block; }
.sp2-cta-h2 {
  font-size: clamp(32px, 4.4vw, 54px); line-height: 1.03; color: #fff;
  margin: 0 0 18px;
}
.sp2-cta-sub {
  font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.82);
  margin: 0 auto 30px; max-width: 480px; font-weight: 300;
}
.sp2-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; color: #0035A3; font-weight: 700; font-size: 17px;
  padding: 18px 38px; border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0,40,120,.5);
  border: none; cursor: pointer; font-family: inherit; text-decoration: none;
  transition: transform .18s;
}
.sp2-cta-btn:hover { transform: translateY(-2px); }
.sp2-cta-btn-sub { margin-top: 16px; font-size: 12.5px; color: rgba(255,255,255,.6); }

/* ── §12 FOOTER ─────────────────────────────────────────────────────────────── */
#sp2footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
}
#sp2footer .sp2-footer-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 26px 20px;
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 16px;
}
.sp2-footer-copy { font-size: 12px; color: var(--text-3); }
.sp2-footer-social { display: flex; align-items: center; gap: 16px; color: var(--text-3); }
.sp2-footer-social a { font-size: 14px; font-weight: 700; color: var(--text-3); text-decoration: none; transition: color .15s; }
.sp2-footer-social a:hover { color: var(--text); }
.sp2-footer-disclaimer {
  font-size: 12px; color: var(--text-3);
  text-align: right; max-width: 340px;
}

/* ── STICKY BAR (updated design) ──────────────────────────────────────────── */
.splp-sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
  border-top: 1px solid #E8EAED; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transform: translateY(100%); transition: transform .3s ease;
}
.splp-sticky-bar.visible { transform: translateY(0); }
.splp-sticky-bar-text { font-size: 14px; color: #131416; font-weight: 600; }
.splp-sticky-bar-sub { font-size: 12px; color: #9CA3AF; }
.splp-sticky-bar-btn {
  padding: 10px 22px; background: #005EE3; color: #fff; font-size: 14px; font-weight: 700;
  border: none; border-radius: 9px; cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: background .18s;
}
.splp-sticky-bar-btn:hover { background: #0050C8; }

/* ── Section header utility ──────────────────────────────────────────────── */
.sp2-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 12px;
}
.sp2-sec-h2 {
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.06; color: var(--text);
  margin: 0 0 14px;
}
.sp2-sec-sub {
  font-size: 16px; line-height: 1.6; color: var(--text-2);
  margin: 0;
}

/* ── OTP input boxes (reused in #how step 3 signup) ──────────────────────── */
.splp-otp-wrap { text-align: center; padding: 8px 0; }
.splp-otp-title { font-size: 14px; font-weight: 700; color: #131416; margin-bottom: 4px; }
.splp-otp-sub { font-size: 12.5px; color: #6B7280; margin-bottom: 16px; }
.splp-otp-boxes { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.splp-otp-box {
  width: 44px; height: 52px; border: 1.5px solid #E8EAED; border-radius: 9px;
  font-size: 20px; font-weight: 700; text-align: center; font-family: inherit;
  color: #131416; background: #FAFAFA; outline: none; transition: border .18s;
}
.splp-otp-box:focus { border-color: #005EE3; background: #fff; }

/* ── Form inputs (reused in flow) ────────────────────────────────────────── */
.splp-text-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; border: 1.5px solid #E8EAED; border-radius: 10px;
  font-size: 14px; font-family: inherit; color: #131416; background: #FAFAFA;
  outline: none; transition: border .18s;
}
.splp-text-input:focus { border-color: #005EE3; background: #fff; }
.splp-status-msg { font-size: 12.5px; margin-top: 6px; color: #DC2626; min-height: 18px; }
.splp-status-msg.ok { color: #16A34A; }

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.splp-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: splp-spin .7s linear infinite;
}
@keyframes splp-spin { to { transform: rotate(360deg); } }

/* ── Corporate post-signup interstitial ──────────────────────────────────── */
.splp-interstitial {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.6); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.splp-interstitial-box {
  background: #fff; border-radius: 20px; padding: 44px 40px; max-width: 480px; width: 100%;
  text-align: center; box-shadow: 0 20px 80px rgba(0,0,0,.25);
}
.splp-interstitial-logo { margin-bottom: 24px; }
.splp-interstitial-logo img { height: 36px; }
.splp-interstitial-h2 { font-size: 24px; font-weight: 800; color: #131416; margin-bottom: 10px; letter-spacing: -.02em; }
.splp-interstitial-sub { font-size: 14.5px; color: #6B7280; line-height: 1.6; margin-bottom: 28px; }
.splp-interstitial-btns { display: flex; flex-direction: column; gap: 10px; }
.splp-interstitial-demo {
  padding: 14px; background: #005EE3; color: #fff; font-size: 15px; font-weight: 700;
  border: none; border-radius: 10px; cursor: pointer; font-family: inherit; transition: background .18s;
}
.splp-interstitial-demo:hover { background: #0050C8; }
.splp-interstitial-wa {
  padding: 14px; background: #F7F8FA; color: #131416; font-size: 14px; font-weight: 600;
  border: 1.5px solid #E8EAED; border-radius: 10px; cursor: pointer; font-family: inherit; transition: all .18s;
}
.splp-interstitial-wa:hover { border-color: #005EE3; color: #005EE3; }
.splp-interstitial-skip {
  display: block; margin-top: 14px; font-size: 13px; color: #6B7280;
  text-decoration: none; cursor: pointer; background: none; border: none; font-family: inherit;
}

/* ── Reveal animation ────────────────────────────────────────────────────── */
@keyframes sp2Rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sp2LivePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .5; transform: scale(.8); }
}
.rv {
  opacity: 0; transform: translateY(30px);
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.rv.in { opacity: 1; transform: none; }

/* ── Step card reuse in #how ─────────────────────────────────────────────── */
.splp-step-card { /* keep existing step card padding/bg */ }
.splp-search-wrap { position: relative; margin-top: 14px; }
.splp-search-input {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--accent); border-radius: 11px;
  padding: 15px 14px; font-size: 15px; font-family: inherit;
  color: var(--text); background: var(--surface); outline: none;
  box-shadow: 0 0 0 3px rgba(0,94,227,.12);
}
.splp-search-results {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12); z-index: 30; overflow: hidden;
}
.splp-search-result-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer; border-bottom: 1px solid var(--border);
  transition: background .13s;
}
.splp-search-result-item:last-child { border-bottom: none; }
.splp-search-result-item:hover { background: var(--accent-soft); }
.splp-search-result-img {
  width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none;
  background: var(--surface-2);
}
.splp-search-result-name { font-size: 14px; font-weight: 600; color: var(--text); }
.splp-search-result-area { font-size: 12px; color: var(--text-3); }
.splp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.splp-form-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 4px; }
.splp-select {
  width: 100%; box-sizing: border-box;
  padding: 11px 12px; border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 14px; font-family: inherit; color: var(--text); background: var(--surface);
  appearance: none; outline: none; transition: border .18s; cursor: pointer;
}
.splp-select:focus { border-color: var(--accent); }
.splp-valuation-btn {
  width: 100%; margin-top: 14px; padding: 14px;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 700;
  border: none; border-radius: 11px; cursor: pointer; font-family: inherit;
  transition: background .15s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.splp-valuation-btn:hover { background: var(--accent-deep); }
.splp-valuation-btn:disabled { opacity: .6; cursor: default; }
.splp-step-error { font-size: 12.5px; color: #DC2626; margin-top: 6px; min-height: 18px; }
.splp-val-result {
  text-align: center; padding: 12px 0 20px;
}
.splp-val-result-label {
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
.splp-val-result-amount {
  font-size: 36px; font-weight: 800; color: var(--text); letter-spacing: -.02em; margin-bottom: 4px;
}
.splp-val-result-range { font-size: 13px; color: var(--text-2); margin-bottom: 4px; }
.splp-val-result-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent-text);
  padding: 3px 10px; border-radius: 20px; margin-bottom: 16px;
}
.splp-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.splp-signup-prompt { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 12px; text-align: center; }
.splp-signup-sub { font-size: 12.5px; color: var(--text-2); text-align: center; margin-bottom: 14px; }
.splp-signup-btn {
  width: 100%; padding: 14px; background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 700; border: none; border-radius: 11px;
  cursor: pointer; font-family: inherit; transition: background .15s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.splp-signup-btn:hover { background: var(--accent-deep); }
.splp-signup-btn:disabled { opacity: .6; }
.splp-back-link {
  background: none; border: none; font-size: 13px; color: var(--text-2);
  cursor: pointer; font-family: inherit; padding: 0; margin-bottom: 12px;
  display: block; transition: color .15s;
}
.splp-back-link:hover { color: var(--accent); }
.splp-corp-cta-box {
  background: linear-gradient(135deg, #EEF4FF 0%, #F3EEFF 100%);
  border: 1px solid rgba(99,102,241,.15); border-radius: 14px;
  padding: 24px; text-align: center;
}
.splp-corp-cta-title { font-size: 15.5px; font-weight: 700; color: #131416; margin-bottom: 6px; }
.splp-corp-cta-desc { font-size: 13px; color: #6B7280; margin-bottom: 20px; }
.splp-corp-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.splp-corp-btn-demo {
  padding: 13px 22px; background: #005EE3; color: #fff; font-size: 14px; font-weight: 700;
  border: none; border-radius: 10px; cursor: pointer; font-family: inherit; transition: background .18s;
}
.splp-corp-btn-demo:hover { background: #0050C8; }
.splp-corp-btn-wa {
  padding: 13px 22px; background: #F7F8FA; color: #131416; font-size: 14px; font-weight: 600;
  border: 1.5px solid #E8EAED; border-radius: 10px; cursor: pointer; font-family: inherit; transition: all .18s;
}
.splp-corp-btn-wa:hover { border-color: #005EE3; color: #005EE3; }
.splp-otp-resend { font-size: 12.5px; color: #6B7280; text-align: center; margin-top: 10px; }
.splp-otp-resend button { background: none; border: none; color: #005EE3; cursor: pointer; font-size: 12.5px; font-family: inherit; text-decoration: underline; padding: 0; }
.splp-otp-verify-btn {
  width: 100%; padding: 14px; margin-top: 10px; background: #005EE3; color: #fff;
  font-size: 15px; font-weight: 700; border: none; border-radius: 11px; cursor: pointer;
  font-family: inherit; transition: background .18s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.splp-otp-verify-btn:hover { background: #0050C8; }
.splp-otp-verify-btn:disabled { opacity: .6; }
.splp-otp-err { font-size: 12.5px; color: #DC2626; text-align: center; margin-top: 6px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .splp-nav-links { display: none; }
  .sp2-val-cards { grid-template-columns: 1fr; }
  .sp2-benefits-grid { grid-template-columns: 1fr 1fr; }
  .sp2-act-cols { flex-direction: column; }
  .sp2-ent-right { display: none; }
  .sp2-footer-disclaimer { text-align: left; }
}
@media (max-width: 520px) {
  .sp2-benefits-grid { grid-template-columns: 1fr; }
  .splp-name-row { grid-template-columns: 1fr; }
  .splp-form-row { grid-template-columns: 1fr; }
  .splp-corp-btns { flex-direction: column; align-items: stretch; }
  .splp-sticky-bar-sub { display: none; }
  .splp-otp-box { width: 38px; height: 46px; font-size: 18px; }
  #sp2trust .sp2-trust-inner { gap: 32px; }
  .sp2-how-tab span:not(.sp2-how-tab-num) { display: none; }
}