/* Start custom CSS *//* Eyebrow: Manrope 800, uppercase, 0.08em, accent color */
.prob-eyebrow, .sol-eyebrow, .plat-eyebrow, .pf-eyebrow,
.cp-eyebrow, .bd-eyebrow, .faq-eyebrow, .wwa-eyebrow{
  display:block;
  font-family:var(--e-global-typography-secondary-font-family, 'Manrope'), Arial, sans-serif;
  font-weight:800;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--e-global-color-accent, #0E7C86);
}
.prob-eyebrow, .pf-eyebrow, .bd-eyebrow, .faq-eyebrow, .wwa-eyebrow{ margin-bottom:12px; }
.sol-eyebrow, .plat-eyebrow, .cp-eyebrow{ margin-bottom:14px; }

/* H2, 32px: the standard section heading size */
.prob-h2, .sol-h2, .cp-h2{
  font-family:var(--e-global-typography-primary-font-family, 'Manrope'), Arial, sans-serif;
  font-weight:800;
  font-size:32px;
  line-height:1.175;
  color:var(--e-global-color-9524497, #2D3042);
}
.prob-h2{ margin:0 0 40px; }
.sol-h2{ margin:0; }
.cp-h2{ margin:0 0 16px; }

/* H2, 32px, on a dark background */
/* H2, 28px: used where the heading sits beside body copy rather than standing alone */
.faq-left h2, .wwa-left h2{
  font-family:var(--e-global-typography-primary-font-family, 'Manrope'), Arial, sans-serif;
  font-weight:800;
  font-size:28px;
  line-height:1.3;
  color:var(--e-global-color-9524497, #2D3042);
}
.faq-left h2{ margin:0 0 16px; }
.wwa-left h2{ margin:0 0 18px; }

/* H2, 26px: used specifically in two-column rows where a 32px heading would crowd the layout */
.pf-text h2, .bd-copy h2{
  font-family:var(--e-global-typography-primary-font-family, 'Manrope'), Arial, sans-serif;
  font-weight:800;
  font-size:26px;
  line-height:1.3;
  color:var(--e-global-color-9524497, #2D3042);
  margin:0 0 12px;
}
.bd-copy h2{ max-width:none !important; }

/* Primary CTA button pair (solid + ghost), light background context */
.hero-btn, .plat-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:200px;
  padding:13px 20px !important;
  border-radius:8px;
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-weight:700 !important;
  font-size:14px;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.hero-btn:hover, .plat-btn:hover{ transform:translateY(-1px); }

.hero-btn-solid, .plat-btn-solid{
  background:var(--e-global-color-accent, #0E7C86);
  color:#FFFFFF !important;
}
.hero-btn-solid:hover, .plat-btn-solid:hover{
  background:var(--e-global-color-pl_tealhover, #0B6A72);
}

.hero-btn-ghost{
  background:transparent;
  border:2px solid var(--e-global-color-pl_borderstrong, #CDD0D8);
  color:var(--e-global-color-9524497, #2D3042) !important;
}
.hero-btn-ghost:hover{
  border-color:var(--e-global-color-9524497, #2D3042);
}
.plat-btn-ghost{
  background:transparent;
  border:2px solid var(--e-global-color-pl_borderdark, #6C6F7B);
  color:#FFFFFF !important;
}
.plat-btn-ghost:hover{
  border-color:#FFFFFF;
}

/* Small teal hover-link, used for section "see more" links */
.pf-link, .faq-see-all{
  display:inline-block;
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-weight:700 !important;
  text-decoration:none;
}
.pf-link{ font-size:13.5px !important; color:var(--e-global-color-accent, #0E7C86) !important; transition:transform .15s ease; }
.pf-link:hover{ color:var(--e-global-color-accent, #0E7C86) !important; transform:translateY(-2px); }
.faq-see-all{ font-size:14px !important; color:var(--e-global-color-9524497, #2D3042) !important; }
.faq-see-all:hover{ color:var(--e-global-color-accent, #0E7C86) !important; }


/* ============================================================
   SECTION: Hero Top (mark + H1 + subhead + CTAs)
   ============================================================ */

.hero-top{
  text-align:center;
  max-width:920px;
  margin:0 auto;
  padding:88px 32px;
  box-sizing:border-box;
}

.hero-mark{
  width:64px;
  height:64px;
  display:block;
  margin:0 auto 24px;
}

.hero-h1{
  font-family:'Manrope', Arial, sans-serif;
  font-weight:800;
  font-size:52px !important;
  line-height:1.1;
  color:var(--e-global-color-9524497, #2D3042);
  margin:0 0 20px;
}
.hero-accent{
  color:var(--e-global-color-accent, #0E7C86);
}

.hero-sub{
  font-family:'Inter', Arial, sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  color:#2D3042E3;
  max-width:600px;
  margin:0 auto 32px;
}

.hero-ctas{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

@media(max-width:900px){
  .hero-top{ padding:64px 32px; }
}

@media(max-width:640px){
  .hero-top{ padding:48px 24px; max-width:100%; }
  .hero-mark{ width:52px; height:52px; margin-bottom:18px; }
  .hero-h1{ font-size:34px !important; margin-bottom:16px; }
  .hero-sub{ font-size:16px; margin-bottom:24px; }
  .hero-btn{ width:auto; flex:1 1 auto; min-width:150px; }
  .showcase-frame{ aspect-ratio:2/1.35 !important; }
  .spanel{ top:auto !important; bottom:2% !important; }
}

@media(max-width:480px){
  .hero-top{ padding:48px 20px; }
  .hero-h1{ font-size:30px !important; }
  .hero-ctas{ flex-direction:column; }
  .hero-btn{ width:100%; }
}


/* ============================================================
   NEXT SECTION GOES HERE — this file grows top-to-bottom
   in the same order the sections appear on the page.
   ============================================================ */


/* ============================================================
   SECTION: Hero Graphic (stepper nav + animated showcase frame)
   ============================================================
   Depends on the JS in hero-graphic.html's <script> tag (stack/
   depth logic, progress-bar restart, stagger timing). That JS
   is unchanged by moving this CSS here - it targets these same
   class names regardless of where the CSS lives.
   ============================================================ */

.hg-wrap{
  padding:88px 32px;
  box-sizing:border-box;
}
@media(max-width:640px){
  .hg-wrap{ padding:48px 20px; }
}

/* ---- Stepper nav ---- */
.stepper-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
  margin:0 0 22px;
  position:relative;
  z-index:2;
}
.step{
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  cursor:pointer;
  position:relative;
  padding:6px;
}
.step:hover, .step:focus, .step:active{
  background:none !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  color:inherit !important;
}
.step .dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#A9AEB8;
  flex-shrink:0;
  transition:background .3s ease;
}
.step .label{
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0;
  color:#7D818C;
  transition:color .3s ease;
  white-space:nowrap;
}
.step.active .dot,.step.completed .dot{ background:var(--e-global-color-accent, #0E7C86); }
.step.active .label{ color:var(--e-global-color-9524497, #2D3042); }
.step.completed .label{ color:#7D818C; }
.step.soon{ position:relative; }
.step.soon .soon-tag{
  position:absolute;
  top:-16px;
  left:50%;
  transform:translateX(-50%);
  font-size:9px;
  color:#7D818C;
  white-space:nowrap;
}
.stline{
  width:64px;
  height:1px;
  background:#C7CBD1;
  position:relative;
  margin:0 2px;
  flex-shrink:0;
}
.stline-fill{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:0;
  background:var(--e-global-color-accent, #0E7C86);
}
.stline.completed .stline-fill{ width:100%; }
.stline.active .stline-fill{
  animation-name:linefill;
  animation-duration:8s;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
  animation-iteration-count:1;
}
.stepper-nav.paused .stline.active .stline-fill{ animation-play-state:paused; }
@keyframes linefill{ from{width:0;} to{width:100%;} }
@media(max-width:900px){
  .stline{ width:28px; }
  .step .label{ display:none; }
  .step.soon .soon-tag{ display:none; }
}

/* ---- Showcase frame ---- */
.showcase-wrap{ max-width:960px; margin:0 auto; position:relative; z-index:2; }
.showcase-frame{
  position:relative;
  width:100%;
  aspect-ratio:2/1.05;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(45,48,66,0.3) 50%,rgba(45,48,66,0.8) 100%);
}

.spanel{
  position:absolute;
  width:76%;
  left:12%;
  top:16%;
  opacity:0;
  transform:translateY(0);
  overflow:visible;
  transition:transform 2s cubic-bezier(.45,0,.2,1), opacity 1.8s ease, z-index 0s;
  pointer-events:none;
  z-index:1;
}
.spanel img{ display:block; width:100%; height:auto; filter:drop-shadow(0 35px 60px rgba(0,0,0,.35)); }
.spanel.billing-panel{ display:flex; align-items:center; justify-content:center; height:70%; background:#F7F8F9; border:1px solid var(--e-global-color-pl_border, #E2E4E9); border-radius:14px; }
.spanel.billing-panel span{ font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:var(--e-global-color-pl_muted, #8A8D9B); text-align:center; padding:0 20px; }

/* Stack slots: each panel peeks a sliver above the one in front of it (no scaling/fading). */
/* slot-0 = fully in frame (front). slot-1/2/3 = same size, shifted up so only a sliver shows above slot-0. */
.spanel.slot-0{ transform:translateY(0); opacity:1; z-index:40; pointer-events:auto; }
.spanel.slot-1{ transform:translateY(-16px); opacity:1; z-index:30; pointer-events:none; }
.spanel.slot-2{ transform:translateY(-30px); opacity:1; z-index:20; pointer-events:none; }
.spanel.slot-3{ transform:translateY(-42px); opacity:1; z-index:10; pointer-events:none; }
/* dropped = pushed down and out of the frame; .showcase-frame's overflow:hidden clips it from view */
.spanel.slot-dropped{ transform:translateY(120%); opacity:0; z-index:5; pointer-events:none; }

/* Stagger helpers: used only for the "restock" moment when all 4 rise back into formation together */
/* Used for a normal single-card drop: z-index stays put until the card has nearly */
/* finished falling, so the incoming card doesn't instantly cover it mid-fall. */
.spanel.singledrop{ transition-delay:0ms, 0ms, 1900ms; }

/* Used for the staggered restock rise: nothing is visible at the start (all faded/off-frame), */
/* so z-index can update immediately - it just needs the transform/opacity themselves staggered. */
.spanel.stagger-0{ transition-delay:0ms, 0ms, 0ms; }
.spanel.stagger-1{ transition-delay:130ms, 130ms, 130ms; }
.spanel.stagger-2{ transition-delay:260ms, 260ms, 260ms; }
.spanel.stagger-3{ transition-delay:390ms, 390ms, 390ms; }

/* Billing Workflow (outside the loop): simple crossfade on top of the stack */
.spanel.billing-active{ transform:translateY(0); opacity:1; z-index:50; pointer-events:auto; }
.spanel.billing-hidden{ opacity:0; z-index:0; pointer-events:none; }

.cgroup{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:45;
}
.cgroup.active{ pointer-events:auto; }

/* Real UI card images: each fades and rises independently, staggered so */
/* they don't all arrive at once - and only start once the main screenshot */
/* has essentially finished settling (~2s). */
.ui-card{
  position:absolute;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
  filter:drop-shadow(0 12px 24px rgba(45,48,66,.25));
  height:auto;
}
.cgroup.active .ui-card{ opacity:1; transform:translateY(0); }
.cgroup.active .ui-card:nth-of-type(1){ transition-delay:1.8s; }
.cgroup.active .ui-card:nth-of-type(2){ transition-delay:2.05s; }
.cgroup.active .ui-card:nth-of-type(3){ transition-delay:2.3s; }

.ui-card-bench-1{ top:36% !important; left:0% !important; width:34% !important; }
.ui-card-bench-2{ top:2% !important; right:6% !important; width:15% !important; }
.ui-card-bench-3{ top:46% !important; right:1% !important; width:17% !important; }

.ui-card-elig-1{ top:8% !important; left:2% !important; width:26% !important; }
.ui-card-elig-2{ top:10% !important; right:2% !important; width:20% !important; }

.ui-card-vob-1{ top:38% !important; left:0% !important; width:32% !important; }
.ui-card-vob-2{ top:4% !important; right:2% !important; width:16% !important; }
.ui-card-vob-3{ top:60% !important; right:1% !important; width:19% !important; }

.ui-card-ar-1{ top:6% !important; left:2% !important; width:18% !important; }
.ui-card-ar-2{ top:40% !important; right:1% !important; width:30% !important; }

@media(max-width:640px){
  .ui-card-bench-1{ width:44% !important; }
  .ui-card-bench-2{ width:19% !important; }
  .ui-card-bench-3{ width:22% !important; }
  .ui-card-elig-1{ width:34% !important; }
  .ui-card-elig-2{ width:28% !important; }
  .ui-card-vob-1{ width:42% !important; }
  .ui-card-vob-2{ width:23% !important; }
  .ui-card-vob-3{ width:26% !important; }
  .ui-card-ar-1{ width:25% !important; }
  .ui-card-ar-2{ width:40% !important; }
}

.sc-chip{
  position:absolute;
  background:#FFFFFF;
  border:1px solid var(--e-global-color-pl_border, #E2E4E9);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 25px 50px -16px rgba(0,0,0,.35);
  min-width:200px;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.cgroup.active .sc-chip{
  opacity:1;
  transform:translateY(0);
  transition-delay:1.8s;
}
.sc-chip-lbl{ font-family:'Manrope',Arial,sans-serif; font-weight:700; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--e-global-color-pl_muted, #8A8D9B); margin-bottom:6px; }
.sc-chip-val{ font-family:var(--e-global-typography-accent-font-family, 'Inter'),Arial,sans-serif; font-weight:800; font-size:26px; color:var(--e-global-color-9524497, #2D3042); }
.sc-chip-val.accent{ color:var(--e-global-color-accent, #0E7C86); }
.sc-chip-sub{ font-size:11px; color:var(--e-global-color-pl_muted, #8A8D9B); margin-top:4px; }

/* ---- Benchmarks panel: mini form ---- */
.mini-form{ display:flex; flex-direction:column; gap:8px; }
.mini-form .fline{ font-size:11px; color:var(--e-global-color-9524497, #2D3042); opacity:0; transform:translateY(4px); }
.spanel.active .mini-form .fline{ animation:flinein .4s ease forwards; }
.spanel.active .mini-form .fline:nth-child(1){ animation-delay:.3s; }
.spanel.active .mini-form .fline:nth-child(2){ animation-delay:1.1s; }
.spanel.active .mini-form .fline:nth-child(3){ animation-delay:1.9s; }
@keyframes flinein{ to{ opacity:1; transform:translateY(0); } }

/* ---- Eligibility panel: status flip ---- */
.status-flip{ position:relative; height:20px; overflow:hidden; }
.status-flip span{ position:absolute; left:0; top:0; font-weight:700; font-size:13px; opacity:0; }
.status-flip span.s1{ color:var(--e-global-color-pl_muted, #8A8D9B); }
.status-flip span.s2{ color:var(--e-global-color-accent, #0E7C86); }
.spanel.active .status-flip span.s1{ animation:showthen 8s ease infinite; }
.spanel.active .status-flip span.s2{ animation:showafter 8s ease infinite; }
@keyframes showthen{ 0%,5%{opacity:1;} 20%,100%{opacity:0;} }
@keyframes showafter{ 0%,20%{opacity:0;} 30%,100%{opacity:1;} }

/* ---- Live VOB panel: stepper + toast ---- */
.stepper{ display:flex; align-items:center; gap:6px; }
.stepper i{ width:8px; height:8px; border-radius:50%; background:var(--e-global-color-pl_border, #E2E4E9); display:block; }
.spanel.active .stepper i{ animation:stepglow 8s ease infinite; }
.spanel.active .stepper i:nth-child(1){ animation-delay:0s; }
.spanel.active .stepper i:nth-child(2){ animation-delay:2.7s; }
.spanel.active .stepper i:nth-child(3){ animation-delay:5.3s; }
@keyframes stepglow{ 0%,10%{background:var(--e-global-color-pl_border, #E2E4E9);} 15%,100%{background:var(--e-global-color-accent, #0E7C86);} }
.stepper span{ font-size:10px; color:var(--e-global-color-pl_muted, #8A8D9B); margin-left:4px; }
.toast{ position:absolute; display:flex; align-items:center; gap:8px; opacity:0; transform:translateX(10px); }
.spanel.active .toast{ animation:toastin 8s ease infinite; }
@keyframes toastin{ 0%,55%{opacity:0;transform:translateX(10px);} 65%,90%{opacity:1;transform:translateX(0);} 100%{opacity:0;} }

/* ---- AR Dashboard panel: growing bars ---- */
.mini-bars{ display:flex; align-items:flex-end; gap:4px; height:40px; }
.mini-bars i{ flex:1; background:var(--e-global-color-accent, #0E7C86); border-radius:2px 2px 0 0; transform:scaleY(0); transform-origin:bottom; display:block; }
.spanel.active .mini-bars i{ animation:growbar .6s ease forwards; }
.spanel.active .mini-bars i:nth-child(1){ animation-delay:.2s; }
.spanel.active .mini-bars i:nth-child(2){ animation-delay:.35s; }
.spanel.active .mini-bars i:nth-child(3){ animation-delay:.5s; }
.spanel.active .mini-bars i:nth-child(4){ animation-delay:.65s; }
.spanel.active .mini-bars i:nth-child(5){ animation-delay:.8s; }
@keyframes growbar{ to{ transform:scaleY(1); } }

@media(max-width:640px){
  .sc-chip{ max-width:70%; min-width:0; padding:12px 14px; }
}

/* ---- Stats block below the graphic ---- */
.hg-stats{
  text-align:center;
  margin-top:28px;
}
.hg-stats-title{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--e-global-color-9524497, #2D3042);
  margin:0 0 8px;
}
.hg-stats-line{
  font-family:var(--e-global-typography-secondary-font-family, 'Manrope'), Arial, sans-serif;
  font-weight:800;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--e-global-color-pl_muted, #8A8D9B);
  margin:0;
}

@media(max-width:640px){
  .hg-stats{ margin-top:20px; }
  .hg-stats-title{ font-size:14px; }
  .hg-stats-line{ font-size:12px; letter-spacing:0.05em; }
}


/* ============================================================
   SECTION: Problem (eyebrow + heading + 3 cards, scroll stagger)
   ============================================================ */

.prob-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:88px 32px;
  box-sizing:border-box;
}

.prob-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:20px;
}

.prob-card{
  background:var(--e-global-color-pl_mist, #EEF1F4);
  border:1px solid var(--e-global-color-pl_border, #E2E4E9);
  border-radius:16px;
  padding:28px;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.prob-wrap.prob-in-view .prob-card{ opacity:1; transform:translateY(0); }
.prob-wrap.prob-in-view .prob-card:nth-child(1){ transition-delay:0ms; }
.prob-wrap.prob-in-view .prob-card:nth-child(2){ transition-delay:120ms; }
.prob-wrap.prob-in-view .prob-card:nth-child(3){ transition-delay:240ms; }

.prob-card h3{
  font-family:var(--e-global-typography-primary-font-family, 'Manrope'), Arial, sans-serif;
  font-weight:700;
  font-size:20px;
  color:var(--e-global-color-9524497, #2D3042);
  margin:0 0 10px;
  line-height:1.3;
}
.prob-card p{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-size:14.5px;
  color:var(--e-global-color-text, #383B4C);
  line-height:1.6;
  margin:0 0 22px;
}
.prob-card img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
}

/* ---- Tablet (900px) ---- */
@media(max-width:900px){
  .prob-grid{ grid-template-columns:1fr 1fr; }
  .prob-card:nth-child(3){ grid-column:1 / -1; }
}

/* ---- Mobile (640px) ---- */
@media(max-width:640px){
  .prob-wrap{ padding:48px 20px; }
  .prob-h2{ font-size:26px; margin-bottom:28px; }
  .prob-grid{ grid-template-columns:1fr; gap:16px; }
  .prob-card:nth-child(3){ grid-column:auto; }
  .prob-card{ padding:20px; }
  .prob-wrap.prob-in-view .prob-card:nth-child(2){ transition-delay:80ms; }
  .prob-wrap.prob-in-view .prob-card:nth-child(3){ transition-delay:160ms; }
}


/* ============================================================
   SECTION: Solutions (icon + eyebrow + heading + 4 cards)
   ============================================================
   Background (#EEF1F4) is set on the outer container, not here.
   ============================================================ */

.sol-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:88px 32px;
  box-sizing:border-box;
}

.sol-head{
  text-align:center;
  margin-bottom:48px;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.sol-wrap.sol-in-view .sol-head{ opacity:1; transform:translateY(0); }

.sol-icon{
  width:44px;
  height:44px;
  display:block;
  margin:0 auto 14px;
}

.sol-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:20px;
}

.sol-card{
  display:block;
  background:transparent;
  border:1.5px solid var(--e-global-color-pl_border, #E2E4E9);
  border-radius:16px;
  padding:0;
  overflow:hidden;
  text-decoration:none;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease, border-color .25s ease, box-shadow .25s ease;
  box-shadow:0 1px 2px rgba(45,48,66,.04);
}
.sol-wrap.sol-in-view .sol-card{ opacity:1; transform:translateY(0); }
.sol-wrap.sol-in-view .sol-card:nth-child(1){ transition-delay:0ms, 0ms, 0ms, 0ms; }
.sol-wrap.sol-in-view .sol-card:nth-child(2){ transition-delay:100ms, 100ms, 0ms, 0ms; }
.sol-wrap.sol-in-view .sol-card:nth-child(3){ transition-delay:200ms, 200ms, 0ms, 0ms; }
.sol-wrap.sol-in-view .sol-card:nth-child(4){ transition-delay:300ms, 300ms, 0ms, 0ms; }

.sol-card:hover{
  transform:translateY(-6px);
  border-color:var(--e-global-color-accent, #0E7C86);
  box-shadow:0 20px 36px -18px rgba(45,48,66,.25);
}

.sol-card img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  margin:0;
}

.sol-body{
  padding:12px;
}
.sol-card-eyebrow{
  display:block;
  font-family:var(--e-global-typography-secondary-font-family, 'Manrope'), Arial, sans-serif;
  font-weight:800;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--e-global-color-accent, #0E7C86);
  margin-bottom:8px;
}
.sol-card h3{
  font-family:var(--e-global-typography-primary-font-family, 'Manrope'), Arial, sans-serif;
  font-weight:700;
  font-size:16px;
  color:var(--e-global-color-9524497, #2D3042);
  line-height:1.35;
  margin:0 0 12px;
}
.sol-more{
  display:inline-block;
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-size:13.5px;
  font-weight:600;
  color:var(--e-global-color-9524497, #2D3042);
  transition:color .25s ease;
}
.sol-card:hover .sol-more{ color:var(--e-global-color-accent, #0E7C86); }

/* ---- Tablet (900px) ---- */
@media(max-width:900px){
  .sol-grid{ grid-template-columns:1fr 1fr; }
}

/* ---- Mobile (640px) ---- */
@media(max-width:640px){
  .sol-wrap{ padding:48px 20px; }
  .sol-h2{ font-size:26px; }
  .sol-grid{ grid-template-columns:1fr; gap:16px; }
  .sol-wrap.sol-in-view .sol-card:nth-child(2){ transition-delay:60ms, 60ms, 0ms, 0ms; }
  .sol-wrap.sol-in-view .sol-card:nth-child(3){ transition-delay:120ms, 120ms, 0ms, 0ms; }
  .sol-wrap.sol-in-view .sol-card:nth-child(4){ transition-delay:180ms, 180ms, 0ms, 0ms; }
}

/* ---- Small mobile (480px) ---- */
@media(max-width:480px){
  .sol-card{ flex-direction:column; text-align:center; }
}


/* ============================================================
   SECTION: Platform Header (eyebrow + heading + subhead + CTAs)
   ============================================================
   Background (dark navy) is set on the outer container, not here.
   Uses two unconfirmed/improvised colors not yet in the palette:
   #FFFFFF for headings/buttons (fine, real white) and #C7CAD3 for
   the subhead (a muted-text-on-dark color that doesn't exist as
   a named token yet - flag for the brand doc if this should become
   an official "Muted, on dark" color).
   ============================================================ */

.plat-head{
  text-align:center;
  max-width:760px;
  margin:0 auto;
  padding:88px 32px;
  box-sizing:border-box;
}

.plat-h2{
  font-family:var(--e-global-typography-primary-font-family, 'Manrope'), Arial, sans-serif;
  font-weight:800;
  font-size:32px;
  line-height:1.175;
  color:#FFFFFF !important;
  margin:0 0 16px;
}

.plat-sub{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  color:#C7CAD3;
  margin:0 0 32px;
}

.plat-ctas{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

/* ---- Mobile (640px) ---- */
@media(max-width:640px){
  .plat-head{ padding:48px 24px; max-width:100%; }
  .plat-h2{ font-size:24px; }
  .plat-btn{ width:auto; flex:1 1 auto; min-width:150px; }
}

/* ---- Small mobile (480px) ---- */
@media(max-width:480px){
  .plat-head{ padding:48px 20px; }
  .plat-ctas{ flex-direction:column; }
  .plat-btn{ width:100%; }
}



/* ============================================================
   SECTION: Platform Rows - Benchmarks, Eligibility, Live VOB, AR Dashboard
   ============================================================
   Background is set on the outer container, not here. One shared
   set of rules for all 4 rows - they all use the same classes.
   ============================================================ */

.pf-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:88px 32px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.pf-wrap.pf-reverse .pf-media{ order:1; }
.pf-wrap.pf-reverse .pf-text{ order:2; }

.pf-body{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-size:14.5px;
  color:var(--e-global-color-text, #383B4C);
  line-height:1.6;
  margin:0 0 20px;
}

.pf-list{
  list-style:none;
  margin:0 0 20px;
  padding:0;
}
.pf-list li{
  position:relative;
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-size:13.5px;
  font-weight:600;
  color:var(--e-global-color-9524497, #2D3042);
  padding:11px 0 11px 24px;
  border-bottom:1px solid var(--e-global-color-pl_border, #E2E4E9);
}
.pf-list li:first-child{ border-top:1px solid var(--e-global-color-pl_border, #E2E4E9); }
.pf-list li::before{
  content:"\2713";
  position:absolute;
  left:0;
  top:11px;
  color:var(--e-global-color-accent, #0E7C86);
  font-weight:700;
}

.pf-media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
}
.pf-caption{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-style:italic;
  font-size:12.5px;
  color:var(--e-global-color-pl_muted, #8A8D9B);
  text-align:center;
  margin:14px 0 0;
}

@media(max-width:860px){
  .pf-wrap{ grid-template-columns:1fr; gap:32px; }
  .pf-wrap.pf-reverse .pf-media,
  .pf-wrap .pf-media{ order:2; }
  .pf-wrap.pf-reverse .pf-text,
  .pf-wrap .pf-text{ order:1; }
  .pf-wrap{ padding:48px 20px; }
}


/* ============================================================
   SECTION: Claims Pool (icon + eyebrow + heading + body + ticker)
   ============================================================ */

.cp-wrap{
  max-width:900px;
  margin:0 auto;
  padding:88px 32px;
  box-sizing:border-box;
  text-align:center;
}

.cp-head{
  margin-bottom:48px;
}

.cp-icon{
  width:44px;
  height:44px;
  display:block;
  margin:0 auto 14px;
}

.cp-body{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  color:var(--e-global-color-text, #383B4C);
  max-width:640px;
  margin:0 auto;
}

/* ---- Stat ticker ---- */
.stat-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:60px;
  flex-wrap:wrap;
}

.stat-item{
  text-align:center;
}

.stat-num{
  font-family:var(--e-global-typography-accent-font-family, 'Inter'), Arial, sans-serif;
  font-weight:800;
  font-size:44px;
  line-height:1.1;
  background:linear-gradient(90deg, var(--e-global-color-accent, #0E7C86) 0%, var(--e-global-color-9524497, #2D3042) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  margin-bottom:10px;
}

.stat-label{
  font-family:var(--e-global-typography-secondary-font-family, 'Manrope'), Arial, sans-serif;
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--e-global-color-text, #383B4C);
  line-height:1.5;
}

.stat-divider{
  width:1px;
  height:56px;
  background:var(--e-global-color-pl_border, #E2E4E9);
  flex-shrink:0;
}

/* ---- Mobile (640px) ---- */
@media(max-width:640px){
  .cp-wrap{ padding:48px 20px; }
  .cp-h2{ font-size:26px; }
  .stat-row{ gap:32px; }
  .stat-divider{ display:none; }
  .stat-num{ font-size:36px; }
}


/* ============================================================
   SECTION: Benchmark Demo (eyebrow + heading + CTA + interactive embed)
   ============================================================ */

.bd-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:88px 32px;
  box-sizing:border-box;
}

.bd-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:32px;
  flex-wrap:wrap;
}

.bd-sub{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-size:14px;
  color:var(--e-global-color-text, #383B4C);
  margin:0;
}

.bd-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:13px 22px !important;
  border-radius:8px;
  background:var(--e-global-color-accent, #0E7C86);
  color:#FFFFFF !important;
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-weight:700 !important;
  font-size:14px;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .15s ease, background-color .15s ease;
}
.bd-cta:hover{
  transform:translateY(-1px);
  background:var(--e-global-color-pl_tealhover, #0B6A72);
}

.bd-frame{
  position:relative;
  box-sizing:border-box;
  width:100%;
  aspect-ratio:1.80;
  min-height:360px; /* fallback in case aspect-ratio doesn't resolve in some layout contexts */
  max-height:80vh;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--e-global-color-pl_border, #E2E4E9);
}
.bd-frame iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:none;
}

.bd-play-facade{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  border:none;
  background:none;
  cursor:pointer;
  display:block;
}
.bd-play-facade img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.bd-play-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:72px;
  height:72px;
  border-radius:50%;
  background:var(--e-global-color-accent, #0E7C86);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 20px 40px -12px rgba(45,48,66,.45);
  transition:transform .15s ease, background-color .15s ease;
}
.bd-play-btn svg{ width:26px; height:26px; margin-left:2px; }
.bd-play-facade:hover .bd-play-btn{
  transform:translate(-50%, -50%) scale(1.08);
  background:var(--e-global-color-pl_tealhover, #0B6A72);
}

/* ---- Mobile (640px) ---- */
@media(max-width:640px){
  .bd-wrap{ padding:48px 20px; }
  .bd-copy h2{ font-size:21px; }
  .bd-top{ flex-direction:column; align-items:stretch; }
  .bd-cta{ width:100%; }
}


/* ============================================================
   SECTION: FAQ (no JS - native details/summary, exclusive group)
   ============================================================ */

.faq-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:88px 32px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:60px;
  align-items:start;
}

.faq-sub{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-size:14px;
  color:var(--e-global-color-text, #383B4C);
  line-height:1.6;
  margin:0 0 16px;
}

.faq-right{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

.faq-item{
  background:#FFFFFF;
  border:1px solid var(--e-global-color-pl_border, #E2E4E9);
  border-radius:12px;
  box-sizing:border-box;
  overflow:hidden;
  transition:border-color .2s ease;
}
.faq-item[open]{
  border-color:var(--e-global-color-accent, #0E7C86);
}

.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  list-style:none;
  padding:18px 20px;
  box-sizing:border-box;
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-weight:700;
  font-size:14.5px;
  color:var(--e-global-color-9524497, #2D3042);
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q::marker{ content:""; }

.faq-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--e-global-color-pl_mist, #EEF1F4);
  color:var(--e-global-color-pl_muted, #8A8D9B);
  font-size:14px;
  font-weight:700;
  flex-shrink:0;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.faq-item[open] .faq-icon{
  background:var(--e-global-color-accent, #0E7C86);
  color:#FFFFFF;
  transform:rotate(45deg);
}

.faq-a p{
  margin:0;
  padding:0 20px 18px;
  box-sizing:border-box;
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-size:13.5px;
  color:var(--e-global-color-text, #383B4C);
  line-height:1.6;
}

@media(max-width:800px){
  .faq-wrap{ grid-template-columns:1fr; gap:32px; }
  .faq-left h2{ font-size:23px; }
}
@media(max-width:640px){
  .faq-wrap{ padding:48px 20px; }
}


/* ============================================================
   SECTION: Who We Are (copy + Revenue Logic link + 2 founder cards)
   ============================================================ */

.wwa-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:88px 32px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.wwa-left{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s ease, transform .7s ease;
}
.wwa-right{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s ease .15s, transform .7s ease .15s;
}
.wwa-wrap.wwa-in-view .wwa-left,
.wwa-wrap.wwa-in-view .wwa-right{
  opacity:1;
  transform:translateY(0);
}

.wwa-left p{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-size:14.5px;
  color:var(--e-global-color-text, #383B4C);
  line-height:1.65;
  margin:0 0 16px;
}
.wwa-left p:last-child{ margin-bottom:0; }
.wwa-left a{
  color:var(--e-global-color-accent, #0E7C86);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid var(--e-global-color-pl_tealtint, #DCEEEF);
}
.wwa-left a:hover{ border-bottom-color:var(--e-global-color-accent, #0E7C86); }

.wwa-right{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}

.wwa-card{
  display:flex;
  align-items:center;
  gap:20px;
  background:var(--e-global-color-pl_mist, #EEF1F4);
  border:1px solid var(--e-global-color-pl_border, #E2E4E9);
  border-radius:14px;
  padding:20px;
  box-sizing:border-box;
}
.wwa-card img{
  width:90px;
  height:90px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  display:block;
}
.wwa-role{
  display:block;
  font-family:var(--e-global-typography-secondary-font-family, 'Manrope'), Arial, sans-serif;
  font-weight:800;
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--e-global-color-accent, #0E7C86);
  margin-bottom:4px;
}
.wwa-info h3{
  font-family:var(--e-global-typography-primary-font-family, 'Manrope'), Arial, sans-serif;
  font-weight:700;
  font-size:16px;
  color:var(--e-global-color-9524497, #2D3042);
  margin:0 0 6px;
}
.wwa-info p{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-size:12.5px;
  color:var(--e-global-color-text, #383B4C);
  line-height:1.5;
  margin:0;
}

/* ---- Tablet (900px) ---- */
@media(max-width:900px){
  .wwa-wrap{ grid-template-columns:1fr; gap:32px; }
}

/* ---- Mobile (640px) ---- */
@media(max-width:640px){
  .wwa-wrap{ padding:48px 20px; }
  .wwa-left h2{ font-size:23px; }
}

/* ---- Small mobile (480px) ---- */
@media(max-width:480px){
  .wwa-card{ flex-direction:column; text-align:center; }
}/* End custom CSS */