/**
 * Anomalo Analyst page CSS — loaded ONLY on page 7139 via filters.php (filemtime versioned).
 * Figma light mode. Scoped to body.page-id-7139. Added 2026-06-12.
 */


/* ==========================================================================
 * ANOMALO ANALYST PAGE — page-id-7139 scoped (added 2026-06-12)
 * Figma light mode. orange #CC573E | grad #CF634A→#FF6E4D | ink #0C0621
 * All selectors prefixed body.page-id-7139 — affects ONLY this page.
 * ========================================================================== */
body.page-id-7139 .a-grad{
  background:linear-gradient(90deg,#CF634A 0%,#FF6E4D 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---------- HERO ---------- */
body.page-id-7139 .analyst-hero .content-component{text-align:center;}
body.page-id-7139 .analyst-hero .component-wrapper{justify-content:center;}
body.page-id-7139 .analyst-lockup{font-size:46px;line-height:1;letter-spacing:-1.1px;font-weight:700;color:#0C0621;margin:0 0 8px;}
body.page-id-7139 .analyst-lockup .lk-analyst{color:#CC573E;font-weight:400;margin-left:3px;}
body.page-id-7139 .analyst-h1{font-size:64px;line-height:1.15;font-weight:700;color:#0C0621;letter-spacing:-1px;max-width:1028px;margin:0 auto 24px;}
body.page-id-7139 .analyst-hero-copy{font-size:24px;line-height:1.25;font-weight:400;color:#0C0621;max-width:818px;margin:0 auto 28px;}
body.page-id-7139 .analyst-hero-btns{display:flex;gap:24px;justify-content:center;margin:0;flex-wrap:wrap;}

/* ---------- BUTTONS (max specificity + longhand to beat theme link rules) ---------- */
body.page-id-7139 .content-component .analyst-hero-btns a.a-btn,
body.page-id-7139 .content-component .analyst-hero-btns a.a-btn:link,
body.page-id-7139 .content-component .analyst-hero-btns a.a-btn:visited{
  display:inline-flex;align-items:center;justify-content:center;
  background-color:#CC573E !important;background-image:none !important;
  color:#ffffff !important;-webkit-text-fill-color:#ffffff !important;
  font-weight:700;font-size:18px;line-height:1;
  padding:15px 26px;border-radius:8px;min-width:179px;
  text-decoration:none !important;transition:background-color .2s ease;
}
body.page-id-7139 .content-component .analyst-hero-btns a.a-btn:hover{background-color:#B84A32 !important;color:#ffffff !important;}
body.page-id-7139 .content-component .analyst-hero-btns a.a-btn::after{display:none !important;content:none !important;}

/* ---------- SECTION HEADINGS + BODY ---------- */
body.page-id-7139 .a-h2{font-size:32px;line-height:1.15;font-weight:700;color:#0C0621;letter-spacing:-.4px;margin:0 0 24px;}
body.page-id-7139 .a-h2.a-big{font-size:64px;letter-spacing:-1px;line-height:1.15;}
body.page-id-7139 .a-h2.a-center{text-align:center;max-width:1028px;margin-left:auto;margin-right:auto;}
body.page-id-7139 .a-body{font-size:18px;line-height:1.55;font-weight:400;color:#0C0621;max-width:491px;}

/* ---------- FEATURE: text (col-6) + gallery 3-stack (col-6) + dots ---------- */
body.page-id-7139 .analyst-feature{position:relative;overflow:hidden;}
body.page-id-7139 .analyst-feature .component-wrapper{align-items:center !important;}
body.page-id-7139 .analyst-feature .content-component{padding-right:60px;}
body.page-id-7139 .analyst-feature .gallery-component{display:flex !important;flex-direction:column !important;gap:18px !important;height:auto !important;justify-content:flex-start !important;}
body.page-id-7139 .analyst-feature .gallery-component .single-gallery-image{flex:0 0 auto !important;width:100% !important;height:215px !important;border-radius:8px;overflow:hidden;margin:0 !important;}
body.page-id-7139 .analyst-feature .gallery-component .single-gallery-image img{display:block;width:100% !important;height:100% !important;object-fit:cover;border-radius:8px;}
/* decorative dot pattern (left) */
body.page-id-7139 .analyst-feature::before{
  content:"";position:absolute;top:50%;left:-40px;transform:translateY(-50%);
  width:520px;height:600px;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(#CC573E 1.6px, transparent 1.7px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(120deg, #000 30%, transparent 72%);
  mask-image:linear-gradient(120deg, #000 30%, transparent 72%);
}
body.page-id-7139 .analyst-feature .content-container{position:relative;z-index:1;}

/* ---------- STEPS: heading + 3 cards (col-4) ---------- */
body.page-id-7139 .analyst-steps .a-h2{text-align:center;margin-bottom:56px;}
body.page-id-7139 .cards-component .single-card{
  border:2px solid #D2D0D7;border-radius:8px;padding:22px;
  background:linear-gradient(131deg,rgba(255,255,255,.75) 5%,rgba(243,242,247,.75) 86%);
  display:flex;flex-direction:column;gap:14px;height:100%;
}
body.page-id-7139 .cards-component .single-card .text-button{display:none;}
body.page-id-7139 .step-icon{width:54px;height:54px;border-radius:8px;background:rgba(204,87,62,.10);flex-shrink:0;}
body.page-id-7139 .step-text{font-size:18px;line-height:1.5;color:#0C0621;}
body.page-id-7139 .step-text strong{font-weight:700;color:#0C0621;}

/* ---------- SPLIT: image + text, each calc(50% - 10px), alternating by order ---------- */
body.page-id-7139 .analyst-split .component-wrapper{align-items:center;gap:20px;}
/* columns = 50% - 10px each (overrides theme col-6 = 50% - 30px); never a fixed px width */
body.page-id-7139 .analyst-split .image-component,
body.page-id-7139 .analyst-split .content-component{flex:0 0 calc(50% - 10px);max-width:calc(50% - 10px);margin:0;}
/* text block: column flex so it can hug an edge; capped at 500px wide */
body.page-id-7139 .analyst-split .content-component{padding:0;display:flex;flex-direction:column;}
body.page-id-7139 .analyst-split .content-component .a-h2,
body.page-id-7139 .analyst-split .content-component .a-body{max-width:500px;width:100%;}
/* image LEFT / text RIGHT: text block hugs the right edge, 19px right padding */
body.page-id-7139 .analyst-split.a-media-left .content-component{align-items:flex-end;padding-right:19px;}
/* image RIGHT / text LEFT: text block hugs the left edge, 0 left padding */
body.page-id-7139 .analyst-split.a-media-right .content-component{align-items:flex-start;padding-left:0;}
body.page-id-7139 .analyst-split .image-component{margin:0;}
body.page-id-7139 .analyst-split .image-component img{
  display:block;width:100% !important;height:auto !important;border-radius:8px;
  aspect-ratio:10/9;object-fit:cover;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  body.page-id-7139 .analyst-h1{font-size:48px;}
  body.page-id-7139 .a-h2.a-big{font-size:44px;}
  body.page-id-7139 .a-h2{font-size:28px;}
  body.page-id-7139 .analyst-hero-copy{font-size:20px;}
}
@media (max-width:767px){
  body.page-id-7139 .analyst-h1{font-size:36px;}
  body.page-id-7139 .a-h2.a-big{font-size:34px;}
  body.page-id-7139 .analyst-feature .content-component,
  body.page-id-7139 .analyst-split .content-component{padding:0;}
  body.page-id-7139 .analyst-feature::before{display:none;}
  /* split: stack with IMAGE ON TOP, text below — for both media-left and media-right.
   * theme's .component-wrapper has flex-wrap:wrap + align-items:center, which (with column)
   * would wrap the columns side-by-side; force nowrap + stretch + auto basis for a clean stack. */
  body.page-id-7139 .analyst-split .component-wrapper{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:24px;}
  body.page-id-7139 .analyst-split.a-media-right .component-wrapper{flex-direction:column-reverse;}
  body.page-id-7139 .analyst-split .image-component,
  body.page-id-7139 .analyst-split .content-component{flex:0 0 auto;width:100%;max-width:100%;}
  body.page-id-7139 .analyst-split .content-component{align-items:flex-start;}
}

/* placeholder media — subtle border so the gray boxes read clearly on white (drop when real gifs land) */
body.page-id-7139 .analyst-feature .single-gallery-image{border:1px solid #E4E2E8;}
body.page-id-7139 .analyst-split .image-component img{border:1px solid #E4E2E8;}

/* hide theme's decorative connector line under the steps cards (not in Figma) */
body.page-id-7139 .analyst-steps .cards-component::after{display:none !important;}

/* split media: fixed height + cover so gray placeholder fills the box (aspect-ratio/height:auto conflicted) */
body.page-id-7139 .analyst-split .image-component img{height:470px !important;aspect-ratio:auto !important;object-fit:cover !important;}
@media (max-width:767px){ body.page-id-7139 .analyst-split .image-component img{height:280px !important;} }

/* placeholder fill on the split image only (gallery + image-component bg removed per request 2026-06-16) */
body.page-id-7139 .analyst-split .image-component img{ background:#D6D6D6 !important; }

/* === STEPS CARDS fixes (scope: .analyst-steps only) === */
/* 1) equal height cards */
body.page-id-7139 .analyst-steps .cards-component .row{display:flex !important;align-items:stretch !important;}
body.page-id-7139 .analyst-steps .single-card{height:auto !important;align-self:stretch !important;}
/* 2) icon is now a real <img> placed inside .step-icon (set via the card content / media library),
 *    so it is swappable from the editor. CSS only sizes/positions it — no background-image. */
body.page-id-7139 .analyst-steps .step-icon{
  background:transparent !important;
  border-radius:0 !important;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
body.page-id-7139 .analyst-steps .step-icon img{
  width:100%;height:100%;object-fit:contain;display:block;
}
/* 3) title on its own line, copy stacked below */
body.page-id-7139 .analyst-steps .step-text strong{display:block;margin-bottom:8px;}

/* === "Everything you need" section (the section containing the gallery) — only these 3 tweaks === */
/* gallery items gap = 26px */
body.page-id-7139 .gallery-component{gap:26px !important;}
/* desktop only: left text column max 510px + sticky-in-column */
@media (min-width:1025px){
  body.page-id-7139 .page-section:has(.gallery-component){overflow:clip !important;}
  body.page-id-7139 .page-section:has(.gallery-component) .content-component{
    max-width:510px !important;
    align-self:flex-start !important;
    position:sticky !important;
    top:60px !important;
  }
}

/* enable position:sticky on desktop — theme wraps content in scroll-containers (#app/body overflow-y:auto) which trap sticky; neutralise on this page only */
@media (min-width:1025px){
  body.page-id-7139{overflow:visible !important;}
  body.page-id-7139 #app{overflow:visible !important;}
}

/* gallery items: remove theme margin so the 26px gap is exact (not gap + margin) */
body.page-id-7139 .gallery-component .single-gallery-image{margin:0 !important;}

/* gallery responsive: tablet = 2 per row, mobile = full width (1 per row).
 * theme default item flex-basis is 50% which + 26px gap overflows the row -> stacks 1-up too narrow.
 * 13px = half the 26px gap, so two items + gap fill the row exactly.
 * desktop (>=1024) is untouched -> keeps its vertical stack in the right col-6 column. */
@media (min-width:768px) and (max-width:1023px){
  /* the gallery is flex-direction:column at this breakpoint (stacks items 1-up); force row+wrap for 2-up.
   * 14px (not 13 = exactly half the 26px gap) leaves ~2px slack so rounding never wraps to 1-up. */
  body.page-id-7139 .gallery-component{flex-direction:row !important;flex-wrap:wrap !important;}
  body.page-id-7139 .gallery-component .single-gallery-image{flex:0 0 calc(50% - 14px) !important;max-width:calc(50% - 14px) !important;width:calc(50% - 14px) !important;}
}
@media (max-width:767px){
  body.page-id-7139 .gallery-component .single-gallery-image{flex:0 0 100% !important;max-width:100% !important;width:100% !important;}
}
/* mobile+tablet: keep each image's natural aspect ratio (no crop / no stretch).
 * theme renders the gallery img with a fixed height + object-fit:fill, which distorts it
 * once the item gets wider on small screens; let the width drive the height instead. */
@media (max-width:1023px){
  /* give the item the image's natural aspect ratio so its height is deterministic.
   * (height:auto on the img resolved to a broken value here because item + img both auto.)
   * the img then fills the item with object-fit:cover — same ratio as the source, so no crop/stretch.
   * also beats app.css's `.gallery-component.default img{max-height:120px}` (<=1025.98px) clamp. */
  body.page-id-7139 .gallery-component .single-gallery-image{height:auto !important;aspect-ratio:325 / 216 !important;overflow:hidden;}
  body.page-id-7139 .gallery-component .single-gallery-image img{width:100% !important;height:100% !important;min-height:0 !important;max-height:none !important;object-fit:cover !important;display:block !important;aspect-ratio:auto !important;}
}

/* === Page-wide container: ALL sections 1240px to match Figma (theme default was 1440) === */
/* max-width only caps the upper bound, so smaller viewports stay fluid with theme padding. */
body.page-id-7139 .content-container{max-width:1240px !important;}

/* ============================================================
 * HOW IT WORKS (redesigned 2026-06-16) — Anomalo agent-card style.
 * Eyebrow/heading/copy live in their own WYSIWYG (untouched).
 * Cards + banners are a second WYSIWYG, wrapped here as a light-gray panel:
 *  - cards: white, light border, orange outline icon + uppercase STEP badge
 *  - banners: white card, left orange icon-box + title/text (not solid orange)
 * ============================================================ */
body.page-id-7139 .hiw-eyebrow{text-align:center;color:#CC573E;font-size:14px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 16px;}
body.page-id-7139 .hiw-intro{text-align:center;max-width:880px;margin:0 auto 40px;}

/* light-gray panel around the cards + banners block */
body.page-id-7139 .content-component:has(.hiw-cards){background:#F3F2F7;border-radius:20px;padding:40px 36px;margin-bottom:60px;}

/* 3 step cards */
body.page-id-7139 .hiw-cards{display:flex;gap:20px;margin:0 0 20px;align-items:stretch;}
body.page-id-7139 .hiw-card{flex:1 1 0;background:#fff;border:1px solid #D2D0D7;border-radius:14px;padding:24px 22px;}
body.page-id-7139 .hiw-card-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px;}
body.page-id-7139 .hiw-icon{display:inline-flex;}
body.page-id-7139 .hiw-icon img{width:30px;height:30px;display:block;}
body.page-id-7139 .hiw-step{color:#CC573E;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;line-height:1;}
body.page-id-7139 .hiw-card-title{font-size:20px;font-weight:700;color:#0C0621;line-height:1.2;margin:0 0 10px;}
body.page-id-7139 .hiw-card-text{font-size:15px;line-height:1.5;color:#3d3a47;margin:0;}

/* 2 banners: orange icon-box + title/text */
body.page-id-7139 .hiw-banners{display:flex;flex-direction:column;gap:14px;margin:0;}
body.page-id-7139 .hiw-banner{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid #D2D0D7;border-radius:12px;padding:18px 20px;}
body.page-id-7139 .hiw-banner-icon{flex-shrink:0;width:54px;height:54px;border-radius:12px;background:rgba(204,87,62,.10);display:flex;align-items:center;justify-content:center;}
body.page-id-7139 .hiw-banner-icon img{width:26px;height:26px;display:block;}
body.page-id-7139 .hiw-banner-body{flex:1;}
body.page-id-7139 .hiw-banner-title{color:#0C0621;font-size:18px;font-weight:700;line-height:1.25;margin:0 0 4px;}
body.page-id-7139 .hiw-banner-text{color:#3d3a47;font-size:15px;line-height:1.5;margin:0;}

/* mobile: stack cards, tighten panel */
@media (max-width:767px){
  body.page-id-7139 .content-component:has(.hiw-cards){padding:24px 18px;}
  body.page-id-7139 .hiw-cards{flex-direction:column;}
  body.page-id-7139 .hiw-banner{align-items:flex-start;}
}

/* === "Everything you need": space-between + 125px gap (desktop) === */
/* container 1240 -> wrapper 1270 -> col-6 gallery resolves to 605; left text stays 510. */
/* space-between: left text flush left, right gallery flush right; leftover lands as the 125px gap. */
@media (min-width:1025px){
  body.page-id-7139 .page-section:has(.gallery-component) .component-wrapper{
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
  }
}