/*
 * Sasha page — NATIVE Beaver Builder layout styling (stock modules).
 * Same technique as daniel-bb.css: scoped to .fl-builder-content; section = BB row
 * (sab-* class); editable copy = Heading/Rich-Text/Button modules; visuals = HTML
 * modules using the .sa-* classes from the React Sasha design.
 * BB puts module classes on the SAME element as .fl-heading-text/.fl-rich-text →
 * target them COMPOUND (.sab-x.fl-heading-text). Values from src/app/sasha/sasha-page.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');

/* ===== tokens ===== */
.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:#E96618; --pink-deep:#B84E10; --pink-soft:#FDECE0;
  --gray:#8A7F82; --gray-40:#666666; --gray-4a:#4A3F42; --green:#25C26B;
  --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-md:0 6px 16px -6px rgba(14,10,12,.14);
  --shadow-lg:0 30px 60px -20px rgba(14,10,12,.30),0 8px 24px -12px rgba(14,10,12,.18);
}
.fl-builder-content .sab-sec *, .fl-builder-content .sab-sec *::before, .fl-builder-content .sab-sec *::after { box-sizing:border-box; }
.fl-builder-content .sab-sec img { display:block; max-width:100%; }
.fl-builder-content .sab-center { text-align:center; }
.fl-builder-content .sab-it { font-style:italic; color:var(--pink) !important; -webkit-text-fill-color:var(--pink) !important; }

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

/* ===== buttons ===== */
.fl-builder-content .sab-btn-outline .fl-button { display:inline-flex; align-items:center; justify-content:center; height:60px; padding:0 32px !important; border-radius:999px !important; border:2px solid #E96618 !important; background:#E96618 !important; font-family:var(--sans) !important; font-size:15px !important; font-weight:600 !important; text-decoration:none !important; box-shadow:0 8px 24px -8px rgba(233,102,24,.55) !important; }
.fl-builder-content .sab-btn-outline .fl-button:hover { background:#EE8515 !important; border-color:#EE8515 !important; }
.fl-builder-content .sab-btn-outline .fl-button,
.fl-builder-content .sab-btn-outline .fl-button .fl-button-text { color:#fff !important; -webkit-text-fill-color:#fff !important; }
/* CTA html-module anchors */
.fl-builder-content .sab-cta-links { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.fl-builder-content .sab-cta-links .sa-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 .sab-cta-links .sa-btn .arrow { transition:transform .3s; }
.fl-builder-content .sab-cta-links .sa-btn:hover .arrow { transform:translateX(3px); }
.fl-builder-content .sab-cta-links .sa-btn-pink { background:var(--pink); color:#fff; box-shadow:0 8px 24px -8px rgba(233,102,24,.55); }
.fl-builder-content .sab-cta-links .sa-btn-ghost { background:transparent; color:var(--navy); border:2px solid var(--navy-20); }
.fl-builder-content .sab-cta-links .sa-btn-ghost:hover { border-color:var(--navy); }

/* Sasha CTA buttons converted to NATIVE Beaver Builder Button modules (colours/text/link editable in BB).
   Layout + font + hover kept here to match the old .sa-btn row exactly. */
.fl-builder-content .sab-cta-col > .fl-col-content { display:flex; flex-direction:row !important; flex-wrap:wrap; justify-content:center; align-content:flex-start; column-gap:14px; row-gap:14px; }
.fl-builder-content .sab-cta-col > .fl-col-content > .fl-module:not(.sab-ctabtn) { flex:0 0 100%; }
.fl-builder-content .sab-cta-col .fl-module.sab-ctabtn { flex:0 0 auto; width:auto !important; margin:18px 0 0 !important; }
.fl-builder-content .sab-ctabtn .fl-button-wrap { display:inline-block; width:auto; }
.fl-builder-content .sab-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 .sab-ctabtn-pink .fl-button:hover { transform:translateY(-1px); box-shadow:0 14px 36px -10px rgba(233,102,24,.7) !important; }
.fl-builder-content .sab-ctabtn-ghost .fl-button:hover { border-color:var(--navy) !important; }

/* ===== HERO (2-col) ===== */
/* padding-top reduced 140px→48px: 140px reserved room for React's FIXED navbar, but WP's Astra
   header is in-flow so it stacked on top → big top gap. Matches the Daniel hero fix. */
.fl-builder-content .sab-hero { padding:48px 0 60px; position:relative; overflow:hidden; }
.fl-builder-content .sab-hero .fl-col-group { display:flex; align-items:center; flex-wrap:nowrap; }
/* hero image removed (per request): hide the image column, text spans the row */
.fl-builder-content .sab-hero .fl-col:has(.sab-hero-visual) { display:none !important; }
.fl-builder-content .sab-hero .fl-col:not(:has(.sab-hero-visual)) { flex:1 1 100% !important; max-width:100% !important; width:100% !important; }
.fl-builder-content .sab-hero .fl-col:not(:has(.sab-hero-visual)) .fl-col-content { padding-right:0 !important; }
.fl-builder-content .sab-hero .fl-col:first-child .fl-col-content { padding-right:16px; }
.fl-builder-content .sab-hero .fl-col:last-child .fl-col-content { padding-left:28px; }
.fl-builder-content .sab-hero-badges { margin-bottom:24px; }
.fl-builder-content .sab-hero-badges .row { display:flex; align-items:center; gap:12px; }
.fl-builder-content .sab-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 .sab-hero-badges .lbl { color:var(--gray-40); font-family:var(--sans); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1.92px; }
.fl-builder-content .sab-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 .sab-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 .sab-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; }
/* Desktop: keep "Flawless image editing." on a single line + nudge the hero image down a touch */
@media (min-width:981px){
  .fl-builder-content .sab-hero-title .l1 { white-space:nowrap; }
  .fl-builder-content .sab-hero-visual .sa-hero-img { margin-top:34px; }
}
.fl-builder-content .sab-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; }
.fl-builder-content .sab-hero-body.fl-rich-text, .fl-builder-content .sab-hero-body p { color:var(--gray-40); font-family:var(--sans); font-size:19px; line-height:1.55; max-width:532px; margin:0 0 24px; }
/* React .sa-hero-cta-area is column / align-items:flex-start / gap:16px (button LEFT, note 16px below).
   BB gave the button module fl-button-center → force left; margin needs !important to beat the flatten. */
.fl-builder-content .sab-hero-cta { margin-bottom:16px !important; }
.fl-builder-content .sab-hero-cta.fl-button-center { text-align:left !important; }
.fl-builder-content .sab-hero-deploy.fl-rich-text, .fl-builder-content .sab-hero-deploy p { color:var(--ink); font-family:var(--sans); font-size:13px; font-weight:600; line-height:1.5; margin:0; }
.fl-builder-content .sab-hero-visual .sa-hero-img { width:100%; height:auto; border-radius:12px; box-shadow:var(--shadow-lg); object-fit:contain; }
@media (max-width:980px){ .fl-builder-content .sab-hero .fl-col-group { flex-wrap:wrap; } .fl-builder-content .sab-hero .fl-col:first-child .fl-col-content, .fl-builder-content .sab-hero .fl-col:last-child .fl-col-content { padding-left:0; padding-right:0; } .fl-builder-content .sab-hero { padding:44px 0 40px; } }

/* ===== centered section heads (features / action) ===== */
.fl-builder-content .sab-h2.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 .sab-lede.fl-rich-text { margin-top:18px; font-family:var(--inter); font-size:18px; line-height:1.6; color:var(--navy-66); }

/* ===== coming-soon placeholder (HTML modules) ===== */
.fl-builder-content .sa-coming-soon-placeholder { margin-top:48px; background:rgba(255,255,255,.6); border:1px dashed var(--line); border-radius:16px; padding:64px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.fl-builder-content .sa-coming-soon-placeholder .icon { font-size:32px; margin-bottom:16px; }
.fl-builder-content .sa-coming-soon-placeholder h3 { font-family:var(--sans); font-size:24px; font-weight:600; color:var(--ink); margin:0 0 8px; }
.fl-builder-content .sa-coming-soon-placeholder p { font-family:var(--inter); font-size:16px; color:var(--navy-66); margin:0; max-width:400px; }

/* ===== 2-col feature rows (approval / image search) ===== */
.fl-builder-content .sab-row .fl-col-group { display:flex; align-items:center; flex-wrap:nowrap; }
.fl-builder-content .sab-row .fl-col:first-child .fl-col-content { padding-right:28px; }
.fl-builder-content .sab-row .fl-col:last-child .fl-col-content { padding-left:28px; }
.fl-builder-content .sab-row-h3.fl-heading-text { font-family:var(--serif) !important; font-weight:400 !important; font-size:clamp(30px,4vw,48px) !important; line-height:1.05 !important; color:var(--ink) !important; margin:0; }
.fl-builder-content .sab-row-intro.fl-rich-text { margin-top:18px; font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.5; color:var(--gray-40); }
.fl-builder-content .sab-row-feat.fl-rich-text ul { margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.fl-builder-content .sab-row-feat.fl-rich-text li { list-style:none; font-size:16px; line-height:1.55; color:var(--gray-40); }
.fl-builder-content .sab-row-feat.fl-rich-text li b { color:var(--ink); font-weight:600; }
@media (max-width:980px){ .fl-builder-content .sab-row .fl-col-group { flex-wrap:wrap; } .fl-builder-content .sab-row .fl-col .fl-col-content { padding-left:0 !important; padding-right:0 !important; } }

/* ===== case study (Sasha in Action) ===== */
.fl-builder-content .sab-action { padding-bottom:24px; }
.fl-builder-content .sa-case-wrap { display:grid; grid-template-columns:1fr; gap:20px; margin-top:44px; max-width:488px; margin-inline:auto; }
.fl-builder-content .sa-case { background:#fff; border:1px solid var(--navy-08); border-radius:20px; padding:32px 28px; }
.fl-builder-content .sa-case .eyebrow { font-family:var(--inter); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--navy-66); }
.fl-builder-content .sa-case-img { width:100%; border-radius:12px; margin:16px 0 20px; border:1px solid var(--navy-08); object-fit:cover; }
.fl-builder-content .sa-case h3 { font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.15; color:var(--navy); margin:0 0 12px; }
.fl-builder-content .sa-case p { font-family:var(--inter); font-size:14px; line-height:1.6; color:var(--navy-66); }
.fl-builder-content .sa-case-stats { display:flex; gap:40px; margin-top:22px; padding-top:20px; border-top:1px solid var(--navy-08); }
.fl-builder-content .sa-case-stats .st b { font-family:var(--serif); font-size:36px; font-weight:400; color:var(--navy); }
.fl-builder-content .sa-case-stats .st b.pink { color:var(--pink); }
.fl-builder-content .sa-case-stats .st b small { font-size:21px; color:var(--navy-66); }
.fl-builder-content .sa-case-stats .st span { display:block; margin-top:6px; font-family:var(--inter); font-size:11px; line-height:1.35; color:var(--navy-66); }

/* ===== testimonial ===== */
.fl-builder-content .sab-testi { padding:64px 0; }
.fl-builder-content .sab-testi-quote.fl-rich-text { max-width:1046px; margin:0 auto; font-family:var(--serif) !important; font-style:italic; font-weight:400; font-size:clamp(24px,3.4vw,40px); line-height:1.3; color:var(--navy); }
.fl-builder-content .sab-testi-quote .pink { color:var(--pink); }
.fl-builder-content .sab-testi-author.fl-rich-text { margin-top:28px; }
.fl-builder-content .sab-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 .sab-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 .sab-security { padding:40px 0 24px; text-align:center; } /* background now native BB Row Background (admin-editable) */
.fl-builder-content .sab-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 .sab-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 .sab-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 .sa-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin:0 0 24px; }
.fl-builder-content .sa-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 .sa-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 .sa-security-logos { gap:64px; } }
.fl-builder-content .sa-security-logos img[src*="google-cloud"] { height:27px; width:auto; object-fit:contain; }
@media (min-width:640px){ .fl-builder-content .sa-security-logos img[src*="google-cloud"] { height:33px; } }
@media (min-width:768px){ .fl-builder-content .sa-security-logos img[src*="google-cloud"] { height:39px; } }
.fl-builder-content .sa-security-logos img[src*="google-startups"] { height:27px; width:auto; max-width:85vw; object-fit:contain; }
@media (min-width:640px){ .fl-builder-content .sa-security-logos img[src*="google-startups"] { height:33px; max-width:none; } }
@media (min-width:768px){ .fl-builder-content .sa-security-logos img[src*="google-startups"] { height:39px; } }

/* ===== spin ===== */
.fl-builder-content .sab-spin { padding:44px 0 52px; overflow:hidden; background:#ffffff; }
.fl-builder-content .sab-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 .sab-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 .sab-spin-copy.fl-rich-text p { margin:0; color:var(--navy-66) !important; -webkit-text-fill-color:var(--navy-66) !important; }
.fl-builder-content .sab-spin-frame { max-width:1800px; margin:24px auto 0; }
/* Match the Daniel WP spinner exactly: the iframe wrap widens to 1800px (wider than the 1046px text
   block) and the game is rendered at a fixed 1760×750 then scaled to fit by sasha-page.js. */
.fl-builder-content .sab-spin .fl-row-content { max-width:1800px; }
.fl-builder-content .sab-spin-title.fl-heading-text,
.fl-builder-content .sab-spin-copy.fl-rich-text { max-width:1046px; margin-left:auto; margin-right:auto; }
.fl-builder-content .sa-sw { width:100%; }
.fl-builder-content .sa-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; }
/* max-width:none !important is the critical fix — Astra's global iframe{max-width:100%} was clamping
   the JS-set 1760px back to container width, so transform:scale() shrank the wheel to a tiny size. */
.fl-builder-content .sa-sw-frame { max-width:none !important; border:0; display:block; position:absolute; top:0; left:0; transform-origin:top left; }

/* ===== faq ===== */
.fl-builder-content .sab-faq { padding:88px 0; }
.fl-builder-content .sab-faq .fl-row-content { max-width:860px; }
.fl-builder-content .sab-faq-title.fl-heading-text { font-family:var(--serif) !important; font-weight:400 !important; font-size:clamp(34px,5vw,56px) !important; color:var(--ink) !important; }
.fl-builder-content .sa-faq-list { margin-top:26px; }
.fl-builder-content .sa-faq-item { border-bottom:1px solid var(--orange-88); }
.fl-builder-content .sa-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 .sa-faq-item summary::-webkit-details-marker { display:none; }
.fl-builder-content .sa-faq-item summary .pm { font-family:var(--serif); font-size:26px; color:var(--pink); transition:transform .3s; flex-shrink:0; }
.fl-builder-content .sa-faq-item[open] summary .pm { transform:rotate(45deg); }
.fl-builder-content .sa-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 ===== */
.fl-builder-content .sab-cta { background:#FBE6D4; padding:80px 0 96px; overflow:hidden; }
.fl-builder-content .sab-cta .fl-row-content { max-width:880px; }
.fl-builder-content .sab-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 .sab-cta-copy.fl-rich-text { margin-top:16px; font-size:17px; line-height:1.55; color:var(--navy); }
/* !important beats the .sab-sec .fl-module{margin:0} flatten (line ~33) which was collapsing the
   para→buttons gap to 0; React's .sa-cta-actions is margin-top:32px. Same fix as the Daniel CTA. */
.fl-builder-content .sab-cta-actions { margin-top:32px !important; }

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

/* ── EDITOR-FRIENDLY SECTION BACKGROUNDS: section vertical padding lives on the
   inner wrapper (not the row) so a Beaver Builder editor Row Background fills the
   WHOLE section. Values reproduce the exact original spacing. (See daniel-bb.css) ── */
.fl-builder-content .sab-sec { padding-top:0; padding-bottom:0; }
.fl-builder-content .sab-sec > .fl-row-content-wrap      { padding-top:108px; padding-bottom:108px; }
.fl-builder-content .sab-hero > .fl-row-content-wrap     { padding-top:68px;  padding-bottom:80px; }
.fl-builder-content .sab-action > .fl-row-content-wrap   { padding-top:108px; padding-bottom:44px; }
.fl-builder-content .sab-testi > .fl-row-content-wrap    { padding-top:84px;  padding-bottom:84px; }
.fl-builder-content .sab-security > .fl-row-content-wrap { padding-top:60px;  padding-bottom:44px; }
.fl-builder-content .sab-spin > .fl-row-content-wrap     { padding-top:64px;  padding-bottom:72px; }
.fl-builder-content .sab-cta > .fl-row-content-wrap      { padding-top:100px; padding-bottom:116px; }

/* ===== 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 .sab-hero-title .l1{ color:#fff!important; -webkit-text-fill-color:#fff!important; }
.fl-builder-content .sab-hero-title .l2{ color:#FF9A45!important; -webkit-text-fill-color:#FF9A45!important; }
.fl-builder-content .sab-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 .sab-hero-badges .lbl{ color:rgba(255,255,255,.72)!important; }
@media (max-width:639px){
  .fl-builder-content .sa-security-logos { flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; }
  .fl-builder-content .sa-security-logos img { height:clamp(18px,5.5vw,26px) !important; width:auto !important; max-width:none !important; }
}