/*
 * Daniel page — NATIVE Beaver Builder layout styling (stock modules).
 * Same pattern as home-native.css: scoped to .fl-builder-content so it styles
 * both the live page and the BB editor preview. Section = one BB row (dbb-* class);
 * editable copy = Heading/Rich-Text/Button modules; visuals = HTML modules whose
 * inner markup uses the .dan-* classes from the React Daniel design.
 * Values ported from src/app/daniel/daniel.css.
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&family=Roboto:wght@400;500&display=swap');

/* ===== palette / tokens on the BB content root ===== */
.fl-builder-content {
  --navy:#0B1F3D; --navy-66:rgba(11,31,61,.66); --navy-20:rgba(11,31,61,.20); --navy-08:rgba(11,31,61,.08);
  --ink:#0A0A0A; --ink-2:#0E0A0C; --pink:#9E1B46; --pink-deep:#7A1536; --pink-soft:#F4E3E6;
  --gray:#8A7F82; --gray-40:#666666; --gray-4a:#4A3F42; --green:#25C26B; --violet:#7B4BC8; --violet-soft:#F0E6FF;
  --cream:#FEFBF5; --cream-2:#F5F1E8; --cream-3:#F5EEDD; --bg-soft:#FBFAF8; --bg-3:#EBE7E1;
  --line:rgba(14,10,12,.08); --line-2:rgba(14,10,12,.14); --orange-88:#EAE4D6;
  --serif:"Fraunces","Times New Roman",serif; --sans:"Geist",-apple-system,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace; --inter:"Inter","Geist",sans-serif; --islab:"Instrument Serif","Fraunces",serif;
  --shadow-lg:0 30px 60px -20px rgba(14,10,12,.30),0 8px 24px -12px rgba(14,10,12,.18);
}
.fl-builder-content .dbb-sec *, .fl-builder-content .dbb-sec *::before, .fl-builder-content .dbb-sec *::after { box-sizing:border-box; }
.fl-builder-content .dbb-sec img { display:block; max-width:100%; }
.fl-builder-content .dbb-center, .fl-builder-content .dbb-center.fl-rich-text, .fl-builder-content .dbb-center.fl-heading-text { text-align:center; }
.fl-builder-content .dbb-it { font-style:italic; color:var(--pink) !important; -webkit-text-fill-color:var(--pink) !important; }

/* ===== section rows (full-bleed like home) ===== */
.fl-builder-content .dbb-sec { padding:88px 0; background:var(--cream); }
.fl-builder-content .dbb-sec .fl-row-content-wrap { width:100%; max-width:100%; padding-left:0; padding-right:0; }
.fl-builder-content .dbb-sec .fl-row-content { max-width:min(1440px, var(--as-fill)); margin-inline:auto; padding-inline:24px; }
.fl-builder-content .dbb-paper { background:var(--cream-2); }

/* keep BB module vertical rhythm tight inside sections */
.fl-builder-content .dbb-sec .fl-module { margin:0; }

/* ===== shared button styling (Button modules) ===== */
.fl-builder-content .dbb-btn-pink .fl-button,
.fl-builder-content .dbb-btn-ghost .fl-button,
.fl-builder-content .dbb-btn-outline .fl-button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px !important; font-family:var(--sans) !important; font-weight:600 !important;
  font-size:15px !important; line-height:1 !important; text-decoration:none !important; white-space:nowrap;
}
.fl-builder-content .dbb-btn-pink .fl-button { background:var(--pink) !important; color:#fff !important; border:0 !important; padding:16px 28px !important; box-shadow:0 8px 24px -8px rgba(158,27,70,.55) !important; }
.fl-builder-content .dbb-btn-pink .fl-button:hover { background:#7A1536 !important; }
.fl-builder-content .dbb-btn-ghost .fl-button { background:transparent !important; color:var(--navy) !important; border:2px solid var(--navy-20) !important; padding:14px 26px !important; }
.fl-builder-content .dbb-btn-outline .fl-button { background:#9E1B46 !important; border:2px solid #9E1B46 !important; height:60px; padding:0 32px !important; box-shadow:0 8px 24px -8px rgba(158,27,70,.55) !important; }
.fl-builder-content .dbb-btn-outline .fl-button:hover { background:#B884A7 !important; border-color:#B884A7 !important; }
.fl-builder-content .dbb-btn-outline .fl-button,
.fl-builder-content .dbb-btn-outline .fl-button .fl-button-text { color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* =====================================================================
   HERO  (2-column BB row: text left / image right)
   ===================================================================== */
/* padding-top reduced from React's 140px: that value made room for React's FIXED navbar, but
   in WP the Astra header is in-flow and already occupies the top, so 140px stacked on it left a
   huge empty gap. 48px gives a comfortable, React-like gap under the header. */
.fl-builder-content .dbb-hero { padding:48px 0 60px; position:relative; overflow:hidden; }
.fl-builder-content .dbb-hero .fl-col-group { display:flex; align-items:center; flex-wrap:nowrap; }
.fl-builder-content .dbb-hero .fl-col:first-child .fl-col-content { padding-right:28px; }
.fl-builder-content .dbb-hero .fl-col:last-child .fl-col-content { padding-left:28px; }
/* badge row */
.fl-builder-content .dbb-hero-badges { margin-bottom:24px; }
.fl-builder-content .dbb-hero-badges .row { display:flex; align-items:center; gap:12px; }
.fl-builder-content .dbb-hero-badges .pill { display:inline-block; background:var(--pink); color:#fff; font-family:var(--sans); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.32px; padding:4px 12px; border-radius:999px; line-height:1.3; }
.fl-builder-content .dbb-hero-badges .lbl { color:var(--gray-40); font-family:var(--sans); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1.92px; }
/* title (single heading, 3 spans) */
.fl-builder-content .dbb-hero-title.fl-heading-text { display:flex; flex-direction:column; align-items:flex-start; gap:8px; font-family:var(--serif) !important; font-weight:400 !important; margin:0 0 24px; }
.fl-builder-content .dbb-hero-title .l1 { color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important; font-size:clamp(36px,5vw,66px); line-height:1.05; }
.fl-builder-content .dbb-hero-title .l2 { color:var(--pink) !important; -webkit-text-fill-color:var(--pink) !important; font-style:italic; font-size:clamp(36px,5vw,66px); line-height:1.05; }
.fl-builder-content .dbb-hero-title .l3 { color:var(--gray-40) !important; -webkit-text-fill-color:var(--gray-40) !important; font-size:clamp(22px,2.8vw,36px); line-height:1.1; margin-top:4px; }
/* body + deploy */
.fl-builder-content .dbb-hero-body.fl-rich-text, .fl-builder-content .dbb-hero-body p { color:var(--gray-40); font-family:var(--sans); font-size:19px; line-height:1.55; max-width:560px; margin:0 0 24px; }
@media (max-width:767px){ .fl-builder-content .dbb-hero-body p .dbb-hero-br { display:none; } }
/* React .dan-hero-cta-area is align-items:flex-start (LEFT) with gap:16px. BB gave the button
   module the fl-button-center class → centered; force it left. margin-bottom needs !important to
   beat the .dbb-sec .fl-module{margin:0} flatten (0,3,0 > this rule's 0,2,0) so the 16px gap to
   the deploy note survives. */
.fl-builder-content .dbb-hero-cta { margin-bottom:16px !important; }
.fl-builder-content .dbb-hero-cta.fl-button-center { text-align:left !important; }
.fl-builder-content .dbb-hero-deploy.fl-rich-text, .fl-builder-content .dbb-hero-deploy p { color:var(--ink); font-family:var(--sans); font-size:13px; font-weight:600; line-height:1.5; margin:0; }
/* image */
.fl-builder-content .dbb-hero-visual .dan-hero-img { width:100%; height:auto; border-radius:12px; box-shadow:var(--shadow-lg); object-fit:contain; }
/* Hero visual column: the reserved portrait slot now holds the final looping artwork
   ("Offers we think your customers will love" - Daniel surfacing a personalized POS offer).
   The slot is 4:5 portrait (matches the 800x1000 clip, no crop) at 400px wide = 500px tall,
   about level with the ~498px copy column. The POSTER paints via background-image so the slot
   looks right instantly and even if JS/video never loads; daniel-scroll.js injects the muted
   autoplay <video> on top. Kept as the same BB HTML module (.dan-hero-ph) so no BB/DB edit. */
.fl-builder-content .dbb-hero-visual .dan-hero-ph {
  position:relative;
  aspect-ratio:4 / 5; width:100%; max-width:400px; margin-inline:auto;
  /* The artwork is a TRANSPARENT PNG-style clip, so the slot has NO card frame/shadow — it floats
     on the dark hero (its own rounded POS screen + Daniel + bubble show; the rest is see-through).
     The static transparent poster paints first (and stays for reduced-motion / no-JS); the animated
     transparent WebP is layered on top by daniel-scroll.js. */
  background:transparent url(images/daniel-hero-poster.webp) center/contain no-repeat;
}
/* the old dashed-placeholder label is hidden now that real artwork fills the slot */
.fl-builder-content .dbb-hero-visual .dan-hero-ph span { display:none !important; }
/* looping transparent hero clip, layered over the poster (no crop). The <img> lives in the BB HTML
   module "Hero animation (swap the image here)" so it can be changed in the editor. */
.fl-builder-content .dbb-hero-visual .dan-hero-media {
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; border:0;
}
/* reduced motion: hide the animated clip and leave the static poster (used to be a JS guard) */
@media (prefers-reduced-motion: reduce){
  .fl-builder-content .dbb-hero-visual .dan-hero-media { display:none; }
}
/* nudge the hero clip slightly left on desktop (2-col hero); stacked mobile stays centred */
@media(min-width:992px){ .fl-builder-content .dbb-hero-visual .dan-hero-ph{ transform:translateX(-36px); } }
@media (max-width:768px){
  .fl-builder-content .dbb-hero-visual { margin-top:28px; }
  .fl-builder-content .dbb-hero-visual .dan-hero-ph { max-width:300px; }
}

@media (max-width:980px){
  .fl-builder-content .dbb-hero .fl-col-group { flex-wrap:wrap; }
  /* both hero columns full-width when stacked (React mobile = single column); without this the
     image column kept a narrow flex-basis (~244px) instead of filling the row. */
  .fl-builder-content .dbb-hero .fl-col { flex:0 0 100% !important; width:100% !important; max-width:100% !important; }
  .fl-builder-content .dbb-hero .fl-col:first-child .fl-col-content,
  .fl-builder-content .dbb-hero .fl-col:last-child .fl-col-content { padding-left:0; padding-right:0; }
  .fl-builder-content .dbb-hero { padding:44px 0 40px; }
}

/* =====================================================================
   LIVE DEMO
   ===================================================================== */
.fl-builder-content .dbb-demo { padding-bottom:16px; }
.fl-builder-content .dbb-demo-title.fl-heading-text { font-family:var(--serif) !important; font-weight:400 !important; font-size:clamp(26px,2.8vw,33px) !important; line-height:1.15 !important; color:var(--navy) !important; margin:0 0 20px; }
.fl-builder-content .dbb-demo-copy.fl-rich-text { font-family:var(--sans); font-size:16px; line-height:1.6; color:var(--gray-40); }
.fl-builder-content .dbb-demo-copy.fl-rich-text p { margin:0 0 16px; }
.fl-builder-content .dbb-demo-copy .it { font-family:var(--serif); font-style:italic; color:var(--pink); }
/* Live-demo header: 2-col grid (heading left / copy right), demo card full-width below — matches React .dan-demo-header-grid (1.05fr/0.95fr, gap 48, single column on mobile). Title/copy/card are 3 stacked modules in one BB column, so grid the column content + place them. */
@media (min-width:768px){
  .fl-builder-content .dbb-demo > .fl-row-content-wrap .fl-col-content { display:grid; grid-template-columns:1.05fr 0.95fr; column-gap:48px; align-items:start; }
  .fl-builder-content .dbb-demo .fl-module.dbb-demo-title { grid-column:1; grid-row:1; }
  .fl-builder-content .dbb-demo .fl-module.dbb-demo-copy { grid-column:2; grid-row:1; }
  .fl-builder-content .dbb-demo .fl-module.dbb-demo-cardmod { grid-column:1 / -1; grid-row:2; margin-top:8px; }
}
/* the demo card (HTML module) — ported .dan-* internals */
.fl-builder-content .dan-demo-card { position:relative; margin-top:24px; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-lg); overflow:hidden; display:grid; grid-template-columns:1.08fr 1fr; }
.fl-builder-content .dan-coming-soon-overlay { position:absolute; inset:0; z-index:10; background:rgba(255,255,255,.65); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); display:flex; align-items:center; justify-content:center; padding:24px; }
.fl-builder-content .dan-coming-soon-placeholder { background:rgba(255,255,255,.9); border:1px dashed var(--line); border-radius:16px; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; max-width:620px; box-shadow:0 12px 32px rgba(11,31,61,.08); }
.fl-builder-content .dan-coming-soon-placeholder .dan-coming-soon-gif { display:block; width:100%; max-width:560px; height:auto; border-radius:12px; }
.fl-builder-content .dan-counter { padding:26px 28px; background:linear-gradient(180deg,#FBFAF8 0%,#fff 100%); border-right:1px solid var(--line); }
.fl-builder-content .dan-daniel { padding:26px 28px; background:#fff; }
.fl-builder-content .dan-row { display:flex; align-items:center; justify-content:space-between; }
.fl-builder-content .dan-chip-mono { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); }
.fl-builder-content .dan-dot { width:6px; height:6px; border-radius:3px; background:var(--green); box-shadow:0 0 7px var(--green); }
.fl-builder-content .dan-dot.pink { background:var(--pink); box-shadow:0 0 8px var(--pink); }
.fl-builder-content .dan-reg { display:inline-flex; align-items:center; gap:8px; }
.fl-builder-content .dan-cust { display:flex; align-items:center; gap:12px; padding:18px 0; margin-top:14px; border-bottom:1px solid var(--line-2); }
.fl-builder-content .dan-avatar { width:52px; height:52px; border-radius:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:19px; background:linear-gradient(135deg,#9E1B46 0%,rgba(158,27,70,.73) 100%); box-shadow:0 6px 16px -6px rgba(14,10,12,.3); }
.fl-builder-content .dan-cust h4 { font-size:17px; font-weight:600; color:var(--ink-2); margin:0; }
.fl-builder-content .dan-cust .meta { font-size:12.5px; color:var(--gray); margin-top:2px; }
.fl-builder-content .dan-cust .tag { margin-left:auto; background:var(--violet-soft); border-radius:7px; padding:4px 9px; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--violet); }
.fl-builder-content .dan-basket-h { display:flex; justify-content:space-between; margin:18px 0 12px; }
.fl-builder-content .dan-basket-h span { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); }
.fl-builder-content .dan-item { display:flex; align-items:center; gap:12px; background:var(--bg-soft); border:1px solid var(--line); border-radius:13px; padding:12px 14px; margin-bottom:8px; }
.fl-builder-content .dan-item .ic { width:30px; height:30px; border-radius:8px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:15px; }
.fl-builder-content .dan-item .nm { font-size:13.5px; font-weight:500; color:var(--ink-2); }
.fl-builder-content .dan-item .sub { font-size:11px; color:var(--gray); }
.fl-builder-content .dan-item .pr { margin-left:auto; font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--gray-4a); }
.fl-builder-content .dan-basket-total { display:flex; justify-content:space-between; align-items:flex-end; padding-top:15px; margin-top:6px; border-top:1px solid var(--line); }
.fl-builder-content .dan-basket-total .lbl { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); }
.fl-builder-content .dan-basket-total .amt { font-size:30px; font-weight:600; color:var(--ink-2); }
.fl-builder-content .dan-basket-total .amt small { font-size:14px; font-weight:500; color:var(--gray); margin-right:4px; }
.fl-builder-content .dan-daniel-head { display:flex; align-items:center; gap:11px; }
.fl-builder-content .dan-daniel-badge { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:16px; background:linear-gradient(135deg,#9E1B46 0%,#7A1536 100%); box-shadow:0 8px 20px -8px rgba(158,27,70,.6); }
.fl-builder-content .dan-daniel-head h4 { font-size:15px; font-weight:600; color:var(--ink-2); margin:0; }
.fl-builder-content .dan-daniel-head .role { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); }
.fl-builder-content .dan-status { margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--green); }
.fl-builder-content .dan-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:20px 0; }
.fl-builder-content .dan-stat { background:var(--bg-soft); border:1px solid var(--line); border-radius:13px; padding:12px 14px; }
.fl-builder-content .dan-stat .k { font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); }
.fl-builder-content .dan-stat .v { font-size:24px; font-weight:600; color:var(--ink-2); margin-top:4px; }
.fl-builder-content .dan-stat .v small { font-size:12px; color:var(--gray); margin-right:3px; }
.fl-builder-content .dan-offer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.fl-builder-content .dan-offer-head .lhs { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--pink); }
.fl-builder-content .dan-offer-head .rhs { font-family:var(--mono); font-size:10px; color:var(--gray); }
.fl-builder-content .dan-offer { display:flex; align-items:center; gap:13px; padding:14px; background:linear-gradient(171deg,#F4E3E6 0%,#fff 100%); border:1px solid var(--pink-soft); border-radius:15px; }
.fl-builder-content .dan-offer .ic { width:48px; height:48px; border-radius:12px; background:#fff; border:1px solid var(--pink-soft); display:flex; align-items:center; justify-content:center; font-size:22px; }
.fl-builder-content .dan-offer .nm { font-size:16px; font-weight:600; color:var(--ink-2); }
.fl-builder-content .dan-offer .mg { font-size:12px; color:var(--gray); }
.fl-builder-content .dan-offer .lift { margin-left:auto; text-align:right; }
.fl-builder-content .dan-offer .lift b { display:block; font-size:18px; font-weight:600; color:var(--green); }
.fl-builder-content .dan-offer .lift span { font-family:var(--mono); font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--gray); }
.fl-builder-content .dan-script { margin-top:12px; background:var(--bg-soft); border:1px solid var(--line); border-radius:13px; padding:14px 15px; }
.fl-builder-content .dan-script .k { font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); }
.fl-builder-content .dan-script .id { font-family:var(--islab); font-style:italic; font-size:14.5px; color:var(--ink-2); margin-top:6px; }
.fl-builder-content .dan-script .en { font-size:11.5px; color:var(--gray); margin-top:4px; }
.fl-builder-content .dan-odds { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.fl-builder-content .dan-odds .box { background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:9px 11px; }
.fl-builder-content .dan-odds .box .k { font-family:var(--mono); font-size:8.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--gray); }
.fl-builder-content .dan-odds .box .v { font-size:15px; font-weight:600; color:var(--green); margin-top:2px; }
.fl-builder-content .dan-odds .box .v.ink { color:var(--ink-2); }
.fl-builder-content .dan-odds .bar { height:4px; border-radius:3px; background:var(--bg-3); margin-top:7px; overflow:hidden; }
.fl-builder-content .dan-odds .bar i { display:block; height:100%; width:92%; border-radius:3px; background:linear-gradient(90deg,#9E1B46 0%,#7A1536 100%); }
.fl-builder-content .dan-offer-actions { display:flex; gap:10px; margin-top:16px; }
.fl-builder-content .dan-offer-actions .pitch { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--pink); color:#fff; border:0; border-radius:999px; padding:14px 22px; font-family:var(--sans); font-weight:500; font-size:15px; cursor:pointer; box-shadow:0 8px 24px -8px rgba(158,27,70,.55); }
.fl-builder-content .dan-offer-actions .dismiss { width:46px; border-radius:999px; background:var(--bg-soft); border:1px solid var(--line-2); color:var(--gray); cursor:pointer; font-size:15px; }
@media (max-width:980px){ .fl-builder-content .dan-demo-card { grid-template-columns:1fr; } .fl-builder-content .dan-counter { border-right:0; border-bottom:1px solid var(--line); } }

/* =====================================================================
   DANIEL IN ACTION / CASE STUDIES
   ===================================================================== */
.fl-builder-content .dbb-cases { padding-top:24px; padding-bottom:32px; } /* background now native BB Row Background (admin-editable) */
/* Daniel in Action background = same Snow Pink as Security & Compliance (override the cream paper layer) */
/* .dbb-cases background now native BB Row Background (admin-editable) — no content-wrap override */
.fl-builder-content .dbb-cases-title.fl-heading-text { font-family:var(--serif) !important; font-weight:400 !important; font-size:clamp(34px,5vw,56px) !important; line-height:1.05 !important; color:var(--navy) !important; margin:0; }
.fl-builder-content .dbb-cases-lede.fl-rich-text { margin-top:18px; font-family:var(--inter); font-size:18px; line-height:1.6; color:var(--navy-66); }
.fl-builder-content .dan-cases { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; margin-top:44px; }
.fl-builder-content .dan-case { background:#fff; border:1px solid var(--navy-08); border-radius:20px; padding:32px 28px; display:flex; flex-direction:column; }
.fl-builder-content .dan-case .eyebrow { font-family:var(--inter); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--navy-66); }
/* story media (gif/image at top of card, ref-styled). Uses the padding-bottom
   ratio technique (not aspect-ratio) so the crop works in every browser. */
.fl-builder-content .dan-case-media { position:relative; width:100%; height:0; padding-bottom:56.25%; /* 16:9 */ margin:14px 0 2px; border-radius:14px; overflow:hidden; background:#f3ece3; }
.fl-builder-content .dan-case-media img,
.fl-builder-content .dan-case-media video { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; }
.fl-builder-content .dan-case h3 { font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.15; color:var(--navy); margin:14px 0 12px; }
.fl-builder-content .dan-case p { font-family:var(--inter); font-size:14px; line-height:1.6; color:var(--navy-66); flex-grow:1; }
.fl-builder-content .dan-case-stats { display:flex; gap:28px; margin-top:22px; padding-top:20px; border-top:1px solid var(--navy-08); }
.fl-builder-content .dan-case-stats .st b { font-family:var(--serif); font-size:36px; font-weight:400; color:var(--navy); }
.fl-builder-content .dan-case-stats .st b.pink { color:var(--pink); }
.fl-builder-content .dan-case-stats .st b small { font-size:21px; color:var(--navy-66); }
.fl-builder-content .dan-case-stats .st span { display:block; margin-top:6px; font-family:var(--inter); font-size:11px; line-height:1.35; letter-spacing:.02em; color:var(--navy-66); }
@media (max-width:980px){ .fl-builder-content .dan-cases { grid-template-columns:1fr; } }

/* =====================================================================
   TESTIMONIAL
   ===================================================================== */
.fl-builder-content .dbb-testi { padding:24px 0 40px; }
.fl-builder-content .dbb-testi-quote.fl-rich-text { font-family:var(--serif) !important; font-style:italic; font-weight:400; font-size:clamp(22px,3.2vw,40px); line-height:clamp(32px,4.2vw,52px); color:var(--navy); max-width:1046px; margin:0 auto; }
.fl-builder-content .dbb-testi-quote .pink { color:var(--pink); }
.fl-builder-content .dbb-testi-author.fl-rich-text { margin-top:28px; }
.fl-builder-content .dbb-testi-author .by { font-family:var(--inter); font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--navy); font-size:18px; }
.fl-builder-content .dbb-testi-author .role { margin-top:6px; font-family:var(--inter); font-size:15px; color:var(--navy-66); }

/* =====================================================================
   SECURITY
   ===================================================================== */
/* matched to the homepage Security layout (dnb-h-sec*): 40/24 padding, dashed chips,
   aws & google logos sized separately (aws 40/52/60, google 56/80/95) */
.fl-builder-content .dbb-security { padding:40px 0 24px; text-align:center; } /* background now native BB Row Background (admin-editable) */
/* match Sasha/Nicole: the paper/cream content-wrap must not cover the pink security bg */
/* .dbb-security background now native BB Row Background (admin-editable) — no content-wrap override */
.fl-builder-content .dbb-sec-title.fl-heading-text { font-family:var(--sans) !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:2px; font-size:clamp(18px,3vw,28px) !important; color:rgba(0,0,0,.5) !important; -webkit-text-fill-color:rgba(0,0,0,.5) !important; margin:0 0 16px !important; }
.fl-builder-content .dbb-sec-copy.fl-rich-text { max-width:896px; margin:0 auto 16px; font-size:clamp(16px,2.2vw,24px); color:rgba(0,0,0,.5); line-height:1.5; }
.fl-builder-content .dbb-sec-copy.fl-rich-text p { margin:0; color:rgba(0,0,0,.5) !important; -webkit-text-fill-color:rgba(0,0,0,.5) !important; }
.fl-builder-content .dan-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin:0 0 24px; }
.fl-builder-content .dan-badge { padding:8px 18px; background:#FBF1F2; border:1px dashed rgba(11,31,61,.2); border-radius:999px; font-family:var(--sans); font-size:16px; font-weight:500; color:#0b1f3d; }
.fl-builder-content .dan-security-logos { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:40px; margin:0; }
@media (min-width:768px){ .fl-builder-content .dan-security-logos { gap:64px; } }
.fl-builder-content .dan-security-logos img[src*="google-cloud"] { height:27px; width:auto; object-fit:contain; }
@media (min-width:640px){ .fl-builder-content .dan-security-logos img[src*="google-cloud"] { height:33px; } }
@media (min-width:768px){ .fl-builder-content .dan-security-logos img[src*="google-cloud"] { height:39px; } }
.fl-builder-content .dan-security-logos img[src*="google-startups"] { height:27px; width:auto; max-width:85vw; object-fit:contain; }
@media (min-width:640px){ .fl-builder-content .dan-security-logos img[src*="google-startups"] { height:33px; max-width:none; } }
@media (min-width:768px){ .fl-builder-content .dan-security-logos img[src*="google-startups"] { height:39px; } }

/* =====================================================================
   SPIN
   ===================================================================== */
.fl-builder-content .dbb-spin { padding:44px 0 52px; overflow:hidden; background:#ffffff; }
.fl-builder-content .dbb-spin-title.fl-heading-text { font-family:var(--serif) !important; font-weight:400 !important; font-size:clamp(34px,5vw,56px) !important; line-height:1.05 !important; color:var(--navy) !important; }
.fl-builder-content .dbb-spin-copy.fl-rich-text { margin-top:20px; margin-bottom:40px; font-family:var(--inter); font-size:18px; line-height:1.6; color:var(--navy-66); }
.fl-builder-content .dbb-spin-copy.fl-rich-text p { margin:0; color:var(--navy-66) !important; -webkit-text-fill-color:var(--navy-66) !important; }
.fl-builder-content .dbb-spin-frame { max-width:1800px; margin:24px auto 0; }
/* React: the iframe wrap is max-width:1800 (WIDER than the 1046px text block) and the game is
   rendered at a native 1760x750 desktop viewport, then scaled to fill. Two WP problems made it
   render tiny (~727px): (a) the .dbb-sec row-content capped the frame at 1180px, and (b) Astra's
   iframe{max-width:100%} clamped the 1760px frame to the box, so the JS scale shrank it further.
   Widen the spin row-content to 1800 (keep the heading/copy at React's 1046), and free the frame
   from the max-width clamp so the 1760px width scales to fill the box edge-to-edge. */
.fl-builder-content .dbb-spin .fl-row-content { max-width:1800px; }
.fl-builder-content .dbb-spin-title.fl-heading-text,
.fl-builder-content .dbb-spin-copy.fl-rich-text { max-width:1046px; margin-left:auto; margin-right:auto; }
.fl-builder-content .dan-sw { width:100%; }
.fl-builder-content .dan-sw-box { width:100%; overflow:hidden; border-radius:20px; border:1px solid rgba(14,10,12,.08); box-shadow:var(--shadow-lg); background:#fff; position:relative; }
.fl-builder-content .dan-sw-frame { max-width:none !important; border:0; display:block; position:absolute; top:0; left:0; transform-origin:top left; }

/* =====================================================================
   FAQ
   ===================================================================== */
.fl-builder-content .dbb-faq { padding:88px 0; }
.fl-builder-content .dbb-faq .fl-row-content { max-width:860px; }
.fl-builder-content .dbb-faq-title.fl-heading-text { font-family:var(--serif) !important; font-weight:400 !important; font-size:clamp(34px,5vw,56px) !important; color:var(--navy) !important; }
.fl-builder-content .dan-faq-list { margin-top:26px; }
.fl-builder-content .dan-faq-item { border-bottom:1px solid var(--orange-88); }
.fl-builder-content .dan-faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; font-family:var(--serif); font-size:clamp(18px,2.4vw,22px); color:var(--navy); }
.fl-builder-content .dan-faq-item summary::-webkit-details-marker { display:none; }
.fl-builder-content .dan-faq-item summary .pm { font-family:var(--serif); font-size:26px; color:var(--pink); transition:transform .3s; flex-shrink:0; }
.fl-builder-content .dan-faq-item[open] summary .pm { transform:rotate(45deg); }
.fl-builder-content .dan-faq-item .ans { padding:0 0 22px; font-family:var(--inter); font-size:16px; line-height:1.6; color:var(--navy-66); max-width:92%; }

/* =====================================================================
   CTA
   ===================================================================== */
/* CTA background: keep #F7DEEA as a fallback on the row, but put the vertical
   padding on the inner wrapper so the Beaver-Builder row background (solid OR
   gradient, editor-controlled) fills the WHOLE section — top, middle and bottom
   as one — instead of leaving fixed-colour strips in the row's padding. */
.fl-builder-content .dbb-cta { background:#F7DEEA; padding:0; overflow:hidden; }
.fl-builder-content .dbb-cta > .fl-row-content-wrap { padding:80px 0 76px; }
.fl-builder-content .dbb-cta .fl-row-content { max-width:880px; }
.fl-builder-content .dbb-cta-title.fl-heading-text { font-family:var(--serif) !important; font-weight:400 !important; font-size:clamp(34px,5vw,56px) !important; line-height:1.05 !important; color:var(--navy) !important; }
.fl-builder-content .dbb-cta-copy.fl-rich-text { margin-top:16px; font-size:17px; line-height:1.55; color:var(--navy); }
/* !important beats the .dbb-sec .fl-module{margin:0} flatten (0,3,0 > this 0,2,0) — .dbb-cta-actions
   is itself the HTML module, so without it the 32px gap to the buttons collapsed to 0. (React
   .dan-cta-actions margin-top:32px.) */
.fl-builder-content .dbb-cta-actions { margin-top:32px !important; }
.fl-builder-content .dbb-cta-links { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.fl-builder-content .dbb-cta-links .dan-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 28px; border-radius:999px; font-family:var(--sans); font-size:15px; font-weight:600; line-height:1; text-decoration:none; white-space:nowrap; transition:transform .3s, box-shadow .3s, background .25s; }
.fl-builder-content .dbb-cta-links .dan-btn .arrow { transition:transform .3s; }
.fl-builder-content .dbb-cta-links .dan-btn:hover .arrow { transform:translateX(3px); }
.fl-builder-content .dbb-cta-links .dan-btn-pink { background:var(--pink); color:#fff; box-shadow:0 8px 24px -8px rgba(158,27,70,.55); }
.fl-builder-content .dbb-cta-links .dan-btn-pink:hover { transform:translateY(-1px); box-shadow:0 14px 36px -10px rgba(158,27,70,.7); }
.fl-builder-content .dbb-cta-links .dan-btn-ghost { background:transparent; color:var(--navy); border:2px solid var(--navy-20); }
.fl-builder-content .dbb-cta-links .dan-btn-ghost:hover { border-color:var(--navy); }

/* ── Daniel CTA buttons converted from a raw HTML module to NATIVE Beaver Builder Button modules:
   colours, text, and link are now editable in the BB Button settings. Layout (centered row),
   font, and hover motion stay here to match the previous .dan-btn look exactly. ── */
/* the column is a flex COLUMN; keep heading+copy on their own full-width rows and let the 3 button
   modules flow together in a centered row (matching the old .dbb-cta-links flex row, gap 14px). */
.fl-builder-content .dbb-cta-col > .fl-col-content { flex-direction:row !important; flex-wrap:wrap; justify-content:center; align-content:flex-start; column-gap:14px; row-gap:14px; }
.fl-builder-content .dbb-cta-col > .fl-col-content > .fl-module:not(.dbb-ctabtn) { flex:0 0 100%; }
.fl-builder-content .dbb-cta-col .fl-module.dbb-ctabtn { flex:0 0 auto; width:auto !important; margin:18px 0 0 !important; }
.fl-builder-content .dbb-ctabtn .fl-button-wrap { display:inline-block; width:auto; }
.fl-builder-content .dbb-ctabtn .fl-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-size:15px; font-weight:600; line-height:1; white-space:nowrap; transition:transform .3s, box-shadow .3s, background .25s, border-color .25s; }
.fl-builder-content .dbb-ctabtn-pink .fl-button:hover { transform:translateY(-1px); box-shadow:0 14px 36px -10px rgba(158,27,70,.7) !important; }
.fl-builder-content .dbb-ctabtn-ghost .fl-button:hover { border-color:var(--navy) !important; }

/* heading gradient-text reset (Astra) */
.fl-builder-content .dbb-sec h1, .fl-builder-content .dbb-sec h2, .fl-builder-content .dbb-sec h3 { background:none !important; -webkit-text-fill-color:currentColor !important; }

/* ── EDITOR-FRIENDLY SECTION BACKGROUNDS ──────────────────────────────────────
   Section vertical padding lives on the inner wrapper (.fl-row-content-wrap),
   NOT on the row, so a Beaver Builder Row Background (solid OR gradient) set from
   the editor fills the WHOLE section — top, middle and bottom — instead of
   leaving fixed-colour strips in the row's padding. The per-section values
   reproduce the exact original spacing (our old row padding + BB's default 20px
   wrapper padding). .dbb-cta is handled by its own rule above. */
.fl-builder-content .dbb-sec { padding-top:0; padding-bottom:0; }
.fl-builder-content .dbb-hero > .fl-row-content-wrap     { padding-top:48px;  padding-bottom:60px; }
.fl-builder-content .dbb-demo > .fl-row-content-wrap     { padding-top:40px;  padding-bottom:16px; }
.fl-builder-content .dbb-cases > .fl-row-content-wrap    { padding-top:44px;  padding-bottom:52px; }
.fl-builder-content .dbb-security > .fl-row-content-wrap { padding-top:60px;  padding-bottom:44px; }
.fl-builder-content .dbb-spin > .fl-row-content-wrap     { padding-top:64px;  padding-bottom:72px; }
.fl-builder-content .dbb-faq > .fl-row-content-wrap      { padding-top:44px; padding-bottom:44px; }

/* ===== HERO — dark space/earth background (Artboard 7) + light text (readable on dark) ===== */
/* background image + overlay now set natively via the row's Beaver Builder Background settings (admin-editable) —
   BB renders that background directly on .fl-row-content-wrap, so it must NOT be forced transparent anymore. */
.fl-builder-content .dbb-hero-title .l1{ color:#fff!important; -webkit-text-fill-color:#fff!important; }
.fl-builder-content .dbb-hero-title .l2{ color:#FF7BA6!important; -webkit-text-fill-color:#FF7BA6!important; }
.fl-builder-content .dbb-hero-title .l3{ color:rgba(255,255,255,.82)!important; -webkit-text-fill-color:rgba(255,255,255,.82)!important; }
/* body + deploy text color now set natively on each module's Beaver Builder Style > Text Color field (admin-editable) */
.fl-builder-content .dbb-hero-badges .lbl{ color:rgba(255,255,255,.72)!important; }
@media (max-width:639px){
  .fl-builder-content .dan-security-logos { flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; }
  .fl-builder-content .dan-security-logos img { height:clamp(18px,5.5vw,26px) !important; width:auto !important; max-width:none !important; }
}