/* ================= NICOLE PAGE (native Beaver Builder layout) =================
   Scoped to body.nicole-page .fl-builder-content. Stock BB modules carry .nic-* classes
   (BB stacks the class on the same element as .fl-heading-text / .fl-rich-text). LOCAL only. */
body.nicole-page{
  --nserif:"Fraunces",serif; --nsans:"Geist",sans-serif;
  --ink:#0e0a0c; --navy:#0B1F3D; --pink:#2B5AC7; --gray:#5b5560; --gray40:#6b6570;
  --cream:#FEFBF5; --paper:#F5EEDD; --line:rgba(11,31,61,.12); --navy66:rgba(11,31,61,.66);
}
body.nicole-page .fl-builder-content{ background:var(--cream); overflow-x:clip; }
/* full-bleed rows + neutralise Astra heading gradients */
body.nicole-page .fl-builder-content .nic-sec{ width:100%!important; max-width:100%!important; }
body.nicole-page .fl-builder-content .nic-sec .fl-row-content-wrap{ padding:0!important; background:transparent!important; }
body.nicole-page .fl-builder-content .nic-sec .fl-row-content{ max-width:1200px; margin:0 auto; padding:0 24px; }
body.nicole-page .fl-builder-content .nic-sec .fl-col-content{ padding:0!important; }
body.nicole-page .fl-builder-content .nic-sec h1,
body.nicole-page .fl-builder-content .nic-sec h2,
body.nicole-page .fl-builder-content .nic-sec h3,
body.nicole-page .fl-builder-content .nic-sec h4{ -webkit-text-fill-color:currentColor; }
body.nicole-page .fl-builder-content .nic-sec .nic-it{ font-style:italic!important; color:#2B5AC7!important; -webkit-text-fill-color:#2B5AC7!important; }
body.nicole-page .fl-builder-content .nic-center{ text-align:center; }

/* section rhythm */
body.nicole-page .nic-sec{ padding:72px 0; }
@media(min-width:768px){ body.nicole-page .nic-sec{ padding:96px 0; } }
body.nicole-page .nic-security{ background:#FBF1F2; }

/* ---- N badge (gradient circle) ---- */
.nic-n{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#7C3AED,#2563EB); color:#fff; font-family:var(--nserif); font-weight:700; font-size:22px; box-shadow:0 8px 20px -6px rgba(37,99,235,.5); flex:0 0 auto; }
.nic-n-sm{ width:26px; height:26px; font-size:14px; }
.nic-n-lg{ width:56px; height:56px; font-size:28px; }

/* ============ 1 HERO ============ */
body.nicole-page .nic-hero{ padding:32px 0 40px; }
body.nicole-page .fl-builder-content .nic-hero-badges{ margin-bottom:22px; margin-left:0!important; } /* kill a stray 20px left margin so the badge aligns with the heading (like Daniel/Sasha) */
body.nicole-page .nic-hero-badges .row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
body.nicole-page .nic-hero-badges .pill{ background:var(--pink); color:#fff; font-family:var(--nsans); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.3px; padding:5px 13px; border-radius:999px; line-height:1.2; }
body.nicole-page .nic-hero-badges .lbl{ color:var(--gray40); font-family:var(--nsans); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1.9px; }
body.nicole-page .fl-builder-content .nic-hero-title{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; font-family:var(--nserif)!important; font-weight:400!important; margin:0 0 16px; line-height:1.04; max-width:820px; }
body.nicole-page .fl-builder-content .nic-hero-title .l1{ color:var(--ink)!important; -webkit-text-fill-color:var(--ink)!important; font-size:clamp(36px,5vw,66px); }
body.nicole-page .fl-builder-content .nic-hero-title .l2{ color:var(--pink)!important; -webkit-text-fill-color:var(--pink)!important; font-style:italic; font-size:clamp(36px,5vw,66px); }
body.nicole-page .fl-builder-content .nic-hero-title .l3{ color:var(--gray)!important; -webkit-text-fill-color:var(--gray)!important; font-size:clamp(28px,3.6vw,44px); }
/* each hero line stays on ONE line on desktop (matches the design); wraps only on small screens */
@media(min-width:901px){
  body.nicole-page .fl-builder-content .nic-hero-title .l1,
  body.nicole-page .fl-builder-content .nic-hero-title .l2,
  body.nicole-page .fl-builder-content .nic-hero-title .l3{ white-space:nowrap; }
}
body.nicole-page .fl-builder-content .nic-hero-body,
body.nicole-page .fl-builder-content .nic-hero-body p{ color:var(--gray); font-family:var(--nsans); font-size:19px; line-height:1.55; max-width:540px; margin:0 0 12px; }
body.nicole-page .fl-builder-content .nic-hero-cta{ margin:14px 0 16px!important; text-align:left!important; }
body.nicole-page .fl-builder-content .nic-hero-cta a,
body.nicole-page .fl-builder-content .nic-hero-cta .fl-button{ display:inline-flex!important; align-items:center; justify-content:center; height:56px; padding:0 30px!important; border-radius:999px!important; border:2px solid #2B5AC7!important; background:#2B5AC7!important; font-family:var(--nsans)!important; font-size:16px!important; font-weight:600!important; text-decoration:none; box-shadow:0 8px 24px -8px rgba(43,90,199,.55)!important; transition:background .2s,color .2s,box-shadow .2s; }
body.nicole-page .fl-builder-content .nic-hero-cta a:hover,
body.nicole-page .fl-builder-content .nic-hero-cta .fl-button:hover{ background:#94C5FD!important; border-color:#94C5FD!important; }
body.nicole-page .fl-builder-content .nic-hero-cta a,
body.nicole-page .fl-builder-content .nic-hero-cta .fl-button,
body.nicole-page .fl-builder-content .nic-hero-cta .fl-button-text{ color:#fff!important; -webkit-text-fill-color:#fff!important; }
body.nicole-page .fl-builder-content .nic-hero-deploy,
body.nicole-page .fl-builder-content .nic-hero-deploy p{ color:var(--ink); font-family:var(--nsans); font-size:13px; font-weight:600; margin:0; }
body.nicole-page .nic-hero-img{ width:100%; height:auto; border-radius:16px; display:block; object-fit:contain; }

/* ============ 2 SEE HOW NICOLE WORKS ============ */
body.nicole-page .fl-builder-content .nic-works-title{ font-family:var(--nserif)!important; font-weight:400!important; font-size:clamp(34px,5vw,56px)!important; color:var(--ink)!important; -webkit-text-fill-color:var(--ink)!important; margin:0; line-height:1.05; }
/* sticky-scroll "how it works" — 5 opaque cards each position:sticky at the same top; later cards
   (further down the DOM) scroll up and cover earlier ones → one-at-a-time reveal on scroll, and it
   reverses for free on scroll-up. Pure CSS, no JS. Ancestors must NOT be overflow:hidden. */
body.nicole-page .nic-works .fl-row-content,
body.nicole-page .nic-works .fl-col-content{ overflow:visible!important; }
.nic-hiw{ position:relative; margin-top:44px; }
/* top:128px = 72px sticky nav + ~56px breathing room, so the stuck cards sit clearly below the
   header (was 96px = too tight against the nav). */
.nic-hiw-card{ position:sticky; top:128px; display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:stretch; background:#EFE7DA; border:1px solid rgba(11,31,61,.06); border-radius:28px; padding:44px; min-height:460px; margin-bottom:32px; box-shadow:0 40px 80px -50px rgba(11,31,61,.45); }
@media(max-width:860px){ .nic-hiw-card{ grid-template-columns:1fr; gap:20px; min-height:auto; padding:26px; top:100px; } }
.nic-hiw-text{ display:flex; flex-direction:column; justify-content:center; }
.nic-hiw-num{ display:inline-flex; align-self:flex-start; background:rgba(11,31,61,.07); color:var(--navy); font-family:var(--nsans); font-size:13px; font-weight:700; letter-spacing:1px; padding:6px 14px; border-radius:999px; margin-bottom:22px; }
.nic-hiw-text h3{ font-family:var(--nserif); font-weight:400; font-size:clamp(25px,2.8vw,38px); line-height:1.1; color:var(--navy); margin:0 0 16px; }
.nic-hiw-text p{ font-family:var(--nsans); font-size:16px; line-height:1.62; color:var(--navy66); margin:0; max-width:440px; }
.nic-hiw-visual{ display:flex; align-items:center; justify-content:center; border-radius:20px; background:linear-gradient(135deg,#3b2f2a 0%,#5a4a41 60%,#7a6353 100%); min-height:300px; position:relative; overflow:hidden; }
.nic-hiw-soon{ font-family:var(--nsans); font-size:12.5px; font-weight:600; letter-spacing:.6px; color:rgba(255,255,255,.72); background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); padding:9px 18px; border-radius:999px; }

/* ============ 3 BLIND SPOTS ============ */
/* Section 3 is one full-width module now (.nic-s3 owns its own 2-col grid). */
body.nicole-page .nic-blind .fl-col-group{ display:block; }
body.nicole-page .nic-blind .fl-col{ width:100%!important; float:none!important; clear:none!important; }
/* audio clip cards */
/* tighten the self-correction cluster (works -> blind -> clips -> usecases) to cut excess white space */
body.nicole-page .nic-works{ padding-bottom:36px; }
body.nicole-page .nic-blind{ padding-top:40px; padding-bottom:48px; }
body.nicole-page .nic-clips{ padding-top:8px; padding-bottom:40px; }
body.nicole-page .nic-usecases{ padding-top:40px; padding-bottom:36px; }
body.nicole-page .nic-secfeat{ padding-top:40px; }
@media(min-width:768px){
  body.nicole-page .nic-works{ padding-bottom:48px; }
  body.nicole-page .nic-blind{ padding-top:56px; padding-bottom:64px; }
  body.nicole-page .nic-clips{ padding-bottom:56px; }
  body.nicole-page .nic-usecases{ padding-top:56px; padding-bottom:48px; }
  body.nicole-page .nic-secfeat{ padding-top:56px; }
}
/* ================= Section 3: text-left + Before/After orb panel-right =================
   Whole section is ONE self-contained HTML module (.nic-s3) with its own 2-col grid,
   so it does NOT depend on Beaver Builder column widths (which force-stack "small" cols). */
.nic-s3{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media(max-width:900px){ .nic-s3{ grid-template-columns:1fr; gap:32px; } }
.nic-s3-left{ min-width:0; }
body.nicole-page .fl-builder-content .nic-s3-title{ font-family:var(--nserif)!important; font-weight:400!important; font-size:clamp(30px,3.4vw,46px)!important; color:var(--ink)!important; -webkit-text-fill-color:var(--ink)!important; margin:0; line-height:1.1; }
.nic-s3-intro{ border:1px solid var(--line); border-radius:16px; padding:24px 26px; margin:22px 0 0; }
.nic-s3-intro p{ color:var(--navy66); font-family:var(--nsans); font-size:16px; line-height:1.65; margin:0 0 14px; }
.nic-s3-intro p:last-child{ margin-bottom:0; }
.nic-s3-right{ display:flex; justify-content:center; min-width:0; }
/* Interactive Before/After Coaching panel (bundle) — text left, panel right; the iframe
   auto-sizes to content (incl. before/after resize) via JS, and its bundle bg is stripped. */
/* Reference layout: big heading (4-line wrap) left, wide interactive panel right.
   Section widened to 1320 so the panel gets ~700px+ and the bundle renders its LANDSCAPE
   layout (orb + suggestion card side-by-side, filling the width — no right-side gap). */
body.nicole-page .fl-row-content:has(.nic-s3){ max-width:1300px !important; }
.nic-s3.nic-s3--split{ grid-template-columns:0.74fr 1fr; gap:40px; align-items:start; }
.nic-ba-frame{ width:100%; min-height:480px; border:0; display:block; background:transparent; }
/* remove the box around the intro copy */
.nic-s3--split .nic-s3-intro{ border:0 !important; padding:0 !important; margin-top:22px; }
/* nudge the panel up so it aligns with the heading (desktop only) */
@media(min-width:901px){ .nic-s3--split .nic-s3-right{ margin-top:-60px; } }
/* ---- mobile: stack cleanly, panel fills width, nothing overflows ---- */
@media(max-width:900px){
  .nic-s3.nic-s3--split{ grid-template-columns:1fr; gap:24px; }
  .nic-s3--split .nic-s3-right{ margin-top:0; width:100%; overflow:hidden; }
  .nic-ba-frame{ min-height:600px; }
}
@media(max-width:900px){ body.nicole-page .fl-builder-content .nic-s3-title{ text-align:center; } .nic-s3-intro{ text-align:center; } }

/* Right-hand PANEL (one card holding the Before/After tabs + orb + player) */
.nic-orb-wrap{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.nic-orb-panel{ width:100%; max-width:440px; background:linear-gradient(180deg,#FCFAF4,#F5EEDF); border:1px solid rgba(11,31,61,.08); border-radius:30px; padding:30px 28px 32px; box-shadow:0 30px 60px -34px rgba(11,31,61,.4); }

/* Before / After segmented toggle */
.nic-orb-wrap .nic-ba{ position:relative; display:inline-flex; padding:4px; background:#EAE7F0; border-radius:999px; box-shadow:inset 0 1px 2px rgba(11,31,61,.08); }
body.nicole-page .fl-builder-content .nic-orb-wrap .nic-ba-btn{ position:relative; z-index:2; appearance:none; -webkit-appearance:none; border:0!important; background:transparent!important; box-shadow:none!important; border-radius:999px!important; cursor:pointer; font-family:var(--nsans); font-weight:600; font-size:14px; color:var(--gray); padding:8px 26px; line-height:1; transition:color .25s; }
.nic-orb-wrap .nic-ba-btn.is-on{ color:var(--navy); }
.nic-orb-wrap .nic-ba-ind{ position:absolute; z-index:1; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); background:#fff; border-radius:999px; box-shadow:0 1px 1px rgba(0,0,0,.06),0 3px 8px -2px rgba(11,31,61,.22); transition:transform .32s cubic-bezier(.4,.9,.3,1); }
.nic-orb-wrap[data-state="after"] .nic-ba-ind{ transform:translateX(100%); }

/* Orb: wave ring (behind) + gradient rim + circular portrait */
.nic-orb{ position:relative; width:280px; max-width:74vw; aspect-ratio:1; margin:6px 0; }
.nic-orb-ring{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.nic-orb .nb{ transform-box:fill-box; transform-origin:center bottom; }
.nic-orb-wrap.is-playing .nic-orb .nb{ animation:nic-eq 1.05s ease-in-out infinite alternate; animation-delay:var(--d); }
@keyframes nic-eq{ from{ transform:scaleY(.6); } to{ transform:scaleY(1.35); } }
.nic-orb-rim{ position:absolute; inset:21%; border-radius:50%; padding:3px; background:linear-gradient(155deg,#37d0a6 0%,#31b0d8 45%,#3b82f6 100%); box-shadow:0 20px 44px -20px rgba(11,31,61,.5); z-index:2; }
.nic-orb-photo{ width:100%; height:100%; border-radius:50%; overflow:hidden; background:#dfe6f0; }
.nic-orb-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
/* Before/After changes ONLY the caption words — the orb/ring stays identical. */

/* Player: play button + waveform */
.nic-player{ display:flex; align-items:center; gap:16px; width:100%; }
body.nicole-page .fl-builder-content .nic-play{ flex:0 0 auto; appearance:none; -webkit-appearance:none; border:0!important; padding:0!important; min-width:0!important; min-height:0!important; box-shadow:0 10px 22px -8px rgba(56,158,220,.75)!important; width:56px!important; height:56px!important; border-radius:50%!important; background:radial-gradient(120% 120% at 30% 25%,#8fd8f5,#3aa9e0)!important; color:#0B1F3D!important; display:inline-flex!important; align-items:center; justify-content:center; cursor:pointer; line-height:1!important; transition:filter .2s,transform .1s; }
.nic-play:hover{ filter:brightness(1.06)!important; }
.nic-play:active{ transform:scale(.95); }
.nic-play svg{ width:23px; height:23px; margin-left:2px; }
.nic-play .ic-pause{ display:none; margin-left:0; }
.nic-orb-wrap.is-playing .nic-play .ic-play{ display:none; }
.nic-orb-wrap.is-playing .nic-play .ic-pause{ display:block; }
.nic-wave{ flex:1; display:flex; align-items:center; gap:2px; height:38px; }
.nic-wave span{ flex:1; height:var(--h); min-height:3px; background:var(--c); border-radius:3px; transform:scaleY(.55); transform-origin:center; transition:transform .2s; }
.nic-orb-wrap.is-playing .nic-wave span{ animation:nic-wv .8s ease-in-out infinite alternate; animation-delay:var(--d); }
@keyframes nic-wv{ from{ transform:scaleY(.35); } to{ transform:scaleY(1); } }

/* Caption swaps with the Before/After state */
.nic-orb-cap{ margin:2px 0 0; text-align:center; font-family:var(--nsans); font-size:15px; color:var(--navy66); line-height:1.4; }
.nic-orb-cap .nic-cap{ display:none; }
.nic-orb-wrap[data-state="before"] .nic-cap-before{ display:block; }
.nic-orb-wrap[data-state="after"] .nic-cap-after{ display:block; }
@media(max-width:480px){ .nic-orb{ width:236px; } .nic-orb-panel{ padding:24px 20px 26px; } }
@media (prefers-reduced-motion: reduce){
  .nic-orb-wrap.is-playing .nic-orb .nb,
  .nic-orb-wrap.is-playing .nic-wave span{ animation:none; }
}
/* use-case cards */
body.nicole-page .fl-builder-content .nic-uc-title{ font-family:var(--nserif)!important; font-weight:400!important; font-size:clamp(28px,3.4vw,44px)!important; color:var(--ink)!important; -webkit-text-fill-color:var(--ink)!important; margin:0 0 14px; line-height:1.12; text-align:center; }
body.nicole-page .fl-builder-content .nic-uc-lead,
body.nicole-page .fl-builder-content .nic-uc-lead p{ max-width:760px; margin:0 auto 16px; text-align:center; color:var(--navy66); font-family:var(--nsans); font-size:17px; line-height:1.6; }
/* From Counter to Field cards = homepage "Experience your AI teammate" behaviour, JS-DRIVEN
   (grid-template-columns + .is-active, in assets/nicole-page.js) so the last-hovered card
   STAYS revealed until the section scrolls out of view, then resets to the first card.
   One card is wide + revealed (light overlay + white panel); the other three are narrow
   strips with a flat dark shadow + a title label. No Play button. */
.nic-uc-grid{ display:grid; grid-template-columns:6fr 1fr 1fr 1fr; gap:22px; align-items:stretch; transition:grid-template-columns .55s cubic-bezier(.4,0,.2,1); }

body.nicole-page .fl-builder-content .nic-uc{
  position:relative; overflow:hidden; min-width:0;
  height:540px; margin:0; padding:0; border:0; border-radius:15px;
  background:var(--navy); box-shadow:0 16px 30px -20px rgba(11,31,61,.55); cursor:pointer;
}
/* full-bleed image */
body.nicole-page .fl-builder-content .nic-uc-media{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border-radius:0; overflow:hidden; background:var(--navy); }
body.nicole-page .fl-builder-content .nic-uc-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* REVEALED card (active, or first card before JS): show the ENTIRE 16:9 image — no left/right crop.
   contain + top-anchored so the full frame sits above the info panel (which floats at the bottom). */
body.nicole-page .fl-builder-content .nic-uc.is-active .nic-uc-media img,
body.nicole-page .fl-builder-content .nic-uc-grid:not(.nl-js) .nic-uc:first-child .nic-uc-media img{ object-fit:contain; object-position:center top; }

/* overlay: flat dark = shadow (inactive); light gradient when active */
body.nicole-page .fl-builder-content .nic-uc::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(6,17,38,.6) 0%, rgba(6,17,38,.6) 100%);
  transition:background .5s ease;
}
body.nicole-page .fl-builder-content .nic-uc.is-active::after{
  background:linear-gradient(0deg, rgba(6,17,38,.8) 0%, rgba(6,17,38,.18) 46%, rgba(6,17,38,0) 72%);
}

/* title label (narrow/inactive cards) */
body.nicole-page .fl-builder-content .nic-uc-name{ position:absolute; left:10px; right:10px; bottom:22px; z-index:3; display:flex; justify-content:center; text-align:center; transition:opacity .3s ease; }
body.nicole-page .fl-builder-content .nic-uc-name span{ display:inline-block; max-width:100%; background:var(--pink); color:#fff!important; -webkit-text-fill-color:#fff!important; font-family:var(--nserif); font-weight:400; font-size:14px; line-height:1.22; padding:8px 14px; border-radius:12px; box-shadow:0 12px 24px -10px rgba(43,90,199,.7); }
body.nicole-page .fl-builder-content .nic-uc.is-active .nic-uc-name{ opacity:0; }

/* reveal panel (active card) */
body.nicole-page .fl-builder-content .nic-uc-info{
  position:absolute; left:22px; right:22px; bottom:22px; z-index:4;
  background:#fff; border-radius:18px; padding:22px 22px 18px; box-shadow:0 18px 38px -14px rgba(11,31,61,.45);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
body.nicole-page .fl-builder-content .nic-uc.is-active .nic-uc-info{ opacity:1; visibility:visible; transition:opacity .3s ease .2s, visibility .3s ease .2s; }
body.nicole-page .fl-builder-content .nic-uc-info h4{ font-family:var(--nserif); font-weight:400; font-size:20px; color:var(--navy)!important; -webkit-text-fill-color:var(--navy)!important; margin:0 0 8px; line-height:1.2; }
body.nicole-page .fl-builder-content .nic-uc-info p{ font-family:var(--nsans); font-size:14px; line-height:1.55; color:var(--navy66); margin:0; }
body.nicole-page .fl-builder-content .nic-uc-info .tags{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(11,31,61,.10); font-family:var(--nsans); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--pink); }

/* pre-JS fallback: first card featured/revealed until nicole-page.js adds .nl-js */
body.nicole-page .fl-builder-content .nic-uc-grid:not(.nl-js) .nic-uc:first-child::after{ background:linear-gradient(0deg, rgba(6,17,38,.8) 0%, rgba(6,17,38,.18) 46%, rgba(6,17,38,0) 72%); }
body.nicole-page .fl-builder-content .nic-uc-grid:not(.nl-js) .nic-uc:first-child .nic-uc-name{ opacity:0; }
body.nicole-page .fl-builder-content .nic-uc-grid:not(.nl-js) .nic-uc:first-child .nic-uc-info{ opacity:1; visibility:visible; }

/* MOBILE: the desktop reveal-card (absolute info panel over a fixed-height image) breaks on
   phones — the info panel is taller than the card and overflows. Rebuild as a clean STACKED
   card: full 16:9 image on top, then the title/desc/tags below in normal flow. */
@media(max-width:900px){
  .nic-uc-grid{ grid-template-columns:1fr !important; gap:22px !important; }
  body.nicole-page .fl-builder-content .nic-uc{ height:auto !important; aspect-ratio:auto !important; display:block !important; overflow:hidden; background:#fff !important; border-radius:16px; box-shadow:0 14px 34px -20px rgba(11,31,61,.45); }
  /* image -> in-flow, full-width 16:9 (matches the source, no crop) */
  body.nicole-page .fl-builder-content .nic-uc-media{ position:relative !important; inset:auto !important; width:100% !important; height:auto !important; aspect-ratio:16/9; }
  body.nicole-page .fl-builder-content .nic-uc-media img{ position:relative !important; inset:auto !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; }
  body.nicole-page .fl-builder-content .nic-uc::after{ display:none !important; }   /* no overlay in stacked mode */
  body.nicole-page .fl-builder-content .nic-uc-name{ display:none !important; }     /* the info below already shows the title */
  /* info -> in-flow white block below the image */
  body.nicole-page .fl-builder-content .nic-uc-info{ position:relative !important; inset:auto !important; left:auto !important; right:auto !important; bottom:auto !important; top:auto !important; opacity:1 !important; visibility:visible !important; background:#fff !important; box-shadow:none !important; border-radius:0 !important; margin:0 !important; padding:18px 20px 22px !important; }
}

/* ============ 4 ENTERPRISE-GRADE SECURITY ============ */
body.nicole-page .fl-builder-content .nic-secfeat-title{ font-family:var(--nserif)!important; font-weight:400!important; font-size:clamp(32px,4.4vw,52px)!important; color:var(--navy)!important; -webkit-text-fill-color:var(--navy)!important; margin:0 0 16px; line-height:1.05; }
body.nicole-page .fl-builder-content .nic-secfeat-copy,
body.nicole-page .fl-builder-content .nic-secfeat-copy p{ color:var(--navy66); font-family:var(--nsans); font-size:16px; line-height:1.6; max-width:680px; margin:0 auto 36px; }
.nic-sf-wrap{ position:relative; max-width:900px; margin:0 auto; padding-left:0; }
.nic-sf-wrap>.nic-n-lg{ display:none !important; }
.nic-sf-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.nic-sf{ flex:0 1 calc((100% - 32px)/3); background:var(--paper); border-radius:14px; padding:22px 20px; }
@media(max-width:900px){ .nic-sf{ flex-basis:calc((100% - 16px)/2); } }
@media(max-width:560px){ .nic-sf{ flex-basis:100%; } }
.nic-sf h4{ font-family:var(--nsans); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:var(--pink); margin:0 0 10px; }
.nic-sf p{ font-family:var(--nsans); font-size:13px; line-height:1.55; color:var(--navy66); margin:0; }

/* ---- ENTERPRISE-GRADE SECURITY = timeline redesign (.nic-es*) ----
   Left column: heading + copy + animated shield. Right column: a connected vertical
   timeline of 5 nodes; each card shows only its title until hovered, then reveals the
   description. Whole section lives in ONE html module (nicac985c4ba); the old separate
   title (nica29351353) + copy (nic91c1592c0) modules are hidden — content moved inside. */
body.nicole-page .fl-builder-content .nic-secfeat .fl-node-nica29351353,
body.nicole-page .fl-builder-content .nic-secfeat .fl-node-nic91c1592c0 { display:none !important; }

body.nicole-page .fl-builder-content .nic-es{
  display:grid; grid-template-columns:0.92fr 1.08fr; gap:60px; align-items:start;
  max-width:1160px; margin:0 auto; text-align:left;
}
@media(max-width:900px){ body.nicole-page .fl-builder-content .nic-es{ grid-template-columns:1fr; gap:32px; } }

/* left */
body.nicole-page .fl-builder-content .nic-es-title{
  font-family:var(--nserif); font-weight:400; font-size:clamp(26px,3vw,38px); line-height:1.08;
  color:var(--ink)!important; -webkit-text-fill-color:var(--ink)!important; margin:0 0 20px;
}
body.nicole-page .fl-builder-content .nic-es-title .nic-it{ color:var(--pink)!important; -webkit-text-fill-color:var(--pink)!important; font-style:italic; }
body.nicole-page .fl-builder-content .nic-es-copy{
  font-family:var(--nsans); font-size:17px; line-height:1.62; color:var(--navy66); margin:0 0 30px; max-width:460px;
}
body.nicole-page .fl-builder-content .nic-es-shield{ margin:0; display:flex; justify-content:center; }
body.nicole-page .fl-builder-content .nic-es-shield img{ width:100%; max-width:230px; height:auto; display:block; margin:0 auto; }

/* right — connected timeline (nudged down so the first node sits opposite the title's
   2nd line, and the whole rail finishes level with the shrunken shield on the left). */
body.nicole-page .fl-builder-content .nic-es-rail{ display:flex; flex-direction:column; margin-top:52px; }
@media(max-width:900px){ body.nicole-page .fl-builder-content .nic-es-rail{ margin-top:0; } }
body.nicole-page .fl-builder-content .nic-es-item{
  position:relative; display:flex; align-items:flex-start; gap:18px; padding-bottom:18px;
}
body.nicole-page .fl-builder-content .nic-es-item:last-child{ padding-bottom:0; }
/* continuous connector line through the node centres (node = 60px → centre x = 30px);
   each item fills its own (variable) height, so it stays connected when a card expands. */
body.nicole-page .fl-builder-content .nic-es-item::before{
  content:""; position:absolute; left:30px; transform:translateX(-50%); width:2px;
  background:#a9bbe4; z-index:0; top:0; bottom:0;
}
body.nicole-page .fl-builder-content .nic-es-item:first-child::before{ top:30px; }
body.nicole-page .fl-builder-content .nic-es-item:last-child::before{ bottom:auto; height:30px; }
/* node */
body.nicole-page .fl-builder-content .nic-es-node{ position:relative; z-index:1; flex:0 0 60px; width:60px; height:60px; }
body.nicole-page .fl-builder-content .nic-es-node img{ width:100%; height:100%; object-fit:contain; display:block; }
/* card */
body.nicole-page .fl-builder-content .nic-es-card{
  flex:1 1 auto; min-width:0; background:#fff; border:1px solid rgba(11,31,61,.10); border-radius:14px;
  padding:15px 20px; box-shadow:0 6px 18px -12px rgba(11,31,61,.28);
  transition:border-color .25s ease, box-shadow .25s ease;
}
body.nicole-page .fl-builder-content .nic-es-card h4{
  font-family:var(--nsans); font-weight:700; font-size:16px; line-height:1.3;
  color:var(--pink)!important; -webkit-text-fill-color:var(--pink)!important; margin:0;
}
body.nicole-page .fl-builder-content .nic-es-card p{
  font-family:var(--nsans); font-size:14px; line-height:1.55; color:var(--navy); margin:0;
}
/* collapsed by default; reveal on hover (pointer devices). Touch shows all descriptions. */
@media (hover:hover){
  body.nicole-page .fl-builder-content .nic-es-card p{
    max-height:0; opacity:0; margin-top:0; overflow:hidden;
    transition:max-height .35s ease, opacity .3s ease, margin-top .3s ease;
  }
  body.nicole-page .fl-builder-content .nic-es-item:hover .nic-es-card{
    border-color:#8aa6e6; box-shadow:0 14px 32px -14px rgba(43,90,199,.45);
  }
  body.nicole-page .fl-builder-content .nic-es-item:hover .nic-es-card p{
    max-height:240px; opacity:1; margin-top:10px;
  }
}
@media (hover:none){
  body.nicole-page .fl-builder-content .nic-es-card p{ margin-top:10px; }
}

/* ============ 5 SECURITY & COMPLIANCE ============ */
/* matched to the homepage Security layout (dnb-h-sec*): dashed chips, aws & google logos sized separately */
body.nicole-page .nic-security{ text-align:center; padding:40px 0 24px; }
/* Flatten BB's default 20px module margin here (these class-less HTML modules lack
   .fl-module-content, so BB adds margin:20px, spreading the section out). Matches
   Daniel/Sasha's `.dbb-sec .fl-module{margin:0}`; inner margins then control spacing. */
body.nicole-page .nic-security .fl-module{ margin:0; }
body.nicole-page .fl-builder-content .nic-sec-title{ font-family:var(--nsans)!important; font-weight:600!important; font-size:clamp(18px,3vw,28px)!important; letter-spacing:2px; text-transform:uppercase; color:rgba(0,0,0,.5)!important; -webkit-text-fill-color:rgba(0,0,0,.5)!important; margin:0 0 16px; }
body.nicole-page .fl-builder-content .nic-sec-copy,
body.nicole-page .fl-builder-content .nic-sec-copy p{ color:rgba(0,0,0,.5); font-family:var(--nsans); font-size:clamp(16px,2.2vw,24px); line-height:1.5; max-width:896px; margin:0 auto 16px; }
body.nicole-page .nic-badges{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin:0 0 24px; }
body.nicole-page .nic-badge{ border:1px dashed rgba(11,31,61,.2); border-radius:999px; padding:8px 18px; font-family:var(--nsans); font-size:16px; font-weight:500; color:#0b1f3d; background:#FBF1F2; }
body.nicole-page .nic-security-logos{ display:flex; flex-direction:row; flex-wrap:wrap; gap:40px; align-items:center; justify-content:center; margin:0; }
@media (min-width:768px){ body.nicole-page .nic-security-logos{ gap:64px; } }
body.nicole-page .nic-security-logos img[src*="google-cloud"]{ height:27px; width:auto; object-fit:contain; }
@media (min-width:640px){ body.nicole-page .nic-security-logos img[src*="google-cloud"]{ height:33px; } }
@media (min-width:768px){ body.nicole-page .nic-security-logos img[src*="google-cloud"]{ height:39px; } }
body.nicole-page .nic-security-logos img[src*="google-startups"]{ height:27px; width:auto; max-width:85vw; object-fit:contain; }
@media (min-width:640px){ body.nicole-page .nic-security-logos img[src*="google-startups"]{ height:33px; max-width:none; } }
@media (min-width:768px){ body.nicole-page .nic-security-logos img[src*="google-startups"]{ height:39px; } }

/* ============ 6 NICOLE IN ACTION ============ */
body.nicole-page .fl-builder-content .nic-h2{ font-family:var(--nserif)!important; font-weight:400!important; font-size:clamp(34px,5vw,56px)!important; color:var(--navy)!important; -webkit-text-fill-color:var(--navy)!important; margin:0 0 14px; }
body.nicole-page .fl-builder-content .nic-lede,
body.nicole-page .fl-builder-content .nic-lede p{ color:var(--navy66); font-family:var(--nsans); font-size:17px; line-height:1.6; max-width:640px; margin:0 auto 36px; }
.nic-case-wrap{ display:flex; justify-content:center; }
.nic-case{ width:100%; max-width:420px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px; box-shadow:0 30px 70px -40px rgba(11,31,61,.35); }
.nic-case .eyebrow{ font-family:var(--nsans); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:var(--gray40); }
.nic-case-img{ width:100%; height:auto; border-radius:14px; margin:12px 0 18px; display:block; }
.nic-case h3{ font-family:var(--nserif); font-weight:400; font-size:22px; line-height:1.2; color:var(--navy); margin:0 0 12px; }
.nic-case>p{ font-family:var(--nsans); font-size:13.5px; line-height:1.55; color:var(--navy66); margin:0 0 20px; }
.nic-case-stats{ display:flex; gap:32px; border-top:1px solid var(--line); padding-top:18px; }
.nic-case-stats .st b{ display:block; font-family:var(--nserif); font-weight:400; font-size:36px; line-height:1; color:var(--navy); }
.nic-case-stats .st b.pink{ color:var(--pink); }
.nic-case-stats .st b small{ font-size:20px; }
.nic-case-stats .st span{ display:block; font-family:var(--nsans); font-size:12px; color:var(--navy66); margin-top:6px; }

/* ============ 7 FAQ (native <details> accordion) ============ */
body.nicole-page .nic-faq{ padding:88px 0; }
body.nicole-page .fl-builder-content .nic-sec.nic-faq .fl-row-content{ max-width:860px; } /* match Daniel/Sasha FAQ width (beats the 1200px .nic-sec default) */
body.nicole-page .fl-builder-content .nic-faq-title{ font-family:var(--nserif)!important; font-weight:400!important; font-size:clamp(34px,5vw,56px)!important; color:var(--ink)!important; -webkit-text-fill-color:var(--ink)!important; margin:0; }
.nic-faq-list{ margin-top:26px; }
.nic-faq-item{ border-bottom:1px solid rgba(11,31,61,.12); }
.nic-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(--nserif); font-size:clamp(18px,2.4vw,22px); color:var(--navy); }
.nic-faq-item summary::-webkit-details-marker{ display:none; }
.nic-faq-item summary .pm{ font-family:var(--nserif); font-size:26px; color:var(--pink); transition:transform .3s; flex-shrink:0; }
.nic-faq-item[open] summary .pm{ transform:rotate(45deg); }
.nic-faq-item .ans{ padding:0 0 22px; font-family:var(--nsans); font-size:16px; line-height:1.6; color:var(--navy66); max-width:94%; }

/* ============ 8 SPIN — exact Daniel/Sasha spinner (.sa-sw frame + nicole-page.js sizing) ============ */
body.nicole-page .nic-spin{ padding:44px 0 56px; overflow:hidden; background:#ffffff; }
body.nicole-page .fl-builder-content .nic-spin-title{ font-family:var(--nserif)!important; font-weight:400!important; font-size:clamp(34px,5vw,56px)!important; line-height:1.05!important; color:var(--navy)!important; -webkit-text-fill-color:var(--navy)!important; max-width:1046px; margin:0 auto; }
body.nicole-page .fl-builder-content .nic-spin-copy,
body.nicole-page .fl-builder-content .nic-spin-copy p{ margin:20px auto 0; max-width:1046px; font-family:var(--nsans); font-size:18px; line-height:1.6; color:var(--navy66); }
body.nicole-page .fl-builder-content .nic-sec.nic-spin .fl-row-content{ max-width:1800px; } /* match Sasha's spin width (beats the 1200px .nic-sec default) so the wheel iframe scales to the same size */
/* un-flex the spin column — otherwise .nic-spin-frame (a flex item whose iframe is absolutely
   positioned = no intrinsic width) collapses to ~2px and the JS falls back to the mobile size. */
body.nicole-page .nic-spin .fl-col-content{ display:block!important; }
body.nicole-page .nic-spin-frame{ width:100%; max-width:1800px; margin:40px auto 0; }
body.nicole-page .fl-builder-content .sa-sw{ width:100%; }
body.nicole-page .fl-builder-content .sa-sw-box{ width:100%; overflow:hidden; border-radius:20px; border:1px solid rgba(14,10,12,.08); box-shadow:0 30px 70px -40px rgba(11,31,61,.35); background:#fff; position:relative; }
body.nicole-page .fl-builder-content .sa-sw-frame{ max-width:none!important; border:0; display:block; position:absolute; top:0; left:0; transform-origin:top left; }

/* ============ 9 CTA — Ready to Optimize ============ */
body.nicole-page .nic-cta{ background:#E3EDFB; padding:80px 0 96px; overflow:hidden; }
body.nicole-page .nic-cta .fl-row-content{ max-width:880px; }
body.nicole-page .fl-builder-content .nic-cta-title{ font-family:var(--nserif)!important; font-weight:400!important; font-size:clamp(34px,5vw,56px)!important; line-height:1.05!important; color:var(--navy)!important; -webkit-text-fill-color:var(--navy)!important; margin:0; }
body.nicole-page .fl-builder-content .nic-cta-copy,
body.nicole-page .fl-builder-content .nic-cta-copy p{ margin:16px auto 0; max-width:680px; font-family:var(--nsans); font-size:17px; line-height:1.55; color:var(--navy); }
body.nicole-page .fl-builder-content .nic-cta-actions{ margin-top:32px!important; }
.nic-cta-links{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.nic-cta-links .nic-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 28px; border-radius:999px; font-family:var(--nsans); font-size:15px; font-weight:600; line-height:1; text-decoration:none; white-space:nowrap; transition:transform .3s,box-shadow .3s,background .25s; }
.nic-cta-links .nic-btn .arrow{ transition:transform .3s; }
.nic-cta-links .nic-btn:hover .arrow{ transform:translateX(3px); }
.nic-cta-links .nic-btn-pink{ background:var(--pink); color:#fff; box-shadow:0 8px 24px -8px rgba(43,90,199,.55); }
.nic-cta-links .nic-btn-pink:hover{ transform:scale(1.02); }
.nic-cta-links .nic-btn-ghost{ background:transparent; color:var(--navy); border:2px solid rgba(11,31,61,.2); }
.nic-cta-links .nic-btn-ghost:hover{ border-color:var(--navy); }

/* ── EDITOR-FRIENDLY SECTION BACKGROUNDS: padding on inner wrapper, not the row,
   so a BB editor Row Background fills the whole section (see daniel-bb.css).
   Nicole forces wrapper padding to 0 !important, so these match that specificity. ── */
body.nicole-page .fl-builder-content .nic-sec { padding-top:0 !important; padding-bottom:0 !important; }
body.nicole-page .fl-builder-content .nic-hero > .fl-row-content-wrap     { padding-top:32px !important; padding-bottom:40px !important; }
body.nicole-page .fl-builder-content .nic-works > .fl-row-content-wrap    { padding-top:96px !important; padding-bottom:48px !important; }
body.nicole-page .fl-builder-content .nic-blind > .fl-row-content-wrap    { padding-top:56px !important; padding-bottom:64px !important; }
body.nicole-page .fl-builder-content .nic-usecases > .fl-row-content-wrap { padding-top:56px !important; padding-bottom:48px !important; }
body.nicole-page .fl-builder-content .nic-secfeat > .fl-row-content-wrap  { padding-top:56px !important; padding-bottom:40px !important; }
body.nicole-page .fl-builder-content .nic-security > .fl-row-content-wrap { padding-top:28px !important; padding-bottom:24px !important; }
body.nicole-page .fl-builder-content .nic-action > .fl-row-content-wrap   { padding-top:44px !important; padding-bottom:44px !important; }
body.nicole-page .fl-builder-content .nic-spin > .fl-row-content-wrap     { padding-top:32px !important; padding-bottom:40px !important; }
body.nicole-page .fl-builder-content .nic-faq > .fl-row-content-wrap      { padding-top:40px !important; padding-bottom:44px !important; }
body.nicole-page .fl-builder-content .nic-cta > .fl-row-content-wrap      { padding-top:44px !important; padding-bottom:96px !important; }
/* "Nicole in Action" — tighten the gap between the subtitle and the case card */
body.nicole-page .fl-builder-content .nic-action .nic-lede { margin-bottom:18px !important; }
body.nicole-page .fl-builder-content .nic-action .fl-node-nic5a780a49f { margin-top:0 !important; }

/* "See how Nicole Works" (2nd section) → white background */
body.nicole-page .fl-builder-content .nic-works { background:#ffffff; }
/* "From Counter to Field" (4th section) → white background + tighter lead↔cards gap
   (the cards module carries BB's default 20px top margin; zero it so the gap is just
   the lead's 16px bottom margin instead of 54px). */
body.nicole-page .fl-builder-content .nic-usecases { background:#ffffff; }
body.nicole-page .fl-builder-content .nic-usecases .fl-node-nic387bd0da5 { margin-top:0 !important; }

/* ===== Tap feedback (mobile) — kill the grey/blue tap-highlight flash on every element,
   and stop tapping a click target (FAQ toggle, cards, buttons, spin filters…) from
   selecting its text (that was the blue "selected" box on the FAQ question). Body copy
   and the FAQ answers stay selectable — only the interactive targets are locked. ===== */
body.nicole-page,
body.nicole-page .fl-builder-content,
body.nicole-page .fl-builder-content * { -webkit-tap-highlight-color: rgba(0,0,0,0); }
body.nicole-page .fl-builder-content summary,
body.nicole-page .fl-builder-content .nic-faq-item summary,
body.nicole-page .fl-builder-content .nic-faq-item .pm,
body.nicole-page .fl-builder-content .nic-uc,
body.nicole-page .fl-builder-content .nic-uc-name,
body.nicole-page .fl-builder-content .nic-es-item,
body.nicole-page .fl-builder-content .nic-ba-btn,
body.nicole-page .fl-builder-content .nic-play,
body.nicole-page .fl-builder-content .nic-btn,
body.nicole-page .fl-builder-content .fl-button,
body.nicole-page .fl-builder-content button,
body.nicole-page .fl-builder-content [role="button"] {
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
body.nicole-page .fl-builder-content summary { cursor:pointer; }

/* ===== HERO — dark space/earth background (Artboard 7) + light text (readable on dark) ===== */
body.nicole-page .fl-builder-content .nic-hero{ background:linear-gradient(90deg, rgba(4,8,22,.84) 0%, rgba(4,8,22,.52) 46%, rgba(4,8,22,.2) 100%), url(images/hero-nicole.webp) center/cover no-repeat !important; }
body.nicole-page .fl-builder-content .nic-hero > .fl-row-content-wrap{ background:transparent !important; }
body.nicole-page .fl-builder-content .nic-hero-title .l1{ color:#fff!important; -webkit-text-fill-color:#fff!important; }
body.nicole-page .fl-builder-content .nic-hero-title .l2{ color:#8FBEFF!important; -webkit-text-fill-color:#8FBEFF!important; }
body.nicole-page .fl-builder-content .nic-hero-title .l3{ color:rgba(255,255,255,.82)!important; -webkit-text-fill-color:rgba(255,255,255,.82)!important; }
body.nicole-page .fl-builder-content .nic-hero-body, body.nicole-page .fl-builder-content .nic-hero-body p{ color:rgba(255,255,255,.86)!important; }
body.nicole-page .fl-builder-content .nic-hero-deploy, body.nicole-page .fl-builder-content .nic-hero-deploy p{ color:rgba(255,255,255,.8)!important; }
body.nicole-page .nic-hero-badges .lbl{ color:rgba(255,255,255,.72)!important; }