:root{
            --bg-1:#F7F8FD;
            --bg-2:#EDEFFC;
            --bg-3:#F3E9FA;
            --bg-4:#FBEAF3;
            --surface:#FFFFFF;
            --navy:#13123A;
            --navy-2:#1B1A4A;
            --ink-soft:#5B5A80;
            --violet:#6C63E8;
            --violet-2:#8B7DF2;
            --blue:#5D8CF6;
            --magenta:#D06AE0;
            --pink:#F0A8E0;
            --grad: linear-gradient(120deg, var(--violet) 0%, var(--blue) 50%, var(--magenta) 100%);
            --grad-soft: linear-gradient(120deg, rgba(108,99,232,0.14), rgba(93,140,246,0.14) 50%, rgba(208,106,224,0.14));
            --dark-bg:#171238;
            --dark-bg-2:#1F1A4D;
            --line-light:rgba(19,18,58,0.10);
            --line-dark:rgba(255,255,255,0.14);
            --muted-on-dark:#B9B3E6;
        }

        *{box-sizing:border-box;}

        h1, h2, h3, .display { font-family:'Poppins',sans-serif !important; letter-spacing:-0.01em; }

        .mono{ font-family:'JetBrains Mono',monospace; letter-spacing:-0.02em; }

        a{color:inherit;text-decoration:none;}
		a.js-ouvre-popup:not(.btn) { color: #fff !important;}

        .wrap{max-width:1240px; margin:0 auto; padding:0 32px;}

        section{position:relative;}

        ::selection{background:var(--violet); color:#fff;}

        footer{background:var(--dark-bg); color:var(--muted-on-dark); padding:56px 0 30px; font-size:13.5px;}

        .foot-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; padding-bottom:36px; border-bottom:1px solid var(--line-dark);}

        .foot-cols{display:flex; gap:64px; flex-wrap:wrap;}

        .foot-col h4{font-size:12px; color:#fff; text-transform:uppercase; letter-spacing:.08em; margin:0 0 14px;}
		
		.btn { padding:14px 26px !important; border-radius:100px !important; font-weight:600 !important; font-size:14.5px !important;
			display:inline-flex; align-items:center; gap:8px; border:1px solid transparent !important; transition:transform .15s, opacity .15s; }
		.btn:hover {transform:translateY(-1px);}
		.btn-primary {background:var(--grad) !important; color:#fff !important;}
		.btn-ghost {border-color:rgba(19,18,58,0.18) !important; color:var(--navy) !important;}
		.btn-ghost:hover {border-color:rgba(19,18,58,0.4) !important;}
		.btn-ghost.on-dark {border-color:rgba(255,255,255,0.4) !important; /*color:#fff;*/}
		.btn-ghost.on-dark:hover {background:rgba(255,255,255,0.12) !important;}
		
		/* ---------- CTA BAND ---------- */
  		.cta-band { background:var(--grad); color:#fff; text-align:center; padding:56px 0; }
	  	.cta-band h2 {font-size:34px; margin:0 0 14px; font-weight: 700 !important;}
  		.cta-band p {font-size:16px; opacity:.9; margin:0 0 30px;}
		
		/* =====================================================================
		   idp-hero-common.css
		   Shared hero styling for ssp.php (.hero-miami), yield.php (.yield-hero)
		   and marketplace.php (.mkt-hero).

		   Goal: identical width, height and padding across the three hero
		   sections, plus a single copy of the shared background/gradient and
		   grid-line overlay instead of duplicating it in every page.

		   Usage: add the class 'idp-hero' to the <section> element of each
		   hero (in addition to its existing page-specific class, e.g.
		   class='hero hero-miami idp-hero') and load this stylesheet before
		   the page-specific <style> block so page rules can still add
		   page-specific extras (title copy, visuals, etc.) without fighting
		   for specificity on the shared box model.
		   ===================================================================== */

		/* ---------------------------------------------------------------------
		   Tunable width for the hero's .wrap only. The site-wide .wrap class
		   (defined outside these files, in the theme/global CSS) doesn't
		   appear identical across ssp.php / yield.php / marketplace.php, so
		   we pin an explicit value here instead of relying on it. This only
		   applies to .wrap when it's the direct child of .idp-hero, so every
		   other .wrap on the page (other sections) keeps using the site's
		   normal container width and is unaffected.

		   Adjust these two values to match the site's real container width
		   if 1200px/24px isn't right.
		   --------------------------------------------------------------------- */
		:root {
		  --idp-hero-wrap-max-width: 1200px;
		  --idp-hero-wrap-padding-inline: 24px;
		}

		.idp-hero {
		  position: relative;
		  overflow: hidden;
		  box-sizing: border-box;
		  padding-top: 0;
		  background:
			radial-gradient(650px 500px at 88% 8%, rgba(93,140,246,0.45), transparent 60%),
			radial-gradient(700px 620px at 15% 6%, rgba(108,99,232,0.40), transparent 62%),
			radial-gradient(720px 640px at 78% 96%, rgba(208,106,224,0.42), transparent 62%),
			radial-gradient(520px 480px at 10% 88%, rgba(93,140,246,0.22), transparent 60%),
			linear-gradient(150deg, #0d0c33 0%, #171a4a 40%, #1c1a52 42%, #2a2470 68%, #4a2c86 100%);
		}

		/* soft glow blob, bottom-left */
		.idp-hero::before {
		  content: '';
		  position: absolute;
		  inset: 0;
		  z-index: 0;
		  pointer-events: none;
		  background: radial-gradient(46% 60% at 6% 30%, rgba(70,60,150,0.55), transparent 70%);
		  opacity: .7;
		}

		/* faint grid-line overlay, fades top/bottom */
		.idp-hero::after {
		  content: '';
		  position: absolute;
		  inset: 0;
		  z-index: 1;
		  pointer-events: none;
		  background-image:
			repeating-linear-gradient(to right, rgba(255,255,255,0.05) 0 1px, transparent 1px 68px),
			repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, transparent 1px 68px);
		  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 45%, transparent 100%);
				  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 45%, transparent 100%);
		  opacity: .55;
		}

		/* Shared box model for the inner content wrap: same width (from the
		   global .wrap container), same height and same vertical padding on
		   every hero, regardless of page.

		   Deliberately NOT setting 'display' here: each page already defines
		   its own internal layout for this element (the global .hero-inner
		   rule uses display:grid for SSP, .yield-split and .mkt-split define
		   their own display:grid too). Overriding 'display' here would win on
		   specificity and break those page-specific column layouts (this is
		   what caused the SSP visual to drop below the text instead of
		   sitting beside it). */
		.idp-hero > .wrap {
		  position: relative;
		  z-index: 2;
		  box-sizing: border-box;
		  width: 100%;
		  max-width: var(--idp-hero-wrap-max-width);
		  margin-left: auto;
		  margin-right: auto;
		  padding-left: var(--idp-hero-wrap-padding-inline);
		  padding-right: var(--idp-hero-wrap-padding-inline);
		  min-height: 40vw;
		  max-height: 620px;
		  padding-top: 34px;
		  padding-bottom: 34px;
		}

		/* -----------------------------------------------------------------
		   Same vertical centering on all three heroes.

		   align-items:center (set by each page's own grid rule on
		   .idp-hero-split) only centers the two columns relative to EACH
		   OTHER inside their shared row; it does not center that row inside
		   the taller fixed-height box we already enforce above. Since each
		   hero's right-hand visual has a different natural height (SSP's
		   card cluster ~440px, Yield's diagram ~381px, Marketplace's
		   illustration varies), the row height differed per page, and so did
		   where the H1 started vertically. align-content centers the row
		   itself inside the box, so all three heroes start their title at
		   the same Y position regardless of their visual's height.

		   All three pages now also share the same grid-template-columns
		   (1fr 1.1fr) and gap (40px) on their own .idp-hero-split rule, so
		   the left/right columns are the same width everywhere. Yield's
		   diagram (previously sized with fixed @media breakpoints tuned
		   for its old, much wider 0.62fr 1.55fr column) was rewritten to
		   size itself fluidly from the column's actual rendered width
		   instead, so it stays correct at this ratio and won't need
		   retuning if the ratio changes again later.

		   align-content is stretch (not center): the single grid row now
		   fills the wrap's full height instead of sitting as a short row
		   centered inside a much taller box, so .idp-hero-left/.idp-hero-right
		   actually occupy the space they're given. Each page's own
		   .idp-hero-left/.idp-hero-right rule centers its own content
		   inside that full-height box via display:flex + justify-content
		   or align-items:center, so the final vertical position looks the
		   same as before - the difference is the box itself now really is
		   full height, not just visually centered inside one. */
		.idp-hero > .wrap.idp-hero-split {
		  align-content: stretch;
		}

		@media (max-width: 900px) {
		  .idp-hero > .wrap {
			min-height: 0;
			max-height: none;
		  }
		}