/*
 * NATIVE Beaver Builder Homepage styling (simplified — static versions of the
 * React animated sections). Values from the React section components. Hard-coded,
 * scoped to .fl-builder-content. Fraunces + Geist from Google Fonts.
 * Image URLs in this file are relative to /assets (this file lives in /assets).
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400;1,9..144,600&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Host+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* Astra body{color:#fff} fix */
.fl-builder-content, .fl-builder-content p, .fl-builder-content li,
.fl-builder-content .fl-rich-text, .fl-builder-content .fl-rich-text p,
.fl-builder-content .fl-heading-text { color:#0e0a0c; }

.fl-builder-content .dnb-h-sec { padding:48px 0; }
/* Tighten the gap between the AI Teammates section (3) and the Drift Zone (4) to
   match React (~80px). Both are .dnb-h-sec (48px top+bottom) and each already has
   ~40px intrinsic space (grid below / 300px "30%" font-leading above), so the shared
   paddings double it up. Zero the adjoining paddings; scoped via :has() so no other
   section is affected. */
.fl-builder-content .dnb-h-sec:has(.dnb-tm) { padding-bottom:0; }
.fl-builder-content .dnb-h-sec:has(.dnb-h-dz-stat) { padding-top:0; }
/* Drift Zone section background = Soft Blush */
.fl-builder-content .dnb-h-sec:has(.dnb-h-dz-stat) { background:#FEFCF5; }
/* Astra forces -webkit-text-fill-color on heading spans, overriding `color` → the
   italic accent rendered black. Force the fill (and clear any gradient clip) too. */
.fl-builder-content .dnb-it { font-style:italic; color:#FF1F5B !important; -webkit-text-fill-color:#FF1F5B !important; background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; }
.fl-builder-content .dnb-h-center, .fl-builder-content .dnb-h-center .fl-rich-text { text-align:center; }

/* ============ HERO ============ */
/* React: <section ... md:pt-[140px] pb-12 md:min-h-[100vh] flex flex-col md:justify-center>.
   Our header is STICKY/in-flow (~100px) whereas React's navbar is fixed/overlay, so we
   subtract the header height (header+hero = one viewport) and drop the 140px top padding
   (that only cleared React's fixed navbar) — otherwise the top gap double-counts. */
/* React <Hero> section: md:min-h-[100vh] flex flex-col md:justify-center pb-12 (content centered).
   WP header is in-flow so subtract ~100px and drop React's pt-[140px] (which reserved room for its
   FIXED navbar) down to 24px. pb-12 = 48px. */
/* React renders the hero bg as <Image object-cover object-top scale-125 origin-top>. Replicate on the
   element: background-size `auto 125%` = 125% height zoom (the image is 1920x799 = 2.4:1 wide, so an
   auto-width/125%-height size still fully covers the hero) anchored top center → crops the image's
   wavy bottom the same way React's scale-125 does, giving the crisp pink "cutdown" below the logos. */
.fl-builder-content .dnb-h-hero { background:url(images/background-home.png) center top / auto 125% no-repeat #FBFAF8 !important; min-height:auto; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:24px 24px 48px !important; text-align:center; }
.fl-builder-content .dnb-h-hero .fl-row-content-wrap { width:100%; }
/* React content wrapper: gap-8 (32px) between title / sub / buttons / logos.
   row-wrap so the two CTA Button modules can share one row (everything else full-width). */
.fl-builder-content .dnb-h-hero .fl-col-content { flex-flow:row wrap !important; justify-content:center; align-items:center; }
.fl-builder-content .dnb-h-hero .fl-col-content > .fl-module { margin:0; flex:0 0 100%; max-width:100%; }
/* React content group gap: gap-5 sm:gap-6 md:gap-8 = 20 / 24 / 32px between title, subtitle, buttons. */
.fl-builder-content .dnb-h-hero .fl-col-content > .fl-module + .fl-module { margin-top:20px; }
@media (min-width:640px){ .fl-builder-content .dnb-h-hero .fl-col-content > .fl-module + .fl-module { margin-top:24px; } }
@media (min-width:768px){ .fl-builder-content .dnb-h-hero .fl-col-content > .fl-module + .fl-module { margin-top:32px; } }
/* React h1: leading-[1.1] (WP had 1.0). */
.fl-builder-content .dnb-h-hero-title { font-family:"Fraunces",serif !important; font-weight:400 !important; font-size:clamp(40px,8vw,120px) !important; line-height:1.1 !important; letter-spacing:-.01em; color:#0e0a0c !important; }
.fl-builder-content .dnb-h-hero-title .lead, .fl-builder-content .dnb-h-hero-title span.lead { font-weight:700 !important; font-style:italic !important; color:#E30B5D !important; -webkit-text-fill-color:#E30B5D !important; background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; position:relative; }
/* ultra-high-specificity guarantee for the Lead word (BB strips inline styles + Astra forces -webkit-text-fill-color) */
html body .fl-builder-content .fl-node-0aqhp8s74gxr span.lead, html body .fl-builder-content h1.dnb-h-hero-title span.lead { color:#E30B5D !important; -webkit-text-fill-color:#E30B5D !important; }
.fl-builder-content .dnb-h-hero-title .lead::after { content:""; position:absolute; left:3%; right:-1%; bottom:-.04em; height:.16em; background:url(images/lead-underline.png) no-repeat center / 100% 100%; }
/* React subtitle leading: text-lg (28px) → sm:text-2xl (32px) → md:leading-[32px] (32px). WP was 1.15
   (~48px), which added visual space above/below the line; match React's tight 28/32px leading. */
.fl-builder-content .dnb-h-hero-sub, .fl-builder-content .dnb-h-hero-sub p { font-family:"Geist",sans-serif !important; font-size:clamp(22px,3.4vw,42px) !important; font-weight:400 !important; line-height:28px !important; color:rgba(0,0,0,.8) !important; text-align:center; margin:0; }
@media (min-width:640px){ .fl-builder-content .dnb-h-hero-sub, .fl-builder-content .dnb-h-hero-sub p { line-height:32px !important; } }
.fl-builder-content .dnb-h-hero-sub .rot { color:#E30B5D !important; font-weight:700 !important; display:inline-block; transition:opacity .2s; }
.fl-builder-content .dnb-h-hero-sub .rotcur { color:#E30B5D; margin-left:1px; animation:dnbblink 1s step-end infinite; }
@keyframes dnbblink { 50% { opacity:0; } }
/* Hero CTA — now EDITABLE BB Button modules (dnb-h-hbtn-pink / dnb-h-hbtn-ghost).
   They share one centered row (flex:0 0 auto within the row-wrap column). React sizes:
   md h-[66px], w-[261px]/[310px], text-2xl; rounded-full; shadow; hover:scale-105. */
.fl-builder-content .dnb-h-hero .dnb-h-hbtn { flex:0 0 auto !important; width:auto !important; }
.fl-builder-content .dnb-h-hero .dnb-h-hbtn + .dnb-h-hbtn { margin-left:28px; }
.fl-builder-content .dnb-h-hbtn .fl-button { display:inline-flex !important; align-items:center; justify-content:center; gap:8px; height:56px; padding:0 32px !important; border-radius:999px !important; font-family:"Geist",sans-serif !important; font-weight:600 !important; font-size:20px !important; line-height:1 !important; text-decoration:none !important; box-shadow:0 8px 24px -8px rgba(0,0,0,.14) !important; transition:transform .25s ease, box-shadow .25s ease !important; white-space:nowrap; }
.fl-builder-content .dnb-h-hbtn-pink .fl-button { background:#FF1F5B !important; border:0 !important; box-shadow:0 8px 24px -8px rgba(255,31,91,.55) !important; }
.fl-builder-content .dnb-h-hbtn-pink .fl-button, .fl-builder-content .dnb-h-hbtn-pink .fl-button-text, .fl-builder-content .dnb-h-hbtn-pink .fl-button span { color:#fff !important; -webkit-text-fill-color:#fff !important; }
.fl-builder-content .dnb-h-hbtn-pink .fl-button .fl-button-text::after { content:" \2192"; }
.fl-builder-content .dnb-h-hbtn-ghost .fl-button { background:#fff !important; border:1px solid rgba(0,0,0,.25) !important; }
.fl-builder-content .dnb-h-hbtn-ghost .fl-button, .fl-builder-content .dnb-h-hbtn-ghost .fl-button-text { color:#0e0a0c !important; -webkit-text-fill-color:#0e0a0c !important; font-weight:400 !important; }
.fl-builder-content .dnb-h-hbtn .fl-button:hover { transform:scale(1.05); }
.fl-builder-content .dnb-h-hbtn .fl-button:active { transform:scale(.95); }
@media (min-width:768px){
  .fl-builder-content .dnb-h-hbtn .fl-button { height:66px; font-size:24px !important; }
  .fl-builder-content .dnb-h-hbtn-pink .fl-button { width:261px; }
  .fl-builder-content .dnb-h-hbtn-ghost .fl-button { width:310px; }
}
@media (max-width:767px){
  .fl-builder-content .dnb-h-hero .dnb-h-hbtn { flex:0 0 100% !important; }
  .fl-builder-content .dnb-h-hero .dnb-h-hbtn + .dnb-h-hbtn { margin-left:0; }
  /* React gives every homepage section px-4 (16px) side padding on mobile; the BB port left
     several sections edge-to-edge. Add a 16px mobile gutter. Teammates/Newsroom already have a
     gutter; the hero has its own padding — both left alone. */
  .fl-builder-content .dnb-h-ceo,
  .fl-builder-content .dnb-h-secsec,
  .fl-builder-content .dnb-h-sec-p { padding-left:16px; padding-right:16px; box-sizing:border-box; }
  /* Drift Zone: inset the WHOLE content column at once (stat, heading, quadrant, CTA paragraph,
     fee note, button) — the CTA paragraph + note were still bleeding to the screen edges. */
  .fl-builder-content .dnb-h-sec:has(.dnb-h-dz-stat) .fl-col-content { padding-left:16px !important; padding-right:16px !important; box-sizing:border-box; }
}
/* React "Clients Scroll" strip: className mt-4 sm:mt-8 + inline style paddingTop:24 paddingBottom:42 gap:26.
   Replicate the FULL top spacing (mt + paddingTop) so the buttons→"Deployed…" gap = 40px mobile / 56px
   desktop like React (was only the 32px module margin). !important beats the generic .fl-module+.fl-module margin. */
.fl-builder-content .dnb-h-logos { margin-top:24px !important; padding:34px 24px 30px; background:#171310; border-radius:24px; max-width:1160px; margin-left:auto; margin-right:auto; }
@media (min-width:640px){ .fl-builder-content .dnb-h-logos { margin-top:32px !important; } }
.fl-builder-content .dnb-h-logos .lbl { text-align:center; font-family:"Geist",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:1.2px; font-size:clamp(13px,1.4vw,20px); color:rgba(255,255,255,.72); margin-bottom:26px; }
/* animated marquee (auto-scrolling client logos) */
.fl-builder-content .dnb-h-logos .marquee { overflow:hidden; max-width:1000px; margin:0 auto; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
/* gap via margin-right (NOT flex gap): each of the 22 imgs (2 copies of 11) carries a
   trailing gap, so the two copies are identical periods and translateX(-50%) lands
   exactly on the copy boundary — seamless loop with no half-gap jump. */
.fl-builder-content .dnb-h-logos .track { display:flex; align-items:center; gap:0; width:max-content; animation:dnbmarquee 30s linear infinite; will-change:transform; transform:translateZ(0); backface-visibility:hidden; }
/* keep the marquee running smoothly even while the animated hero webp decodes on the main thread */
.fl-builder-content .dnb-h-logos .marquee:hover .track,
.fl-builder-content .dnb-h-logos .track:hover { animation-play-state:running; }
.fl-builder-content .dnb-h-logos .track img { height:30px; width:auto; object-fit:contain; flex-shrink:0; margin-right:64px; }
@keyframes dnbmarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* shared pill buttons */
.fl-builder-content .dnb-btn-pink .fl-button { background:#FF1F5B !important; border:0 !important; color:#fff !important; border-radius:999px !important; font-family:"Geist",sans-serif !important; font-weight:600 !important; padding:16px 28px !important; box-shadow:0 8px 24px -8px rgba(255,31,91,.55) !important; }
.fl-builder-content .dnb-btn-ghost .fl-button { background:#fff !important; border:1px solid rgba(0,0,0,.25) !important; color:#0e0a0c !important; border-radius:999px !important; font-family:"Geist",sans-serif !important; font-weight:500 !important; padding:15px 26px !important; }

/* ============ section heading (shared) ============ */
.fl-builder-content .dnb-h-h2 { font-family:"Fraunces",serif; font-weight:600; font-size:clamp(24px,5vw,56px); line-height:1.08; color:#0e0a0c; }
/* lede: BB puts .dnb-h-lede on the SAME element as .fl-rich-text (not a child), so the
   old descendant selector never matched → lede fell back to a tiny default. Target the
   compound element + its <p>. React: text-sm→lg:text-2xl (24px), #4A3F42. */
.fl-builder-content .dnb-h-lede.fl-rich-text, .fl-builder-content .dnb-h-lede.fl-rich-text p { font-family:"Geist",sans-serif; font-size:clamp(14px,2.4vw,24px); line-height:1.5; color:#4A3F42; margin:0; }

/* ============ BALLOONS (interactive — click a balloon to reveal teammate card) ============ */
/* Exact replica of React <Balloons/>: 3 floating balloons, click reveals one card,
   others dim to .15, card fades in pulled up over the balloon strings. */
.fl-builder-content .dnb-h-bal .fl-html { display:block; }
.fl-builder-content .dnb-bln-wrap { position:relative; }
/* The reveal card needs a bit more room than the ~1060px BB fixed-width row, but NOT the
   full 1457px React blow-out (client: too wide). Widen the balloon row's content to a
   compact 1120px; keep the heading + lede centered so only the card uses the extra width. */
.fl-builder-content .fl-node-wn6hksepoxyb > .fl-row-content-wrap > .fl-row-content { max-width:1120px !important; }
/* React <Balloons> section top padding: pt-8 sm:pt-10 md:pt-16 (32/40/64px). Match exactly. */
.fl-builder-content .fl-node-wn6hksepoxyb { padding-top:48px !important; }
@media (min-width:640px){ .fl-builder-content .fl-node-wn6hksepoxyb { padding-top:48px !important; } }
@media (min-width:768px){ .fl-builder-content .fl-node-wn6hksepoxyb { padding-top:48px !important; } }
.fl-builder-content .fl-node-wn6hksepoxyb .fl-row-content-wrap { padding-top:0; padding-left:16px; padding-right:16px; box-sizing:border-box; }
@media (min-width:640px){ .fl-builder-content .fl-node-wn6hksepoxyb .fl-row-content-wrap { padding-left:24px; padding-right:24px; } }
.fl-builder-content .fl-node-wn6hksepoxyb .dnb-h-h2,
.fl-builder-content .fl-node-wn6hksepoxyb .dnb-h-lede { max-width:1152px; margin-left:auto; margin-right:auto; }
/* balloon row (React: z-10 flex items-start justify-center gap-4 sm:gap-8 md:gap-16) */
.fl-builder-content .dnb-bln-row { position:relative; z-index:10; display:flex; align-items:flex-start; justify-content:center; gap:clamp(16px,5vw,64px); margin-top:clamp(30px,4vw,48px); }
/* Mobile: remove the blue tap-highlight flash + accidental image/button "selection"
   box that appears when tapping the balloons, teammate cards, play/CTA buttons, etc. */
.fl-builder-content .dnb-bln,
.fl-builder-content .dnb-bln img,
.fl-builder-content .dnb-tm-card,
.fl-builder-content .dnb-tm-card img,
.fl-builder-content .dnb-tm-card .play,
.fl-builder-content .dnb-nr-card,
.fl-builder-content .dnb-nr-card img,
.fl-builder-content .dnb-bc-photo,
.fl-builder-content .dnb-bc-photo img,
.fl-builder-content .dnb-bc-cta,
.fl-builder-content .dnb-tm-close {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* Astra themes EVERY <button> (border-radius:4px + box-shadow + default appearance),
   which rendered each balloon inside a white rounded card. Hard-reset that chrome. */
.fl-builder-content .dnb-bln,
.fl-builder-content .dnb-bln:hover,
.fl-builder-content .dnb-bln:focus,
.fl-builder-content .dnb-bln:active { background:transparent !important; background-color:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; outline:0 !important; -webkit-appearance:none !important; appearance:none !important; padding:0 !important; }
.fl-builder-content .dnb-bln { cursor:pointer; margin:0; display:flex; flex-direction:column; align-items:center; transition:opacity .5s ease; touch-action:pan-y; -webkit-user-drag:none; user-drag:none; }
/* React img: w-[100px] sm:w-[140px] md:w-[190px] drop-shadow-lg group-hover:scale-110 */
.fl-builder-content .dnb-bln img { width:clamp(88px,14.5vw,185px); height:auto; display:block; filter:drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1)); transition:transform .3s ease; transform-origin:center 32%; touch-action:pan-y; -webkit-user-drag:none; user-drag:none; pointer-events:none; }
.fl-builder-content .dnb-bln:hover img { transform:scale(1.1); }
/* stagger offsets + float animation (React: money lowest, quality highest) */
.fl-builder-content .dnb-bln--money   { margin-top:clamp(10px,1.6vw,18px); animation:dnbfloat 3s ease-in-out infinite; }
.fl-builder-content .dnb-bln--time    { margin-top:clamp(9px,1.4vw,16px);  animation:dnbfloat 3s ease-in-out .5s infinite; }
.fl-builder-content .dnb-bln--quality { margin-top:0;                       animation:dnbfloat 3s ease-in-out 1s infinite; }
@keyframes dnbfloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-20px); } }
/* dim the non-selected balloons when one is active (React: opacity .15) */
.fl-builder-content .dnb-bln-wrap.is-active .dnb-bln:not(.is-sel) { opacity:.15; }

/* result card (React: -mt 70/100/135, rounded-25, shadow 8/8/15, outline .5px) */
.fl-builder-content .dnb-bln-card { display:none; position:relative; z-index:20; margin:-70px auto 0; max-width:1457px; background:#fff; border-radius:25px; padding:24px; box-shadow:8px 8px 15px rgba(0,0,0,.15); outline:.5px solid rgba(27,20,21,.5); text-align:left; }
.fl-builder-content .dnb-bln-card.show { display:block; animation:dnbfade .25s ease-out; }
@keyframes dnbfade { from{ opacity:0; transform:translateY(-2px); } to{ opacity:1; transform:translateY(0); } }
@media (min-width:640px){ .fl-builder-content .dnb-bln-card { margin-top:-100px; padding:40px; } }
@media (min-width:768px){ .fl-builder-content .dnb-bln-card { margin-top:-135px; } }
.fl-builder-content .dnb-bc-inner { display:flex; flex-direction:column; align-items:center; gap:32px; }
@media (min-width:768px){ .fl-builder-content .dnb-bc-inner { flex-direction:row; gap:45px; } }
/* circular teammate photo + pink ring (React: 180/230/271, ring #E0366D 8/10px) */
.fl-builder-content .dnb-bc-photo { position:relative; flex-shrink:0; }
.fl-builder-content .dnb-bc-photo-img { position:relative; width:clamp(180px,20vw,271px); height:clamp(180px,20vw,271px); border-radius:50%; overflow:hidden; background:#D9D9D9; }
.fl-builder-content .dnb-bc-photo-img img { width:100%; height:100%; object-fit:cover; }
.fl-builder-content .dnb-bc-ring { position:absolute; inset:0; border-radius:50%; border:8px solid #E0366D; pointer-events:none; }
@media (min-width:1024px){ .fl-builder-content .dnb-bc-ring { border-width:10px; } }
/* text column */
.fl-builder-content .dnb-bc-text { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
@media (min-width:768px){ .fl-builder-content .dnb-bc-text { align-items:flex-start; text-align:left; gap:15px; } }
.fl-builder-content .dnb-bc-text h3 { font-family:"Fraunces",serif; font-weight:600; font-size:clamp(28px,4vw,52px); line-height:1.05; margin:0; }
/* Astra forces -webkit-text-fill-color on heading spans (overriding `color`), so the
   accent word rendered dark — lock both color + text-fill !important (same fix as .dnb-it). */
.fl-builder-content .dnb-bc-text h3 .pfx { color:#000 !important; -webkit-text-fill-color:#000 !important; }
.fl-builder-content .dnb-bc-text h3 .acc { color:#FF1F5B !important; -webkit-text-fill-color:#FF1F5B !important; }
.fl-builder-content .dnb-bc-text h3 .acc.it { font-style:italic; }
.fl-builder-content .dnb-bc-text p { font-family:"Geist",sans-serif; font-size:clamp(16px,2.2vw,28px); line-height:1.25; color:rgba(0,0,0,.5); margin:0; }
.fl-builder-content .dnb-bc-text p .nowrap { white-space:nowrap; }
/* CTA pill (React: gradient #E0366D->#7A1D3B, rounded 25.5, shadow 8/8/8, hover scale 1.05) */
.fl-builder-content .dnb-bc-cta-wrap { position:relative; margin-top:8px; }
.fl-builder-content .dnb-bc-cta { display:inline-flex; align-items:center; gap:6px; border-radius:25.5px; background:linear-gradient(90deg,#E0366D,#7A1D3B); padding:12px 20px; text-decoration:none; box-shadow:8px 8px 8px rgba(27,20,21,.25); transition:transform .2s ease; border:0; cursor:pointer; }
.fl-builder-content .dnb-bc-cta:hover { transform:scale(1.05); }
.fl-builder-content .dnb-bc-cta .t { font-family:"Geist",sans-serif; font-size:16px; font-weight:600; color:#fff; }
.fl-builder-content .dnb-bc-cta .arr { font-size:18px; font-weight:700; color:#fff; line-height:1; }
/* coming-soon tooltip (Quality) */
.fl-builder-content .dnb-bc-tip { display:none; position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:8px; background:#0B1F3D; color:#fff; padding:8px 16px; border-radius:8px; font-family:"Geist",sans-serif; font-size:14px; font-weight:500; white-space:nowrap; z-index:50; box-shadow:0 6px 16px rgba(0,0,0,.25); }
.fl-builder-content .dnb-bc-tip.show { display:block; }
.fl-builder-content .dnb-bc-tip::after { content:""; position:absolute; left:50%; bottom:-4px; width:8px; height:8px; transform:translateX(-50%) rotate(45deg); background:#0B1F3D; }
/* stat column (React: stat #E30B5D Geist 700 60/72/120, label uppercase #8A7F82) */
.fl-builder-content .dnb-bc-stat { flex-shrink:0; display:flex; flex-direction:column; align-items:center; }
@media (min-width:768px){ .fl-builder-content .dnb-bc-stat { width:260px; } }
@media (min-width:1024px){ .fl-builder-content .dnb-bc-stat { width:300px; } }
.fl-builder-content .dnb-bc-stat .num { font-family:"Geist",sans-serif; font-weight:700; font-size:clamp(60px,9vw,120px); line-height:1; color:#E30B5D; }
.fl-builder-content .dnb-bc-stat .lbl { font-family:"Geist",sans-serif; font-weight:400; font-size:clamp(18px,2.2vw,28px); line-height:1.25; text-transform:uppercase; color:#8A7F82; text-align:center; }

/* ---- COMPACT PROFESSIONAL RESIZE (client feedback) ----
   The React-faithful sizing read as oversized (card + text too big) and left a large
   empty gap between the paragraph and the stat — because the text column was flex:1 and
   stretched, shoving the stat to the far right (worst on the short Daniel copy). Fix:
   (1) dial fonts / photo / padding down to the site's normal scale; (2) stop the text
   stretching — size it to its content and CENTER photo+text+stat as one tight group so
   the stat sits right beside the copy; (3) drop the hard <br>s on mobile so copy reflows. */
.fl-builder-content .dnb-bln-card { max-width:1080px; padding:24px; }
@media (min-width:640px){ .fl-builder-content .dnb-bln-card { padding:32px; } }
.fl-builder-content .dnb-bc-inner { gap:28px; }
@media (min-width:768px){ .fl-builder-content .dnb-bc-inner { gap:40px; justify-content:center; } }
/* text sizes to its content (was flex:1 → stretched); capped so long copy still wraps to
   the intended desktop lines (Daniel 2 / Sasha 4 / Nadia 3) */
@media (min-width:768px){ .fl-builder-content .dnb-bc-text { flex:0 1 auto; max-width:560px; } }
/* smaller circular photo (was 180→271) */
.fl-builder-content .dnb-bc-photo-img { width:150px; height:150px; }
@media (min-width:768px){ .fl-builder-content .dnb-bc-photo-img { width:165px; height:165px; } }
@media (min-width:1024px){ .fl-builder-content .dnb-bc-photo-img { width:180px; height:180px; } }
/* heading (Fraunces) was clamp(28,4vw,52) → 26/32/36 */
.fl-builder-content .dnb-bc-text h3 { font-size:26px; line-height:1.12; }
@media (min-width:768px){ .fl-builder-content .dnb-bc-text h3 { font-size:32px; } }
@media (min-width:1024px){ .fl-builder-content .dnb-bc-text h3 { font-size:36px; } }
/* paragraph (Geist) was clamp(16,2.2vw,28) → 16/18/20, roomier line-height */
.fl-builder-content .dnb-bc-text p { font-size:16px; line-height:1.4; }
@media (min-width:768px){ .fl-builder-content .dnb-bc-text p { font-size:18px; } }
@media (min-width:1024px){ .fl-builder-content .dnb-bc-text p { font-size:20px; } }
/* stat number was clamp(60,9vw,120) → 44/50/56; column tightened so it hugs the copy */
.fl-builder-content .dnb-bc-stat .num { font-size:44px; }
@media (min-width:768px){ .fl-builder-content .dnb-bc-stat .num { font-size:50px; } }
@media (min-width:1024px){ .fl-builder-content .dnb-bc-stat .num { font-size:56px; } }
.fl-builder-content .dnb-bc-stat .lbl { font-size:12px; line-height:1.3; }
@media (min-width:1024px){ .fl-builder-content .dnb-bc-stat .lbl { font-size:13px; } }
@media (min-width:768px){ .fl-builder-content .dnb-bc-stat { width:150px; } }
@media (min-width:1024px){ .fl-builder-content .dnb-bc-stat { width:160px; } }
/* MOBILE: neutralize the in-paragraph hard breaks so copy flows naturally (no lone-word
   lines like the orphaned "to"); requires class dnb-bc-br on every <br> in .dnb-bc-text p */
@media (max-width:767px){ .fl-builder-content .dnb-bc-text p .dnb-bc-br { display:none; } }

/* ---- Balloon section spacing (client: too much empty white space below the balloons
   when nothing is selected). Each .dnb-h-sec has 48px top+bottom padding, so the balloon
   row's bottom (48) + the next section's top (48) left a large empty gap under the strings.
   Collapse it while idle; the reveal card drops into this zone on click, so restore the
   bottom padding then (spacing grows) via :has(.dnb-bln-wrap.is-active). ---- */
.fl-builder-content .fl-node-wn6hksepoxyb { padding-bottom:0 !important; transition:padding-bottom .35s ease; }
.fl-builder-content .fl-node-vzbd9t6s012k { padding-top:24px !important; }
.fl-builder-content .fl-node-wn6hksepoxyb:has(.dnb-bln-wrap.is-active) { padding-bottom:44px !important; }

/* ============ AI TEAMMATES (interactive expanding grid + game modal) ============ */
/* faithful heading size (React md:text-[68px]/leading-[68px]) + brand-pink accent (#e0366d) */
.fl-builder-content .dnb-tm-head { font-size:clamp(28px,6vw,68px) !important; line-height:1.04 !important; }
.fl-builder-content .dnb-h-tm .fl-html { display:block; }

.fl-builder-content .dnb-tm { max-width:1200px; margin:0 auto; }
.fl-builder-content .dnb-tm-grid { display:grid; grid-template-columns:2.92fr 1fr 1fr; gap:37px; transition:grid-template-columns .6s cubic-bezier(.4,0,.2,1); }
@media (max-width:1023px){ .fl-builder-content .dnb-tm-grid { gap:20px; } }
@media (max-width:639px){ .fl-builder-content .dnb-tm-grid { grid-template-columns:1fr !important; gap:16px; } }

.fl-builder-content .dnb-tm-card { position:relative; overflow:hidden; border-radius:15px; background:#D9D9D9; height:598px; cursor:pointer; min-width:0; }
@media (max-width:1023px){ .fl-builder-content .dnb-tm-card { height:500px; } }
.fl-builder-content .dnb-tm-card.is-active { cursor:default; }
.fl-builder-content .dnb-tm-card .gif { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.fl-builder-content .dnb-tm-card .ov { position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.6) 100%); transition:background .5s ease; }
.fl-builder-content .dnb-tm-card.is-active .ov { background:linear-gradient(0deg, rgba(0,0,0,.5) 15%, rgba(102,102,102,0) 43%); }

/* inactive centered name badge */
.fl-builder-content .dnb-tm-card .badge-c { position:absolute; bottom:43px; left:50%; transform:translateX(-50%); z-index:10; opacity:1; visibility:visible; transition:opacity .2s ease-out, visibility .2s ease-out; pointer-events:none; }
.fl-builder-content .dnb-tm-card.is-active .badge-c { opacity:0; visibility:hidden; }
.fl-builder-content .dnb-tm-card .badge { display:inline-flex; align-items:center; justify-content:center; overflow:hidden; background:#FF1F5B; color:#fff; border-radius:9999px; padding:5px 25px; box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1); font-family:"Fraunces",serif; font-style:italic; font-weight:400; font-size:32px; line-height:32px; white-space:nowrap; }

/* active info popup */
.fl-builder-content .dnb-tm-card .info { position:absolute; left:43px; right:43px; bottom:43px; z-index:11; background:#fff; border-radius:20px; padding:32px 24px 20px 24px; box-shadow:0 10px 30px rgba(224,54,109,.3); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .1s ease-out, visibility .1s ease-out; }
.fl-builder-content .dnb-tm-card.is-active .info { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .2s ease-out .4s, visibility .2s ease-out .4s; }
@media (max-width:639px){ .fl-builder-content .dnb-tm-card .info { left:12px; right:12px; bottom:12px; padding:36px 16px 16px 16px; } }

.fl-builder-content .dnb-tm-card .abadge { position:absolute; left:24px; top:0; transform:translateY(-50%); z-index:20; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; background:#FF1F5B; color:#fff; border-radius:9999px; padding:10px 18px; box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1); font-family:"Fraunces",serif; font-style:italic; font-weight:400; font-size:44px; line-height:1.1; white-space:nowrap; pointer-events:none; }
@media (max-width:639px){ .fl-builder-content .dnb-tm-card .abadge { left:20px; font-size:28px; } }

.fl-builder-content .dnb-tm-card .info-row { display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
@media (min-width:640px){ .fl-builder-content .dnb-tm-card .info-row { flex-direction:row; align-items:center; gap:32px; } }
.fl-builder-content .dnb-tm-card .info-txt { display:flex; flex-direction:column; gap:4px; text-align:left; }
@media (min-width:640px){ .fl-builder-content .dnb-tm-card .info-txt { gap:6px; } }
.fl-builder-content .dnb-tm-card .info-txt .ttl { color:rgba(0,0,0,.8); font-family:"Host Grotesk",sans-serif; font-weight:600; font-size:18px; line-height:24px; margin:0; }
.fl-builder-content .dnb-tm-card .info-txt .desc { color:rgba(27,20,22,.5); font-family:"Host Grotesk",sans-serif; font-weight:400; font-size:14px; line-height:20px; max-width:380px; margin:0; }
.fl-builder-content .dnb-tm-card .play { display:inline-flex; flex-shrink:0; align-items:center; gap:8px; border:0; cursor:pointer; background:#FFE8EE; outline:1px solid #FF1F5B; outline-offset:-1px; border-radius:9999px; padding:12px 20px; transition:filter .15s ease, transform .1s ease; }
.fl-builder-content .dnb-tm-card .play:hover { filter:brightness(.95); }
.fl-builder-content .dnb-tm-card .play:active { transform:scale(.95); }
.fl-builder-content .dnb-tm-card .play .t { color:#FF1F5B; font-family:"Host Grotesk",sans-serif; font-weight:600; font-size:15px; line-height:20px; }
.fl-builder-content .dnb-tm-card .play .arr { color:#FF1F5B; font-family:"Geist",sans-serif; font-weight:700; font-size:15px; line-height:20px; }
/* ---- per-teammate theming (client colours) ----
   Name badges use the signature brand colour (Daniel burgundy, Sasha orange, Nicole blue);
   the "Play with X" button uses the lighter signature tint with white text. */
.fl-builder-content .dnb-tm-card[data-tm="daniel"] .badge,
.fl-builder-content .dnb-tm-card[data-tm="daniel"] .abadge { background:#a74364; }
.fl-builder-content .dnb-tm-card[data-tm="sasha"] .badge,
.fl-builder-content .dnb-tm-card[data-tm="sasha"] .abadge { background:#ee8515; }
.fl-builder-content .dnb-tm-card[data-tm="nicole"] .badge,
.fl-builder-content .dnb-tm-card[data-tm="nicole"] .abadge { background:#3c82f5; }
.fl-builder-content .dnb-tm-card[data-tm="daniel"] .play { background:#a74364; outline-color:#a74364; box-shadow:0 8px 20px -8px rgba(167,67,100,.6); }
.fl-builder-content .dnb-tm-card[data-tm="sasha"] .play { background:#ee8515; outline-color:#ee8515; box-shadow:0 8px 20px -8px rgba(238,133,21,.6); }
.fl-builder-content .dnb-tm-card[data-tm="nicole"] .play { background:#3c82f5; outline-color:#3c82f5; box-shadow:0 8px 20px -8px rgba(60,130,245,.6); }
.fl-builder-content .dnb-tm-card .play .t,
.fl-builder-content .dnb-tm-card .play .arr { color:#fff; }

/* Mobile (<640px): every teammate card sits in the REVEALED state by default — no tap
   needed (user 2026-07-16). Mirrors the .is-active look exactly (lighter overlay, name
   badge hidden, info panel shown) and kills the reveal transitions so it renders static.
   Desktop is untouched. The .dnb-tm-grid prefix keeps specificity ahead of the base rules. */
@media (max-width:639px){
  .fl-builder-content .dnb-tm-grid .dnb-tm-card .ov { background:linear-gradient(0deg, rgba(0,0,0,.5) 15%, rgba(102,102,102,0) 43%); transition:none; }
  .fl-builder-content .dnb-tm-grid .dnb-tm-card .badge-c { opacity:0; visibility:hidden; transition:none; }
  .fl-builder-content .dnb-tm-grid .dnb-tm-card .info { opacity:1; visibility:visible; pointer-events:auto; transition:none; }
}

/* ---- game modal (lives at <body> level; exact React panel size: max-width 1200px, height min(85dvh,800px)) ---- */
.dnb-tm-modal, .dnb-tm-modal * { box-sizing:border-box; }
.dnb-tm-modal { position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:16px; opacity:0; pointer-events:none; transition:opacity .2s ease; }
@media (min-width:640px){ .dnb-tm-modal { padding:32px; } }
.dnb-tm-modal[data-open="1"] { opacity:1; pointer-events:auto; background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.dnb-tm-panel { position:relative; width:100%; max-width:1200px; height:min(85dvh,800px); }
/* width/height + padding forced with !important: Astra's global `button` rule sets
   padding:15px 30px and width:auto, which stretched the button to 60px and collapsed
   the (attribute-less, viewBox-only) close ✕ SVG to width:0 → invisible. */
.dnb-tm-close { position:absolute; top:-8px; right:-8px; z-index:60; display:flex; align-items:center; justify-content:center; width:40px !important; height:40px !important; min-width:0 !important; padding:0 !important; border:0; cursor:pointer; border-radius:9999px; background:#fff; color:#000; box-shadow:0 10px 15px -3px rgba(0,0,0,.2),0 4px 6px -4px rgba(0,0,0,.1); transition:transform .2s ease, background .2s ease, color .2s ease; }
@media (min-width:640px){ .dnb-tm-close { top:-16px; right:-16px; } }
.dnb-tm-close:hover { transform:scale(1.1); background:#ff1f5b; color:#fff; }
.dnb-tm-close svg { width:20px !important; height:20px !important; flex:0 0 auto; display:block; }
.dnb-tm-frame { position:relative; width:100%; height:100%; overflow:hidden; }
/* Multiple preloaded game iframes are stacked; only the playing one fades in
   (React <AITeammates/> preloads every game while the section nears view). */
.dnb-tm-iframe { position:absolute; inset:0; width:100%; height:100%; border:0; opacity:0; pointer-events:none; transition:opacity .7s ease; }
.dnb-tm-iframe.is-playing { opacity:1; pointer-events:auto; }

/* coming-soon panel (Sasha) */
.dnb-tm-soon { position:absolute; inset:0; z-index:20; display:none; flex-direction:column; align-items:center; justify-content:center; background:#fff; padding:24px; text-align:center; overflow:hidden; }
.dnb-tm-modal[data-mode="soon"] .dnb-tm-soon { display:flex; }
.dnb-tm-modal[data-mode="soon"] .dnb-tm-iframe { display:none; }
.dnb-tm-soon .glow { position:absolute; width:320px; height:320px; border-radius:9999px; filter:blur(80px); pointer-events:none; }
.dnb-tm-soon .glow.g1 { left:-80px; top:-80px; background:radial-gradient(circle, rgba(255,31,91,.15) 0%, rgba(255,31,91,0) 70%); }
.dnb-tm-soon .glow.g2 { right:-80px; bottom:-80px; background:radial-gradient(circle, rgba(255,31,91,.12) 0%, rgba(255,31,91,0) 70%); }
.dnb-tm-soon .ico { position:relative; display:flex; align-items:center; justify-content:center; width:96px; height:96px; margin-bottom:24px; border-radius:24px; background:#FFE8EE; box-shadow:0 8px 30px rgba(255,31,91,.15); }
.dnb-tm-soon .ico .rk { font-size:36px; animation:dnbtmbounce 2.5s infinite; }
.dnb-tm-soon .ico .ring { position:absolute; inset:0; border-radius:24px; border:2px dashed rgba(255,31,91,.2); animation:dnbtmspin 20s linear infinite; }
.dnb-tm-soon h3 { font-family:"Fraunces",serif; font-weight:700; font-size:clamp(36px,7vw,72px); line-height:1.05; letter-spacing:-.02em; color:#000; margin:0; }
.dnb-tm-soon h3 .a { color:#FF1F5B; font-style:italic; font-weight:600; }
.dnb-tm-soon p { margin:24px 0 0; font-family:"Host Grotesk",sans-serif; font-size:clamp(14px,2.4vw,18px); line-height:1.6; color:rgba(0,0,0,.5); max-width:28rem; }
.dnb-tm-soon .pill { display:inline-flex; align-items:center; gap:8px; margin-top:32px; border:1px solid rgba(0,0,0,.05); background:rgba(0,0,0,.02); border-radius:9999px; padding:8px 16px; font-family:"Host Grotesk",sans-serif; font-weight:500; font-size:12px; color:rgba(0,0,0,.45); }
.dnb-tm-soon .pill .dot { position:relative; width:8px; height:8px; }
.dnb-tm-soon .pill .dot::before { content:""; position:absolute; inset:0; border-radius:9999px; background:#FF1F5B; opacity:.75; animation:dnbtmping 1s cubic-bezier(0,0,.2,1) infinite; }
.dnb-tm-soon .pill .dot::after { content:""; position:absolute; inset:0; border-radius:9999px; background:#FF1F5B; }
@keyframes dnbtmbounce { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes dnbtmspin { to{ transform:rotate(360deg); } }
@keyframes dnbtmping { 75%,100%{ transform:scale(2); opacity:0; } }

/* ============ DRIFT ZONE (exact replica of React <DriftZone/>) ============ */
/* — Stat (30%) — React: 80/120/200/300 semibold, % 40/60/80/120 medium, brand-red */
.fl-builder-content .dnb-h-dz-stat .fl-rich-text { text-align:center; font-family:"Geist",sans-serif; }
.fl-builder-content .dnb-h-dz-stat .num { font-weight:600; font-size:80px; color:#FF1F5B; line-height:1; }
.fl-builder-content .dnb-h-dz-stat .num small { font-weight:500; font-size:40px; }
.fl-builder-content .dnb-h-dz-stat .src { display:block; margin-top:8px; text-transform:uppercase; letter-spacing:2px; font-weight:400; font-size:10px; color:#0b1f3d; }
@media (min-width:640px){ .fl-builder-content .dnb-h-dz-stat .num{ font-size:120px } .fl-builder-content .dnb-h-dz-stat .num small{ font-size:60px } .fl-builder-content .dnb-h-dz-stat .src{ font-size:12px } }
@media (min-width:768px){ .fl-builder-content .dnb-h-dz-stat .num{ font-size:200px } .fl-builder-content .dnb-h-dz-stat .num small{ font-size:80px } }
@media (min-width:1024px){ .fl-builder-content .dnb-h-dz-stat .num{ font-size:300px } .fl-builder-content .dnb-h-dz-stat .num small{ font-size:120px } }

/* — Headline — React: Fraunces semibold, leading-snug, brand-dark; accents bold italic brand-red; 20/30/48 */
.fl-builder-content .dnb-dz-head { font-weight:600 !important; line-height:1.375 !important; color:#0e0a0c !important; font-size:20px !important; }
@media (min-width:640px){ .fl-builder-content .dnb-dz-head{ font-size:30px !important } }
@media (min-width:768px){ .fl-builder-content .dnb-dz-head{ font-size:48px !important } }
.fl-builder-content .dnb-dz-head .dnb-it { font-weight:700; font-style:italic; color:#FF1F5B !important; }

/* — 2×2 quadrant chart with Y/X gradient axes — all clamp() = React fluid scaling — */
.fl-builder-content .dnb-h-dzgrid .fl-html { display:block; }
.fl-builder-content .dnb-dzchart { width:100%; max-width:1100px; margin:0 auto; }
.fl-builder-content .dnb-dzchart-grid { display:grid; grid-template-columns:auto minmax(0,900px); justify-content:center; width:100%; }
/* Y-axis sidebar */
.fl-builder-content .dz-yside { display:flex; flex-shrink:0; align-items:center; justify-content:flex-end; margin-right:clamp(12px,2.5vw,30px); }
.fl-builder-content .dz-ytext { font-family:"Geist",sans-serif; font-weight:400; color:#8A7F82; font-size:clamp(10px,1.2vw,18px); writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; margin-right:clamp(6px,1.5vw,16px); }
.fl-builder-content .dz-ybar { align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:space-between; width:clamp(18px,2vw,26px); padding-top:clamp(6px,1vw,16px); padding-bottom:clamp(6px,1vw,16px); }
.fl-builder-content .dz-ybar .cap { font-family:"Geist",sans-serif; font-weight:800; color:#2D0E1F; font-size:clamp(8px,0.9vw,11px); }
.fl-builder-content .dz-ybar .cap.hi { margin-bottom:clamp(4px,0.6vw,8px); }
.fl-builder-content .dz-ybar .cap.lo { margin-top:clamp(4px,0.6vw,8px); }
.fl-builder-content .dz-ybar .grad { width:100%; flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(180deg,#981D57 0%,#FFE8F1 100%); border-radius:30.5px; }
.fl-builder-content .dz-ybar .grad span { font-family:"Geist",sans-serif; font-weight:700; text-transform:uppercase; color:#000; line-height:1; font-size:clamp(10px,1.4vw,18px); writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; }
/* 2×2 grid of zone cards */
.fl-builder-content .dz-cards { display:grid; grid-template-columns:1fr 1fr; gap:clamp(6px,1.5vw,24px); }
.fl-builder-content .dnb-zone { position:relative; overflow:hidden; box-sizing:border-box; border:3px solid transparent; border-radius:clamp(10px,1.5vw,20px); height:clamp(160px,24vw,275px); opacity:1; transition:opacity .2s linear, border .2s linear; }
.fl-builder-content .dnb-zone.drift { background:linear-gradient(135deg,#F3C7D8 0%,#D97AA3 100%); color:#2D0E1F; }
.fl-builder-content .dnb-zone.exec  { background:linear-gradient(135deg,#FF5E9C 0%,#C8276A 55%,#7A164A 100%); color:#fff; }
.fl-builder-content .dnb-zone.stuck { background:linear-gradient(135deg,#1A0A14 0%,#2D0E1F 60%,#3A0D22 100%); color:#fff; }
.fl-builder-content .dnb-zone.aware { background:linear-gradient(135deg,#FFF5FA 0%,#FDD6E3 100%); color:#2D0E1F; }
.fl-builder-content .dnb-zone img { position:absolute; width:clamp(60px,14vw,250px); height:auto; object-fit:contain; opacity:.4; bottom:22px; right:4px; }
@media (min-width:640px){
  .fl-builder-content .dnb-zone img { opacity:1; bottom:auto; right:5px; }
  .fl-builder-content .dnb-zone.drift img, .fl-builder-content .dnb-zone.exec img { top:-15px; }
  .fl-builder-content .dnb-zone.stuck img { top:-5px; }
  .fl-builder-content .dnb-zone.aware img { top:25px; }
}
.fl-builder-content .dnb-zone .ztext { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(6px,1.5vw,18px); }
.fl-builder-content .dnb-zone .ztop { text-align:left; max-width:75%; }
.fl-builder-content .dnb-zone h4 { font-family:"Fraunces",serif; font-weight:700; font-size:clamp(11px,2.2vw,32px); line-height:1.2; margin:0; color:inherit; }
.fl-builder-content .dnb-zone .sub { font-family:"Geist",sans-serif; font-weight:600; font-size:clamp(8px,1.3vw,23px); margin:0; }
.fl-builder-content .dnb-zone .extra { font-family:"Geist",sans-serif; font-weight:500; font-size:clamp(7px,1.1vw,22px); margin:0; }
.fl-builder-content .dnb-zone ul.roi { list-style:none; margin:clamp(4px,1vw,24px) 0 0; padding:0; }
.fl-builder-content .dnb-zone ul.roi li { font-family:"Geist",sans-serif; font-weight:400; font-size:clamp(7px,1.1vw,19px); line-height:1.3; }
.fl-builder-content .dnb-zone .pos { text-align:right; font-family:"Geist",sans-serif; font-weight:500; font-size:clamp(7px,1.2vw,24px); margin:0; }
/* auto-loop spotlight: Drift highlighted, others dimmed (React driftSelected) */
.fl-builder-content .dnb-dzchart.dz-on .dnb-zone.drift { border:3px solid #FF69B4; }
.fl-builder-content .dnb-dzchart.dz-on .dnb-zone:not(.drift) { opacity:.15; }
/* X-axis bar (under the cards, col 2 / row 2) */
.fl-builder-content .dz-xaxis { grid-column:2; margin-top:clamp(12px,2vw,31px); }
.fl-builder-content .dz-xrow { position:relative; display:flex; align-items:center; }
.fl-builder-content .dz-xrow .cap { position:absolute; top:6px; font-family:"Geist",sans-serif; font-weight:800; color:#2D0E1F; font-size:clamp(8px,0.9vw,11px); }
.fl-builder-content .dz-xrow .cap.lo { left:0; }
.fl-builder-content .dz-xrow .cap.hi { right:0; }
.fl-builder-content .dz-xrow .grad { flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; height:clamp(18px,2vw,26px); background:linear-gradient(90deg,#FFE8F1 0%,#981D57 100%); border-radius:30.5px; margin-left:clamp(24px,3vw,36px); margin-right:clamp(24px,3vw,36px); }
.fl-builder-content .dz-xrow .grad span { font-family:"Geist",sans-serif; font-weight:700; text-transform:uppercase; color:#000; line-height:1; font-size:clamp(10px,1.4vw,18px); }
.fl-builder-content .dz-xsub { text-align:center; margin-top:clamp(6px,0.8vw,10px); }
.fl-builder-content .dz-xsub span { font-family:"Geist",sans-serif; font-weight:400; color:#8A7F82; font-size:clamp(9px,1.2vw,18px); }

/* — Body copy / price note — */
/* body/note: BB puts .dnb-h-dz-* on the SAME element as .fl-rich-text → compound selector */
/* Drift body copy — client wants 2 lines (one sentence each), not 3. Widen the container
   and shrink the font so the long 2nd sentence fits one line (with a single <br> between
   the two sentences in the module markup). */
.fl-builder-content .dnb-h-dz-body.fl-rich-text, .fl-builder-content .dnb-h-dz-body.fl-rich-text p { text-align:center; font-family:"Geist",sans-serif; font-size:clamp(15px,1.4vw,17px); line-height:1.6; color:#4A3F42; max-width:1240px; margin:0 auto; }
.fl-builder-content .dnb-h-dz-note.fl-rich-text, .fl-builder-content .dnb-h-dz-note.fl-rich-text p { text-align:center; font-family:"Geist Mono",ui-monospace,SFMono-Regular,monospace !important; letter-spacing:.02em; font-size:clamp(14px,1.4vw,20px); color:#8A7F82; margin:0; }

/* React: paragraph, then a centered ROW of [Book an IFA Workshop] + [Half-day fee]
   (md:flex-row justify-center gap-6). The column is a flex-column (margin-based
   spacing), so switch it to row-wrap: every module stays full-width (its own row)
   EXCEPT the button + note, which are the last two and land together on one row. */
.fl-builder-content .dnb-h-sec:has(.dnb-h-dz-stat) .fl-col-content { flex-flow:row wrap !important; justify-content:center; align-items:center; text-align:center; }
.fl-builder-content .dnb-h-sec:has(.dnb-h-dz-stat) .fl-col-content > .fl-module { flex:0 0 100%; max-width:100%; }
.fl-builder-content .dnb-h-sec:has(.dnb-h-dz-stat) .dnb-dz-btn { flex:0 0 auto !important; width:auto !important; }
.fl-builder-content .dnb-h-sec:has(.dnb-h-dz-stat) .dnb-h-dz-note { flex:0 0 auto !important; width:auto !important; margin-left:24px !important; }
@media (max-width:767px){
  .fl-builder-content .dnb-h-sec:has(.dnb-h-dz-stat) .dnb-dz-btn,
  .fl-builder-content .dnb-h-sec:has(.dnb-h-dz-stat) .dnb-h-dz-note { flex:0 0 100% !important; margin-left:0 !important; }
  .fl-builder-content .dnb-h-sec:has(.dnb-h-dz-stat) .dnb-h-dz-note { margin-top:16px !important; }
}
/* button label span is #333 by default (Astra) — force white to match React */
.fl-builder-content .dnb-dz-btn .fl-button, .fl-builder-content .dnb-dz-btn .fl-button-text, .fl-builder-content .dnb-dz-btn .fl-button span { color:#fff !important; }

/* AI Newsroom section had 48px top padding + a 20px heading module margin (68px of
   dead space above "AI Newsroom"). Tighten it. Scoped via :has(.dnb-h-nr). */
.fl-builder-content .dnb-h-sec:has(.dnb-h-nr) { padding-top:24px; }
.fl-builder-content .dnb-h-sec:has(.dnb-h-nr) .fl-col-content > .fl-module:first-child { margin-top:0 !important; }
/* — CTA: button + note side-by-side on desktop (React md:flex-row), stacked on mobile — */
.fl-builder-content .dnb-dz-btn .fl-button { background:#FF1F5B !important; border:0 !important; color:#fff !important; border-radius:999px !important; font-family:"Geist",sans-serif !important; font-weight:500 !important; padding:14px 32px !important; font-size:clamp(16px,1.6vw,24px) !important; box-shadow:0 8px 12px rgba(255,31,91,.55) !important; transition:transform .2s ease !important; }
.fl-builder-content .dnb-dz-btn .fl-button:hover { transform:scale(1.05); }
@media (min-width:768px){
  .fl-builder-content .fl-node-7uzqil4py0d9 { text-align:center; }
  .fl-builder-content .fl-node-y0axc5s9w32k, .fl-builder-content .fl-node-0wp76hneoq9m { display:inline-block; vertical-align:middle; width:auto; }
  .fl-builder-content .fl-node-y0axc5s9w32k { margin-right:24px; }
}

/* ============ NEWSROOM (exact replica of React <Newsroom/>: tabs + carousel) ============ */
.fl-builder-content .dnb-h-cream { background:#fefbf5 !important; }
/* the html module that now holds the [aisensum_home_newsroom] shortcode */
.fl-builder-content .dnb-h-nr .fl-html { display:block; }
/* the old standalone heading + button nodes are replaced by the shortcode output */
.fl-builder-content .fl-node-ze3hxquma9lp, .fl-builder-content .fl-node-s19h6nupibeo { display:none !important; }

/* This row is BB-fixed at the global 1100px; React uses max-w-[1560px] with
   responsive side padding (px-6/12/16/24). Widen + pad to match so the cards
   are React-wide (≈461px) instead of squeezed narrow + tall. */
.fl-builder-content .fl-node-ydn2oqw0l4bf .fl-row-content { max-width:1560px !important; }
.fl-builder-content .fl-node-ydn2oqw0l4bf .fl-row-content-wrap { padding-left:24px; padding-right:24px; }
@media (min-width:640px){ .fl-builder-content .fl-node-ydn2oqw0l4bf .fl-row-content-wrap { padding-left:48px; padding-right:48px; } }
@media (min-width:768px){ .fl-builder-content .fl-node-ydn2oqw0l4bf .fl-row-content-wrap { padding-left:64px; padding-right:64px; } }
@media (min-width:1280px){ .fl-builder-content .fl-node-ydn2oqw0l4bf .fl-row-content-wrap { padding-left:96px; padding-right:96px; } }

.fl-builder-content .dnb-nr { max-width:1560px; margin:0 auto; }
/* header row: heading left, filter tabs right (React flex justify-between) */
.fl-builder-content .dnb-nr-top { display:flex; flex-direction:column; gap:16px; margin-bottom:24px; }
@media (min-width:640px){ .fl-builder-content .dnb-nr-top { flex-direction:row; align-items:center; justify-content:space-between; margin-bottom:40px; } }
.fl-builder-content .dnb-nr-h2 { margin:0; font-family:"Fraunces",serif; font-weight:600; line-height:1.05; font-size:30px; }
/* Astra forces -webkit-text-fill-color on heading spans → add the fill so "AI" stays
   black and "Newsroom" renders pink (color alone was being overridden to black). */
.fl-builder-content .dnb-nr-h2 .b { color:#000 !important; -webkit-text-fill-color:#000 !important; }
.fl-builder-content .dnb-nr-h2 .a { color:#FF1F5B !important; -webkit-text-fill-color:#FF1F5B !important; font-style:italic; background:none !important; -webkit-background-clip:border-box !important; }
@media (min-width:640px){ .fl-builder-content .dnb-nr-h2 { font-size:36px; } }
@media (min-width:768px){ .fl-builder-content .dnb-nr-h2 { font-size:68px; } }
/* Align the "AI Newsroom" heading with the card grid: the carousel is inset 56/64px (space
   for its prev/next arrows), so the heading — flush to the container edge — sat to the LEFT
   of the first card. Indent it the same amount so it lines up straight with the cards. */
@media (min-width:640px){ .fl-builder-content .dnb-nr-h2 { margin-left:56px; } }
@media (min-width:768px){ .fl-builder-content .dnb-nr-h2 { margin-left:64px; } }
/* filter tabs (pills) */
.fl-builder-content .dnb-nr-tabs { display:flex; align-items:center; gap:8px; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; padding-bottom:8px; }
.fl-builder-content .dnb-nr-tabs::-webkit-scrollbar { display:none; }
@media (min-width:640px){ .fl-builder-content .dnb-nr-tabs { padding-bottom:0; } }
.fl-builder-content .dnb-nr-tab { flex-shrink:0; cursor:pointer; border:1px solid #d1d5db; background:#fff; color:#0e0a0c; font-family:"Geist",sans-serif; font-weight:400; border-radius:999px; padding:6px 16px; font-size:12px; transition:color .2s, background .2s, border-color .2s; }
@media (min-width:640px){ .fl-builder-content .dnb-nr-tab { padding:8px 20px; font-size:13px; } }
/* MOBILE: all 4 filters must fit on screen — wrap them instead of a horizontal scroll that cut off "Media". */
@media (max-width:639px){
  .fl-builder-content .dnb-nr-tabs { flex-wrap:wrap; overflow-x:visible; row-gap:8px; }
  .fl-builder-content .dnb-nr-tab { padding:6px 14px; }
}
.fl-builder-content .dnb-nr-tab:hover { border-color:#e0366d; }
.fl-builder-content .dnb-nr[data-active="forbes"]   .dnb-nr-tab[data-tab="forbes"],
.fl-builder-content .dnb-nr[data-active="insights"] .dnb-nr-tab[data-tab="insights"],
.fl-builder-content .dnb-nr[data-active="case"]     .dnb-nr-tab[data-tab="case"],
.fl-builder-content .dnb-nr[data-active="media"]    .dnb-nr-tab[data-tab="media"] { background:#e0366d; border-color:#e0366d; color:#fff; font-weight:700; }
/* Media tab has no articles yet — clicking it shows a "Media Coming Soon" notice (mirrors the
   /ai-newsroom archive). Hidden by default; shown (and arrows hidden) only when Media is active. */
.fl-builder-content .dnb-nr-soon-msg { display:none; width:100%; text-align:center; padding:64px 16px; font-family:"Geist",sans-serif; font-size:clamp(20px,3vw,30px); font-weight:600; color:#0e0a0c; }
.fl-builder-content .dnb-nr-soon-msg .a { font-family:"Fraunces",serif; font-style:italic; font-weight:400; color:#FF1F5B; }
.fl-builder-content .dnb-nr[data-active="media"] .dnb-nr-soon-msg { display:block; }
/* Only suppress the carousel arrows on Media when there are NO media cards (placeholder). */
.fl-builder-content .dnb-nr[data-active="media"]:not([data-has-media]) .dnb-nr-arrow { display:none !important; }
/* "Media" filter — non-functional "Coming soon" pill (tooltip on hover) */
.fl-builder-content .dnb-nr-tab-soon { opacity:.5; cursor:not-allowed; position:relative; }
.fl-builder-content .dnb-nr-tab-soon:hover { border-color:#d1d5db; background:#fff; color:#0e0a0c; }
.fl-builder-content .dnb-nr-tab-soon::after { content:"Coming soon"; position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); background:#0b1f3d; color:#fff; font-family:"Geist",sans-serif; font-weight:500; font-size:11px; line-height:1; padding:5px 9px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s; box-shadow:0 6px 16px -6px rgba(0,0,0,.4); }
.fl-builder-content .dnb-nr-tab-soon:hover::after { opacity:1; }
/* carousel */
.fl-builder-content .dnb-nr-carousel { position:relative; }
@media (min-width:640px){ .fl-builder-content .dnb-nr-carousel { padding:0 56px; } }
@media (min-width:768px){ .fl-builder-content .dnb-nr-carousel { padding:0 64px; } }
.fl-builder-content .dnb-nr-track { display:flex; gap:16px; overflow-x:auto; padding-bottom:16px; scroll-snap-type:x proximity; overscroll-behavior-x:contain; -ms-overflow-style:none; scrollbar-width:none; }
/* iOS scroll notes: NO `-webkit-overflow-scrolling:touch` here — that legacy property forces
   WebKit's old async-scroll path and, combined with scroll-snap, is a known "swipe does nothing"
   freeze on iPhone (Safari AND Chrome = same WebKit). Momentum scrolling is native since iOS 13.
   NO touch-action restriction either (auto = let WebKit pan freely); the browser back-swipe is
   contained by overscroll-behavior-x. Desktop is unaffected (both are iOS-only behaviours). */
.fl-builder-content .dnb-nr-card { touch-action:manipulation; } /* pan/pinch ok; kills dbl-tap-zoom ambiguity on the card links */
.fl-builder-content .dnb-nr-track::-webkit-scrollbar { display:none; }
@media (min-width:640px){ .fl-builder-content .dnb-nr-track { gap:24px; } }
/* cards: hidden by default, shown for the active tab (React filteredArticles) */
.fl-builder-content .dnb-nr-card { display:none; flex-direction:column; width:280px; flex-shrink:0; overflow:hidden; border:1px solid rgba(0,0,0,.5); border-radius:20px; background:#fff; box-shadow:4px 4px 10px rgba(224,54,109,.15); text-decoration:none; scroll-snap-align:start; }
@media (min-width:640px){ .fl-builder-content .dnb-nr-card { width:350px; border-radius:25px; } }
@media (min-width:768px){ .fl-builder-content .dnb-nr-card { width:calc((100% - 24px)/2); } }
@media (min-width:1024px){ .fl-builder-content .dnb-nr-card { width:calc((100% - 48px)/3); } }
.fl-builder-content .dnb-nr[data-active="forbes"]   .dnb-nr-card[data-cat="forbes"],
.fl-builder-content .dnb-nr[data-active="insights"] .dnb-nr-card[data-cat="insights"],
.fl-builder-content .dnb-nr[data-active="case"]     .dnb-nr-card[data-cat="case"],
.fl-builder-content .dnb-nr[data-active="media"]    .dnb-nr-card[data-cat="media"] { display:flex; }
/* thumb */
.fl-builder-content .dnb-nr-thumb { position:relative; height:160px; flex-shrink:0; overflow:hidden; }
@media (min-width:640px){ .fl-builder-content .dnb-nr-thumb { height:200px; } }
@media (min-width:768px){ .fl-builder-content .dnb-nr-thumb { height:220px; } }
@media (min-width:1024px){ .fl-builder-content .dnb-nr-thumb { height:180px; } }
@media (min-width:1280px){ .fl-builder-content .dnb-nr-thumb { height:220px; } }
@media (min-width:1536px){ .fl-builder-content .dnb-nr-thumb { height:260px; } }
.fl-builder-content .dnb-nr-thumb .thumb-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fl-builder-content .dnb-nr-badge { position:absolute; right:12px; top:12px; z-index:3; text-align:center; border-radius:999px; background:#FF1F5B; color:#fff; font-style:italic; font-family:"Fraunces",serif; letter-spacing:.05em; padding:2px 8px; font-size:12px; box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1); }
@media (min-width:640px){ .fl-builder-content .dnb-nr-badge { right:16px; top:20px; padding:4px 12px; font-size:14px; } }
/* body */
.fl-builder-content .dnb-nr-body { flex:1; display:flex; flex-direction:column; gap:16px; padding:16px; }
@media (min-width:640px){ .fl-builder-content .dnb-nr-body { gap:24px; padding:20px; } }
.fl-builder-content .dnb-nr-meta { display:flex; align-items:center; gap:6px; font-family:"Geist Mono","Geist",monospace; font-size:9px; letter-spacing:1px; color:#8A7F82; margin-bottom:4px; }
@media (min-width:640px){ .fl-builder-content .dnb-nr-meta { font-size:10px; margin-bottom:6px; } }
.fl-builder-content .dnb-nr-ttl { margin:0; font-family:"Geist",sans-serif; font-weight:600; line-height:1.375; color:#0e0a0c; font-size:16px; }
@media (min-width:640px){ .fl-builder-content .dnb-nr-ttl { font-size:18px; } }
@media (min-width:768px){ .fl-builder-content .dnb-nr-ttl { font-size:20px; } }
@media (min-width:1280px){ .fl-builder-content .dnb-nr-ttl { font-size:24px; } }
.fl-builder-content .dnb-nr-read { margin:auto 0 0; font-family:"Host Grotesk",sans-serif; font-style:italic; text-transform:uppercase; letter-spacing:1.2px; color:#FF1F5B; font-size:10px; }
@media (min-width:640px){ .fl-builder-content .dnb-nr-read { font-size:12px; } }
/* arrows (pink chevrons, shown when scrollable; toggled by JS) */
.fl-builder-content .dnb-nr-arrow { display:none; position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; padding:0; }
.fl-builder-content .dnb-nr-arrow svg { width:18px; height:30px; }
.fl-builder-content .dnb-nr-prev { left:8px; }
.fl-builder-content .dnb-nr-prev svg { transform:rotate(180deg); }
.fl-builder-content .dnb-nr-next { right:8px; }
@media (max-width:639px){ .fl-builder-content .dnb-nr-arrow { display:none !important; } }
/* View All */
.fl-builder-content .dnb-nr-viewall { margin-top:32px; display:flex; justify-content:center; }
@media (min-width:640px){ .fl-builder-content .dnb-nr-viewall { margin-top:40px; } }
.fl-builder-content .dnb-nr-viewall a { display:inline-flex; align-items:center; gap:8px; border-radius:999px; background:#FF1F5B; color:#fff; font-family:"Geist",sans-serif; font-weight:500; font-size:15px; padding:14px 32px; text-decoration:none; box-shadow:0 8px 24px -8px rgba(255,31,91,.55); transition:transform .3s; }
.fl-builder-content .dnb-nr-viewall a:hover { transform:translateY(-2px); }
.fl-builder-content .dnb-nr-viewall a .arr { transition:transform .3s; }
.fl-builder-content .dnb-nr-viewall a:hover .arr { transform:translateX(4px); }
/* card hover (React .home-newsroom-card): lift + shadow + image zoom + wash + sheen */
.fl-builder-content .dnb-nr-card.home-newsroom-card { transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .4s; }
.fl-builder-content .dnb-nr-card.home-newsroom-card:hover { border-color:transparent; box-shadow:0 30px 60px -20px rgba(14,10,12,.30),0 8px 24px -12px rgba(14,10,12,.18); transform:translateY(-4px); }
.fl-builder-content .dnb-nr-card .thumb-img { transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.fl-builder-content .dnb-nr-card:hover .thumb-img { transform:scale(1.07); }
.fl-builder-content .dnb-nr-thumb.thumb-container::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(255,31,91,.28)); opacity:0; transition:opacity .45s; pointer-events:none; }
.fl-builder-content .dnb-nr-card:hover .thumb-container::after { opacity:1; }
.fl-builder-content .dnb-nr-card .sheen { position:absolute; top:0; left:-60%; width:45%; height:100%; background:linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-18deg); pointer-events:none; opacity:0; z-index:2; }
.fl-builder-content .dnb-nr-card:hover .sheen { animation:nrhomesweep .9s ease forwards; }
@keyframes nrhomesweep { 0%{ left:-60%; opacity:1; } 100%{ left:130%; opacity:1; } }
/* TOUCH devices only: a long-press on a card activates :hover and fires the glassy sheen sweep,
   which janks the page. Kill the hover effects on touch (laptop/mouse view is unchanged). */
@media (hover: none) {
  .fl-builder-content .dnb-nr-card:hover .sheen { animation:none !important; opacity:0 !important; }
  .fl-builder-content .dnb-nr-card.home-newsroom-card:hover { transform:none !important; box-shadow:4px 4px 10px rgba(224,54,109,.15) !important; border-color:rgba(0,0,0,.5) !important; }
  .fl-builder-content .dnb-nr-card:hover .thumb-img { transform:none !important; }
  .fl-builder-content .dnb-nr-card:hover .thumb-container::after { opacity:0 !important; }
}
/* Newsroom cards are <a> links w/ <img>: block the browser's native link/image DRAG (a drag
   started on a card + released outside froze the section — scroll & clicks dead — on BOTH
   laptop and mobile). Pairs with draggable="false" set in JS. Doesn't affect click-to-open. */
.fl-builder-content .dnb-nr-card,
.fl-builder-content .dnb-nr-card img{ -webkit-user-drag:none; user-drag:none; }
.fl-builder-content .dnb-nr-card{ -webkit-user-select:none; user-select:none; }

/* ============ CEO (exact replica of React <CEO/>) ============ */
/* section: white with a subtle top divider (React: bg-white border-t border-brand-dark/8) */
.fl-builder-content .fl-node-fla4ovsxbpy3 { background:#fff !important; border-top:1px solid rgba(14,10,12,.08); }
/* widen this row to React's max-w-[1280px] (BB caps fixed rows at 1100) */
.fl-builder-content .fl-node-fla4ovsxbpy3 .fl-row-content { max-width:1280px !important; }
.fl-builder-content .fl-node-fla4ovsxbpy3 .fl-row-content-wrap { padding-left:16px; padding-right:16px; }
@media (min-width:640px){ .fl-builder-content .fl-node-fla4ovsxbpy3 .fl-row-content-wrap { padding-left:24px; padding-right:24px; } }
/* container: photo (fixed 404.59px) left + copy right, top-aligned (React md:flex-row md:items-start) */
.fl-builder-content .dnb-h-ceo { display:flex; flex-direction:column; gap:32px; max-width:1280px; margin:0 auto; }
@media (min-width:768px){ .fl-builder-content .dnb-h-ceo { flex-direction:row; align-items:flex-start; gap:64px; } }
.fl-builder-content .dnb-ceo-left { width:100%; max-width:404.59px; flex-shrink:0; margin-left:auto; margin-right:auto; }
.fl-builder-content .dnb-ceo-copy { display:flex; flex-direction:column; justify-content:center; flex:1; min-width:0; }
@media (min-width:768px){ .fl-builder-content .dnb-ceo-copy { flex:0 0 calc(100% - 404.59px - 64px); } } /* fill the 1280 row (404.59 photo + 64 gap) so the h2 stays 2 lines like React — flex-grow silently fails under BB/Astra here */
/* photo card */
.fl-builder-content .dnb-ceo-photo { position:relative; aspect-ratio:22 / 25; width:100%; overflow:hidden; border-radius:20px; background:#EBE7E1; box-shadow:0 2px 6px rgba(14,10,12,.06), 0 6px 20px -8px rgba(14,10,12,.18); } /* gently taller portrait (~460px) so the name-card bottom lands at the quote-box bottom; was square aspect-ratio:1, then 3/4 which overshot */
.fl-builder-content .dnb-ceo-photo img.p { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; transform:translate(-2.5%,4.5%) scale(1.3); }
.fl-builder-content .dnb-ceo-photo img.ftc { position:absolute; left:10px; top:12px; width:72px; height:72px; }
@media (min-width:640px){ .fl-builder-content .dnb-ceo-photo img.ftc { left:11.59px; top:15.42px; width:88px; height:88px; } }
/* name card (separate black box) */
.fl-builder-content .dnb-ceo-namecard { margin-top:16px; background:#0e0a0c; border-radius:20px; padding:16px 20px; }
@media (min-width:640px){ .fl-builder-content .dnb-ceo-namecard { padding:20px 24px; } }
.fl-builder-content .dnb-ceo-namecard .n { font-family:"Host Grotesk",sans-serif; font-weight:600; font-size:20px; letter-spacing:-.01em; color:#fff; }
@media (min-width:640px){ .fl-builder-content .dnb-ceo-namecard .n { font-size:24px; } }
.fl-builder-content .dnb-ceo-namecard .r { font-family:"Host Grotesk",sans-serif; font-weight:600; font-size:12px; letter-spacing:1.1px; color:#FF1F5B; margin-top:2px; }
@media (min-width:640px){ .fl-builder-content .dnb-ceo-namecard .r { font-size:14px; } }
.fl-builder-content .dnb-ceo-namecard a { display:inline-block; margin-top:8px; font-family:"Host Grotesk",sans-serif; font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:#fff; text-decoration:none; transition:color .2s; }
@media (min-width:640px){ .fl-builder-content .dnb-ceo-namecard a { font-size:11px; } }
.fl-builder-content .dnb-ceo-namecard a:hover { color:#e0366d; }
/* copy column */
.fl-builder-content .dnb-ceo-copy .eye { display:inline-flex; align-items:center; gap:8px; width:fit-content; border:1px solid #ffe8ee; background:#fff; border-radius:999px; padding:6px 12px; box-shadow:0 1px 2px rgba(14,10,12,.04); font-family:"Geist",sans-serif; font-weight:500; font-size:11px; color:#FF1F5B; margin-bottom:16px; }
@media (min-width:640px){ .fl-builder-content .dnb-ceo-copy .eye { padding:8px 16px; font-size:13px; margin-bottom:24px; } }
.fl-builder-content .dnb-ceo-copy .eye .dot { width:4px; height:4px; border-radius:50%; background:#FF1F5B; opacity:.67; box-shadow:0 0 8px #ff1f5b; }
@media (min-width:640px){ .fl-builder-content .dnb-ceo-copy .eye .dot { width:6px; height:6px; } }
.fl-builder-content .dnb-ceo-copy h2 { font-family:"Fraunces",serif; font-weight:600; font-size:clamp(24px,4.4vw,56px); line-height:1.1; letter-spacing:-.01em; color:#0e0a0c; margin:0 0 20px; }
@media (min-width:640px){ .fl-builder-content .dnb-ceo-copy h2 { margin-bottom:32px; } }
.fl-builder-content .dnb-ceo-copy h2 .it { font-family:"Fraunces",serif; font-style:italic; color:#FF1F5B !important; -webkit-text-fill-color:#FF1F5B !important; font-weight:400; } /* pink accent — !important + text-fill beats Astra's heading -webkit-text-fill-color override */
.fl-builder-content .dnb-ceo-copy p { font-family:"Geist",sans-serif; font-size:14px; line-height:1.625; color:#4A3F42; margin:0 0 12px; max-width:720px; }
.fl-builder-content .dnb-ceo-copy p strong { font-weight:700; color:#0e0a0c; } /* teammate line (Daniel/Sasha/Nicole) bold + darker, per the original design */
@media (min-width:640px){ .fl-builder-content .dnb-ceo-copy p { font-size:16px; margin-bottom:16px; } }
.fl-builder-content .dnb-ceo-copy .quote { margin:8px 0 20px; max-width:720px; background:#FFE8EE; border-radius:12px; padding:16px; font-family:"Fraunces",serif; font-style:italic; font-size:16px; line-height:1.625; color:#0e0a0c; }
@media (min-width:640px){ .fl-builder-content .dnb-ceo-copy .quote { border-radius:14px; padding:20px 24px; font-size:clamp(18px,2.2vw,24px); margin-bottom:32px; } }
.fl-builder-content .dnb-ceo-copy .acts { display:flex; flex-direction:column; gap:12px; }
@media (min-width:640px){ .fl-builder-content .dnb-ceo-copy .acts { flex-direction:row; flex-wrap:wrap; align-items:center; gap:16px; } }
.fl-builder-content .dnb-ceo-copy a.b1 { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; background:#FF1F5B; color:#fff; text-decoration:none; border-radius:999px; font-family:"Geist",sans-serif; font-weight:500; font-size:14px; box-shadow:0 8px 12px rgba(255,31,91,.55); transition:transform .2s; }
@media (min-width:640px){ .fl-builder-content .dnb-ceo-copy a.b1 { height:45px; padding:0 24px; font-size:15px; } }
.fl-builder-content .dnb-ceo-copy a.b1:hover { transform:scale(1.05); }
.fl-builder-content .dnb-ceo-copy a.b2 { display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 20px; background:#fff; border:1px solid rgba(14,10,12,.14); color:#0e0a0c; text-decoration:none; border-radius:999px; font-family:"Geist",sans-serif; font-weight:500; font-size:14px; transition:border-color .2s; }
@media (min-width:640px){ .fl-builder-content .dnb-ceo-copy a.b2 { height:45px; padding:0 24px; font-size:15px; } }
.fl-builder-content .dnb-ceo-copy a.b2:hover { border-color:#e0366d; }

/* ============ SECURITY ============ */
.fl-builder-content .dnb-h-secsec { background:#FBF1F2 !important; text-align:center; }
.fl-builder-content .dnb-h-sec-h2 { font-family:"Geist",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:2px; font-size:clamp(18px,3vw,28px); color:rgba(0,0,0,.5) !important; -webkit-text-fill-color:rgba(0,0,0,.5) !important; }
/* para: compound selector (BB class is on the .fl-rich-text element itself). React md:text-2xl (24px), black/50 */
.fl-builder-content .dnb-h-sec-p.fl-rich-text, .fl-builder-content .dnb-h-sec-p.fl-rich-text p { text-align:center; font-family:"Geist",sans-serif; font-size:clamp(16px,2.2vw,24px); line-height:1.5; letter-spacing:.01em; color:rgba(0,0,0,.5) !important; -webkit-text-fill-color:rgba(0,0,0,.5) !important; }
.fl-builder-content .dnb-h-sec-p.fl-rich-text { max-width:896px; margin-left:auto; margin-right:auto; }
.fl-builder-content .dnb-h-sec-p.fl-rich-text p { margin:0; }
.fl-builder-content .dnb-h-secbadges { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin:18px 0; }
.fl-builder-content .dnb-h-secbadges .chip { border:1px dashed rgba(11,31,61,.2); background:#FBF1F2; border-radius:999px; padding:8px 18px; font-family:"Geist",sans-serif; font-weight:500; font-size:16px; color:#0b1f3d; }
/* logos: React gap-6 sm:gap-10 md:gap-16 (24/40/64); aws 40/52/60; google 56/80/95 */
/* Google Cloud (icon+text) + Google for Startups logos, side-by-side HORIZONTAL + centered */
.fl-builder-content .dnb-h-seclogos { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:40px; }
@media (min-width:768px){ .fl-builder-content .dnb-h-seclogos { gap:64px; } }
.fl-builder-content .dnb-h-seclogos img.aws { height:27px; width:auto; object-fit:contain; }
@media (min-width:640px){ .fl-builder-content .dnb-h-seclogos img.aws { height:33px; } }
@media (min-width:768px){ .fl-builder-content .dnb-h-seclogos img.aws { height:39px; } }
.fl-builder-content .dnb-h-seclogos img.goog { height:27px; width:auto; max-width:85vw; object-fit:contain; }
@media (min-width:640px){ .fl-builder-content .dnb-h-seclogos img.goog { height:33px; max-width:none; } }
@media (min-width:768px){ .fl-builder-content .dnb-h-seclogos img.goog { height:39px; } }
/* Security section spacing → React (py-10=40px, para mb-4=16, badges mb-6=24, no dead space).
   WP had 48px padding + big module gaps (para→badges 38, badges→logos 38). Tighten. */
.fl-builder-content .dnb-h-secsec { padding-top:40px !important; padding-bottom:24px !important; }
.fl-builder-content .dnb-h-secsec .fl-col-content { padding-bottom:0 !important; }
.fl-builder-content .dnb-h-secsec .dnb-h-sec-h2 { margin:0 0 16px !important; }
.fl-builder-content .dnb-h-secsec .dnb-h-sec-p.fl-rich-text { margin-top:0 !important; margin-bottom:16px !important; }
.fl-builder-content .dnb-h-secsec .dnb-h-secbadges { margin:0 0 24px !important; }
.fl-builder-content .dnb-h-secsec .dnb-h-seclogos { margin:0 !important; }

/* ============================================================
   SITE HEADER + FOOTER (site-wide) — match the React app
   ============================================================ */
/* Header: keep it pinned at the top on scroll (React navbar is position:fixed and
   never hides). Sticky keeps it in flow so it never overlaps content.
   NOTE: html/body have overflow-x:hidden (anti-horizontal-scroll) which makes
   <body> a non-scrolling scroll-container and BREAKS position:sticky. `clip`
   stops horizontal overflow WITHOUT creating a scroll container, so sticky works. */
html, body { overflow-x: clip !important; }
.site-header, #masthead { position: sticky !important; top: 0; z-index: 99; }
.admin-bar .site-header, .admin-bar #masthead { top: 32px; }
@media (max-width: 782px){ .admin-bar .site-header, .admin-bar #masthead { top: 46px; } }

/* Footer: the custom AISensum footer is the real one. Hide Astra's leftover
   footer-builder rows below it — the empty "Add Widget" widget bar and the
   "Powered by Astra WordPress Theme" copyright row. */
.site-primary-footer-wrap, .site-below-footer-wrap { display: none !important; }

/* ===== Balloon V3 panel: tighter spacing + per-teammate gradients / dark colours ===== */
.fl-builder-content .dnb-bln-card { max-width:940px !important; padding:22px 26px !important; }
@media (min-width:640px){ .fl-builder-content .dnb-bln-card { padding:26px 32px !important; } }
@media (min-width:768px){ .fl-builder-content .dnb-bc-stat { width:190px !important; } }
@media (min-width:1024px){ .fl-builder-content .dnb-bc-stat { width:210px !important; } }
/* profile circle -> teammate gradient ring (padding technique); hide the old flat ring */
.fl-builder-content .dnb-bc-photo { padding:9px; border-radius:50%; }
.fl-builder-content .dnb-bc-ring { display:none !important; }
.fl-builder-content .dnb-bln-card[data-card="money"]   .dnb-bc-photo { background:linear-gradient(180deg,#9E1B46,#dfa4cc); }
.fl-builder-content .dnb-bln-card[data-card="time"]    .dnb-bc-photo { background:linear-gradient(180deg,#E96618,#ee8515); }
.fl-builder-content .dnb-bln-card[data-card="quality"] .dnb-bc-photo { background:linear-gradient(180deg,#2B5AC7,#3c82f5); }
/* CTA button ("How X works") -> teammate gradient */
.fl-builder-content .dnb-bln-card[data-card="money"]   .dnb-bc-cta { background:linear-gradient(180deg,#9E1B46,#dfa4cc) !important; }
.fl-builder-content .dnb-bln-card[data-card="time"]    .dnb-bc-cta { background:linear-gradient(180deg,#E96618,#ee8515) !important; }
.fl-builder-content .dnb-bln-card[data-card="quality"] .dnb-bc-cta { background:linear-gradient(180deg,#2B5AC7,#3c82f5) !important; }
/* accent word + big stat number -> teammate DARK colour */
.fl-builder-content .dnb-bln-card[data-card="money"]   .dnb-bc-text h3 .acc { color:#9E1B46 !important; -webkit-text-fill-color:#9E1B46 !important; }
.fl-builder-content .dnb-bln-card[data-card="time"]    .dnb-bc-text h3 .acc { color:#E96618 !important; -webkit-text-fill-color:#E96618 !important; }
.fl-builder-content .dnb-bln-card[data-card="quality"] .dnb-bc-text h3 .acc { color:#2B5AC7 !important; -webkit-text-fill-color:#2B5AC7 !important; }
.fl-builder-content .dnb-bln-card[data-card="money"]   .dnb-bc-stat .num { color:#9E1B46; }
.fl-builder-content .dnb-bln-card[data-card="time"]    .dnb-bc-stat .num { color:#E96618; }
.fl-builder-content .dnb-bln-card[data-card="quality"] .dnb-bc-stat .num { color:#2B5AC7; }

/* ── EDITOR-FRIENDLY SECTION BACKGROUNDS: section vertical padding on the inner
   wrapper (not the row) so a BB editor Row Background fills the whole section
   (see daniel-bb.css). Targeted by node id because several homepage sections
   share .dnb-h-sec with different spacing. The balloon section (wn6hksepoxyb) is
   intentionally excluded — it has dynamic padding tied to the balloon reveal. ── */
.fl-builder-content .fl-node-ml2hqnz8vg5x { padding-top:0 !important; padding-bottom:0 !important; }
.fl-builder-content .fl-node-ml2hqnz8vg5x > .fl-row-content-wrap { padding-top:44px !important; padding-bottom:68px !important; }
.fl-builder-content .fl-node-vzbd9t6s012k { padding-top:0 !important; padding-bottom:0 !important; }
.fl-builder-content .fl-node-vzbd9t6s012k > .fl-row-content-wrap { padding-top:44px !important; padding-bottom:20px !important; }
.fl-builder-content .fl-node-zc9hrbukx7yo { padding-top:0 !important; padding-bottom:0 !important; }
.fl-builder-content .fl-node-zc9hrbukx7yo > .fl-row-content-wrap { padding-top:20px !important; padding-bottom:68px !important; }
.fl-builder-content .fl-node-ydn2oqw0l4bf { padding-top:0 !important; padding-bottom:0 !important; }
.fl-builder-content .fl-node-ydn2oqw0l4bf > .fl-row-content-wrap { padding-top:44px !important; padding-bottom:68px !important; }
.fl-builder-content .fl-node-fla4ovsxbpy3 { padding-top:0 !important; padding-bottom:0 !important; }
.fl-builder-content .fl-node-fla4ovsxbpy3 > .fl-row-content-wrap { padding-top:69px !important; padding-bottom:68px !important; }
.fl-builder-content .fl-node-z0bh682dursc { padding-top:0 !important; padding-bottom:0 !important; }
.fl-builder-content .fl-node-z0bh682dursc > .fl-row-content-wrap { padding-top:60px !important; padding-bottom:44px !important; }

/* ===== HERO — animated astronaut/space background (dark) + light text, covers the screen.
   Matches the Daniel/Sasha/Nicole dark-hero treatment; the transparent-header-on-scroll +
   the hero pull-up behind the header are added in aisensum-custom-header.php (body.home). ===== */
.fl-builder-content .dnb-h-hero{
  /* HD looping VIDEO background (replaces the animated webp — crisper). The <video> is injected
     into the hero by aisensum-custom-header.php JS (body.home); poster shows until it plays. */
  background:#040816 url(images/hero-astro-poster.webp) center bottom/cover no-repeat !important;
  position:relative; overflow:hidden;
  min-height:calc(100vh - 34px);       /* fallback for browsers without dvh */
  min-height:calc(100dvh - 34px);      /* fills to the TRUE viewport bottom (Mac/Chrome/mobile-safe) */
}
/* the looping bg video — cover + bottom-anchored so the astronaut's legs/feet are never cropped */
.fl-builder-content .dnb-h-hero .dnb-h-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; z-index:0; border:0; margin:0; padding:0; pointer-events:none; }
/* legibility gradient ON TOP of the video, BELOW the copy */
.fl-builder-content .dnb-h-hero::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(4,8,22,.5) 0%, rgba(4,8,22,.32) 46%, rgba(4,8,22,.6) 100%); pointer-events:none; }
/* keep the hero copy above the video + overlay */
.fl-builder-content .dnb-h-hero > .fl-row-content-wrap{ position:relative; z-index:2; }
.fl-builder-content .dnb-h-hero-title{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
.fl-builder-content .dnb-h-hero-sub, .fl-builder-content .dnb-h-hero-sub p{ color:rgba(255,255,255,.9) !important; }
/* keep the "Lead" accent + rotating word pink (bright enough on the dark bg) */

/* ===== HERO layout (astronaut bg) — LEFT-aligned copy (reference), smaller title + buttons,
   transparent logos strip with no label. Pill button STYLE kept, only resized. ===== */
.fl-builder-content .dnb-h-hero{ text-align:left !important; }
.fl-builder-content .dnb-h-hero .fl-col-content{ justify-content:flex-start !important; align-items:flex-start !important; padding-top:96px !important; } /* breathing room between the header and the title (content is vertically centred, so this reads ~half) */
/* title: smaller + left; max-width forces the "Human in the / Lead" 2-line wrap like the ref */
.fl-builder-content .dnb-h-hero-title{ font-size:clamp(48px,7.2vw,104px) !important; line-height:1.02 !important; letter-spacing:-.015em; text-align:left !important; max-width:6.6em; margin:0 !important; }
/* subtitle: smaller + left */
.fl-builder-content .dnb-h-hero-sub, .fl-builder-content .dnb-h-hero-sub p{ font-size:clamp(20px,2.4vw,28px) !important; line-height:1.3 !important; text-align:left !important; }
/* CTA buttons: keep the pill style, shrink to a sensible size (was 66x261/310) */
.fl-builder-content .dnb-h-hbtn .fl-button{ height:52px !important; padding:0 26px !important; font-size:17px !important; width:auto !important; }
@media (min-width:768px){ .fl-builder-content .dnb-h-hbtn-pink .fl-button, .fl-builder-content .dnb-h-hbtn-ghost .fl-button{ height:52px !important; width:auto !important; font-size:17px !important; } }
.fl-builder-content .dnb-h-hero .dnb-h-hbtn + .dnb-h-hbtn{ margin-left:16px; }
/* MOBILE: the CTA buttons stack full-width and inherited text-align:center, so they floated
   centered while the hero copy is left-aligned. Left-align them to match the copy. */
@media (max-width:767px){
  .fl-builder-content .dnb-h-hero .dnb-h-hbtn-pink,
  .fl-builder-content .dnb-h-hero .dnb-h-hbtn-ghost{ text-align:left !important; }
  .fl-builder-content .dnb-h-hero .dnb-h-hbtn + .dnb-h-hbtn{ margin-left:0 !important; margin-top:14px !important; }
}
/* logos strip: remove the black box + the "Deployed across Southeast Asia for" label */
.fl-builder-content .dnb-h-logos{ background:transparent !important; box-shadow:none !important; margin-left:0 !important; margin-top:66px !important; padding:14px 0 0 !important; max-width:none; }
.fl-builder-content .dnb-h-logos .lbl{ display:none !important; }
.fl-builder-content .dnb-h-logos .marquee{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent); margin:0; }
/* force the "Human in the / Lead" 2-line wrap at EVERY font size — em-based so the ratio holds as
   the clamp() scales the title with the viewport ("Human in the"=~5.1em < 6.6em < full "…Lead"=~7.2em) */
.fl-builder-content h1.dnb-h-hero-title.dnb-h-center{ max-width:6.6em !important; }