/* ===================== TOKENS ===================== */
:root{
  --navy:#2f3551;
  --pink:#f44fca;
  --gold:#e5c430;
  --red:#ef5737;
  --bg:#f1f4f7;
  --card:#ffffff;
  --field:#eef1f5;
  --text:#474a5d;
  --muted:#757785;
  --muted-2:#a3a5ae;
  --radius:8px;
  --shadow:0 1px 3px rgba(31,41,68,.06), 0 8px 24px rgba(31,41,68,.05);
  --nav-h:66px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}

.h-serif{font-family:"Libre Baskerville",Georgia,"Times New Roman",serif;font-weight:700;color:var(--navy);line-height:1.2;}
.lead {
    font-size: 16px !important;
    line-height: 20px;
    color: #474A5D !important;
    margin: 20px 0 20px 0;
}
.small {
    font-size: 12px !important;
    line-height: 20px;
    color: #474A5D;
    margin: 12px 0 0;
}
.roi-stats.stats-ctm {
    flex-wrap: wrap;
}
.roi-stats.stats-ctm .roi-stat {
    flex: 40%;
}
.stats-ctm .roi-val {
    font-size: 24px;
}
.stats-ctm .roi-stat {
    justify-content: center;
}
.b-logo-slider {
    margin-block: 0px 30px !important;
}
/* ===================== NAV ===================== */
.nav{
  position:sticky;top:0;z-index:50;
  background:#fff;
  border-bottom:1px solid #e7ebf1;
}
/* logo + links share the same 1200px container as the content below,
   so the nav left edge lines up with the cards */
.nav__inner{
  max-width:1200px;margin:0 auto;height:var(--nav-h);
  display:flex;align-items:center;gap:42px;
  padding:0 42px;
}
.brand{display:flex;align-items:center;gap:8px;}
.brand__name{font-size:24px;font-weight:700;color:var(--navy);letter-spacing:-.5px;}
.nav__links{display:flex;align-items:center;gap:34px;}
.nav__link{font-size:15px;font-weight:600;color:var(--navy);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--navy);display:inline-block;}
/* pinned to the extreme right edge of the viewport */
.nav__demo{
  position:absolute;top:0;right:0;height:var(--nav-h);
  display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;font-weight:700;font-size:15px;
  letter-spacing:1.2px;text-transform:uppercase;
  padding:0 46px;
}
.nav__burger{display:none;flex-direction:column;gap:5px;padding:8px;margin-left:auto;}
.nav__burger span{width:24px;height:2.5px;background:var(--navy);border-radius:2px;}
.nav__drawer{display:none;flex-direction:column;padding:12px 24px 20px;gap:14px;border-top:1px solid #e7ebf1;background:#fff;}
.nav__drawer.is-open{display:flex;}
.nav__demo--drawer{padding:14px;border-radius:var(--radius);text-align:center;}

/* ===================== STAGE / VIEWS ===================== */
.stage{position:relative;}
.wrap{max-width:1200px;margin:0 auto;padding:42px 42px 42px;}

.view{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
}
.view.is-active{
  position:relative;
  opacity:1;visibility:visible;
}

/* ===================== CARDS ===================== */
.card{background:var(--card);box-shadow:var(--shadow);}
.h-hero{font-size:40px;}
.h-side{font-size:26px;}
.h-mini{font-size:21px;}
.card h3.h-serif {
    margin: 0;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;border-radius:6px;padding:16px 24px;color:#fff;
  transition:filter .15s ease;
}
.btn:hover{filter:brightness(.96);}
.btn--block{width:100%;}
.btn--pink{background:var(--pink);color:#fff;}
.btn--gold{background:var(--gold);color:var(--navy);}

/* ----- HOME ----- */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 326px;gap:24px;align-items:stretch;}
.hero-left{display:flex;flex-direction:column;gap:24px;}
.card--hero {
    padding: 34px 36px 80px 36px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.card--hero .h-serif.h-hero{
  margin: 0 ;
}
.card--hero .hero-cta {
    margin-top: 34px;
    position: absolute;
    min-width: 100%;
    left: 0;
    bottom: 0;
    font-size: 18px;
    border-radius: 0;
    color: #FCFCFD;
}
.card--hero .hero-cta:hover {
    background: #b32c89;
}
.bullets{display:none;}
.lbl-mobile{display:none;}
.mini-row {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 24px;
}
.card--mini {
    padding: 16px 16px 16px;
    text-align: left;
}
.card--clickable{cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;}
.card--clickable h3.h-serif {
    font-size: 24px;
    margin: 0;
}
.carousel .h-serif {
    margin: 0;
    font-size: 16px;
}
.card--clickable:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(31,41,68,.12);}
.mini-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;}
.learn{display:none;color:var(--red);font-weight:700;font-size:13.5px;align-items:center;gap:6px;}
.learn .arr{font-size:10px;}

.hero-right{height:100%;}
.card--side {
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}
.card--side__top{flex:0 0 auto;}
.card--side .btn--gold{margin-top:auto;}
.card--side__top h2.h-serif {
    margin: 0;
}
.card--side button.btn {
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0;
    width: 100%;
    font-size: 16px;
    color: #2F3551;
}
.card--side__top p.small {
    font-size: 16px !important;
    line-height: 24px;
    color: #474A5D !important;
    font-weight: 300;
}

.dots{display:inline-flex;align-items:center;gap:7px;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--navy);border:none;display:inline-block;cursor:pointer;transition:background .2s ease;opacity:1;}
.dot--on{background:var(--pink);opacity:1;}
.dots .dot.dot--on{
  width: 20px;
  border-radius: 200px;
}

/* ----- carousel / slider ----- */
.cslides{position:relative;}
.cslide{opacity:0;transition:opacity .4s ease;}
.cslide.is-active{opacity:1;}
.card--mini .cslides{min-height:80px;}
.card--mini .cslide{position:absolute;left:0;right:0;top:0;margin:0;}
.card--mini .cslide.is-active{position:relative;}
.card--mini .cslide .h-mini{margin:0 0 8px;}
/* pill slider: swap the label in place */
.pill--carousel {
    width: 350px;
    justify-content: space-between;
}
.pill-slides{position:relative;flex:1;height:22px;display:block;overflow:hidden;}
.pill-slides .cslide{position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap;}

.spark{font-style:normal;}
.spark--pink{color:var(--pink);}
.spark--gold{color:var(--gold);}
.spark--red{color:var(--red);}

/* ----- tagline (hero base) ----- */
.tagline{
  font-size:14px !important;font-weight:700;color:var(--navy);
  margin:24px 0 0;letter-spacing:.01em;line-height:1.5;
}

/* ----- benefit grid (5 Benefits mini card) ----- */
.benefit-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0 8px;
  margin-top:16px;
}
.benefit-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:12px;
}
.benefit-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #474A5D;
}
.benefit-icon{width:16px;height:16px;flex-shrink:0;}

/* ----- calc placeholder image (right sidebar) ----- */
.card--side__image {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 24px 0 70px;
}
.calc-placeholder {
    width: 100%;
    height: auto;
}

/* ----- segmented controls (calculator) ----- */
.seg-control {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 0px;
}
.seg-btn {
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    color: #A3A5AE;
    background: #F1F4F7;
    border: 2px solid transparent;
    border-radius: 0px;
    padding: 4px 12px;
    cursor: pointer;
    transition: background .15s,border-color .15s,color .15s;
}
.seg-btn:hover{
  color: var(--navy);
  border-color: #f44fca;
}
.seg-btn--active {
    border-color: #f44fca;
    color: var(--navy);
}

/* ----- range sliders (calculator) ----- */
.qfield-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.qfield-header div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.qfield-value{
  font-size:26px;font-weight:800;color:var(--navy);
  letter-spacing:-0.5px;line-height:1;
}
.q-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;border-radius:6px;
  background:var(--field);outline:none;padding:0;border:none;
  box-sizing:border-box;
  cursor:pointer;margin-top:14px;display:block;
}
/* WebKit / Blink */
.q-slider::-webkit-slider-runnable-track{
  height:6px;border-radius:6px;background:transparent;
}
.q-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:4px;cursor:pointer;
  border:none;margin-top:-6px;
  box-shadow:0 1px 3px rgba(31,41,68,.25);
}
/* Firefox */
.q-slider::-moz-range-track{
  height:6px;border-radius:6px;background:transparent;
}
.q-slider::-moz-range-thumb{
  width:18px;height:18px;border-radius:4px;cursor:pointer;
  border:none;box-shadow:0 1px 3px rgba(31,41,68,.25);
}
.q-slider::-moz-range-progress{height:6px;border-radius:6px;}
.q-slider--red::-webkit-slider-thumb{background:var(--red);}
.q-slider--red::-moz-range-thumb{background:var(--red);}
.q-slider--red::-moz-range-progress{background:var(--red);}
.q-slider--pink::-webkit-slider-thumb{background:var(--pink);}
.q-slider--pink::-moz-range-thumb{background:var(--pink);}
.q-slider--pink::-moz-range-progress{background:var(--pink);}

/* ----- ROI stat blocks (calculator results) ----- */
.result-stars{display:flex;align-items:center;gap:4px;}
.result-star{width:18px;height:18px;}

.roi-stats {
    display: flex;
    gap: 0;
    margin: 0px 0 0;
    border-radius: 0px;
    overflow: hidden;
}

.roi-stats:not(.stats-ctm) > *:nth-child(1) {
    flex: 0 0 22%;
}

.roi-stats:not(.stats-ctm) > *:nth-child(2) {
    flex: 0 0 33%;
}

.roi-stats:not(.stats-ctm) > *:nth-child(3) {
    flex: 0 0 45%;
}
.roi-stat {
    flex: 1;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: space-between;
}
.card--questions button.btn {
    display: none;
}
.roi-stat--pink{background:var(--pink);}
.roi-stat--gold{background:var(--gold);}
.roi-stat--orange{background:var(--red);}
.roi-val {
    font-size: clamp(16px, 2.6vw, 30px);
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.5px;
    word-break: break-word;
    overflow-wrap: break-word;
}
.roi-stat--gold .roi-val{color:var(--navy);}
.roi-lbl{
  font-size:11px;line-height:1.35;color:rgba(255,255,255,.82);
}
.roi-stat--gold .roi-lbl{color:var(--navy);opacity:.75;}

/* mobile-only actions */
.mobile-actions{display:none;}
.qbtn{font-family:"Libre Baskerville",Georgia,serif;font-weight:400;font-size:16px;border-radius:6px;padding:14px 10px;}
.qbtn--red{background:var(--red);color:#fff;}
.qbtn--gold{background:var(--gold);color:var(--navy);}

/* ===================== VIEW TOP BAR (benefits / calc) ===================== */
.view-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:30px;}
.view-title {
    font-size: 30px;
    padding-top: 6px;
    margin: 0;
}
.pillbar{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end;}
.pill{
  background:#fff;box-shadow:var(--shadow);
  padding:0 22px;height:54px;display:inline-flex;align-items:center;gap:12px;
  font-family:"Libre Baskerville",Georgia,serif;font-size:15px;color:var(--navy);white-space:nowrap;
}
.pill--btn{cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;}
.pill--btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(31,41,68,.12);}
.home-ico{font-size:18px;}

/* ----- BENEFITS GRID -----
   6-col grid: row1 = three cards (span 2 each), row2 = two cards (span 3 each) */
.benefits-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;}
.card--benefit{padding:26px 28px 28px;grid-column:span 2;}
.card--benefit-wide{grid-column:span 3;}
.card--benefit p.small {
    font-size: 16px;
    line-height: 24px;
    color: #474A5D;
    margin: 16px 0 0;
}

/* ===================== BENEFITS ACCORDION (Hero 5 Benefits) ===================== */
.view-top__left {
    display: flex;
    align-items: baseline;
    gap: 270px;
}
.ben-counter{
  font-family:"Libre Baskerville",Georgia,serif;
  font-size:24px;color:var(--muted-2);line-height:1;padding-top:6px;
}
.ben-counter b{font-weight:700;color:var(--navy);}

.benefits-acc-grid{
  display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);
  gap:24px;align-items:stretch;
}

/* ----- left column accordion ----- */
/* webkit needs a CSS rule — pseudo-elements can't be set via inline style */
.acc::-webkit-scrollbar { display: none; }

.acc .reset-btn {
    text-align: center;
}
.acc .acc-restart {
    margin: 0;
    border-radius: 0;
    background-color: #F44FCA;
}



/* CSS owns all card and panel animations */
.acc-item {
    background: transparent;
    margin-bottom: 16px;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.35s ease, transform 0.35s ease,
                max-height 0.4s ease, margin-bottom 0.35s ease,
                background 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}
.acc-item.is-active {
    background: #FCFCFD;
    box-shadow: var(--shadow);
    border: 2px solid transparent;
}
.acc-item.is-active:hover { border-color: #f44fca; }
.acc-item.is-open:not(.is-active) {
    background-color: #FCFCFD;
    opacity: 0.5;
    transform: scale(0.97);
}
.acc-item.is-past {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    pointer-events: none;
    overflow: hidden;
}
.acc-item:not(.is-active) { cursor: pointer; }
.acc-item:not(.is-active):hover { filter: brightness(1.22); }
.acc-item[data-accent="pink"]:not(.is-active):hover{box-shadow:inset 0 0 0 2px var(--pink);}
.acc-item[data-accent="red"]:not(.is-active):hover{box-shadow:inset 0 0 0 2px var(--red);}
.acc-item[data-accent="gold"]:not(.is-active):hover{box-shadow:inset 0 0 0 2px var(--gold);}
.acc-item[data-accent="purple"]:not(.is-active):hover{box-shadow:inset 0 0 0 2px #7b3ff2;}
.acc-item[data-accent="blue"]:not(.is-active):hover{box-shadow:inset 0 0 0 2px var(--navy);}

.acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    padding: 16px 16px 22px 16px;
}
.acc-title { font-size: 24px; margin: 0; color: var(--muted-2); }
.acc-item.is-active .acc-title { color: var(--navy); }

.acc-panel {
    overflow: hidden;
    max-height: 0;
    padding: 0;
    transition: max-height 0.4s ease, padding 0.35s ease;
}
.acc-panel p {
    font-size: 16px !important;
}
.acc-item.is-open .acc-panel {
    max-height: 600px;
    padding: 0 16px 16px;
}
.acc-desc {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 24px;
    color: var(--text);
}
.acc-foot {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}
.acc-item.is-active .acc-foot { display: flex; }
.acc-learn {
    background: none; border: none; padding: 0; cursor: pointer;
    font-weight: 700; font-size: 12px; color: var(--navy);
    flex: 1; text-align: left; pointer-events: none;
}
.acc-restart {
  display: none; align-self: flex-start; margin-top: 4px;
  align-items: center; gap: 10px;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 15px;
  padding: 15px 26px; border-radius: 6px;
}
.acc-restart.is-visible { display: inline-flex; }
.acc-restart:hover { filter: brightness(1.08); }
.acc-restart__ico { font-size: 18px; line-height: 1; }
/* visual shape only — GSAP handles rotation */
.acc-caret {
  width: 9px; height: 9px; flex-shrink: 0;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
}

/* ---- expand panel — GSAP controls height/opacity/y — only visual props here ---- */
.acc-expand {
  overflow: hidden;
  border-top: 1px solid transparent;
}
.acc-item.is-expanded .acc-expand { border-top-color: #eef1f5; }
.acc-expand__title{
  font-size:13px;font-weight:700;color:var(--navy);
  margin:0 0 12px;letter-spacing:.02em;text-transform:uppercase;
}
.acc-expand__list{
  list-style:none !important;padding:0 !important;margin:0 0 16px !important;
  display:flex;flex-direction:column;gap:10px;
}
.acc-expand__list li{
  list-style:none !important;
  display:flex !important;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--text);
}
.acc-expand__list li::before{ content:none !important; }
.acc-expand__products{display:flex;flex-direction:column;gap:8px;margin-bottom:4px;}
.acc-expand__products-label{font-size:12px;font-weight:700;color:var(--navy);letter-spacing:.04em;}
.acc-expand__logos{display:flex;align-items:baseline;gap:14px;}
.acc-expand__logos .logo-star{font-size:22px;}
.acc-expand__logos .logo-dast{font-size:22px;}

/* ----- right column video ----- */
.bvideo{height:100%;display:flex;flex-direction:column;}
.bvideo-frame{
  position:relative;width:100%;flex:1 1 auto;min-height:320px;
  border-radius:6px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f44fca 0%,#f7339f 100%);
  transition:background .3s ease;
}
.bvideo-frame--pink{background:linear-gradient(135deg,#f44fca 0%,#f7339f 100%);}
.bvideo-frame--red{background:linear-gradient(135deg,#ef5737 0%,#f5774f 100%);}
.bvideo-frame--gold{background:linear-gradient(135deg,#e5c430 0%,#f0d75e 100%);}
.bvideo-frame--blue{background:linear-gradient(135deg,#2f3551 0%,#4a5277 100%);}
.bvideo-frame--purple{background:linear-gradient(135deg,#7b3ff2 0%,#a86bf5 100%);}
.bvideo-el{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:none;background:#000;
}
.bvideo-el.is-on{display:block;}
.bvideo-label{
  position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  font-family:"Libre Baskerville",Georgia,serif;font-size:22px;font-weight:700;
  color:rgba(255,255,255,.92);text-align:center;width:80%;
  text-shadow:0 1px 10px rgba(0,0,0,.18);pointer-events:none;
}
.bvideo-frame--gold .bvideo-label{color:var(--navy);text-shadow:none;}
.bvideo-play{
  position:relative;z-index:2;
  width:54px;height:54px;border-radius:8px;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.18);transition:transform .15s ease;
}
.bvideo-play:hover{transform:scale(1.06);}
.bvideo-play::before{
  content:"";display:block;margin-left:3px;
  border-left:16px solid var(--navy);
  border-top:10px solid transparent;border-bottom:10px solid transparent;
}
.bvideo-tag{
  position:absolute;right:14px;bottom:14px;z-index:2;
  background:rgba(20,22,38,.82);color:#fff;font-size:12px;font-weight:600;
  padding:5px 10px;border-radius:5px;letter-spacing:.2px;
}
.bvideo-dots{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:7px;
}
.bdot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.55);transition:width .2s ease,background .2s ease;
}
.bdot--on{width:22px;border-radius:200px;background:#fff;}
.bvideo-frame--gold .bdot{background:rgba(47,53,81,.4);}
.bvideo-frame--gold .bdot--on{background:var(--navy);}

/* ----- CALCULATOR GRID ----- */
.calc-grid {
    display: grid;
    grid-template-columns: minmax(0,420px) minmax(0,1fr);
    gap: 24px;
    align-items: stretch;
}
.card--questions {
    padding: 20px 20px 20px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.card--questions button.btn {
    border-radius: 0;
    position: absolute;
    bottom: 0;
    left: 0;
}
.qfields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.qfield {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-bottom: 2px solid #F1F4F7;
    padding-bottom: 20px;
}
.qfield p.small {
    margin: 0;
    font-size: 14px;
    color: #474A5D;
}
.qfield span {
    font-weight: 500;
    font-size: 16px;
    color: var(--navy);
    font-family: "Libre Baskerville";
}
.qfield .qfield-value {
    font-size: 48px;
    font-family: "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.qfield input:not([type="range"]){
  background:var(--field);border:none;border-radius:5px;padding:13px 14px;
  font-size:14px;color:var(--text);
}
.qfield input::placeholder{color:var(--muted-2);}
.card--questions .btn{margin-top:22px;}

.card--results {
    padding: 20px 20px 82px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.card--results a.btn {
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0;
}
.results-head{display:flex;align-items:center;justify-content:space-between;}
.results-head h2.h-results {
    margin: 0;
}
.h-results{font-size:24px;}
.sparkles{font-size:20px;display:inline-flex;gap:3px;}
.sparkles .spark{font-style:normal;}
.results-sub{font-size:20px;font-weight:400;color:var(--navy);margin:16px 0 0;line-height:1.35;}
.card--results .small {
    margin-top: 0;
}
.stats{display:flex;gap:48px;margin:30px 0 6px;flex-wrap:wrap;}
.stat b{display:block;font-size:46px;font-weight:800;color:var(--navy);letter-spacing:-1px;line-height:1;}
.stat span{display:block;font-size:13.5px;color:var(--muted);margin-top:10px;}
.recommend {
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    margin: 0px 0 0px;
    line-height: 1.4;
}
.product-logos {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 0px;
}
.product-logos div {
    display: flex;
    gap: 20px;
}
.logo-star{
  font-size:34px;font-weight:800;letter-spacing:-1px;
  background:linear-gradient(90deg,#f44fca 0%,#f76f8e 45%,#e5c430 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.logo-dast{font-size:34px;font-weight:800;letter-spacing:-1px;color:#6b6f7e;}

/* mobile-only pieces (hidden on desktop) */
.m-topbar,.m-headcard,.m-cta,.bm-nav{display:none;}



/* .acc height is controlled by GSAP — no fixed height or scroll here */

/* ===================== RESPONSIVE ===================== */
@media (max-width: 767px) {
.roi-stats .roi-stat {
    flex-direction: row-reverse;
    justify-content: space-between !important;
}
.roi-stats .roi-stat .roi-lbl {
    max-width: 130px !important;
}
  .mini-foot a.learn {
      display: none;
  }
  .tagline {
      margin: 0px 0 0;
  }
  .product-logos {
    flex-direction: column;
    align-items: baseline;
    gap: 10px !important;
  }
  .card--results {
      gap: 20px;
  }
  .roi-stats {
      display: grid;
      grid-template-columns: 1fr;
  }

  .roi-stats > *:nth-child(3) {
      grid-column: 1 / -1;
      justify-content: center;
  }
}
@media (max-width:900px){
  :root{--nav-h:58px;}
  .nav__inner{padding-left:20px;padding-right:0;gap:0;}
  .nav__links{display:none;}
  .nav__demo{display:none;}
  .nav__burger{display:flex;}
  .brand__name{font-size:21px;}

  .wrap{padding:18px 16px 40px;}

  .m-headcard.m-headcard--gold {
    background: transparent;
    padding: 30px 0;
  }  
  .m-headcard.m-headcard--gold h3.h-serif {
    font-size: 24px;
  }
  .view--benefits .m-headcard.m-headcard--red.bm-head {
    background: transparent;
    padding: 30px 0;
    margin: 0;
  }
  .view--benefits .m-headcard.m-headcard--red.bm-head h3.h-serif {
    font-size: 24px;
    color: #2f3551;
  }
  .view--benefits .m-headcard.m-headcard--red.bm-head .bm-counter {
    color: #2f3551;
    font-size: 24px;
  }

  /* HOME */
  .mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
  .hero-grid{grid-template-columns:1fr;gap:16px;}
  .hero-right{display:none;}
  .mini-row{grid-template-columns:1fr;}
  .card--mini.card--clickable{display:none;}      /* 5-benefits card -> top button on mobile */
  .card--hero {
      padding: 24px 22px 80px 22px;
  }
  .mini-foot {
      align-items: start;
      flex-direction: column;
      gap: 20px;
  }
  .h-hero{font-size:24px;}
  .card--hero .lead {
      font-size: 16px;
      margin-top: 14px;
      line-height: 20px;
  }
  .bullets{display:flex;flex-direction:column;gap:12px;list-style:none;padding:0;margin:22px 0 0;font-size:14px;color:var(--text);}
  .bullets li{display:flex;align-items:center;gap:10px;}
  .card--hero .hero-cta{margin-top:30px;}
  .lbl-desktop{display:none;}
  .lbl-mobile{display:inline;}
  .learn {
      display: inline-flex;
      width: 100%;
      justify-content: space-between;
  }
  .h-mini{font-size:19px;}

  .qbtn {
      border-radius: 0;
  }

  /* shared view top -> hide desktop pillbar, show mobile topbar */
  .view-top{display:none;}
  .m-topbar{display:grid;grid-template-columns:54px 1fr;gap:14px;margin-bottom:16px;}
  .m-back{background:var(--navy);color:#fff;border-radius:0px;font-size:16px;display:flex;align-items:center;justify-content:center;}
  .m-headcard{display:block;border-radius:var(--radius);padding:20px 22px;margin-bottom:16px;}
  .m-headcard--red .h-serif {
      color: #fff;
      margin: 0;
  }
  .m-headcard--red {
      background: var(--red);
      margin: 0;
      border-radius: 0;
  }
  .m-headcard--red .h-serif{color:#fff;}
  .m-headcard--red .small{color:#ffe6df;}
  .m-headcard--gold {
      background: var(--gold);
      border-radius: 0;
      margin: 0;
  }
  .m-headcard--gold .h-serif{color:var(--navy);margin: 0;}
  .m-headcard--gold .small{color:#6a5a16;}

  /* BENEFITS (mobile carousel per Figma "5 Benefits of Bright") */
  .benefits-grid{grid-template-columns:1fr;gap:1px;}
  .card--benefit{padding:20px 22px;}

  /* red header: title + counter on one row */
  .bm-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 20px;
      margin-bottom: 20px;
  }
  .bm-head .h-serif{font-size:20px;}
  .bm-counter{font-family:"Libre Baskerville",Georgia,serif;color:#fff;font-size:18px;}

  /* stack: video on top, the single active benefit below */
  .benefits-acc-grid{display:flex;flex-direction:column;gap:0;}
  .bvideo{order:-1;height:auto;}
  .bvideo-frame{aspect-ratio:unset;min-height:0;border-radius:0;}
  .bvideo-label{display:none;}

  .acc{gap:0;}
  .acc-item{display:none;}
  .acc-item.is-active{display:block;opacity:1;background:#fff;box-shadow:none;border-radius:0;}
  .acc-item.is-active .acc-head{padding:20px 20px 12px;}
  .acc-title{font-size:24px;}
  .acc-item.is-active .acc-panel{ max-height: none; padding:0 20px 20px; }
  .acc-foot{border-top:none;padding-top:4px;}
  .acc-restart{display:none !important;}
  

  /* bottom action bar: prev | Request a Demo | next */
  .bm-nav{display:grid;grid-template-columns:60px 1fr 60px;margin-top:0;}
  .bm-arrow{background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;padding:18px 0;}
  .bm-demo{background:var(--red);color:#fff;font-family:"Libre Baskerville",Georgia,serif;font-size:16px;display:flex;align-items:center;justify-content:center;padding:18px 0;}
  .bm-demo:hover{filter:brightness(.97);}
  .m-cta{display:flex;align-items:center;justify-content:center;width:100%;font-weight:700;font-size:15px;border-radius:6px;padding:16px;margin-top:18px;}
  .m-cta--pink {
      background: var(--pink);
      color: #fff;
      border-radius: 0;
      margin: 0;
  }

  /* CALCULATOR */
  .calc-grid{grid-template-columns:1fr;gap:16px;}
  .card--results {
      order: 1;
      padding: 22px 22px 80px 22px;
      position: relative;
  }
  .card--results a.btn {
      border-radius: 0;
      position: absolute;
      bottom: 0;
      left: 0;
  }
  .card--questions{order:0;} 
  .stats{gap:18px;}
  .stat b{font-size:30px;}
  .stat span{font-size:11px;}
  .product-logos{gap:30px;}
  .logo-star,.logo-dast{font-size:30px;}
  .recommend{font-size:14px;}
  .roi-stats{flex-direction:column;border-radius:0;}
  .roi-val{font-size:20px;}
  .seg-control{gap:4px;}
  .seg-btn{font-size:11px;padding:4px 9px;}
}

@media (max-width:430px){
  .mobile-actions{gap:10px;}
  .qbtn{font-size:15px;padding:13px 6px;}
}